/*!
 * Barayamal Volunteer Brand Skin
 * Re-skins every public volunteer page (application, opportunities, hub,
 * recognition wall, login) to the Barayamal brand: Cyan #00b8f1 / Black / White,
 * with Maroon #591328 and Gray #4e565a as supports.
 *
 * Strategy: scope everything under `body.baiv-volunteer-page` (the class the
 * Volunteer Ambassador Hub plugin adds to all volunteer pages + the application
 * page). Redefine the plugin's --baiv-* design tokens, then add explicit
 * overrides for the colours that were hard-coded (board blues, greens, golds).
 * Loaded late so source order + specificity win without heavy !important use.
 * ----------------------------------------------------------------------- */

/* ============================== 1. TOKENS ============================== */
body.baiv-volunteer-page{
  /* Brand palette */
  --bv-cyan:#00b8f1;
  --bv-cyan-strong:#00a0d4;       /* button hover */
  --bv-cyan-deep:#045b78;         /* darkened cyan that passes AA as text on white */
  --bv-cyan-tint:#e7f8fe;         /* light fill */
  --bv-cyan-tint-line:#bfe9fb;
  --bv-ink:#0b1416;               /* near-black text / "Black" */
  --bv-ink-soft:#39434a;
  --bv-muted:#4e565a;             /* brand Gray */
  --bv-line:#e4eaec;
  --bv-line-strong:#cdd7da;
  --bv-bg:#ffffff;
  --bv-bg-soft:#f4f8fa;           /* inset panels */
  --bv-maroon:#591328;
  --bv-maroon-tint:#fbeef1;
  --bv-maroon-line:#e7c9d2;
  --bv-ok:#0b6140; --bv-ok-bg:#e9f7ef; --bv-ok-line:#bfe6cf;     /* 6.8:1 on bg */
  --bv-warn:#7a5400; --bv-warn-bg:#fff5e0; --bv-warn-line:#f0d49a; /* 6.3:1 on bg */
  --bv-err:#b3261e; --bv-err-bg:#fdeceb; --bv-err-line:#f1c4c0;
  --bv-radius:16px;
  --bv-radius-sm:11px;
  --bv-radius-xs:8px;
  --bv-shadow:0 14px 40px rgba(11,20,22,.09), 0 2px 6px rgba(11,20,22,.04);
  --bv-shadow-sm:0 6px 18px rgba(11,20,22,.06);
  --bv-focus:0 0 0 3px rgba(0,184,241,.45);
  --bv-font-head:"Futura","Futura PT","Century Gothic","Avenir Next","Avenir","Jost",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --bv-font-body:"Avenir Next","Avenir","Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;

  /* Remap the plugin's existing tokens onto the brand */
  --baiv-ink:var(--bv-ink);
  --baiv-muted:var(--bv-muted);
  --baiv-line:var(--bv-line);
  --baiv-panel:#ffffff;
  --baiv-soft:var(--bv-bg-soft);
  --baiv-action:var(--bv-cyan);
  --baiv-action-dark:var(--bv-cyan-deep);
}

/* ============================== 2. BASE =============================== */
/* Page canvas — safe to apply page-wide (brand white background). */
body.baiv-volunteer-page{background:var(--bv-bg)}
/* Everything else is scoped to <main> so the site header, nav and footer keep
   their normal site-wide styling. The brand skin only touches volunteer content
   (the application form, Start Here band, hub, board and feedback all live in main). */
body.baiv-volunteer-page main{
  color:var(--bv-ink);
  font-family:var(--bv-font-body);
}
body.baiv-volunteer-page main h1,
body.baiv-volunteer-page main h2,
body.baiv-volunteer-page main h3,
body.baiv-volunteer-page main h4,
body.baiv-volunteer-page main h5{
  font-family:var(--bv-font-head);
  color:var(--bv-ink);
  letter-spacing:-.01em;
}
body.baiv-volunteer-page main p{color:var(--bv-ink-soft)}
/* Inline links: near-black with a cyan underline, cyan on hover (avoids the
   low-contrast of bright cyan as text) */
