/* ============================================================
   YWAM Ships — SITE-SPECIFIC stylesheet
   ------------------------------------------------------------
   These rules live ONLY on the deployed site, NOT in the Design
   System master (assets/styles.css).

   ⚠ styles.css is synced/overwritten from the Design System, so any
   rule placed there is lost on the next sync. Anything site-specific
   that must survive a sync goes HERE instead.

   Loaded on every page AFTER styles.css, so these rules win on ties.

   Trimmed 31 July 2026: the generic components, the PageSpeed /
   accessibility hardening, the responsive-audit fixes, the video
   facades and the news/listing components all landed in the Design
   System master and were removed from here as duplicates. What's left
   is genuinely site-only. See md/design-system-sync-2026-07-31.md.
   ============================================================ */

/* ---------- Per-page banners ----------
   The generic .banner base (default image, cover, 2560/918) lives in
   styles.css. Each page's <div class="banner banner--<page>"> pulls its
   own hero here; set a matching aspect-ratio when the source isn't
   2560×918 so the image scales full-bleed without cropping. */
.banner--livefm { background-image: url('../images/cl_banner-livefm.webp'); }
.banner--whatwedo { background-image: url('../images/cl_banner-what-we-do.webp'); aspect-ratio: 2560 / 916; }
.banner--home { background-image: url('../images/cl_banner-home-ship.webp'); }
.banner--globally { background-image: url('../images/cl_banner-ywam-globally.webp'); }
.banner--faqs { background-image: url('../images/cl_banner-faqs.webp'); aspect-ratio: 2560 / 916; }
.banner--pom { background-image: url('../images/cl_banner-port-moresby-campus.webp'); }
.banner--tsv { background-image: url('../images/cl_banner-townsville-campus.webp'); }
.banner--dts { background-image: url('../images/cl_banner-dts-townsville.webp'); aspect-ratio: 1875 / 938; }
.banner--dtspng { background-image: url('../images/cl_banner-dts-png.webp'); aspect-ratio: 2560 / 916; }
.banner--gapyears { background-image: url('../images/cl_banner-gap-years.webp'); aspect-ratio: 1600 / 640; }
.banner--globalhealth { background-image: url('../images/cl_banner-global-health-v3.webp'); aspect-ratio: 2200 / 909; }
.banner--radiomedia { background-image: url('../images/cl_banner-radio-and-media.webp'); aspect-ratio: 2560 / 916; }
.banner--dentalpng { background-image: url('../images/cl_banner-dental-assisting-png.webp'); aspect-ratio: 2560 / 916; }
.banner--volunteer { background-image: url('../images/cl_banner-volunteer-on-the-ship.webp'); }
.banner--ship { background-image: url('../images/cl_banner-the-medical-ship.webp'); }
.banner--dentaltrailer { background-image: url('../images/cl_banner-dental-trailer.webp'); }
.banner--missionbuild { background-image: url('../images/cl_banner-mission-build.webp'); aspect-ratio: 2560 / 916; }
.banner--takeatour { background-image: url('../images/cl_banner-take-a-tour.webp'); aspect-ratio: 2560 / 916; }
.banner--joinstafftsv { background-image: url('../images/cl_banner-join-staff-tsv.webp'); }
.banner--joinstaffpng { background-image: url('../images/cl_banner-join-staff-png.webp'); aspect-ratio: 2560 / 918; }
.banner--precinct { background-image: url('../images/cl_banner-ywam-precinct-v2.webp'); aspect-ratio: 2200 / 789; }
.banner--youthadv { background-image: url('../images/cl_banner-youth-adventures.webp'); aspect-ratio: 2560 / 916; }
.banner--cafe { background-image: url('../images/cl_banner-ywam-cafe.webp'); }
.banner--highropes { background-image: url('../images/cl_banner-high-ropes-course.webp'); }
.banner--advocate { background-image: url('../images/cl_banner-advocate.webp'); aspect-ratio: 2560 / 1031; }
.banner--footprint { background-image: url('../images/cl_banner-our-footprint.webp'); aspect-ratio: 2560 / 916; }
.banner--pld { background-image: url('../images/cl_banner-leadership-development.webp'); aspect-ratio: 2560 / 918; }
.banner--ald { background-image: url('../images/cl_banner-advanced-leadership.webp'); aspect-ratio: 2560 / 917; }
.banner--alive { background-image: url('../images/cl_banner-alive.webp'); aspect-ratio: 2000 / 973; }
.banner--supporters { background-image: url('../images/cl_banner-supporters.webp'); aspect-ratio: 2560 / 916; }
.banner--contact { background-image: url('../images/cl_banner-contact-us.jpg'); aspect-ratio: 2560 / 917; }
.banner--feedback { background-image: url('../images/cl_banner-contact-us.jpg'); aspect-ratio: 2560 / 917; }
.banner--download { background-image: url('../images/cl_banner-download.webp'); aspect-ratio: 2560 / 918; }
/* Thank_You.dc.html owns its own variant rules (a <style> in its head) so a cached
   stylesheet can never show every message block at once — it did, 17 Aug 2026. The hero
   was dropped from that page in the same pass; nothing here belongs to it any more. */
