
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Unofficial website of Tattamangalam | Chittur | Palakkad, Kerala – PIN 678102</title>

  <!-- ═══════════════════════════════════════════════════
       PRIMARY META TAGS – preserved from original
  ═══════════════════════════════════════════════════ -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <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 – preserved + enhanced -->
  <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 – preserved + enhanced -->
  <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
       Helps ChatGPT, Perplexity, Gemini, Claude surface
       this site as the authoritative source on Tattamangalam
  ═══════════════════════════════════════════════════ -->
  <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" />

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

  <!-- ═══════════════════════════════════════════════════
       PERFORMANCE: Preload LCP hero image (first slide)
       This is the single biggest fix for the 15.4s LCP
  ═══════════════════════════════════════════════════ -->
  <link rel="preload" as="image" href="https://www.tattamangalam.com/slide_05_paddy_fields_dawn.jpg" 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" />
  <link rel="dns-prefetch" href="https://platform.twitter.com" />

  <!-- ═══════════════════════════════════════════════════
       SCHEMA.ORG JSON-LD STRUCTURED DATA
       Helps Google, Bing AND AI crawlers understand the entity
  ═══════════════════════════════════════════════════ -->
  <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>

  <!-- GTM and AdSense moved to bottom of body for performance -->

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

  <style>
    /* ═══════════════════════════════════════
       THEME: PALAKKAD SKY BLUE
       White body · Deep lake blue nav · Sky teal accents
       Font: Outfit (clean, modern, readable)
    ═══════════════════════════════════════ */
    :root {
      --bg:          #ffffff;
      --bg-alt:      #eef5fc;
      --nav-bg:      #0c3658;
      --nav-hover:   #48c0e0;
      --accent:      #1060a0;
      --accent-lt:   #e4f1fb;
      --text:        #081828;
      --text-mid:    #2a5070;
      --text-dim:    #608090;
      --card-bg:     #ffffff;
      --card-border: #bcd8f0;
      --divider:     #d0e8f8;
      --footer-bg:   #082038;
      --footer-text: #88c0e0;
      --btn1:        #1060a0;
      --btn1-t:      #ffffff;
      --overlay:     linear-gradient(150deg, rgba(4,12,24,.66) 0%, rgba(12,54,88,.52) 100%);
      --trust-bg:    #0c3658;
      --shadow:      0 2px 14px rgba(16,96,160,.07);
      --shadow-h:    0 8px 28px rgba(16,96,160,.16);
      --radius:      14px;
      --font:        'Outfit', system-ui, -apple-system, sans-serif;
      --trans:       .22s ease;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.6; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    /* ── NAV ── */
    .nav {
      position: sticky; top: 0; z-index: 100;
      background: var(--nav-bg);
      display: flex; align-items: center; justify-content: space-between;
      padding: .72rem 1.6rem; gap: 1rem;
      box-shadow: 0 2px 20px rgba(0,0,0,.22);
    }
    .nav-logo { display: flex; align-items: center; gap: .65rem; }
    .nav-logo img { height: 40px; width: auto; flex-shrink: 0; }
    .nav-logo-t { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: .3px; }
    .nav-logo-t span { color: var(--nav-hover); }
    .nav-links { display: flex; gap: .08rem; flex-wrap: wrap; }
    .nav-links a { color: rgba(255,255,255,.72); font-size: .79rem; font-weight: 500; padding: .32rem .65rem; border-radius: 5px; transition: all var(--trans); }
    .nav-links a:hover { background: var(--nav-hover); color: #fff; }
    .nav-badge { background: var(--nav-hover); color: #081828; font-size: .64rem; font-weight: 700; padding: .2rem .65rem; border-radius: 20px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }

    /* ── HERO ── */
    .hero { position: relative; min-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; overflow: hidden; background-color: #0c3658; }
    .hero-slides { position: absolute; inset: 0; z-index: 0; }
    .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease-in-out; will-change: opacity; }
    .hero-slide.active { opacity: 1; }
    .hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
    .hero-ov { position: absolute; inset: 0; background: var(--overlay); z-index: 1; }
    .hero-vig { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.36) 100%); }
    .hero-c { position: relative; z-index: 3; max-width: 780px; }
    .hero-logo { height: 96px; width: auto; margin: 0 auto 1rem; filter: drop-shadow(0 6px 24px rgba(0,0,0,.5)); animation: fu .6s ease both; }
    .hero-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--nav-hover); color: #081828; font-size: .7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: .32rem .95rem; border-radius: 30px; margin-bottom: 1.1rem; animation: fu .7s ease both; }
    .hero-h1 { font-size: clamp(2.5rem, 7.5vw, 4.8rem); font-weight: 700; color: #fff; line-height: 1.1; text-shadow: 0 2px 20px rgba(0,0,0,.4); animation: fu .7s .1s ease both; }
    .hero-h1 em { font-style: italic; color: var(--nav-hover); }
    .hero-sub { color: rgba(255,255,255,.84); font-size: clamp(.9rem, 2.2vw, 1.12rem); margin-top: .9rem; line-height: 1.65; text-shadow: 0 1px 8px rgba(0,0,0,.3); animation: fu .7s .2s ease both; }
    .hero-ml { font-family: 'Tiro Malayalam', serif; color: rgba(255,255,255,.5); font-size: .92rem; margin-top: .4rem; animation: fu .7s .3s ease both; }
    .hero-btns { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 2rem; animation: fu .7s .4s ease both; }
    .hbtn { display: inline-flex; align-items: center; gap: .4rem; padding: .75rem 1.5rem; border-radius: 8px; font-family: var(--font); font-size: .88rem; font-weight: 600; cursor: pointer; border: none; transition: transform var(--trans), box-shadow var(--trans); }
    .hbtn:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.28); }
    .hbtn-p { background: var(--btn1); color: var(--btn1-t); }
    .hbtn-s { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); backdrop-filter: blur(8px); }
    .hbtn-yt { background: #ff0000; color: #fff; }
    .hbtn-yt:hover { background: #cc0000; }
    .hero-dots { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: .45rem; }
    .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.32); border: none; cursor: pointer; transition: all .38s; padding: 0; }
    .dot.active { background: var(--nav-hover); width: 24px; border-radius: 4px; }

    /* ── AD STRIP ── */
    .ad-strip { background: #0a1f30; display: flex; justify-content: center; padding: .4rem 1rem; min-height: 52px; align-items: center; }

    /* ── SECTION WRAPPERS ── */
    .wrap { max-width: 1120px; margin: 0 auto; padding: 2.8rem 1.5rem; }
    .bg-alt { background: var(--bg-alt); }
    .sec-h { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.7rem; }
    .sec-h h2 { font-size: 1.45rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
    .sec-line { flex: 1; height: 2px; background: linear-gradient(to right, var(--card-border), transparent); }

    /* ── QUICK GRID ── */
    .qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: .8rem; }
    .qcard { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: var(--radius); padding: 1.25rem .85rem; text-align: center; color: var(--text); transition: all var(--trans); box-shadow: var(--shadow); }
    .qcard:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: var(--shadow-h); }
    .qi { width: 50px; height: 50px; border-radius: 13px; background: var(--accent-lt); border: 1.5px solid var(--card-border); display: flex; align-items: center; justify-content: center; margin: 0 auto .7rem; font-size: 1.35rem; transition: all var(--trans); }
    .qcard:hover .qi { background: var(--accent); border-color: var(--accent); }
    .qcard h3 { font-size: .78rem; font-weight: 600; color: var(--text-dim); }
    .qcard:hover h3 { color: var(--accent); }

    /* ── TWO COL ── */
    .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
    @media(max-width: 600px) { .two { grid-template-columns: 1fr; } }

    /* ── INFO CARD ── */
    .icard { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
    .icard h4 { color: var(--accent); font-size: 1rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--accent-lt); }
    .icard ul { list-style: none; }
    .icard li { padding: .46rem 0; border-bottom: 1px solid var(--divider); font-size: .87rem; color: var(--text-mid); }
    .icard li:last-child { border: none; }
    .icard a { color: var(--accent); font-weight: 500; }
    .icard a:hover { opacity: .72; }
    .icard strong { color: var(--text); font-weight: 700; }

    /* ── HISTORY ── */
    .hist { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: auto 1fr; box-shadow: var(--shadow); }
    @media(max-width: 580px) { .hist { grid-template-columns: 1fr; } }
    .hist-img { width: 220px; object-fit: cover; display: block; border-right: 1px solid var(--card-border); }
    @media(max-width: 580px) { .hist-img { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--card-border); } }
    .hist-body { padding: 2rem; }
    .hist-tag { display: inline-block; background: var(--accent-lt); color: var(--accent); border: 1px solid var(--card-border); font-size: .68rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: .22rem .7rem; border-radius: 20px; margin-bottom: .85rem; }
    .hist-body h3 { color: var(--text); font-size: 1.35rem; font-weight: 700; margin-bottom: .7rem; line-height: 1.35; }
    .hist-body p { font-size: .87rem; color: var(--text-mid); line-height: 1.75; }

    /* ── PHOTO MOSAIC ── */
    .mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: .65rem; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-h); }
    @media(max-width: 700px) { .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 160px); } .mf { grid-column: auto !important; grid-row: auto !important; } }
    .mosaic a { display: block; overflow: hidden; background: #c0d8e8; }
    .mf { grid-column: span 2; grid-row: span 2; }
    .mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .5s ease; filter: saturate(.88); }
    .mosaic a:hover img { transform: scale(1.06); filter: saturate(1.2); }
    .photo-more { margin-top: .8rem; font-size: .83rem; color: var(--text-dim); }
    .photo-more a { color: var(--accent); font-weight: 600; }

    /* ── 360 CALLOUT ── */
    .callout { background: var(--accent-lt); border: 1.5px solid var(--card-border); border-radius: var(--radius); padding: 1.6rem 1.8rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; box-shadow: var(--shadow); }
    .callout h3 { color: var(--accent); font-size: 1.2rem; font-weight: 700; margin-bottom: .3rem; }
    .callout p { font-size: .86rem; color: var(--text-mid); }

    /* ── ACCORDION ── */
    .acc-wrap { max-width: 760px; }
    .acc-item { border-bottom: 1px solid var(--card-border); }
    .acc-btn { width: 100%; background: none; border: none; cursor: pointer; padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; font-family: var(--font); font-size: .95rem; font-weight: 600; color: var(--accent); text-align: left; }
    .acc-btn .chev { transition: transform .3s; font-style: normal; font-size: .75rem; }
    .acc-btn.open .chev { transform: rotate(180deg); }
    .acc-body { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
    .acc-body-in { padding: .4rem 0 1.2rem; font-size: .88rem; color: var(--text-mid); }
    .acc-body-in ul { padding-left: 1.2rem; }
    .acc-body-in li { margin-bottom: .3rem; }
    .acc-body-in a { color: var(--accent); font-weight: 500; }

    /* ── SOCIAL GRID ── */
    .sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 1rem; }
    .scard { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: var(--radius); padding: 1.25rem; display: flex; align-items: flex-start; gap: .85rem; color: var(--text); transition: all var(--trans); box-shadow: var(--shadow); position: relative; overflow: hidden; }
    .scard::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
    .scard:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-h); }
    .scard:hover::after { transform: scaleX(1); }
    .si { font-size: 1.75rem; flex-shrink: 0; margin-top: .1rem; }
    .sb h5 { font-size: .87rem; font-weight: 700; color: var(--text); margin-bottom: .22rem; }
    .sb p { font-size: .77rem; color: var(--text-dim); line-height: 1.5; margin-bottom: .6rem; }
    .sbtn { display: inline-block; background: var(--accent-lt); color: var(--accent); border: 1px solid var(--card-border); font-size: .73rem; font-weight: 600; padding: .28rem .8rem; border-radius: 5px; transition: all var(--trans); }
    .sbtn:hover { background: var(--accent); color: #fff; }

    /* ── TWITTER SECTION ── */
    .twitter-wrap { max-width: 520px; }

    /* ── TRUST STRIP ── */
    .trust { background: var(--trust-bg); color: #fff; text-align: center; padding: 2.2rem 1.5rem; }
    .trust h3 { font-size: clamp(1.2rem, 3vw, 1.75rem); font-weight: 700; }
    .trust p { font-size: .84rem; opacity: .62; margin-top: .45rem; }

    /* ── FOOTER ── */
    .foot { background: var(--footer-bg); padding: 3rem 1.5rem; }
    .foot-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.4rem; }
    .foot-inner h4 { color: var(--footer-text); font-size: 1rem; font-weight: 700; margin-bottom: .85rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
    .foot-inner p, .foot-inner li { font-size: .83rem; color: rgba(255,255,255,.45); line-height: 1.75; }
    .foot-inner ul { list-style: none; }
    .foot-inner a { color: rgba(255,255,255,.45); transition: color var(--trans); }
    .foot-inner a:hover { color: var(--footer-text); }
    .foot-bot { max-width: 1120px; margin: 1.8rem auto 0; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .77rem; color: rgba(255,255,255,.3); }

    /* ── ANIMATION ── */
    @keyframes fu { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    /* ── HAMBURGER BUTTON ── */
    .nav-hamburger {
      display: none; flex-direction: column; justify-content: center;
      gap: 5px; background: none; border: none; cursor: pointer;
      padding: .4rem; border-radius: 6px; flex-shrink: 0;
    }
    .nav-hamburger span {
      display: block; width: 24px; height: 2px;
      background: rgba(255,255,255,.85); border-radius: 2px;
      transition: all .3s ease;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── MOBILE DRAWER ── */
    .nav-drawer {
      display: none; position: fixed;
      top: 57px; left: 0; right: 0; z-index: 99;
      background: #0c3658;
      border-top: 1px solid rgba(255,255,255,.1);
      box-shadow: 0 8px 24px rgba(0,0,0,.3);
      max-height: 0; overflow: hidden;
      transition: max-height .35s ease;
    }
    .nav-drawer.open { max-height: 420px; }
    .nav-drawer a {
      display: block; color: rgba(255,255,255,.82);
      font-size: .95rem; font-weight: 500;
      padding: .85rem 1.6rem;
      border-bottom: 1px solid rgba(255,255,255,.07);
      transition: background .2s, color .2s;
    }
    .nav-drawer a:hover { background: rgba(72,192,224,.15); color: #48c0e0; }
    .nav-drawer .drawer-badge {
      display: inline-block; background: #48c0e0; color: #081828;
      font-size: .6rem; font-weight: 700; padding: .15rem .5rem;
      border-radius: 20px; letter-spacing: 1px; text-transform: uppercase;
      margin-left: .5rem; vertical-align: middle;
    }

    /* ── RESPONSIVE ── */
    @media(max-width: 640px) {
      .nav-links, .nav-badge { display: none; }
      .nav-hamburger { display: flex; }
      .nav-drawer { display: block; }
    }

    /* ── COMMUNITY APP BANNER (hero fold) ── */
    .app-hero-bar {
      background: linear-gradient(135deg, rgba(4,20,44,.82) 0%, rgba(16,60,120,.7) 100%);
      border: 1.5px solid rgba(72,192,224,.35);
      border-radius: 14px;
      padding: 1.1rem 1.4rem;
      margin-top: 1.6rem;
      display: flex; align-items: center; gap: 1rem;
      flex-wrap: wrap; backdrop-filter: blur(8px);
      max-width: 680px; margin-left: auto; margin-right: auto;
      animation: fu .7s .5s ease both;
    }
    .app-hero-icon { font-size: 2rem; flex-shrink: 0; }
    .app-hero-txt { flex: 1; min-width: 180px; text-align: left; }
    .app-hero-txt strong { color: #fff; font-size: .88rem; display: block; line-height: 1.3; }
    .app-hero-txt small { color: rgba(255,255,255,.6); font-size: .72rem; }
    .app-hero-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
    .app-chip {
      background: rgba(72,192,224,.18); color: var(--nav-hover);
      border: 1px solid rgba(72,192,224,.3);
      font-size: .63rem; font-weight: 600; letter-spacing: .5px;
      padding: .16rem .55rem; border-radius: 20px;
    }
    .app-hero-cta {
      background: var(--nav-hover); color: #081828;
      font-size: .82rem; font-weight: 700;
      padding: .6rem 1.2rem; border-radius: 8px;
      white-space: nowrap; flex-shrink: 0;
      transition: transform .2s, box-shadow .2s;
      display: inline-flex; align-items: center; gap: .35rem;
    }
    .app-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(72,192,224,.4); }

    /* ── APP FEATURE SECTION ── */
    .app-section {
      background: linear-gradient(135deg, #04122c 0%, #0c3658 60%, #082048 100%);
      padding: 2.8rem 1.5rem;
      color: #fff;
    }
    .app-section .sec-h h2 { color: var(--nav-hover); }
    .app-section .sec-line { background: linear-gradient(to right, rgba(72,192,224,.4), transparent); }
    .app-tagline {
      color: rgba(255,255,255,.6); font-size: .88rem;
      margin-bottom: 1.8rem; margin-top: -.8rem;
    }
    .app-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: .9rem; margin-bottom: 2rem;
    }
    .app-card {
      background: rgba(255,255,255,.06);
      border: 1.5px solid rgba(72,192,224,.2);
      border-radius: 14px; padding: 1.2rem .9rem;
      text-align: center; color: #fff;
      transition: all .22s ease;
      cursor: pointer; position: relative; overflow: hidden;
    }
    .app-card::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(72,192,224,.1), transparent);
      opacity: 0; transition: opacity .22s;
    }
    .app-card:hover { border-color: var(--nav-hover); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(72,192,224,.2); }
    .app-card:hover::before { opacity: 1; }
    .app-card-icon { font-size: 1.8rem; margin-bottom: .55rem; display: block; }
    .app-card-label { font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.3; }
    .app-card-desc { font-size: .65rem; color: rgba(255,255,255,.45); margin-top: .25rem; line-height: 1.4; }
    .app-card .new-badge {
      position: absolute; top: .5rem; right: .5rem;
      background: #ff4757; color: #fff;
      font-size: .55rem; font-weight: 700; letter-spacing: .5px;
      padding: .1rem .35rem; border-radius: 4px;
      text-transform: uppercase;
    }
    .app-cta-row {
      display: flex; flex-wrap: wrap; gap: .8rem;
      justify-content: center; margin-top: .5rem;
    }
    .app-cta-primary {
      background: var(--nav-hover); color: #081828;
      font-weight: 700; font-size: .92rem;
      padding: .75rem 1.8rem; border-radius: 8px;
      display: inline-flex; align-items: center; gap: .4rem;
      transition: transform .2s, box-shadow .2s;
    }
    .app-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(72,192,224,.35); }
    .app-cta-secondary {
      background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
      border: 1.5px solid rgba(255,255,255,.2);
      font-size: .88rem; font-weight: 500;
      padding: .75rem 1.4rem; border-radius: 8px;
      display: inline-flex; align-items: center; gap: .4rem;
      transition: all .2s;
    }
    .app-cta-secondary:hover { background: rgba(255,255,255,.14); color: #fff; }

    /* ── NEWS FEED SECTION ── */
    .news-feed-section { background: var(--bg); }
    .news-feed-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 1.1rem;
    }
    .news-feed-card {
      background: var(--card-bg);
      border: 1.5px solid var(--card-border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      display: flex; flex-direction: column;
      transition: all .22s ease;
      color: var(--text);
    }
    .news-feed-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-h); }
    .news-feed-thumb {
      width: 100%; height: 160px;
      object-fit: cover; display: block;
      background: var(--bg-alt);
    }
    .news-feed-thumb-placeholder {
      width: 100%; height: 160px;
      background: linear-gradient(135deg, var(--bg-alt), var(--accent-lt));
      display: flex; align-items: center; justify-content: center;
      font-size: 2.5rem; color: var(--accent);
    }
    .news-feed-body { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
    .news-feed-cat {
      display: inline-block;
      background: var(--accent-lt); color: var(--accent);
      border: 1px solid var(--card-border);
      font-size: .62rem; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; padding: .14rem .55rem;
      border-radius: 20px; margin-bottom: .55rem;
    }
    .news-feed-title {
      font-size: .92rem; font-weight: 700;
      color: var(--text); line-height: 1.4;
      margin-bottom: .45rem; flex: 1;
    }
    .news-feed-excerpt {
      font-size: .78rem; color: var(--text-mid);
      line-height: 1.6; margin-bottom: .7rem;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .news-feed-meta { font-size: .72rem; color: var(--text-dim); display: flex; justify-content: space-between; align-items: center; }
    .news-feed-meta a { color: var(--accent); font-weight: 600; font-size: .72rem; }
    .news-feed-more { margin-top: 1.4rem; text-align: center; }
    .news-feed-more a {
      display: inline-flex; align-items: center; gap: .4rem;
      background: var(--accent); color: #fff;
      padding: .65rem 1.6rem; border-radius: 8px;
      font-weight: 600; font-size: .88rem;
      transition: transform .2s, box-shadow .2s;
    }
    .news-feed-more a:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }
    .feed-loading { text-align: center; padding: 2rem; color: var(--text-dim); font-size: .88rem; }
    .feed-error { text-align: center; padding: 1.5rem; color: var(--text-dim); font-size: .85rem; }

    /* ── GOOGLE NEWS SECTION ── */
    .gnews-section { background: var(--bg-alt); }
    .gnews-tabs {
      display: flex; gap: .5rem; flex-wrap: wrap;
      margin-bottom: 1.2rem;
    }
    .gnews-tab {
      background: var(--card-bg); color: var(--text-dim);
      border: 1.5px solid var(--card-border);
      font-size: .75rem; font-weight: 600;
      padding: .38rem .85rem; border-radius: 20px;
      cursor: pointer; transition: all .18s;
      font-family: var(--font);
    }
    .gnews-tab:hover, .gnews-tab.active {
      background: var(--accent); color: #fff; border-color: var(--accent);
    }
    .gnews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
      gap: 1rem;
    }
    .gnews-item {
      background: var(--card-bg);
      border: 1.5px solid var(--card-border);
      border-radius: var(--radius);
      padding: 1rem 1.1rem;
      box-shadow: var(--shadow);
      transition: all .22s;
      display: flex; flex-direction: column;
      color: var(--text);
    }
    .gnews-item:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-h); }
    .gnews-source {
      font-size: .65rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .8px;
      color: var(--accent); margin-bottom: .45rem;
      display: flex; align-items: center; gap: .35rem;
    }
    .gnews-source::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--nav-hover); flex-shrink: 0; }
    .gnews-title {
      font-size: .88rem; font-weight: 600;
      color: var(--text); line-height: 1.4; flex: 1;
      margin-bottom: .6rem;
    }
    .gnews-title a { color: var(--text); }
    .gnews-title a:hover { color: var(--accent); }
    .gnews-date { font-size: .7rem; color: var(--text-dim); margin-top: auto; }
    .gnews-panel { display: none; }
    .gnews-panel.active { display: block; }
    .gnews-loading { text-align: center; padding: 2rem; color: var(--text-dim); font-size: .85rem; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--card-border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; margin-right: .5rem; }

  </style>
