/* ============================================================
   Volaré — component layer (built to the approved visual direction).
   All classes are namespaced `.v-*` so they never collide with
   Kadence / Elementor / WooCommerce. Colours & radii come from
   tokens.css — no raw hex here.
   Contrast contract (F6) is enforced by which token each part uses.
   ============================================================ */

/* ---- Layout ---------------------------------------------------- */
.v-wrap{
  max-width:var(--v-maxw);
  margin-inline:auto;
  padding-inline:clamp(18px, 5vw, 40px);
}
.v-stack > * + *{ margin-top:1rem; }          /* vertical rhythm helper */
.v-section{ padding-block:clamp(40px, 7vw, 88px); }

/* ---- Typography (opt-in display classes; Kadence owns base headings) --- */
.v-eyebrow{
  font-family:var(--v-font-mono);
  font-size:.6875rem;               /* 11px */
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--v-teal);              /* teal = the text-safe brand accent */
}
.v-display{
  font-size:clamp(2rem, 5.4vw, 3.4rem);
  font-weight:700; line-height:1.1; letter-spacing:-.02em;
  color:var(--v-navy); text-wrap:balance;
}
.v-h2{
  font-size:clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight:700; letter-spacing:-.02em;
  color:var(--v-navy); text-wrap:balance;
}
.v-lead{ font-size:1.06rem; color:var(--v-muted); max-width:56ch; }
.v-muted{ color:var(--v-muted); }
/* Student reading register — long measure, generous leading (visual direction). */
.v-read{ font-size:1.18rem; line-height:1.75; color:var(--v-ink); max-width:44ch; }

/* ---- Buttons --------------------------------------------------- */
.v-btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-align:center;                /* both — so a wrapped label stays centred */
  gap:8px;
  min-height:44px;                  /* WCAG 2.5.8 comfortable target */
  padding:11px 20px;
  border:1.5px solid transparent; border-radius:999px;
  font-family:inherit; font-weight:600; font-size:.92rem; line-height:1.2;
  cursor:pointer; text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.v-btn:active{ transform:translateY(1px); }
.v-btn-primary{ background:var(--v-navy); color:var(--v-on-navy); }
.v-btn-primary:hover{ background:var(--v-navy-800); }
.v-btn-secondary{ background:var(--v-mint); color:var(--v-on-mint); }
.v-btn-secondary:hover{ background:var(--v-teal); color:var(--v-white); }
.v-btn-quiet{ background:transparent; color:var(--v-navy); border-color:var(--v-navy); }
.v-btn-quiet:hover{ background:var(--v-navy); color:var(--v-white); }
.v-btn-sun{ background:var(--v-sun); color:var(--v-on-sun); }
.v-btn-sun:hover{ filter:brightness(.96); }
/* Buttons never underline — override the theme's link-underline style (body links keep theirs). */
a.v-btn, a.v-btn:hover, a.v-btn:focus, a.v-btn:active,
a.v-audio-btn, a.v-audio-btn:hover, a.v-audio-btn:focus, a.v-audio-btn:active{ text-decoration:none !important; }

/* Big student-facing audio control (visual direction: 52px, heavy, bordered). */
.v-audio-btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  gap:9px; min-height:52px; padding:14px 26px;
  background:var(--v-sun); color:var(--v-navy);
  border:2px solid var(--v-navy); border-radius:999px;
  font-family:inherit; font-weight:700; font-size:1rem; cursor:pointer;
}

/* ---- Cards ----------------------------------------------------- */
.v-card{
  background:var(--v-paper); border:1px solid var(--v-line);
  border-radius:var(--v-r); padding:20px;
}
.v-card h3{ font-size:1rem; font-weight:700; color:var(--v-navy); margin:0 0 7px; }
.v-card p{ color:var(--v-muted); font-size:.9rem; margin:0; }