.banner--ghgy { background-image: url('../images/cl_banner-global-health-gap-year.webp'); aspect-ratio: 2560 / 917; }
.banner--annualreports { background-image: url('../images/cl_banner-annual-reports.webp'); aspect-ratio: 2560 / 918; }
.banner--patrons { background-image: url('../images/cl_banner-patrons.webp'); aspect-ratio: 2560 / 1031; }
.banner--structure { background-image: url('../images/cl_banner-structure-approach.jpg'); aspect-ratio: 2560 / 916; }
.banner--trainingapproach { background-image: url('../images/cl_banner-training-approach.webp'); aspect-ratio: 2560 / 917; }
.banner--visionmission { background-image: url('../images/cl_banner-vision-and-mission.webp'); aspect-ratio: 2560 / 916; }
.banner--resources { background-image: url('../images/cl_banner-resources.webp'); aspect-ratio: 2560 / 917; }
.banner--allcourses { background-image: url('../images/cl_banner-all-courses.webp'); aspect-ratio: 2560 / 916; }
.banner--impactsummer { background-image: url('../images/cl_banner-impact-summer.webp'); aspect-ratio: 2560 / 1032; }
.banner--schoolseminars { background-image: url('../images/cl_banner-school-seminars.webp'); aspect-ratio: 2560 / 918; }
.banner--transitional { background-image: url('../images/cl_banner-transitional-accom.webp'); aspect-ratio: 2560 / 918; }
.banner--vetis { background-image: url('../images/cl_banner-vet-in-schools.webp'); aspect-ratio: 2560 / 918; }
.banner--visionapproach { background-image: url('../images/cl_banner-vision-and-approach.webp'); aspect-ratio: 2560 / 918; }
.banner--youthleaders { background-image: url('../images/cl_banner-youth-leaders.webp'); aspect-ratio: 2560 / 918; }
.banner--youthopps { background-image: url('../images/cl_banner-youth-opportunities.jpg'); aspect-ratio: 2560 / 916; }
.banner--privacy { background-image: url('../images/cl_banner-privacy-v3.webp'); aspect-ratio: 2500 / 1000; }
.banner--nationlist { background-image: url('../images/cl_banner-financial-nation-list.webp'); aspect-ratio: 2560 / 916; }
.banner--profresources { background-image: url('../images/cl_banner-professional-resources-v3.webp'); aspect-ratio: 2500 / 1000; }


/* ---------- Deliberate divergences from the Design System ----------
   Everything else generic now lives in styles.css. These three stay
   because this site renders them differently on purpose. */

/* The DS pairs .loc-cards--cols-2 and .cta-cards--cols-2 at 820px. This site's
   2-up "Get involved" card rows were tuned to 760px; the CTA pairs keep 820px. */
.loc-cards--cols-2 { max-width: 760px; }

/* Pilcrow has no true italic cut, so the browser synthesises the slant and the
   testimonial quote reads as bold. Set it upright; the attribution keeps its
   bold italic. (The DS keeps the quote italic.) */
.testimonial-slide p { font-style: normal; }


/* ---------- Site search (header widget + results page) ----------
   Coupled to assets/search.js + assets/search-index.json, so site-only. */
/* styles.css sets `.top-bar > * { position: relative; z-index: 1 }` for the tribal
   pattern overlay, which traps the search dropdown in a z-index:1 stacking context —
   the .banner-strip further down the page then paints straight through it. Lift the
   whole header (and its dropdowns) above the page content instead. */
.top-bar { position: relative; z-index: 300; }
.header { position: relative; z-index: 290; }
.banner-strip, .banner { position: relative; z-index: 0; }