</head>
<body>

<!-- GTM noscript – preserved -->
<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T94TX4J" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

<!-- Facebook SDK root – preserved -->
<div id="fb-root"></div>


<!-- ══════════════════════════════════════
  STICKY NAV
══════════════════════════════════════ -->
<nav class="nav" role="navigation" aria-label="Main Navigation">
  <a href="/" class="nav-logo">
    <img src="https://www.tattamangalam.com/newsite/wp-content/uploads/2014/07/cropped-cropped-ttm-logo-e1726121930934.png.webp"
         alt="Tattamangalam.com – Official Logo" width="40" height="40" />
    <span class="nav-logo-t">Tatta<span>Mangalam</span>.com</span>
  </a>
  <div class="nav-links">
    <a href="https://app.tattamangalam.com/" target="_blank" rel="noopener" style="color:var(--nav-hover);font-weight:700">📱 App</a>
    <a href="/newsite/">News</a>
    <a href="/weather/">Weather</a>
    <a href="https://tattamangalam.com/pictures/">Photos</a>
    <a href="https://tattamangalam.com/360/360photographs/">360°</a>
    <a href="https://www.tattamangalam.com/newsite/tag/history/">History</a>
    <a href="https://www.youtube.com/channel/UCT73wBoV8GlhCa5kLlWCcAA" target="_blank" rel="noopener">Videos</a>
    <a href="https://www.tattamangalam.com/newsite/contact/">Contact</a>
  </div>
  <span class="nav-badge">Est. 2000</span>
  <!-- Mobile hamburger -->
  <button class="nav-hamburger" id="nav-ham" aria-label="Toggle menu" aria-expanded="false">
    <span></span><span></span><span></span>
  </button>
