/* ============================================================
   THE IDENTITY BRAND AUDIT · brandaudit.drjohnna.co

   Stylesheet for the multi-step audit form. Single file, no
   build step. Mirrors the design system from doctorjohnna.com.

   Passes:
     1. Reset and base
     2. Design tokens
     3. Theme (light / dark)
     4. Typography
     5. Components (pill, label, skip link, sr-only)
     6. Site header (matches doctorjohnna.com)
     7. Form layout (audit section, intro)
     8. Form fields (underline-style inputs, radio/checkbox stacks)
     9. Multi-step (progress strip, step heading, identity-layer treatment, nav)
    10. Footer
    11. Responsive
    12. Reduced motion
   ============================================================ */


/* ============================================================
   1. RESET AND BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  /* Sticky footer — body becomes a flex column so the footer
     pins to the bottom of the viewport even on short pages
     (like the thank-you page). Otherwise the cream background
     leaks below the dark footer band. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

.site-footer {
  flex-shrink: 0;
}

img, picture, svg, video { display: block; max-width: 100%; }

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

/* Skip link — hidden until focused */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--cream);
  padding: 1rem 1.5rem;
  z-index: 999;
}
.skip-link:focus { left: 0; }

/* Screen-reader only — used for the live-region step announcer */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

:root {
  /* Surface colors — match doctorjohnna.com */
  --cream: oklch(0.99 0.005 80);    /* #FEFCF9 */
  --ink: oklch(0.16 0.005 80);      /* #202020 */
  --sand: oklch(0.92 0.02 80);
  --teal: oklch(0.72 0.08 190);     /* #53C5B3 */
  --yellow: oklch(0.94 0.16 105);   /* #F0F87C */

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 8rem;

  /* Fluid section padding */
  --section-pad-y: clamp(3.5rem, 7vw, 6rem);
  --section-pad-x: clamp(1.5rem, 5vw, 4rem);

  /* Type scale */
  --type-hero: clamp(2rem, 5vw, 4rem);
  --type-section: clamp(1.65rem, 3.5vw, 2.75rem);
  --type-subhead: clamp(1.15rem, 1.8vw, 1.5rem);
  --type-body: 1rem;
  --type-lead: clamp(1rem, 1.3vw, 1.15rem);
  --type-small: 0.875rem;
  --type-label: 0.8rem;

  --hairline: 1px;
  --radius-pill: 999px;
  --transition-fast: 200ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: 600ms cubic-bezier(0.25, 1, 0.5, 1);
}


/* ============================================================
   3. THEME
   ============================================================ */

[data-theme="light"] {
  --surface: var(--cream);
  --on-surface: var(--ink);
  --accent: var(--teal);
  background: var(--surface);
  color: var(--on-surface);
}

[data-theme="dark"] {
  --surface: var(--ink);
  --on-surface: var(--cream);
  --accent: var(--yellow);
  background: var(--surface);
  color: var(--on-surface);
  line-height: 1.55;
}

.accent-teal { color: var(--teal); }
.accent-yellow { color: var(--yellow); }


/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5 {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

p {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--type-body);
  line-height: 1.6;
  max-width: 65ch;
}

em, .editorial-italic {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.label {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* ============================================================
   5. COMPONENTS
   ============================================================ */

main { display: block; }

.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border: var(--hairline) solid currentColor;
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
}

.pill-cta .plus-icon,
.pill-cta .arrow-icon {
  display: inline-block;
  transition: transform var(--transition-fast);
  font-weight: 400;
  line-height: 1;
}

.pill-cta:hover,
.pill-cta:focus-visible {
  background: var(--on-surface);
  color: var(--surface);
}

.pill-cta:hover .plus-icon,
.pill-cta:focus-visible .plus-icon {
  transform: rotate(45deg);
}

.pill-cta-large {
  font-size: 1rem;
  padding: 0.7rem 1.5rem;
}

.pill-cta[disabled] {
  opacity: 0.55;
  cursor: wait;
}

/* The browser's default [hidden] = display:none is overridden by
   the explicit display:inline-flex above, so we have to win it back
   explicitly. Without this, the Back and Submit buttons show on
   every step instead of only when needed. */
.pill-cta[hidden] {
  display: none;
}

.inline-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: opacity var(--transition-fast);
}
.inline-link:hover { opacity: 0.7; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}