body.baiv-volunteer-page main a{
  color:var(--bv-ink);
  text-decoration-color:var(--bv-cyan);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
body.baiv-volunteer-page main a:hover{color:var(--bv-cyan-deep)}
body.baiv-volunteer-page main :focus-visible{
  outline:2px solid var(--bv-cyan);
  outline-offset:2px;
  border-radius:4px;
}

/* =================== 3. PANELS / CARDS (shared) ====================== */
body.baiv-volunteer-page main .wp-block-group,
body.baiv-volunteer-page main .baiv-public,
body.baiv-volunteer-page main .baiv-portal,
body.baiv-volunteer-page main .barayamal-volunteer-pathway-note,
body.baiv-volunteer-page main .barayamal-volunteer-opportunity-note,
body.baiv-volunteer-page main .barayamal-volunteer-badge-note,
body.baiv-volunteer-page main .barayamal-volunteer-application-note,
body.baiv-volunteer-page main .barayamal-volunteer-join-first-note,
body.baiv-volunteer-page main .barayamal-volunteer-feedback-note,
body.baiv-volunteer-page main .baiv-public-card,
body.baiv-volunteer-page main .baiv-portal-card,
body.baiv-volunteer-page main .barayamal-volunteer-decision-details{
  background:var(--bv-bg);
  border:1px solid var(--bv-line);
  border-radius:var(--bv-radius);
  box-shadow:var(--bv-shadow-sm);
}
body.baiv-volunteer-page main .baiv-launch-intro{
  background:var(--bv-cyan-tint);
  border:1px solid var(--bv-cyan-tint-line);
}

/* ============================== 4. BUTTONS ============================ */
/* Default solid action = cyan bg + BLACK text (signature, high contrast) */
body.baiv-volunteer-page main .wp-block-button__link,
body.baiv-volunteer-page main .baiv-public-button,
body.baiv-volunteer-page main .barayamal-volunteer-inline-button{
  background:var(--bv-cyan);
  border:2px solid var(--bv-cyan);
  color:var(--bv-ink);
  font-family:var(--bv-font-head);
  font-weight:800;
  border-radius:999px;
  padding:11px 22px;
  min-height:44px;
  letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(0,184,241,.28);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
body.baiv-volunteer-page main .wp-block-button__link:hover,
body.baiv-volunteer-page main .baiv-public-button:hover,
body.baiv-volunteer-page main .barayamal-volunteer-inline-button:hover{
  background:var(--bv-cyan-strong);
  border-color:var(--bv-cyan-strong);
  color:var(--bv-ink);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,184,241,.34);
}
/* Outline / secondary */
body.baiv-volunteer-page main .is-style-outline .wp-block-button__link,
body.baiv-volunteer-page .baiv-public-button-secondary,
body.baiv-volunteer-page .baiv-public-button.is-secondary{
  background:#fff;
  color:var(--bv-ink);
  border:2px solid var(--bv-cyan);
  box-shadow:none;
}
body.baiv-volunteer-page main .is-style-outline .wp-block-button__link:hover,
body.baiv-volunteer-page .baiv-public-button-secondary:hover{
  background:var(--bv-cyan-tint);
}

/* =================== 5. START-HERE PATHWAY BAND ===================== */
body.baiv-volunteer-page main .baiv-volunteer-start-here{
  background:linear-gradient(180deg,#fff, #fbfeff);
  border:1px solid var(--bv-line);
  border-left:6px solid var(--bv-cyan);
  border-radius:var(--bv-radius);
  box-shadow:var(--bv-shadow);
  padding:clamp(20px,3vw,30px);
}
body.baiv-volunteer-page .baiv-volunteer-start-here__eyebrow{
  color:var(--bv-cyan-deep);
  font-family:var(--bv-font-head);
  font-weight:800;
  letter-spacing:.14em;
}
body.baiv-volunteer-page .baiv-volunteer-start-here__steps{gap:16px}
body.baiv-volunteer-page .baiv-volunteer-start-here__step{
  border-left:none;
  background:var(--bv-bg-soft);
  border:1px solid var(--bv-line);
  border-radius:var(--bv-radius-sm);
  padding:18px 18px 16px;
}
body.baiv-volunteer-page .baiv-volunteer-start-here__step.is-current{
  background:var(--bv-cyan-tint);
  border-color:var(--bv-cyan-tint-line);
  box-shadow:inset 0 0 0 1px var(--bv-cyan-tint-line);
}
body.baiv-volunteer-page .baiv-volunteer-start-here__step::before{
  background:var(--bv-cyan);
  color:var(--bv-ink);
  width:30px;height:30px;font-size:.95rem;font-weight:800;
  box-shadow:0 4px 10px rgba(0,184,241,.35);
}
body.baiv-volunteer-page .baiv-volunteer-start-here__step strong{font-size:1.06rem}
body.baiv-volunteer-page .baiv-volunteer-start-here__link{
  color:var(--bv-cyan-deep);font-weight:800;
}

/* selected-opportunity intent panel */
body.baiv-volunteer-page main .baiv-selected-opportunity-intent{
  border:1px solid var(--bv-line);
  border-left:6px solid var(--bv-cyan);
  border-radius:var(--bv-radius);
  box-shadow:var(--bv-shadow-sm);
}
body.baiv-volunteer-page main .baiv-selected-opportunity-intent__grid p{
  background:var(--bv-bg-soft);border:1px solid var(--bv-line);
}
body.baiv-volunteer-page main .baiv-selected-opportunity-intent__checklist{
  background:var(--bv-cyan-tint);border:1px solid var(--bv-cyan-tint-line);
}

/* ============= 6. APPLICATION FORM — HERO + INPUTS ================== */
body.baiv-volunteer-page .bva-wrap{
  background:transparent;border:none;box-shadow:none;padding:0;
}
/* Hero block (intro at top of .bva-wrap) */
body.baiv-volunteer-page .bva-wrap > h2:first-of-type{
  font-size:clamp(2rem,1.3rem + 2.4vw,3rem);
  line-height:1.04;margin:0 0 14px;
}
body.baiv-volunteer-page .bvk-eyebrow{
  display:inline-block;font-family:var(--bv-font-head);font-weight:800;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bv-cyan-deep);margin:0 0 12px;
}
body.baiv-volunteer-page .bva-wrap > p{max-width:62ch;font-size:1.06rem}
body.baiv-volunteer-page .bva-help{
  color:var(--bv-muted);font-size:.95rem;
}

/* Inputs (scoped to main so a header/footer search box is untouched) */
body.baiv-volunteer-page main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body.baiv-volunteer-page main select,
body.baiv-volunteer-page main textarea{
  width:100%;background:#fff;color:var(--bv-ink);
  border:1.5px solid var(--bv-line-strong);
  border-radius:var(--bv-radius-xs);
  padding:13px 14px;font:inherit;line-height:1.4;
  transition:border-color .12s ease, box-shadow .12s ease;
}
body.baiv-volunteer-page main input::placeholder,
body.baiv-volunteer-page main textarea::placeholder{color:var(--bv-muted);opacity:1}
body.baiv-volunteer-page main input:focus,
body.baiv-volunteer-page main select:focus,
body.baiv-volunteer-page main textarea:focus{
  outline:none;border-color:var(--bv-cyan);box-shadow:var(--bv-focus);
}
body.baiv-volunteer-page main textarea{min-height:120px;resize:vertical}
/* Field labels (the form wraps each field in <label>) */
body.baiv-volunteer-page .bva-form > label:not(.bva-check),
body.baiv-volunteer-page .bvk-fields > label:not(.bva-check){
  display:grid;gap:7px;font-weight:700;color:var(--bv-ink);
}

/* Checkbox rows */
body.baiv-volunteer-page .bva-check{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--bv-bg-soft);
  border:1px solid var(--bv-line);
  border-radius:var(--bv-radius-sm);
  padding:14px 16px;font-weight:600;color:var(--bv-ink-soft);
  cursor:pointer;transition:border-color .12s ease, background .12s ease;
}
body.baiv-volunteer-page .bva-check:hover{border-color:var(--bv-cyan-tint-line);background:#fff}
body.baiv-volunteer-page .bva-check:focus-within{border-color:var(--bv-cyan);box-shadow:var(--bv-focus)}
body.baiv-volunteer-page .bva-check input[type="checkbox"]{
  width:22px;height:22px;min-width:22px;margin-top:1px;
  accent-color:var(--bv-cyan);cursor:pointer;
}

/* Submit button = primary anchor: black -> cyan on hover */
body.baiv-volunteer-page .bva-button,
body.baiv-volunteer-page .bva-form button[type="submit"],
body.baiv-volunteer-page .bva-form input[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;width:auto;
  background:var(--bv-ink);color:#fff;border:2px solid var(--bv-ink);
  font-family:var(--bv-font-head);font-weight:800;font-size:1.05rem;
  letter-spacing:.01em;border-radius:999px;
  padding:16px 34px;min-height:56px;cursor:pointer;
  box-shadow:0 10px 26px rgba(11,20,22,.18);
  transition:transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}
body.baiv-volunteer-page .bva-button:hover,
body.baiv-volunteer-page .bva-form button[type="submit"]:hover{
  background:var(--bv-cyan);border-color:var(--bv-cyan);color:var(--bv-ink);
  transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,184,241,.34);
}

