/* homepage.css — front-page-specific styles for OSTA 2026 */

/* ---- HERO ---- */

.hero:not(.wp-block-cover) {
  position: relative;
  background-image: url('../images/home-hero.jpg?v=20260907b');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: var(--color-surface-dark);
  display: flex;
  align-items: center;
  /* max(): the hero is never shorter than this token-derived floor
     (header height + 3 * --space-16 ≈ a tall single screen section),
     even on a short viewport where 70vh alone could shrink well below
     that. Both operands are built from existing tokens only — no new
     magic number introduced. No padding on this element: its own
     background carries the cover image, per the build rule that
     section padding never lands on the cover-image element itself. */
  min-height: max(calc(var(--header-height) + (var(--space-16) * 3)), 520px);
}

.wp-block-cover.hero {
  position: relative;
  background-color: var(--color-surface-dark);
  min-height: max(calc(var(--header-height) + (var(--space-16) * 3)), 520px);
}

.wp-block-cover.hero .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center center;
}

body.home .homepage-landing .wp-block-cover.hero.is-style-osta-hero-photo .wp-block-cover__background {
  background: linear-gradient(
    90deg,
    rgba(19, 31, 79, 0.72) 0,
    rgba(19, 31, 79, 0.68) calc(var(--space-3) + var(--measure-max)),
    rgba(19, 31, 79, 0) 100%
  ) !important;
  opacity: 1 !important;
}

body.home .homepage-landing .wp-block-cover.hero.is-style-osta-hero-photo .wp-block-cover__inner-container {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--header-height) + var(--osta-u-banner-height, 0px) + var(--space-8));
  padding-bottom: var(--space-10);
  padding-inline: var(--space-3);
  max-width: min(var(--measure-max), 47.5rem);
  margin-inline-start: var(--space-3);
  margin-inline-end: auto;
  width: 100%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 5 — this used to be a percentage-based gradient
     (0.6 fading straight to 0.15 across the full width), which measured
     as low as 1.66:1 worst case with white display text over it once
     the text column reached deep into the fade. Same bug, same fix the
     About/Resources hero already applied (.about-hero__overlay /
     .resources-hero__overlay, inner-pages.css): hold 0.6 flat through
     the text column's own right edge (space-3 + measure-max = 744px)
     and only fade to 0.15 beyond it, out past --container-max, where
     text never sits at any viewport width. Re-measured after porting
     this: 5.98–6.53:1 across mobile/tablet/desktop/wide/ultrawide, same
     numbers as the pages this was copied from — clear of the 4.5:1 AA
     floor with margin. Raw rgba is the one place that's acceptable — no
     token exists for scrim opacity.

     PASS "New hero: text over image" — the supplied design asked for a
     navy-tinted scrim rather than a neutral black one. The HUE changed;
     the contrast discipline above did not.

     PASS "Lighten the blue overlay" — the first pass at this set the flat
     portion to 0.90, which was needlessly dark: worked out against the
     worst realistic case (a pure white pixel directly behind the text,
     the brightest a photo can ever get), 0.90 measures 11.7:1 — nearly
     double the margin this project has ever required anywhere else.
     0.70 measures 5.97:1 against that same pure-white worst case,
     matching the black-scrim precedent's own measured floor (5.98:1)
     almost exactly, so this is "as light as the site's existing standard
     allows," not a guess. The fade stop drops from 0.55 to 0.35 in the
     same proportion — it sits out past the text column's own right edge
     (space-3 + measure-max), where no text has ever rendered at any
     viewport width, so it carries no contrast obligation and exists only
     to taper the tint toward the edge.

     Hold the AA floor through the text column, then drop to 0 so the
     meeting photo and badge are not under a second navy film. */
  background:
    linear-gradient(
      90deg,
      rgba(19, 31, 79, 0.72) 0,
      rgba(19, 31, 79, 0.68) calc(var(--space-3) + var(--measure-max)),
      rgba(19, 31, 79, 0) 100%
    );
}

.hero__inner {
  position: relative;
  z-index: 1;
  /* Include optional OSTA-U top banner height (0 when absent). */
  padding-top: calc(var(--header-height) + var(--osta-u-banner-height, 0px) + var(--space-8));
  padding-bottom: var(--space-10);
  /* No max-width/margin-inline override here any more: .hero__inner
     also carries .container, and this element must resolve to exactly
     the same left edge as .site-header__inner and the footer
     .container — max-width: var(--container-max), margin-inline: auto,
     padding-inline: var(--space-3), all inherited from .container,
     unmodified. The text block below is capped and left-aligned
     instead, inside this now-centred container. */
}

