/* ===========================================================================
   WBSA brand layer for Divi 5
   joinwbsa.org · derived from BRAND_GUIDE.md v1.0

   HOW THIS FILE IS ORGANISED
   1. Tokens
   2. Typography over Divi
   3. Layout rhythm & containers
   4. Section background helpers (.wbsa-hero / -banner / -navy / -cloud / -grad / -cta)
   5. The peaks motif
   6. Text helpers (.wbsa-overline / -rule / -lead / -muted / -center / -crumb)
   7. Buttons
   8. Cards (Divi Blurb)
   9. Stats, events, media frames, info lines
   10. Member directory
   11. Forms
   12. Header (Theme Builder + Divi native fallback)
   13. Footer
   14. Motion
   15. Divi Builder niceties

   Design values are deliberately here rather than baked into each module, so
   sections can be added, removed and rearranged in the Builder without the look
   drifting. See Appearance → WBSA Style Kit for the class vocabulary.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  /* Core */
  --wbsa-blue: #0b7da8;
  --wbsa-blue-600: #0a6f96;
  --wbsa-blue-700: #085a7a;
  --wbsa-navy: #163052;
  --wbsa-navy-900: #0f223b;
  --wbsa-gold: #ffa724;
  --wbsa-gold-600: #f0951a;

  /* Neutrals */
  --wbsa-ink: #242424;
  --wbsa-slate: #3e3e41;
  --wbsa-stone: #6e7272;
  --wbsa-mist: #e5e5e5;
  --wbsa-cloud: #f8f8f8;

  /* On-dark text */
  --wbsa-on-dark: #dbe6f2;
  --wbsa-on-dark-dim: #8da3bd;

  /* System */
  --wbsa-grad: linear-gradient(135deg, #163052 0%, #0b7da8 100%);
  --wbsa-shadow-sm: 0 2px 10px rgba(22, 48, 82, 0.06);
  --wbsa-shadow: 0 10px 30px rgba(22, 48, 82, 0.1);
  --wbsa-shadow-lg: 0 22px 50px rgba(22, 48, 82, 0.16);
  --wbsa-radius: 10px;
  --wbsa-radius-sm: 5px;
  --wbsa-container: 1200px;
  --wbsa-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --wbsa-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wbsa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Section rhythm */
  --wbsa-pad-y: clamp(3.5rem, 8vw, 7rem);

  /* Height reserved for the fixed header */
  --wbsa-header-h: 86px;

  /* Fill colour of the peaks ridge — set this per section if the block below
     the ridge isn't white. */
  --wbsa-peaks-fill: #ffffff;
}

@media (max-width: 980px) {
  :root {
    --wbsa-header-h: 74px;
  }
}

/* ------------------------------------------------ 2. Typography over Divi */

body,
body .et_pb_module,
body .et_pb_text,
body .et_pb_blurb_description,
body input,
body textarea,
body select,
body button {
  font-family: var(--wbsa-font-body);
}

body {
  color: var(--wbsa-ink);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .et_pb_module h1,
body .et_pb_module h2,
body .et_pb_module h3,
body .et_pb_module h4,
body .et_pb_module h5,
body .et_pb_module h6 {
  font-family: var(--wbsa-font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--wbsa-navy);
  padding-bottom: 0;
}

body h1,
body .et_pb_module h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
}

body h2,
body .et_pb_module h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}

/* h3 and below drop back to the sans — the serif is a display face only. */
body h3,
body h4,
body h5,
body h6,
body .et_pb_module h3,
body .et_pb_module h4,
body .et_pb_module h5,
body .et_pb_module h6 {
  font-family: var(--wbsa-font-body);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

body h3,
body .et_pb_module h3 {
  font-size: 1.2rem;
}

body h4,
body .et_pb_module h4 {
  font-size: 1.05rem;
}

body p {
  line-height: 1.7;
  padding-bottom: 1rem;
}

body p:last-child {
  padding-bottom: 0;
}

body a {
  color: var(--wbsa-blue);
  transition: color 0.2s var(--wbsa-ease);
}

body a:hover {
  color: var(--wbsa-blue-700);
}

body strong,
body b {
  font-weight: 700;
  color: var(--wbsa-navy);
}

/* --------------------------------------------- 3. Layout rhythm & container */

body .et_pb_section {
  padding: var(--wbsa-pad-y) 0;
  background-color: transparent;
}

body .et_pb_row {
  width: min(var(--wbsa-container), 92vw);
  max-width: var(--wbsa-container);
  padding: 0;
}

/* A row that follows another row in the same section shouldn't double the gap. */
body .et_pb_row + .et_pb_row {
  margin-top: 2rem;
}

body .wbsa-tight.et_pb_section {
  padding: calc(var(--wbsa-pad-y) / 2) 0;
}

body .wbsa-flush.et_pb_section {
  padding: 0;
}

/* Clear the fixed header on the first section of a page. Hero and banner
   sections set their own (larger) top padding just below.
   Divi wraps builder content in .et_builder_inner_content, Theme Builder in
   .et-l--body, and a non-builder page in .entry-content — cover all three. */
.et_builder_inner_content > .et_pb_section:first-of-type,
.et-l--body > .et_pb_section:first-of-type,
.entry-content > .et_pb_section:first-of-type {
  padding-top: calc(var(--wbsa-header-h) + 3rem);
}

/* Divi's column stack gap on mobile is tight for cards. */
@media (max-width: 980px) {
  body .et_pb_column {
    margin-bottom: 1.6rem;
  }
  body .et_pb_row .et_pb_column:last-child {
    margin-bottom: 0;
  }
}

/* ------------------------------------- 4. Section background helpers */

body .wbsa-cloud {
  background-color: var(--wbsa-cloud);
}

body .wbsa-navy {
  background-color: var(--wbsa-navy);
}

body .wbsa-grad,
body .wbsa-hero,
body .wbsa-banner,
body .wbsa-cta {
  background-image: var(--wbsa-grad);
  background-color: var(--wbsa-navy);
}

/* Light-on-dark text for every dark treatment. */
body .wbsa-navy,
body .wbsa-navy .et_pb_text,
body .wbsa-navy p,
body .wbsa-grad,
body .wbsa-grad .et_pb_text,
body .wbsa-grad p,
body .wbsa-hero,
body .wbsa-hero .et_pb_text,
body .wbsa-hero p,
body .wbsa-banner,
body .wbsa-banner .et_pb_text,
body .wbsa-banner p,
body .wbsa-cta,
body .wbsa-cta .et_pb_text,
body .wbsa-cta p {
  color: var(--wbsa-on-dark);
}

body .wbsa-navy h1,
body .wbsa-navy h2,
body .wbsa-navy h3,
body .wbsa-navy h4,
body .wbsa-grad h1,
body .wbsa-grad h2,
body .wbsa-grad h3,
body .wbsa-grad h4,
body .wbsa-hero h1,
body .wbsa-hero h2,
body .wbsa-hero h3,
body .wbsa-hero h4,
body .wbsa-banner h1,
body .wbsa-banner h2,
body .wbsa-banner h3,
body .wbsa-banner h4,
body .wbsa-cta h1,
body .wbsa-cta h2,
body .wbsa-cta h3,
body .wbsa-cta h4 {
  color: #fff;
}

body .wbsa-navy strong,
body .wbsa-grad strong,
body .wbsa-hero strong,
body .wbsa-banner strong,
body .wbsa-cta strong {
  color: #fff;
}

/* Hero — the tall opening section. Padding rather than min-height + flex,
   because Divi's row wrappers fight vertical centring. */
body .wbsa-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(9rem, 13vw, 12rem);
  padding-bottom: clamp(8.5rem, 15vw, 13rem);
}