/* Honeypots stay hidden */
body.baiv-volunteer-page .bva-hp,
body.baiv-volunteer-page .baiv-feedback-hp{
  position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important;
}

/* ============ 6b. JS-ENHANCED FORM SECTION CARDS =================== */
body.baiv-volunteer-page.bvk-ready .bva-form{display:block}
body.baiv-volunteer-page .bvk-card{
  background:#fff;border:1px solid var(--bv-line);
  border-radius:var(--bv-radius);box-shadow:var(--bv-shadow-sm);
  padding:clamp(20px,2.6vw,30px);margin:0 0 22px;
}
body.baiv-volunteer-page .bvk-card__head{
  display:flex;align-items:center;gap:14px;
  margin:0 0 20px;padding-bottom:16px;
  border-bottom:2px solid var(--bv-cyan-tint);
}
body.baiv-volunteer-page .bvk-card__head h3{margin:0;font-size:1.28rem}
body.baiv-volunteer-page .bvk-card__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;min-width:38px;border-radius:50%;
  background:var(--bv-cyan);color:var(--bv-ink);
  font-family:var(--bv-font-head);font-weight:800;font-size:1.05rem;
  box-shadow:0 6px 14px rgba(0,184,241,.35);
}
body.baiv-volunteer-page .bvk-fields{
  display:grid;gap:18px 22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
/* Checkbox rows and notes span the full width */
body.baiv-volunteer-page .bvk-fields > .bva-check,
body.baiv-volunteer-page .bvk-fields > p,
body.baiv-volunteer-page .bvk-fields > .bvk-fullspan{grid-column:1 / -1}
/* :has() kept on its own rule so a browser without :has() support only loses
   this textarea-fullspan nicety, not the checkbox/notes spanning above. */
body.baiv-volunteer-page .bvk-fields > label:has(textarea){grid-column:1 / -1}

/* Submit bar (relocated by JS) */
body.baiv-volunteer-page .bvk-submit{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin-top:6px;
}
body.baiv-volunteer-page .bvk-submit .bvk-submit-note{color:var(--bv-muted);font-size:.92rem;margin:0}

/* Progress meter */
body.baiv-volunteer-page .bvk-progress{
  position:sticky;top:10px;z-index:6;
  display:flex;align-items:center;gap:14px;
  background:#fff;
  border:1.5px solid var(--bv-cyan-tint-line);border-radius:999px;
  padding:11px 20px;margin:0 0 24px;
  box-shadow:0 10px 26px rgba(11,20,22,.12);
}
body.baiv-volunteer-page .bvk-progress__track{
  flex:1;height:8px;border-radius:999px;background:var(--bv-cyan-tint);overflow:hidden;
}
body.baiv-volunteer-page .bvk-progress__bar{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--bv-cyan),#26d0ff);
  transition:width .25s ease;
}
body.baiv-volunteer-page .bvk-progress__label{
  font-family:var(--bv-font-head);font-weight:800;font-size:.9rem;
  color:var(--bv-ink);white-space:nowrap;
}
body.baiv-volunteer-page .bvk-progress.is-complete .bvk-progress__bar{
  background:linear-gradient(90deg,var(--bv-ok),#19b06f);
}

/* ================== 7. FEEDBACK PANEL ("unclear?") ================= */
body.baiv-volunteer-page main .baiv-volunteer-feedback-panel{
  background:var(--bv-maroon-tint);
  border:1px solid var(--bv-maroon-line);
  border-left:6px solid var(--bv-maroon);
  border-radius:var(--bv-radius);box-shadow:var(--bv-shadow-sm);
}
body.baiv-volunteer-page main .baiv-volunteer-feedback-panel h2{color:var(--bv-maroon)}
body.baiv-volunteer-page main .baiv-feedback-context{
  background:#fff;border:1px solid var(--bv-maroon-line);
}
body.baiv-volunteer-page main .baiv-feedback-selected-help,
body.baiv-volunteer-page main .baiv-feedback-reply-help{
  background:#fff;border:1px solid var(--bv-maroon-line);
}
body.baiv-volunteer-page main .baiv-feedback-success{
  background:var(--bv-ok-bg);border:1px solid var(--bv-ok-line);color:var(--bv-ok);
}
body.baiv-volunteer-page main .baiv-feedback-warning{
  background:var(--bv-warn-bg);border:1px solid var(--bv-warn-line);color:var(--bv-warn);
}

/* ============= 8. OPPORTUNITIES BOARD (hard-coded blues) ============ */
body.baiv-volunteer-page .baiv-public{border-color:var(--bv-line)}
body.baiv-volunteer-page .baiv-public-card{
  border-color:var(--bv-line);border-radius:var(--bv-radius-sm);
}
body.baiv-volunteer-page .baiv-public-meta{color:var(--bv-muted)}
body.baiv-volunteer-page .baiv-opportunity-tags span,
body.baiv-volunteer-page .baiv-filter-chip{
  border-color:var(--bv-cyan-tint-line);background:var(--bv-cyan-tint);
  color:var(--bv-cyan-deep);font-weight:600;
}
body.baiv-volunteer-page .baiv-filter-chip.is-active{
  border-color:var(--bv-cyan);background:var(--bv-cyan);color:var(--bv-ink);font-weight:800;
}
body.baiv-volunteer-page .baiv-opportunity-facts span{
  border-color:var(--bv-line);background:var(--bv-bg-soft);color:var(--bv-ink);
}
body.baiv-volunteer-page .baiv-opportunity-facts strong{color:var(--bv-cyan-deep)}
body.baiv-volunteer-page .baiv-opportunity-copy-note{
  border-left-color:var(--bv-maroon);background:var(--bv-maroon-tint);
}
body.baiv-volunteer-page .baiv-opportunity-next-step{
  border-left-color:var(--bv-cyan);background:var(--bv-cyan-tint);
}
body.baiv-volunteer-page .baiv-selected-opportunity{
  border-color:var(--bv-cyan);background:var(--bv-cyan-tint);border-radius:var(--bv-radius-sm);
}
body.baiv-volunteer-page .baiv-selected-opportunity strong,
body.baiv-volunteer-page .baiv-selected-opportunity-facts b{color:var(--bv-cyan-deep)}
body.baiv-volunteer-page .baiv-public-card.is-selected-opportunity{
  border-color:var(--bv-cyan);box-shadow:0 0 0 2px rgba(0,184,241,.22);
}
body.baiv-volunteer-page .baiv-opportunity-empty{
  border-color:var(--bv-cyan-tint-line);background:var(--bv-cyan-tint);border-radius:var(--bv-radius);
}
body.baiv-volunteer-page .baiv-opportunity-kicker{color:var(--bv-cyan-deep)}
body.baiv-volunteer-page .baiv-opportunity-starter-card{border-color:var(--bv-cyan-tint-line)}
body.baiv-volunteer-page .baiv-opportunity-starter-card p{color:var(--bv-muted)}
body.baiv-volunteer-page .baiv-opportunity-starter-time,
body.baiv-volunteer-page .baiv-opportunity-tags span.baiv-opportunity-starter-time{
  border-color:var(--bv-line);background:var(--bv-bg-soft);color:var(--bv-ink)
}
body.baiv-volunteer-page .baiv-opportunity-filter{
  border-color:var(--bv-line);background:var(--bv-bg-soft);border-radius:var(--bv-radius-sm);
}
body.baiv-volunteer-page .baiv-opportunity-filter label span,
body.baiv-volunteer-page .baiv-opportunity-quick-picks>span{color:var(--bv-muted)}

/* Public forms / metrics */
body.baiv-volunteer-page .baiv-public-metrics div{
  border-color:var(--bv-line);background:var(--bv-bg-soft);border-radius:var(--bv-radius-sm);
}
body.baiv-volunteer-page .baiv-public-metrics strong{color:var(--bv-cyan-deep);font-family:var(--bv-font-head)}
body.baiv-volunteer-page .baiv-public-metrics span{color:var(--bv-muted)}

/* Notices */
body.baiv-volunteer-page .baiv-public-notice{
  border-left-color:var(--bv-cyan);background:var(--bv-cyan-tint);border-radius:var(--bv-radius-xs);
}
body.baiv-volunteer-page .baiv-public-notice-error{border-left-color:var(--bv-err);background:var(--bv-err-bg)}
body.baiv-volunteer-page .baiv-public-notice-warning{border-left-color:var(--bv-warn);background:var(--bv-warn-bg)}
body.baiv-volunteer-page .baiv-public-notice-success{border-left-color:var(--bv-ok);background:var(--bv-ok-bg)}

/* Opportunity board extras the token remap can't reach */
body.baiv-volunteer-page .baiv-opportunity-expired-badge{
  border-color:var(--bv-err-line);background:var(--bv-err-bg);color:var(--bv-err);
}
body.baiv-volunteer-page .baiv-public-card.is-stale-opportunity,
body.baiv-volunteer-page .baiv-selected-opportunity.is-stale-opportunity{
  border-color:var(--bv-err-line);background:var(--bv-err-bg);
}
body.baiv-volunteer-page .baiv-opportunity-empty-head h4,
body.baiv-volunteer-page .baiv-opportunity-empty-head p,
body.baiv-volunteer-page .baiv-opportunity-starter-card h5{color:var(--bv-ink)}
body.baiv-volunteer-page .baiv-selected-opportunity-facts p{border-color:var(--bv-line)}

/* ============= 8b. VOLUNTEER HUB PORTAL (its own inline stylesheet) === */
/* The portal prints hard-coded WP-admin blue/grey/green/gold via .baiv-portal*
   selectors. These overrides out-specify it (body.baiv-volunteer-page .baiv-portal …). */
body.baiv-volunteer-page .baiv-portal-metric{background:var(--bv-bg-soft);border-color:var(--bv-line)}
body.baiv-volunteer-page .baiv-portal th,
body.baiv-volunteer-page .baiv-portal td{border-bottom-color:var(--bv-line)}
body.baiv-volunteer-page .baiv-portal .description,
body.baiv-volunteer-page .baiv-portal .baiv-muted{color:var(--bv-muted)}
body.baiv-volunteer-page .baiv-portal .notice{border-left-color:var(--bv-cyan);background:var(--bv-cyan-tint)}
body.baiv-volunteer-page .baiv-portal .notice-success{border-left-color:var(--bv-ok);background:var(--bv-ok-bg)}
body.baiv-volunteer-page .baiv-portal .notice-error{border-left-color:var(--bv-err);background:var(--bv-err-bg)}
body.baiv-volunteer-page .baiv-portal .notice-warning{border-left-color:var(--bv-warn);background:var(--bv-warn-bg)}
body.baiv-volunteer-page .baiv-portal .button{
  background:#fff;border-color:var(--bv-cyan);color:var(--bv-ink);border-radius:999px;
}
body.baiv-volunteer-page .baiv-portal .button-primary{
  background:var(--bv-cyan);border-color:var(--bv-cyan);color:var(--bv-ink);
}
/* the destructive "Request account deletion" button carries an inline WP-admin red */
body.baiv-volunteer-page .baiv-portal button[style*="d63638"]{
  background:var(--bv-err)!important;border-color:var(--bv-err)!important;color:#fff!important;
}

/* ===================== 9. RESPONSIVE ================================ */
@media (max-width:720px){
  body.baiv-volunteer-page .bvk-fields{grid-template-columns:1fr}
  body.baiv-volunteer-page .bvk-progress{top:0}
  body.baiv-volunteer-page .bva-button,
  body.baiv-volunteer-page .bvk-submit .bva-button{width:100%}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  body.baiv-volunteer-page *{transition:none!important}
}

/* ===================== 10. v1.3 UPGRADES ============================ */

/* Tame the redundant theme post-title (big H1 above the form) into a compact
   brand kicker — the form's own hero now carries the real title. */
body.baiv-volunteer-page .wp-block-post-title{
  font-family:var(--bv-font-head);
  font-size:clamp(.95rem,.8rem + .6vw,1.15rem);
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bv-cyan-deep);text-align:left;
  margin:0 0 4px;line-height:1.2;
}