.hero__eyebrow,
.hero__heading,
.hero__body,
.hero .hero__actions,
.hero__trust {
  /* The left-aligned text block, capped at measure-max, inside the
     centred container — this is what Pass 12's Fix 4b actually meant:
     the TEXT narrower and left-aligned, not the container itself
     shifted off-centre. Scoped .hero .hero__actions so proof/final
     CTA rows (also .hero__actions) are not left-pinned. */
  max-width: min(var(--measure-max), 47.5rem);
  margin-inline-start: 0;
  margin-inline-end: auto;
}

.hero__eyebrow,
.hero__heading,
.hero__body {
  /* Pass 33 self-check: a single long unbroken run of characters in
     one of these three ACF fields (found live — the current hero_
     heading/hero_eyebrow/hero_body values are placeholder text with no
     spaces at all) was forcing max-width above to fail and widening
     .hero, main, and the whole document past the viewport — at 390px
     this pushed the effective layout width out to 857px, not a mobile
     layout at all. This is the real fix for that class of bug (any
     future long word/URL in real copy has the same failure mode), not
     a workaround: normal copy with regular spaces was never affected
     and reads identically with this rule in place. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* PASS "New hero: text over image" — the eyebrow is now a badge pill with
   a green status dot, per the supplied design. Still the same ACF field
   and the same element; only its presentation changed. inline-flex on a
   <p> so the pill hugs its text instead of spanning the measure. */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-bold);
  color: var(--color-surface);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  /* 8px / 16px — the design's own 6px/16px, snapped to the space scale. */
  padding: var(--space-1) var(--space-2);
  /* Overrides the shared max-width rule above: a pill is sized by its own
     content, and measure-max would stretch it across the column. */
  max-width: 100%;
  margin-bottom: var(--space-3);
}

.hero__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.hero__eyebrow-dot {
  /* --color-accent is a SURFACE token (see tokens.css) — this is a
     decorative dot, not text, which is exactly the permitted use. */
  flex: 0 0 auto;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---- Trust indicators ---- */

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  /* It is a <ul>: strip the list affordances, keep the semantics. */
  list-style: none;
  padding-inline-start: 0;
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-surface);
}