/* Gold-and-blue vignette over the gradient, straight from the brand guide. */
body .wbsa-hero::before,
body .wbsa-banner::before,
body .wbsa-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body .wbsa-hero::before {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255, 167, 36, 0.18), transparent 55%),
    radial-gradient(80% 70% at 10% 100%, rgba(11, 125, 168, 0.5), transparent 60%);
}

body .wbsa-banner::before {
  background: radial-gradient(100% 120% at 50% -20%, rgba(255, 167, 36, 0.16), transparent 60%);
}

body .wbsa-cta::before {
  background: radial-gradient(90% 120% at 50% 120%, rgba(255, 167, 36, 0.22), transparent 60%);
}

body .wbsa-hero > .et_pb_row,
body .wbsa-banner > .et_pb_row,
body .wbsa-cta > .et_pb_row {
  position: relative;
  z-index: 2;
}

body .wbsa-hero h1 {
  max-width: 17ch;
}

body .wbsa-hero .wbsa-lead {
  max-width: 46ch;
  font-size: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Hero split: text left, oversized image bleeding off the right screen edge.

   Put wbsa-hero-split on the hero's ROW (two columns: text 3_5, image 2_5) and
   wbsa-hero-image on the Image module. Two things make the bleed possible:
   max-width: none (Divi otherwise caps every image at its column width — the
   "shrinks to unusable size" effect), and a width that deliberately overshoots
   the column by 18vw. The hero section's overflow: hidden then clips the
   overshoot at the viewport edge, so there is never a horizontal scrollbar.
   --------------------------------------------------------------------------- */

@media (min-width: 981px) {
  body .et_pb_row.wbsa-hero-split {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  /* Divi sizes columns with percentage widths + right margins; neutralise both
     so flex can hold the text at its current measure and let the image spill. */
  body .et_pb_row.wbsa-hero-split > .et_pb_column {
    width: auto !important;
    margin: 0 !important;
  }

  body .et_pb_row.wbsa-hero-split > .et_pb_column:first-child {
    flex: 0 0 55%;
  }

  body .et_pb_row.wbsa-hero-split > .et_pb_column:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }
}

body .wbsa-hero-image {
  margin-bottom: 0;
  /* Divi 5 renders the image module as a flex box whose wrap shrinks to fit —
     that's the second half of the "image shrinks in a column" effect. Block
     display with a full-width wrap makes the percentage width predictable. */
  display: block;
}

body .wbsa-hero-image .et_pb_image_wrap {
  display: block;
  width: 100%;
  max-width: none;
}

body .wbsa-hero-image img {
  display: block;
  width: calc(100% + 18vw);
  max-width: none !important;
  height: clamp(340px, 42vw, 600px);
  object-fit: cover;
  border-radius: var(--wbsa-radius) 0 0 var(--wbsa-radius);
  box-shadow: var(--wbsa-shadow-lg);
}

@media (max-width: 980px) {
  /* Stacked below the text on small screens: a gentler bleed, shorter frame. */
  body .wbsa-hero-image {
    margin-top: 1.2rem;
  }
  body .wbsa-hero-image img {
    /* 12vw: enough to clear the container's right gutter and still poke past
       the screen edge, so the bleed reads as deliberate on phones too. */
    width: calc(100% + 12vw);
    height: clamp(220px, 46vw, 380px);
  }
}

/* Interior-page banner — same gradient, shorter. */
body .wbsa-banner {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: clamp(8rem, 11vw, 10rem);
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

body .wbsa-banner .wbsa-rule,
body .wbsa-cta .wbsa-rule {
  margin-left: auto;
  margin-right: auto;
}

/* Call-to-action band. */
body .wbsa-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}

body .wbsa-cta .wbsa-lead {
  max-width: 48ch;
  margin-inline: auto;
}

/* Hero and banner already clear the header themselves. */
.et_builder_inner_content > .wbsa-hero:first-of-type,
.et-l--body > .wbsa-hero:first-of-type,
.entry-content > .wbsa-hero:first-of-type {
  padding-top: clamp(9rem, 13vw, 12rem);
}

.et_builder_inner_content > .wbsa-banner:first-of-type,
.et-l--body > .wbsa-banner:first-of-type,
.entry-content > .wbsa-banner:first-of-type {
  padding-top: clamp(8rem, 11vw, 10rem);
}

/* --------------------------------------------------- 5. The peaks motif */

body .wbsa-peaks {
  position: relative;
}

body .wbsa-peaks::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(56px, 9vw, 140px);
  z-index: 1;
  pointer-events: none;
  background-color: var(--wbsa-peaks-fill);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L0 96 L210 40 L360 92 L560 24 L760 96 L980 36 L1180 88 L1320 52 L1440 92 L1440 140 Z' fill='%23fff'/%3E%3Cpath d='M0 140 L0 110 L210 70 L360 110 L560 64 L760 112 L980 72 L1180 108 L1320 84 L1440 110 L1440 140 Z' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L0 96 L210 40 L360 92 L560 24 L760 96 L980 36 L1180 88 L1320 52 L1440 92 L1440 140 Z' fill='%23fff'/%3E%3Cpath d='M0 140 L0 110 L210 70 L360 110 L560 64 L760 112 L980 72 L1180 108 L1320 84 L1440 110 L1440 140 Z' fill='%23fff' opacity='.55'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}

/* When the section below the ridge is the light grey, not white. */
body .wbsa-peaks-cloud {
  --wbsa-peaks-fill: var(--wbsa-cloud);
}

/* The standalone [wbsa_peaks] SVG. */
.wbsa-peaks-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------- 6. Text helpers */

body .wbsa-overline,
body .wbsa-overline p,
body .wbsa-overline .et_pb_text_inner {
  font-family: var(--wbsa-font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wbsa-gold-600);
  line-height: 1.4;
  padding-bottom: 0;
}

body .wbsa-overline {
  margin-bottom: 0.9rem;
}

/* On dark backgrounds the overline goes to full gold for contrast. */
body .wbsa-navy .wbsa-overline,
body .wbsa-navy .wbsa-overline p,
body .wbsa-grad .wbsa-overline,
body .wbsa-grad .wbsa-overline p,
body .wbsa-hero .wbsa-overline,
body .wbsa-hero .wbsa-overline p,
body .wbsa-banner .wbsa-overline,
body .wbsa-banner .wbsa-overline p,
body .wbsa-cta .wbsa-overline,
body .wbsa-cta .wbsa-overline p {
  color: var(--wbsa-gold);
}

/* The short gold rule. Sits on a Divider module; Divi draws the line with a
   border on ::before, so override that rather than adding a second element. */
body .wbsa-rule {
  margin: 1.1rem 0 1.6rem;
}

body .wbsa-rule.et_pb_divider::before {
  width: 54px;
  border-top: 3px solid var(--wbsa-gold);
  border-radius: 3px;
  position: static;
  display: block;
  inset: auto;
  max-width: 54px;
}

body .wbsa-rule.et_pb_divider .et_pb_divider_internal {
  display: block;
}

