/* OHPCA migration — design fixes (Phase 4).
   Layered AFTER the ported Webflow CSS so the parity baseline stays pristine and
   every intentional change lives in one reviewable place. */

/* ── Stray horizontal overflow ─────────────────────────────────────────────
   The gallery strip (.gallery-wrapper is 2000px) is clipped by .gallery-section
   (overflow:hidden in the ported CSS). Keep page-level overflow contained too. */
html, body { overflow-x: hidden; }

/* ── Home photo-gallery marquee ────────────────────────────────────────────
   The original drifts the photo strip leftward (~30px/s, infinite) via Webflow
   IX2 — stripped in the port, so reproduced here in pure CSS. The container's two
   DISTINCT 2000px wrappers (a 12-photo strip) are cloned once at build time
   (extract-fragments.mjs), giving [set][set]. Translating by exactly one set
   width — 2×2000 + 2×30px gaps = 4060px — lands the clone where the original
   began, so the reset is seamless. 4060px ÷ 135s ≈ 30px/s (matches the original). */
@keyframes ohpca-gallery-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-4060px); }
}
.gallery-container {
  overflow: visible;
  animation: ohpca-gallery-marquee 135s linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-container { animation: none; }
}

/* ── Scroll-reveal entrance animations ─────────────────────────────────────
   The original fades + slides content up (opacity 0→1, translateY 32px→0) as it
   scrolls into view via IX2. Reproduced natively: <Interactions/> adds --armed on
   mount (instant hide, NO transition → no flash) then --in when the element enters
   the viewport (transitions in). The hidden state is applied ONLY by JS, so with
   no JS / no IntersectionObserver / reduced-motion the content is always visible. */
.wf-reveal--armed { opacity: 0; transform: translateY(32px); }
.wf-reveal--armed.wf-reveal--in {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}

/* ── Training page: tighten the empty gap under the nav ────────────────────
   The top pricing-CTA block stacked 65px margin + 55px padding (~171px gap,
   felt sparse). Scoped to the training page's own section so the conference
   pricing block is unaffected. */
.pricing-cta-on-p-page .pricing-cta.on-pricing { margin-top: 18px; }
.pricing-cta-on-p-page .pricing-head-cta { padding-top: 22px; }

/* ── Sponsor logo row: standardize wildly different logo sizes ──────────────
   Logos ranged 93–200px wide / 60–75px tall in equal boxes, reading as a
   mismatched collage. Cap every logo to a uniform height with consistent
   breathing room so they read as one unified row. */
[class*="rt-clients-icons"] img,
[class*="rt-about-one-clients"] img {
  max-height: 50px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  margin-left: 18px;
  margin-right: 18px;
}

/* ── Hero contrast safety ──────────────────────────────────────────────────
   The hero scrim was near-transparent at the top (~10% black), so white
   headline text could lose contrast over a lighter photo. Strengthen the
   gradient and add a soft text-shadow for robustness on any image. */
.waves-gradient-hero-5 {
  background-image: linear-gradient(rgba(19,19,19,.30) 0%, rgba(19,19,19,.60) 55%, rgba(19,19,19,.82) 100%);
}
.waves-title-wrap-hero-5 :is(h1, h2, .h1, .h2, p) {
  text-shadow: 0 1px 10px rgba(0,0,0,.32);
}

/* ── Accessible green text (WCAG AA contrast) ──────────────────────────────
   The brand sage (#8a9a5e / #b1bf84) is ~2.5–3.05:1 on light backgrounds — below
   the 4.5:1 AA threshold for small text. Darken it to an accessible olive-sage
   ONLY where it's used as small text; decorative fills, borders, dots, and large
   display headings keep the lighter brand sage. Both the contact and board
   sections are Webflow code-embeds that define their own color vars (with
   !important rules), so we redefine the text/CTA greens at the variable level —
   decorative light fills (mist/light) keep the brand tone. */
:root {                         /* contact section embed */
  --forest: #5f6c34 !important;      /* green text + CTA button fills (white text) */
  --forest-deep: #5f6c34 !important;
  --sage: #5f6c34 !important;
  --warmth-deep: #7a4f24 !important; /* tan tag text */
}
.lc-widget { --c-green-deep: #5f6c34 !important; }  /* board section embed */

/* ── Skip-to-content link + visible focus (a11y) ───────────────────────────
   Hidden until keyboard-focused; first focusable element on every page. */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 10000;
  background: #3D4248; color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px;
  font-family: 'Uncutsans Variable', sans-serif; font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #5f6c34; outline-offset: 2px;
}

/* (further design fixes appended here as they're identified) */