/* ============================================================
   6. SITE HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: var(--hairline) solid var(--ink);
}

.header-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--section-pad-x);
}

.wordmark {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.15em;
  font-size: 0.95rem;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.main-nav a {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  padding: var(--space-1) 0;
  transition: opacity var(--transition-fast);
}

.main-nav a:hover { opacity: 0.65; }

.main-nav .nav-external {
  color: var(--teal);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.main-nav .nav-external .external-icon {
  font-size: 0.85em;
  display: inline-block;
  transition: transform var(--transition-fast);
}

.main-nav .nav-external:hover .external-icon {
  transform: translate(2px, -2px);
}


/* ============================================================
   7. AUDIT SECTION + INTRO
   Matches the layout pattern from doctorjohnna.com/contact.
   ============================================================ */

.audit-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 50rem;
  padding: var(--section-pad-y) var(--section-pad-x);
}

.contact-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 42rem;
  padding-bottom: var(--space-5);
  position: relative;
}

/* Short ink divider under the intro. (Was teal — changed to ink so it
   doesn't compete with the teal progress bar under the step headings.) */
.contact-intro::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: clamp(4rem, 8vw, 6rem);
  height: 2px;
  background: var(--ink);
}

.contact-intro .label {
  display: inline-block;
  margin-bottom: var(--space-1);
}

/* Step 2+ collapses the intro to just the label so "THE IDENTITY BRAND AUDIT"
   stays visible at the top throughout the form, but the big intro copy drops
   away once they're in the questions. JS adds .is-collapsed on step change. */
.contact-intro.is-collapsed {
  padding-bottom: var(--space-3);
}

.contact-intro.is-collapsed .contact-headline,
.contact-intro.is-collapsed .contact-sub {
  display: none;
}

.contact-headline {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.contact-headline em {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
  letter-spacing: 0;
}

.contact-sub {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--type-lead);
  line-height: 1.55;
  opacity: 0.85;
  max-width: 44ch;
}


/* ============================================================
   8. FORM FIELDS
   Underline-style inputs. Same component library as /contact.
   ============================================================ */

/* Form is unframed — spacious, editorial. The fields and step headings
   carry the structure; no enclosing box. */
.audit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 42rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.form-label {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

.form-label em {
  color: var(--teal);
  font-style: normal;
  font-family: inherit;
  margin-left: 0.15rem;
}

/* Hint pairs tightly with the label (they read as one unit) but keeps
   the full field gap below it so the input still has breathing room.
   The negative top margin counteracts the field gap so label and hint
   sit ~0.25rem apart instead of 1rem. */
.form-hint {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.7;
  margin-top: calc(var(--space-1) - var(--space-3));
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  padding: var(--space-2) 0;
  width: 100%;
  resize: vertical;
  transition: border-color var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.form-field textarea {
  min-height: 4rem;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  border-bottom-width: 2px;
}

/* Required-field nudge: missing-required gets a subtle teal underline +
   a small inline message inserted by script.js. Doesn't shout. */
.form-field.is-invalid input,
.form-field.is-invalid textarea {
  border-color: var(--teal);
  border-bottom-width: 3px;
}

.form-field-error {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--teal);
  margin-top: var(--space-1);
}

/* Radio / checkbox groups */
.form-field-group {
  border: none;
  padding: 0;
  margin: 0;
}

.radio-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.radio-label,
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
  font-weight: 400;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.radio-label:hover,
.checkbox-label:hover {
  background: var(--sand);
}

.radio-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--teal);
  cursor: pointer;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.radio-label:has(input:checked),
.checkbox-label:has(input:checked) {
  border-color: var(--teal);
  background: rgba(83, 197, 179, 0.06);
}

.radio-label strong,
.checkbox-label strong {
  font-weight: 700;
}

/* Honeypot — hidden from real users */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inline submission error */
.form-error {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: var(--space-3);
  border-left: 3px solid var(--teal);
  background: rgba(83, 197, 179, 0.08);
}

.form-note {
  font-size: 1rem;
  opacity: 0.85;
  max-width: none;
}


/* ============================================================
   9. MULTI-STEP NAVIGATION

   Progress strip + step headings + Identity Layer special
   treatment + Back/Next/Submit row.
   ============================================================ */

/* Progress strip — quiet. Just a small step count and a thin bar.
   The step name is the heading below, so it isn't repeated up here. */