body .wbsa-center .wbsa-rule.et_pb_divider::before,
body .wbsa-center.wbsa-rule.et_pb_divider::before {
  margin-left: auto;
  margin-right: auto;
}

/* The rule as shipped: an <hr class="wbsa-rule"> inside a Text module. This is
   what the page layouts use, because it renders identically everywhere and can't
   be knocked out by a Divi divider-markup change. */
body hr.wbsa-rule {
  width: 54px;
  max-width: 54px;
  height: 3px;
  border: 0;
  background: var(--wbsa-gold);
  border-radius: 3px;
  margin: 1.1rem 0 1.2rem;
}

body .wbsa-center hr.wbsa-rule,
body .wbsa-rule-wrap.wbsa-center hr.wbsa-rule {
  margin-left: auto;
  margin-right: auto;
}

/* The Text module wrapping the rule adds no rhythm of its own. */
body .et_pb_text.wbsa-rule-wrap {
  margin-bottom: 0;
}

/* Overline sits tight to the heading it labels. */
body .et_pb_text.wbsa-overline {
  margin-bottom: 0.3rem;
}

body .wbsa-lead,
body .wbsa-lead p {
  font-size: 1.2rem;
  line-height: 1.75;
  color: var(--wbsa-slate);
}

body .wbsa-navy .wbsa-lead,
body .wbsa-navy .wbsa-lead p,
body .wbsa-grad .wbsa-lead,
body .wbsa-grad .wbsa-lead p,
body .wbsa-hero .wbsa-lead,
body .wbsa-hero .wbsa-lead p,
body .wbsa-banner .wbsa-lead,
body .wbsa-banner .wbsa-lead p,
body .wbsa-cta .wbsa-lead,
body .wbsa-cta .wbsa-lead p {
  color: var(--wbsa-on-dark);
}

body .wbsa-muted,
body .wbsa-muted p {
  color: var(--wbsa-stone);
}

body .wbsa-center,
body .wbsa-center p,
body .wbsa-center h1,
body .wbsa-center h2,
body .wbsa-center h3 {
  text-align: center;
}

body .wbsa-center .wbsa-lead {
  margin-inline: auto;
}

body .wbsa-narrow {
  max-width: 820px;
  margin-inline: auto;
}

