/* =====================================================================
   accessibility.css
   =====================================================================
   Stoke Park — WCAG 2.1/2.2 AA overrides. MUST load LAST in the page so
   focus visibility, reduced-motion handling and reflow rules can defeat
   theme styling that uses chained-class selectors or low specificity.

   Pair-of-files convention preserved:

     Block A — a11y-tweaks.css
         General accessibility helpers. Adds .visually-hidden-focusable,
         .a11y-sr-only, reduced-motion guards, forced-colors handling,
         baseline :focus-visible ring, header keyboard visibility, footer
         heading visibility fix, swiper scroll padding, etc.

     Block B — a11y-focus-last.css
         High-specificity #site-main focus-visible overrides + lightbox
         focus ring + forced-colors. Uses !important to beat the theme's
         chained-class outline resets. MUST appear after Block A.

   Both blocks are tightly scoped (#site-main, .h-scroll__section,
   [data-a11y-trap-host]) so they cannot leak into unrelated theme
   styling. Edit cautiously — the keyboard navigation flow in
   js/a11y-keyboard.js depends on several of these selectors being
   paint-visible at the moment focus lands.
   ===================================================================== */


/* =====================================================================
   BLOCK A — a11y-tweaks.css
   General accessibility helpers, CSS-only.
   ===================================================================== */

/* Stoke Park — accessibility helpers (CSS-only; no runtime scripts). */