/* ---- Chips, stamps, codes, fields ------------------------------ */
.v-stamp{                            /* proficiency level stamp */
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--v-font-mono); font-size:.65625rem; /* 10.5px */
  letter-spacing:.09em; text-transform:uppercase;
  padding:5px 11px; border-radius:6px;
  border:1.5px dashed var(--v-teal); color:var(--v-teal);
  background:var(--v-mint-100);
}
.v-dest{                             /* destination / setting chip (real catalogue field) */
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:600; color:var(--v-navy);
  background:var(--v-sky); border:1px solid var(--v-sky-200);
  padding:5px 12px; border-radius:999px;
}
.v-code{                             /* class code (join-a-class) */
  display:inline-block; font-family:var(--v-font-mono);
  font-size:.95rem; font-weight:600; letter-spacing:.14em; color:var(--v-navy);
  background:var(--v-sun-100); border:1px dashed var(--v-sun);
  padding:6px 13px; border-radius:7px;
}
.v-field{                            /* text input skin */
  width:100%; font:inherit; font-size:.95rem; color:var(--v-ink);
  background:var(--v-paper); border:1.5px solid var(--v-line);
  border-radius:10px; padding:11px 14px;
}
.v-field::placeholder{ color:var(--v-muted); }
.v-field:focus-visible{ border-color:var(--v-navy); outline:3px solid var(--v-sky-200); outline-offset:0; }

/* ---- Grids ----------------------------------------------------- */
.v-grid3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:820px){ .v-grid3{ grid-template-columns:1fr; } }

/* ---- Flight-path progress (the signature brand device) ---------
   Usage: <div class="v-fp" style="--v-fp:62%"> with an optional
   <span class="v-fp-plane"> marker. The journey from the logo,
   used everywhere progress is shown. Motion is disabled under
   prefers-reduced-motion by the global rule in tokens.css. */
.v-fp{ position:relative; height:6px; }
.v-fp-track{
  position:absolute; inset:50% 0 auto 0; height:6px; transform:translateY(-50%);
  background:var(--v-line); border-radius:6px;
}
.v-fp-fill{
  position:absolute; inset:50% auto auto 0; height:6px; width:var(--v-fp, 0%);
  transform:translateY(-50%); border-radius:6px;
  background:linear-gradient(90deg, var(--v-mint), var(--v-teal));
  transition:width .4s ease;
}
.v-fp-legend{
  display:flex; justify-content:space-between; margin-top:6px;
  font-family:var(--v-font-mono); font-size:.65625rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--v-muted);
}

/* ---- Accessibility --------------------------------------------- */
/* Visually-hidden text that stays in the a11y tree; reveals when focused. */
.v-visually-hidden:where(:not(:focus-within, :active)){
  position:absolute !important; clip-path:inset(50%) !important;
  overflow:hidden !important; width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; border:0 !important; white-space:nowrap !important;
}
/* Strong, consistent keyboard focus ring on our interactive parts.
   Navy shows against the light page; on navy sections we swap to sun. */
.v-btn:focus-visible, .v-audio-btn:focus-visible, .v-dest:focus-visible{
  outline:3px solid var(--v-navy); outline-offset:2px;
}
.v-bg-navy :focus-visible, .v-bg-teal :focus-visible{ outline-color:var(--v-sun); }

/* ============================================================
   Home page — effects applied to the Elementor page's Global-Class
   elements. These are the treatments the Elementor V4 atomic style
   engine can't express cleanly: the self-hosted mono stack (its
   font-family transformer collapses a stack into one invalid family),
   gradients, and the hero tilt/shadow. Design-system tokens live in
   Elementor Global Classes; this block is only decorative page polish.
   Selectors match the classes emitted by scripts/build-home-elementor.php.
   ============================================================ */
.vg-eyebrow, .vg-stamp, .vg-num-label{ font-family:var(--v-font-mono); }
/* Hero band + Section-2 read as one continuous white→sky field.
   vh-* are element IDs (single-use hooks) — NOT classes — so Elementor's
   editor doesn't flag them as missing global classes. */
#vh-hero{ background:linear-gradient(180deg, #fff 0%, var(--v-sky) 100%); }
/* Book-cover placeholders — the approved sky→mint gradient (vg-cover IS a global class) */
.vg-cover{ background:linear-gradient(150deg, var(--v-sky-200), var(--v-mint-100)); }
/* Hero flourishes: tilt + soft shadow (drop-shadow follows the plane PNG alpha) */
#vh-plane{ transform:rotate(-2deg); filter:drop-shadow(0 10px 22px rgba(35,44,107,.25)); }
#vh-titlecard{ transform:rotate(2deg); box-shadow:0 24px 60px rgba(35,44,107,.16); }