body .wbsa-crumb,
body .wbsa-crumb p {
  color: #bcd0e6;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

body .wbsa-crumb a {
  color: #fff;
}

body .wbsa-note,
body .wbsa-note p {
  font-size: 0.82rem;
  color: var(--wbsa-stone);
}

/* ------------------------------------------------------- 7. Buttons */

/* Reset Divi's default button chrome, then layer the WBSA variants on top.
   Divi's own rules carry !important, so these have to as well. */
body .et_pb_button,
body .et_pb_button:hover,
body .et_pb_contact_submit,
body .wbsa-form button[type="submit"],
body a.wbsa-btn-gold,
body a.wbsa-btn-blue,
body a.wbsa-btn-outline,
body a.wbsa-btn-ghost {
  font-family: var(--wbsa-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  padding: 0.85em 1.9em !important;
  border-radius: var(--wbsa-radius-sm) !important;
  border: 2px solid transparent !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.55em;
  text-transform: none !important;
  transition: transform 0.2s var(--wbsa-ease), background-color 0.2s var(--wbsa-ease),
    box-shadow 0.2s var(--wbsa-ease), color 0.2s var(--wbsa-ease), border-color 0.2s var(--wbsa-ease) !important;
}

body .et_pb_button:hover,
body .wbsa-form button[type="submit"]:hover,
body a.wbsa-btn-gold:hover,
body a.wbsa-btn-blue:hover,
body a.wbsa-btn-outline:hover,
body a.wbsa-btn-ghost:hover {
  transform: translateY(-2px);
}

/* Divi appends a chevron via ::after on hover and animates padding. Suppress
   that entirely; the WBSA arrow treatment is opt-in via .wbsa-btn-arrow. */
body .et_pb_button::after,
body .et_pb_button::before {
  display: none !important;
}

body .wbsa-btn-arrow::after {
  content: "\2192" !important;
  display: inline-block !important;
  font-family: var(--wbsa-font-body) !important;
  font-size: 1em !important;
  line-height: 1 !important;
  margin: 0 !important;
  opacity: 1 !important;
  position: static !important;
  /* Divi centres its own arrow with top:50% + translateY(-50%). Those must both be
     cleared: top is inert once position is static, but the transform still applies
     and lifts the arrow like a superscript. It only looked correct on hover because
     the hover rule below replaces the transform outright. The button is an
     inline-flex container with align-items:center, so the arrow is a flex item and
     is centred without any offset of its own. */
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  vertical-align: middle !important;
  transition: transform 0.2s var(--wbsa-ease) !important;
}

/* Needs !important to beat the base rule's `transform: none !important` above. */
body .wbsa-btn-arrow:hover::after {
  transform: translateX(4px) !important;
}

/* Gold — the one key action per view. */
body .wbsa-btn-gold,
body .wbsa-btn-gold:hover {
  background-color: var(--wbsa-gold) !important;
  color: var(--wbsa-navy) !important;
  border-color: var(--wbsa-gold) !important;
  box-shadow: var(--wbsa-shadow-sm);
}

body .wbsa-btn-gold:hover {
  background-color: var(--wbsa-gold-600) !important;
  border-color: var(--wbsa-gold-600) !important;
  box-shadow: var(--wbsa-shadow);
}

/* Blue — the standard button. */
body .wbsa-btn-blue,
body .wbsa-btn-blue:hover,
body .et_pb_contact_submit {
  background-color: var(--wbsa-blue) !important;
  color: #fff !important;
  border-color: var(--wbsa-blue) !important;
}

body .wbsa-btn-blue:hover,
body .et_pb_contact_submit:hover {
  background-color: var(--wbsa-blue-700) !important;
  border-color: var(--wbsa-blue-700) !important;
  color: #fff !important;
}

/* Outline on light. */
body .wbsa-btn-outline {
  background-color: transparent !important;
  border-color: var(--wbsa-blue) !important;
  color: var(--wbsa-blue) !important;
}

body .wbsa-btn-outline:hover {
  background-color: var(--wbsa-blue) !important;
  border-color: var(--wbsa-blue) !important;
  color: #fff !important;
}

/* Ghost on dark. */
body .wbsa-btn-ghost {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
}

body .wbsa-btn-ghost:hover {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--wbsa-navy) !important;
}

body .wbsa-btn-block,
body .wbsa-btn-block .et_pb_button {
  width: 100%;
  justify-content: center;
}

/* Two buttons side by side inside one column. */
body .wbsa-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

body .wbsa-btn-row .et_pb_button_module_wrapper {
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------
   8. Icon set

   One SVG per icon, used as a CSS mask — so the icon's colour comes from
   background-color and a single definition serves both the blue card tile and the
   white-on-gradient contact tile. Masks only read the alpha channel, so the
   stroke colour inside the SVG is irrelevant.

   To give something an icon, add one of these classes alongside wbsa-card or
   wbsa-info: wbsa-icon-peaks, -grad, -users, -globe, -award, -mail, -pin.
   --------------------------------------------------------------------------- */

.wbsa-icon-peaks {
  --wbsa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 20 6-12 5 9 3-5 4 8z'/%3E%3C/svg%3E");
}

.wbsa-icon-grad {
  --wbsa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E");
}

.wbsa-icon-users {
  --wbsa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.wbsa-icon-globe {
  --wbsa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z'/%3E%3C/svg%3E");
}

.wbsa-icon-award {
  --wbsa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M3 20h4M7 4h10v6a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 8H5a2 2 0 0 1 0-4h2M17 8h2a2 2 0 0 0 0-4h-2'/%3E%3C/svg%3E");
}

.wbsa-icon-mail {
  --wbsa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

.wbsa-icon-pin {
  --wbsa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   9. Cards

   A card is a COLUMN carrying .wbsa-card (plus an optional wbsa-icon-* class),
   holding one Text module with an <h3> and a paragraph. Divi's Blurb module is
   deliberately avoided: its title and icon attributes are rejected by Divi's own
   D4→D5 converter, which would leave the module editable only as raw shortcode.
   --------------------------------------------------------------------------- */

body .wbsa-card {
  background-color: #fff;
  border: 1px solid var(--wbsa-mist);
  border-radius: var(--wbsa-radius);
  padding: 1.9rem;
  box-shadow: var(--wbsa-shadow-sm);
  position: relative;
  transition: transform 0.3s var(--wbsa-ease), box-shadow 0.3s var(--wbsa-ease),
    border-color 0.3s var(--wbsa-ease), background-size 0.3s var(--wbsa-ease);

  /* The gold top-rule that wipes in on hover, drawn as a background layer so
     both pseudo-elements stay free for the icon tile. */
  background-image: linear-gradient(var(--wbsa-gold), var(--wbsa-gold));
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 0 3px;
}

body .wbsa-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--wbsa-shadow-lg);
  border-color: transparent;
  background-size: 100% 3px;
}

/* The rounded icon tile and the icon itself. */
body .wbsa-card[class*="wbsa-icon-"] {
  padding-top: calc(1.9rem + 46px + 1.1rem);
}

body .wbsa-card[class*="wbsa-icon-"]::before {
  content: "";
  position: absolute;
  top: 1.9rem;
  left: 1.9rem;
  width: 46px;
  height: 46px;
  border-radius: 9px;
  background-color: rgba(11, 125, 168, 0.1);
}

body .wbsa-card[class*="wbsa-icon-"]::after {
  content: "";
  position: absolute;
  top: calc(1.9rem + 11px);
  left: calc(1.9rem + 11px);
  width: 24px;
  height: 24px;
  background-color: var(--wbsa-blue);
  -webkit-mask: var(--wbsa-icon) no-repeat center / 24px 24px;
  mask: var(--wbsa-icon) no-repeat center / 24px 24px;
}

body .wbsa-card h3,
body .wbsa-card h4 {
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  color: var(--wbsa-navy);
}

body .wbsa-card p {
  color: var(--wbsa-slate);
  font-size: 0.97rem;
}

body .wbsa-card p:last-child {
  padding-bottom: 0;
}

body .wbsa-card .et_pb_module:last-child {
  margin-bottom: 0;
}

/* Cards in a row should end level with each other. Divi lays columns out with
   percentage widths and right margins, so the row is switched to flex and the
   columns keep their own widths. */
body .et_pb_row.wbsa-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

body .et_pb_row.wbsa-cards > .et_pb_column {
  display: flex;
  flex-direction: column;
}

@media (max-width: 980px) {
  body .et_pb_row.wbsa-cards > .et_pb_column {
    margin-bottom: 1.6rem;
  }
}

/* ------------------------- 9. Stats, events, media frames, info lines */

/* Stat — a column carrying .wbsa-stat with one Text module holding
   <span class="wbsa-stat-num">45+</span><span class="wbsa-stat-label">…</span>.
   wbsa.js counts the number up when it scrolls into view, preserving whatever
   prefix or suffix was typed. */
body .wbsa-stat {
  text-align: center;
}

body .wbsa-stat .wbsa-stat-num {
  display: block;
  font-family: var(--wbsa-font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--wbsa-gold);
}

body .wbsa-stat .wbsa-stat-label {
  display: block;
  font-family: var(--wbsa-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #cdd9e8;
  margin-top: 0.5rem;
  line-height: 1.5;
}

body .wbsa-stat p {
  padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Event row — a three-column Divi row (date chip · details · action) turned into
   a single horizontal card. Divi's percentage column widths and right margins are
   neutralised so flex can size the three parts naturally; that keeps the row
   editable in the builder while reading as one component on the page.
   --------------------------------------------------------------------------- */

body .et_pb_row.wbsa-event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--wbsa-mist);
  border-radius: var(--wbsa-radius);
  padding: 1.4rem 1.7rem;
  margin-bottom: 1rem;
  transition: transform 0.25s var(--wbsa-ease), box-shadow 0.25s var(--wbsa-ease);
}

body .et_pb_row.wbsa-event:hover {
  transform: translateY(-3px);
  box-shadow: var(--wbsa-shadow);
}

body .et_pb_row.wbsa-event + .et_pb_row.wbsa-event {
  margin-top: 0;
}

body .et_pb_row.wbsa-event > .et_pb_column {
  width: auto !important;
  margin: 0 !important;
  padding: 0;
}

body .et_pb_row.wbsa-event > .wbsa-event-datecol {
  flex: 0 0 auto;
}

body .et_pb_row.wbsa-event > .wbsa-event-body {
  flex: 1 1 260px;
}

body .et_pb_row.wbsa-event > .wbsa-event-action {
  flex: 0 0 auto;
}

body .et_pb_row.wbsa-event .et_pb_module {
  margin-bottom: 0;
}

/* The gradient date chip. */
body .wbsa-event-date {
  min-width: 84px;
  text-align: center;
  background: var(--wbsa-grad);
  border-radius: var(--wbsa-radius-sm);
  padding: 0.7rem 1rem;
}

body .wbsa-event-date p {
  padding-bottom: 0;
}

body .wbsa-event-m {
  display: block;
  font-family: var(--wbsa-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wbsa-gold);
}

body .wbsa-event-d {
  display: block;
  font-family: var(--wbsa-font-display);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  color: #fff;
}

body .wbsa-event-title h3 {
  font-size: 1.2rem;
  color: var(--wbsa-navy);
  margin-bottom: 0.2rem;
}

body .wbsa-event-where,
body .wbsa-event-where p {
  color: var(--wbsa-stone);
  font-size: 0.9rem;
  padding-bottom: 0;
}

@media (max-width: 700px) {
  body .et_pb_row.wbsa-event {
    gap: 1rem;
  }
  body .et_pb_row.wbsa-event > .wbsa-event-action {
    flex: 1 1 100%;
  }
  body .et_pb_row.wbsa-event > .wbsa-event-action .et_pb_button {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   [wbsa_events] — the same event-row card, emitted by the plugin's shortcode
   instead of hand-built Divi rows. One source of truth for events; these
   selectors mirror the .et_pb_row.wbsa-event rules above for plain-div markup.
   --------------------------------------------------------------------------- */

.wbsa-events .wbsa-event {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--wbsa-mist);
  border-radius: var(--wbsa-radius);
  padding: 1.4rem 1.7rem;
  margin-bottom: 1rem;
  transition: transform 0.25s var(--wbsa-ease), box-shadow 0.25s var(--wbsa-ease);
}

.wbsa-events .wbsa-event:hover {
  transform: translateY(-3px);
  box-shadow: var(--wbsa-shadow);
}

.wbsa-events .wbsa-event-datecol {
  flex: 0 0 auto;
}

.wbsa-events .wbsa-event-body {
  flex: 1 1 260px;
}

.wbsa-events .wbsa-event-action {
  flex: 0 0 auto;
}

.wbsa-events .wbsa-event h3 {
  font-size: 1.2rem;
  color: var(--wbsa-navy);
  margin: 0 0 0.2rem;
  padding: 0;
}

.wbsa-events .wbsa-event-where {
  color: var(--wbsa-stone);
  font-size: 0.9rem;
  padding-bottom: 0;
  margin: 0;
}

@media (max-width: 700px) {
  .wbsa-events .wbsa-event {
    gap: 1rem;
  }
  .wbsa-events .wbsa-event-action {
    flex: 1 1 100%;
  }
  .wbsa-events .wbsa-event-action a {
    width: 100%;
    justify-content: center;
  }
}

/* The "View all events" button sitting beside a section heading. */
body .wbsa-align-end {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
}

@media (max-width: 980px) {
  body .wbsa-align-end {
    justify-content: flex-start;
  }
}

/* Media frame for the feature-split photo. */
body .wbsa-media,
body .wbsa-media .et_pb_image_wrap {
  border-radius: var(--wbsa-radius);
  overflow: hidden;
}

body .wbsa-media {
  box-shadow: var(--wbsa-shadow);
  background: var(--wbsa-grad);
}

body .wbsa-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Placeholder frame while real photography is pending. */
body .wbsa-media-placeholder {
  border-radius: var(--wbsa-radius);
  box-shadow: var(--wbsa-shadow);
  background: var(--wbsa-grad);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* Contact info line — a Text module carrying .wbsa-info plus a wbsa-icon-* class,
   holding <strong>Label</strong> and then the value. The gradient tile and white
   icon are drawn by the two pseudo-elements. */
body .et_pb_text.wbsa-info {
  position: relative;
  padding-left: calc(42px + 0.9rem);
  min-height: 42px;
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
}

body .wbsa-info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background-image: var(--wbsa-grad);
}

body .wbsa-info[class*="wbsa-icon-"]::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 11px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-mask: var(--wbsa-icon) no-repeat center / 20px 20px;
  mask: var(--wbsa-icon) no-repeat center / 20px 20px;
}

body .wbsa-info strong {
  display: block;
  color: var(--wbsa-navy);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
}

body .wbsa-info p {
  padding-bottom: 0;
  line-height: 1.5;
}

/* --------------------------------------------- 10. Member directory */

.wbsa-dir-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.wbsa-search-wrap {
  position: relative;
  flex: 1 1 280px;
  max-width: 420px;
}

.wbsa-directory input.wbsa-dir-search {
  width: 100%;
  padding: 0.85em 1em 0.85em 2.7em;
  border: 1px solid var(--wbsa-mist);
  border-radius: var(--wbsa-radius-sm);
  font-family: var(--wbsa-font-body);
  font-size: 1rem;
  color: var(--wbsa-ink);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wbsa-directory input.wbsa-dir-search:focus {
  outline: none;
  border-color: var(--wbsa-blue);
  box-shadow: 0 0 0 3px rgba(11, 125, 168, 0.15);
}

.wbsa-search-wrap svg {
  position: absolute;
  left: 0.9em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wbsa-stone);
  pointer-events: none;
}

.wbsa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.wbsa-directory button.wbsa-chip {
  border: 1px solid var(--wbsa-mist);
  background: #fff;
  color: var(--wbsa-slate);
  font-family: var(--wbsa-font-body);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.45em 1em;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.2s var(--wbsa-ease);
  line-height: 1.5;
}

.wbsa-directory button.wbsa-chip:hover {
  border-color: var(--wbsa-blue);
  color: var(--wbsa-blue);
  background: #fff;
}

.wbsa-directory button.wbsa-chip.is-active {
  background: var(--wbsa-navy);
  border-color: var(--wbsa-navy);
  color: #fff;
}

.wbsa-dir-count {
  font-size: 0.88rem;
  color: var(--wbsa-stone);
  margin: 1.2rem 0;
  padding-bottom: 0;
}

.wbsa-school-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

@media (max-width: 980px) {
  .wbsa-school-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .wbsa-school-grid {
    grid-template-columns: 1fr;
  }
}

.wbsa-directory .wbsa-school {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #fff;
  border: 1px solid var(--wbsa-mist);
  border-radius: var(--wbsa-radius);
  padding: 1.3rem 1.4rem;
  color: inherit;
  transition: transform 0.25s var(--wbsa-ease), box-shadow 0.25s var(--wbsa-ease),
    border-color 0.25s var(--wbsa-ease);
}

.wbsa-directory .wbsa-school:hover {
  transform: translateY(-4px);
  box-shadow: var(--wbsa-shadow);
  border-color: transparent;
}

.wbsa-directory .wbsa-school[hidden] {
  display: none;
}

.wbsa-school-name {
  font-family: var(--wbsa-font-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--wbsa-navy);
  line-height: 1.2;
}

.wbsa-school-loc {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--wbsa-stone);
  font-size: 0.88rem;
}

.wbsa-school-loc svg {
  color: var(--wbsa-blue);
  flex: 0 0 auto;
}

.wbsa-school-go {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wbsa-blue);
}

.wbsa-no-results {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--wbsa-stone);
  padding: 3rem 1rem;
}