.accessibility-statement__article {
  max-width: 42rem;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.a11y-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-container .btn.--no-arrow span {
  color: #FFFFFF !important;
}

.btn-container .btn.--no-arrow span.btn-lbl-dark {
  color: #212529;
}

/* Page-links invitation list: PerfectScrollbar shell (homepage, present, etc.) */
.block-page-links-block .invitation-links-scroll.gform-container.custom-scrollbar {
  max-height: min(70vh, 600px);
  min-height: 0;
  position: relative;
}

@media (max-width: 1024px) {
  .block-page-links-block .invitation-links-scroll.gform-container.custom-scrollbar {
    max-height: min(52vh, 480px);
  }
}

/* Respect OS “reduce motion” without breaking Lenis/GSAP (no universal * reset). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (min-width: 1025px) {
  #content.h-scroll.main-scroll-wrapper .h-scroll__section {
    scroll-margin-inline: max(24px, 4vw);
  }

  /* Intro: play link sits under hero layer on desktop; bring above so Tab/focus works */
  .intro-block .play-btn-container {
    z-index: 6;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .intro-block .play-btn-container:focus-within {
    opacity: 1;
  }
}

/* Decorative Vimeo layer — no pointer capture over CTAs */
.intro-block .landing-page__video iframe {
  pointer-events: none;
}

.intro-block .btn-container a.btn,
.intro-block .btn-container .btn {
  pointer-events: auto;
}

/* Hero “scroll to discover” pattern: ensure link inside btn-container receives clicks */
.block-hero-block .btn-container a.btn,
.block-hero-block .btn-container .btn {
  pointer-events: auto;
}

/*
 * WCAG 1.4.10 Reflow — reduce clipped/overlapping text at strong zoom (≈400%) / narrow widths.
 * Does not change desktop layout at default scale.
 */
.copy,
.block-innerpage-hero .text-block,
.block-page-links-block .text-block,
.history-post .text-content,
.site-header__navigation-desktop,
.site-header__navigation-mobile {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

@media (max-width: 640px) {
  .site-container {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
}

/* Keyboard focus — baseline; theme bundles reset outlines — final overrides in a11y-focus-last.css */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid #c9a227;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25);
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid CanvasText;
  }

  button,
  a {
    forced-color-adjust: none;
  }
}

@media (prefers-contrast: more) {
  a:hover,
  a:focus-visible {
    text-decoration: underline;
  }
}

/* Menu controls use native <button>; reset UA defaults only */
button.hamburger,
button.mobile-hamburger {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0;
  font: inherit;
  color: inherit;
}

button.close-icon {
  box-sizing: border-box;
}

/*
 * --- Keyboard / SR helpers paired with js/a11y-keyboard.js ---
 * All rules below are additive and namespaced so they cannot leak into theme styling.
 */

/* Visually hidden live region (sits offscreen, always in DOM) */
.a11y-live-region {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/*
 * Akismet honeypot — visually hide while keeping in DOM so spam-detection
 * heuristics still see the field. Keyboard + AT skip it (script also sets
 * tabindex=-1 and aria-hidden).
 */
.akismet-fields-container.a11y-honeypot,
.akismet-fields-container[aria-hidden="true"] {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/*
 * Swiper — give focused content breathing room when the carousel auto-advances
 * so the focus ring is never flush with the slide edge. Scoped to .swiper so
 * it cannot affect other horizontal containers.
 */
.swiper {
  scroll-padding-inline: 24px;
}

/*
 * Section landing focus — when a skip link or in-page anchor focuses the
 * section element (tabindex="-1"), draw a subtle inset ring so users see the
 * section was reached. We use :focus (not :focus-visible) because the section
 * can only receive focus programmatically: clicking inside lands focus on the
 * inner control instead, so there's no mouse-click false trigger to suppress.
 */
.h-scroll__section[tabindex="-1"]:focus {
  outline: 3px solid #c9a227;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 2px rgba(201, 162, 39, 0.22);
}

@media (forced-colors: active) {
  .h-scroll__section[tabindex="-1"]:focus {
    outline: 3px solid CanvasText;
    box-shadow: none;
  }
}

/*
 * Force visibility of focused headings / paragraphs.
 *
 * The theme animates .heading elements in via GSAP SplitText — until the
 * scroll-trigger fires, .heading sits at opacity:0 or with a transform that
 * makes it invisible. When keyboard focus lands on such an element (e.g.
 * from the skip link, or Tab from the hamburger), users would see no gold
 * ring because the element itself is invisible. We force opacity, visibility
 * and clip-path back to defaults whenever a heading or focusable paragraph
 * receives focus. Transforms (translate / SplitText character spans) are NOT
 * overridden so animation continues to play out, but the element is paint-
 * visible immediately.
 */
/*
 * Force-show focused content elements inside a horizontal-scroll section.
 *
 * The theme's GSAP timeline initially renders most history-block content with
 * opacity:0 / transform / clip-path, animating in only as the user scrolls.
 * Keyboard users land focus on those elements via the Module 10 Tab interceptor
 * BEFORE the timeline reaches them, so without this override the gold focus
 * ring sits on an invisible target and the user sees nothing.
 *
 * Selector covers:
 *   • any :is(h1, h2, h3, h4, h5, h6)  — whether or not we set tabindex
 *   • any [tabindex="0"]               — generic catch-all for runtime-promoted
 *     p / li / cite / blockquote / figcaption (and any future text tag we
 *     decide to make a keyboard stop).
 *
 * Transforms are NOT overridden — if the GSAP timeline reaches the element
 * naturally afterwards, its in/out translate still plays on a visible element.
 */
#site-main .h-scroll__section :is(h1, h2, h3, h4, h5, h6):focus,
#site-main .h-scroll__section :is(h1, h2, h3, h4, h5, h6):focus-visible,
#site-main .h-scroll__section :is(h1, h2, h3, h4, h5, h6):focus-within,
#site-main .h-scroll__section [tabindex="0"]:focus,
#site-main .h-scroll__section [tabindex="0"]:focus-visible {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
}

/*
 * SplitText commonly wraps every char in <span class="char">. When the parent
 * heading is focused the spans must also be visible so the focus ring lands
 * on rendered text rather than a 0-height collapsed line.
 *
 * Some headings (e.g. footer's "Enquire for more information") use inline
 * <p> + theme-injected <div> children with `opacity: 0` set via inline style.
 * Use a universal descendant selector so any animated child of the focused
 * heading inherits visibility — covers .char / .word / .line / span / p /
 * div / b without enumerating each one.
 */
#site-main .h-scroll__section :is(h1, h2, h3, h4, h5, h6):focus *,
#site-main .h-scroll__section :is(h1, h2, h3, h4, h5, h6):focus-visible *,
#site-main .h-scroll__section :is(h1, h2, h3, h4, h5, h6):focus-within *,
#site-main .h-scroll__section [tabindex="0"]:focus *,
#site-main .h-scroll__section [tabindex="0"]:focus-visible * {
  opacity: 1 !important;
  visibility: visible !important;
}

/*
 * When a focus trap upgrades a non-focusable container with tabindex="-1",
 * suppress its native focus outline (the inner focusable still gets its own).
 * Scoped to elements WITHOUT the h-scroll section class so the rule above wins.
 */
[data-a11y-trap-host]:not(.h-scroll__section):focus {
  outline: none;
}

/*
 * Footer H2 — default-state visibility fix.
 *
 * The theme's GSAP ScrollTrigger does not fire reliably for the footer
 * heading because the footer sits at the document tail and the trigger zone
 * can fall outside the viewport bottom (especially on tall viewports or after
 * a programmatic scroll jump). The heading and its inner <p>/<div> fragments
 * are left at the pre-animation state (opacity:0, GSAP-injected inline
 * styles), leaving "Enquire for more information" invisible on first paint
 * and on normal scroll.
 *
 * Force the final visible state so the heading always renders when the
 * footer is reached, regardless of whether the scroll trigger fired. Inner
 * <p>, <div>, <span>, .char, .word and .line are all covered via the
 * universal descendant selector. Transforms are NOT overridden — if the
 * trigger DOES fire, the in/out translate still plays naturally on top of a
 * visible element.
 *
 * Scoped strictly to #site-footer h2 so no other animated heading is touched.
 */
#site-footer h2,
#site-footer h2.animation-setup,
#site-footer h2 *,
#site-footer h2.animation-setup * {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
}