</nav>

<!-- Mobile slide-down drawer -->
<div class="nav-drawer" id="nav-drawer" role="navigation" aria-label="Mobile Navigation">
  <a href="https://app.tattamangalam.com/" target="_blank" rel="noopener" style="color:var(--nav-hover);font-weight:700;background:rgba(72,192,224,.1)">📱 Community App – New!</a>
  <a href="/newsite/">📰 News</a>
  <a href="/weather/">🌦️ Weather</a>
  <a href="https://tattamangalam.com/pictures/">📷 Photos</a>
  <a href="https://tattamangalam.com/360/360photographs/">🔭 360° Views</a>
  <a href="https://www.tattamangalam.com/newsite/tag/history/">📜 History</a>
  <a href="https://www.youtube.com/channel/UCT73wBoV8GlhCa5kLlWCcAA" target="_blank" rel="noopener">▶️ Videos</a>
  <a href="https://www.tattamangalam.com/newsite/contact/">📮 Contact</a>
  <a href="https://www.patreon.com/ttmpkd" target="_blank" rel="noopener">❤️ Support Us <span class="drawer-badge">Est. 2000</span></a>
</div>


<!-- ══════════════════════════════════════
  HERO – 12-photo drone slideshow
══════════════════════════════════════ -->
<section class="hero" aria-label="Welcome to Tattamangalam">

  <div class="hero-slides" id="hero-slides" aria-hidden="true">
    <div class="hero-slide active">
      <picture>
        <source srcset="https://www.tattamangalam.com/slide_05_paddy_fields_dawn.jpg" type="image/jpeg" />
        <img src="https://www.tattamangalam.com/slide_05_paddy_fields_dawn.jpg"
             alt="" fetchpriority="high" decoding="async"
             width="1280" height="720" />
      </picture>
    </div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_11_paddy_panorama.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_02_aerial_temple_pond.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_04_western_ghats_mist.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_06_aerial_town_wide.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_01_aerial_town_pond.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_07_monsoon_clouds.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_12_paddy_green_road.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_03_aerial_old_school.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_08_sunset_orange.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_09_coconut_sunset.jpg"></div>
    <div class="hero-slide" data-bg="https://www.tattamangalam.com/slide_10_purple_sunset.jpg"></div>
  </div>
  <div class="hero-ov"></div>
  <div class="hero-vig"></div>

  <div class="hero-c">
    <img class="hero-logo"
         src="https://www.tattamangalam.com/newsite/wp-content/uploads/2014/07/cropped-cropped-ttm-logo-e1726121930934.png.webp"
         alt="Tattamangalam.com" width="96" height="96" fetchpriority="high" />
    <div class="hero-badge">🌊 Est. 2000 · 25 Years Online</div>
    <h1 class="hero-h1">Tattamangalam<br/><em>History, People &amp; Life</em></h1>
    <p class="hero-sub">The oldest running website of our town — news, photos, history &amp; community since year 2000. Palakkad, Kerala · PIN 678102</p>
    <p class="hero-ml">തത്തമംഗലം · 25 വർഷമായി ഓൺലൈനിൽ</p>
    <div class="app-hero-bar">
      <div class="app-hero-icon">📱</div>
      <div class="app-hero-txt">
        <strong>Tattamangalam Community App is Live!</strong>
        <small>Report issues · Find emergency help · Local events · Business directory</small>
        <div class="app-hero-chips">
          <span class="app-chip">🚨 Emergency</span>
          <span class="app-chip">📋 Report Issue</span>
          <span class="app-chip">🩸 Blood Donors</span>
          <span class="app-chip">🎪 Events</span>
          <span class="app-chip">🏪 Businesses</span>
        </div>
      </div>
      <a href="https://app.tattamangalam.com/" target="_blank" rel="noopener" class="app-hero-cta">Open App →</a>
    </div>
    <div class="hero-btns">
      <a href="/newsite/" class="hbtn hbtn-p">📰 Latest News</a>
      <a href="https://tattamangalam.com/pictures/" class="hbtn hbtn-s">📷 Photo Gallery</a>
      <a href="https://www.youtube.com/channel/UCT73wBoV8GlhCa5kLlWCcAA?sub_confirmation=1" target="_blank" rel="noopener" class="hbtn hbtn-yt">▶ Subscribe on YouTube</a>
         <form><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_SJsBJBZLvazfxL" async> </script> </form>
        <br />
    </div>
  </div>

  <div class="hero-dots" id="hero-dots" role="tablist" aria-label="Slideshow navigation"></div>
