/* =====================================================================
   Thalavadi Information Portal — Shared Stylesheet
   All pages link to this file. Page-specific accent colours and unique
   component styles live in a small inline <style> per page.
   ===================================================================== */

/* ── RESET ── */
*{box-sizing:border-box;}
img{max-width:100%;height:auto;}

/* ── BASE ── */
body{font-family:Arial,sans-serif;line-height:1.6;margin:0;padding:0;background:#f4f4f9;color:#333;}

/* ── HEADER (page-level, pre-sticky-override) ── */
header{text-align:center;padding:1.4rem 1rem 0.5rem;background:var(--accent-light,#e8f5e9);border-bottom:3px solid var(--accent,#2a6049);}
header h1{margin:0 0 0.2rem;color:var(--accent,#2a6049);font-size:1.9rem;}
header p{margin:0;color:#555;font-size:1rem;}

/* ── NAV ── */
nav{display:flex;flex-wrap:wrap;justify-content:center;padding:0.5rem;gap:0.4rem;background:#f0f0f0;border-bottom:2px solid #ddd;}
nav a{padding:0.45rem 0.9rem;background:#444;color:#fff;text-decoration:none;border-radius:4px;font-size:0.85rem;white-space:nowrap;transition:opacity .15s;}
nav a:hover{opacity:.82;}
a.nav-home   {background:#37474f;} a.nav-home:hover   {background:#455a64;}
a.nav-economy{background:#2e7d32;} a.nav-economy:hover{background:#388e3c;}
a.nav-infra  {background:#1565c0;} a.nav-infra:hover  {background:#1976d2;}
a.nav-admin  {background:#6a1b9a;} a.nav-admin:hover  {background:#7b1fa2;}
a.nav-civic  {background:#00796b;} a.nav-civic:hover  {background:#00897b;}
a.nav-health {background:#c62828;} a.nav-health:hover {background:#d32f2f;}
a.nav-edu    {background:#e65100;} a.nav-edu:hover    {background:#f57c00;}
a.nav-wild   {background:#37474f;} a.nav-wild:hover   {background:#546e7a;}
a.nav-news   {background:#1b5e20;} a.nav-news:hover   {background:#2e7d32;}
a.nav-dir    {background:#b25000;} a.nav-dir:hover    {background:#e65100;}

/* ── STICKY SITE HEADER ── */
#siteHeader{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.09);transition:box-shadow .25s;}
#siteHeader.scrolled{box-shadow:0 4px 18px rgba(0,0,0,.20);}

/* Flexbox header — fixed height, NEVER changes on scroll → zero shake */
#siteHeader header{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem 1rem;
  min-height:54px;
  background:#fff;
  border:none !important;
  text-align:left;
}
.hc{flex:1;text-align:center;min-width:0;overflow:hidden;}
#siteHeader header h1{font-size:1.15rem;margin:0;color:#222;line-height:1.2;}
#siteHeader header p{font-size:.75rem;margin:0;color:#666;transition:opacity .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#siteHeader.scrolled header p{opacity:0;pointer-events:none;display: none;}

/* ── BURGER BUTTON (flex child, always on left) ── */
.burger{
  display:none;             /* desktop: hidden */
  flex-direction:column;
  justify-content:space-between;
  flex-shrink:0;
  order:-1;                 /* always leftmost flex item */
  width:28px;height:22px;
  background:none;border:0;cursor:pointer;padding:0;
}
.burger span{display:block;width:100%;height:3px;background:#444;border-radius:3px;transition:transform .3s,opacity .3s;}
.burger.open span:nth-child(1){transform:translateY(9.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.burger.open span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg);}

/* Desktop-scrolled: show burger as extra nav toggle */
#siteHeader.scrolled .burger{display:flex;}

/* ── MOBILE NAV ≤ 900px ── */
@media(max-width:900px){
  .burger{display:flex !important;}          /* always on mobile */
  #mainNav{display:none;flex-direction:column;align-items:stretch;}
  #mainNav.open{display:flex;width: 97%;}
  #mainNav a{text-align:center;border-radius:0;font-size:.9rem;padding:.72rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);}
  #mainNav #google_translate_element{justify-content:center;padding:.5rem;width:100%;}
}

/* ── SECTIONS ── */
section{padding:1.5rem 5%;}
section h2{color:#222;border-left:4px solid var(--accent,#2a6049);padding-left:.75rem;margin-bottom:1rem;font-size:1.3rem;}
section h3{color:var(--accent,#2a6049);margin:1.25rem 0 .5rem;font-size:1.05rem;}

/* ── TABLES ── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.75rem 0;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.07);}
table{border-collapse:collapse;width:100%;font-size:.9rem;}
th{background:var(--accent,#2a6049);color:#fff;padding:.6rem .8rem;text-align:left;position:sticky;top:0;}
td{padding:.5rem .8rem;border-bottom:1px solid #eee;}
tr:nth-child(even) td{background:#f8f8f8;}
tr:hover td{background:var(--accent-light,#e8f5e9);}

/* ── FIGURES / IMAGES ── */
figure{margin:1rem 0;}
figure img{width:100%;max-width:900px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.12);display:block;}
figcaption{font-size:.82rem;color:#666;margin-top:.4rem;font-style:italic;}

/* ── CHART BOXES (replaces figure for data visualisations) ── */
.chart-box{background:#fff;border-radius:8px;padding:1rem 1.25rem 1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.09);margin:1rem 0;}
.chart-box h4{margin:0 0 .75rem;font-size:.95rem;color:#444;font-weight:600;}
.chart-box canvas{max-height:320px;}

/* ── CARDS ── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem;margin-bottom:1.5rem;}
.stat-card{background:#fff;border-radius:8px;padding:1rem;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.08);border-top:3px solid var(--accent,#2a6049);}
.stat-card .value,.stat-card .num{font-size:1.5rem;font-weight:700;color:var(--accent,#2a6049);display:block;}
.stat-card .label,.stat-card .lbl{font-size:.78rem;color:#666;display:block;margin-top:.2rem;}
.card{background:#fff;border-radius:8px;padding:1rem 1.25rem;box-shadow:0 1px 5px rgba(0,0,0,.07);margin-bottom:1rem;}
.card h3{color:var(--accent,#2a6049);margin:0 0 .5rem;}
.card ul{padding-left:1.25rem;margin:.5rem 0;}
.card li{margin:.3rem 0;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin-bottom:1.5rem;}

/* ── BADGES ── */
.badge{display:inline-block;padding:.15rem .55rem;border-radius:3px;font-size:.75rem;font-weight:700;color:#fff;}
.badge-green{background:#2e7d32;}.badge-orange{background:#e65100;}.badge-blue{background:#1565c0;}.badge-red{background:#c62828;}
.badge-yellow{background:#f9a825;color:#333;}.badge-purple{background:#6a1b9a;}
.badge-bank{background:#1565c0;}.badge-atm{background:#00796b;}.badge-post{background:#e65100;}
.badge-esevai{background:#6a1b9a;}.badge-fuel{background:#b71c1c;}.badge-police{background:#37474f;}
.badge-forest{background:#2e7d32;}.badge-telco{background:#0277bd;}
.badge-tiger{background:#bf360c;}.badge-elephant{background:#37474f;}.badge-leopard{background:#4a148c;}
.badge-mammal{background:#2e7d32;}.badge-bird{background:#1565c0;}.badge-reptile{background:#558b2f;}
.badge-conflict{background:#c62828;}.badge-mitigation{background:#00796b;}
.badge-wildlife{background:#37474f;}.badge-legal{background:#1565c0;}.badge-agri{background:#2e7d32;}.badge-social{background:#6a1b9a;}

/* ── CALLOUT BOXES ── */
.info-box{background:var(--accent-light,#e8f5e9);border-left:4px solid var(--accent,#2a6049);padding:.8rem 1rem;border-radius:0 8px 8px 0;margin:.75rem 0;}
.info-box h4{margin:0 0 .3rem;color:var(--accent,#2a6049);}
.alert-box{background:#fff3e0;border-left:4px solid #e65100;padding:.75rem 1rem;border-radius:0 6px 6px 0;margin:1rem 0;font-size:.9rem;}
.alert-box strong{color:#e65100;}
.danger-box{background:#ffebee;border-left:4px solid #c62828;padding:.75rem 1rem;border-radius:0 6px 6px 0;margin:1rem 0;font-size:.9rem;}
.danger-box strong{color:#c62828;}
.warning-box{background:#fff8e1;border-left:4px solid #f9a825;padding:.8rem 1rem;border-radius:0 8px 8px 0;margin:.75rem 0;}
.notice-box{background:#f3e5f5;border-left:4px solid #6a1b9a;padding:.8rem 1rem;border-radius:0 8px 8px 0;margin:.75rem 0;}
.notice-box h4{margin:0 0 .3rem;color:#6a1b9a;}

/* ── FOOTER ── */
footer{text-align:center;padding:1rem;background:#222;color:#fff;font-size:.9rem;}
footer a{color:#aaa;}

/* ── SCROLL TO TOP ── */
#scrollTop{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--accent,#2a6049);color:#fff;border:none;border-radius:50%;width:44px;height:44px;font-size:1.1rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25);opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s;z-index:998;display:flex;align-items:center;justify-content:center;}
#scrollTop.visible{opacity:1;transform:translateY(0);}
#scrollTop:hover{filter:brightness(1.15);}

/* ── BASE MOBILE ADJUSTMENTS ── */
@media(max-width:768px){
  section{padding:1rem 3%;}
  header h1{font-size:1.5rem;}
}
.skiptranslate.goog-te-gadget a {
    background: transparent;
}