/* Header accessibility toolbar — SVG icons (CSS mask), inside hamburger container */
.site-header__hamburger-container {
  gap: 0.25rem;
}

.site-header__a11y-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  --a11y-icon-color: #a58029;
  --a11y-icon-color-active: #c9a227;
}

.a11y-tool-btn {
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font: inherit;
  height: 40px;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 40px;
}

.a11y-tool-btn__icon {
  background-color: var(--a11y-icon-color);
  display: block;
  flex-shrink: 0;
  height: 22px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
  width: 22px;
}

.a11y-tool-btn__icon--sun {
  -webkit-mask-image: url('../images/Sun.svg');
  mask-image: url('../images/Sun.svg');
}

.a11y-tool-btn__icon--headphones {
  -webkit-mask-image: url('../images/Headphones.svg');
  mask-image: url('../images/Headphones.svg');
}

.a11y-tool-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
  pointer-events: none;
}

.a11y-tool-btn[aria-pressed="true"] {
  background: transparent;
}

.a11y-tool-btn[aria-pressed="true"] .a11y-tool-btn__icon {
  background-color: var(--a11y-icon-color-active);
}

/*
 * Icon tone follows .light-mode on .site-header__hamburger-container —
 * same class + timing as the hamburger stroke (perfect-scrollbar.js).
 */
.site-header .site-header__hamburger-container.light-mode .site-header__a11y-tools {
  --a11y-icon-color: #ffffff;
  --a11y-icon-color-active: #c9a227;
}

.a11y-tool-btn:focus-visible {
  outline: 3px solid #c9a227;
  outline-offset: 3px;
}

.site-header--minimal {
  position: relative;
  z-index: 10;
  padding: 0.75rem 0;
}

.site-header--minimal .site-header__hamburger-container {
  justify-content: flex-end;
  width: 100%;
}

/*
 * Keyboard-only override for the homepage header.
 *
 * On the homepage the theme keeps .site-header at opacity:0 / translated /
 * pointer-events:none until a GSAP-driven animation adds .animation-complete
 * during scroll. Keyboard users land in the first section (via the skip
 * link), then Tab through the header chrome (logo → Past → Present → Future
 * → hamburger). If the header is still in its hidden pre-animation state,
 * the focus ring lands on invisible nodes, which fails WCAG 2.4.7. While
 * focus is INSIDE the header we force it visible and interactive; once focus
 * leaves, the theme's animation state takes over.
 *
 * Scope is :focus-within only — pure keyboard ergonomics, no change at rest.
 */
.site-header:focus-within {
  pointer-events: auto !important;
  z-index: 1000;
}