.wbsa-directory button.wbsa-clear-filters {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--wbsa-blue) !important;
  font-weight: 700 !important;
  cursor: pointer;
  text-decoration: underline;
  display: inline !important;
}

/* ------------------------------------------------------- 11. Forms */

body .et_pb_contact_form_container .et_pb_contact_field,
body .wbsa-field {
  padding: 0 0 1.1rem !important;
}

body .et_pb_contact_form_container .et_pb_contact_form_label,
body .wbsa-field label {
  display: block !important;
  position: static !important;
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  font-family: var(--wbsa-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--wbsa-slate);
  margin-bottom: 0.4rem;
}

body .et_pb_contact_form input[type="text"],
body .et_pb_contact_form input[type="email"],
body .et_pb_contact_form input[type="tel"],
body .et_pb_contact_form textarea,
body .et_pb_contact_form select,
body .et_pb_contact_form .input,
body .wbsa-field input,
body .wbsa-field textarea,
body .wbsa-field select {
  width: 100%;
  padding: 0.8em 1em !important;
  border: 1px solid var(--wbsa-mist) !important;
  border-radius: var(--wbsa-radius-sm) !important;
  font-family: var(--wbsa-font-body) !important;
  font-size: 1rem !important;
  color: var(--wbsa-ink) !important;
  background-color: #fff !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

body .et_pb_contact_form input:focus,
body .et_pb_contact_form textarea:focus,
body .et_pb_contact_form select:focus,
body .wbsa-field input:focus,
body .wbsa-field textarea:focus,
body .wbsa-field select:focus {
  outline: none;
  border-color: var(--wbsa-blue) !important;
  box-shadow: 0 0 0 3px rgba(11, 125, 168, 0.15);
}

body .et_pb_contact_form textarea,
body .wbsa-field textarea {
  min-height: 140px;
  resize: vertical;
}

/* Divi's captcha column crowds the layout; the form card looks better without it
   (turn the captcha off in the module and use spam protection instead). */
body .et_pb_contact_form .et_pb_contact_right {
  padding-bottom: 1rem;
}

/* A form dropped inside a .wbsa-card gets card padding. */
body .wbsa-card .et_pb_contact_form_container {
  margin-top: 0;
}

/* Divi's Contact Form module. Its submit button is generated markup with no CSS
   Class field of its own, so the gold treatment is applied here — on the Contact
   page, sending the message IS the one key action. */
body .wbsa-contact-form .et_pb_contact_submit,
body .wbsa-contact-form .et_pb_contact_submit:hover {
  background-color: var(--wbsa-gold) !important;
  border-color: var(--wbsa-gold) !important;
  color: var(--wbsa-navy) !important;
  width: 100% !important;
  justify-content: center;
  float: none !important;
  box-shadow: var(--wbsa-shadow-sm);
}

body .wbsa-contact-form .et_pb_contact_submit:hover {
  background-color: var(--wbsa-gold-600) !important;
  border-color: var(--wbsa-gold-600) !important;
  box-shadow: var(--wbsa-shadow);
}

/* Divi wraps the submit in a right-floated container. */
body .wbsa-contact-form .et_contact_bottom_container {
  float: none;
  text-align: left;
  margin-top: 0.4rem;
}

/* Divi's own success / error notice, brought onto the palette. */
body .et-pb-contact-message {
  background: rgba(11, 125, 168, 0.08);
  border: 1px solid var(--wbsa-blue);
  color: var(--wbsa-navy);
  padding: 0.9rem 1.1rem;
  border-radius: var(--wbsa-radius-sm);
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
}

body .et-pb-contact-message ul {
  margin: 0;
  padding-left: 1.1rem;
}

body .et_pb_contact_error_text,
body .et_contact_error {
  color: var(--wbsa-gold-600) !important;
  font-size: 0.85rem;
}

body .wbsa-form-success,
body .wbsa-form-error {
  padding: 0.9rem 1.1rem;
  border-radius: var(--wbsa-radius-sm);
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
}

body .wbsa-form-success {
  background: rgba(11, 125, 168, 0.08);
  border: 1px solid var(--wbsa-blue);
  color: var(--wbsa-navy);
}

body .wbsa-form-error {
  background: rgba(255, 167, 36, 0.12);
  border: 1px solid var(--wbsa-gold-600);
  color: var(--wbsa-navy);
}

/* Off-screen rather than display:none — some bots skip hidden inputs. */
.wbsa-honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------- 12. Header (Theme Builder + native fallback) */

/* Theme Builder header: fixed, transparent, turns navy once scrolled.
   wbsa.js toggles .wbsa-scrolled on <body>. */
.et-l--header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  transition: background-color 0.3s var(--wbsa-ease), box-shadow 0.3s var(--wbsa-ease);
  background-color: transparent;
}

