/* ===================================================================
   SLR SHARED HEADER + FOOTER — CSS
   Source of truth: index.html (per project's existing "gold standard" rule)
   Extracted verbatim — line numbers below refer to index.html at time of extraction.
   =================================================================== */

/* ---- Design tokens (index.html lines 25-33) ----
   Required by every rule below. Bundled here so this file is self-contained
   and consuming pages don't need to guess/duplicate token values. */
:root{
  --g:#1A3D2B;--gm:#2D6A4F;--gl:#52B788;--gs:#D8F3DC;--gp:#F0FAF3;
  --am:#E9A020;--al:#FFF3CD;--br:#7C4E2D;
  --cr:#FAF7F0;--cd:#EEE8DC;--wh:#fff;
  --tx:#18291A;--tm:#445240;--tl:#8A957A;--rd:#C0392B;
  --sh-sm:0 2px 8px rgba(26,61,43,.10);
  --sh-md:0 6px 24px rgba(26,61,43,.14);
  --sh-lg:0 16px 48px rgba(26,61,43,.20);
  --r:12px;--r-sm:8px;--tr:all .28s cubic-bezier(.4,0,.2,1);
}

/* ---- Base resets (index.html lines 34-38) ----
   Required so header/footer render with correct box-sizing/typography
   even if a page's own reset block differs slightly. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--cr);color:var(--tx);line-height:1.6}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}ul{list-style:none}button{border:none;cursor:pointer;font-family:inherit}

/* ---- Tamil font + language toggle (index.html lines 40-43) ----
   REQUIRED for setLang()/EN-TA toggle to function on any page. */
.ta{font-family:'Noto Sans Tamil','DM Sans',sans-serif}
[data-lang="en"] .ta-only{display:none!important}
[data-lang="ta"] .en-only{display:none!important}

/* =====================================================
   HEADER
   ===================================================== */
.header{background:var(--wh);position:sticky;top:0;z-index:1000;box-shadow:var(--sh-sm);border-bottom:1px solid var(--cd)}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;cursor:pointer;overflow:hidden}
.logo-mark{width:46px;height:46px;background:linear-gradient(135deg,var(--g),var(--gm));border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 4px 14px rgba(26,61,43,.25);flex-shrink:0}
/* Present in source, not used by current header.html markup (which uses logo-img instead) —
   included anyway since it's zero-risk and part of the same component's rule block */
.logo-name{font-family:'Crimson Pro',serif;font-size:1.4rem;font-weight:700;color:var(--g);display:block;letter-spacing:-.01em;line-height:1.1}
.logo-sub{font-size:.58rem;color:var(--am);letter-spacing:.12em;text-transform:uppercase;font-weight:600;display:block;margin-top:1px}
.logo-img{height:78px;width:auto;max-width:300px;object-fit:contain;object-position:center;
  flex-shrink:0;display:block;border-radius:0;
  filter:drop-shadow(0 2px 10px rgba(26,61,43,.22))}
