/* style-base.css, site-fixes.css, corner-logo-size-fix.css, forms.css and
   forms-mobile-fix.css used to be pulled in here via @import, but that
   makes the browser fetch them in a sequential waterfall (it can't even
   start requesting the next one until this file has downloaded) instead
   of in parallel — a real problem on a slow connection, where it meant
   the page rendered fully unstyled for however long the whole chain took.
   They are now loaded as direct <link> tags in index.html/gallery.html,
   in the same order, immediately before this file — same cascade, fetched
   in parallel. */

/* Header brand lockup: the wordmark logo is the highlight, stacked above
   a single-line tagline (never beside it) at every width from phones to
   laptops, with a tight, fixed 2px gap between the two (not a spacing
   token that grows with viewport — a clamp()-based gap read as an
   oversized empty band once the tagline moved onto its own row). 2px
   rather than 0: the logo PNG itself has ~3-10% transparent padding
   baked into its bottom/top edges (checked with PIL: bbox top 10.6%,
   bottom 3.6% of the image height), so a literal 0px CSS gap still
   leaves a visible sliver — 2px reads as the tightest gap that doesn't
   look like the tagline is touching/clipping the logo's real pixels.
   The tagline is purely decorative, so instead of wrapping or being
   clipped mid-word when it doesn't fit, it is hidden outright.

   The media queries below are a coarse, JS-free first pass sized to the
   Noto Sans Tamil web font; js/i18n.js (fitBrandTagline) then measures
   the tagline's *actual* rendered scrollWidth vs. its box on every load,
   font-swap, resize and language change, and force-hides or force-shows
   it via an inline !important display — overriding these breakpoints
   whenever a slow connection, a fallback font before the web font
   finishes loading, or unusual OS font metrics would otherwise make a
   breakpoint tuned for one font clip a wider-rendering one. That JS
   check is the real source of truth; these breakpoints only keep things
   reasonable for the brief moment before it runs.
   .brand itself is left free to flex-shrink (its inherited flex:0 1 auto
   from style-base.css, plus min-width:0 below) rather than pinned to a
   guessed max-width: its header siblings (the hamburger on mobile, the
   nav links on desktop) are flex-shrink:0 at every width, so the flexbox
   shrink algorithm already gives .brand exactly whatever room is left
   beside them — precise at every breakpoint and immune to those siblings
   changing size, which a fixed calc() subtraction is not.

   The clamp() upper bound (.9rem, not 1vw's own .95rem ceiling) matters
   past ~1300px: nav-wrap's own width caps at 1160px there (see
   style-original.css), but .main-nav's rendered width keeps creeping up
   a bit further as the viewport keeps growing (more breathing room
   around the nav links/donate button), which keeps eating into .brand's
   leftover space even though the *available* width is no longer growing.
   1vw uncapped at .95rem would ask for a few px more than that leftover
   ever has room for on any real large monitor (1920px, 2560px, tested
   up to 3840px — the leftover plateaus, it never catches back up), so
   the tagline would sit permanently hidden on ordinary widescreen
   laptops. .9rem's required width clears the plateaued leftover with
   margin to spare at every width tested. */
.site-header .brand{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;min-width:0!important}
.site-header .brand>span{position:static!important;margin:0!important;min-width:0!important;max-width:100%!important;flex:0 0 auto!important;overflow:visible!important}
.site-header .brand>span small{display:block!important;text-align:center!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;overflow-wrap:normal!important;opacity:1!important;font-size:clamp(.8rem,1vw,.9rem)!important;font-weight:700!important}