/* Brand hero band (dark ink → cyan) */
body.baiv-volunteer-page .bvk-hero{
  background:linear-gradient(135deg,#0b1416 0%,#0d2630 55%,#06384a 100%);
  border:1px solid var(--bv-ink);border-radius:var(--bv-radius);
  padding:clamp(24px,4vw,40px);margin:0 0 24px;box-shadow:var(--bv-shadow);color:#fff;
}
body.baiv-volunteer-page .bvk-hero .bvk-eyebrow{color:#7fe3ff;margin:0 0 12px}
body.baiv-volunteer-page .bvk-hero h2{
  color:#fff;font-size:clamp(2rem,1.4rem + 2.4vw,3rem);line-height:1.04;margin:0 0 14px;
}
body.baiv-volunteer-page .bvk-hero p{color:rgba(255,255,255,.86);max-width:64ch}
body.baiv-volunteer-page .bvk-hero .bva-help{color:rgba(255,255,255,.62)}
body.baiv-volunteer-page .bvk-trust{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0;
}
body.baiv-volunteer-page .bvk-trust li{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(127,227,255,.4);border-radius:999px;
  background:rgba(0,184,241,.12);color:#cdeffb;
  font-size:.85rem;font-weight:600;padding:7px 14px;
}
body.baiv-volunteer-page .bvk-trust li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--bv-cyan);flex:none;
}