body.wbsa-scrolled .et-l--header,
body.wbsa-nav-open .et-l--header {
  background-color: var(--wbsa-navy);
  box-shadow: 0 6px 24px rgba(15, 34, 59, 0.35);
}

/* The admin bar shouldn't sit on top of the logo when logged in. */
body.admin-bar .et-l--header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .et-l--header {
    top: 46px;
  }
}

.et-l--header .et_pb_section,
.et-l--header .et_pb_row {
  padding-top: 0;
  padding-bottom: 0;
  background-color: transparent;
}

.et-l--header .et_pb_section {
  padding: 1rem 0;
  transition: padding 0.3s var(--wbsa-ease);
}

body.wbsa-scrolled .et-l--header .et_pb_section {
  padding: 0.6rem 0;
}

/* Divi Menu module inside the Theme Builder header. */
.et-l--header .et_pb_menu {
  background-color: transparent !important;
}

.et-l--header .et_pb_menu .et_pb_menu__wrap {
  justify-content: flex-end;
}

.et-l--header .et_pb_menu__logo img,
.wbsa-logo img {
  height: 52px;
  width: auto;
  max-height: none;
  transition: height 0.3s var(--wbsa-ease);
}

body.wbsa-scrolled .et-l--header .et_pb_menu__logo img,
body.wbsa-scrolled .wbsa-logo img {
  height: 44px;
}

@media (max-width: 640px) {
  .et-l--header .et_pb_menu__logo img,
  .wbsa-logo img {
    height: 42px;
  }
}

/* Nav links: white, gold underline that wipes in from the left. */
.et-l--header .et-menu > li > a,
.et-l--header .et_pb_menu .et-menu > li > a {
  color: #fff !important;
  font-family: var(--wbsa-font-body);
  font-weight: 600;
  font-size: 0.93rem;
  opacity: 0.92;
  position: relative;
  padding-bottom: 0.25rem;
  text-transform: none;
}

.et-l--header .et-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--wbsa-gold);
  transition: right 0.25s var(--wbsa-ease);
}

.et-l--header .et-menu > li > a:hover::after,
.et-l--header .et-menu > li.current-menu-item > a::after,
.et-l--header .et-menu > li.current_page_item > a::after {
  right: 0;
}

.et-l--header .et-menu > li > a:hover,
.et-l--header .et-menu > li.current-menu-item > a {
  opacity: 1;
}

/* Divi adds its own arrow/underline decorations to menu items — remove them so
   only the gold rule reads. */
.et-l--header .et-menu > li > a:before {
  display: none !important;
}

/* Dropdowns. */
.et-l--header .et-menu li ul.sub-menu {
  background-color: var(--wbsa-navy) !important;
  border-top: 3px solid var(--wbsa-gold) !important;
  box-shadow: var(--wbsa-shadow-lg);
}

.et-l--header .et-menu li ul.sub-menu li a {
  color: var(--wbsa-on-dark) !important;
  font-weight: 600;
}

.et-l--header .et-menu li ul.sub-menu li a:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.06);
}

/* Mobile drawer. */
.et-l--header .et_mobile_menu {
  background-color: var(--wbsa-navy) !important;
  border-top: 3px solid var(--wbsa-gold) !important;
  box-shadow: var(--wbsa-shadow-lg);
  padding: 1rem 1.5rem;
}

.et-l--header .et_mobile_menu li a {
  color: #fff !important;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.9rem 0;
}

.et-l--header .et_mobile_nav_menu .mobile_menu_bar::before,
.et-l--header .mobile_menu_bar::before {
  color: #fff !important;
}

/* The gold "Find a School" button living in the header. */
.et-l--header .wbsa-header-cta .et_pb_button {
  padding: 0.7em 1.5em !important;
  font-size: 0.88rem !important;
}

/* ---------------------------------------------------------------------------
   Divi's NATIVE header — this is what joinwbsa.org actually uses.

   Divi's own fixed-header machinery does the work: enabling "Fixed Navigation
   Bar" in Theme Options adds .et_fixed_nav to <body> and Divi's JS adds
   .et-fixed-header to #main-header once the page is scrolled. So transparent →
   navy needs no JavaScript of ours; we just paint the two states.
   --------------------------------------------------------------------------- */

/* Divi's JS pads #page-container to make room for the fixed bar, which would
   leave a white strip above the hero. The hero and banner clear the header
   themselves, so reclaim that space. */
body #page-container {
  padding-top: 0 !important;
}