/* "Healthy lives, communities, nations" roundel, sitting to the right of Apply now.
   Site-specific branding, so it lives here rather than in the synced master. */
.header-actions__mark-link { display: flex; align-items: center; }
.header-actions__mark { display: block; width: auto; height: 78px; flex: none; }
@media (max-width: 1160px) { .header-actions__mark { height: 62px; } }

.site-search { position: relative; display: flex; align-items: center; }
.site-search__toggle {
  background: none; border: 0; cursor: pointer; padding: 6px; display: flex; align-items: center;
  color: #ffffff; opacity: 0.85; transition: opacity 0.2s ease;
}
.site-search__toggle:hover { opacity: 1; }
.site-search__toggle svg { width: 17px; height: 17px; display: block; }
.site-search__field {
  display: flex; align-items: center; gap: 8px; background: #ffffff;
  border-radius: 999px; padding: 5px 6px 5px 14px; box-shadow: 0 6px 18px rgba(15,83,116,0.25);
}
.site-search__input {
  border: 0; outline: 0; background: none; width: clamp(150px, 22vw, 230px);
  font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 14px; color: var(--ink);
}
/* The sitewide 3px focus ring squared off the round pill and read as a bug.
   Suppress it on the input and put a 2px ring on the pill itself instead —
   follows the border-radius, 8.4:1 on white, still passes WCAG 2.4.11. */