/* ------------------------------------------------------------
   Footer social icons — resilience fix.
   WordPress loads the core Social-Links block stylesheet on demand,
   and the Kadence footer-widget context doesn't always trigger it
   (seen after cache clears / on the Elementor page). Without it the
   <ul> falls back to disc bullets and the SVG to a black fill. Pin the
   two rules that block stylesheet supplies so the footer is immune to it.
   ------------------------------------------------------------ */
ul.wp-block-social-links{ list-style:none; padding-left:0; margin-left:0; }
.wp-block-social-links .wp-social-link svg{ fill:currentColor; }

/* ============================================================
   Pricing page (scripts/build-pricing-elementor.php) — the
   treatments the V4 atomic engine can't express cleanly. Keyed to
   element IDs (#vp-*, single-use hooks — NOT classes, so the editor
   doesn't flag missing global classes) or to global-class labels.
   ============================================================ */
/* Mono labels (font-family transformer collapses a stack → one invalid family) */
.vg-plan-flag, .vg-pr-save, .vg-cmp-note{ font-family:var(--v-font-mono); }
/* Header: the same #fff→sky field as the home hero */
#vp-head{ background:linear-gradient(180deg, #fff 0%, var(--v-sky) 100%); }
/* Featured plan: heavier navy border + lifted shadow (an ID beats the .vg-plan
   1px line border by specificity, so no reverse-cascade class fight) */
