/* ============================================================================
   PREMIUM CHROME — Frontend Phase 8 (full rebuild, v2.3).
   ----------------------------------------------------------------------------
   Bespoke, custom-designed public chrome shared by both rendering engines:
   the navy top-bar + white sticky header (centred nav, dropdowns, gradient
   Donate), the navy floating action rail, the mobile donate bar, and shared
   button/shell primitives. Custom `.ssrf-*` classes — NOT layered Bootstrap.
   100% data-driven (CMS/config); no backend changes.
   ============================================================================ */

/* ============================================================================
   CORE BRAND PALETTE — Premium Light (single source of truth).
   Primary #F05A28 (Donate/CTA) · Secondary #C61F26 (links/urgent) ·
   Accent #D89B2D (gold, DECORATIVE only — never white text) ·
   #1E1E1E headings + dark chrome · #555 body · #FAF8F3 bg · #FFF4E6 sections.
   Token NAMES are kept (navy/blue/teal) so every existing rule recolours; the
   VALUES are now warm. Change a colour here and the whole site follows.
   ============================================================================ */
:root {
  /* raw brand ramp */
  --brand-orange: #F05A28;  --brand-orange-600: #D94A1E;
  --brand-crimson: #C61F26; --brand-crimson-700: #A81920; --brand-crimson-900: #7E1418;
  --brand-gold: #D89B2D;    --brand-amber-800: #B45309;
  --brand-charcoal: #1E1E1E; --brand-charcoal-2: #333333;
  --brand-cream: #FFF4E6;   --brand-offwhite: #FAF8F3;

  /* legacy token names → remapped to the warm palette */
  --ssrf-navy: #1E1E1E;        /* dark chrome + headings */
  --ssrf-navy-2: #333333;
  --ssrf-blue: #C61F26;        /* links / secondary accent (text-safe) */
  --ssrf-blue-600: #A81920;
  --ssrf-teal: #D89B2D;        /* decorative gold fills */
  --ssrf-teal-700: #B45309;    /* text-safe amber (eyebrows) */
  --ssrf-gold: #D89B2D;
  --ssrf-orange: #F05A28;      /* primary / Donate */
  --ssrf-amber: #E86E22;
  --ssrf-green: #16A34A;       /* success semantic only */
  --ssrf-bg: #FAF8F3;
  --ssrf-ink: #1E1E1E;
  --ssrf-muted: #6E6459;
  --ssrf-line: #ECE3D6;
  --ssrf-radius: 22px;
  --ssrf-ease: cubic-bezier(.22, 1, .36, 1);
  --ssrf-shadow: 0 22px 54px -20px rgba(30, 20, 12, .18);
  --ssrf-shadow-lg: 0 44px 96px -34px rgba(30, 20, 12, .30);
  --ssrf-donate-grad: linear-gradient(135deg, #F5732E 0%, #F05A28 100%);
  --ssrf-navy-grad: linear-gradient(135deg, #1E1E1E 0%, #333333 100%);
  --ssrf-hero-grad: linear-gradient(125deg, #1E1E1E 0%, #7E2417 52%, #C1381C 115%);
}

.ssrf-shell { width: min(1240px, 92vw); margin-inline: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------------------------------------------------------- BUTTON PRIMITIVE */
.ssrf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: .85rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; border: 0; cursor: pointer; transition: transform .25s var(--ssrf-ease), box-shadow .25s var(--ssrf-ease), background .25s; }
.ssrf-btn--lg { padding: 1.05rem 2rem; font-size: 1.06rem; }
.ssrf-btn--block { width: 100%; }
.ssrf-btn--donate { background: var(--ssrf-donate-grad); color: #fff; box-shadow: 0 14px 30px -10px rgba(245, 130, 11, .55); }
.ssrf-btn--donate:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -12px rgba(245, 130, 11, .7); color: #fff; }
.ssrf-btn--glass { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ssrf-btn--glass:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); color: #fff; }
.ssrf-btn--outline { background: #fff; color: var(--ssrf-blue); border: 1.5px solid var(--ssrf-line); }
.ssrf-btn--outline:hover { border-color: var(--ssrf-blue); transform: translateY(-2px); box-shadow: var(--ssrf-shadow); }

/* ================================================================= TOP BAR */
.ssrf-topbar { background: var(--ssrf-navy-grad); color: rgba(255, 255, 255, .82); font-size: .82rem; }
.ssrf-topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; flex-wrap: wrap; }
.ssrf-topbar a { color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .2s; }
.ssrf-topbar a:hover { color: #fff; }
.ssrf-topbar__slogan { display: inline-flex; align-items: center; gap: 8px; }
.ssrf-topbar__slogan i { color: var(--ssrf-gold); }
.ssrf-topbar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ssrf-topbar__follow { opacity: .7; }
.ssrf-topbar__social { display: inline-flex; gap: 8px; }
.ssrf-soc { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: .8rem; transition: transform .2s var(--ssrf-ease), background .2s; }
.ssrf-soc:hover { transform: translateY(-2px); color: #fff; }
.ssrf-soc--facebook:hover { background: #1877F2; } .ssrf-soc--instagram:hover { background: #E4405F; }
.ssrf-soc--youtube:hover { background: #FF0000; } .ssrf-soc--linkedin:hover { background: #0A66C2; }
.ssrf-soc--twitter:hover, .ssrf-soc--twitter-x:hover { background: #111; }
@media (max-width: 767px) { .ssrf-topbar__slogan { display: none; } .ssrf-topbar__row { justify-content: center; } }

/* ================================================================== HEADER */
.ssrf-lang { display: inline-flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 2px; margin-right: 6px; }
.ssrf-lang__opt { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, .78); text-decoration: none; transition: background .2s, color .2s; white-space: nowrap; }
.ssrf-lang__opt:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.ssrf-lang__opt.is-active { background: #fff; color: var(--ssrf-navy); }
@media (max-width: 767px) { .ssrf-lang { margin-right: 0; } }

/* Floating language switcher (bottom-left) — replaces the old top-bar toggle. */
.ssrf-langfloat { position: fixed; left: 16px; bottom: 16px; z-index: 1039; background: var(--ssrf-navy); border-radius: 999px; padding: 4px; box-shadow: var(--ssrf-shadow); }
.ssrf-langfloat .ssrf-lang { background: transparent; border: 0; margin: 0; }
@media (max-width: 991.98px) { .ssrf-langfloat { bottom: 86px; } }

/* ----------------------------------------------- MODERN MOTION / MICRO-FX */
.ssrf-scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1050; transform: scaleX(0); transform-origin: left center; background: var(--ssrf-donate-grad); pointer-events: none; will-change: transform; }

/* Toasts */
.ssrf-toasts { position: fixed; top: 16px; right: 16px; z-index: 1080; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ssrf-toast { pointer-events: auto; background: var(--ssrf-navy); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--ssrf-shadow); font-size: .9rem; line-height: 1.4; max-width: 340px; cursor: pointer; opacity: 0; transform: translateY(-8px); transition: opacity .35s var(--ssrf-ease), transform .35s var(--ssrf-ease); }
.ssrf-toast.is-in { opacity: 1; transform: none; }
.ssrf-toast--success { background: var(--ssrf-green); }
.ssrf-toast--error { background: var(--ssrf-blue); }
.ssrf-toast i { margin-right: 6px; }

/* Live donation ticker (bottom-right, desktop) */
.ssrf-liveticker { position: fixed; right: 16px; bottom: 16px; z-index: 1038; width: 320px; max-width: calc(100vw - 32px); opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ssrf-ease), transform .45s var(--ssrf-ease); pointer-events: none; }
.ssrf-liveticker.is-in { opacity: 1; transform: none; pointer-events: auto; }
.ssrf-liveticker__card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ssrf-line); border-radius: 14px; padding: 12px 40px 12px 12px; box-shadow: var(--ssrf-shadow); text-decoration: none; }
.ssrf-liveticker__icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ssrf-donate-grad); font-size: 1rem; }
.ssrf-liveticker__body { display: flex; flex-direction: column; min-width: 0; }
.ssrf-liveticker__t { font-size: .86rem; color: var(--ssrf-ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssrf-liveticker__t b { color: var(--ssrf-navy); font-weight: 800; }
.ssrf-liveticker__body > span:last-child { color: var(--ssrf-muted); font-size: .77rem; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssrf-liveticker__x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; background: transparent; color: var(--ssrf-muted); font-size: 1.05rem; line-height: 1; cursor: pointer; border-radius: 6px; }
.ssrf-liveticker__x:hover { background: var(--ssrf-bg); color: var(--ssrf-navy); }
@media (max-width: 991.98px) { .ssrf-liveticker { display: none; } }
/* Tilt/magnetic: near-instant follow while active, smooth ease-back on leave. */
.ssrf-fcard.is-tilt, .camp-card.is-tilt, .cert-action.is-tilt { transition: transform .12s ease-out, box-shadow .4s var(--ssrf-ease), border-color .4s; will-change: transform; }
.ssrf-donate.is-mag, .ssrf-btn--donate.is-mag { transition: transform .12s ease-out, box-shadow .25s var(--ssrf-ease); }
/* Card media zoom on hover (images inside cards). */
.camp-card__media, .cert-view__media, .site-activity-cover, .site-news-cover, .site-project-cover { overflow: hidden; }
.camp-card__media img, .site-activity-cover img, .site-news-cover img, .site-project-cover img { transition: transform .6s var(--ssrf-ease); }
.camp-card:hover .camp-card__media img, .site-activity-cover:hover img, .site-news-cover:hover img, .site-project-cover:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .ssrf-scrollbar { display: none; }
  .camp-card__media img, .site-activity-cover img, .site-news-cover img, .site-project-cover img { transition: none; }
}

/* ---------------------------------------------------- INFO OFF-CANVAS PANEL */
.ssrf-infocanvas { width: min(420px, 88vw); --bs-offcanvas-bg: #fff; }
.ssrf-infocanvas__inner { position: relative; height: 100%; overflow-y: auto; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 26px; }
.ssrf-infocanvas__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--ssrf-navy); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.ssrf-infocanvas__close:hover { background: var(--ssrf-bg); color: var(--ssrf-orange); }
.ssrf-infocanvas__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 6px; }
.ssrf-infocanvas__brand img { height: 104px; width: auto; max-width: 100%; object-fit: contain; }
.ssrf-infocanvas__mark { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-size: 1.3rem; background: var(--ssrf-donate-grad); }
.ssrf-infocanvas__name { font-weight: 800; font-size: 1.4rem; color: var(--ssrf-navy); letter-spacing: -.01em; }
.ssrf-infocanvas__block { display: flex; flex-direction: column; gap: 4px; }
.ssrf-infocanvas__block h3 { font-size: 1.05rem; font-weight: 800; color: var(--ssrf-navy); margin: 0 0 4px; }
.ssrf-infocanvas__block p { color: var(--ssrf-ink); font-size: 1rem; line-height: 1.6; margin: 0; }
.ssrf-infocanvas__label { color: var(--ssrf-muted); font-size: .84rem; font-weight: 600; letter-spacing: .04em; margin-bottom: 3px; }
.ssrf-infocanvas__block a { color: var(--ssrf-ink); text-decoration: none; font-size: 1rem; line-height: 1.6; transition: color .2s; width: fit-content; }
.ssrf-infocanvas__block a:hover { color: var(--ssrf-orange); }
.ssrf-infocanvas__block a[href^="mailto"] { text-decoration: underline; text-underline-offset: 3px; }
.ssrf-infocanvas__social { display: flex; gap: 12px; margin-top: 6px; }
.ssrf-infocanvas__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ssrf-bg); border: 1px solid var(--ssrf-line); color: var(--ssrf-navy); font-size: 1rem; transition: transform .25s var(--ssrf-ease), background .25s, color .25s, border-color .25s; }
.ssrf-infocanvas__social a:hover { background: var(--ssrf-donate-grad); border-color: transparent; color: #fff; transform: translateY(-3px); }

.ssrf-header { position: sticky; top: 0; z-index: 1040; background: #fff; box-shadow: 0 1px 0 rgba(30, 20, 12, .08); transition: box-shadow .3s var(--ssrf-ease); }
.ssrf-header.is-scrolled { box-shadow: 0 12px 34px -16px rgba(30, 20, 12, .28); }
.ssrf-header__inner { display: flex; align-items: center; gap: 20px; min-height: 92px; }
.ssrf-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.ssrf-logo__img { height: 68px; width: auto; max-width: 300px; object-fit: contain; }
.ssrf-logo__mark { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.4rem; background: linear-gradient(135deg, var(--ssrf-teal), var(--ssrf-blue)); box-shadow: 0 10px 22px -8px rgba(30, 20, 12, .6); }
.ssrf-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.ssrf-logo__name { font-weight: 800; color: var(--ssrf-navy); font-size: 1.02rem; letter-spacing: -.01em; text-transform: uppercase; }
.ssrf-logo__tag { font-size: .66rem; color: var(--ssrf-teal-700); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-top: 2px; }
.ssrf-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.ssrf-nav__item--drop { position: relative; }
.ssrf-nav__link { display: inline-flex; align-items: center; gap: 5px; padding: .6rem .78rem; border-radius: 10px; color: var(--ssrf-ink); font-weight: 600; font-size: .95rem; text-decoration: none; position: relative; white-space: nowrap; transition: color .2s; }
.ssrf-nav__link:hover, .ssrf-nav__link.is-active { color: var(--ssrf-blue); }
.ssrf-nav__link .bi-chevron-down { font-size: .68rem; transition: transform .25s var(--ssrf-ease); }
.ssrf-nav__item--drop:hover .bi-chevron-down { transform: rotate(180deg); }
/* Active/hover nav = colour change only (underline indicator removed). */
.ssrf-drop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 224px; background: #fff; border-radius: 16px; box-shadow: var(--ssrf-shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s var(--ssrf-ease), transform .25s var(--ssrf-ease), visibility .25s; }
.ssrf-nav__item--drop:hover .ssrf-drop, .ssrf-nav__item--drop:focus-within .ssrf-drop { opacity: 1; visibility: visible; transform: none; }
.ssrf-drop__link { display: block; padding: .55rem .75rem; border-radius: 10px; color: var(--ssrf-ink); text-decoration: none; font-weight: 500; font-size: .9rem; transition: background .2s, color .2s; }
.ssrf-drop__link:hover { background: #EAF3FA; color: var(--ssrf-blue); }
.ssrf-header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ssrf-iconbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ssrf-line); background: #fff; color: var(--ssrf-blue); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ssrf-ease); }
.ssrf-iconbtn i { font-size: 1.2rem; line-height: 1; color: inherit; }
.ssrf-iconbtn:hover { background: var(--ssrf-blue); color: #fff; transform: translateY(-1px); }
.ssrf-donate { display: inline-flex; align-items: center; gap: 8px; padding: .72rem 1.35rem; border-radius: 999px; background: var(--ssrf-donate-grad); color: #fff !important; font-weight: 700; text-decoration: none; box-shadow: 0 12px 26px -10px rgba(245, 130, 11, .6); transition: transform .25s var(--ssrf-ease), box-shadow .25s; }
.ssrf-donate:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -12px rgba(245, 130, 11, .72); }
.ssrf-donate--block { width: 100%; justify-content: center; margin-top: 12px; }
.ssrf-burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--ssrf-line); background: #fff; color: var(--ssrf-ink); font-size: 1.4rem; cursor: pointer; place-items: center; }
.ssrf-mnav { display: flex; flex-direction: column; }
.ssrf-mnav__link { padding: .8rem .4rem; font-weight: 700; color: var(--ssrf-ink); text-decoration: none; border-bottom: 1px solid var(--ssrf-line); }
.ssrf-mnav__sub { padding: .55rem .4rem .55rem 1.2rem; color: var(--ssrf-muted); text-decoration: none; font-size: .92rem; }
.ssrf-mnav__sub:hover, .ssrf-mnav__link:hover { color: var(--ssrf-blue); }

/* Mobile nav drawer — force fixed + hidden so it can NEVER render inline,
   independent of Bootstrap's offcanvas CSS. Bootstrap JS still toggles `.show`. */
#sdsMobileNav { position: fixed !important; top: 0; bottom: 0; right: 0; z-index: 1090; width: min(360px, 86vw); max-width: 100%; background: #fff; box-shadow: -14px 0 44px -18px rgba(30, 20, 12, .45); transition: transform .32s var(--ssrf-ease), visibility .32s; }
#sdsMobileNav:not(.show):not(.showing) { transform: translateX(102%); visibility: hidden; }
#sdsMobileNav.show, #sdsMobileNav.showing { transform: none; visibility: visible; }
#sdsMobileNav .offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--ssrf-line); }
#sdsMobileNav .offcanvas-body { padding: 12px 20px 24px; }

@media (max-width: 1120px) { .ssrf-nav { display: none; } .ssrf-burger { display: grid; } .ssrf-header__actions { margin-left: auto; } }
@media (max-width: 560px) { .ssrf-logo__name { font-size: .9rem; } .ssrf-logo__img { height: 50px; max-width: 190px; } .ssrf-donate span, .ssrf-donate { font-size: .92rem; } .ssrf-header__inner { gap: 10px; } }

/* ======================================================= FLOATING RAIL (navy) */
.pf-rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1035; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, #1E1E1E, #333333); padding: 16px 12px; border-radius: 20px 0 0 20px; box-shadow: -12px 24px 60px -22px rgba(30, 20, 12, .55); }
.pf-rail__btn { --_c: var(--ssrf-blue); display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, .9); text-decoration: none; font-size: .58rem; font-weight: 600; text-align: center; line-height: 1.1; cursor: pointer; }
.pf-rail__btn i { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.05rem; background: var(--_c); box-shadow: 0 8px 18px -6px var(--_c); transition: transform .25s var(--ssrf-ease); }
.pf-rail__btn:hover { color: #fff; } .pf-rail__btn:hover i { transform: scale(1.12); }
.pf-rail__btn--donate { --_c: var(--ssrf-orange); }
.pf-rail__btn--volunteer { --_c: #C61F26; }
.pf-rail__btn--campaigns { --_c: var(--ssrf-gold); }
.pf-rail__btn--whatsapp { --_c: #25D366; }
.pf-rail__btn--top { --_c: #6E6459; opacity: 0; visibility: hidden; height: 0; overflow: hidden; transition: opacity .3s, visibility .3s; }
.pf-rail__btn--top.is-shown { opacity: 1; visibility: visible; height: auto; }
@media (max-width: 991.98px) { .pf-rail { display: none; } .sds-l-a11y { display: none; } }
@media (min-width: 992px) { .site-body .site-totop { display: none; } }

/* ======================================================= MOBILE DONATE BAR */
.pf-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1036; display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--ssrf-line); box-shadow: 0 -12px 34px -20px rgba(30, 20, 12, .4); }
.pf-mobilebar a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.pf-mobilebar .pf-mb-donate { background: var(--ssrf-donate-grad); color: #fff; box-shadow: 0 12px 26px -10px rgba(245, 130, 11, .55); }
.pf-mobilebar .pf-mb-volunteer { background: #fff; color: var(--ssrf-blue); border: 1.5px solid var(--ssrf-line); }
@media (max-width: 991.98px) { .pf-mobilebar { display: flex; } body { padding-bottom: 74px; } }

/* Premium dropdowns for any remaining Bootstrap menus + selection/scrollbar */
.dropdown-menu { border: 0; border-radius: 16px; box-shadow: var(--ssrf-shadow); padding: 8px; }
.dropdown-item { border-radius: 10px; padding: .55rem .8rem; }
.dropdown-item:hover, .dropdown-item:focus { background: #EAF3FA; color: var(--ssrf-blue); }
::selection { background: rgba(30, 20, 12, .16); }

/* ========================================================== SEARCH OVERLAY */
.sds-l-search-overlay { background: rgba(30, 20, 12, .55) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-top: 14vh; }
.sds-l-search-overlay__box { background: #fff !important; border-radius: 22px !important; box-shadow: var(--ssrf-shadow-lg) !important; padding: 24px !important; }
.sds-l-search-overlay .sds-input-group { display: flex; align-items: center; gap: 10px; background: #FBF3E8; border: 1px solid var(--ssrf-line); border-radius: 14px; padding: 8px 16px; }
.sds-l-search-overlay .sds-input-group__icon { color: var(--ssrf-blue); font-size: 1.25rem; display: inline-flex; }
.sds-l-search-overlay input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 1.1rem; color: var(--ssrf-ink) !important; padding: 12px 4px; }
.sds-l-search-overlay input::placeholder { color: var(--ssrf-muted); }
.sds-l-search-overlay input:focus { outline: none; box-shadow: none !important; }
.sds-l-search-overlay .sds-btn--icon { color: var(--ssrf-muted); background: transparent; border: 0; }
.sds-l-search-overlay .sds-btn--icon:hover { color: var(--ssrf-ink); }
.sds-l-search-overlay .sds-overline { color: var(--ssrf-teal-700); }
.sds-l-search-overlay .sds-chip { background: #EAF3FA; color: var(--ssrf-blue); border: 0; border-radius: 999px; padding: 6px 14px; text-decoration: none; }

/* ================================================================== FOOTER */
.ssrf-footer { background: var(--ssrf-navy) !important; color: rgba(255, 255, 255, .7); border-top: 0 !important; padding-top: clamp(3rem, 6vw, 4.5rem); }
.ssrf-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: 44px; padding-bottom: 40px; }
.ssrf-footer__logo { display: inline-block; height: 72px; width: auto; max-width: 260px; object-fit: contain; background: #fff; padding: 12px 16px; border-radius: 16px; margin-bottom: 16px; box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .5); }
.ssrf-footer__name { color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; text-transform: uppercase; line-height: 1.1; }
.ssrf-footer__tag { color: #E0A94A; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-top: 4px; }
.ssrf-footer__brand p { color: rgba(255, 255, 255, .64); font-size: .92rem; line-height: 1.65; margin: 14px 0 0; max-width: 34ch; }
.ssrf-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.ssrf-footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; transition: transform .25s var(--ssrf-ease), background .25s, border-color .25s; }
.ssrf-footer__social a:hover { background: var(--ssrf-donate-grad); border-color: transparent; transform: translateY(-3px); color: #fff; }
.ssrf-footer__col h3 { color: #fff; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 16px; }
.ssrf-footer__col a { display: block; color: rgba(255, 255, 255, .68); text-decoration: none; padding: 6px 0; font-size: .93rem; transition: color .2s, padding-left .2s var(--ssrf-ease); }
.ssrf-footer__col a:hover { color: #fff; padding-left: 5px; }
.ssrf-footer__contact ul { list-style: none; margin: 0 0 18px; padding: 0; }
.ssrf-footer__contact li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, .68); font-size: .9rem; padding: 5px 0; line-height: 1.5; }
.ssrf-footer__contact li i { color: #E0A94A; margin-top: 3px; flex: 0 0 auto; }
.ssrf-footer__contact a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.ssrf-footer__contact a:hover { color: #fff; }
.ssrf-footer__news { display: flex; gap: 8px; }
.ssrf-footer__news input { flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #fff; padding: .7rem 1rem; }
.ssrf-footer__news input::placeholder { color: rgba(255, 255, 255, .5); }
.ssrf-footer__news input:focus { outline: none; border-color: #E0A94A; background: rgba(255, 255, 255, .12); }
.ssrf-footer__news button { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ssrf-donate-grad); color: #fff; cursor: pointer; transition: transform .2s var(--ssrf-ease); }
.ssrf-footer__news button:hover { transform: translateY(-2px); }
.ssrf-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: rgba(255, 255, 255, .5); font-size: .85rem; }
.ssrf-footer__bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.ssrf-footer__bottom a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.ssrf-footer__bottom a:hover { color: #fff; }
@media (max-width: 900px) { .ssrf-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .ssrf-footer__grid { grid-template-columns: 1fr; } .ssrf-footer__bottom { flex-direction: column; align-items: flex-start; } }

/* Focus + reduced motion */
.ssrf-btn:focus-visible, .ssrf-donate:focus-visible, .ssrf-iconbtn:focus-visible, .pf-rail__btn:focus-visible, .ssrf-nav__link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30, 20, 12, .45); }
@media (prefers-reduced-motion: reduce) { .ssrf-btn, .ssrf-donate, .pf-rail__btn i, .ssrf-nav__link::after { transition: none !important; } }

/* ---------------------------------------------- Google Translate — hide banner/gadget */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
#google_translate_element { display: none !important; }
body { top: 0 !important; }        /* Google sets body{top:40px} for its banner */
.goog-tooltip, .goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }