/* tt-public-design.css — Leia's public-site design. Her file. */

/* ============================================================================
   ARTIST ONBOARDING KIT — public page design layer
   ----------------------------------------------------------------------------
   Additive overrides only. Every colour and font resolves to an Elementor
   Global (CSS variable) — nothing hardcoded. Neutral shadows/tints are mixed
   from those globals with color-mix(), so there are no stray hex values.

   Division of labour:
   - Elementor (native settings, via its Global Colours/Fonts) owns text,
     colour, typography, buttons, the hero image + overlay, and column layout.
   - This file owns the decorative flourishes Elementor settings can't express:
     step numbers, checklist boxes, the 50/50 bar, the FAQ accordion, and the
     CTA-card hover. Each section container carries the class `tt-aok`, which
     defines the brand tokens below for its descendants.
   ============================================================================ */

/* --- Brand tokens — aliases that point straight at the Elementor Globals --- */
.tt-aok {
  --tt-gold:   var(--e-global-color-primary);     /* Antique Gold        */
  --tt-amber:  var(--e-global-color-secondary);   /* Amber Glow          */
  --tt-bronze: var(--e-global-color-881c8fd);     /* Border / Divider    */
  --tt-ink:    var(--e-global-color-1635d7a);     /* Negative Space (bg) */
  --tt-cocoa:  var(--e-global-color-accent);      /* Smoked Walnut       */
  --tt-paper:  var(--e-global-color-text);        /* Unbleached Linen    */
  --tt-muted:  var(--e-global-color-57b6e2a);     /* Muted Text          */
  --tt-veil:   var(--e-global-color-00096c0);     /* Deep Overlay        */

  --tt-font-display: var(--e-global-typography-primary-font-family);    /* Cinzel     */
  --tt-font-body:    var(--e-global-typography-text-font-family);       /* Lora       */
  --tt-font-ui:      var(--e-global-typography-secondary-font-family);  /* Montserrat */

  /* Shape/space only — not brand colours or fonts */
  --tt-radius: 14px;
  /* No background here: the site body is already Negative Space, and a
     background shorthand would clobber the hero image. Panels set their own. */
}

/* ============================================================================
   SECTION 1 — HERO : adjustments
   - Trim the banner to ~half the viewport, content stays vertically centred.
   - Hide the small "Artist Onboarding Kit" eyebrow so the order reads
     logo -> headline -> subhead. (The eyebrow is the only heading rendered
     as a <p> in the hero; the headline is <h1> and the subhead is <h4>.)
   ID selector is used so these win over Elementor's element settings.
   No colours or fonts here — layout only.
   ============================================================================ */
#tt-aok-hero {
  min-height: 40vh;          /* trimmed ~20% from the previous 50vh */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertical centring within the shorter band */
  align-items: center;
}
#tt-aok-hero p.elementor-heading-title { display: none; }  /* the eyebrow */

/* Headline locked to the brand gold via its Global Color (Antique Gold,
   #D4AF37 = --e-global-color-primary). Referenced as a variable, never a hex. */
#tt-aok-hero h1.elementor-heading-title { color: var(--e-global-color-primary); }

/* ============================================================================
   SECTION 2 — WELCOME LETTER : inset dark card with gold border accent
   ============================================================================ */
.tt-aok .tt-aok-welcome {
  background: var(--tt-veil);
  border: 1px solid var(--tt-bronze);
  border-left: 4px solid var(--tt-gold);   /* gold accent edge */
  border-radius: var(--tt-radius);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tt-ink) 55%, transparent);
}
.tt-aok .tt-aok-welcome__signoff { color: var(--tt-gold); }

/* ============================================================================
   SECTION 3 — YOUR PATH FORWARD : cards with auto gold step numbers
   The wrapper just resets the counter; Elementor handles the row layout.
   ============================================================================ */
.tt-aok .tt-aok-steps { counter-reset: tt-step; }
.tt-aok .tt-aok-step {
  position: relative;
  counter-increment: tt-step;
  padding: 3.75rem 1.75rem 1.75rem;
  background: color-mix(in srgb, var(--tt-ink) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--tt-bronze) 70%, transparent);
  border-radius: var(--tt-radius);
}
.tt-aok .tt-aok-step::before {
  content: counter(tt-step);
  position: absolute;
  top: 1.1rem;
  left: 1.75rem;
  font-family: var(--tt-font-display);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--tt-gold);
}

/* ============================================================================
   SECTION 4 — ONBOARDING CHECKLIST : dark card, gold checkbox accents
   Markup: <ul class="tt-aok-checklist"><li class="tt-aok-check">…</li></ul>
   ============================================================================ */