.site-header .brand-logo{flex:0 0 auto!important;width:clamp(220px,20vw,320px)!important;max-width:100%!important;height:auto!important;max-height:88px!important}
@media(max-width:1050px){
  .site-header .brand-logo{width:clamp(190px,34vw,260px)!important;max-height:76px!important}
  .site-header .brand>span small{font-size:.78rem!important}
}
@media(max-width:768px){
  .site-header .brand-logo{width:clamp(170px,40vw,220px)!important;max-height:66px!important}
}
@media(max-width:600px){
  .site-header .brand-logo{width:clamp(160px,48vw,200px)!important;max-height:60px!important}
  .site-header .brand>span small{font-size:.64rem!important}
}
@media(max-width:480px){
  .site-header .brand-logo{width:clamp(150px,52vw,185px)!important;max-height:56px!important}
  .site-header .brand>span small{font-size:.58rem!important}
}
@media(max-width:390px){
  .site-header .brand-logo{width:clamp(140px,56vw,170px)!important;max-height:52px!important}
  .site-header .brand>span small{font-size:.54rem!important}
}
@media(max-width:340px){
  .site-header .brand-logo{width:132px!important;max-height:48px!important}
  .site-header .brand>span small{font-size:.5rem!important}
}

/* Bilingual language control. On desktop (>=1051px) the switcher lives
   inside #main-nav (see js/i18n.js placeSwitcher) so it shares the nav's
   own tight, right-aligned flex layout rather than competing with
   nav-wrap's separate brand/nav space-between — that competition is what
   produced inconsistent, oversized gaps depending on viewport width and
   how much room the current language's nav labels leave free. Below
   1051px it leaves the header entirely and floats beside the
   back-to-top button — see .language-switcher--floating below. */
