/* Amprite bridge.css: WP-only overrides. The ported styles.css is never edited. */

/*
 * The design's .site-header is position:sticky. Inside the Theme Builder
 * template it sits in a stack of Elementor wrappers, and sticky only travels
 * within its parent — a 131px wrapper — so it never stuck. display:contents
 * removes the wrappers from layout so the header sticks against the page,
 * exactly like the static site.
 */
.elementor-location-header,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.elementor-location-header .elementor-widget-wr-header,
.elementor-location-header .elementor-widget-wr-header .elementor-widget-container {
  display: contents;
}

/*
 * In the Elementor editor the hero does not slide under the transparent
 * header the way the front end does, which left the white-on-transparent nav
 * invisible while editing. Solid header surface in the editor only.
 */
body.elementor-editor-active .site-header,
body.e-preview--show-hidden-elements .site-header {
  background: var(--pine) !important;
}

/*
 * The design collapses the desktop nav at 1240px; the editor preview iframe
 * is ~1236px because the panel takes the rest, so editing always showed the
 * mobile drawer instead of the menu. Editor only: keep the desktop nav.
 */
@media ( max-width: 1240px ) {
  body.elementor-editor-active .main-nav,
  body.elementor-editor-active .nav-cta {
    display: flex !important;
  }
  body.elementor-editor-active .nav-toggle {
    display: none !important;
  }
}

/* WP wraps each widget; keep those wrappers out of the flow maths for
   full-bleed sections so band/hero geometry matches the static page. */
[data-elementor-type="wp-page"] .elementor-widget > .elementor-widget-container {
  width: 100%;
}

/*
 * Current-page marker inside the menus. The static site only highlighted the
 * dropdown PARENT; the WP header also marks the page you are on inside the
 * open dropdown and the mobile drawer.
 */