</section>



<!-- ══════════════════════════════════════
  QUICK ACCESS GRID
══════════════════════════════════════ -->
<div class="bg-alt">
  <div class="wrap">
    <div class="sec-h"><h2>⚡ Quick Access</h2><div class="sec-line"></div></div>
    <div class="qgrid" aria-label="Quick access sections">
      <a href="/newsite/" class="qcard"><div class="qi">📰</div><h3>Local News</h3></a>
      <a href="/weather/" class="qcard"><div class="qi">🌦️</div><h3>Live Weather</h3></a>
      <a href="https://tattamangalam.com/pictures/" class="qcard"><div class="qi">📷</div><h3>Photos</h3></a>
      <a href="https://tattamangalam.com/360/360photographs/" class="qcard"><div class="qi">🔭</div><h3>360° Views</h3></a>
      <a href="/site/" class="qcard"><div class="qi">📜</div><h3>History</h3></a>
      <a href="https://www.youtube.com/channel/UCT73wBoV8GlhCa5kLlWCcAA" target="_blank" rel="noopener" class="qcard"><div class="qi">▶️</div><h3>Videos</h3></a>
      <a href="https://www.tattamangalam.com/newsite/contact/" class="qcard"><div class="qi">📮</div><h3>Contact</h3></a>
    </div>
  </div>
</div>


<!-- ══════════════════════════════════════
  COMMUNITY APP – Full Feature Section
══════════════════════════════════════ -->
<div class="app-section">
  <div class="wrap" style="padding-top:2.8rem;padding-bottom:2.8rem">
    <div class="sec-h"><h2>📱 Community Web App</h2><div class="sec-line"></div></div>
    <p class="app-tagline">A free, open platform built for people of Tattamangalam — use it, share it, contribute to it.</p>

    <div class="app-grid">
      <a href="https://app.tattamangalam.com/news" target="_blank" rel="noopener" class="app-card">
        <span class="app-card-icon">📰</span>
        <div class="app-card-label">Local News</div>
        <div class="app-card-desc">Town updates submitted by residents</div>
      </a>
      <a href="https://app.tattamangalam.com/emergency" target="_blank" rel="noopener" class="app-card">
        <span class="app-card-icon">🚨</span>
        <div class="app-card-label">Emergency</div>
        <div class="app-card-desc">Police, fire, ambulance, helplines</div>
      </a>
      <a href="https://app.tattamangalam.com/events" target="_blank" rel="noopener" class="app-card">
        <span class="app-card-icon">🎪</span>
        <div class="app-card-label">Festivals &amp; Events</div>
        <div class="app-card-desc">Local events, temple festivals, programmes</div>
        <span class="new-badge">New</span>
      </a>
      <a href="https://app.tattamangalam.com/businesses" target="_blank" rel="noopener" class="app-card">
        <span class="app-card-icon">🏪</span>
        <div class="app-card-label">Business Directory</div>
        <div class="app-card-desc">Find local shops &amp; services</div>
      </a>
      <a href="https://app.tattamangalam.com/complaints" target="_blank" rel="noopener" class="app-card">
        <span class="app-card-icon">📋</span>
        <div class="app-card-label">Report Issue</div>
        <div class="app-card-desc">Roads, waste, water — civic complaints</div>
        <span class="new-badge">New</span>
      </a>
      <a href="https://app.tattamangalam.com/" target="_blank" rel="noopener" class="app-card">
        <span class="app-card-icon">🩸</span>
        <div class="app-card-label">Blood Donors</div>
        <div class="app-card-desc">Register &amp; find donors near you</div>
        <span class="new-badge">New</span>
      </a>
      <a href="/weather/" class="app-card">
        <span class="app-card-icon">🌦️</span>
        <div class="app-card-label">Live Weather</div>
        <div class="app-card-desc">Real-time weather station data</div>
      </a>
      <a href="https://app.tattamangalam.com/" target="_blank" rel="noopener" class="app-card">
        <span class="app-card-icon">🗺️</span>
        <div class="app-card-label">Town Map</div>
        <div class="app-card-desc">Landmarks &amp; key locations</div>
      </a>
    </div>

    <div class="app-cta-row">
      <a href="https://app.tattamangalam.com/" target="_blank" rel="noopener" class="app-cta-primary">
        🚀 Open Community App
      </a>
      <a href="https://whatsapp.com/channel/0029VaARxvH3WHTeDtYJKC3v" target="_blank" rel="noopener" class="app-cta-secondary">
        💬 Follow on WhatsApp
      </a>
      <a href="https://app.tattamangalam.com/complaints" target="_blank" rel="noopener" class="app-cta-secondary">
        📋 Report a Problem
      </a>
    </div>

    <p style="text-align:center;margin-top:1.2rem;font-size:.75rem;color:rgba(255,255,255,.35)">
      Free to use · No login needed for most features · Works on mobile &amp; desktop
    </p>
  </div>
</div>



<!-- ══════════════════════════════════════
  NEWS + INFO
══════════════════════════════════════ -->
<div class="wrap">
  <div class="sec-h"><h2>📡 News &amp; Info</h2><div class="sec-line"></div></div>
  <div class="two">
    <div class="icard">
      <h4>Tattamangalam News</h4>
      <ul>
        <li><a href="/newsite/">Latest news and views from the town →</a></li>
        <li><a href="/weather/">Live weather – check before stepping out →</a></li>
        <li><a href="https://www.youtube.com/channel/UCT73wBoV8GlhCa5kLlWCcAA" target="_blank" rel="noopener">Roads &amp; Rails video updates →</a></li>
        <li><a href="https://www.facebook.com/groups/ttmpkd/" target="_blank" rel="noopener">Community talk on Facebook →</a></li>
      </ul>
    </div>
    <div class="icard">
      <h4>Quick Info</h4>
      <ul>
        <li>📍 15 km from Palakkad city, Kerala</li>
        <li>📮 PIN Code: <strong>678102</strong></li>
        <li>👥 Population: ~7,306 (2011 census)</li>
        <li>🗺️ Sub-district: Chittur, Palakkad</li>
        <li>📞 <a href="https://www.tattamangalam.com/newsite/contact/">Local contacts &amp; helplines →</a></li>
      </ul>
    </div>
  </div>