.audit-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.audit-progress-label {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

.audit-progress-bar {
  position: relative;
  height: 2px;
  background: rgba(32, 32, 32, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.audit-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: var(--teal);
  transition: width var(--transition-slow);
}

/* A step — only one visible at a time (script.js toggles hidden). */
.audit-step {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.audit-step[hidden] { display: none; }

/* Heading is just the title (and optionally a DM Serif tagline).
   No bottom border or divider — generous bottom margin carries the break
   and gives the section title room to breathe before the first question. */
.audit-step-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.audit-step-title {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.audit-step-tagline {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--teal);
  max-width: 36ch;
}

/* Navigation row */
.audit-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--ink);
}

.audit-back {
  margin-right: auto;
}

/* Step entry animation. Quick + calm. Disabled by reduced-motion below. */
.audit-step.is-active {
  animation: stepIn var(--transition-slow) ease-out both;
}

@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   10. FOOTER
   ============================================================ */

.site-footer {
  padding: var(--section-pad-y) var(--section-pad-x) var(--space-5);
  border-top: var(--hairline) solid var(--cream);
}

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--hairline) solid currentColor;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.footer-tagline {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  letter-spacing: -0.01em;
  max-width: 32ch;
  line-height: 1.3;
}

.footer-meta {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.footer-col h5 {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--space-3);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  font-size: 0.95rem;
  transition: color var(--transition-fast);
}

.footer-col a:hover { color: var(--yellow); }

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.5;
  padding-top: var(--space-5);
  border-top: var(--hairline) solid currentColor;
  flex-wrap: wrap;
}

.footer-legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Minimal footer — single legal row, no tagline, no divider line above.
   Used on both /index.html and /thank-you.html so they match exactly. */
.site-footer-minimal {
  padding: var(--space-5) var(--section-pad-x);
  border-top: none;
}

.site-footer-minimal .footer-legal {
  padding-top: 0;
  border-top: none;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Right-side links: site URL + IG handle. Teal hover. */
.site-footer-minimal .footer-links {
  display: inline-flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-footer-minimal .footer-link {
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.site-footer-minimal .footer-link:hover {
  color: var(--teal);
}


/* ============================================================
   11. THANK-YOU PAGE
   ============================================================ */

.thank-you {
  padding: var(--section-pad-y) var(--section-pad-x);
}

.thank-you-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 42rem;
}

.thank-you-headline {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.thank-you-sub {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--type-lead);
  line-height: 1.55;
  opacity: 0.85;
  max-width: 44ch;
}

.thank-you-signature {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.4;
  margin-top: var(--space-3);
}

.thank-you-role {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  font-style: normal;
  display: block;
  margin-top: var(--space-1);
}

.hero-divider {
  width: clamp(3rem, 6vw, 5rem);
  height: 2px;
  background: var(--ink);
  border: none;
  margin: var(--space-3) 0 var(--space-2);
  opacity: 0.65;
}

.thank-you-while {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: var(--space-2);
}

.thank-you-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.thank-you-options li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.thank-you-link {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  transition: opacity var(--transition-fast);
}

.thank-you-link:hover { opacity: 0.7; }

.thank-you-link-note {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  opacity: 0.7;
  line-height: 1.4;
}

.thank-you-return {
  font-size: 0.95rem;
  opacity: 0.75;
  margin-top: var(--space-3);
}


/* ============================================================
   12. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

  /* Header — stack wordmark + nav, nav wraps to second row */
  .header-bar {
    grid-template-columns: auto auto;
    grid-template-areas:
      "wordmark cta"
      "nav nav";
    row-gap: var(--space-3);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .wordmark { grid-area: wordmark; }

  .header-bar .pill-cta {
    grid-area: cta;
    justify-self: end;
  }

  .main-nav {
    grid-area: nav;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .main-nav a { font-size: 0.9rem; }

  /* Form — tighter vertical rhythm on small screens */
  .audit-form {
    gap: var(--space-5);
  }

  .audit-step {
    gap: var(--space-5);
  }

  /* Nav row — Back stays inline, Next/Submit go full-width-ish */
  .audit-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .audit-back {
    margin-right: 0;
    align-self: flex-start;
  }

  .audit-next,
  .audit-submit {
    justify-content: center;
  }

  .footer-legal {
    flex-direction: column;
    gap: var(--space-2);
  }
}


/* ============================================================
   13. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}