.hi{max-width:1380px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:20px;height:88px}
.h-search{flex:1;max-width:500px;position:relative}
.h-search input{width:100%;padding:11px 50px 11px 18px;border:1.5px solid var(--cd);border-radius:50px;font-size:.87rem;font-family:inherit;background:var(--cr);color:var(--tx);transition:var(--tr);outline:none}
.h-search input:focus{border-color:var(--gm);background:var(--wh);box-shadow:0 0 0 3px rgba(45,106,79,.10)}
.h-search input::placeholder{color:var(--tl)}
.h-search-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:var(--g);color:white;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:var(--tr)}
.h-search-btn:hover{background:var(--am);transform:translateY(-50%) scale(1.06)}
.h-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}
.act-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border-radius:var(--r-sm);color:var(--tm);font-size:.65rem;font-weight:600;background:transparent;transition:var(--tr);position:relative;cursor:pointer}
.act-btn:hover{background:var(--gs);color:var(--g)}
.act-btn .ico{font-size:1.2rem}
.act-badge{position:absolute;top:3px;right:7px;background:var(--rd);color:white;font-size:.58rem;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.act-btn i,.h-search-btn i,.consult-btn i{font-size:1.05rem;vertical-align:-2px}
.act-btn:hover i{color:var(--am)}
.consult-btn{background:var(--g);color:white;padding:10px 20px;border-radius:50px;font-size:.82rem;font-weight:600;transition:var(--tr);white-space:nowrap;display:flex;align-items:center;gap:7px}
.consult-btn:hover{background:var(--am);color:var(--g);transform:translateY(-1px);box-shadow:0 4px 14px rgba(233,160,32,.3)}
.lang-tog{display:flex;align-items:center;background:var(--cd);border-radius:50px;overflow:hidden;flex-shrink:0;margin-left:4px}
.lang-btn{padding:5px 11px;font-size:.72rem;font-weight:700;background:transparent;color:var(--tm);transition:var(--tr);cursor:pointer;border:none}
.lang-btn.on{background:var(--g);color:white}

/* =====================================================
   NAV + MEGA MENU
   ===================================================== */
.nav{background:var(--g);border-bottom:2px solid rgba(255,255,255,.06);overflow:visible}
.ni{max-width:1380px;margin:0 auto;padding:0 24px;display:flex;align-items:stretch;overflow:visible;scrollbar-width:none}
.ni::-webkit-scrollbar{display:none}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:6px;padding:13px 16px;color:rgba(255,255,255,.88);font-size:.84rem;font-weight:500;transition:var(--tr);white-space:nowrap;cursor:pointer}
.nav-link:hover,.nav-item:hover .nav-link{background:rgba(255,255,255,.10);color:var(--am)}
.nav-link .arr{font-size:.60rem;transition:var(--tr)}
.nav-item:hover .arr{transform:rotate(180deg)}
.nav-badge{background:var(--am);color:var(--g);font-size:.60rem;font-weight:700;padding:2px 6px;border-radius:4px}
.dropdown{position:absolute;top:100%;left:0;background:var(--wh);border-radius:0 var(--r) var(--r) var(--r);box-shadow:var(--sh-lg);padding:22px;min-width:520px;z-index:999;border-top:3px solid var(--am);gap:24px}
.dropdown{display:none!important}
.dropdown.open{display:flex!important}
.dc{flex:1}

/* =====================================================
   HAMBURGER + MOBILE NAV DRAWER
   ===================================================== */