.dropdown a.current {
  color: var(--gold-deep);
  font-weight: 500;
}
.dropdown a.dd-pm.current {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.drawer a.current {
  color: var(--gold);
  font-weight: 500;
}

/*
 * Elementor's frontend reset zeroes figure margins with
 *   .elementor .elementor-widget:not(...):not(...) figure { margin: 0 }
 * which is specific enough (0,4,1) to beat the ported
 *   .tl-item .tl-photo { margin: 16px 0 4px }   (0,2,0)
 * That silently shortened each Our Story photo row by 20px. Restoring the
 * ported value at a specificity that wins, rather than editing styles.css.
 * Only this one figure rule carries a non-zero margin in the ported CSS.
 */
.elementor .elementor-widget .tl-item .tl-photo,
.elementor .elementor-widget:not(.elementor-widget-text-editor) .tl-item figure.tl-photo {
  margin: 16px 0 4px;
}

/* ---------------------------------------------------------------------------
 * Site tools: cookie notice + accessibility panel.
 * New WP-only components, so they live here rather than in the ported
 * styles.css, which stays byte-identical to the static source.
 * ------------------------------------------------------------------------- */

/* --- cookie notice --- */
.ck-wrap { position: fixed; bottom: 18px; z-index: 9998; max-width: 380px; }
.ck-wrap[hidden] { display: none; }
.ck-left   { left: 18px; }
.ck-right  { right: 18px; }
.ck-center { left: 50%; transform: translateX(-50%); }
.ck-card {
  background: var(--pine, #13241b);
  color: #fff;
  border-top: 3px solid var(--gold, #c9a35c);
  padding: 20px 22px 22px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}
.ck-card h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px; line-height: 1.15; margin: 0 0 8px; color: #fff;
}
.ck-card p { font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; color: rgba(255, 255, 255, .86); }
.ck-card a.ck-link { color: var(--gold, #c9a35c); border-bottom: 1px solid rgba(201, 163, 92, .5); }
.ck-actions { display: flex; gap: 10px; }
.ck-actions .btn { cursor: pointer; border: 0; }
.ck-actions .ck-no {
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .38);
}
.ck-actions .ck-no:hover { border-color: var(--gold, #c9a35c); color: var(--gold, #c9a35c); }

/* --- accessibility --- */
.a11y-skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--pine, #13241b); color: #fff; padding: 12px 18px;
}
.a11y-skip:focus { left: 12px; top: 12px; }
.a11y-wrap { position: fixed; bottom: 18px; z-index: 9997; }
.a11y-right { right: 18px; }
.a11y-left  { left: 18px; }
.a11y-btn {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: var(--pine, #13241b); color: var(--gold, #c9a35c);
  border: 1px solid rgba(201, 163, 92, .55);
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.a11y-btn:hover { background: var(--gold, #c9a35c); color: #fff; }
.a11y-panel {
  position: absolute; bottom: 58px; right: 0; width: 232px;
  background: #fff; border: 1px solid rgba(19, 36, 27, .14);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18); padding: 16px;
}
.a11y-left .a11y-panel { right: auto; left: 0; }
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px; margin: 0 0 10px; color: var(--pine, #13241b);
}
.a11y-panel button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid rgba(19, 36, 27, .16);
  padding: 9px 12px; margin-bottom: 7px; font-size: 14px; color: var(--pine, #13241b);
}
.a11y-panel button:hover { border-color: var(--gold, #c9a35c); }
.a11y-panel button[aria-pressed="true"] {
  background: var(--pine, #13241b); color: #fff; border-color: var(--pine, #13241b);
}
.a11y-panel .a11y-reset { margin-top: 4px; margin-bottom: 0; text-align: center; }

/* visitor preferences, applied to the document */
html.a11y-big { font-size: 118%; }
html.a11y-contrast body { background: #fff; }
html.a11y-contrast body, html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast span { color: #111 !important; }
html.a11y-contrast .band, html.a11y-contrast section { background-image: none !important; }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* keyboard focus was invisible on the ported styles; make it explicit */


@media (max-width: 620px) {
  .ck-wrap { left: 12px; right: 12px; bottom: 12px; max-width: none; transform: none; }
  .a11y-wrap { bottom: 12px; }
  .a11y-right { right: 12px; }
  .a11y-left { left: 12px; }
  /* the full-width card would otherwise sit on top of the launcher */
  html.ck-open .a11y-wrap { bottom: calc(var(--ck-h, 170px) + 24px); }
}

/* Launcher for the accessibility popup. It is an Elementor button, so only the
   fixed placement and round shape are set here; colours stay editable. */
.elementor-widget-button .elementor-button.a11y-launch,
a.a11y-launch, button.a11y-launch {
  position: fixed; right: 18px; bottom: 18px; z-index: 9997;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}
.a11y-launch .elementor-button-content-wrapper { justify-content: center; }
.a11y-launch .elementor-button-icon { margin: 0; font-size: 20px; }
.a11y-launch .elementor-button-text { display: none; }
/* the popup's option buttons read as toggles */
.elementor-button.is-on { filter: brightness(.82); }
@media (max-width: 620px) {
  .elementor-widget-button .elementor-button.a11y-launch,
  a.a11y-launch, button.a11y-launch { right: 12px; bottom: 12px; }
  html.ck-open .elementor-widget-button .elementor-button.a11y-launch,
  html.ck-open a.a11y-launch, html.ck-open button.a11y-launch {
    bottom: calc(var(--ck-h, 170px) + 24px);
  }
}

/* ---------------------------------------------------------------------------
 * Floating Request Service pill vs the accessibility button.
 *
 * The accessibility widget renders inside a shadow root and re-applies its own
 * inline position on every render, so it cannot be moved from here, from the
 * plugin's Exact position fields (those are corner offsets and pushed it
 * off-screen), or by injected CSS. The pill, however, is ours.
 *
 * Measured: the accessibility button occupies 24-68px from the bottom, so the
 * pill sits at 82px, clearing it by 14px and stacking the two neatly.
 * ------------------------------------------------------------------------- */
.float-pill { bottom: 82px !important; }

@media (max-width: 620px) {
  /* on mobile the cookie card takes the bottom strip, so lift the pill clear
     of both it and the accessibility button */
  html.ck-open .float-pill { bottom: calc(var(--ck-h, 170px) + 84px) !important; }
}

/* Hero slide copy: the slide texts are position:absolute inside .hero-copy, so
   a long headline overflows the box downward and eats the design's ~150px gap
   between the CTAs and the quote band (measured 54px at 1280). Reserving the
   height of the tallest slide restores the spacing and stops the overflow. */
@media (min-width: 769px) {
  .hero .hero-copy { min-height: 430px; }
}

/* Ken Burns zoom, gated. Chrome computes LCP size from the element's own
   visual rect and ignores the hero's overflow clipping, so the 9-second
   scale(1.05) kept re-emitting ever-larger LCP entries: measured 3.8s, 5.6s,
   5.9s, 8.6s, 9.9s across runs, always capped near the zoom's end. The zoom
   now starts with the rotation guard (first interaction), which visitors
   perceive identically since it fires on their first mouse move or touch. */
.hero[data-slider]:not(.kb-live) .hero-slide.on .hs-bg { transform: none; }

/* Hero slide backgrounds are real <img> elements now (predictable image LCP,
   automatic srcset + lazy slides); this reproduces background-size:cover. */
.hero-slide img.hs-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}