#main-header {
  background-color: transparent !important;
  box-shadow: none !important;
  transition: background-color 0.3s var(--wbsa-ease), box-shadow 0.3s var(--wbsa-ease);
}

#main-header.et-fixed-header,
body.wbsa-scrolled #main-header,
body.wbsa-nav-open #main-header {
  background-color: var(--wbsa-navy) !important;
  box-shadow: 0 6px 24px rgba(15, 34, 59, 0.35) !important;
}

/* No secondary bar above the logo. */
#top-header,
#et-secondary-menu {
  display: none !important;
}

/* Divi's stock header is a floated layout: the logo sits in normal flow at the
   top of the bar while the nav floats right against the bottom, so neither is
   vertically centred — most visibly in the compressed scrolled state. Flex
   centres both at every height; floats on flex items are ignored, so Divi's
   own float rules become inert without needing to fight them. */
#main-header .container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  width: min(var(--wbsa-container), 92vw);
  max-width: var(--wbsa-container);
  transition: padding 0.3s var(--wbsa-ease);
}

/* Divi's JS drives this element's height and padding from measured values;
   auto height + no padding lets the flex centring above own the geometry.
   (Applies at every width — the mobile hamburger centres the same way.)
   position: static matters: Divi absolutely positions the logo container
   (et_header_style_left), which pulls it out of flex flow entirely — the
   centring would only ever hold by coincidence. Static makes it a real flex
   item. The logo_helper span is Divi's old vertical-align shim; inert here. */
#main-header .logo_container {
  position: static !important;
  height: auto !important;
  width: auto !important;
}

#main-header .logo_container .logo_helper {
  display: none;
}

#main-header #et-top-navigation {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#main-header.et-fixed-header .container {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}

/* Divi sizes the logo as a percentage of a JS-measured header height; pin it
   instead so it matches the prototype at every scroll state. */
body #main-header #logo,
body.et_pb_svg_logo #main-header #logo {
  height: 52px !important;
  max-height: none !important;
  width: auto !important;
  transition: height 0.3s var(--wbsa-ease);
}

body #main-header.et-fixed-header #logo,
body.et_pb_svg_logo #main-header.et-fixed-header #logo {
  height: 44px !important;
}

@media (max-width: 640px) {
  body #main-header #logo,
  body.et_pb_svg_logo #main-header #logo {
    height: 42px !important;
  }
  body #main-header.et-fixed-header #logo,
  body.et_pb_svg_logo #main-header.et-fixed-header #logo {
    height: 40px !important;
  }
}

.logo_container {
  height: auto !important;
}

/* Desktop nav layout only. Below Divi's 980px breakpoint Divi hides #top-menu-nav
   and shows the hamburger instead — laying these out with flex at every width
   would override that and leave the desktop menu spilling off-screen. */
@media (min-width: 981px) {
  #et-top-navigation {
    padding-top: 0 !important;
    display: flex;
    align-items: center;
    gap: 1.7rem;
  }

  #top-menu-nav,
  #top-menu {
    display: flex;
    align-items: center;
  }

  #top-menu {
    gap: 1.7rem;
  }

  #top-menu li {
    padding-right: 0 !important;
    margin: 0;
  }
}

/* Nav links: white, with the gold underline wiping in from the left. */
#top-menu > li > a,
#main-header #top-menu > li > a {
  color: #fff !important;
  font-family: var(--wbsa-font-body);
  font-weight: 600;
  font-size: 0.93rem;
  opacity: 0.92;
  position: relative;
  padding-bottom: 0.25rem !important;
  text-transform: none;
}

#top-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--wbsa-gold);
  transition: right 0.25s var(--wbsa-ease);
}

#top-menu > li > a:hover::after,
#top-menu > li.current-menu-item > a::after,
#top-menu > li.current_page_item > a::after,
#top-menu > li.current-menu-ancestor > a::after {
  right: 0;
}

#top-menu > li > a:hover,
#top-menu > li.current-menu-item > a {
  opacity: 1;
}

/* Divi draws its own hover underline on menu items — suppress it. */
#top-menu li a:before,
#top-menu > li.current-menu-item > a:before {
  display: none !important;
}

/* The gold "Find a School" call to action, added as a menu item whose CSS
   Classes field is set to wbsa-nav-cta.
   #main-header is repeated in the selector because the nav-link colour rule above
   already carries two IDs (#main-header #top-menu) — without matching that weight
   the white link colour wins and the gold button gets unreadable white text. */
#main-header #top-menu > li.wbsa-nav-cta > a,
#main-header #mobile_menu li.wbsa-nav-cta > a,
#main-header .et_mobile_menu li.wbsa-nav-cta > a {
  background-color: var(--wbsa-gold) !important;
  color: var(--wbsa-navy) !important;
  font-weight: 700;
  padding: 0.7em 1.4em !important;
  border-radius: var(--wbsa-radius-sm);
  opacity: 1;
  transition: background-color 0.2s var(--wbsa-ease), transform 0.2s var(--wbsa-ease);
}

#main-header #top-menu > li.wbsa-nav-cta > a:hover {
  background-color: var(--wbsa-gold-600) !important;
  color: var(--wbsa-navy) !important;
  transform: translateY(-2px);
}

#main-header #top-menu > li.wbsa-nav-cta > a::after {
  display: none;
}

/* Dropdowns. */
#top-menu li ul.sub-menu,
#top-menu li .sub-menu {
  background-color: var(--wbsa-navy) !important;
  border-top: 3px solid var(--wbsa-gold) !important;
  box-shadow: var(--wbsa-shadow-lg);
  padding: 0.6rem 0 !important;
}

#top-menu li ul.sub-menu li a {
  color: var(--wbsa-on-dark) !important;
  font-weight: 600;
  width: 220px;
}

#top-menu li ul.sub-menu li a:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.06);
  opacity: 1;
}

/* Mobile. */
#et_mobile_nav_menu {
  margin-left: 0;
}

#et_mobile_nav_menu .mobile_nav .select_page {
  display: none;
}

.mobile_menu_bar:before,
#et_mobile_nav_menu .mobile_menu_bar:before {
  color: #fff !important;
  font-size: 32px;
}

#mobile_menu,
.et_mobile_menu {
  background-color: var(--wbsa-navy) !important;
  border-top: 3px solid var(--wbsa-gold) !important;
  box-shadow: var(--wbsa-shadow-lg);
  padding: 0.5rem 1.5rem 1.25rem !important;
}

.et_mobile_menu li a {
  color: #fff !important;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 0.9rem 0 !important;
}

.et_mobile_menu li.wbsa-nav-cta {
  margin-top: 1rem;
}

.et_mobile_menu li.wbsa-nav-cta > a {
  border-bottom: 0 !important;
  text-align: center;
  display: block;
}

.et_mobile_menu li a:hover {
  background-color: rgba(255, 255, 255, 0.06);
  opacity: 1;
}

@media (max-width: 980px) {
  #et-top-navigation {
    gap: 0;
  }
}

/* Divi's "back to top" button, restyled to the brand. */
.et_pb_scroll_top {
  background: var(--wbsa-navy) !important;
  color: #fff !important;
  border-radius: var(--wbsa-radius-sm) !important;
}

/* ------------------------------------------------------ 13. Footer */

.et-l--footer {
  background-color: var(--wbsa-navy-900);
  color: var(--wbsa-on-dark-dim);
  font-size: 0.92rem;
}