/* Required / Optional field markers (not colour-only — they carry text) */
body.baiv-volunteer-page .bvk-req,
body.baiv-volunteer-page .bvk-opt{
  display:inline-block;margin-left:8px;font-family:var(--bv-font-body);
  font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;vertical-align:middle;
}
body.baiv-volunteer-page .bvk-req{background:var(--bv-maroon-tint);color:var(--bv-maroon);border:1px solid var(--bv-maroon-line)}
body.baiv-volunteer-page .bvk-opt{background:var(--bv-bg-soft);color:var(--bv-muted);border:1px solid var(--bv-line)}

/* Per-section completion: numbered badge → green check */
body.baiv-volunteer-page .bvk-card.is-complete .bvk-card__head{border-bottom-color:var(--bv-ok-line)}
body.baiv-volunteer-page .bvk-card.is-complete .bvk-card__num{
  background:var(--bv-ok);color:#fff;box-shadow:0 6px 14px rgba(15,122,79,.32);
}
body.baiv-volunteer-page .bvk-card.is-partial .bvk-card__num{
  box-shadow:0 0 0 4px rgba(0,184,241,.18),0 6px 14px rgba(0,184,241,.35);
}

/* Per-field filled accent */
body.baiv-volunteer-page .bvk-fields > label.bvk-filled > .lbl{color:var(--bv-cyan-deep)}
body.baiv-volunteer-page .bvk-fields > .bva-check.bvk-filled{
  border-color:var(--bv-cyan-tint-line);background:var(--bv-cyan-tint);
}

