/* ==========================================================================
   wave-brand.css — the WAVE Swim School design system
   --------------------------------------------------------------------------
   ONE stylesheet for every public WAVE page, on BOTH hosts:
     - waveswimtt.com       (this repo: assets/css/wave-brand.css — the source)
     - app.waveswimtt.com   (nnerb: web/public/wave/css/wave-brand.css — a copy)
   Edit it here, then copy it verbatim into nnerb. The header and footer
   partials are shared the same way (php/header2.php, php/footer.php and
   php/call_in_action.php ↔ nnerb views/wave_custom/partials/header.php, footer.php), so a visitor
   crossing from the marketing site into the app sees no seam. The reasoning
   behind each decision is in docs/design/public-uplift.md.

   Scope rules, so this file is safe to load on top of the purchased theme
   and on nnerb pages that have their own styles:
     - Every component is namespaced .wv-*; nothing here styles a bare tag
       except inside .wv-page (the body class of the marketing pages).
     - Tokens live on :root as --wv-*; nothing else defines --wv-*.
   ========================================================================== */

:root {
  /* Palette from the WAVE designer brand brief (Sept 2026): aqua and ocean blue from the
     logo's water, deep navy for text, warm orange from the "Swim School" descriptor.
     Working palette, not yet official codes — see docs/design/public-uplift.md.
     Contrast (WCAG 2.2): never put white text on aqua or orange. */
  --wv-aqua-brand: #55BCC3;    /* brand fields, curves, ripples — decoration only, never text */
  --wv-aqua-deep: #1F7F87;     /* aqua when it has to carry text (4.7:1 on white) */
  --wv-blue: #2E73B5;          /* ocean blue: links, secondary buttons (5.0:1 on white) */
  --wv-blue-deep: #245E96;     /* hover / pressed (6.7:1) */
  --wv-blue-ink: #153A56;      /* deep navy: headings and structure (11.9:1) */
  --wv-orange: #E7793F;        /* warm orange: the ONE primary action per view */
  --wv-orange-hover: #EC8A55;
  --wv-on-orange: #0F2C42;     /* text on orange (4.9:1); white on this orange fails */

  /* Soft surfaces */
  --wv-sky: #E8F1F9;           /* pale ocean, for chips and hovers */
  --wv-aqua: #E3F5F6;          /* pale aqua tint */
  --wv-sand: #FDF1E9;          /* warm tint for family / community callouts */

  /* Neutrals */
  --wv-text: #3D5568;          /* body copy (7.8:1 on white) */
  --wv-muted: #56707F;         /* secondary copy (5.2:1 on white, 5.0:1 on pale aqua) */
  --wv-line: #DCE8EE;
  --wv-surface: #FFFFFF;
  --wv-page: #F2FBFC;          /* pale aqua section background */

  /* Type — the brief's pairing: Poppins SemiBold for headings, Nunito Sans for body. */
  --wv-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wv-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wv-step--1: 0.875rem;
  --wv-step-0: 1.0625rem;      /* 17px body */
  --wv-step-1: 1.25rem;
  --wv-step-2: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
  --wv-step-3: clamp(1.625rem, 1.25rem + 1.6vw, 2.25rem);
  --wv-step-4: clamp(2rem, 1.35rem + 2.8vw, 3.25rem);

  /* Shape and depth — rounded panels, light shadows (the brief: no heavy shadows). */
  --wv-radius-sm: 10px;
  --wv-radius: 18px;
  --wv-radius-lg: 28px;
  --wv-radius-pill: 999px;
  --wv-shadow-sm: 0 1px 2px rgba(21, 58, 86, .06);
  --wv-shadow: 0 1px 2px rgba(21, 58, 86, .05), 0 8px 24px rgba(21, 58, 86, .07);
  --wv-shadow-lift: 0 2px 4px rgba(21, 58, 86, .05), 0 14px 32px rgba(21, 58, 86, .10);

  /* Spacing — an 8px grid. */
  --wv-space-1: .5rem;
  --wv-space-2: 1rem;
  --wv-space-3: 1.5rem;
  --wv-space-4: 2rem;
  --wv-space-5: 3rem;
  --wv-space-6: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  --wv-container: 1180px;
  --wv-header-h: 72px;
  --wv-focus: 0 0 0 3px #fff, 0 0 0 6px var(--wv-blue);
  --wv-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   Page base — only for pages that opt in with <body class="wv-page">
   ========================================================================== */

.wv-page {
  font-family: var(--wv-font-body);
  font-size: var(--wv-step-0);
  line-height: 1.65;
  color: var(--wv-text);
  background: var(--wv-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wv-page h1, .wv-page h2, .wv-page h3, .wv-page h4,
.wv-page .title, .wv-page .sub-title {
  font-family: var(--wv-font-display);
  color: var(--wv-blue-ink);
  letter-spacing: -.01em;
}
.wv-page p:not([class]) { color: var(--wv-text); }

/* Minimal reset for pages that no longer load the theme's Bootstrap. */
body.wv-page { margin: 0; }
html:has(.wv-page) { scroll-behavior: smooth; }
.wv-page [id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html:has(.wv-page) { scroll-behavior: auto; } }
.wv-page *, .wv-page *::before, .wv-page *::after { box-sizing: border-box; }
.wv-page img { max-width: 100%; height: auto; }
.wv-page main a:not([class]) { color: var(--wv-blue); text-decoration: underline; text-underline-offset: 3px; }
.wv-page a:focus-visible,
.wv-page button:focus-visible,
.wv-page summary:focus-visible,
.wv-page input:focus-visible,
.wv-page select:focus-visible,
.wv-page textarea:focus-visible { outline: none; box-shadow: var(--wv-focus); border-radius: 6px; }

.wv-container {
  width: 100%;
  max-width: var(--wv-container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
.wv-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.wv-skip {
  position: absolute; left: 12px; top: -60px; z-index: 1001;
  padding: 10px 16px; border-radius: var(--wv-radius-sm);
  background: var(--wv-blue-ink); color: #fff !important; font-weight: 700;
}
.wv-skip:focus { top: 12px; }

/* ==========================================================================
   Buttons — one primary (orange) per view; everything else is quieter.
   Minimum 48px tall so every action is a comfortable thumb target.
   ========================================================================== */

.wv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .75rem 1.5rem;
  border: 2px solid transparent; border-radius: var(--wv-radius-pill);
  font-family: var(--wv-font-display); font-size: 1.0625rem; font-weight: 600;
  line-height: 1.1; letter-spacing: .01em; text-decoration: none !important;
  cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--wv-ease), color .18s var(--wv-ease),
              border-color .18s var(--wv-ease), transform .18s var(--wv-ease), box-shadow .18s var(--wv-ease);
}
.wv-btn:hover { transform: translateY(-1px); }
.wv-btn:active { transform: translateY(0); }
.wv-btn:focus-visible { outline: none; box-shadow: var(--wv-focus); }
.wv-btn svg { width: 1.1em; height: 1.1em; flex: none; }

.wv-btn--primary { background: var(--wv-orange); color: var(--wv-on-orange) !important; }
.wv-btn--primary:hover { background: var(--wv-orange-hover); color: var(--wv-on-orange) !important; }
.wv-btn--blue { background: var(--wv-blue); color: #fff !important; }
.wv-btn--blue:hover { background: var(--wv-blue-deep); color: #fff !important; }
.wv-btn--outline { background: transparent; border-color: currentColor; color: var(--wv-blue) !important; }
.wv-btn--outline:hover { background: var(--wv-sky); color: var(--wv-blue-deep) !important; }
.wv-btn--light { background: #fff; color: var(--wv-blue) !important; }
.wv-btn--light:hover { background: var(--wv-sky); }
.wv-btn--glass { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); color: #fff !important; backdrop-filter: blur(6px); }
.wv-btn--glass:hover { background: rgba(255, 255, 255, .24); color: #fff !important; }
.wv-btn--sm { min-height: 40px; padding: .5rem 1.1rem; font-size: .95rem; }
.wv-btn--block { width: 100%; }

.wv-link {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--wv-font-display); font-weight: 600; color: var(--wv-blue) !important;
  text-decoration: none !important;
}
.wv-link::after { content: "→"; transition: transform .18s var(--wv-ease); }
.wv-link:hover::after { transform: translateX(3px); }

/* ==========================================================================
   Header — identical on waveswimtt.com and app.waveswimtt.com
   ========================================================================== */

.wv-header {
  position: sticky; top: 0; z-index: 1000;
  font-family: var(--wv-font-body);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--wv-line);
}
@supports not (backdrop-filter: blur(1px)) { .wv-header { background: #fff; } }
/* On desktop the contact strip scrolls away and only the nav stays pinned. */
@media (min-width: 1200px) { .wv-header { top: -38px; } }

.wv-utility {
  background: var(--wv-blue-ink); color: #E3EEF3; font-size: .875rem;
}
.wv-utility .wv-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.wv-utility a { color: #fff !important; text-decoration: none !important; font-weight: 600; }
.wv-utility a:hover { text-decoration: underline !important; }
.wv-utility__group { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.wv-utility__item { display: inline-flex; align-items: center; gap: .4rem; }
.wv-utility svg { width: 15px; height: 15px; opacity: .85; flex: none; }
.wv-utility__muted { color: #A9C2CF; }

.wv-nav { display: flex; align-items: center; gap: 1rem; min-height: var(--wv-header-h); }
.wv-nav__logo { display: inline-flex; align-items: center; flex: none; }
.wv-nav__logo img { display: block; width: 123px; height: auto; }
.wv-nav__menu { display: flex; align-items: center; gap: 0; margin: 0 0 0 auto; padding: 0; list-style: none; }
.wv-nav__menu a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem;
  border-radius: var(--wv-radius-pill); white-space: nowrap;
  font-family: var(--wv-font-display); font-size: 1.0625rem; font-weight: 700;
  color: var(--wv-blue-ink) !important; text-decoration: none !important;
  transition: background-color .15s var(--wv-ease), color .15s var(--wv-ease);
}
.wv-nav__menu a:hover { background: var(--wv-sky); color: var(--wv-blue) !important; }
.wv-nav__menu a[aria-current="page"] { color: var(--wv-blue) !important; background: var(--wv-sky); }
.wv-nav__actions { display: flex; align-items: center; gap: .5rem; margin-left: .75rem; }
.wv-nav__signin { font-family: var(--wv-font-display); font-weight: 700; color: var(--wv-blue) !important; text-decoration: none !important; padding: 0 .75rem; min-height: 44px; display: inline-flex; align-items: center; }
.wv-nav__signin:hover { text-decoration: underline !important; }
.wv-nav__toggle {
  display: none; margin-left: auto; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 12px; background: var(--wv-sky); color: var(--wv-blue-ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.wv-nav__toggle svg { width: 24px; height: 24px; }
.wv-nav__toggle .wv-icon-close { display: none; }
.wv-nav__toggle[aria-expanded="true"] .wv-icon-open { display: none; }
.wv-nav__toggle[aria-expanded="true"] .wv-icon-close { display: block; }
.wv-nav__drawer-extra { display: none; }

@media (max-width: 1199.98px) {
  .wv-utility { display: none; }
  .wv-nav { min-height: 64px; }
  .wv-nav__logo img { width: 104px; }
  .wv-nav__toggle { display: inline-flex; margin-left: 0; }
  .wv-nav__actions .wv-nav__signin { display: none; }
  .wv-nav__actions { margin-left: auto; }
  .wv-nav__actions .wv-btn { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; }
  .wv-nav__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--wv-line); box-shadow: var(--wv-shadow);
    padding: .5rem clamp(16px, 4vw, 32px) 1.25rem;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .wv-nav__panel[hidden] { display: none; }
  .wv-nav__menu { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .wv-nav__menu a { min-height: 52px; padding: 0 .75rem; border-radius: 12px; font-size: 1.125rem; }
  .wv-nav__drawer-extra { display: grid; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--wv-line); }
  .wv-nav__drawer-extra a:not(.wv-btn) { color: var(--wv-blue) !important; font-weight: 700; text-decoration: none !important; }
}
@media (min-width: 1200px) {
  .wv-nav__panel { display: flex !important; align-items: center; flex: 1; }
}
@media (max-width: 380px) {
  .wv-nav__actions .wv-btn { padding-inline: .8rem; }
}

/* ==========================================================================
   Page header — the banner at the top of every inner page
   ========================================================================== */

.wv-pagehead {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--wv-blue-ink) 0%, var(--wv-blue) 100%);
  color: #fff; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 clamp(3.5rem, 3rem + 3vw, 5.5rem);
}
.wv-pagehead::after { /* the wave the whole brand is named for */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 48px;
  background: var(--wv-surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 28c150-30 300-30 450 0s300 30 450 0 225-22 300-12v32H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 48' preserveAspectRatio='none'%3E%3Cpath d='M0 28c150-30 300-30 450 0s300 30 450 0 225-22 300-12v32H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.wv-pagehead__crumbs { display: flex; gap: .5rem; margin: 0 0 .75rem; padding: 0; list-style: none; font-size: .9rem; color: #dce7fb; }
.wv-pagehead__crumbs a { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }
.wv-pagehead__crumbs li + li::before { content: "›"; margin-right: .5rem; opacity: .7; }
.wv-pagehead h1 { font-family: var(--wv-font-display); font-size: var(--wv-step-4); font-weight: 600; line-height: 1.08; margin: 0; color: #fff !important; }
.wv-pagehead p { max-width: 60ch; margin: .75rem 0 0; font-size: var(--wv-step-1); color: #eaf1fd !important; }

/* ==========================================================================
   Sections and headings
   ========================================================================== */

.wv-section { padding-block: var(--wv-space-6); }
.wv-section--sky { background: var(--wv-page); }
.wv-section--tight { padding-block: var(--wv-space-5); }
.wv-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .75rem;
  font-family: var(--wv-font-display); font-size: .875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--wv-aqua-deep);
}
.wv-eyebrow::before { /* a small double wave — echoes the old section-header shape */
  content: ""; width: 26px; height: 10px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M1 3c3-2.5 5-2.5 8 0s5 2.5 8 0 5-2.5 8 0M1 8c3-2.5 5-2.5 8 0s5 2.5 8 0 5-2.5 8 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%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 26 10'%3E%3Cpath d='M1 3c3-2.5 5-2.5 8 0s5 2.5 8 0 5-2.5 8 0M1 8c3-2.5 5-2.5 8 0s5 2.5 8 0 5-2.5 8 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wv-h2 { font-family: var(--wv-font-display); font-size: var(--wv-step-3); font-weight: 600; line-height: 1.15; margin: 0; color: var(--wv-blue-ink); }
.wv-lead { font-size: var(--wv-step-1); line-height: 1.55; color: var(--wv-muted); max-width: 60ch; margin: .75rem 0 0; }
.wv-sectionhead { margin-bottom: var(--wv-space-4); }
.wv-sectionhead--center { text-align: center; }
.wv-sectionhead--center .wv-lead { margin-inline: auto; }
.wv-sectionhead--split { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }

/* ==========================================================================
   Hero (homepage) — the big full-width WAVE photo with the interactive water
   ripple, as on the original site (families asked to keep it). The photo is the
   hero's own background so jquery.ripples can animate it (php/ripple.php); a
   navy scrim sits between the ripple canvas and the words so text stays readable.
   ========================================================================== */

.wv-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: min(88vh, 820px);
  padding: clamp(3rem, 2rem + 5vw, 6rem) 0 clamp(5rem, 4rem + 5vw, 8rem);
  background: var(--wv-blue-ink) center 40% / cover no-repeat;
  color: #fff;
}
.wv-hero::before { /* scrim: above the ripple canvas (z-index -1), below the words */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(21, 58, 86, .78) 0%, rgba(21, 58, 86, .5) 42%, rgba(21, 58, 86, .08) 75%);
}
.wv-hero::after { /* the wave the brand is named for */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px; z-index: 1; pointer-events: none;
  background: var(--wv-surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34c150-34 300-34 450 0s300 34 450 0 225-26 300-14v44H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34c150-34 300-34 450 0s300 34 450 0 225-26 300-14v44H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.wv-hero > .wv-container { position: relative; z-index: 2; }
.wv-hero__content { max-width: 720px; }
.wv-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem;
  font-family: var(--wv-font-display); font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fff !important; }
.wv-hero__eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--wv-aqua-brand); }
.wv-hero h1 { font-family: var(--wv-font-display); font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; margin: 0; color: #fff !important;
  text-shadow: 0 2px 24px rgba(21, 58, 86, .35); }
.wv-hero h1 .wv-accent { color: #9FE3E8; } /* light aqua: 8.3:1 on the scrim navy */
.wv-hero__sub { margin: 1.1rem 0 0; font-size: var(--wv-step-1); line-height: 1.55; color: #EAF3F7 !important; max-width: 48ch; }
.wv-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.wv-hero__proof { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-weight: 700; color: #fff; }
.wv-hero__proof li { display: inline-flex; align-items: center; gap: .45rem; }
.wv-hero__proof svg { width: 20px; height: 20px; color: var(--wv-aqua-brand); flex: none; }

@media (max-width: 767.98px) {
  .wv-hero { min-height: 0; background-position: 60% 40%; }
  .wv-hero::before { background: linear-gradient(180deg, rgba(21, 58, 86, .45) 0%, rgba(21, 58, 86, .82) 65%); }
  .wv-hero__actions .wv-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.wv-grid { display: grid; gap: clamp(1rem, .6rem + 1.2vw, 1.5rem); }
.wv-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wv-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.wv-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--wv-surface); border: 1px solid var(--wv-line); border-radius: var(--wv-radius);
  box-shadow: var(--wv-shadow-sm); overflow: hidden;
  transition: transform .2s var(--wv-ease), box-shadow .2s var(--wv-ease), border-color .2s var(--wv-ease);
}
.wv-card--link:hover { transform: translateY(-4px); box-shadow: var(--wv-shadow-lift); border-color: #B9DCE0; }
.wv-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--wv-aqua); }
.wv-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--wv-ease); }
.wv-card--link:hover .wv-card__media img { transform: scale(1.04); }
.wv-card__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1.25rem 1.25rem 1.4rem; }
.wv-card__title { font-family: var(--wv-font-display); font-size: var(--wv-step-1); font-weight: 600; line-height: 1.25; margin: 0; color: var(--wv-blue-ink); }
.wv-card__title a { color: inherit !important; text-decoration: none !important; }
.wv-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the target */
.wv-card__text { margin: 0; color: var(--wv-muted); font-size: 1rem; line-height: 1.55; }
.wv-card__foot { margin-top: auto; padding-top: .5rem; }
.wv-card__foot .wv-link { position: relative; z-index: 1; }

.wv-tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .7rem; border-radius: var(--wv-radius-pill);
  background: var(--wv-sky); color: var(--wv-blue-deep);
  font-family: var(--wv-font-display); font-size: .875rem; font-weight: 600;
}
.wv-tag--warm { background: var(--wv-sand); color: #8a3d00; }

/* Feature (icon + text) */
.wv-feature { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border-radius: var(--wv-radius); background: var(--wv-surface); border: 1px solid var(--wv-line); }
.wv-feature__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--wv-sky); color: var(--wv-blue); }
.wv-feature__icon svg { width: 24px; height: 24px; }
.wv-feature h3 { font-family: var(--wv-font-display); font-size: 1.125rem; font-weight: 600; margin: 0 0 .2rem; color: var(--wv-blue-ink); }
.wv-feature p { margin: 0; color: var(--wv-muted); font-size: 1rem; line-height: 1.5; }

/* Split media + text */
.wv-split { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 992px) { .wv-split { grid-template-columns: 1.05fr 1fr; } .wv-split--flip > :first-child { order: 2; } }
.wv-collage { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 5 / 4; }
.wv-collage img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wv-radius); box-shadow: var(--wv-shadow); }
.wv-collage img:first-child { grid-row: 1 / 3; }
.wv-stack { display: grid; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }

/* ==========================================================================
   Steps — "how enrolment works"
   ========================================================================== */

.wv-steps { counter-reset: wv-step; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wv-step { counter-increment: wv-step; position: relative; padding: 1.5rem 1.25rem 1.4rem; border-radius: var(--wv-radius); background: var(--wv-surface); border: 1px solid var(--wv-line); }
.wv-step::before {
  content: counter(wv-step); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: .9rem;
  border-radius: 50%; background: var(--wv-blue); color: #fff; font-family: var(--wv-font-display); font-weight: 600; font-size: 1.2rem;
}
.wv-step h3 { font-family: var(--wv-font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 .3rem; color: var(--wv-blue-ink); }
.wv-step p { margin: 0; color: var(--wv-muted); font-size: 1rem; line-height: 1.5; }
.wv-step--done::before { background: var(--wv-orange); color: var(--wv-blue-ink); }

/* ==========================================================================
   People (coaches)
   ========================================================================== */

.wv-person { text-align: left; }
.wv-person .wv-card__media { aspect-ratio: 1 / 1; }
.wv-person__role { margin: 0; font-weight: 700; color: var(--wv-blue); font-size: .95rem; }
.wv-person__cred { margin: 0; color: var(--wv-muted); font-size: .95rem; }

/* ==========================================================================
   Locations
   ========================================================================== */

.wv-place { display: flex; gap: .85rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: var(--wv-radius); background: var(--wv-surface); border: 1px solid var(--wv-line); }
.wv-place svg { flex: none; width: 22px; height: 22px; color: var(--wv-orange); margin-top: 2px; }
.wv-place strong { display: block; font-family: var(--wv-font-display); font-weight: 600; color: var(--wv-blue-ink); }
.wv-place span { color: var(--wv-muted); font-size: .95rem; }

/* ==========================================================================
   FAQ accordion (native <details>, no JS)
   ========================================================================== */

.wv-faq { display: grid; gap: .75rem; }
.wv-faq details { border: 1px solid var(--wv-line); border-radius: var(--wv-radius); background: var(--wv-surface); transition: box-shadow .2s var(--wv-ease), border-color .2s var(--wv-ease); }
.wv-faq details[open] { box-shadow: var(--wv-shadow-sm); border-color: #B9DCE0; }
.wv-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px; padding: 1rem 1.25rem; cursor: pointer; list-style: none;
  font-family: var(--wv-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--wv-blue-ink);
}
.wv-faq summary::-webkit-details-marker { display: none; }
.wv-faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--wv-sky); color: var(--wv-blue); font-size: 1.35rem; line-height: 1; transition: transform .2s var(--wv-ease);
}
.wv-faq details[open] summary::after { transform: rotate(45deg); }
.wv-faq summary h3 { margin: 0; font: inherit; color: inherit; letter-spacing: 0; }
.wv-faq__answer { padding: 0 1.25rem 1.25rem; color: var(--wv-text); }
.wv-faq__group { font-size: var(--wv-step-2); margin: 2.5rem 0 1rem; }
.wv-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.wv-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: var(--wv-radius-pill);
  background: var(--wv-sky); color: var(--wv-blue-deep) !important; font-family: var(--wv-font-display); font-weight: 600;
  text-decoration: none !important; transition: background-color .15s var(--wv-ease);
}
.wv-chip:hover { background: #D6E7F4; }
.wv-faq__answer p:last-child, .wv-faq__answer ul:last-child { margin-bottom: 0; }

/* ==========================================================================
   Call-to-action band — shared by both hosts (was php/call_in_action.php)
   ========================================================================== */

.wv-cta { padding-block: var(--wv-space-5); background: var(--wv-surface); }
.wv-cta__panel {
  position: relative; overflow: hidden; display: grid; gap: 1.5rem; align-items: center;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); border-radius: var(--wv-radius-lg);
  background: radial-gradient(120% 140% at 100% 0%, var(--wv-blue) 0%, #1F4F7A 55%, var(--wv-blue-ink) 100%);
  color: #fff; box-shadow: var(--wv-shadow);
}
@media (min-width: 992px) { .wv-cta__panel { grid-template-columns: 1.4fr auto; } }
.wv-cta__panel h2 { font-family: var(--wv-font-display); font-size: var(--wv-step-3); font-weight: 600; line-height: 1.12; margin: 0; color: #fff !important; }
.wv-cta__panel p { margin: .6rem 0 0; font-size: var(--wv-step-1); color: #e8eefb !important; max-width: 52ch; }
.wv-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.wv-cta__panel::after { /* decorative ripples */
  content: ""; position: absolute; right: -80px; bottom: -120px; width: 360px; height: 360px; border-radius: 50%;
  border: 2px solid rgba(85, 188, 195, .45); pointer-events: none;
  box-shadow: 0 0 0 36px rgba(85, 188, 195, .08), 0 0 0 38px rgba(85, 188, 195, .30), 0 0 0 80px rgba(85, 188, 195, .05), 0 0 0 82px rgba(85, 188, 195, .18);
}
@media (max-width: 575.98px) { .wv-cta__actions .wv-btn { flex: 1 1 100%; } }

/* ==========================================================================
   Footer — identical on both hosts
   ========================================================================== */

.wv-footer { font-family: var(--wv-font-body); background: var(--wv-blue-ink); color: #CFE0E8; font-size: .975rem; line-height: 1.6; }
.wv-footer a { color: #fff !important; text-decoration: none !important; }
.wv-footer a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.wv-footer__top { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 768px) { .wv-footer__top { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1100px) { .wv-footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.wv-footer__logo { display: inline-block; padding: 10px 14px; border-radius: 14px; background: #fff; }
.wv-footer__logo img { display: block; width: 123px; height: auto; }
.wv-footer__tagline { margin: 1rem 0 0; color: #E3EEF3; max-width: 32ch; }
.wv-footer h2 { font-family: var(--wv-font-display); font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wv-aqua-brand) !important; margin: 0 0 .9rem; }
.wv-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wv-footer__contact li { display: flex; gap: .6rem; align-items: flex-start; }
.wv-footer__contact svg { width: 18px; height: 18px; margin-top: 3px; flex: none; color: var(--wv-aqua-brand); }
.wv-footer__hours { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0; }
.wv-footer__hours dt { color: #E3EEF3; font-weight: 600; }
.wv-footer__hours dd { margin: 0; }
.wv-footer__social { display: flex !important; gap: .5rem !important; margin-top: 1.25rem !important; }
.wv-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.wv-footer__social a:hover { background: rgba(255, 255, 255, .2); text-decoration: none !important; }
.wv-footer__social svg { width: 20px; height: 20px; }
.wv-footer__partners { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.wv-footer__partners a { display: inline-flex; padding: 8px 12px; border-radius: 12px; background: #fff; }
.wv-footer__partners img { display: block; height: 34px; width: auto; }
.wv-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 1.1rem; font-size: .9rem; color: #A9C2CF; }
.wv-footer__bottom .wv-container { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.wv-footer__bottom a { color: #CFE0E8 !important; }

/* ==========================================================================
   Mobile action bar — the two things a parent on a phone most often wants
   ========================================================================== */

.wv-actionbar { display: none; }
@media (max-width: 767.98px) {
  .wv-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    display: grid; grid-template-columns: auto 1fr; gap: .6rem;
    padding: .6rem clamp(16px, 4vw, 32px) calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--wv-line);
    box-shadow: 0 -6px 20px rgba(21, 58, 86, .08);
    transform: translateY(0); transition: transform .25s var(--wv-ease);
  }
  .wv-actionbar.is-hidden { transform: translateY(110%); }
  .wv-actionbar .wv-btn { min-height: 48px; }
  /* Room under the footer only where the bar can cover it: the no-IntersectionObserver fallback,
     where the bar stays up. Otherwise the bar hides once the footer shows, so the room is never seen. */
  body.wv-bar-pad { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body.wv-bar-on .wv-nav__actions { visibility: hidden; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .wv-btn, .wv-card, .wv-card__media img, .wv-link::after, .wv-faq summary::after, .wv-actionbar { transition: none !important; }
  .wv-btn:hover, .wv-card--link:hover { transform: none; }
}

/* ==========================================================================
   Legacy bridges — make the purchased theme's inner-page pieces sit
   comfortably next to the new components until each page is rebuilt.
   ========================================================================== */

.wv-page .preloader, .wv-page .scrollToTop { display: none !important; }
.wv-page .hero-section .hero-area { min-height: 0; padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; background-position: center 35%; position: relative; }
.wv-page .hero-section .hero-area::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 58, 86, .78), rgba(46, 115, 181, .45)); }
.wv-page .hero-section .hero-area .container { position: relative; }
.wv-page .hero-section .title { font-family: var(--wv-font-display); font-weight: 600; font-size: var(--wv-step-4); color: #fff !important; text-align: left; }
.wv-page .section-header .title { font-family: var(--wv-font-display); font-weight: 600; }
.wv-page .custom-button { font-family: var(--wv-font-display); font-weight: 600; border-radius: var(--wv-radius-pill); text-transform: none; letter-spacing: .01em; }
.wv-page .padding-top { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.wv-page .padding-bottom { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }


/* ==========================================================================
   Swimmer pathway — "a pathway, not a compulsory ladder" (brand brief)
   ========================================================================== */

.wv-path { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; counter-reset: wv-path; }
@media (min-width: 768px) { .wv-path { grid-template-columns: repeat(3, 1fr) 1.35fr; } }
.wv-path__stage { counter-increment: wv-path; position: relative; padding: 1.25rem 1.2rem; border-radius: var(--wv-radius); background: var(--wv-surface); border: 1px solid var(--wv-line); }
.wv-path__stage::before {
  content: counter(wv-path); display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .75rem; border-radius: 50%;
  background: var(--wv-aqua-brand); color: var(--wv-blue-ink); font-family: var(--wv-font-display); font-weight: 600;
}
@media (min-width: 768px) {
  .wv-path__stage:not(:last-child)::after { /* a small current carrying you to the next stage */
    content: ""; position: absolute; top: 38px; right: -14px; width: 12px; height: 12px; z-index: 1;
    border-top: 2px solid var(--wv-aqua-brand); border-right: 2px solid var(--wv-aqua-brand); transform: rotate(45deg);
  }
}
.wv-path__stage h3 { font-family: var(--wv-font-display); font-size: 1.0625rem; font-weight: 600; margin: 0 0 .25rem; color: var(--wv-blue-ink); }
.wv-path__stage p { margin: 0; color: var(--wv-muted); font-size: .975rem; line-height: 1.5; }
.wv-path__stage--choice { background: var(--wv-sand); border-color: #F5DCCB; }
.wv-path__stage--choice::before { content: "4"; background: var(--wv-orange); color: var(--wv-on-orange); }
.wv-path__choices { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.wv-path__choices li { padding: .3rem .75rem; border-radius: var(--wv-radius-pill); background: #fff; font-weight: 700; font-size: .9rem; color: var(--wv-blue-ink); }

/* ==========================================================================
   Location cards
   ========================================================================== */

.wv-branch { border-top: 5px solid var(--wv-aqua-brand); }
.wv-branch__area { margin: 0; font-weight: 700; color: var(--wv-aqua-deep); font-size: .95rem; }
.wv-branch__addr { display: flex; gap: .5rem; align-items: flex-start; margin: .25rem 0 0; color: var(--wv-text); white-space: pre-line; }
.wv-branch__addr svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--wv-orange); }
.wv-note { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.25rem; padding: .9rem 1.1rem; border-radius: var(--wv-radius); background: var(--wv-surface); border: 1px dashed #B9DCE0; color: var(--wv-muted); font-size: .975rem; }

/* ==========================================================================
   WAVE family — community photo mosaic
   ========================================================================== */

.wv-mosaic { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
@media (min-width: 768px) { .wv-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; } }
.wv-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wv-radius); }
.wv-mosaic img:first-child { grid-column: span 2; grid-row: span 2; }
.wv-family { background: var(--wv-sand); }
.wv-family .wv-eyebrow { color: #A34A17; }

/* Long-form legal text: keep lines to a comfortable reading measure. */
.wv-page .privacy-area { max-width: 72ch; }
.wv-page .privacy-item .title { margin-top: 2rem; }

/* App pages (nnerb) use Bootstrap's .btn-primary for form actions. On WAVE pages the
   theme left it without a background; give it the brand's blue button treatment.
   Share-network links (#shareFacebook etc.) keep Bootstrap's size so they match their
   neighbours in the share dialog. */
.wv-page .btn.btn-primary:not([id^="share"]) {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7rem 1.5rem; border: 2px solid var(--wv-blue); border-radius: var(--wv-radius-pill);
  background: var(--wv-blue); color: #fff !important;
  font-family: var(--wv-font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.1;
}
.wv-page .btn.btn-primary:not([id^="share"]):hover { background: var(--wv-blue-deep); border-color: var(--wv-blue-deep); }
.wv-page .btn.btn-primary:focus-visible { outline: none; box-shadow: var(--wv-focus); }
.wv-page .btn.btn-primary:disabled { opacity: .6; }

.wv-nav__signin, .wv-nav__actions .wv-btn { white-space: nowrap; }