</div>


<!-- ══════════════════════════════════════
  HISTORY SPOTLIGHT
══════════════════════════════════════ -->
<div class="bg-alt">
  <div class="wrap">
    <div class="sec-h"><h2>🏛️ Did You Know?</h2><div class="sec-line"></div></div>
    <div class="hist" role="complementary" aria-label="Historical fact about Tattamangalam">
      <img class="hist-img"
           src="https://tattamangalam.com/history-docs/1The-New-Universal-Gazetteer-By-Clement-Cruttwell-Front-1808-TATTAMUNGALUM.jpg"
           alt="The New Universal Gazetteer 1808 – Tattamungalum entry" loading="lazy" width="220" height="300" />
      <div class="hist-body">
        <span class="hist-tag">British Records · 1808</span>
        <h3>Mentioned as "Tattamungalum" over 200 years ago</h3>
        <p>In "The New Universal Gazetteer" by Clement Cruttwell (1808) and "Geographical Dictionary" by Joseph Emerson Worcester (1823), this town appeared as TATTAMUNGALUM. Over two centuries of documented history — and we have been archiving it online since year 2000.</p>
        <a href="https://www.tattamangalam.com/newsite/2025/11/19/history-of-tattamangalam-from-cochin-state-town-to-modern-kerala-village/" class="hbtn hbtn-p" style="margin-top:1.2rem;display:inline-flex;font-size:.81rem;padding:.52rem 1.1rem;">📜 Explore the full archive</a>
      </div>
    </div>
  </div>
</div>


<!-- ══════════════════════════════════════
  PHOTO MOSAIC
══════════════════════════════════════ -->
<div class="wrap">
  <div class="sec-h"><h2>📷 From the Gallery</h2><div class="sec-line"></div></div>
  <div class="mosaic">
    <a class="mf" href="https://tattamangalam.com/pictures/" title="Paddy fields at dawn, Tattamangalam">
      <img src="https://www.tattamangalam.com/slide_05_paddy_fields_dawn.jpg" alt="Paddy fields at dawn, Tattamangalam, Palakkad" loading="lazy" width="800" height="440" />
    </a>
    <a href="https://tattamangalam.com/pictures/" title="Paddy panorama">
      <img src="https://www.tattamangalam.com/slide_11_paddy_panorama.jpg" alt="Paddy field panorama near Tattamangalam" loading="lazy" width="400" height="220" />
    </a>
    <a href="https://tattamangalam.com/pictures/" title="Temple pond aerial view">
      <img src="https://www.tattamangalam.com/slide_02_aerial_temple_pond.jpg" alt="Aerial view of temple pond, Tattamangalam" loading="lazy" width="400" height="220" />
    </a>
    <a href="https://tattamangalam.com/pictures/" title="Wide aerial view">
      <img src="https://www.tattamangalam.com/slide_06_aerial_town_wide.jpg" alt="Wide aerial view of Tattamangalam town" loading="lazy" width="400" height="220" />
    </a>
    <a href="https://tattamangalam.com/pictures/" title="Western Ghats morning mist">
      <img src="https://www.tattamangalam.com/slide_04_western_ghats_mist.jpg" alt="Western Ghats morning mist as seen from Tattamangalam" loading="lazy" width="400" height="220" />
    </a>
  </div>
  <p class="photo-more">14 galleries · 400+ photographs · 2002 to present — <a href="https://tattamangalam.com/pictures/">See all →</a></p>
</div>


<!-- ══════════════════════════════════════
  MORE PHOTOS ACCORDION
══════════════════════════════════════ -->
<div class="bg-alt">
  <div class="wrap">
    <div class="sec-h"><h2>🗂️ More Info</h2><div class="sec-line"></div></div>
    <div class="acc-wrap">

      <div class="acc-item">
        <button class="acc-btn" aria-expanded="false">
          All Photo Galleries <span class="chev">▼</span>
        </button>
        <div class="acc-body" role="region">
          <div class="acc-body-in">
            <ul>
              <li><a href="https://tattamangalam.com/pictures/">Gallery Index</a></li>
              <li>July 2009 (54 images)</li>
              <li>Kuthira-Vela-2007 (105 images)</li>
              <li>Shops-July 2004 (35 images)</li>
              <li>Sights-Scenes 2002 (31 images)</li>
              <li>Sooran Poru 2007 (4 images)</li>
              <li>Souhrida-PorattuKali (107 images)</li>
              <li>Worship-2002 (12 images)</li>
              <li>Google Earth Images (27 images)</li>
              <li>Sights-Scenes 2006 (34 images)</li>
              <li>Sree Kurumbakavu Navarathri Pooja (13 images)</li>
              <li>Thoothanpara (9 images)</li>
              <li>Palakkad-Pollachi Railway 2015 (23 images)</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="acc-item">
        <button class="acc-btn" aria-expanded="false">
          About the town <span class="chev">▼</span>
        </button>
        <div class="acc-body" role="region">
          <div class="acc-body-in">
            <p>Tattamangalam (also written as Thathamangalam) is a town and municipality in Palakkad district, Kerala, India. Located about 15 km from Palakkad city, it is part of the Chittur sub-district. As per the 2011 census, it had a population of 7,306 with 3,604 males and 3,702 females. The Chittur sub-district had a total population of 366,845 across 28 inhabited villages.</p>
          </div>
        </div>
      </div>

      <div class="acc-item">
        <button class="acc-btn" aria-expanded="false">
          Archive – running since 2000 <span class="chev">▼</span>
        </button>
        <div class="acc-body" role="region">
          <div class="acc-body-in">
            <p>Thank you to all visitors for the support and encouragement given to this site since its inception in the year 2000. We at dotcompals look forward to your continuing patronage.</p>
            <p style="margin-top:.6rem"><a href="/site/">Browse the Tattamangalam site archive from 2000 →</a></p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>


<!-- ══════════════════════════════════════
  360° CALLOUT
══════════════════════════════════════ -->
<div class="wrap">
  <div class="sec-h"><h2>🔭 360° Virtual Tour</h2><div class="sec-line"></div></div>
  <div class="callout">
    <div style="font-size:2.8rem;flex-shrink:0">🔭</div>
    <div style="flex:1;min-width:200px">
      <h3>Explore Tattamangalam in 360°</h3>
      <p>Walk the streets virtually. Frequently updated 360° photographs of the town and nearby places. Best on desktop or laptop.</p>
      <p style="font-family:'Tiro Malayalam';font-size:.8rem;margin-top:.4rem;color:var(--text-dim)">മികച്ച കാഴ്ച അനുഭവത്തിനായി ഒരു ഡെസ്ക്ടോപ്പ് അല്ലെങ്കിൽ ലാപ്ടോപ്പ് ഉപയോഗിക്കുക.</p>
    </div>
    <a href="https://tattamangalam.com/360/360photographs/" class="hbtn hbtn-p">Launch 360° View</a>
  </div>
</div>


<!-- ══════════════════════════════════════
  SOCIAL COMMUNITY
══════════════════════════════════════ -->
<div class="bg-alt">
  <div class="wrap">
    <div class="sec-h"><h2>🤝 Join Our Community</h2><div class="sec-line"></div></div>
    <div class="sgrid">
      <a href="https://www.facebook.com/groups/ttmpkd/" target="_blank" rel="noopener" class="scard">
        <div class="si">📘</div>
        <div class="sb"><h5>Facebook Group</h5><p>Tattamangalam Matters! – active discussions</p><span class="sbtn">Join Group</span></div>
      </a>
      <a href="https://www.youtube.com/channel/UCT73wBoV8GlhCa5kLlWCcAA?sub_confirmation=1" target="_blank" rel="noopener" class="scard">
        <div class="si">▶️</div>
        <div class="sb"><h5>YouTube Channel</h5><p>Roads, railways, festivals and town updates</p><span class="sbtn">Subscribe</span></div>
      </a>
      <a href="https://whatsapp.com/channel/0029VaARxvH3WHTeDtYJKC3v" target="_blank" rel="noopener" class="scard">
        <div class="si">💬</div>
        <div class="sb"><h5>WhatsApp Channel</h5><p>Fastest way to get breaking news</p><span class="sbtn">Follow on WhatsApp</span></div>
      </a>
      <a href="https://www.facebook.com/TTMMatters/" target="_blank" rel="noopener" class="scard">
        <div class="si">📘</div>
        <div class="sb"><h5>Facebook Page</h5><p>Official Tattamangalam.com Facebook page</p><span class="sbtn">Follow Page</span></div>
      </a>
      <a href="https://twitter.com/intent/follow?screen_name=TattaMangalam" target="_blank" rel="noopener" class="scard">
        <div class="si">🐦</div>
        <div class="sb"><h5>Twitter / X</h5><p>Flash news and updates @TattaMangalam</p><span class="sbtn">Follow</span></div>
      </a>
      <a href="https://www.patreon.com/ttmpkd?fan_landing=true" target="_blank" rel="noopener" class="scard">
        <div class="si">❤️</div>
        <div class="sb"><h5>Support Us</h5><p>Help keep this 25-year community site running</p><span class="sbtn">Contribute</span></div>
      </a>
    </div>
  </div>