.tt-aok .tt-aok-checklist {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  background: var(--tt-veil);
  border: 1px solid var(--tt-bronze);
  border-radius: var(--tt-radius);
}
.tt-aok .tt-aok-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .9rem 0;
  color: var(--tt-paper);
  border-bottom: 1px solid color-mix(in srgb, var(--tt-bronze) 35%, transparent);
}
.tt-aok .tt-aok-check:last-child { border-bottom: 0; }
.tt-aok .tt-aok-check::before {           /* the gold checkbox */
  content: "";
  flex: 0 0 auto;
  display: flex;            /* centres the checkmark glyph when checked */
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  margin-top: .05em;
  border: 2px solid var(--tt-gold);
  border-radius: 5px;
  line-height: 1;
}
/* Checked: the SAME square, now filled gold, with a crisp off-white checkmark
   centred inside it. The glyph lives in ::before so it tracks the box exactly —
   no absolutely-positioned mark that can drift out of alignment, and the colour
   is the off-white Global (never the dark ink that used to vanish on the gold). */
.tt-aok .tt-aok-check.is-checked::before {
  content: "\2713";
  background: var(--tt-gold);
  color: var(--tt-paper);
}

/* ============================================================================
   SECTION 5 — THE DIGNITY MODEL : 50/50 bar + disclaimer box
   ============================================================================ */
.tt-aok .tt-aok-split {
  display: flex;
  height: 2.6rem;
  margin: .5rem 0 1.5rem;
  border: 1px solid var(--tt-bronze);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--tt-font-ui);
}
.tt-aok .tt-aok-split__you,
.tt-aok .tt-aok-split__tt {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tt-aok .tt-aok-split__you { background: var(--tt-gold); color: var(--tt-ink); }
.tt-aok .tt-aok-split__tt {
  background: color-mix(in srgb, var(--tt-bronze) 55%, var(--tt-ink));
  color: var(--tt-paper);
}
.tt-aok .tt-aok-dignity__disclaimer {
  border-left: 3px solid var(--tt-gold);
  background: color-mix(in srgb, var(--tt-ink) 55%, transparent);
  border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
}

/* ============================================================================
   SECTION 6 — FAQ : collapsible accordion (native <details>/<summary>)
   NOTE: this section carries `tt-aok` and `tt-aok-faq` on the SAME element
   (unlike other sections, whose modifier class sits on a child). So these use
   the COMPOUND selector `.tt-aok.tt-aok-faq` (no space) — a descendant selector
   `.tt-aok .tt-aok-faq` would never match and the whole section stays unstyled.
   ============================================================================ */
.tt-aok.tt-aok-faq details {
  margin-bottom: .75rem;
  padding: 0 1.25rem;
  border: 1px solid color-mix(in srgb, var(--tt-bronze) 60%, transparent);
  border-radius: var(--tt-radius);
  background: color-mix(in srgb, var(--tt-ink) 70%, transparent);
}
.tt-aok.tt-aok-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--tt-font-ui);   /* Montserrat, via the Global Font alias */
  font-size: 1.2rem;                /* clearly larger than the answer body text */
  color: var(--tt-paper);
}
.tt-aok.tt-aok-faq summary::-webkit-details-marker { display: none; }
.tt-aok.tt-aok-faq summary::after {
  content: "+";
  color: var(--tt-gold);
  font-family: var(--tt-font-ui);
  font-size: 1.5em;     /* a touch larger so the toggle reads as intentional */
  line-height: 1;
}
.tt-aok.tt-aok-faq details[open] summary { color: var(--tt-gold); }
.tt-aok.tt-aok-faq details[open] summary::after { content: "\2013"; }
.tt-aok.tt-aok-faq details > *:not(summary) {
  margin: 0;
  padding-bottom: 1.1rem;
  color: var(--tt-muted);
  font-family: var(--tt-font-body);
  line-height: 1.7;
}

/* ============================================================================
   SECTION 7 — YOUR NEXT ACTIONS : gold-bordered cards that lift on hover
   ============================================================================ */
.tt-aok .tt-aok-action-card {
  background: color-mix(in srgb, var(--tt-ink) 70%, transparent);
  border: 1px solid var(--tt-gold);
  border-radius: var(--tt-radius);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tt-aok .tt-aok-action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--tt-ink) 60%, transparent);
}