/* Invalid state after a failed submit (beyond colour: ring + aria-invalid) */
body.baiv-volunteer-page .bvk-invalid input,
body.baiv-volunteer-page .bvk-invalid select,
body.baiv-volunteer-page .bvk-invalid textarea,
body.baiv-volunteer-page main input[aria-invalid="true"],
body.baiv-volunteer-page main select[aria-invalid="true"],
body.baiv-volunteer-page main textarea[aria-invalid="true"]{
  border-color:var(--bv-err);box-shadow:0 0 0 3px rgba(179,38,30,.22);
}
body.baiv-volunteer-page .bva-check.bvk-invalid{border-color:var(--bv-err);box-shadow:0 0 0 3px rgba(179,38,30,.18)}

/* Draft-restored chip */
body.baiv-volunteer-page .bvk-restored{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  background:var(--bv-cyan-tint);border:1.5px solid var(--bv-cyan-tint-line);
  border-radius:var(--bv-radius-sm);padding:12px 16px;margin:0 0 22px;color:var(--bv-ink);
}
body.baiv-volunteer-page .bvk-restored__msg{font-size:.92rem;flex:1 1 320px}
body.baiv-volunteer-page .bvk-restored__msg strong{font-family:var(--bv-font-head)}
body.baiv-volunteer-page .bvk-restored__note{color:var(--bv-muted)}
body.baiv-volunteer-page .bvk-restored__fresh{
  border:1.5px solid var(--bv-cyan);background:#fff;color:var(--bv-ink);
  font-weight:700;border-radius:999px;padding:8px 16px;min-height:40px;cursor:pointer;
}
body.baiv-volunteer-page .bvk-restored__fresh:hover{background:var(--bv-cyan-tint)}

/* Submitting state (double-submit guard is visual only) */
body.baiv-volunteer-page .bva-button.is-submitting{pointer-events:none;opacity:.85}

/* Bigger checkbox target (WCAG 2.5.8, ≥24px) — overrides the 22px above */
body.baiv-volunteer-page .bva-check input[type="checkbox"]{width:24px;height:24px;min-width:24px}

/* Sticky progress meter must not hide a scrolled-to / focused field */
html:has(body.baiv-volunteer-page){scroll-padding-top:92px}