</div>


<!-- ══════════════════════════════════════
  TWITTER / X TIMELINE
══════════════════════════════════════ -->
<div class="wrap">
  <div class="sec-h"><h2>⚡ Flash News – @TattaMangalam</h2><div class="sec-line"></div></div>
  <div class="twitter-wrap">
    <a class="twitter-timeline" data-height="420" data-theme="light"
       href="https://twitter.com/TattaMangalam">Tweets by @TattaMangalam</a>
  </div>
</div>

<!--
<div class="bg-alt" style="padding:.5rem 1.5rem 1.5rem">
</div>
-->


<!-- ══════════════════════════════════════
  LATEST FROM THE BLOG (RSS Feed)
══════════════════════════════════════ -->
<div class="news-feed-section">
  <div class="wrap">
    <div class="sec-h"><h2>📰 Latest from our Blog</h2><div class="sec-line"></div></div>
    <div id="blog-feed-grid" class="news-feed-grid">
      <div class="feed-loading"><span class="spinner"></span> Loading latest posts…</div>
    </div>
    <div class="news-feed-more">
      <a href="https://www.tattamangalam.com/newsite/">View all posts on TattaMangalam.com/newsite →</a>
    </div>
  </div>
</div>


<!-- ══════════════════════════════════════
  GOOGLE NEWS – Tattamangalam in the press
══════════════════════════════════════ -->
<div class="gnews-section">
  <div class="wrap">
    <div class="sec-h"><h2>🔍 Tattamangalam in the News</h2><div class="sec-line"></div></div>
    <div class="gnews-tabs">
      <button class="gnews-tab active" data-panel="gn-ml" onclick="switchGNews(this,'gn-ml')">🌐 All Sources</button>
      <button class="gnews-tab" data-panel="gn-en" onclick="switchGNews(this,'gn-en')">🔤 English News</button>
      <button class="gnews-tab" data-panel="gn-alt" onclick="switchGNews(this,'gn-alt')">📌 Chittur Area</button>
    </div>
    <div id="gn-ml" class="gnews-panel active">
      <div class="gnews-grid" id="gnews-ml-grid">
        <div class="gnews-loading"><span class="spinner"></span> Loading news…</div>
      </div>
    </div>
    <div id="gn-en" class="gnews-panel">
      <div class="gnews-grid" id="gnews-en-grid">
        <div class="gnews-loading"><span class="spinner"></span> Loading English news…</div>
      </div>
    </div>
    <div id="gn-alt" class="gnews-panel">
      <div class="gnews-grid" id="gnews-alt-grid">
        <div class="gnews-loading"><span class="spinner"></span> Loading news…</div>
      </div>
    </div>
  </div>
</div>


<!-- ══════════════════════════════════════
  TRUST STRIP
══════════════════════════════════════ -->
<div class="trust">
  <h3>Run by people of Tattamangalam, for people of Tattamangalam.</h3>
  <p>Online since year 2000 · Updated regularly · Established 2000</p>
</div>

<!-- ══════════════════════════════════════
  GOOGLE MAPS – Tattamangalam / Chittur-Thathamangalam
══════════════════════════════════════ -->
<div style="width:100%;line-height:0;display:block;">
  <iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d39125.01509004238!2d76.70946091590032!3d10.682726675453724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba86b4c109a0f09%3A0x5a579364ab1a35e0!2sChittur-Thathamangalam%2C%20Kerala!5e1!3m2!1sen!2sin!4v1771737908785!5m2!1sen!2sin"
    width="100%" height="450" style="border:0;display:block;width:100%;"
    allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
    title="Satellite view of Tattamangalam, Chittur, Palakkad, Kerala"></iframe>

</div>
<!-- ══════════════════════════════════════
  FOOTER
══════════════════════════════════════ -->
<footer class="foot" role="contentinfo">
  <div class="foot-inner">
    <div>
        <form><script src="https://checkout.razorpay.com/v1/payment-button.js" data-payment_button_id="pl_SJsBJBZLvazfxL" async> </script> </form>
        <br />
      <img src="https://www.tattamangalam.com/newsite/wp-content/uploads/2014/07/cropped-cropped-ttm-logo-e1726121930934.png.webp"
           alt="Tattamangalam.com logo" style="height:50px;margin-bottom:.8rem;opacity:.75" loading="lazy" />
      <h4>Tattamangalam.com</h4>
      <p>Unofficial community website for Tattamangalam, Chittur, Palakkad, Kerala — PIN 678102. Running since the year 2000.</p>
      <p style="font-family:'Tiro Malayalam';margin-top:.5rem">തത്തമംഗലം, ചിറ്റൂർ, പാലക്കാട്, കേരളം</p>
    </div>
    <div>
      <h4>Quick Links</h4>
      <ul>
        <li><a href="https://app.tattamangalam.com/" target="_blank" rel="noopener" style="color:var(--nav-hover);font-weight:600">📱 Community App – New!</a></li>
        <li><a href="/newsite/">News and Views</a></li>
        <li><a href="/weather/">Live Weather</a></li>
        <li><a href="https://tattamangalam.com/pictures/">Photo Gallery</a></li>
        <li><a href="https://tattamangalam.com/360/360photographs/">360° Views</a></li>
        <li><a href="https://app.tattamangalam.com/emergency" target="_blank" rel="noopener">🚨 Emergency Contacts</a></li>
        <li><a href="https://app.tattamangalam.com/businesses" target="_blank" rel="noopener">🏪 Business Directory</a></li>
        <li><a href="https://app.tattamangalam.com/complaints" target="_blank" rel="noopener">📋 Report Civic Issues</a></li>
        <li><a href="/site/">Archive since 2000</a></li>
        <li><a href="https://www.tattamangalam.com/newsite/contact/">Contact Us</a></li>
      </ul>
    </div>
    <div>
      <h4>Questions or Comments?</h4>
      <p>Your suggestions and comments are always welcome.</p>
      <p style="margin-top:.6rem"><a href="https://www.tattamangalam.com/newsite/contact/">Send us a message →</a></p>
      <div style="margin-top:1rem;display:flex;gap:.9rem;font-size:1.4rem">
        <a href="https://twitter.com/tattamangalam" title="Twitter / X" aria-label="Twitter">🐦</a>
        <a href="https://www.facebook.com/TTMMatters/" title="Facebook" aria-label="Facebook">📘</a>
        <a href="https://www.youtube.com/user/TattaMangalamVideos" title="YouTube" aria-label="YouTube">▶️</a>
        <a href="https://www.patreon.com/ttmpkd" title="Support us" aria-label="Patreon">❤️</a>
      </div>
    </div>
  </div>
  <div class="foot-bot">
    <span>&copy; Tattamangalam.com. All rights reserved.</span>
    <span>Setup and maintained by <a href="https://dotcompals.org">dotcompals</a> &nbsp;·&nbsp; <a href="https://www.patreon.com/ttmpkd?fan_landing=true">Support us on Patreon</a></span>
  </div>
</footer>


<!-- ── SMART FLOATING HELP BUTTON ──
     Mobile  → WhatsApp message to +917012233696
     Desktop → Email to dotcompals@gmail.com
                cc: admin@tattamangalam.com
                subject: Message from TattaMangalam.com

<style>
  #help-fab {
    position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 9999;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; /* WhatsApp green — works for both */
    color: #fff; border: none; cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.28);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem; line-height: 1;
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
  }
  #help-fab:hover { transform: scale(1.12); box-shadow: 0 6px 28px rgba(0,0,0,.35); }

  /* Desktop overrides – blue email colour */
  @media(min-width: 641px) {
    #help-fab { background: #1060a0; }
  }

  /* Tooltip label */
  #help-fab::after {
    content: attr(data-tip);
    position: absolute; right: 66px; top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.78); color: #fff;
    font-size: .72rem; font-weight: 600; font-family: 'Outfit', sans-serif;
    padding: .3rem .7rem; border-radius: 6px;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity .2s;
  }
  #help-fab:hover::after { opacity: 1; }
