/* ============================================================
   HaloLogic.ai — Workshop landing page ("Modern Halo")
   Extracted from design/workshop-landing/index.html — the visual
   contract approved by Brad as-is (decision D-006).

   Load order (functions.php): tokens.css -> base.css -> this file,
   enqueued ONLY on the page with slug "workshop".
   NOT duplicated here (lives upstream): :root tokens (tokens.css);
   .btn/.btn--gold/.btn--ghost/.btn--block, :focus-visible, and the
   global prefers-reduced-motion kill (base.css).
   Contrast rules (BRAND.md): gold/sage/copper are never text on
   light; CTA = charcoal text on gold; text on light = charcoal.
   ============================================================ */

/* ---- Page scaffold + type scale ----
   (font families, base color/bg live in base.css) */
*,*::before,*::after{box-sizing:border-box;}
html{font-size:100%;scroll-behavior:smooth;}
body{font-size:1.0625rem;line-height:1.65;}
h1,h2,h3{margin:0 0 .5em;}
h1{font-size:clamp(2.2rem,5vw + 1rem,3.6rem);font-weight:800;letter-spacing:-.01em;}
h2{font-size:clamp(1.7rem,2.6vw + 1rem,2.5rem);font-weight:700;letter-spacing:-.01em;}
h3{font-size:clamp(1.15rem,1vw + 1rem,1.4rem);font-weight:600;}
p{margin:0 0 1.1em;}
a{color:inherit;}

.wrap{width:min(var(--maxw),92%);margin-inline:auto;}
.section{padding:clamp(3.5rem,7vw,6rem) 0;}
.section--cream{background:var(--cream);}
.section--charcoal{background:var(--charcoal);color:var(--white);}
.lead{font-size:clamp(1.15rem,1.4vw + 1rem,1.45rem);color:var(--muted-ink);max-width:46ch;}
.section--charcoal .lead{color:var(--muted-on-dark);}
.muted{color:var(--muted-ink);}

/* ---- Skip link (design parity for the DB-authored header) ----
   Gold border so the chip has a visible boundary over the charcoal
   header when focused (a11y gate fix A11Y-8, Task.md 2026-07-01). */
.skip-link{position:absolute;left:1rem;top:-100px;background:var(--charcoal);color:var(--white);border:2px solid var(--gold);padding:.7rem 1.1rem;border-radius:var(--radius-sm);text-decoration:none;z-index:999;font-weight:600;}
.skip-link:focus{top:1rem;}

/* ---- Page additions to base.css focus/button rules ----
   base.css covers .is-dark/.site-header/.site-footer focus; the hero
   and this page's dark sections need the same gold outline.
   (.hero added per a11y gate fix A11Y-2, Task.md 2026-07-01 — the
   design render left hero focus outlines charcoal-on-charcoal.) */
.section--charcoal :focus-visible,.hero :focus-visible{outline-color:var(--gold);}

/* :focus-visible fallback (a11y gate fix A11Y-6): browsers without
   :focus-visible must still show a focus indicator — base.css's blanket
   :focus{outline:none} would hide it there. Supporting browsers drop the
   outline for pointer focus via :not(:focus-visible). Page-scoped for 0a;
   mirror into base.css in the 0b sitewide pass. */
:focus{outline:3px solid var(--charcoal);outline-offset:3px;} /* no border-radius: it would override .btn's pill shape on focus (re-gate NEW-1) */
:focus:not(:focus-visible){outline:none;}
.section--charcoal :focus,.hero :focus,.site-header :focus,.site-footer :focus{outline-color:var(--gold);}

/* ---- Eyebrow + pills ---- */
.eyebrow{font-family:var(--ff-head);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--charcoal);display:inline-block;margin-bottom:1rem;}
/* .hero added per a11y gate fix A11Y-1 (Task.md 2026-07-01): the design
   render left the hero eyebrow charcoal-on-charcoal (1:1). Gold text is
   allowed here — dark surface (gold-on-charcoal 10.4:1, BRAND.md). */