.et-l--footer .et_pb_section {
  background-color: transparent;
  padding: 4rem 0 2rem;
}

.et-l--footer,
.et-l--footer p,
.et-l--footer .et_pb_text {
  color: var(--wbsa-on-dark-dim);
}

.et-l--footer h1,
.et-l--footer h2,
.et-l--footer h3,
.et-l--footer h4,
.et-l--footer h5,
.et-l--footer h6 {
  color: #fff;
  font-family: var(--wbsa-font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding-bottom: 0;
}

.et-l--footer a {
  color: var(--wbsa-on-dark-dim);
}

.et-l--footer a:hover {
  color: var(--wbsa-gold);
}

/* Stacked footer link lists, built as a Text module of <a> tags. */
.wbsa-footer-links a {
  display: block;
  padding: 0.28rem 0;
}

.wbsa-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.4rem;
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: #7c93af;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.wbsa-footer-bottom p {
  padding-bottom: 0;
}

.et-l--footer .wbsa-logo img {
  height: 50px;
  margin-bottom: 0.4rem;
}

/* Divi native footer fallback. */
#main-footer {
  background-color: var(--wbsa-navy-900);
}

#footer-bottom {
  background-color: rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------------------------
   13b. Member school profiles and the member editor (WBSA Members plugin)

   The profile template and editor page are plain theme markup, not Divi
   sections, so they get their own container and section rhythm here.
   --------------------------------------------------------------------------- */

.wbsa-container {
  width: min(var(--wbsa-container), 92vw);
  margin-inline: auto;
}

.wbsa-plain-section {
  padding: var(--wbsa-pad-y) 0;
}

/* Profile banner: the school's logo on a white card above its name. */
body .wbsa-profile-banner .wbsa-container {
  position: relative;
  z-index: 2;
}

.wbsa-profile-logo {
  width: 132px;
  height: 132px;
  margin: 0 auto 1.4rem;
  background: #fff;
  border-radius: var(--wbsa-radius);
  box-shadow: var(--wbsa-shadow);
  display: grid;
  place-items: center;
  padding: 14px;
}

.wbsa-profile-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.wbsa-profile-description {
  margin-bottom: 2.5rem;
}

/* Attribute badges on the profile banner: light glass chips on the gradient. */
ul.wbsa-profile-tags {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.wbsa-profile-tags li {
  font-family: var(--wbsa-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.32em 0.9em;
}

/* The photo gallery grid, shared by the public profile and the editor. */
.wbsa-gallery,
.wbsa-editor-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 900px) {
  .wbsa-gallery,
  .wbsa-editor-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .wbsa-gallery,
  .wbsa-editor-gallery {
    grid-template-columns: 1fr;
  }
}

.wbsa-gallery-item {
  display: block;
  border-radius: var(--wbsa-radius);
  overflow: hidden;
  box-shadow: var(--wbsa-shadow-sm);
  transition: transform 0.25s var(--wbsa-ease), box-shadow 0.25s var(--wbsa-ease);
}

.wbsa-gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--wbsa-shadow);
}

.wbsa-gallery-item img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.wbsa-profile-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Directory card logo. */
.wbsa-directory .wbsa-school-logo {
  display: block;
  height: 44px;
  margin-bottom: 0.55rem;
}

.wbsa-directory .wbsa-school-logo img {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* --------------------------------------------------- the member editor */

.wbsa-editor,
.wbsa-editor-gate {
  max-width: 760px;
  margin-inline: auto;
}

.wbsa-editor-gate {
  text-align: center;
  background: #fff;
  border: 1px solid var(--wbsa-mist);
  border-radius: var(--wbsa-radius);
  box-shadow: var(--wbsa-shadow-sm);
  padding: 2.5rem 2rem;
}

.wbsa-editor-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.wbsa-editor-head h2 {
  margin: 0;
  padding: 0;
}

.wbsa-editor-view {
  font-weight: 700;
  font-size: 0.9rem;
}

.wbsa-editor fieldset.wbsa-editor-section {
  border: 1px solid var(--wbsa-mist);
  border-radius: var(--wbsa-radius);
  background: #fff;
  box-shadow: var(--wbsa-shadow-sm);
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 0 0 1.5rem;
}

.wbsa-editor legend {
  font-family: var(--wbsa-font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wbsa-blue);
  padding: 0 0.6em;
}

.wbsa-editor-logo {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wbsa-editor-logo-current {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  background: var(--wbsa-cloud);
  border: 1px solid var(--wbsa-mist);
  border-radius: var(--wbsa-radius-sm);
  padding: 10px;
}

.wbsa-editor-logo-current img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.wbsa-editor-logo .wbsa-field {
  flex: 1 1 260px;
  padding-bottom: 0 !important;
}

.wbsa-editor input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.6em 0.7em;
  border: 1px dashed var(--wbsa-stone);
  border-radius: var(--wbsa-radius-sm);
  background: var(--wbsa-cloud);
  font-family: var(--wbsa-font-body);
  font-size: 0.9rem;
}

.wbsa-editor input[type="file"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Editor gallery thumbs with their remove toggles. */
.wbsa-editor-photo {
  position: relative;
  display: block;
  border-radius: var(--wbsa-radius-sm);
  overflow: hidden;
  border: 1px solid var(--wbsa-mist);
  cursor: pointer;
}

.wbsa-editor-photo img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.wbsa-editor-photo-remove {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.7em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wbsa-slate);
  background: var(--wbsa-cloud);
}

/* Make it obvious which photos are marked for removal. */
.wbsa-editor-photo:has(input:checked) {
  border-color: var(--wbsa-gold-600);
}

.wbsa-editor-photo:has(input:checked) img {
  opacity: 0.35;
}

.wbsa-editor-photo:has(input:checked) .wbsa-editor-photo-remove {
  background: var(--wbsa-gold);
  color: var(--wbsa-navy);
}

.wbsa-editor-foot {
  margin-top: 1.5rem;
  text-align: center;
}

/* ------------------------------------------------------ 14. Motion */

/* Only hide content once JS is confirmed present, so a JS failure can never
   leave a blank page. */
html.wbsa-js .wbsa-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--wbsa-ease), transform 0.6s var(--wbsa-ease);
  will-change: opacity, transform;
}

html.wbsa-js .wbsa-reveal.wbsa-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

html.wbsa-js .wbsa-d1 {
  transition-delay: 0.08s;
}

html.wbsa-js .wbsa-d2 {
  transition-delay: 0.16s;
}

html.wbsa-js .wbsa-d3 {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  html.wbsa-js .wbsa-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body .et_pb_button:hover,
  body .wbsa-card:hover,
  body .wbsa-event:hover,
  .wbsa-directory .wbsa-school:hover {
    transform: none;
  }
}

/* ------------------------------------------ 15. Divi Builder niceties */

/* Inside the Builder the header must not float over the editing canvas, and
   reveal animations must never hide what you're editing. */
.et-fb .et-l--header {
  position: relative;
}

.et-fb .wbsa-reveal {
  opacity: 1 !important;
  transform: none !important;
}

.et-fb body .wbsa-hero,
.et-fb body .wbsa-banner {
  padding-top: clamp(4rem, 8vw, 7rem);
}

/* Screen-reader-only text, in case the parent theme's copy isn't loaded. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}