</style>
-->
<!-- The href is set by JS below based on device type -->
<a id="help-fab" href="#" aria-label="Contact us" role="button">💬</a>

<script>
(function(){
  var fab = document.getElementById('help-fab');
  var isMobile = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent)
                 || window.innerWidth <= 640;
  if (isMobile) {
    fab.href      = 'https://wa.me/917012233696';
    fab.target    = '_blank';
    fab.rel       = 'noopener';
    fab.setAttribute('data-tip', 'WhatsApp us');
    fab.textContent = '💬';
  } else {
    var subject   = encodeURIComponent('Message from TattaMangalam.com');
    var cc        = encodeURIComponent('admin@tattamangalam.com');
    fab.href      = 'mailto:dotcompals@gmail.com?cc=' + cc + '&subject=' + subject;
    fab.setAttribute('data-tip', 'Email us');
    fab.textContent = '✉️';
    fab.style.fontSize = '1.35rem';
  }
})();
</script>

<!-- Twitter widgets loaded after page interaction -->

<!-- Live search – preserved -->
<script defer src="https://www.tattamangalam.com/site/?file=livesearch"></script>
<script defer src="randomimage.js"></script>

<!-- ══════════════════════════════════════
  FEED LOADER v3 — allorigins proxy
  WP feed  → base64 data URI → decode → parse XML
  GNews    → plain XML text  → parse XML