#vp-teacher{ border:2px solid var(--v-navy); box-shadow:0 24px 60px rgba(35,44,107,.12); }
/* Full-width plan CTA — padding must sit inside the 100% width */
.vg-plan-cta{ box-sizing:border-box; }
/* Feature list: top rule + hanging ✓ (CSS pseudo, so no SMP-emoji sanitiser issue) */
.vg-plan-list{ border-top:1px solid var(--v-line); }
.vg-plan-li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--v-teal); font-weight:700; }
.vg-plan-save{ color:var(--v-teal); font-weight:600; }
/* Comparison table: row rules, the mono "per seat" note, and the mobile scroll wrapper */
.vg-cmp-row{ border-bottom:1px solid var(--v-line); }
.vg-cmp-note{ font-size:.62rem; letter-spacing:.05em; text-transform:uppercase; color:var(--v-muted); font-weight:600; }
#vp-cmp{ overflow-x:auto; }
#vp-cmptable{ min-width:560px; }
/* Plans + FAQ grids (atomic grid-template-columns isn't a first-class prop here) */
#vp-plans{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:start; }
#vp-faq{ display:grid; grid-template-columns:1fr 1fr; gap:22px 40px; max-width:900px; margin-inline:auto; }
@media (max-width:980px){ #vp-plans{ grid-template-columns:1fr; } }
@media (max-width:820px){ #vp-faq{ grid-template-columns:1fr; } }

/* ============================================================
   For Schools page (scripts/build-forschools-elementor.php) —
   layout grids atomic can't express, keyed to element IDs; plus the
   seat-recap strip's two-axis gaps and the recap ✓ bullet.
   ============================================================ */
#sch-head{ background:linear-gradient(180deg, #fff 0%, var(--v-sky) 100%); }
#sch-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
#sch-buy{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
#sch-tg{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
#sch-faq{ display:grid; grid-template-columns:1fr 1fr; gap:22px 40px; max-width:900px; margin-inline:auto; }
#sch-recap{ background:#fff; border:1px solid var(--v-line); border-radius:var(--v-r); padding:24px clamp(22px,4vw,36px); gap:16px 28px; }
#sch-recaplist{ gap:8px 18px; flex:2 1 320px; }
.vg-recap-li::before{ content:"\2713"; position:absolute; left:0; top:0; color:var(--v-teal); font-weight:700; }
@media (max-width:900px){ #sch-steps, #sch-buy{ grid-template-columns:1fr; } }
@media (max-width:820px){ #sch-tg, #sch-faq{ grid-template-columns:1fr; } }

/* ============================================================
   Free Sample page (scripts/build-freesample-elementor.php) —
   the 2-col offer grid, the form row, and the book-preview card's
   shadow/width. The email field is presentational (real Pro Form is
   Week-2). Book-cover gradient reuses .vg-cover (defined above).
   ============================================================ */
#smp-hero{ background:linear-gradient(180deg, #fff 0%, var(--v-sky) 100%); }
#smp-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
#smp-get{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
#smp-steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
#smp-faq{ display:grid; grid-template-columns:1fr 1fr; gap:22px 40px; max-width:900px; margin-inline:auto; }
#smp-form{ gap:10px; max-width:460px; margin-top:10px; }
#smp-book{ box-shadow:0 24px 60px rgba(35,44,107,.12); width:min(100%, 320px); margin-inline:auto; }
.vg-field{ box-sizing:border-box; }
@media (max-width:900px){ #smp-get, #smp-steps{ grid-template-columns:1fr; } }
@media (max-width:820px){ #smp-grid, #smp-faq{ grid-template-columns:1fr; } }

/* ============================================================
   Library / catalog grid — the [volare_library] shortcode
   (build/volare-core/includes/catalog/library-shortcode.php).
   Rendered in a normal WP page, so it uses the site's .v-* design
   tokens/classes (not the Elementor vg-* kit classes).
   ============================================================ */
.v-lib .v-eyebrow{ display:block; }
.v-lib .v-display{ margin:.15em 0 .3em; }
.v-lib-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:28px; }
.v-lib-card{
  display:flex; flex-direction:column;
  background:var(--v-paper); border:1px solid var(--v-line);
  border-radius:var(--v-r); overflow:hidden; text-decoration:none;
  transition:box-shadow .15s ease, transform .05s ease;
}
.v-lib-card:hover{ box-shadow:0 14px 34px rgba(35,44,107,.12); transform:translateY(-2px); }
.v-lib-card:focus-visible{ outline:3px solid var(--v-navy); outline-offset:2px; }
.v-lib-cover{
  aspect-ratio:3 / 4; display:block;
  background:linear-gradient(150deg, var(--v-sky-200), var(--v-mint-100));
}
.v-lib-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.v-lib-body{ padding:14px; display:flex; flex-direction:column; gap:9px; }
.v-lib-title{ font-size:.98rem; font-weight:700; color:var(--v-navy); line-height:1.25; }
.v-lib-meta{ display:flex; flex-wrap:wrap; gap:7px; }
@media (max-width:900px){ .v-lib-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .v-lib-grid{ grid-template-columns:1fr; } }

/* Homepage featured cards are now full-card links (<a class="vg-card">); keep the
   inner text from inheriting the default link underline/colour. */
a.vg-card{ text-decoration:none; color:inherit; }
a.vg-card:hover{ text-decoration:none; }

/* Header account button: show "Log in" (logged out) or "My Account" (logged in),
   toggled by the standard WordPress body.logged-in class — no flash. The header
   HTML must carry both links: .v-acct-out (Log in) and .v-acct-in (My Account). */
body:not(.logged-in) .v-acct-in{ display:none; }
body.logged-in .v-acct-out{ display:none; }

/* Teacher-only header link (mirrors the login toggle). volare-core adds the
   body.volare-teacher class; the header HTML element carries
   <a class="v-teacher-link" href="/my-classroom/">My Classroom</a>. */
body:not(.volare-teacher) .v-teacher-link{ display:none; }

/* Mobile menu (Kadence's slide-out drawer): the header account buttons, printed
   under the menu by functions.php (kadence_after_mobile_navigation_popup).
   Stacked full width. The header HTML arrives wrapped by wpautop with an inline
   display:inline-flex span, hence the <p>/<br> resets and the !important on the
   span. The drawer is dark (#090c10, white text), so the buttons are the inverse
   of the light page: quiet = white outline, primary = white fill + navy text. */
.v-drawer-acct{ padding-top:1.5em; }
.v-drawer-acct p{ margin:0; }
.v-drawer-acct br{ display:none; }
.v-drawer-acct span{ display:flex !important; flex-direction:column; align-items:stretch !important; gap:12px !important; }
.v-drawer-acct .v-btn{ width:100%; box-sizing:border-box; }
.v-drawer-acct .v-btn-quiet{ color:var(--v-white); border-color:var(--v-white); }
.v-drawer-acct .v-btn-quiet:hover{ background:var(--v-white); color:var(--v-navy); }
.v-drawer-acct .v-btn-primary{ background:var(--v-white); color:var(--v-navy); border-color:var(--v-white); }
.v-drawer-acct .v-btn-primary:hover{ background:var(--v-sky); }
.v-drawer-acct .v-btn:focus-visible{ outline-color:var(--v-sun); }