.language-switcher{display:inline-flex;align-items:stretch;justify-content:center;gap:2px;flex:0 0 auto;margin-left:10px;padding:2px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.12);z-index:9999}
.language-switcher button{appearance:none;border:0;border-radius:999px;background:transparent;color:#fff;flex:1 1 0;min-width:36px;min-height:30px;padding:3px 8px;font-size:.72rem;font-weight:800;line-height:1;cursor:pointer;opacity:.78;transition:background .18s ease,color .18s ease,opacity .18s ease,transform .18s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.language-switcher button:hover{opacity:1}
.language-switcher button.active,.language-switcher button[data-active="true"],.language-switcher[data-current="en"] button[data-lang="en"],.language-switcher[data-current="ta"] button[data-lang="ta"]{background:#e5b45c!important;color:#35120c!important;opacity:1!important;box-shadow:0 2px 8px rgba(0,0,0,.18)!important}
.language-switcher button:not(.active):not([data-active="true"]){background:transparent!important;color:#fff!important;opacity:.78!important;box-shadow:none!important}
.language-switcher button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Floating variant (mobile / tablet, applied by js/i18n.js placeSwitcher,
   which moves the switcher out of the header and onto <body> below
   1051px). Sitting in the header row, the switcher and the hamburger
   were the two flex:0 0 auto siblings the brand had to shrink around,
   so the brand-logo could never render at more than "whatever is left"
   — the mobile widths at the end of this file (280/250/225/205/190px)
   were already sized to fill the header, but max-width:100% of a brand
   box the switcher had shrunk clipped them to well under half that.
   Floated out, the header row is the brand's alone and those widths
   finally render at their intended size.

   It sits in the bottom-left corner, on the same 22px inset and at the
   same 44px height as #back-top in the opposite corner, so the two
   balance across the bottom of the screen without ever competing for
   the same space — which also means it needs no special case on
   gallery.html, where there is no #back-top at all. Unlike #back-top
   it is never hidden: the back-to-top button only appears past 600px
   of scroll, but the language control has to be reachable at the top
   of the page too. Solid green rather than the header's translucent
   white, which would be invisible over the page's cream background. */
.language-switcher--floating{position:fixed!important;left:22px;right:auto;bottom:22px;top:auto;margin:0!important;padding:3px!important;gap:2px!important;width:auto!important;border:1px solid rgba(255,255,255,.30)!important;background:var(--green-dark,#3F5426)!important;box-shadow:0 10px 24px rgba(55,24,12,.28)!important;z-index:901}
.language-switcher--floating button{min-height:36px!important;min-width:40px!important;padding:4px 10px!important;font-size:.7rem!important;flex:0 0 auto!important}
/* Narrow phones: only the horizontal padding shrinks. The button's
   36px min-height is what makes the pill exactly as tall as the 44px
   #back-top circle across the bottom from it (3+3 padding + 2 border
   + 36), so holding it constant keeps the two level at every width. */
@media(max-width:480px){
  .language-switcher--floating button{min-width:36px!important;padding:4px 8px!important;font-size:.65rem!important}
}

/* With the brand stacked (logo above tagline), the tagline sits on its
   own row and no longer competes with the logo for width, so it keeps
   fitting on one line down to a much narrower viewport than the old
   side-by-side layout — measured against the actual (flex-shrunk) box,
   in both languages, with a margin built in below since js/i18n.js
   (fitBrandTagline, see the block above) is the real authority and
   corrects any width this guess gets wrong. Below ~460px there isn't
   room left for a full single-line tagline next to the hamburger, so
   it is hidden outright rather than clipping
   mid-word; it comes back once the box is wide enough to hold the whole
   line again. */
@media(max-width:460px){
  .site-header .brand>span{display:none!important}
}

/* Separate narrow band on the desktop nav (1051-1260px): here .brand
   shares its row with the full link list instead of the switcher/
   hamburger, and the nav-wrap width formula (see the corner-logo
   clearance comment further down) leaves it squeezed below what the
   default tagline size needs — measured to clip the last word instead
   of showing the full line. Rather than hiding the tagline outright in
   this band (it's a real laptop window width, not just a transient
   in-between size), step its font-size down enough to fit the squeezed
   box in both languages — verified against the actual rendered
   scrollWidth across 1051-1260px. js/i18n.js (fitBrandTagline) still
   has the final say and will hide it if some font/OS combination makes
   even this too wide. */
@media(min-width:1051px) and (max-width:1260px){
  .site-header .brand>span small{font-size:.6rem!important}
}

@media(max-width:1050px){
  .site-header .nav-wrap{position:relative}

  /* Mobile header: the switcher is no longer part of it — js/i18n.js
     (placeSwitcher) floats it in the bottom-left corner instead
     (see .language-switcher--floating above). Should it ever still be
     in the header (e.g. a stale cached script), keep it visible and
     compact rather than letting it render as a broken nav child. */
  .site-header .nav-wrap>.language-switcher{display:flex!important;flex:0 0 auto!important;width:auto!important;margin:0!important;padding:2px!important;gap:1px!important;order:0!important}
  .site-header .nav-wrap>.language-switcher button{min-height:36px!important;min-width:36px!important;padding:4px 8px!important;font-size:.65rem!important}
}

/* Centre the brand in the mobile header row.

   .nav-wrap is a two-item space-between flex row below 1051px (.brand
   and #menu-toggle; #main-nav is position:absolute there and out of
   flow), which pins the brand to the left edge. On a phone that is
   invisible — the brand very nearly fills the row — but "Desktop site"
   in a mobile browser reports a ~980px viewport while still matching
   the hamburger breakpoint, and at that width the 280px brand sat 282px
   left of centre with the rest of the row empty.

   An empty leading spacer exactly as wide as the hamburger restores the
   symmetry: with two equal-width items at the ends, space-between
   splits the remaining space into two equal gaps, so the brand lands
   dead centre of the content box — and padding-left equals
   padding-right, so that is the centre of the viewport too. Being a
   real flex item (rather than absolutely positioning the hamburger) it
   cannot overlap anything at any width.

   Only from 501px up: the spacer costs the brand a hamburger's width of
   room, and below ~481px the row has less slack than that, so applying
   it there would shrink the very brand-logo the mobile widths at the
   end of this file exist to keep large. #menu-toggle is flex:0 0 42px
   throughout this band (style-base.css drops it to 40px only at
   <=500px), so 42px matches it exactly. */
@media(min-width:501px) and (max-width:1050px){
  .site-header .nav-wrap::before{content:"";flex:0 0 42px;min-width:0;align-self:stretch;pointer-events:none}
}
/* Desktop: let the switcher (last child of #main-nav) drop to its own
   line inside the nav only if it doesn't fit next to the links — the
   per-link white-space:nowrap keeps link text itself from wrapping, and
   justify-content:flex-end applies per line, so a wrapped switcher is
   still right-aligned automatically without extra margin tricks. */
@media(min-width:1051px){
  .site-header .main-nav{flex-wrap:wrap;row-gap:6px}
  .site-header .main-nav .language-switcher{display:flex!important;visibility:visible!important;opacity:1!important}
}

/* Pre-existing (not switcher-related): nav-wrap's width formula
   (min(1160px, calc(100% - 150px))) leaves the corner-logo circle only
   ~55px of clearance from ~1051-1300px wide, about 20px short, so the
   last nav link/button's box runs slightly under the logo at every
   width in that band. nav-wrap is centered (margin-inline:auto), so
   shrinking its width only moves each edge in by half of that — need
   ~56px off the width to gain ~28px of clearance on the right edge. */
@media(min-width:1051px) and (max-width:1300px){
  .site-header .nav-wrap{width:calc(100% - 206px)}
}

/* Existing donation refinement and responsive overrides remain unchanged. */

/* gallery.html's own top clearance (style-original.css) is a single flat
   105px, sized for the old single-row header brand. The stacked brand
   lockup above is taller, so give the gallery heading the same tiered
   clearance as the home page's hero. */
.gallery-page-section{padding-top:125px!important}
@media(max-width:1050px){.gallery-page-section{padding-top:105px!important}}
@media(max-width:600px){.gallery-page-section{padding-top:90px!important}}

/* FINAL LOGO CROP FIX */
.site-header .brand-logo {
  width: auto !important;
  height: 58px !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  display: block !important;
}
.site-header .brand {
  gap: 0 !important;
  row-gap: 0 !important;
  align-items: center !important;
}
.site-header .brand > span {
  margin: -3px 0 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.site-header .brand > span small {
  line-height: 1.05 !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 1050px) {
  .site-header .brand-logo {
    height: 54px !important;
    width: auto !important;
    max-width: 100% !important;
  }
}
@media (max-width: 600px) {
  .site-header .brand-logo {
    height: 48px !important;
  }
  .site-header .brand > span {
    margin-top: -4px !important;
  }
}


/* =========================================================
   LAPTOP HEADER BRAND VISIBILITY FIX — 2026-09-10
   Keep the padai_logo visible and always show the exact trust tagline
   underneath it. The old fit logic could hide the tagline when the
   desktop nav squeezed the brand's flex item.
   ========================================================= */
.site-header .brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:visible !important;
}
.site-header .brand-logo{
  display:block !important;
  flex:0 0 auto !important;
  width:auto !important;
  height:58px !important;
  max-width:100% !important;
  max-height:58px !important;
  object-fit:contain !important;
  object-position:center !important;
  margin:0 !important;
}
.site-header .brand > span{
  display:block !important;
  flex:0 0 auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  text-align:center !important;
  overflow:visible !important;
}
.site-header .brand > span small{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  line-height:1.1 !important;
  font-size:clamp(.55rem,.78vw,.78rem) !important;
  font-weight:700 !important;
  word-break:keep-all !important;
}
@media (min-width:1051px) and (max-width:1260px){
  .site-header .brand > span small{font-size:.58rem !important;}
}
@media (max-width:1050px){
  .site-header .brand-logo{height:54px !important;max-height:54px !important;}
  .site-header .brand > span small{font-size:.62rem !important;}
}
@media (max-width:600px){
  .site-header .brand-logo{height:48px !important;max-height:48px !important;}
  .site-header .brand > span{margin-top:2px !important;}
  .site-header .brand > span small{font-size:.56rem !important;}
}
@media (max-width:460px){
  .site-header .brand > span{display:block !important;}
  .site-header .brand > span small{font-size:.5rem !important;}
}


/* =========================================================
   HEADER BRAND SCALE BALANCE — 2026-09-10
   Laptop: make the trust tagline visually proportional to padai_logo.
   Mobile: make padai_logo visually proportional to the tagline.
   ========================================================= */

/* Laptop / desktop */
@media (min-width: 1051px) {
  .site-header .brand-logo {
    height: 60px !important;
    max-height: 60px !important;
  }
  .site-header .brand > span small {
    font-size: clamp(.78rem, .86vw, .9rem) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
  }
}

/* Tablet / mobile header */
@media (max-width: 1050px) {
  .site-header .brand-logo {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
  }
  .site-header .brand > span {
    display: block !important;
    width: 100% !important;
    margin-top: 1px !important;
  }
  .site-header .brand > span small {
    display: block !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
  }
}

/* Small phones: preserve the larger logo, while keeping the full tagline
   visible rather than using the old display:none rule. */
@media (max-width: 600px) {
  .site-header .brand-logo {
    height: 58px !important;
    max-height: 58px !important;
  }
  .site-header .brand > span small {
    font-size: .58rem !important;
  }
}

@media (max-width: 460px) {
  .site-header .brand > span {
    display: block !important;
  }
  .site-header .brand > span small {
    font-size: .56rem !important;
  }
}


/* =========================================================
   FINAL HEADER PROPORTION TUNING — 2026-09-10
   Based on laptop + mobile screenshots:
   - laptop: give the trust tagline more visual presence
   - mobile: enlarge the padai_logo to use the available vertical space
   ========================================================= */

/* Laptop / desktop */
@media (min-width: 1051px) {
  .site-header .brand-logo {
    height: 72px !important;
    max-height: 72px !important;
  }

  .site-header .brand > span small {
    font-size: clamp(.9rem, .95vw, 1rem) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  .site-header .brand > span {
    margin-top: 2px !important;
  }
}

/* Mobile / tablet: the screenshot shows clear unused space between the
   brand artwork and the tagline, so let the artwork occupy more of it. */
@media (max-width: 1050px) {
  .site-header .brand-logo {
    height: 72px !important;
    max-height: 72px !important;
  }

  .site-header .brand > span small {
    font-size: .62rem !important;
    line-height: 1.1 !important;
  }

  .site-header .brand > span {
    margin-top: 1px !important;
  }
}

@media (max-width: 600px) {
  .site-header .brand-logo {
    height: 70px !important;
    max-height: 70px !important;
  }

  .site-header .brand > span small {
    font-size: .58rem !important;
  }
}

@media (max-width: 460px) {
  .site-header .brand-logo {
    height: 68px !important;
    max-height: 68px !important;
  }

  .site-header .brand > span small {
    font-size: .56rem !important;
  }
}


/* =========================================================
   MOBILE PADAi LOGO — FINAL SIZE INCREASE — 2026-09-10
   The mobile screenshot still showed excess vertical space in the
   brand lockup. Increase the actual image width as well as height;
   changing height alone was being capped by the earlier width rule.
   ========================================================= */
@media (max-width: 1050px) {
  .site-header .brand-logo {
    width: 280px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 90px !important;
  }
}

@media (max-width: 600px) {
  .site-header .brand-logo {
    width: 250px !important;
    max-width: 100% !important;
    max-height: 86px !important;
  }
}

@media (max-width: 480px) {
  .site-header .brand-logo {
    width: 225px !important;
    max-width: 100% !important;
    max-height: 80px !important;
  }
}

@media (max-width: 390px) {
  .site-header .brand-logo {
    width: 205px !important;
    max-width: 100% !important;
    max-height: 74px !important;
  }
}

@media (max-width: 340px) {
  .site-header .brand-logo {
    width: 190px !important;
    max-width: 100% !important;
    max-height: 70px !important;
  }
}


/* =========================================================
   BRAND TAGLINE SIZE — MOBILE-NAV BAND, 501-1050px
   In this band the brand-logo is 250-280px wide and 73-82px tall, but
   three earlier max-width:1050px blocks in this file pin the tagline at
   .62rem — 9.92px under an 82px logo. That was sized when the brand
   shared the header row with the language switcher and had far less
   room; now that the switcher floats and the brand is centred, the line
   just reads as too small, which is exactly how it looks in a phone
   browser's "Desktop site" mode (a ~980-1024px viewport that still gets
   this hamburger header).

   Sized against the actual rendered text rather than guessed: measured
   in Chromium, the tagline exactly fills the logo's width at 15.79px
   (Tamil) / 14.05px (English) over a 280px logo, and 14.10 / 12.54px
   over a 250px one. English is the binding one at both sizes, so these
   take ~92% of the English limit — big enough to look proportionate
   (font-size / logo-height lands at .156, matching the .149 a real
   phone header already shows), with margin left over so a different
   platform's font metrics can render a little wider without the line
   reaching the logo's edge. js/i18n.js (fitBrandTagline) still has the
   final say and shrinks it if any of that is ever wrong.

   Phones (<=500px) keep their existing sizes: the tagline is already
   proportionate to the smaller logo there, and that end of the header
   is tight enough that growing the text risks the wrapping and
   clipping the blocks above exist to prevent. */
@media(min-width:601px) and (max-width:1050px){
  .site-header .brand>span small{font-size:.8rem!important}
}
@media(min-width:501px) and (max-width:600px){
  .site-header .brand>span small{font-size:.72rem!important}
}


/* =========================================================
   BRAND LOCKUP — LOGO-TO-TAGLINE GAP
   The visible gap was 22.5px at a ~980px viewport, and only ~2.5px of
   that was CSS: 152 of padai_logo3_tight.png's 637 rows (23.9%) were
   fully transparent, so the image's layout box extended ~20px below the
   artwork and pushed the tagline down. Every row outside 77..484 had a
   maximum alpha of 2/255, i.e. nothing visible, so both brand assets
   have now been cropped to their real ink bounds (Tamil 2172x637 ->
   2172x408, English 1471x374 -> 1471x358). The artwork renders at
   exactly the size it did before — only the empty box around it is
   gone. Cropping the asset rather than offsetting in CSS matters here
   because the two logos carry different padding (23.9% vs 2.1% at the
   bottom) and swap with the language, so any single CSS offset would be
   wrong in one of them.

   With the box tight, the last contributor is this margin plus the
   line-box half-leading above the glyphs. Zeroing it leaves the
   half-leading alone as the gap, which measures 1-2px. Header only:
   the footer lockup sets its own box via site-fixes.css. */
.site-header .brand>span{margin-top:0!important}

/* Desktop (>=1051px) after the asset crop. The rules above force
   height:72px with object-fit:contain and leave width to follow the
   image's proportions, so cropping the logo (aspect 3.41 -> 5.32) blew
   its width up from 246px to 345px and pushed the language switcher
   onto a second row. Drive the box from the width instead. The old
   box asked for a constant 72px x 3.41 = 246px at every desktop width
   and let max-width:100% shrink it against the nav below ~1230px, so
   requesting that same 246px with height:auto reproduces the old
   widths exactly, shrinking included.

   Because the old box was width-constrained under object-fit:contain,
   the same width reproduces the previous artwork size exactly while
   dropping the dead space, so the desktop lockup is unchanged apart
   from the tagline moving up under it. The header keeps its 96px
   min-height, so its overall size does not change either. */
@media(min-width:1051px){
  .site-header .brand-logo{width:246px!important;height:auto!important;max-height:none!important}
}