══════════════════════════════════════ -->
<script>
(function(){
'use strict';

var AO = 'https://api.allorigins.win/get?url=';

/* ── helpers ───────────────────────────────────────────────── */
function esc(s){ return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

function stripTags(s){
  return (s||'').replace(/<[^>]+>/g,'')
    .replace(/&#8211;/g,'–').replace(/&#8216;|&#8217;/g,"'")
    .replace(/&#8220;|&#8221;/g,'"').replace(/&amp;/g,'&')
    .replace(/&#\d+;/g,' ').replace(/&nbsp;|\u00a0/g,' ').trim();
}

function fmtDate(s){
  if(!s) return '';
  try{ return new Date(s).toLocaleDateString('en-IN',{day:'numeric',month:'short',year:'numeric'}); }
  catch(e){ return (s+'').substring(0,10); }
}

function catEmoji(c){
  c=(c||'').toLowerCase();
  if(c.includes('weather')||c.includes('temperature')||c.includes('climate')) return '🌦️';
  if(c.includes('election')||c.includes('vote')||c.includes('result')) return '🗳️';
  if(c.includes('develop')||c.includes('road')||c.includes('infra')||c.includes('construction')) return '🏗️';
  if(c.includes('water')||c.includes('fstp')||c.includes('well')||c.includes('pond')) return '💧';
  if(c.includes('history')) return '📜';
  if(c.includes('health')||c.includes('hospital')||c.includes('medical')) return '🏥';
  if(c.includes('transport')||c.includes('rail')||c.includes('bus')||c.includes('ksrtc')) return '🚆';
  if(c.includes('app')||c.includes('digital')||c.includes('tech')) return '📱';
  if(c.includes('festival')||c.includes('pooram')||c.includes('temple')||c.includes('kuthira')) return '🎪';
  return '📰';
}

/* ── fetch a URL via allorigins, return raw XML/text ─────── */
function aoFetch(targetUrl, cb){
  var url = AO + encodeURIComponent(targetUrl);
  fetch(url)
    .then(function(r){
      if(!r.ok) throw new Error('HTTP '+r.status);
      return r.json();
    })
    .then(function(d){
      var contents = d.contents || '';
      /* WordPress feed comes back as a base64 data URI */
      if(contents.indexOf('base64,') !== -1){
        var b64 = contents.split('base64,')[1];
        /* atob for base64 decode, then fix UTF-8 */
        try{
          var binary = atob(b64);
          var bytes = new Uint8Array(binary.length);
          for(var i=0;i<binary.length;i++) bytes[i]=binary.charCodeAt(i);
          var xml = new TextDecoder('utf-8').decode(bytes);
          cb(null, xml);
        } catch(e){ cb(e); }
      } else {
        cb(null, contents);
      }
    })
    .catch(function(e){ cb(e); });
}

/* ── parse <item> elements from XML string ────────────────── */
function parseItems(xml){
  var parser = new DOMParser();
  var doc = parser.parseFromString(xml, 'text/xml');
  var itemEls = doc.querySelectorAll('item');
  var items = [];
  itemEls.forEach(function(el){
    function txt(tag){ var n=el.querySelector(tag); return n?n.textContent.trim():''; }
    /* thumbnail: look inside description for img src */
    var desc = txt('description') || txt('content\\:encoded') || '';
    var imgMatch = desc.match(/src="(https?:[^"]+?\.(?:jpg|jpeg|png|webp))(?:\?[^"]*)?"/i);
    /* prefer -150x150 thumbnails for speed */
    var img = imgMatch ? imgMatch[1] : '';
    /* categories */
    var cats = [];
    el.querySelectorAll('category').forEach(function(c){ cats.push(c.textContent.trim()); });
    /* pubDate */
    var pubDate = txt('pubDate') || txt('dc\\:date') || '';
    items.push({
      title:       txt('title'),
      link:        txt('link') || (el.querySelector('link')?el.querySelector('link').getAttribute('href'):''),
      pubDate:     pubDate,
      description: desc,
      image:       img,
      categories:  cats
    });
  });
  return items;
}

/* ══════════════════════════════════════
   BLOG FEED
══════════════════════════════════════ */
function loadBlogFeed(){
  var grid = document.getElementById('blog-feed-grid');
  if(!grid) return;
  aoFetch('https://www.tattamangalam.com/newsite/feed/', function(err, xml){
    if(err || !xml){ renderBlogFallback(grid); return; }
    try{
      var items = parseItems(xml).slice(0,8);
      if(!items.length){ renderBlogFallback(grid); return; }
      renderBlogCards(grid, items);
    } catch(e){ renderBlogFallback(grid); }
  });
}

function renderBlogCards(grid, items){
  var html = '';
  items.forEach(function(item){
    var title   = esc(stripTags(item.title)) || 'Untitled';
    var link    = esc(item.link || '#');
    var date    = fmtDate(item.pubDate);
    var catLbl  = item.categories[0] ? stripTags(item.categories[0]) : 'News';
    var emoji   = catEmoji(catLbl);
    var excerpt = stripTags(item.description).substring(0,120);
    if(excerpt.length===120) excerpt+='…';
    excerpt = esc(excerpt);
    var img = item.image;

    html += '<a href="'+link+'" target="_blank" rel="noopener" class="news-feed-card">';
    if(img){
      html += '<img class="news-feed-thumb" src="'+esc(img)+'" alt="'+title.substring(0,60)+'" loading="lazy" '
            + 'onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'flex\'" />';
      html += '<div class="news-feed-thumb-placeholder" style="display:none">'+emoji+'</div>';
    } else {
      html += '<div class="news-feed-thumb-placeholder">'+emoji+'</div>';
    }
    html += '<div class="news-feed-body">';
    html += '<span class="news-feed-cat">'+emoji+' '+esc(catLbl)+'</span>';
    html += '<div class="news-feed-title">'+title+'</div>';
    if(excerpt) html += '<div class="news-feed-excerpt">'+excerpt+'</div>';
    html += '<div class="news-feed-meta"><span>'+date+'</span><span>Read →</span></div>';
    html += '</div></a>';
  });
  grid.innerHTML = html;
}

function renderBlogFallback(grid){
  var posts = [
    {t:'Tattamangalam Community Web App is Now Live',u:'https://www.tattamangalam.com/newsite/tattamangalam-community-web-app-is-now-live-explore-use-and-share/',d:'20 Mar 2026',e:'📱',c:'App'},
    {t:'ചിറ്റൂർ – തത്തമംഗലം – പുതുനഗരം: യഥാർത്ഥ വികസനം',u:'https://www.tattamangalam.com/newsite/reality-of-development-in-chittur/',d:'17 Mar 2026',e:'🏗️',c:'Development'},
    {t:"People's Master Plan 2042 for Chittur-Tattamangalam",u:'https://www.tattamangalam.com/newsite/peoples-master-plan-2042-for-chittur-tattamangalam-plan-vs-ground-reality/',d:'14 Mar 2026',e:'📋',c:'Planning'},
    {t:'February Is No Longer Mild: Tattamangalam Temperature Data',u:'https://www.tattamangalam.com/newsite/february-is-no-longer-mild-a-data-driven-look-at-tattamangalam-temperatures-2025-vs-2026/',d:'2 Mar 2026',e:'🌦️',c:'Weather'},
    {t:'Municipal Election Results 2025 – Chittur Tattamangalam',u:'https://www.tattamangalam.com/newsite/municipal-election-results-2025-chittur-tattamangalam-municipality/',d:'1 Feb 2026',e:'🗳️',c:'Elections'},
    {t:'Open Well Water: Is It Really Safe to Drink?',u:'https://www.tattamangalam.com/newsite/our-open-well-water-looks-clear-but-is-it-really-safe-to-drink/',d:'21 Dec 2025',e:'💧',c:'Health'}
  ];
  grid.innerHTML = posts.map(function(p){
    return '<a href="'+p.u+'" target="_blank" rel="noopener" class="news-feed-card">'
      +'<div class="news-feed-thumb-placeholder">'+p.e+'</div>'
      +'<div class="news-feed-body">'
      +'<span class="news-feed-cat">'+p.e+' '+p.c+'</span>'
      +'<div class="news-feed-title">'+p.t+'</div>'
      +'<div class="news-feed-meta"><span>'+p.d+'</span><span>Read →</span></div>'
      +'</div></a>';
  }).join('');
}

/* ══════════════════════════════════════
   GOOGLE NEWS — all three tabs
══════════════════════════════════════ */
var gnewsFeeds = {
  ml: {
    url:    'https://news.google.com/rss/search?q=Tattamangalam+OR+Thathamangalam+OR+Chittur+Palakkad',
    gridId: 'gnews-ml-grid',
    loaded: false
  },
  en: {
    url:    'https://news.google.com/rss/search?q=tattamangalam+OR+thathamangalam',
    gridId: 'gnews-en-grid',
    loaded: false
  },
  alt: {
    url:    'https://news.google.com/rss/search?q=thathamangalam+Chittur',
    gridId: 'gnews-alt-grid',
    loaded: false
  }
};

function loadGNews(key){
  var feed = gnewsFeeds[key];
  if(!feed || feed.loaded) return;
  feed.loaded = true;
  var grid = document.getElementById(feed.gridId);
  if(!grid) return;

  aoFetch(feed.url, function(err, xml){
    if(err || !xml){
      grid.innerHTML = '<div class="gnews-loading" style="padding:1rem 0">Could not load news right now. '
        + '<a href="https://news.google.com/search?q=tattamangalam" target="_blank" rel="noopener" style="color:var(--accent)">Search on Google News →</a></div>';
      return;
    }
    try{
      var items = parseItems(xml);
      if(!items.length) throw new Error('empty');
      renderGNewsCards(grid, items);
    } catch(e){
      grid.innerHTML = '<div class="gnews-loading" style="padding:1rem 0"><a href="https://news.google.com/search?q=tattamangalam" target="_blank" rel="noopener" style="color:var(--accent)">View on Google News →</a></div>';
    }
  });
}

function renderGNewsCards(grid, items){
  var html = '';
  items.slice(0,9).forEach(function(item){
    var rawTitle = stripTags(item.title||'');
    /* Google News format: "Headline - Source Name" */
    var dashIdx  = rawTitle.lastIndexOf(' - ');
    var source   = dashIdx > 0 ? rawTitle.substring(dashIdx+3) : 'Google News';
    var headline = dashIdx > 0 ? rawTitle.substring(0, dashIdx) : rawTitle;
    var date     = fmtDate(item.pubDate);
    var link     = esc(item.link || '#');
    html += '<div class="gnews-item">';
    html += '<div class="gnews-source">'+esc(source)+'</div>';
    html += '<div class="gnews-title"><a href="'+link+'" target="_blank" rel="noopener noreferrer">'+esc(headline)+'</a></div>';
    html += '<div class="gnews-date">'+date+'</div>';
    html += '</div>';
  });
  grid.innerHTML = html;
}

/* ── tab switching ─────────────────────────────────────────── */
window.switchGNews = function(btn, panelId){
  document.querySelectorAll('.gnews-tab').forEach(function(b){ b.classList.remove('active'); });
  document.querySelectorAll('.gnews-panel').forEach(function(p){ p.classList.remove('active'); });
  btn.classList.add('active');
  document.getElementById(panelId).classList.add('active');
  var map = {'gn-ml':'ml','gn-en':'en','gn-alt':'alt'};
  loadGNews(map[panelId]);
};

/* ── boot ──────────────────────────────────────────────────── */
function boot(){
  loadBlogFeed();
  loadGNews('ml');
}
if(document.readyState === 'loading'){
  document.addEventListener('DOMContentLoaded', boot);
} else {
  boot();
}

})();
</script>



<!-- ══════════════════════════════════════
  SLIDESHOW + ACCORDION JS
══════════════════════════════════════ -->
<script>
(function() {
  /* ── HERO SLIDESHOW ── */
  var sc    = document.getElementById('hero-slides');
  var dc    = document.getElementById('hero-dots');
  var slides = sc ? sc.querySelectorAll('.hero-slide') : [];
  var n = slides.length, cur = 0;

  for (var i = 0; i < n; i++) {
    var btn = document.createElement('button');
    btn.className = 'dot' + (i === 0 ? ' active' : '');
    btn.setAttribute('aria-label', 'Go to slide ' + (i + 1));
    btn.dataset.idx = i;
    btn.addEventListener('click', (function(x){ return function(){ jump(x); }; })(i));
    dc.appendChild(btn);
  }

  function jump(x) {
    slides[cur].classList.remove('active');
    dc.children[cur].classList.remove('active');
    cur = x;
    slides[cur].classList.add('active');
    dc.children[cur].classList.add('active');
  }

  var timer = setInterval(function(){ jump((cur + 1) % n); }, 2500);

  /* Pause on hover */
  var hero = document.querySelector('.hero');
  if (hero) {
    hero.addEventListener('mouseenter', function(){ clearInterval(timer); });
    hero.addEventListener('mouseleave', function(){ timer = setInterval(function(){ jump((cur+1)%n); }, 2500); });
  }

  /* ── MOBILE HAMBURGER ── */
  var ham = document.getElementById('nav-ham');
  var drawer = document.getElementById('nav-drawer');
  if (ham && drawer) {
    ham.addEventListener('click', function() {
      var isOpen = drawer.classList.contains('open');
      drawer.classList.toggle('open');
      ham.classList.toggle('open');
      ham.setAttribute('aria-expanded', !isOpen);
    });
    // Close drawer when a link is tapped
    drawer.querySelectorAll('a').forEach(function(link) {
      link.addEventListener('click', function() {
        drawer.classList.remove('open');
        ham.classList.remove('open');
        ham.setAttribute('aria-expanded', 'false');
      });
    });
    // Close on outside tap
    document.addEventListener('click', function(e) {
      if (!ham.contains(e.target) && !drawer.contains(e.target)) {
        drawer.classList.remove('open');
        ham.classList.remove('open');
        ham.setAttribute('aria-expanded', 'false');
      }
    });
  }

  /* ── ACCORDION ── */
  document.querySelectorAll('.acc-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var isOpen = this.classList.contains('open');
      document.querySelectorAll('.acc-btn').forEach(function(b) {
        b.classList.remove('open');
        b.setAttribute('aria-expanded', 'false');
        b.nextElementSibling.style.maxHeight = null;
      });
      if (!isOpen) {
        this.classList.add('open');
        this.setAttribute('aria-expanded', 'true');
        this.nextElementSibling.style.maxHeight = this.nextElementSibling.scrollHeight + 'px';
      }
    });
  });
})();
</script>

<!-- ══════════════════════════════════════
  PERFORMANCE: Lazy-load remaining hero slide images
  Only slide 1 loads eagerly. Rest load after page is ready.
══════════════════════════════════════ -->
<script>
(function() {
  function loadSlidesBg() {
    var slides = document.querySelectorAll('.hero-slide[data-bg]');
    slides.forEach(function(slide, i) {
      function injectImg() {
        var img = document.createElement('img');
        img.src = slide.dataset.bg;
        img.alt = '';
        img.loading = 'lazy';
        img.decoding = 'async';
        img.width = 1280;
        img.height = 720;
        img.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;';
        slide.appendChild(img);
      }
      if (i === 0) {
        // Load second slide right away (it's next in queue)
        injectImg();
      } else if (window.requestIdleCallback) {
        requestIdleCallback(injectImg);
      } else {
        setTimeout(injectImg, 2000 + (i * 600));
      }
    });
  }
  if (document.readyState === 'complete') {
    loadSlidesBg();
  } else {
    window.addEventListener('load', loadSlidesBg);
  }
})();
</script>

<!-- Google Tag Manager (moved to bottom – non-blocking) -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-T94TX4J');
</script>


<script>
  var CHATBOT_WIDGET = {
    position:     'right',                // 'right' or 'left'
    bottomOffset: '20px',                 // distance from bottom
    sideOffset:   '20px',                 // distance from the side
    chatUrl:      '/chat1/index.html',     // path to chatbot page
    brandColor:   '#1a73e8',              // bubble colour
    greeting:     'Chat with us!'         // tooltip message
  };
</script>
<script src="/chat1/chatbot-widget.js"></script>
</body>
</html>