.site-header:focus-within .main-header-container,
.site-header:focus-within .main-header-container > *,
.site-header:focus-within .main-header-container .site-header__logo,
.site-header:focus-within .main-header-container .site-header__logo .header-logo,
.site-header:focus-within .main-header-container .site-header__ctas,
.site-header:focus-within .main-header-container .site-header__ctas a,
.site-header:focus-within .main-header-container .site-header__a11y-tools,
.site-header:focus-within .main-header-container .site-header__a11y-tools .a11y-tool-btn,
.site-header:focus-within .main-header-container .site-header__hamburger-container,
.site-header:focus-within .main-header-container .hamburger {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/*
 * Open-menu override — hide the top-bar chrome while the mega menu is up.
 *
 * Two-step problem the fix walks through:
 *
 *   1. The block above force-shows .main-header-container and its children
 *      whenever .site-header has :focus-within. The theme NATIVELY hides
 *      that chrome when body.mobile-menu-open is set — so the menu's full-
 *      screen surface is the only thing on screen. Our force-show rule was
 *      overriding the theme with !important, so on past.html, present.html
 *      etc. the closed-state hamburger and the PAST / PRESENT / FUTURE CTAs
 *      kept rendering on top of the open menu.
 *
 *   2. The :focus-within trigger keeps firing while the menu is open because
 *      both #site-header-desktop-menu and #site-header-mobile-menu are
 *      DESCENDANTS of .site-header on every non-homepage page — focus inside
 *      the menu therefore satisfies .site-header:focus-within. The header's
 *      z-index:1000 lift stays in place (correctly — it keeps the menu above
 *      page content with its own stacking contexts from GSAP transforms).
 *      But the force-show on .main-header-container also stays in place,
 *      which is what makes the chrome bleed through.
 *
 *   3. Symptom that pinpointed it: the overlap disappears the instant the
 *      user opens DevTools, because focus moves out of the page, :focus-
 *      within stops matching, the force-show stops applying, and the theme's
 *      native "hide chrome when menu open" rule reasserts.
 *
 * Fix: while body.mobile-menu-open is set, neutralise the focus-within
 * force-show by reapplying the theme's hidden state with matching specificity
 * and !important. The header's z-index:1000 lift is preserved (so the menu
 * still sits above page content), and the chrome goes back to hidden (so it
 * doesn't render through the menu). Closed-state Tab-through behaviour is
 * untouched — when the menu closes, body.mobile-menu-open is removed,
 * this rule stops matching, and the focus-within force-show takes over
 * exactly as before.
 *
 * Index.html is unaffected: on the homepage the user opens the menu via
 * the intro-block hamburger which lives outside .site-header, so
 * :focus-within wasn't firing on the header in the first place, and the
 * homepage's own theme already hides the chrome via opacity:0 + animation-
 * complete state. This rule is a no-op there.
 */
body.mobile-menu-open .site-header:focus-within .main-header-container,
body.mobile-menu-open .site-header:focus-within .main-header-container > *,
body.mobile-menu-open .site-header:focus-within .main-header-container .site-header__logo,
body.mobile-menu-open .site-header:focus-within .main-header-container .site-header__logo .header-logo,
body.mobile-menu-open .site-header:focus-within .main-header-container .site-header__ctas,
body.mobile-menu-open .site-header:focus-within .main-header-container .site-header__ctas a,
body.mobile-menu-open .site-header:focus-within .main-header-container .site-header__a11y-tools,
body.mobile-menu-open .site-header:focus-within .main-header-container .site-header__a11y-tools .a11y-tool-btn,
body.mobile-menu-open .site-header:focus-within .main-header-container .site-header__hamburger-container,
body.mobile-menu-open .site-header:focus-within .main-header-container .hamburger {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* =====================================================================
   BLOCK B — a11y-focus-last.css
   WCAG 2.4.7 high-specificity overrides. MUST stay at the bottom.
   ===================================================================== */

/*
 * WCAG 2.4.7 Focus Visible — must load AFTER theme-bundle / extracted-inline / block-inline.
 * #site-main provides ID specificity so rules beat chained-class outline resets (!important).
 */

a.visually-hidden-focusable:focus-visible {
  outline: 3px solid #c9a227 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.22) !important;
}

#site-main :is(a, button, input:not([type="hidden"]), textarea, select, summary):focus-visible,
#site-main .btn:focus-visible,
#site-main [role="button"]:focus-visible,
#site-main [role="link"]:focus-visible,
#site-main [role="tab"]:focus-visible,
#site-main [role="menuitem"]:focus-visible,
#site-main [role="radio"]:focus-visible,
#site-main [role="checkbox"]:focus-visible,
#site-main [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 3px solid #c9a227 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.22) !important;
}

/* Lightbox UI is mounted on body (outside #site-main) */
body .glightbox-container :is(button, a):focus-visible {
  outline: 3px solid #c9a227 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.22) !important;
}

@media (forced-colors: active) {
  a.visually-hidden-focusable:focus-visible,
  #site-main :is(a, button, input:not([type="hidden"]), textarea, select, summary):focus-visible,
  #site-main .btn:focus-visible,
  #site-main [role="button"]:focus-visible,
  #site-main [role="link"]:focus-visible,
  #site-main [tabindex]:not([tabindex="-1"]):focus-visible,
  body .glightbox-container :is(button, a):focus-visible {
    outline: 3px solid CanvasText !important;
    box-shadow: none !important;
  }

  #site-main button,
  #site-main a {
    forced-color-adjust: none;
  }
}