.section--charcoal .eyebrow,.hero .eyebrow{color:var(--gold);}
.eyebrow::after{content:"";display:block;width:2.2rem;height:3px;background:var(--copper);border-radius:2px;margin-top:.5rem;} /* copper accent, decorative */
.pill{display:inline-flex;align-items:center;gap:.45rem;background:var(--gold);color:var(--charcoal);font-weight:600;font-size:.92rem;padding:.35rem .85rem;border-radius:999px;}
.pill--sage{background:var(--sage);color:var(--charcoal);} /* sage-on-charcoal-text 6.7:1 */

/* ---- Header (styles the DB-authored GP header element) ---- */
.site-header{background:var(--charcoal);color:var(--white);padding:1.1rem 0;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.logo{font-family:var(--ff-head);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;text-decoration:none;color:var(--white);display:inline-flex;align-items:baseline;}
.logo .lg{color:var(--gold);}
.header-cta{display:none;}
@media (min-width:40rem){.header-cta{display:inline-flex;}}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:var(--charcoal);color:var(--white);padding:clamp(3.5rem,8vw,7rem) 0 clamp(4rem,8vw,6.5rem);}
.hero .wrap{position:relative;z-index:1;max-width:50rem;}
.hero h1{margin-top:.3rem;}
.hero-question{font-family:var(--ff-head);font-weight:700;font-size:clamp(1.3rem,2vw + 1rem,1.9rem);color:var(--gold);margin:0 0 1.4rem;max-width:30ch;line-height:1.25;}
.hero-sub{font-size:clamp(1.1rem,1.2vw + 1rem,1.35rem);color:var(--muted-on-dark);max-width:44ch;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;}
.facts{list-style:none;margin:2.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;}
.facts li{display:inline-flex;align-items:center;gap:.55rem;font-weight:500;color:#E7EBEF;font-size:1.02rem;}
.facts svg{flex:none;width:1.15rem;height:1.15rem;color:var(--gold);}

/* ---- Content blocks ---- */
.grid-3{display:grid;gap:1.5rem;grid-template-columns:1fr;margin-top:2.5rem;}
@media (min-width:48rem){.grid-3{grid-template-columns:repeat(3,1fr);}}
.card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);padding:1.6rem 1.5rem;}
.card .num{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:999px;background:var(--gold);color:var(--charcoal);font-family:var(--ff-head);font-weight:700;font-size:1.05rem;margin-bottom:1rem;}
.card h3{margin-bottom:.35rem;}
.card p{margin:0;color:var(--muted-ink);}
.narrow{max-width:50rem;}

/* ---- Agenda ---- */
.agenda{margin:2.5rem 0 0;display:grid;gap:0;}
.agenda dt{font-family:var(--ff-head);font-weight:700;color:var(--charcoal);font-size:1rem;padding-top:1.1rem;}
.agenda dd{margin:.15rem 0 1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--hairline);color:var(--muted-ink);}
@media (min-width:38rem){.agenda{grid-template-columns:7.5rem 1fr;column-gap:1.5rem;}.agenda dt{padding-top:1.1rem;}.agenda dd{margin:0;padding:1.1rem 0;}}

/* ---- Deal list ---- */
.deal-list{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:1rem;max-width:40rem;}
.deal-list li{display:flex;gap:.85rem;align-items:flex-start;font-size:1.08rem;}
.deal-list svg{flex:none;width:1.5rem;height:1.5rem;color:var(--gold);margin-top:.15rem;}

/* ---- Host ---- */
.host{display:grid;gap:1.5rem;align-items:start;}
@media (min-width:44rem){.host{grid-template-columns:1fr 1fr;gap:3rem;}}

