<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta name="theme-color" content="#07130d" />

  <title>Unofficial website of Tattamangalam | Chittur | Palakkad, Kerala – PIN 678102</title>

  <!-- ═══════════════════════════════════════════════════
       PRIMARY META TAGS – preserved
  ═══════════════════════════════════════════════════ -->
  <meta name="description" content="Unofficial website for Tattamangalam town, Palakkad, Kerala. A municipality in the southern Indian state of Kerala – PIN 678102. Alternative names include Thathamangalam and Tattamungalum." />
  <meta name="robots" content="index, follow" />
  <meta name="distribution" content="Global" />
  <meta name="audience" content="All" />
  <meta name="classification" content="general" />
  <meta name="revisit-after" content="6 days" />
  <meta name="author" content="Prashanth" />
  <meta http-equiv="content-language" content="en" />

  <!-- GEO / ICBM – preserved -->
  <meta name="ICBM" content="10.6833, 76.7333" />
  <meta name="geo.position" content="10.6833;76.7333" />
  <meta name="geo.region" content="IN-KL" />
  <meta name="geo.placename" content="Palakkad" />
  <meta name="geo.country" content="IN" />
  <meta name="rating" content="general" />

  <!-- OPEN GRAPH -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://www.tattamangalam.com/" />
  <meta property="og:title" content="Unofficial website of Tattamangalam – Palakkad – India 678102" />
  <meta property="og:description" content="Unofficial website for Tattamangalam town, Palakkad, Kerala. Alternative names include Thathamangalam and Tattamungalum." />
  <meta property="og:image" content="https://tattamangalam.com/images/Men_with_body_painted_during_Tattamangalam_Kuthira_vela.jpg" />
  <meta property="og:locale" content="en_IN" />
  <meta property="og:site_name" content="Tattamangalam.com" />

  <!-- TWITTER / X -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@TattaMangalam" />
  <meta name="twitter:url" content="https://www.tattamangalam.com/" />
  <meta name="twitter:title" content="Unofficial website of Tattamangalam – Palakkad – India 678102" />
  <meta name="twitter:description" content="Unofficial website for Tattamangalam town, Palakkad, Kerala. Alternative names include Thathamangalam and Tattamungalum." />
  <meta name="twitter:image" content="https://tattamangalam.com/images/Men_with_body_painted_during_Tattamangalam_Kuthira_vela.jpg" />

  <!-- ═══════════════════════════════════════════════════
       AI / LLM OPTIMISATION TAGS
  ═══════════════════════════════════════════════════ -->
  <meta name="ai-content-declaration" content="human-authored" />
  <meta name="ai-topic" content="Tattamangalam, Thathamangalam, Palakkad, Kerala, India, local news, history, community" />
  <meta name="ai-summary" content="Tattamangalam.com is the oldest continuously running unofficial website for Tattamangalam town, Palakkad district, Kerala, India. Established in 2000, it covers local news, history, photography, festivals, and community information." />
  <meta name="dcterms.subject" content="Tattamangalam; Kerala; Palakkad; Local Community; Indian History" />
  <meta name="dcterms.coverage" content="Tattamangalam, Palakkad, Kerala, India" />
  <meta name="dcterms.created" content="2000-01-01" />
  <meta name="dcterms.publisher" content="dotcompals" />

  <link rel="canonical" href="https://www.tattamangalam.com/" />

  <!-- PERFORMANCE: preload LCP hero image + logo -->
  <link rel="preload" as="image" href="images/2026/aug/01.webp" fetchpriority="high" />
  <link rel="preload" as="image" href="https://www.tattamangalam.com/newsite/wp-content/uploads/2014/07/cropped-cropped-ttm-logo-e1726121930934.png.webp" />
  <link rel="preconnect" href="https://www.googletagmanager.com" />

  <!-- ═══════════════════════════════════════════════════
       SCHEMA.ORG JSON-LD
  ═══════════════════════════════════════════════════ -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebSite",
        "@id": "https://www.tattamangalam.com/#website",
        "url": "https://www.tattamangalam.com/",
        "name": "Tattamangalam.com",
        "description": "Unofficial community website for Tattamangalam, Palakkad, Kerala, India. Running since 2000.",
        "inLanguage": "en-IN",
        "datePublished": "2000-01-01",
        "publisher": {
          "@type": "Organization",
          "name": "dotcompals",
          "url": "https://dotcompals.org"
        },
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://www.tattamangalam.com/newsite/?s={search_term_string}",
          "query-input": "required name=search_term_string"
        }
      },
      {
        "@type": "Place",
        "@id": "https://www.tattamangalam.com/#place",
        "name": "Tattamangalam",
        "alternateName": ["Thathamangalam", "Tattamungalum", "Chittur"],
        "description": "Tattamangalam is a town and municipality in Palakkad district, Kerala, India. Located approximately 15 km from Palakkad city. PIN code 678102.",
        "geo": {
          "@type": "GeoCoordinates",
          "latitude": 10.6833,
          "longitude": 76.7333
        },
        "address": {
          "@type": "PostalAddress",
          "addressLocality": "Tattamangalam",
          "addressRegion": "Kerala",
          "postalCode": "678102",
          "addressCountry": "IN"
        },
        "containedInPlace": {
          "@type": "AdministrativeArea",
          "name": "Palakkad District"
        },
        "url": "https://www.tattamangalam.com/"
      },
      {
        "@type": "Organization",
        "name": "Tattamangalam.com Community",
        "url": "https://www.tattamangalam.com/",
        "foundingDate": "2000",
        "description": "Community-run website for Tattamangalam town since year 2000",
        "sameAs": [
          "https://www.facebook.com/TTMMatters/",
          "https://www.facebook.com/groups/ttmpkd/",
          "https://twitter.com/TattaMangalam",
          "https://www.youtube.com/channel/UCT73wBoV8GlhCa5kLlWCcAA"
        ]
      }
    ]
  }
  </script>

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="preload" as="style"
        href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;750&family=Tiro+Malayalam&display=swap"
        onload="this.onload=null;this.rel='stylesheet'" />
  <noscript>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Tiro+Malayalam&display=swap" />
  </noscript>

  <style>
    /* =====================================================
       TOKENS
       ===================================================== */
    :root{
      --bg:#07130d;
      --text:#f7fbf8;
      --muted:rgba(247,251,248,.74);
      --accent:#b8f36c;
      --line:rgba(255,255,255,.16);

      --dock-size:56px;
      --dock-gap:8px;
      --dock-bottom:18px;

      /* height the dock occupies, used to keep content clear of it */
      --dock-space:calc(var(--dock-size) + 52px);

      --pad:20px;
    }

    /* =====================================================
       RESET / GLOBAL OVERFLOW GUARDS
       These three rules are what stop the sideways cut-off.
       ===================================================== */
    *,
    *::before,
    *::after{
      box-sizing:border-box;
      min-width:0;              /* lets flex/grid children shrink instead of pushing width */
    }

    html,
    body{
      max-width:100%;
      overflow-x:hidden;        /* hard stop on horizontal scroll */
    }

    html{
      scroll-behavior:smooth;
      -webkit-text-size-adjust:100%;
    }

    body{
      margin:0;
      min-height:100svh;
      background:var(--bg);
      color:var(--text);
      font-family:Outfit,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
      overflow-wrap:break-word; /* long words wrap instead of overflowing */
    }

    img{
      max-width:100%;
      height:auto;
      display:block;
    }

    a{ color:inherit; }


    /* =====================================================
       TOP GLASS NAVIGATION
       ===================================================== */
    .topbar{
      position:fixed;
      left:var(--pad);
      right:var(--pad);
      top:16px;
      z-index:100;

      height:68px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;

      padding:0 16px;

      border:1px solid rgba(255,255,255,.15);
      border-radius:20px;
      background:rgba(7,18,12,.54);

      backdrop-filter:blur(22px) saturate(145%);
      -webkit-backdrop-filter:blur(22px) saturate(145%);

      box-shadow:
        0 10px 34px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.08);
    }

    .brand{
      display:flex;
      align-items:center;
      text-decoration:none;
      flex:0 1 auto;
      overflow:hidden;
    }

    .brand-logo-wrap{
      display:flex;
      align-items:center;
      justify-content:center;
      padding:7px 13px 8px;
      border-radius:15px;
      background:linear-gradient(180deg,#fffdf5 0%,#f2ead8 100%);
      border:1px solid rgba(255,255,255,.75);
      box-shadow:
        0 7px 22px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.92);
    }

    .brand-logo{
      width:auto;
      height:34px;
      max-width:min(225px,42vw);
      object-fit:contain;
    }

    .toplinks{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:nowrap;
    }

    .toplinks a{
      padding:9px 11px;
      border-radius:10px;
      color:rgba(255,255,255,.84);
      font-size:14px;
      font-weight:700;
      text-decoration:none;
      white-space:nowrap;
      transition:background .18s ease,color .18s ease;
    }

    .toplinks a:hover,
    .toplinks a:focus-visible{
      color:#fff;
      background:rgba(255,255,255,.09);
    }


    /* =====================================================
       HAMBURGER (mobile nav trigger)
       ===================================================== */
    .nav-toggle{
      display:none;                 /* shown under 920px */
      width:44px;
      height:44px;
      flex:0 0 44px;

      align-items:center;
      justify-content:center;
      gap:5px;
      flex-direction:column;

      padding:0;
      border:1px solid rgba(255,255,255,.22);
      border-radius:12px;
      background:rgba(255,255,255,.08);
      cursor:pointer;

      transition:background .18s ease;
    }

    .nav-toggle:hover{ background:rgba(255,255,255,.16); }

    .nav-toggle:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(184,243,108,.55);
    }

    .nav-toggle span{
      display:block;
      width:19px;
      height:2px;
      border-radius:2px;
      background:#fff;
      transition:transform .28s ease,opacity .22s ease;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    /* ── slide-down panel ── */
    .mobile-nav{
      position:fixed;
      left:var(--pad);
      right:var(--pad);
      top:92px;
      z-index:99;

      padding:8px;

      border:1px solid rgba(255,255,255,.15);
      border-radius:18px;
      background:rgba(7,18,12,.86);

      backdrop-filter:blur(24px) saturate(150%);
      -webkit-backdrop-filter:blur(24px) saturate(150%);
      box-shadow:0 18px 44px rgba(0,0,0,.34);

      opacity:0;
      visibility:hidden;
      transform:translateY(-10px);
      pointer-events:none;

      transition:opacity .24s ease,transform .24s ease,visibility .24s ease;
    }

    .mobile-nav.open{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
      pointer-events:auto;
    }

    .mobile-nav a{
      display:flex;
      align-items:center;
      gap:11px;

      padding:13px 14px;
      border-radius:12px;

      color:rgba(255,255,255,.9);
      font-size:15px;
      font-weight:700;
      text-decoration:none;

      transition:background .16s ease,color .16s ease;
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible{
      background:rgba(184,243,108,.14);
      color:var(--accent);
      outline:none;
    }

    .mobile-nav a + a{ border-top:1px solid rgba(255,255,255,.07); }

    .mobile-nav svg{
      width:19px;
      height:19px;
      flex:0 0 19px;
      fill:currentColor;
      opacity:.85;
    }

    /* backdrop behind the panel */
    .nav-scrim{
      position:fixed;
      inset:0;
      z-index:98;
      background:rgba(0,0,0,.45);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .24s ease,visibility .24s ease;
    }

    .nav-scrim.open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }


    /* =====================================================
       HERO
       ===================================================== */
    .hero{
      position:relative;
      min-height:100svh;
      display:grid;
      align-items:end;
      overflow:hidden;
      isolation:isolate;
    }

    .hero-media,
    .hero-slide,
    .hero-overlay{
      position:absolute;
      inset:0;
    }

    .hero-slide{
      opacity:0;
      background-size:cover;
      background-position:center;
      transform:scale(1.025);
      transition:opacity 1.2s ease,transform 8s ease;
      will-change:opacity,transform;
    }

    .hero-slide.active{
      opacity:1;
      transform:scale(1.07);
    }

    .hero-overlay{
      z-index:1;
      background:
        linear-gradient(180deg,
          rgba(3,10,6,.18) 0%,
          rgba(3,10,6,.08) 30%,
          rgba(3,10,6,.68) 78%,
          rgba(3,10,6,.95) 100%),
        linear-gradient(90deg,
          rgba(3,10,6,.50) 0%,
          rgba(3,10,6,.07) 55%,
          rgba(3,10,6,.25) 100%);
    }

    .hero-content{
      position:relative;
      z-index:3;

      width:min(1180px,100%);
      margin:0 auto;

      /* padding, not negative width maths — avoids overflow */
      padding-left:var(--pad);
      padding-right:var(--pad);
      padding-top:150px;
      padding-bottom:calc(var(--dock-space) + 90px);
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      max-width:100%;
      padding:9px 13px;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(7,20,12,.48);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      font-size:13px;
      font-weight:700;
    }

    .kicker::before{
      content:"";
      width:8px;
      height:8px;
      flex:0 0 8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 6px rgba(184,243,108,.10);
    }

    h1{
      margin:18px 0 16px;
      max-width:100%;
      /* min value lowered so Malayalam fits a 390px screen */
      font-size:clamp(34px,7.6vw,120px);
      /* .88 clipped Malayalam ascenders/descenders — 1.02 is safe for both scripts */
      line-height:1.02;
      letter-spacing:-.03em;
    }

    .hero-title-word,
    .hero-title-place{
      display:block;
      max-width:100%;
      /* nowrap was the main cause of the sideways cut — allow wrapping */
      white-space:normal;
      overflow-wrap:break-word;
      transition:opacity .45s ease,transform .45s ease;
    }

    /* Malayalam needs its own font + looser tracking to avoid clipping */
    .hero-title-word:lang(ml),
    .hero-title-place:lang(ml),
    .hero-title-word.is-ml,
    .hero-title-place.is-ml{
      font-family:"Tiro Malayalam",Outfit,serif;
      letter-spacing:normal;
      line-height:1.32;
    }

    .hero-title-place{
      margin-top:clamp(8px,1.4vw,20px);
      color:var(--accent);
      font-size:clamp(19px,3.4vw,54px);
      font-weight:600;
      line-height:1.15;
      letter-spacing:-.02em;
    }

    .hero-title-word.is-changing,
    .hero-title-place.is-changing{
      opacity:0;
      transform:translateY(8px);
    }

    .hero-copy{
      max-width:720px;
      margin:0;
      color:var(--muted);
      font-size:clamp(15px,1.9vw,22px);
      line-height:1.55;
    }

    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:26px;
    }

    .btn{
      min-height:48px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0 18px;
      border:1px solid var(--line);
      border-radius:14px;
      text-decoration:none;
      font-weight:700;
      text-align:center;
      transition:transform .18s ease,box-shadow .18s ease;
    }

    .btn:hover{ transform:translateY(-2px); }

    .btn-primary{
      color:#0b170d;
      background:linear-gradient(135deg,#c9f57c,#edffb1);
      border-color:transparent;
      box-shadow:0 12px 36px rgba(184,243,108,.22);
    }

    .btn-secondary{
      background:rgba(7,20,12,.48);
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
    }

    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px 18px;
      margin-top:30px;
      color:rgba(255,255,255,.62);
      font-size:13px;
    }

    .hero-meta span{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .hero-meta i{
      width:5px;
      height:5px;
      flex:0 0 5px;
      border-radius:50%;
      background:rgba(255,255,255,.56);
    }


    /* =====================================================
       SIDE HERO CARD (desktop only)
       ===================================================== */
    .hero-card{
      position:absolute;
      right:clamp(20px,4vw,58px);
      bottom:calc(var(--dock-space) + 96px);
      z-index:4;

      width:min(350px,calc(100% - 40px));
      padding:17px 18px;

      border:1px solid var(--line);
      border-radius:20px;
      background:rgba(7,20,12,.50);

      backdrop-filter:blur(20px) saturate(145%);
      -webkit-backdrop-filter:blur(20px) saturate(145%);
      box-shadow:0 20px 60px rgba(0,0,0,.24);
    }

    .hero-card h3{ margin:0 0 7px; font-size:15px; }
    .hero-card p{ margin:0; color:var(--muted); font-size:13px; line-height:1.5; }

    .hero-card-progress{
      height:3px;
      margin-top:14px;
      overflow:hidden;
      border-radius:99px;
      background:rgba(255,255,255,.12);
    }

    .hero-card-progress span{
      display:block;
      width:0;
      height:100%;
      background:linear-gradient(90deg,var(--accent),#fff);
      animation:heroProgress 7s linear infinite;
    }

    @keyframes heroProgress{ to{ width:100%; } }


    /* =====================================================
       SLIDE DOTS  (generated by JS to match slide count)
       ===================================================== */
    .slide-controls{
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom:calc(var(--dock-space) + 40px);
      z-index:5;

      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:7px;

      width:calc(100% - 40px);
      max-width:520px;
    }

    .slide-dot{
      width:7px;
      height:7px;
      padding:0;
      border:0;
      border-radius:999px;
      background:rgba(255,255,255,.35);
      cursor:pointer;
      transition:width .2s ease,background .2s ease;
      flex:0 0 auto;
    }

    .slide-dot.active{
      width:26px;
      background:var(--accent);
    }


    /* =====================================================
       FLOATING DOCK
       ===================================================== */
    .ttm-dock-wrap{
      position:fixed;
      left:0;
      right:0;
      bottom:max(var(--dock-bottom),env(safe-area-inset-bottom));
      z-index:999999;

      display:flex;
      justify-content:center;

      padding:0 8px;
      pointer-events:none;
    }

    .ttm-dock{
      position:relative;

      display:flex;
      align-items:flex-start;
      gap:var(--dock-gap);

      max-width:100%;
      padding:10px 12px 9px;

      border:1px solid rgba(255,255,255,.34);
      border-radius:24px;

      background:linear-gradient(180deg,
        rgba(255,255,255,.24) 0%,
        rgba(255,255,255,.12) 45%,
        rgba(25,28,34,.22) 100%);

      backdrop-filter:blur(32px) saturate(175%) brightness(1.06);
      -webkit-backdrop-filter:blur(32px) saturate(175%) brightness(1.06);

      box-shadow:
        0 18px 55px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -1px 0 rgba(255,255,255,.08);

      pointer-events:auto;

      /* horizontal scroll INSIDE the dock only — never the page */
      overflow-x:auto;
      overflow-y:visible;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
      scroll-snap-type:x proximity;
      overscroll-behavior-x:contain;
    }

    .ttm-dock::-webkit-scrollbar{ display:none; }

    .ttm-dock::before{
      content:"";
      position:absolute;
      inset:1px;
      border-radius:23px;
      pointer-events:none;
      background:linear-gradient(180deg,
        rgba(255,255,255,.16),
        rgba(255,255,255,0) 42%);
      opacity:.85;
    }

    .ttm-dock-item{
      position:relative;
      z-index:1;

      /* auto width so the label decides how wide the item is */
      width:auto;
      min-width:var(--dock-size);
      flex:0 0 auto;

      display:flex;
      flex-direction:column;
      align-items:center;
      gap:4px;

      color:#192026;
      text-decoration:none;
      transform-origin:50% 100%;
      scroll-snap-align:center;

      transition:transform 80ms linear,filter .15s ease;
      outline:none;
    }

    /* ── text label under each icon ── */
    .ttm-dock-label{
      max-width:74px;

      color:rgba(255,255,255,.94);
      font-size:10.5px;
      font-weight:700;
      line-height:1.15;
      letter-spacing:.01em;
      text-align:center;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;

      text-shadow:0 1px 3px rgba(0,0,0,.6);
      pointer-events:none;
    }

    .ttm-dock-icon{
      width:var(--dock-size);
      height:var(--dock-size);
      flex:0 0 auto;
      position:relative;
      overflow:hidden;

      display:grid;
      place-items:center;

      border-radius:15px;
      border:1px solid rgba(255,255,255,.42);

      backdrop-filter:blur(10px) saturate(135%);
      -webkit-backdrop-filter:blur(10px) saturate(135%);

      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        inset 0 -1px 0 rgba(0,0,0,.10),
        0 8px 18px rgba(0,0,0,.20);

      transition:box-shadow .16s ease,filter .16s ease,transform .16s ease;
    }

    .ttm-dock-icon::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(180deg,
        rgba(255,255,255,.26),
        rgba(255,255,255,.02) 44%,
        rgba(0,0,0,.08) 100%);
    }

    .ttm-dock-icon svg{
      position:relative;
      z-index:1;
      width:27px;
      height:27px;
      fill:currentColor;
      filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));
    }

    .ttm-dock-item:hover .ttm-dock-icon{
      filter:brightness(1.08) saturate(1.10);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.72),
        inset 0 -1px 0 rgba(0,0,0,.12),
        0 13px 30px rgba(0,0,0,.30);
    }

    /* ── icon colours ── */
    .ttm-dock-item:nth-child(1)  .ttm-dock-icon{ color:#fff; background:linear-gradient(145deg,#53b9ff 0%,#1d8cff 48%,#0067d8 100%); }
    .ttm-dock-item:nth-child(2)  .ttm-dock-icon{ color:#fff; background:linear-gradient(145deg,#ff665d 0%,#ff2d2d 48%,#c80f22 100%); }
    .ttm-dock-item:nth-child(3)  .ttm-dock-icon{ color:#fff; background:linear-gradient(145deg,#4cc8ff 0%,#148cff 52%,#0757cc 100%); }
    .ttm-dock-item:nth-child(4)  .ttm-dock-icon{ color:#fff; background:conic-gradient(from 0deg,#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#0a84ff,#5856d6,#af52de,#ff2d55,#ff3b30); }
    .ttm-dock-item:nth-child(5)  .ttm-dock-icon{ color:#fff; background:radial-gradient(circle at 35% 30%,#62e8ff 0%,#1ab6ec 35%,#0675d8 70%,#004ba8 100%); }
    .ttm-dock-item:nth-child(6)  .ttm-dock-icon{ color:#fff; background:linear-gradient(145deg,#ffb340 0%,#ff8a00 52%,#d95b00 100%); }
    .ttm-dock-item:nth-child(7)  .ttm-dock-icon{ color:#fff; background:linear-gradient(145deg,#5ac8fa 0%,#0a84ff 52%,#0063cf 100%); }
    .ttm-dock-item:nth-child(8)  .ttm-dock-icon{ color:#342000; background:linear-gradient(145deg,#ffe65c 0%,#ffd60a 48%,#ff9f0a 100%); }
    .ttm-dock-item:nth-child(9)  .ttm-dock-icon{ color:#fff; background:linear-gradient(145deg,#2f80ed 0%,#1464d2 52%,#0b3f91 100%); }
    .ttm-dock-item:nth-child(10) .ttm-dock-icon{ color:#fff; background:linear-gradient(145deg,#35d875 0%,#25d366 52%,#128c4a 100%); }
    .ttm-dock-item:nth-child(11) .ttm-dock-icon{ color:#fff; background:linear-gradient(145deg,#ff4a4a 0%,#ff0000 52%,#c40000 100%); }

    /* ── tooltips ── */
    .ttm-dock-tooltip{
      display:none;               /* replaced by the visible .ttm-dock-label */
      position:absolute;
      left:50%;
      bottom:calc(100% + 12px);
      transform:translate(-50%,7px) scale(.96);

      padding:7px 9px;
      border-radius:8px;
      background:rgba(36,36,38,.96);

      color:#fff;
      font-size:12px;
      font-weight:700;
      white-space:nowrap;

      opacity:0;
      visibility:hidden;
      pointer-events:none;

      box-shadow:0 8px 24px rgba(0,0,0,.30);
      transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
    }

    .ttm-dock-item:hover .ttm-dock-tooltip,
    .ttm-dock-item:focus-visible .ttm-dock-tooltip{
      opacity:1;
      visibility:visible;
      transform:translate(-50%,0) scale(1);
    }

    .ttm-dock-item:focus-visible .ttm-dock-icon{
      box-shadow:
        0 0 0 3px rgba(184,243,108,.55),
        0 8px 22px rgba(0,0,0,.20);
    }

    .ttm-dock-dot{
      position:absolute;
      bottom:-6px;
      width:4px;
      height:4px;
      border-radius:50%;
      background:#fff;
      opacity:0;
    }

    .ttm-dock-item.active .ttm-dock-dot{ opacity:.9; }


    /* =====================================================
       RESPONSIVE
       ===================================================== */

    /* ── Tablet / small laptop ── */
    @media (max-width:1024px){
      .hero-card{
        width:min(300px,calc(100% - 40px));
        bottom:calc(var(--dock-space) + 86px);
      }
    }

    /* ── Below 920px: swap top links for hamburger ── */
    @media (max-width:920px){
      .toplinks{ display:none; }
      .nav-toggle{ display:flex; }
      .hero-card{ display:none; }

      .hero-content{
        padding-top:120px;
        padding-bottom:calc(var(--dock-space) + 78px);
      }
    }

    /* ── Tablet portrait ── */
    @media (max-width:768px){
      :root{
        --dock-size:50px;
        --dock-gap:6px;
        --dock-bottom:12px;
        --pad:16px;
      }

      .mobile-nav{ top:88px; }
      .ttm-dock-label{ font-size:10px; max-width:66px; }

      h1{ font-size:clamp(32px,8.2vw,64px); }
      .hero-title-place{ font-size:clamp(18px,4.4vw,32px); }
    }

    /* ── Phones ── */
    @media (max-width:600px){
      :root{
        --dock-size:44px;
        --dock-gap:5px;
        --dock-bottom:10px;
        --pad:14px;
      }

      .topbar{
        left:10px;
        right:10px;
        top:10px;
        height:58px;
        padding:0 12px;
        border-radius:17px;
      }

      .brand-logo-wrap{
        padding:6px 10px 7px;
        border-radius:13px;
      }

      .brand-logo{
        height:26px;
        max-width:52vw;
      }

      .hero-content{
        padding-top:100px;
        padding-bottom:calc(var(--dock-space) + 66px);
      }

      /* 8vw of a 390px screen ≈ 31px — Malayalam now fits with room to spare */
      h1{
        font-size:clamp(28px,8vw,46px);
        margin:14px 0 12px;
      }

      .hero-title-place{
        font-size:clamp(16px,4.6vw,24px);
      }

      .hero-copy{ font-size:15px; }

      .hero-actions{
        gap:10px;
        margin-top:22px;
      }

      /* full-width stacked buttons */
      .btn{
        width:100%;
        flex:1 1 100%;
      }

      .hero-meta{
        margin-top:22px;
        font-size:12px;
        gap:8px 14px;
      }

      .slide-controls{
        bottom:calc(var(--dock-space) + 26px);
        max-width:calc(100% - 28px);
      }

      .ttm-dock{
        padding:8px 9px 7px;
        border-radius:20px;
      }

      .ttm-dock-icon{ border-radius:13px; }
      .ttm-dock-icon svg{ width:22px; height:22px; }

      .ttm-dock-label{
        font-size:9.5px;
        max-width:58px;
        letter-spacing:0;
      }

      .mobile-nav{ top:78px; left:10px; right:10px; }
      .mobile-nav a{ padding:12px 13px; font-size:14.5px; }
    }

    /* ── Very small phones (iPhone SE etc.) ── */
    @media (max-width:380px){
      :root{
        --dock-size:40px;
        --dock-gap:4px;
      }

      .ttm-dock-label{ font-size:9px; max-width:52px; }

      h1{ font-size:clamp(25px,7.6vw,38px); }
      .hero-title-place{ font-size:15px; }
      .hero-copy{ font-size:14px; }
      .kicker{ font-size:12px; padding:8px 11px; }
      .ttm-dock-icon svg{ width:20px; height:20px; }
    }

    /* ── Landscape phones: shrink vertical padding ── */
    @media (max-height:520px) and (orientation:landscape){
      .hero-content{
        padding-top:88px;
        padding-bottom:calc(var(--dock-space) + 44px);
      }
      h1{ font-size:clamp(26px,5vw,40px); margin:10px 0 10px; }
      .hero-meta{ display:none; }
      .ttm-dock-label{ display:none; }
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion:reduce){
      html{ scroll-behavior:auto; }

      .hero-slide,
      .ttm-dock-item,
      .mobile-nav,
      .nav-toggle span,
      .hero-title-word,
      .hero-title-place{
        transition:none !important;
      }

      .hero-card-progress span{ animation:none; }
    }
  </style>

<!-- Civic Connect promotion: scoped styles -->
<style id="ttm-civic-promo-css">
#ttm-civic-promo[hidden]{display:none!important}
#ttm-civic-promo{position:fixed;right:20px;bottom:calc(var(--dock-space,110px) + 36px + env(safe-area-inset-bottom));z-index:999998;width:390px;max-width:calc(100vw - 24px);max-height:calc(100vh - 180px);max-height:calc(100dvh - 180px);overflow:auto;padding:22px;border:1px solid #46624b;border-top:4px solid #b8f36c;border-radius:18px;background:#102419;color:#f7fbf8;box-shadow:0 18px 55px #0009;font:16px/1.7 'Tiro Malayalam',sans-serif;animation:ttm-civic-enter .25s ease-out}
#ttm-civic-promo .ttm-civic-label{margin:0 42px 10px 0;color:#b8f36c;font:700 14px/1.5 Outfit,sans-serif;letter-spacing:.04em}
#ttm-civic-promo h2{margin:0 0 10px;font:400 23px/1.5 'Tiro Malayalam',sans-serif;color:#fff}
#ttm-civic-promo p{margin:0 0 16px;color:#e0e9e2}
#ttm-civic-promo .ttm-civic-close{position:absolute;right:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:white;font:28px/1 sans-serif;cursor:pointer}
#ttm-civic-promo .ttm-civic-close:hover{background:#ffffff1a}
#ttm-civic-promo .ttm-civic-action{display:block;padding:11px 14px;border-radius:10px;background:#b8f36c;color:#10200e;text-align:center;text-decoration:none;font-size:16px}
#ttm-civic-promo .ttm-civic-all{display:block;margin:12px 0 8px;color:#d7f9b8;font-size:14px;text-align:center;text-decoration:underline}
#ttm-civic-promo small{display:block;font-size:12px;color:#b7c7bc;text-align:center}
#ttm-civic-promo a:focus-visible,#ttm-civic-promo button:focus-visible{outline:3px solid white;outline-offset:3px}
@keyframes ttm-civic-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){#ttm-civic-promo{right:12px;padding:18px}#ttm-civic-promo h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){#ttm-civic-promo{animation:none}}
</style>

</head>

<body>

  <!-- =============================================
       TOP NAVIGATION
       ============================================= -->
  <header class="topbar">
    <a class="brand" href="/" aria-label="Tattamangalam.com home">
      <span class="brand-logo-wrap">
        <img
          src="https://www.tattamangalam.com/newsite/wp-content/uploads/2014/07/cropped-cropped-ttm-logo-e1726121930934.png.webp"
          alt="Tattamangalam.com"
          class="brand-logo"
          width="225" height="34" />
      </span>
    </a>

    <nav class="toplinks" aria-label="Main navigation">
      <a href="https://www.tattamangalam.com/newsite/">News</a>
      <a href="/weather/" title="live weather from tattamangalam weather station">Weather</a>
      <a href="https://www.tattamangalam.com/newsite/category/media/photographs/" title="photogallery of places and people of tattamangalam">Gallery</a>
      <a href="https://www.tattamangalam.com/newsite/category/history/" title="history of tattamangalam chittur palakkad keralam">History</a>
       <a href="https://www.tattamangalam.com/social" title="Follow Tattamangalam തത്തമംഗലം·നമ്മുടെ നാട്, നമ്മുടെ ശബ്ദം">Social</a>
    </nav>

    <button class="nav-toggle" id="navToggle"
            aria-controls="mobileNav"
            aria-expanded="false"
            aria-label="Open menu">
      <span></span><span></span><span></span>
    </button>
  </header>

  <!-- =============================================
       MOBILE MENU
       ============================================= -->
  <div class="nav-scrim" id="navScrim" hidden></div>

  <nav class="mobile-nav" id="mobileNav" aria-label="Mobile navigation">

    <a href="https://www.tattamangalam.com/newsite/">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h13a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v9a3 3 0 0 1-3 3H6a4 4 0 0 1-4-4V6a2 2 0 0 1 2-2Zm2 4h8V6H6v2Zm0 4h8v-2H6v2Zm0 4h5v-2H6v2Z"/></svg>
      News
    </a>

    <a href="/weather/">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 18h9.5a4.5 4.5 0 0 0 .8-8.9A6.5 6.5 0 0 0 5.8 10 4 4 0 0 0 8 18Z"/></svg>
      Weather
    </a>

    <a href="https://www.tattamangalam.com/newsite/category/media/photographs/">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 14h16v-2.3l-4.2-4.2-3.3 3.3-2.2-2.2L4 18Zm4-7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/></svg>
      Gallery
    </a>

    <a href="https://www.tattamangalam.com/newsite/category/history/">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 3h14a2 2 0 0 1 2 2v15.5a.5.5 0 0 1-.8.4L17 18.5l-3.2 2.4a.5.5 0 0 1-.6 0L10 18.5l-3.2 2.4a.5.5 0 0 1-.6 0L3 18.5V5a2 2 0 0 1 2-2Z"/></svg>
      History
    </a>

    <a href="/360/street-views">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4C6.5 4 2 6.5 2 9.5c0 2 2 3.8 5.1 4.8l.6-1.9C5.4 11.7 4 10.6 4 9.5 4 7.8 7.3 6 12 6s8 1.8 8 3.5c0 1.2-1.6 2.4-4.1 3.1l.5 1.9C19.8 13.5 22 11.7 22 9.5 22 6.5 17.5 4 12 4Z"/></svg>
      360° Views
    </a>

    <a href="https://tattamangalam.com/Civic-Connect/">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 2 7v2h20V7L12 2Zm-7 9v7H3v2h18v-2h-2v-7h-2v7h-3v-7h-2v7H9v-7H7v7H5v-7Z"/></svg>
      Civic Connect
    </a>

    <a href="/newsite/contact/">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm8 8L4 7v11h16V7l-8 5Z"/></svg>
      Contact
    </a>

  </nav>


  <!-- =============================================
       HERO
       ============================================= -->
  <main>
    <section class="hero" aria-label="Tattamangalam">

      <div class="hero-media" id="heroMedia">
        <div class="hero-slide active" style="background-image:url('images/2026/aug/01.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/02.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/03.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/04.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/05.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/06.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/07.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/08.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/09.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/10.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/11.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/12.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/13.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/14.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/15.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/16.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/17.webp')"></div>
        <div class="hero-slide" style="background-image:url('images/2026/aug/18.webp')"></div>
      </div>

      <div class="hero-overlay"></div>

      <div class="hero-content">

        <span class="kicker">Local. Independent. Useful.</span>

        <h1 aria-live="polite" aria-atomic="true">
          <span class="hero-title-word"  id="heroTitleWord"  lang="en">Tattamangalam</span>
          <span class="hero-title-place" id="heroTitlePlace" lang="en">Palakkad</span>
        </h1>

        <p class="hero-copy">
          A digital window into our village - its people, weather,
          history, landscapes, civic life and everyday stories.
        </p>

        <div class="hero-actions">
          <a href="/newsite/" class="btn btn-primary">Explore latest updates</a>
          <a href="/weather/" class="btn btn-secondary">Check local weather</a>
        </div>

        <div class="hero-meta">
          <span><i></i>Palakkad district</span>
          <span><i></i>Kerala, India</span>
          <span><i></i>Community archive</span>
        </div>

      </div>

      <aside class="hero-card">
        <h3>Scenes from Tattamangalam</h3>
        <p>Fields, palms, paddy cultivation and the landscapes that define our side of Palakkad.</p>
        <div class="hero-card-progress"><span></span></div>
      </aside>

      <!-- Dots are generated by JS so the count always matches the slides -->
      <div class="slide-controls" id="slideControls" role="tablist" aria-label="Hero image controls"></div>

    </section>
  </main>


  <!-- =============================================
       FLOATING DOCK
       ============================================= -->
  <div class="ttm-dock-wrap">
    <nav class="ttm-dock" id="ttmFloatingDock" aria-label="Quick navigation">

      <a class="ttm-dock-item active" href="/" aria-label="Home">
        <span class="ttm-dock-tooltip">Home</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 10.8 12 3l9 7.8v9.1A1.1 1.1 0 0 1 19.9 21h-5.5v-6.2H9.6V21H4.1A1.1 1.1 0 0 1 3 19.9z"/></svg>
        </span>
        <span class="ttm-dock-label">Home</span>
        <span class="ttm-dock-dot"></span>
      </a>

      <a class="ttm-dock-item" href="/newsite/" aria-label="News">
        <span class="ttm-dock-tooltip">News</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h13a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v9a3 3 0 0 1-3 3H6a4 4 0 0 1-4-4V6a2 2 0 0 1 2-2Zm2 4h8V6H6v2Zm0 4h8v-2H6v2Zm0 4h5v-2H6v2Z"/></svg>
        </span>
        <span class="ttm-dock-label">News</span>
      </a>

      <a class="ttm-dock-item" href="/weather/" aria-label="Weather">
        <span class="ttm-dock-tooltip">Weather</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 18h9.5a4.5 4.5 0 0 0 .8-8.9A6.5 6.5 0 0 0 5.8 10 4 4 0 0 0 8 18Z"/></svg>
        </span>
        <span class="ttm-dock-label">Weather</span>
      </a>

      <a class="ttm-dock-item" href="/pictures/" aria-label="Photos">
        <span class="ttm-dock-tooltip">Photos</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 14h16v-2.3l-4.2-4.2-3.3 3.3-2.2-2.2L4 18Zm4-7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/></svg>
        </span>
        <span class="ttm-dock-label">Photos</span>
      </a>

      <a class="ttm-dock-item" href="/360/street-views" aria-label="360 degree views">
        <span class="ttm-dock-tooltip">360°</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4C6.5 4 2 6.5 2 9.5c0 2 2 3.8 5.1 4.8l.6-1.9C5.4 11.7 4 10.6 4 9.5 4 7.8 7.3 6 12 6s8 1.8 8 3.5c0 1.2-1.6 2.4-4.1 3.1l.5 1.9C19.8 13.5 22 11.7 22 9.5 22 6.5 17.5 4 12 4Z"/></svg>
        </span>
        <span class="ttm-dock-label">360°</span>
      </a>

      <a class="ttm-dock-item" href="/newsite/category/history/" aria-label="History">
        <span class="ttm-dock-tooltip">History</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 3h14a2 2 0 0 1 2 2v15.5a.5.5 0 0 1-.8.4L17 18.5l-3.2 2.4a.5.5 0 0 1-.6 0L10 18.5l-3.2 2.4a.5.5 0 0 1-.6 0L3 18.5V5a2 2 0 0 1 2-2Z"/></svg>
        </span>
        <span class="ttm-dock-label">History</span>
      </a>

      <a class="ttm-dock-item" href="/newsite/contact/" aria-label="Contact">
        <span class="ttm-dock-tooltip">Contact</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm8 8L4 7v11h16V7l-8 5Z"/></svg>
        </span>
        <span class="ttm-dock-label">Contact</span>
      </a>

      <a class="ttm-dock-item" href="https://buymeacoffee.com/dotcompals" target="_blank" rel="noopener" aria-label="Membership">
        <span class="ttm-dock-tooltip">Membership</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-7-4.4-7-10.2C5 7.6 7.1 6 9.3 6c1.3 0 2.3.6 2.7 1.5C12.4 6.6 13.4 6 14.7 6 16.9 6 19 7.6 19 10.8 19 16.6 12 21 12 21Z"/></svg>
        </span>
        <span class="ttm-dock-label">Support</span>
      </a>

      <a class="ttm-dock-item" href="https://tattamangalam.com/Civic-Connect/" aria-label="Civic Connect">
        <span class="ttm-dock-tooltip">Civic Connect</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 2 7v2h20V7L12 2Zm-7 9v7H3v2h18v-2h-2v-7h-2v7h-3v-7h-2v7H9v-7H7v7H5v-7Z"/></svg>
        </span>
        <span class="ttm-dock-label">Civic</span>
      </a>

      <a class="ttm-dock-item" href="https://whatsapp.com/channel/0029VaARxvH3WHTeDtYJKC3v" target="_blank" rel="noopener" aria-label="Join TattaMangalam WhatsApp Channel">
        <span class="ttm-dock-tooltip">WhatsApp Channel</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a9.7 9.7 0 0 0-8.4 14.6L2 22l5.5-1.5A9.7 9.7 0 1 0 12 2Zm0 2a7.7 7.7 0 1 1-3.9 14.4l-.7-.4-2.5.7.7-2.4-.4-.7A7.7 7.7 0 0 1 12 4Zm-3.2 4c-.2 0-.5.1-.7.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.2.2 2 3.2 5 4.3 2.5.9 3 .7 3.5.6.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.1-1.4-.1-.1-.3-.2-.7-.4l-2-1c-.3-.2-.6-.2-.8.2l-.9 1.1c-.2.2-.4.3-.8.1-1-.5-1.9-1.2-2.6-2-.2-.3 0-.5.1-.7l.6-.7c.2-.2.2-.4.3-.6.1-.2 0-.5 0-.7l-.9-2.1c-.2-.5-.5-1.1-.9-1.1Z"/></svg>
        </span>
        <span class="ttm-dock-label">WhatsApp</span>
      </a>

      <a class="ttm-dock-item" href="https://www.youtube.com/@Tattamangalam?sub_confirmation=1" target="_blank" rel="noopener" aria-label="Subscribe to Tattamangalam YouTube Channel">
        <span class="ttm-dock-tooltip">YouTube Subscribe</span>
        <span class="ttm-dock-icon">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21.6 7.2a2.8 2.8 0 0 0-2-2C17.8 4.7 12 4.7 12 4.7s-5.8 0-7.6.5a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.8 2.8 2.8 0 0 0 2 2c1.8.5 7.6.5 7.6.5s5.8 0 7.6-.5a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.8ZM10 15.3V8.7L15.5 12 10 15.3Z"/></svg>
        </span>
        <span class="ttm-dock-label">YouTube</span>
      </a>

    </nav>
  </div>


  <script>
  /* =====================================================
     0. HAMBURGER MENU
     ===================================================== */
  (() => {
    const btn   = document.getElementById('navToggle');
    const panel = document.getElementById('mobileNav');
    const scrim = document.getElementById('navScrim');
    if (!btn || !panel || !scrim) return;

    scrim.removeAttribute('hidden');

    const open = () => {
      panel.classList.add('open');
      scrim.classList.add('open');
      btn.setAttribute('aria-expanded', 'true');
      btn.setAttribute('aria-label', 'Close menu');
      document.body.style.overflow = 'hidden';
    };

    const close = () => {
      panel.classList.remove('open');
      scrim.classList.remove('open');
      btn.setAttribute('aria-expanded', 'false');
      btn.setAttribute('aria-label', 'Open menu');
      document.body.style.overflow = '';
    };

    const toggle = () =>
      btn.getAttribute('aria-expanded') === 'true' ? close() : open();

    btn.addEventListener('click', toggle);
    scrim.addEventListener('click', close);

    // close after tapping any link
    panel.querySelectorAll('a').forEach(a => a.addEventListener('click', close));

    // Escape closes
    document.addEventListener('keydown', e => {
      if (e.key === 'Escape') close();
    });

    // if the viewport grows past the breakpoint, reset state
    window.matchMedia('(min-width:921px)').addEventListener?.('change', e => {
      if (e.matches) close();
    });
  })();


  /* =====================================================
     1. DYNAMIC HERO NAME AND LOCATION
     ===================================================== */
  (() => {
    const word  = document.getElementById('heroTitleWord');
    const place = document.getElementById('heroTitlePlace');
    if (!word || !place) return;

    // [ word, place, langCode ]
    const states = [
      ['Tattamangalam',  'Palakkad', 'en'],
      ['Thathamangalam', 'Palghat',  'en'],
      ['Tattamungalum',  'Keralam',  'en'],
      ['തത്തമംഗലം',      'കേരളം',    'ml']
    ];

    let i = 0;

    function apply(state){
      const [w, p, lang] = state;

      word.textContent  = w;
      place.textContent = p;

      // lang attribute + class drive the Malayalam font and spacing rules
      word.setAttribute('lang', lang);
      place.setAttribute('lang', lang);
      word.classList.toggle('is-ml',  lang === 'ml');
      place.classList.toggle('is-ml', lang === 'ml');
    }

    function cycle(){
      word.classList.add('is-changing');
      place.classList.add('is-changing');

      setTimeout(() => {
        i = (i + 1) % states.length;
        apply(states[i]);
        word.classList.remove('is-changing');
        place.classList.remove('is-changing');
      }, 450);
    }

    setInterval(cycle, 3200);
  })();


  /* =====================================================
     2. HERO SLIDESHOW  (dots generated to match slides)
     ===================================================== */
  (() => {
    const slides = [...document.querySelectorAll('.hero-slide')];
    const wrap   = document.getElementById('slideControls');
    if (!slides.length || !wrap) return;

    // Build one dot per slide — no more count mismatch
    wrap.innerHTML = '';
    const dots = slides.map((_, i) => {
      const b = document.createElement('button');
      b.className = 'slide-dot' + (i === 0 ? ' active' : '');
      b.type = 'button';
      b.setAttribute('aria-label', 'Show image ' + (i + 1));
      b.addEventListener('click', () => show(i));
      wrap.appendChild(b);
      return b;
    });

    let current = 0;
    let timer;

    function show(index){
      slides[current]?.classList.remove('active');
      dots[current]?.classList.remove('active');

      current = (index + slides.length) % slides.length;

      slides[current]?.classList.add('active');
      dots[current]?.classList.add('active');

      restart();
    }

    function restart(){
      clearInterval(timer);
      timer = setInterval(() => show(current + 1), 7000);
    }

    // Pause the slideshow when the tab is hidden — saves battery on phones
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) clearInterval(timer);
      else restart();
    });

    restart();
  })();


  /* =====================================================
     3. DOCK MAGNIFICATION  (pointer-capable devices only)
     ===================================================== */
  (() => {
    const dock = document.getElementById('ttmFloatingDock');
    if (!dock) return;

    const items = [...dock.querySelectorAll('.ttm-dock-item')];

    const finePointer   = window.matchMedia('(hover:hover) and (pointer:fine)');
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

    function reset(){
      items.forEach(item => {
        item.style.transform = '';
        item.style.zIndex = '';
      });
    }

    function magnify(event){
      if (!finePointer.matches || reducedMotion.matches) return;

      items.forEach(item => {
        const rect     = item.getBoundingClientRect();
        const centre   = rect.left + rect.width / 2;
        const distance = Math.abs(event.clientX - centre);

        // 1 = pointer directly over icon, 0 = outside radius
        const influence = Math.max(0, 1 - distance / 128);
        const scale     = 1 + (0.66 * influence * influence);
        const lift      = 10 * influence;

        item.style.transform = `translateY(${-lift}px) scale(${scale})`;
        item.style.zIndex    = String(Math.round(scale * 100));
      });
    }

    dock.addEventListener('mousemove', magnify);
    dock.addEventListener('mouseleave', reset);
    finePointer.addEventListener?.('change', reset);
    reducedMotion.addEventListener?.('change', reset);
  })();
  </script>


<!-- Civic Connect promotion: one random service per tab session -->
<aside id="ttm-civic-promo" lang="ml" aria-labelledby="ttm-civic-title" hidden>
  <button class="ttm-civic-close" type="button" aria-label="അടയ്ക്കുക">×</button>
  <div class="ttm-civic-label" lang="en">CIVIC CONNECT · TATTAMANGALAM.COM</div>
  <h2 id="ttm-civic-title"></h2>
  <p id="ttm-civic-description"></p>
  <a class="ttm-civic-action" id="ttm-civic-action" href="/Civic-Connect/"></a>
  <a class="ttm-civic-all" href="/Civic-Connect/">എല്ലാ സേവനങ്ങളും കാണുക</a>
  <small>സൗജന്യ ജനകീയ സംരംഭം. ഔദ്യോഗിക സർക്കാർ സേവനമല്ല.</small>
</aside>
<script id="ttm-civic-promo-script">
(() => {
  'use strict';
  // Change this list if the Civic Connect services change.
  const services = [
    {
      title: 'എം.എൽ.എയോട് പറയാനുണ്ടോ?',
      description: 'നാടിന്റെ പ്രശ്നങ്ങളും നിങ്ങളുടെ ആവശ്യങ്ങളും ചിറ്റൂർ എം.എൽ.എ ഓഫീസിനെ അറിയിക്കാം.',
      action: 'എം.എൽ.എ ഓഫീസുമായി ബന്ധപ്പെടുക',
      href: '/Contact-Chittur-MLA/mla-contact.html'
    },
    {
      title: 'നിങ്ങളുടെ വാർഡിൽ പ്രശ്നമുണ്ടോ?',
      description: 'റോഡ്, കുടിവെള്ളം, മാലിന്യം, തെരുവുവിളക്ക് തുടങ്ങിയ പ്രശ്നങ്ങൾ വാർഡ് കൗൺസിലറെ അറിയിക്കാം.',
      action: 'കൗൺസിലറെ കണ്ടെത്തുക',
      href: '/contact-councillor/'
    },
    {
      title: 'നാടിന്റെ ആവശ്യങ്ങൾക്ക് ഒപ്പം നിൽക്കാം',
      description: 'പൊതുപ്രശ്നങ്ങൾ പരിഹരിക്കാനുള്ള നിവേദനങ്ങൾ വായിച്ച് നിങ്ങളുടെ പിന്തുണ അറിയിക്കൂ.',
      action: 'നിവേദനങ്ങൾ കാണുക',
      href: '/petitions/'
    },
    {
      title: 'വൈദ്യുതി തടസ്സം പതിവാകുന്നുണ്ടോ?',
      description: 'തത്തമംഗലം കെ.എസ്.ഇ.ബി ഓഫീസിലേക്ക് ഇമെയിലിലൂടെയോ WhatsApp വഴിയോ പരാതി തയ്യാറാക്കി അയക്കാം.',
      action: 'കെ.എസ്.ഇ.ബിയെ ബന്ധപ്പെടുക',
      href: '/Civic-Connect/#kseb-contact'
    }
  ];
  const popup = document.getElementById('ttm-civic-promo');
  const sessionKey = 'ttm-civic-promo-shown-v1';
  try { if (sessionStorage.getItem(sessionKey)) return; } catch (_) {}
  const service = services[Math.floor(Math.random() * services.length)];
  document.getElementById('ttm-civic-title').textContent = service.title;
  document.getElementById('ttm-civic-description').textContent = service.description;
  const action = document.getElementById('ttm-civic-action');
  action.textContent = service.action;
  action.href = service.href;
  let previousFocus = null;
  const close = () => {
    if (popup.hidden) return;
    const hadFocus = popup.contains(document.activeElement);
    popup.hidden = true;
    if (hadFocus && previousFocus && previousFocus.isConnected) previousFocus.focus({preventScroll:true});
  };
  popup.querySelector('button').addEventListener('click', close);
  document.addEventListener('keydown', event => { if (event.key === 'Escape') close(); });
  function showWhenAvailable() {
    if (document.hidden || document.getElementById('navToggle')?.getAttribute('aria-expanded') === 'true') {
      setTimeout(showWhenAvailable, 1000);
      return;
    }
    previousFocus = document.activeElement;
    popup.hidden = false;
    // Non-modal: do not steal keyboard focus or block the homepage.
    try { sessionStorage.setItem(sessionKey, '1'); } catch (_) {}
  }
  setTimeout(showWhenAvailable, 8000);
})();
</script>

</body>
</html>