.hero__trust-item::before {
  content: "";
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero__trust a.hero__trust-item {
  text-decoration: none;
  color: var(--color-surface);
  background: transparent;
  border: none;
  padding: 0;
  min-height: 0;
  min-width: 0;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

.hero__trust-check {
  /* --color-accent is flagged in tokens.css as "SURFACES ONLY, never text
     on light" — that warning is about LIGHT backgrounds, where it measures
     2.10:1. Here it sits on the navy scrim: #8AC34E on rgba(19,31,79,0.90)
     over a photo measures ~7.6:1, well clear of AA. It is also
     aria-hidden decoration, not content. */
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}

.hero__heading {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: var(--weight-bold);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-surface);
  margin: 0 0 var(--space-3);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.hero__body {
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  color: var(--color-surface);
  margin: 0 0 var(--space-5);
  max-width: 42.5rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* .hero__actions flex / equal-height / mobile stack live in global.css
   so ORS library and other non-front heroes share them. */

@media (max-width: 767px) {
  .hero:not(.wp-block-cover),
  .wp-block-cover.hero {
    min-height: max(calc(var(--header-height) + (var(--space-16) * 2)), 420px);
    background-position: center center;
  }

  .hero__overlay {
    background: rgba(19, 31, 79, 0.78);
  }

  body.home .homepage-landing .wp-block-cover.hero.is-style-osta-hero-photo .wp-block-cover__background {
    background: rgba(19, 31, 79, 0.78) !important;
  }

  .hero__inner,
  body.home .homepage-landing .wp-block-cover.hero.is-style-osta-hero-photo .wp-block-cover__inner-container {
    padding-bottom: var(--space-12);
  }

  /* The header's mobile menu is now a floating panel, not a second row
     the header itself grows into (see global.css's HEADER section) — the
     bar stays single-row at every width, so this no longer needs the
     doubled-height math the old wrapping header required. Same
     calc(header-height + space-6) as desktop, just picked up from the
     shared rule above rather than repeated here. */
}

/* ---- TOPIC PILLS (PASS "Corrective: homepage topics, type-ahead
   suggestions, empty topic filter, results indicator") ----
   Compact pill row directly below the hero — REPLACES the six large
   .card-grid boxes the prior pass put here, which dominated the top of
   the page and duplicated the pill row the "Search Our Knowledge Base"
   section already had further down (now removed — see topic-boxes.php
   and answers-search.php's own docblocks). This is deliberately the
   SAME visual treatment as that removed .homepage-kb-search__pill,
   copied rather than shared via a class rename, since the two sections
   are independent and a shared class would couple them for no reason. */

.homepage-topic-boxes {
  background: var(--color-surface-soft);
}

.homepage-topic-boxes__inner {
  text-align: center;
}

.homepage-topic-boxes__heading {
  max-width: var(--measure-max);
  margin-inline: auto;
}

.homepage-topic-boxes__intro {
  max-width: var(--measure-max);
  margin: var(--space-2) auto 0;
  color: var(--color-muted);
}

.homepage-topic-boxes__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.homepage-topic-boxes__pill {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  background: var(--color-surface);
  /* PASS "Fix the accessibility failures found by the component
     inventory", item 4 — border was --color-border (1.53:1 on white,
     under the 3:1 floor). Same fix as the global input/select/textarea
     border, copied from .contact-form input/textarea. */
  border: 1px solid var(--color-muted);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  /* Item 2 — was --text-small (16px). */
  font-size: var(--text-body);
  border-radius: 999px;
  text-decoration: none;
}

.homepage-topic-boxes__pill:hover,
.homepage-topic-boxes__pill:focus-visible {
  background: var(--color-brand-wash);
}

/* ---- EVENTS (Pass 32) ---- */

.homepage-events__intro {
  max-width: var(--measure-max);
  margin-bottom: var(--space-6);
}

.homepage-events__date {
  color: var(--color-muted);
  font-size: var(--text-small);
  margin-bottom: var(--space-1);
}

.homepage-events__scope {
  color: var(--color-muted);
  font-size: var(--text-small);
}

.homepage-events__cta {
  margin-top: var(--space-6);
}

/* ==========================================================================
   PASS 48 — five sections below the events block: Validation, Solution,
   How It Works, Retaliation Shield, Membership. Structure/layout ported
   from the Tailwind mockup ("Osta Hero Code.txt"); every rule below is
   written fresh against tokens.css — no Tailwind, no CDN, no icon font.
   All body copy is --text-body (18px), never the mockup's 16px. Green
   (--color-accent) is used only as a surface (the icon-circle backer
   below) — never as text or a checkmark colour anywhere in this file;
   checkmarks and the "Most Popular" badge are navy, per this pass's own
   correction to the mockup.

   PASS 49: Membership's own rules moved out to membership-section.css —
   the About page reuses the same component and shouldn't need to load
   the rest of this homepage-only file to get it. Everything else below
   stays homepage-only.
   ========================================================================== */

/* Every ACF-sourced text element across these four sections gets this —
   same fix, same reason, as .hero__eyebrow/__heading/__body above (Pass
   33) and .blog-card__excerpt (blog.css, Pass 45): a single long
   unbroken run of characters in any of these fields forces the
   card/column/document past the viewport at narrow widths otherwise.
   .card__heading/.card__body (global.css) already carry this;
   everything else new in this pass needs its own rule. The membership
   section's own equivalent rule now lives in membership-section.css —
   see that file's own docblock (Pass 49 extracted it out of this one so
   the About page could reuse it without pulling in homepage.css). */
.homepage-validation__heading,
.homepage-validation__closing,
.homepage-validation__card .card__heading,
.homepage-solution__heading,
.homepage-solution__copy p,
.homepage-how__heading,
.homepage-how__label,
.homepage-how__body,
.homepage-retaliation__heading,
.homepage-retaliation__body {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---- VALIDATION ---- */

/* Pass 58's original rule here pulled this section up with a negative
   margin-top (calc(-1 * var(--space-6))) to overlap the hero, sized on
   the assumption that .section's own padding-block was 96px desktop /
   64px mobile — enough of a buffer that the overlap only ate into the
   hero's own empty padding, never its real content. Once .section's
   padding-block was reduced (see global.css's own comment on that
   rule), mobile's padding-block (48px) became numerically EQUAL to this
   overlap (48px), cancelling it exactly: the heading ended up sitting
   flush against the hero photo with zero gap — the literal "sections
   touching" bug reported live, not a hypothetical. Rather than re-tune
   the overlap math to fit whatever .section's padding happens to be
   today (fragile — it'll drift out of sync again the next time that
   token changes), this section now uses NO special-case margin at all:
   it gets exactly the same top/bottom spacing as every other section on
   the page, from .section alone, like the request asked for. */

.homepage-validation__heading {
  text-align: center;
  max-width: var(--measure-max);
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.homepage-validation__card {
  text-align: center;
  /* PASS 58 visual direction: generous radius (16–24px) and a soft,
     wide shadow — scoped to this homepage card, not global.css's base
     .card (which every portal/data card sitewide also uses and was
     never asked to change). */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.homepage-validation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  /* Surface use of the accent colour — a decorative circle behind the
     icon, never text. The icon itself sits in --color-accent-on, the
     token built specifically for text/graphics placed on accent. */
  background: var(--color-accent);
  color: var(--color-accent-on);
  margin-bottom: var(--space-3);
}

.homepage-validation__icon--alert {
  background: var(--color-alert-wash);
  color: var(--color-alert);
}

.homepage-validation__icon--warning {
  background: var(--color-warning-wash);
  color: var(--color-warning);
}

.homepage-validation__icon--info {
  background: var(--color-brand-wash);
  color: var(--color-brand);
}

.homepage-validation__icon svg {
  width: 28px;
  height: 28px;
}

.homepage-validation__card--alert::before,
.homepage-validation__card--warning::before,
.homepage-validation__card--info::before {
  content: "";
  display: inline-block;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  margin-bottom: var(--space-3);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}

.homepage-validation__card--alert::before {
  background-color: var(--color-alert-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3211A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 7h8m0 0v8m0-8l-8 8-4-4-6 6'/%3E%3C/svg%3E");
}

.homepage-validation__card--warning::before {
  background-color: var(--color-warning-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A4E00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'/%3E%3C/svg%3E");
}

.homepage-validation__card--info::before {
  background-color: var(--color-brand-wash);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23263279' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E");
}

.homepage-validation__quote {
  max-width: none;
}

.homepage-pillar-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.homepage-pillar-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 0 var(--space-3);
  border-radius: 50%;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.homepage-pillar-card__badge--navy {
  background: var(--color-brand);
  color: var(--color-surface);
}

.homepage-pillar-card__badge--green {
  background: var(--color-accent);
  color: var(--color-accent-on);
}

.homepage-pillar-card__badge--wash {
  background: var(--color-brand-wash);
  color: var(--color-brand);
}

.homepage-pillar-card__foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border, #E6E8EF);
  font-size: var(--text-small, 16px);
  font-weight: var(--weight-semibold);
  color: var(--color-muted, #5E6475);
}

.homepage-validation__closing {
  text-align: center;
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  margin-top: var(--space-6);
}

/* ---- SOLUTION ---- */

.homepage-solution__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .homepage-solution__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.homepage-solution__heading {
  margin: 0;
}

.homepage-solution__copy p {
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-body);
}

.homepage-solution__copy p + p {
  margin-top: var(--space-3);
}

/* Stitch: Knowledge Is Protection — centered intro + full-column quote band. */
.homepage-landing .homepage-solution__intro {
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
}

.homepage-landing .homepage-solution__intro .is-style-osta-eyebrow {
  color: var(--color-accent-ink, #4E7328);
}

.homepage-landing .homepage-solution__heading {
  text-align: center;
  color: var(--color-brand);
  margin-block: var(--space-2) var(--space-3);
}

.homepage-landing .homepage-solution__copy {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

.homepage-landing .homepage-solution__copy p {
  text-align: center;
}

/* Both Home quote bands: navy takeaway, space above and below. */
.homepage-landing .homepage-solution__takeaway,
.homepage-landing .homepage-validation__quote,
.homepage-landing .homepage-validation .wp-block-quote {
  background: var(--color-brand, #263279);
  color: #fff;
  border: 0;
  border-left: 0;
  border-radius: var(--radius-lg, 20px);
  padding: var(--space-5) var(--space-6);
  margin-block: var(--space-5);
  margin-inline: auto;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.homepage-landing .homepage-solution__takeaway p,
.homepage-landing .homepage-validation__quote p,
.homepage-landing .homepage-validation .wp-block-quote p {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: #fff;
}

.homepage-landing .homepage-validation .wp-block-quote cite {
  display: block;
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-small, 16px);
  font-style: normal;
  font-weight: 600;
}

/* ---- KNOWLEDGE BASE SEARCH (Pass 58) ----
   Light grey, centred, between the dark Solution section above and the
   light How It Works section below — the one deliberately light band at
   this point in an otherwise dark/light/dark rhythm. Search box is a
   plain GET form to the real Get Answers search (search-answers.php,
   Pass 55); the topic pills below it are real osta_answer_topic terms
   with at least one published answer, gathered in the template part
   itself (see that file's own docblock for why that's not ACF). */

.homepage-kb-search {
  background: var(--color-surface-soft);
}

.homepage-kb-search__inner {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.homepage-kb-search__heading {
  color: var(--color-brand);
  margin: 0 0 var(--space-6);
  overflow-wrap: break-word;
  word-break: break-word;
}

.homepage-kb-search__form {
  display: flex;
  gap: var(--space-2);
  max-width: 640px;
  margin-inline: auto;
}

.homepage-kb-search__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.homepage-kb-search__icon {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--color-muted);
  pointer-events: none;
}

.homepage-kb-search__field input {
  padding-left: calc(var(--space-2) * 2 + 22px);
  border-radius: var(--radius-lg);
}

.homepage-kb-search__submit {
  flex-shrink: 0;
  border-radius: var(--radius-button);
}

@media (max-width: 600px) {
  .homepage-kb-search__form {
    flex-direction: column;
  }
  .homepage-kb-search__submit {
    width: 100%;
  }
}

/* ---- HOW IT WORKS (Stitch: Simple & Fast + circular step badges) ---- */

.homepage-landing .homepage-how {
  background: var(--color-brand-wash, #EDEFF7);
}

.homepage-how__eyebrow {
  text-align: center;
  color: var(--color-accent-ink, #4E7328) !important;
  margin-bottom: var(--space-2);
}

.homepage-how__heading {
  text-align: center;
  max-width: var(--measure-max);
  margin-inline: auto;
  margin-bottom: var(--space-6);
  color: var(--color-brand);
}

.homepage-how__steps {
  display: grid;
  gap: var(--space-4);
  text-align: center;
}

@media (min-width: 768px) {
  .homepage-how__steps {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.homepage-how__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border-soft, #E6E8EF);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
}

.homepage-how__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  min-width: 3.5rem;
  min-height: 3.5rem;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-surface);
  font-weight: var(--weight-bold);
  font-size: var(--text-h3, 26px);
  line-height: 1;
  margin: 0 0 var(--space-3);
}

.homepage-how__number--navy {
  background: var(--color-brand);
  color: var(--color-surface);
}

.homepage-how__number--green {
  background: var(--color-accent);
  color: var(--color-accent-on);
}

.homepage-how__label {
  margin: 0 0 var(--space-2);
  color: var(--color-brand);
}

.homepage-how__body {
  color: var(--color-body);
  margin: 0;
}


/* ---- RETALIATION SHIELD ---- */

.homepage-retaliation__container {
  max-width: 800px;
}

.homepage-retaliation__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* PASS 58 visual direction: bumped from --radius-md/--shadow-card to
     the redesign's own generous-radius/soft-shadow pair, same as the
     validation and membership cards. */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: flex;
  overflow: hidden;
}

.homepage-retaliation__bar {
  width: 8px;
  flex-shrink: 0;
  /* Surface use of accent — a side bar, never text. */
  background: var(--color-accent);
}

.homepage-retaliation__content {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .homepage-retaliation__content {
    flex-direction: row;
    align-items: center;
  }
}

.homepage-retaliation__media {
  flex-shrink: 0;
  width: 96px;
}

.homepage-retaliation__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.homepage-retaliation__heading {
  margin-bottom: var(--space-1);
}

.homepage-retaliation__body {
  color: var(--color-body);
}

/* Membership section CSS moved to assets/css/membership-section.css in
   Pass 49 — see that file. */

/* Gutenberg front page only (templates/front-page.html → .homepage-landing).
   homepage.css loads only on is_front_page() — these rules never hit other pages. */

.homepage-landing .hero.wp-block-cover,
.homepage-landing .hero.wp-block-group {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.homepage-landing .hero.wp-block-group > .hero__overlay.wp-block-group {
  margin: 0;
  padding: 0;
  min-height: 0;
}

.homepage-landing .hero .hero__trust.wp-block-group,
.homepage-landing .hero .hero__actions.wp-block-group,
.homepage-landing .hero .hero__actions.wp-block-buttons,
.homepage-landing .homepage-landing__proof .hero__actions.wp-block-group,
.homepage-landing .homepage-landing__proof .hero__actions.wp-block-buttons,
.homepage-landing .homepage-landing__final .hero__actions.wp-block-group,
.homepage-landing .homepage-landing__final .hero__actions.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.homepage-landing .hero .hero__actions.wp-block-group > *,
.homepage-landing .hero .hero__actions.wp-block-buttons > *,
.homepage-landing .homepage-landing__proof .hero__actions.wp-block-group > *,
.homepage-landing .homepage-landing__proof .hero__actions.wp-block-buttons > *,
.homepage-landing .homepage-landing__final .hero__actions.wp-block-group > *,
.homepage-landing .homepage-landing__final .hero__actions.wp-block-buttons > * {
  margin-block: 0;
}

.homepage-landing .hero .hero__actions .btn,
.homepage-landing .hero .hero__actions .wp-block-button__link,
.homepage-landing .homepage-landing__proof .hero__actions .btn,
.homepage-landing .homepage-landing__proof .hero__actions .wp-block-button__link,
.homepage-landing .homepage-landing__final .hero__actions .btn,
.homepage-landing .homepage-landing__final .hero__actions .wp-block-button__link {
  flex: 0 1 auto;
  text-align: center;
}

.homepage-landing .hero .wp-block-button.is-style-outline .wp-block-button__link,
.homepage-landing .homepage-landing__proof .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--color-surface);
  color: var(--color-surface);
}

.homepage-landing .homepage-landing__final .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--color-brand);
  color: var(--color-brand);
}

@media (max-width: 767px) {
  .homepage-landing .hero .hero__actions.wp-block-group,
  .homepage-landing .hero .hero__actions.wp-block-buttons,
  .homepage-landing .homepage-landing__proof .hero__actions.wp-block-group,
  .homepage-landing .homepage-landing__proof .hero__actions.wp-block-buttons,
  .homepage-landing .homepage-landing__final .hero__actions.wp-block-group,
  .homepage-landing .homepage-landing__final .hero__actions.wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .homepage-landing .hero .hero__actions .btn,
  .homepage-landing .hero .hero__actions .wp-block-button,
  .homepage-landing .hero .hero__actions .wp-block-button__link,
  .homepage-landing .homepage-landing__proof .hero__actions .btn,
  .homepage-landing .homepage-landing__proof .hero__actions .wp-block-button,
  .homepage-landing .homepage-landing__proof .hero__actions .wp-block-button__link,
  .homepage-landing .homepage-landing__final .hero__actions .btn,
  .homepage-landing .homepage-landing__final .hero__actions .wp-block-button,
  .homepage-landing .homepage-landing__final .hero__actions .wp-block-button__link {
    width: 100%;
  }
}

.homepage-landing .hero .hero__trust-item {
  margin: 0;
}

body.home .homepage-landing .homepage-how .homepage-how__steps.wp-block-columns.is-layout-flex,
.homepage-landing .homepage-how .homepage-how__steps.wp-block-columns {
  display: grid;
  gap: var(--space-6);
  text-align: center;
}

@media (min-width: 768px) {
  body.home .homepage-landing .homepage-how .homepage-how__steps.wp-block-columns.is-layout-flex,
  .homepage-landing .homepage-how .homepage-how__steps.wp-block-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.homepage-landing .homepage-how .homepage-how__steps .wp-block-column,
.homepage-landing .homepage-validation .card-grid .wp-block-column {
  margin: 0;
}

body.home .homepage-landing .homepage-validation .card-grid.wp-block-columns.is-layout-flex,
.homepage-landing .homepage-validation .card-grid.wp-block-columns {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  body.home .homepage-landing .homepage-validation .card-grid.wp-block-columns.is-layout-flex,
  .homepage-landing .homepage-validation .card-grid.wp-block-columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.homepage-landing .homepage-solution__grid.wp-block-group {
  display: grid;
}

.homepage-landing .homepage-retaliation__bar.wp-block-group {
  margin: 0;
  padding: 0;
  min-height: 0;
}

.homepage-landing .homepage-landing__pillars {
  background: var(--color-surface-soft);
  margin-block-start: var(--space-6);
}

body.home .homepage-landing .membership-cards.section,
body.home .homepage-landing .homepage-solution.section {
  position: relative;
  isolation: isolate;
  background-color: var(--color-surface);
}

body.home .homepage-landing .membership-cards.section::before,
body.home .homepage-landing .homepage-solution.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.12;
}

body.home .homepage-landing .membership-cards.section::before {
  background-image: url("../images/oregon-marina-community.jpg");
}

body.home .homepage-landing .homepage-solution.section::before {
  background-image: url("../images/oregon-park-community.jpg");
}

body.home .homepage-landing .homepage-landing__pillars .wp-block-columns.is-layout-flex,
body.home .homepage-landing .membership-cards .wp-block-columns.is-layout-flex,
.homepage-landing .homepage-landing__pillars .wp-block-columns,
.homepage-landing .membership-cards .wp-block-columns {
  display: grid;
  gap: var(--space-6);
  align-items: stretch;
}

@media (min-width: 768px) {
  body.home .homepage-landing .homepage-landing__pillars .wp-block-columns.is-layout-flex,
  .homepage-landing .homepage-landing__pillars .wp-block-columns {
    grid-template-columns: repeat(3, 1fr);
  }

  body.home .homepage-landing .membership-cards .wp-block-columns.is-layout-flex,
  .homepage-landing .membership-cards .wp-block-columns {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* What Every Member Receives — equal-height cards + multicolor icon wells. */
.homepage-landing .membership-receives {
  margin-block-start: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface-soft, #f7f9ff);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg, 20px);
}

.homepage-landing .membership-receives__heading {
  text-align: center;
  margin: 0 0 var(--space-6);
  color: var(--color-brand);
}

.homepage-landing .membership-receives__grid > .wp-block-column,
.homepage-landing .membership-receives__grid > .wp-block-column > .membership-receives__card {
  height: 100%;
}

.homepage-landing .membership-receives__card.wp-block-group {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.homepage-landing .membership-receives__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md, 12px);
  margin: 0 0 var(--space-3);
  flex-shrink: 0;
}

.homepage-landing .membership-receives__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.homepage-landing .membership-receives__icon--priority {
  background: #dbe4ff;
  color: var(--color-brand, #1e2f72);
}

.homepage-landing .membership-receives__icon--newsletter {
  background: #e4f3d4;
  color: var(--color-accent-ink, #4e7328);
}

.homepage-landing .membership-receives__icon--tools {
  background: #fbf3e0;
  color: #7a4e00;
}

.homepage-landing .membership-receives__icon--decal {
  background: #efe8fb;
  color: #5b3d8a;
}

.homepage-landing .membership-receives__card--priority::before,
.homepage-landing .membership-receives__card--newsletter::before,
.homepage-landing .membership-receives__card--tools::before,
.homepage-landing .membership-receives__card--decal::before {
  content: "";
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md, 12px);
  margin: 0 0 var(--space-3);
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5rem;
}

.homepage-landing .membership-receives__card--priority::before {
  background-color: #dbe4ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231e2f72'%3E%3Cpath d='M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z'/%3E%3C/svg%3E");
}

.homepage-landing .membership-receives__card--newsletter::before {
  background-color: #e4f3d4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234e7328'%3E%3Cpath d='M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12h4a1 1 0 110 2h-4a1 1 0 110-2z'/%3E%3C/svg%3E");
}

.homepage-landing .membership-receives__card--tools::before {
  background-color: #fbf3e0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237a4e00'%3E%3Cpath d='M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z'/%3E%3C/svg%3E");
}

.homepage-landing .membership-receives__card--decal::before {
  background-color: #efe8fb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235b3d8a'%3E%3Cpath d='M10 2l7 3v5c0 4.2-2.8 7.4-7 9-4.2-1.6-7-4.8-7-9V5l7-3zm0 2.2L5 6.1v3.9c0 3.1 2 5.5 5 6.8 3-1.3 5-3.7 5-6.8V6.1l-5-1.9z'/%3E%3C/svg%3E");
}

/* Stat band on navy proof: keep a readable 3-up even when WP leaves flex. */
body.home .homepage-landing .is-style-osta-stat-band.wp-block-columns.is-layout-flex {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.homepage-landing .homepage-landing__final {
  text-align: center;
}

.homepage-landing .homepage-landing__final .hero__actions,
.homepage-landing .homepage-landing__proof .hero__actions {
  justify-content: center;
}

.homepage-landing .homepage-landing__proof {
  text-align: center;
}

.homepage-landing .homepage-landing__final .container,
.homepage-landing .homepage-landing__proof .container {
  max-width: var(--container-max);
}


/* (Solution takeaway styles live with .homepage-solution__* above.) */

/* OSTA-U banner — home only, fixed above the site header/menu.
   Explicit one-time chrome exception: front-page.html places
   parts/osta-u-banner.html before the header template part.
   Also targets .osta-u-sitewide-banner (alternate live markup) so the
   glass header sits over the hero photo, not over an opaque banner. */
:root {
  --osta-u-banner-height: 0px;
}

body.home:has(.osta-u-banner),
body.home:has(.osta-u-sitewide-banner) {
  --osta-u-banner-height: 5.5rem;
}

body.home:has(.osta-u-sitewide-banner) {
  /* Taller promotional strip used on some live variants. */
  --osta-u-banner-height: 8.125rem;
}

@media (max-width: 700px) {
  body.home:has(.osta-u-banner),
  body.home:has(.osta-u-sitewide-banner) {
    --osta-u-banner-height: 10.5rem;
  }
}

.osta-u-banner {
  background: linear-gradient(90deg, var(--color-brand-hover, #1A2255), var(--color-brand, #263279));
  color: #fff;
  border-bottom: 3px solid var(--color-accent, #8AC34E);
  padding-block: var(--space-3);
}

body.home .osta-u-banner,
body.home .osta-u-sitewide-banner {
  /* !important beats inline position:relative on live sitewide banner. */
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 21;
  min-height: var(--osta-u-banner-height);
  box-sizing: border-box;
}

body.home:has(.osta-u-banner) .site-header,
body.home:has(.osta-u-sitewide-banner) .site-header {
  top: var(--osta-u-banner-height);
}

/* Hero starts at the top of the document (fixed chrome is out of flow),
   so the frosted header paints over the hero photo/gradient again. */
body.home:has(.osta-u-banner) .hero,
body.home:has(.osta-u-sitewide-banner) .hero {
  margin-top: 0;
}

body.home.admin-bar .osta-u-banner,
body.home.admin-bar .osta-u-sitewide-banner {
  top: 32px !important;
}

body.home.admin-bar:has(.osta-u-banner) .site-header,
body.home.admin-bar:has(.osta-u-sitewide-banner) .site-header {
  top: calc(32px + var(--osta-u-banner-height));
}

@media (max-width: 782px) {
  body.home.admin-bar .osta-u-banner,
  body.home.admin-bar .osta-u-sitewide-banner {
    top: 46px !important;
  }

  body.home.admin-bar:has(.osta-u-banner) .site-header,
  body.home.admin-bar:has(.osta-u-sitewide-banner) .site-header {
    top: calc(46px + var(--osta-u-banner-height));
  }
}

.no-js body.home .osta-u-banner,
.no-js body.home .osta-u-sitewide-banner {
  position: static !important;
  min-height: 0;
}

.no-js body.home:has(.osta-u-banner) .site-header,
.no-js body.home:has(.osta-u-sitewide-banner) .site-header {
  top: 0;
}

.osta-u-banner__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max, 1200px);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.osta-u-banner__chip {
  display: inline-block;
  margin: 0 0 var(--space-1);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--color-accent, #8AC34E);
  color: var(--color-accent-on, #131722);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.osta-u-banner__text {
  margin: 0;
  color: #e8eaf4;
  max-width: 40rem;
  font-size: var(--text-body, 18px);
  line-height: 1.35;
}

.osta-u-banner__text strong {
  color: var(--color-accent, #8AC34E);
  font-weight: 800;
}

.osta-u-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.osta-u-banner__actions .btn--outline {
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}

@media (max-width: 700px) {
  .osta-u-banner__actions {
    width: 100%;
  }

  .osta-u-banner__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}