/* ============================================================================
   SECTION 8 — THE SONIC PROFILE : multi-step embedded form (demo)
   ----------------------------------------------------------------------------
   A 3-step, no-reload form rendered from a single HTML widget. This file owns
   every visual: the pull quote, gold-on-dark progress bar, dark inputs with a
   gold focus ring, gold pill buttons, the Dignity-Model pill selector, and the
   confirmation card. Step switching, the conditional field, pill selection and
   the submit -> confirmation swap are driven by the widget's own script, which
   only toggles classes — no colours or fonts ever leave this file.
   Scope root: .tt-sonic (inside a .tt-aok section).
   ============================================================================ */
.tt-aok .tt-sonic {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--tt-veil);
  border: 1px solid var(--tt-bronze);
  border-radius: var(--tt-radius);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tt-ink) 55%, transparent);
}

/* --- Pull quote at the top of the form --- */
.tt-aok .tt-sonic__quote {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--tt-gold);
  background: color-mix(in srgb, var(--tt-ink) 55%, transparent);
  border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
  font-family: var(--tt-font-body);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--tt-paper);
}

/* --- Progress bar: centred label above a gold fill on a dark track --- */
.tt-aok .tt-sonic__progress { margin-bottom: 2rem; }
.tt-aok .tt-sonic__progress-label {
  display: block;
  text-align: center;
  margin-bottom: .6rem;
  font-family: var(--tt-font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--tt-gold);
}
.tt-aok .tt-sonic__track {
  height: .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tt-bronze) 40%, var(--tt-ink));
  overflow: hidden;
}
.tt-aok .tt-sonic__fill {
  height: 100%;
  width: 33.333%;
  background: var(--tt-gold);
  border-radius: 999px;
  transition: width .35s ease;
}
.tt-aok .tt-sonic.is-step-2 .tt-sonic__fill { width: 66.666%; }
.tt-aok .tt-sonic.is-step-3 .tt-sonic__fill { width: 100%; }

/* --- Steps: one visible at a time --- */
.tt-aok .tt-sonic__step { display: none; }
.tt-aok .tt-sonic__step.is-active {
  display: block;
  animation: tt-sonic-fade .4s ease;
}
@keyframes tt-sonic-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.tt-aok .tt-sonic__step-title {
  margin: 0 0 .4rem;
  font-family: var(--tt-font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--tt-gold);
}
.tt-aok .tt-sonic__subtitle {
  margin: 0 0 1.75rem;
  font-family: var(--tt-font-body);
  font-style: italic;
  color: var(--tt-muted);
}

/* --- Fields: dark wells, off-white text, gold focus ring --- */
.tt-aok .tt-sonic__field { margin-bottom: 1.5rem; }
.tt-aok .tt-sonic__label {
  display: block;
  margin-bottom: .55rem;
  font-family: var(--tt-font-body);
  line-height: 1.55;
  color: var(--tt-paper);
}
.tt-aok .tt-sonic__optional {
  font-style: italic;
  color: var(--tt-muted);
}
.tt-aok .tt-sonic input[type="text"],
.tt-aok .tt-sonic input[type="email"],
.tt-aok .tt-sonic input[type="tel"],
.tt-aok .tt-sonic textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: color-mix(in srgb, var(--tt-ink) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--tt-gold) 55%, transparent); /* visible gold edge at rest */
  border-radius: 10px;
  color: var(--tt-paper);
  font-family: var(--tt-font-body);
  font-size: 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tt-aok .tt-sonic input::placeholder,
.tt-aok .tt-sonic textarea::placeholder { color: var(--tt-muted); }
.tt-aok .tt-sonic input:focus,
.tt-aok .tt-sonic textarea:focus {
  outline: none;
  border-color: var(--tt-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-gold) 25%, transparent);
}
.tt-aok .tt-sonic textarea {
  min-height: 150px;
  line-height: 1.6;
  resize: vertical;
}

/* --- Selectable options (Yes/No + Dignity Model): pills that go gold when
       chosen. The real radio inputs are visually hidden but stay focusable. --- */
.tt-aok .tt-sonic__options {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.tt-aok .tt-sonic__options--stack { /* the 3 Dignity cards share the row evenly */ }
.tt-aok .tt-sonic__pill {
  position: relative;
  flex: 1 1 0;
  min-width: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .9rem 1.1rem;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tt-bronze) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tt-ink) 70%, transparent);
  color: var(--tt-paper);
  font-family: var(--tt-font-ui);
  font-size: .9rem;
  letter-spacing: .02em;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tt-aok .tt-sonic__pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.tt-aok .tt-sonic__pill:hover {
  border-color: var(--tt-gold);
}
.tt-aok .tt-sonic__pill:has(input:checked) {
  background: var(--tt-gold);
  border-color: var(--tt-gold);
  color: var(--tt-ink);
}
.tt-aok .tt-sonic__pill:has(input:focus-visible) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-gold) 25%, transparent);
}