/* ---- RSVP ---- */
.rsvp{background:var(--cream);}
.rsvp .wrap{max-width:44rem;}
.anchor-note{display:inline-block;background:var(--sage-tint);color:var(--charcoal);font-weight:600;border-radius:999px;padding:.3rem .85rem;font-size:.9rem;margin-bottom:1rem;}
.form-card{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.5rem);box-shadow:var(--shadow);margin-top:2rem;}
.req-key{font-size:.95rem;color:var(--muted-ink);margin-bottom:1.4rem;}
.req{color:var(--error);font-weight:700;}
.form-row{margin-bottom:1.3rem;}
.form-row label{display:block;font-weight:600;margin-bottom:.4rem;color:var(--charcoal);}
.form-row .optional{font-weight:400;color:var(--muted-ink);}
.form-row input[type="text"],.form-row input[type="email"],.form-row select,.form-row textarea{width:100%;font:inherit;color:var(--charcoal);padding:.8rem .9rem;border:1.5px solid var(--field-border);border-radius:var(--radius-sm);background:var(--white);}
.form-row textarea{min-height:5.5rem;resize:vertical;}
.form-row input:focus-visible,.form-row select:focus-visible,.form-row textarea:focus-visible{outline-color:var(--charcoal);border-color:var(--charcoal);}
.form-hint{font-size:.92rem;color:var(--muted-ink);margin:.4rem 0 0;}
.form-row--error input,.form-row--error select{border-color:var(--error);border-width:2px;}
.form-error{display:flex;align-items:flex-start;gap:.4rem;color:var(--error);font-size:.95rem;font-weight:500;margin:.45rem 0 0;}
.form-error svg{flex:none;width:1.1rem;height:1.1rem;margin-top:.15rem;}
.check{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border:1.5px solid var(--hairline);border-radius:var(--radius-sm);background:#FBFAF6;}
.check + .check{margin-top:.9rem;}
.check input[type="checkbox"]{flex:none;width:1.5rem;height:1.5rem;margin-top:.15rem;accent-color:var(--charcoal);} /* 24px target — a11y gate fix A11Y-9 (WCAG 2.2 §2.5.8 floor) */
.check label{font-weight:500;margin:0;line-height:1.5;}
.check.form-row--error{border-color:var(--error);}
.form-error-summary{background:#FEF3F2;border:1.5px solid #FECDCA;color:#7A271A;border-radius:var(--radius-sm);padding:1.1rem 1.25rem;margin-bottom:1.6rem;}
.form-error-summary h2{font-size:1.1rem;margin:0 0 .5rem;color:#7A271A;}
.form-error-summary ul{margin:0;padding-left:1.2rem;}
.form-error-summary a{color:#7A271A;font-weight:600;}
.form-note{font-size:.95rem;color:var(--muted-ink);margin-top:1.2rem;}
.form-note strong{color:var(--charcoal);}
/* honeypot — off-screen, not display:none (bots skip display:none) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---- Success panel ---- */
.success{background:var(--charcoal);color:var(--white);border-radius:var(--radius);padding:clamp(1.6rem,4vw,2.5rem);margin-top:2rem;box-shadow:var(--shadow);}
.success h2{color:var(--white);}
.success p{color:var(--muted-on-dark);margin-bottom:0;}
.success .pill{margin-bottom:1.2rem;}
[hidden]{display:none !important;}

/* ---- Footer (styles the DB-authored GP footer element) ---- */
.site-footer{background:var(--charcoal);color:#C7CDD4;padding:3rem 0 2.2rem;}
.site-footer .wrap{display:grid;gap:1.4rem;}
@media (min-width:40rem){.site-footer .wrap{grid-template-columns:1fr auto;align-items:center;}}
.site-footer .logo{font-size:1.3rem;}
.footer-meta{font-size:.95rem;}
.footer-meta a{color:var(--gold);text-decoration:underline;}
.parent{color:#9AA2AB;font-size:.9rem;margin-top:.3rem;}

/* ---- Reveal (reduced-motion safe) ----
   base.css carries the global animation/transition kill; these are
   the page-specific reduced-motion rules (reveal and scroll-behavior,
   which this file re-enables above).
   Hidden state is gated behind .js on <html> (set by workshop.js) so
   content is never invisible without JavaScript (a11y gate fix A11Y-7,
   Task.md 2026-07-01). */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.js .reveal.in-view{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
}