.mob-menu-btn{
  display:none;flex-direction:column;gap:5px;
  background:transparent;border:none;cursor:pointer;
  padding:8px;margin-left:auto;flex-shrink:0;
}
.mob-menu-btn span{
  display:block;width:24px;height:2px;
  background:var(--g);border-radius:2px;transition:var(--tr);
}
.mob-nav-open .mob-menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-nav-open .mob-menu-btn span:nth-child(2){opacity:0}
.mob-nav-open .mob-menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-nav-drawer{
  display:block;position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--g);z-index:1100;overflow-y:auto;
  padding:72px 28px 32px;
  transform:translateX(-100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.mob-nav-open .mob-nav-drawer{transform:translateX(0)}
.mob-nav-close{
  position:absolute;top:18px;right:18px;
  background:rgba(255,255,255,.12);border:none;color:white;
  width:38px;height:38px;border-radius:50%;font-size:1.1rem;cursor:pointer;
}
.mob-nav-drawer a{
  display:block;padding:15px 0;
  color:rgba(255,255,255,.88);font-size:1rem;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-decoration:none;
}
.mob-nav-drawer a:last-of-type{border-bottom:none}
.mob-nav-drawer a:hover{color:var(--am)}
.mob-lang-row{display:flex;gap:12px;margin-top:24px}
.mob-lang-btn{
  padding:9px 22px;border-radius:50px;font-weight:700;
  font-size:.85rem;cursor:pointer;border:none;
}
.mob-lang-btn.on{background:var(--am);color:var(--g)}
.mob-lang-btn.off{background:rgba(255,255,255,.15);color:white}

/* =====================================================
   SEARCH OVERLAY (triggered from header search button / Ctrl+K)
   ===================================================== */
.search-overlay{position:fixed;inset:0;z-index:9999;background:rgba(26,61,43,.85);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding-top:80px;opacity:0;pointer-events:none;transition:opacity .25s ease}
.search-overlay.open{opacity:1;pointer-events:all}
.search-box{background:var(--wh);border-radius:var(--r);width:100%;max-width:640px;box-shadow:var(--sh-lg);overflow:hidden;transform:translateY(-16px);transition:transform .25s ease}
.search-overlay.open .search-box{transform:translateY(0)}
.search-input-row{display:flex;align-items:center;gap:0;padding:0 16px;border-bottom:1px solid var(--cd)}
.search-input-row input{flex:1;padding:18px 12px;font-size:1rem;border:none;outline:none;font-family:inherit;color:var(--tx);background:transparent}
.search-input-row input::placeholder{color:var(--tl)}
.search-close-btn{background:none;border:none;font-size:1.3rem;color:var(--tl);cursor:pointer;padding:8px;border-radius:50%;transition:var(--tr)}
.search-close-btn:hover{background:var(--gs);color:var(--g)}
.search-results{padding:12px 16px;max-height:380px;overflow-y:auto}
.search-results:empty::after{content:'Type to search products...';display:block;text-align:center;color:var(--tl);font-size:.88rem;padding:20px 0}

/* =====================================================
   FOOTER
   ===================================================== */
.footer{background:var(--tx);color:rgba(255,255,255,.70);padding:56px 0 0}
.fg{max-width:1380px;margin:0 auto;padding:0 24px 52px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.f-logo-name{font-family:'Crimson Pro',serif;font-size:1.5rem;font-weight:700;color:var(--gl);display:block}
.f-logo-sub{font-size:.58rem;color:var(--am);letter-spacing:.12em;text-transform:uppercase;font-weight:600;display:block;margin-top:1px;margin-bottom:14px}
.f-tag{font-size:.79rem;font-style:italic;color:rgba(255,255,255,.50);line-height:1.70;margin-bottom:16px}
.f-pills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.fp{font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:4px}
.fp-s{background:rgba(82,183,136,.18);color:var(--gl)}
.fp-a{background:rgba(156,107,74,.20);color:#C0856A}
.fp-f{background:rgba(90,138,42,.20);color:#8AC04A}
.f-social{display:flex;gap:9px}
.soc-btn{width:36px;height:36px;background:rgba(255,255,255,.07);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.82rem;color:rgba(255,255,255,.50);transition:var(--tr);cursor:pointer}
.soc-btn:hover{background:var(--am);color:var(--g)}
.f-col h4{font-size:.90rem;font-weight:700;color:white;margin-bottom:14px;letter-spacing:.03em}
.f-col ul li{margin-bottom:9px}
.f-col ul li a{font-size:.80rem;color:rgba(255,255,255,.45);transition:var(--tr)}
.f-col ul li a:hover{color:var(--am);padding-left:3px}
.f-contact{font-size:.80rem;line-height:1.90;color:rgba(255,255,255,.50)}
.f-contact a{color:rgba(255,255,255,.60);transition:var(--tr)}
.f-contact a:hover{color:var(--am)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:16px 24px;max-width:1380px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;font-size:.72rem;color:rgba(255,255,255,.30);flex-wrap:wrap;gap:10px}
.fb-links{display:flex;gap:18px}
.fb-links a{color:rgba(255,255,255,.30);transition:var(--tr)}
.fb-links a:hover{color:var(--am)}

/* NOT INCLUDED (deliberate scope exclusion, per Aug 17 2026 decision):
   .topbar, .announce, .announce-track — utility bar + marquee sit above
   the header but are a separate messy-marquee problem flagged in the
   UI/UX audit. Do not fold that fix into this component. */