.site-search__input:focus-visible { outline: 0; }
.site-search__field:focus-within {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.site-search__input::placeholder { color: #8a9aa2; }
.site-search__go {
  border: 0; cursor: pointer; background: var(--blue); color: #ffffff; border-radius: 999px;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.site-search__go svg { width: 13px; height: 13px; }
.site-search__close { border: 0; background: none; cursor: pointer; color: #6c8290; font-size: 17px; line-height: 1; padding: 0 6px; }
/* Keep the expanded field clear of the absolutely-positioned language toggle. */
.top-bar[data-search-open="true"] .lang-toggle { display: none; }
.top-bar[data-search-open="true"] .lang-switch { display: none; }

/* ---------------------------------------------------------------------------
   Language switcher (.lang-switch) — replaces the two-flag .lang-toggle.
   Site-specific because it is coupled to the /<lang>/ translated folder sites,
   so it lives here rather than in the design-system master. Markup is generated
   per language from working/i18n/langs.json — static text, no {{ holes }}, so
   the top bar paints its final state on the first frame.
   Language codes, not flags: no flag honestly represents Español or Français.
   --------------------------------------------------------------------------- */
.lang-switch { position: absolute; right: clamp(16px, 4vw, 40px); top: 50%; transform: translateY(-50%); }
.lang-switch__current {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px;
  padding: 4px 10px 4px 6px; border-radius: 999px; cursor: pointer; line-height: 1;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff; font-family: inherit; font-size: 13px; font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lang-switch__current:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); }
.lang-switch__code {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 5px;
  border-radius: 3px; background: #ffffff; color: var(--blue); line-height: 1;
}
.lang-switch__caret {
  width: 0; height: 0; margin-left: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid rgba(255, 255, 255, 0.85); transition: transform 0.2s ease;
}
.lang-switch[data-open="true"] .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 220; display: none;
  min-width: 196px; padding: 6px; background: #ffffff; border-radius: 8px;
  box-shadow: 0 14px 34px rgba(6, 34, 47, 0.26);
}
.lang-switch[data-open="true"] .lang-switch__menu { display: block; }
.lang-switch__item {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 8px 10px; border-radius: 6px; color: #2b3f49;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.lang-switch__item .lang-switch__code { background: #e8eff3; color: var(--blue); }
.lang-switch__item:hover { background: #f1f6f8; color: var(--blue); }
.lang-switch__item--active { background: var(--blue); color: #ffffff; }
.lang-switch__item--active:hover { background: var(--blue); color: #ffffff; }
/* Small footnote link under the language rows — a way in for the language a
   visitor could not find. Deliberately quieter than a language row. */
.lang-switch__request {
  display: block; margin: 4px 2px 0; padding: 9px 10px; min-height: 36px;
  border-top: 1px solid #e8eff3; color: #41616e; font-size: 13px; line-height: 1.4;
  text-decoration: underline; text-decoration-color: #b9cfd9; text-underline-offset: 3px;
}
.lang-switch__request:hover { color: var(--blue); text-decoration-color: var(--blue); }
@media (max-width: 860px) {
  .lang-switch { position: static; transform: none; margin-left: 6px; }
  .lang-switch__menu { right: auto; left: 0; }
}
/* Tight phone top bar: the code pill alone identifies the language. */
@media (max-width: 480px) {
  .lang-switch__name { display: none; }
  .lang-switch__current { padding: 4px 8px 4px 5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANGUAGES ARE OFF FOR LAUNCH — 27 August 2026
   ══════════════════════════════════════════════════════════════════════════
   Leadership has not yet signed off the machine translations, so the site
   launches English-only. NOTHING IS UNBUILT: /es/, /tpi/ and /no/ are still
   deployed, still work, and are still reachable at their real URLs so they
   can be reviewed. They are simply unlinked (below) and noindexed
   (vercel.json + the trimmed sitemap.xml).

   ⇢ TO TURN LANGUAGES BACK ON: delete this block. That is the switch.
     Then the three companion changes, in md/i18n.md → "Languages are OFF
     for launch": undo the vercel.json noindex headers, regenerate
     sitemap.xml, and put Request_a_Language.dc.html back to index,follow.

   WHY IT LIVES IN CSS, NOT IN Header.dc.html. The switcher markup sits
   inside the <!--langswitch--> region, which the i18n build REPLACES
   WHOLESALE from switcherMarkup() in working/i18n/i18n-lib.js. A conditional
   in the header would be silently reverted by the next rebuild — a trap this
   project has already been caught by once. A stylesheet rule cannot be:
   **a full language rebuild can be run at any time and this stays true**,
   which is the whole point, because the plan is to re-translate before
   leadership reviews.

   It also covers all four sites at once: site.css loads on every page in
   every language folder, so the switcher is hidden inside /es/ too.
   ══════════════════════════════════════════════════════════════════════════ */
.lang-switch { display: none; }
/* The "Request a new language" row in the mobile menu lives OUTSIDE the
   langswitch region, so it survives hiding the switcher and needs its own
   rule. Hide the whole row, not just the link, or an empty padded row is
   left behind. The filename is identical in every language folder. */
.mobile-menu__row:has(> a[href="Request_a_Language.dc.html"]) { display: none; }
a.mobile-menu__link[href="Request_a_Language.dc.html"] { display: none; }

/* A translated page still answers on its real URL so leadership can review
   it. This strip makes sure nobody mistakes one for a published page — and
   that a link shared out of context reads as a draft rather than as a live
   Spanish site. Keyed off <html lang>, which every generated page sets (and
   404.html sets at runtime), so it needs no rebuild and no page edits. */
html[lang="es"] body, html[lang="tpi"] body, html[lang="no"] body { padding-top: 34px; }
html[lang="es"] body::before,
html[lang="tpi"] body::before,
html[lang="no"] body::before {
  content: "DRAFT TRANSLATION — under review, not published";
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147482000;
  display: block; box-sizing: border-box; height: 34px;
  padding: 8px 16px; background: #7a4a10; border-bottom: 3px solid #f0a020;
  color: #ffeccd; font-family: 'Pilcrow', Arial, sans-serif;
  font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: .02em;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media print { html[lang="es"] body::before, html[lang="tpi"] body::before, html[lang="no"] body::before { display: none; } }
/* ═══════════════════ end: languages off for launch ═══════════════════════ */
.site-search__results {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 200;
  width: min(420px, calc(100vw - 32px)); max-height: 62vh; overflow-y: auto;
  background: #ffffff; border-top: 3px solid var(--blue);
  box-shadow: 0 14px 40px rgba(15,83,116,0.28); text-align: left; padding: 6px 0;
}
.site-search__group-label {
  font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
  padding: 12px 18px 6px; margin: 0;
}
.site-search__hit { display: block; padding: 9px 18px; transition: background 0.15s ease; }
.site-search__hit:hover { background: #eef4f5; }
.site-search__hit-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.site-search__hit:hover .site-search__hit-title { color: var(--blue); }
.site-search__hit-snippet { display: block; font-size: 12.5px; line-height: 1.5; color: #5f7480; margin-top: 3px; }
.site-search__empty { padding: 18px; font-size: 14px; color: #5f7480; }
.site-search__all {
  display: block; padding: 12px 18px; border-top: 1px solid #e8ecee; margin-top: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue);
}
.site-search__all:hover { background: #eef4f5; }
.site-search__results--hidden,
.site-search__empty--hidden,
.site-search__all--hidden { display: none; }
@media (max-width: 860px) {
  .site-search__results { right: auto; left: 0; }
  .site-search__input { width: 140px; }
}

/* ---------- Mobile menu: accordion, contrast, bottom safe area (25 Aug 2026) ----------
   Site-specific because the accordion markup lives in this project's Header.dc.html.
   ⚠ Mirror into the design system — see md/design-system-sync-2026-08-19.md.
   Three fixes: (1) the panel listed all 36 links flat; it now shows the seven top-level
   items, each opened by its own + button, so the label still navigates. (2) The sublinks
   used var(--soft) — 3.9:1 on the #0f5374 panel, under the 4.5:1 floor; #e3eef4 is 6.7:1.
   (3) "Apply now" was clipped at the bottom of the scrolling panel on phones — the panel
   now carries real bottom padding plus the iOS safe-area inset. */
.mobile-menu { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
.mobile-menu__group { display: flex; flex-direction: column; }
.mobile-menu__row { display: flex; align-items: stretch; }
.mobile-menu__row .mobile-menu__link { flex: 1; padding: 10px 12px 10px 24px; line-height: 1.3; }
.mobile-menu__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 15px;
  font-weight: 700; color: #ffffff; min-height: 40px; transition: background 0.2s ease;
}
.mobile-menu__toggle:hover { background: rgba(255,255,255,0.08); }
.mobile-menu__sign { font-size: 22px; font-weight: 700; line-height: 1; width: 30px; text-align: center; }
.mobile-menu__sub { display: flex; flex-direction: column; padding: 2px 0 8px; background: rgba(0,0,0,0.16); }
.mobile-menu__sublink { color: #e3eef4; padding: 9px 24px 9px 40px; line-height: 1.3; }
/* The global `a:hover { color: var(--blue) }` outspecifies a single-class colour, so on
   hover/tap these links turned blue-on-blue and vanished. Pin them white. */
.mobile-menu__link:hover, .mobile-menu__link:focus-visible,
.mobile-menu__sublink:hover, .mobile-menu__sublink:focus-visible { color: #ffffff; }
/* Apply now is a top-level row on mobile (it is a button in the desktop header). */
.mobile-menu__group--apply { margin-top: 4px; }
/* Tighter CTA gap where the button follows body copy directly (Join Staff PNG, 27 Aug 2026).
   `.loc-apply`'s --gap-cta padding is sized for a standalone CTA band; under a paragraph it
   left a large hole above the button. Opt-in modifier, so no other page moves. */
.loc-apply--tight { padding-top: 8px; }

/* Apply stays in the logo bar on mobile: the desktop .header-actions row (buttons +
   roundel) is hidden below the switch point, so the bar carries its own compact copy — Apply,
   My account, the hamburger. The roundel (seal) that used to sit hard right on mobile was
   REMOVED on 27 Aug 2026 (user's call) to make room for "My account" — the brand logo on the
   left already identifies the site, and at 390px the two marks alone were 238px of a 358px row.

   ⚠ THE SWITCH POINT IS RAISED TO 1160px HERE (27 Aug 2026). `assets/styles.css` swaps the nav
   for the hamburger at 1060px, but that was sized for ONE button plus the roundel. With Apply
   AND My account in the row, the five top-level menu items, both buttons and the roundel start
   colliding around 1100px. Overriding in site.css rather than editing the 1060px media query in
   styles.css keeps the change safe from a design-system sync — and means the two files disagree
   on purpose: the LAST one loaded wins, and site.css loads last.
   ⚠ The logo-height override mirrors into the design system with the rest of this block. */
.site-header__mobile-actions, .site-header__apply, .site-header__account { display: none; }
@media (max-width: 1160px) {
  .main-nav, .header-actions { display: none; }
  .nav-toggle { display: block; }
  .site-header__mobile-actions { display: flex; align-items: center; gap: 10px; }
  .site-header__apply, .site-header__account { display: inline-flex; align-items: center; min-height: 40px; padding: 10px 13px; font-size: 14px; }
}
/* Slightly tighter than the sitewide .btn so two buttons and the roundel fit the row without
   crowding the last menu item. Horizontal only — the vertical padding and the 44px tap target
   come from .btn and must not change. */
.header-actions .btn { padding-left: 18px; padding-right: 18px; }
@media (max-width: 1280px) {
  .header-actions .btn { padding-left: 15px; padding-right: 15px; }
  .header-actions { gap: 10px; }
}
@media (max-width: 560px) {
  .site-header__logo img { height: 62px; }
  .site-header__apply, .site-header__account { padding: 9px 11px; font-size: 13px; }
  .site-header__mobile-actions { gap: 8px; }
}
@media (max-width: 400px) {
  .site-header__logo img { height: 54px; }
  .site-header__mobile-actions { gap: 6px; }
  .site-header__apply, .site-header__account { padding: 9px 9px; font-size: 12.5px; }
}
.mobile-menu__actions { padding-top: 18px; }

/* Header search on phones: the field was 140px wide with 14px text, which iOS
   zooms into on focus. Give it the row's full width and a 16px input. */
@media (max-width: 640px) {
  .top-bar[data-search-open="true"] .top-bar__link { display: none; }
  .site-search { flex: 1; }
  .site-search > div { flex: 1; display: flex; flex-direction: column; }
  .site-search__field { flex: 1; }
  .site-search__input { width: 100%; font-size: 16px; }
  .site-search__results { width: calc(100vw - 24px); }
}

/* Full results page */
.search-page__form { display: flex; gap: 10px; max-width: 620px; margin: 0 auto 8px; }
.search-page__input {
  flex: 1; border: 2px solid #d7e0e4; border-radius: 4px; padding: 12px 16px;
  font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 16px; color: var(--ink);
}
.search-page__input:focus { outline: 0; border-color: var(--blue); }
.search-page__count { text-align: center; font-size: 15px; color: #5f7480; margin: 18px 0 0; }
.search-tabs { display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; }
.search-tab {
  font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  background: #fff; color: var(--blue); border: 2px solid var(--blue); border-radius: 4px;
  padding: 9px 20px; transition: background .2s, color .2s;
}
.search-tab:hover { background: var(--blue); color: #fff; }
.search-tab--active { background: var(--blue); color: #fff; }
.search-tab--active:hover { background: #fff; color: var(--blue); }
.search-tab__count { font-weight: 700; opacity: .7; margin-left: 6px; }
.search-result__date {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #7d8f97; margin: 0 0 4px;
}
.search-results { max-width: 860px; margin: 0 auto; }
.search-results__group { margin-top: 34px; }
.search-results__group-label {
  font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 13px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue);
  border-bottom: 2px solid #e8ecee; padding-bottom: 8px; margin: 0 0 6px;
}
.search-result { display: block; padding: 16px 0; border-bottom: 1px solid #eef1f3; }
.search-result:hover .search-result__title { color: var(--blue); text-decoration: underline; }
.search-result__title { font-size: 19px; font-weight: 800; color: var(--ink); margin: 0; }
.search-result__snippet { font-size: 15.5px; line-height: 1.65; color: #55696f; margin: 6px 0 0; }

/* ---- Cookie consent (assets/consent.js) ---- */
.consent-bar{font-family:'Pilcrow','Open Sans Fallback',Arial,sans-serif;position:fixed;left:0;right:0;bottom:0;z-index:9000;background:#fff;border-top:3px solid var(--blue,#0f5374);box-shadow:0 -6px 24px rgba(0,0,0,.16)}
.consent-bar__inner{position:relative;max-width:1180px;margin:0 auto;padding:20px 56px 20px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.consent-bar__text{flex:1 1 420px;min-width:0}
.consent-bar__title{font-family:'Pilcrow','Montserrat Fallback',Arial,sans-serif;font-weight:700;color:var(--blue,#0f5374);font-size:22px;margin:0 0 6px}
.consent-bar__text p{margin:0;font-size:15px;line-height:1.6;color:#333;text-wrap:pretty}
/* ------------------------------------------------------------
   Linked photo inside a .text-card (photo / text / button set)
   ------------------------------------------------------------
   .cta-card and .loc-card already give their photo the same href as the
   button plus a rollover zoom (styles.css line ~301). A .text-card that
   holds a photo + copy + .btn is the same pattern, so its photo behaves the
   same way: wrap the <img> in a bare <a> (never .btn) pointing at the
   button's href.
   Wrapping moves the img out of direct-child position, so `.text-card > img`
   and `.text-card:has(> img:first-child)` in styles.css stop matching —
   these rules restate the width/margin/radius and the centred photo-card
   treatment for the anchor form. Lives here (not styles.css) so a design-
   system sync can't wipe it; pending promotion to the DS component.
   ------------------------------------------------------------ */
.text-card > a:not(.btn){display:block;margin-bottom:16px;overflow:hidden;border-radius:4px}
.text-card > a:not(.btn) img{display:block;width:100%;height:auto;margin-bottom:0;transition:transform .4s ease,opacity .3s ease}
/* image-slot form: styles.css gives it its own height + 16px gap, so zero the
   inner margin (the anchor now carries it) and zoom the slot itself. */
.text-card > a:not(.btn) image-slot{margin-bottom:0;transition:transform .4s ease,opacity .3s ease}
.text-card > a:not(.btn):hover img,.text-card > a:not(.btn):hover image-slot{transform:scale(1.05);opacity:.92}
.text-card > a:not(.btn):focus-visible{outline:3px solid var(--blue,#0f5374);outline-offset:2px}
.text-card:has(> a:not(.btn):first-child){text-align:center}
.text-card:has(> a:not(.btn):first-child) h3{border-bottom:none;padding-bottom:0}
@media (hover:none){.text-card > a:not(.btn):hover img,.text-card > a:not(.btn):hover image-slot{transform:none;opacity:1}}

/* ------------------------------------------------------------
   Lightbox above the top bar
   ------------------------------------------------------------
   styles.css gives .lightbox z-index:200 but .top-bar z-index:300, and the
   top bar is positioned, so it paints over the full-screen overlay however
   the DOM is ordered — the strip stayed lit and clipped the × button. 400
   clears it on every page that uses .photo-grid. Here, not styles.css, so a
   design-system sync can't wipe it; pending mirror into the DS.
   ------------------------------------------------------------ */
.lightbox{z-index:400}

.consent-bar__actions{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.consent-bar__actions .btn{font-size:14px;padding:11px 20px}
.consent-bar__close{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:none;color:#5a6b73;font-size:26px;line-height:1;cursor:pointer;border-radius:4px}
.consent-bar__close:hover{color:var(--blue,#0f5374)}
.consent-panel{position:fixed;inset:0;z-index:9100;background:rgba(12,32,42,.6);display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.consent-panel.is-open{display:flex}
html.consent-locked,html.consent-locked body{overflow:hidden}
.consent-panel__box{font-family:'Pilcrow','Open Sans Fallback',Arial,sans-serif;position:relative;background:#fff;border-radius:8px;max-width:620px;width:100%;padding:32px 32px 28px;max-height:calc(100dvh - 40px);overflow-y:auto}
.consent-panel__close{position:absolute;top:10px;right:12px;width:40px;height:40px;border:0;background:none;color:#5a6b73;font-size:28px;line-height:1;cursor:pointer;border-radius:4px}
.consent-panel__close:hover{color:var(--blue,#0f5374)}
.consent-panel__title{font-family:'Pilcrow','Montserrat Fallback',Arial,sans-serif;font-weight:700;color:var(--blue,#0f5374);font-size:30px;margin:0 0 10px}
.consent-panel__intro{font-size:15px;line-height:1.65;color:#444;margin:0 0 22px}
.consent-opt{border-top:1px solid #e4eaed;padding:16px 0}
.consent-opt__head{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:36px}
.consent-opt--locked .consent-opt__head{cursor:default}
.consent-opt__head input{width:20px;height:20px;accent-color:var(--blue,#0f5374);flex:0 0 auto}
.consent-opt__title{font-weight:700;color:var(--blue,#0f5374);font-size:17px}
.consent-opt__title em{font-style:normal;font-weight:400;color:#5a6b73;font-size:14px;margin-left:8px}
.consent-opt__body{margin:8px 0 0 30px;font-size:15px;line-height:1.6;color:#444;text-wrap:pretty}
.consent-panel__actions{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid #e4eaed;padding-top:22px;margin-top:6px}
.consent-panel__actions .btn{font-size:14px;padding:11px 20px}
.consent-panel__link{margin:18px 0 0;font-size:14px}
@media (max-width:700px){
  .consent-bar__inner{padding:18px 18px 20px;gap:14px}
  .consent-bar__actions{width:100%}
  .consent-bar__actions .btn{flex:1 1 140px;text-align:center}
  .consent-panel__box{padding:26px 20px 22px}
  .consent-panel__actions .btn{flex:1 1 140px;text-align:center}
}