/* --- A field that only appears once "Yes" is chosen --- */
.tt-aok .tt-sonic__conditional { display: none; margin-top: 1.25rem; }
.tt-aok .tt-sonic__conditional.is-shown { display: block; }

/* --- Back / Next / Submit: gold pills consistent with the page CTAs --- */
.tt-aok .tt-sonic__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.tt-aok .tt-sonic__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 2rem;
  border-radius: 999px;
  border: 1px solid var(--tt-gold);
  background: var(--tt-gold);
  color: var(--tt-ink);
  font-family: var(--tt-font-ui);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.tt-aok .tt-sonic__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--tt-ink) 55%, transparent);
}
.tt-aok .tt-sonic__btn--ghost {
  background: transparent;
  color: var(--tt-gold);
}
.tt-aok .tt-sonic__btn--ghost:hover {
  background: color-mix(in srgb, var(--tt-gold) 12%, transparent);
}
.tt-aok .tt-sonic__nav--end { justify-content: flex-end; } /* step 1 has no Back */

/* --- Submit / confirmation swap --- */
.tt-aok .tt-sonic__form.is-hidden { display: none; }
.tt-aok .tt-sonic__confirm { display: none; }
.tt-aok .tt-sonic__confirm.is-shown {
  display: block;
  text-align: center;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
  animation: tt-sonic-fade .45s ease;
}
.tt-aok .tt-sonic__confirm-mark {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.25rem;
  border: 2px solid var(--tt-gold);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-gold);
  font-family: var(--tt-font-display);
  font-size: 1.75rem;
  line-height: 1;
}
.tt-aok .tt-sonic__confirm-title {
  margin: 0 0 .75rem;
  font-family: var(--tt-font-display);
  font-size: 1.75rem;
  color: var(--tt-gold);
}
.tt-aok .tt-sonic__confirm-body {
  margin: 0 auto;
  max-width: 44ch;
  font-family: var(--tt-font-body);
  line-height: 1.7;
  color: var(--tt-muted);
}

/* --- Mobile: single column, stacked controls --- */
@media (max-width: 600px) {
  .tt-aok .tt-sonic__options { flex-direction: column; }
  .tt-aok .tt-sonic__pill { min-width: 0; }
  .tt-aok .tt-sonic__nav { flex-direction: column-reverse; }
  .tt-aok .tt-sonic__btn { width: 100%; }
}

/* ============================================================================
   SECTION 9 — ONBOARDING CHECKLIST : interactivity (enhances Section 4)
   ----------------------------------------------------------------------------
   Section 4 already draws the hollow gold box and, on `.is-checked`, fills it
   and draws the tick. This block layers on the *interactive* feel: clickable
   rows, hover/focus affordances, a smooth fill transition, a gentle dimmed +
   struck-through label when complete, and the ceremonial "all done" line. The
   checked state itself is toggled by the widget's own script (localStorage);
   nothing here hardcodes a colour or font — all tokens resolve to Globals.
   ============================================================================ */

/* Keep the list's prior Global Font (Lora 18px) now that it's an HTML widget. */
.tt-aok .tt-aok-checklist {
  font-family: var(--tt-font-body);
  font-size: 1.125rem;
}

/* Each row reads as a control: pointer, no text selection, hover + focus ring. */
.tt-aok .tt-aok-check {
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  transition: background .2s ease;
}
.tt-aok .tt-aok-check:hover {
  background: color-mix(in srgb, var(--tt-gold) 8%, transparent);
}
.tt-aok .tt-aok-check:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-gold) 30%, transparent);
}

/* Smooth, non-jarring fill of the gold box on check/uncheck. */
.tt-aok .tt-aok-check::before {
  transition: background .25s ease, border-color .25s ease;
}

/* Label text: dims and gains a soft gold strikethrough once complete. */
.tt-aok .tt-aok-check__text {
  transition: opacity .25s ease;
}
.tt-aok .tt-aok-check.is-checked .tt-aok-check__text {
  opacity: .55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--tt-gold) 70%, transparent);
}

/* The understated, ceremonial "all five done" line below the card. */
.tt-aok .tt-aok-checklist__done {
  display: none;
  margin: 1.25rem 0 0;
  text-align: center;
  font-family: var(--tt-font-display);
  letter-spacing: .04em;
  color: var(--tt-gold);
}
.tt-aok .tt-aok-checklist__done.is-shown {
  display: block;
  animation: tt-sonic-fade .5s ease;  /* reuse the fade keyframe from Section 8 */
}