/* Small, isolated fixes applied after the known-good 22de419c baseline. */

/* Visually join the trust name to the logo. The logo asset has transparent
   space on its right edge, so pull the text back over that empty area. */
.site-header .brand {
  gap: 0 !important;
}

.site-header .brand > span {
  margin-left: -40px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Keep the two contact numbers on separate lines instead of comma-separated text. */
#contact-container .contact-phone-list { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
#contact-container .contact-phone-list a { display: block; }

/* Trustee pagination */
#trustee-container .person-card:not(.trustee-leader) { width: min(180px, 100%) !important; max-width: 180px !important; justify-self: center !important; transform: none !important; transform-origin: center top !important; margin-bottom: 0 !important; }
#trustee-container .person-card:not(.trustee-leader) .person-photo-wrap { width: calc(100% + 16px) !important; height: 175px !important; aspect-ratio: auto !important; margin: -8px -8px 0 !important; }
#trustee-container .person-card:not(.trustee-leader) .person-photo { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
#trustee-container .person-card:not(.trustee-leader) .person-phone,
#trustee-container .person-card:not(.trustee-leader) .trustee-phone,
#trustee-container .person-card:not(.trustee-leader) a[href^="tel:"] { font-size: 1rem !important; line-height: 1.4 !important; font-weight: 600 !important; min-height: 2.25rem !important; padding: 0.35rem 0.65rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; }
#trustee-container .person-card.trustee-leader .person-phone,
#trustee-container .person-card.trustee-leader .trustee-phone,
#trustee-container .person-card.trustee-leader a[href^="tel:"] { font-size: 1rem !important; line-height: 1.4 !important; font-weight: 600 !important; min-height: 2.25rem !important; padding: 0.35rem 0.65rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; }
@media (max-width: 600px) { #trustee-container .person-card:not(.trustee-leader) { width: min(180px, 100%) !important; max-width: 180px !important; } }
@media (max-width: 380px) { #trustee-container .person-card:not(.trustee-leader) { width: min(165px, 100%) !important; max-width: 165px !important; } }

/* Mobile header */
@media (max-width: 600px) {
  .site-header .brand { gap: 6px !important; max-width: calc(100% - 48px) !important; overflow: visible !important; }
  .site-header .brand-logo { width: 122px !important; max-width: 122px !important; height: 48px !important; max-height: 48px !important; flex: 0 0 122px !important; object-fit: contain !important; }
  .site-header .brand > span { margin-left: 0 !important; min-width: 0 !important; max-width: 92px !important; flex: 1 1 auto !important; overflow: visible !important; }
  .site-header .brand > span small { display: block !important; font-size: .53rem !important; line-height: 1.35 !important; white-space: normal !important; overflow-wrap: anywhere !important; opacity: 1 !important; }
}
@media (max-width: 380px) {
  .site-header .brand-logo { width: 110px !important; max-width: 110px !important; flex-basis: 110px !important; height: 46px !important; max-height: 46px !important; }
  .site-header .brand > span { max-width: 86px !important; }
  .site-header .brand > span small { font-size: .49rem !important; line-height: 1.3 !important; }
}

/* Mobile footer */
@media (max-width: 600px) {
  .site-footer .footer-brand .brand { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; }
  .site-footer .footer-brand .brand-logo { width: 122px !important; max-width: 122px !important; height: 48px !important; max-height: 48px !important; flex: 0 0 122px !important; object-fit: contain !important; }
  .site-footer .footer-brand .brand > span { min-width: 0 !important; max-width: 150px !important; flex: 1 1 auto !important; margin-left: 0 !important; overflow: visible !important; position: relative !important; z-index: 1 !important; }
  .site-footer .footer-brand .brand > span small { display: block !important; font-size: .53rem !important; line-height: 1.35 !important; white-space: normal !important; overflow-wrap: anywhere !important; opacity: 1 !important; }
}
@media (max-width: 380px) {
  .site-footer .footer-brand .brand-logo { width: 110px !important; max-width: 110px !important; flex-basis: 110px !important; height: 46px !important; max-height: 46px !important; }
  .site-footer .footer-brand .brand > span { max-width: 125px !important; }
  .site-footer .footer-brand .brand > span small { font-size: .49rem !important; line-height: 1.3 !important; }
}

/* Video popup */
.video-viewer{position:fixed;inset:0;z-index:6500;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.video-viewer.open{opacity:1;visibility:visible;pointer-events:auto}
.video-backdrop{position:absolute;inset:0;background:rgba(10,4,4,.88);backdrop-filter:blur(8px)}
.video-dialog{position:relative;z-index:1;width:min(1080px,96vw);max-height:94vh;overflow:auto;border:1px solid rgba(255,255,255,.13);border-radius:24px;background:#180b0a;color:#fff;box-shadow:0 35px 100px rgba(0,0,0,.55);padding:28px;transform:translateY(20px) scale(.98);transition:transform .3s ease}
.video-viewer.open .video-dialog{transform:none}
.video-close{position:absolute;right:17px;top:15px;z-index:20;width:42px;height:42px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:27px;line-height:1;cursor:pointer;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .25s ease,color .25s ease}
.video-close:hover,.video-close:focus-visible{background:var(--gold);color:#35120c;transform:rotate(90deg)}
.video-close:active{transform:rotate(90deg) scale(.88)}
.video-dialog-head{display:flex;justify-content:space-between;gap:24px;padding:4px 62px 22px 4px;min-width:0}
.video-dialog-head h2{margin:7px 0 5px;font-size:clamp(1.35rem,3vw,2.1rem)}
.video-dialog-head p{margin:0;max-width:720px;color:rgba(255,255,255,.62);font-size:.8rem;line-height:1.7}
.video-modal-date{align-self:flex-end;flex:0 0 auto;color:rgba(255,255,255,.5);font-size:.72rem}
.video-frame-wrap{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:17px;background:#080404;box-shadow:0 15px 50px rgba(0,0,0,.35)}
.video-frame-wrap iframe{width:100%;height:100%;display:block;border:0}
@media (max-width:700px){.video-viewer{padding:12px}.video-dialog{width:100%;max-height:96vh;padding:18px;border-radius:18px}.video-dialog-head{padding:4px 62px 16px 2px;display:block}.video-modal-date{display:block;margin-top:8px}}

/* Keep the replacement left corner logo circular without trimming the artwork. */
.corner-logo-left {
  border-radius: 50% !important;
  overflow: hidden !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 5px !important;
  box-sizing: border-box !important;
}

/* The QR itself is the form link. No separate button is shown underneath. */
.forms-grid .form-action {
  position: relative !important;
  display: block !important;
  width: min(100%, 250px) !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background-color: #fff !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: 0 8px 24px rgba(55,24,12,.12) !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.forms-grid .member-form-card .form-action {
  background-image: url("../assets/images/forms/member-form-qr.svg") !important;
}

.forms-grid .annadhanam-form-card .form-action {
  background-image: url("../assets/images/forms/annadhanam-form-qr.svg") !important;
}

.forms-grid .form-action:hover,
.forms-grid .form-action:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(55,24,12,.18) !important;
}

@media (max-width: 600px) {
  .forms-grid .form-action {
    width: min(100%, 220px) !important;
    margin-top: 18px !important;
  }
}

/* =========================================================
   WHOLE-WORD TEXT WRAPPING FIX
   Never split a Tamil/English word at an arbitrary character when the
   viewport becomes narrow. Normal wrapping is still allowed BETWEEN
   words, so responsive layouts can grow vertically instead of producing
   broken text such as "ஆன்-மீக" or "சே-வை". This intentionally overrides
   older mobile rules that used overflow-wrap:anywhere.
   ========================================================= */
body :where(h1,h2,h3,h4,h5,h6,p,a,button,span,strong,em,small,li,label,figcaption) {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Text containers may wrap to additional lines, but each individual word
   remains intact at every viewport width. */
body :where(.hero-copy,.section-heading,.section-title-row,.event-card,
  .event-title,.event-description,.gallery-intro-note,.gallery-page-heading,
  .person-card,.person-name,.person-role,.person-bio,.contact-item,
  .form-card,.form-content,.footer-brand,.site-footer,
  .devotional-marquee,.devotional-set,.devotional-verse,
  .devotional-meaning,.devotional-meaning-text,.devotional-mantra) {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  hyphens: none !important;
}

/* The devotional marquee is intentionally a single scrolling line; keep
   spaces as the only legal wrapping opportunities even on very small
   screens. */
.devotional-marquee .devotional-set,
.devotional-marquee .devotional-verse,
.devotional-marquee .devotional-meaning,
.devotional-marquee .devotional-meaning-text,
.devotional-marquee .devotional-mantra {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Exception to the whole-word rule above, for every h1/h2 site-wide:
   style-original.css's base .hero h1 and h2 rules both already carried
   overflow-wrap:anywhere (not !important) for exactly this reason —
   every section heading here is a titleLine1/titleLine2 pair rendered
   at a large clamp() font-size, and several of those lines are a single
   Tamil compound word with no spaces at all ("இணைந்திடுங்கள்." on both
   the forms and contact headings, "அன்னதானமும்" on the hero, etc.), so
   "keep whole words intact" has no wrap point to fall back on for them.
   Without this, the word doesn't fit at some width/font combination and,
   with nowhere else to break, either overflows its box or gets visually
   clipped by a container that shrank correctly (the bare-1fr grid fixes
   elsewhere in this codebase) but has nothing left to give the word —
   both are worse than the rare character-level break this restores.
   Higher specificity than "body :where(...)" (0 from :where) so this
   wins regardless of source order. Kept only as the last-resort fallback
   below the floor js/i18n.js's fitLongestWordElement() shrinks a
   data-fit-longest-word heading's font-size to before giving up — on
   headings carrying that attribute this essentially never triggers in
   practice; it exists for the rest and for anything even that can't
   rescue. */
h1, h2,
h1 span, h1 em,
h2 span, h2 em {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* MOBILE LANGUAGE SWITCHER POSITION — 2026-09-10
   The bottom-left placement this block used to set lives in css/style.css
   now, next to the rest of .language-switcher--floating. Same 22px
   left/bottom inset, but applied across the whole range the switcher
   floats in (<=1050px) rather than only <=600px, so tablets don't get a
   different corner from phones. Nothing to override here. */