/* ==========================================================================
   jmTeaches.com — shared stylesheet
   Jesse Morales Academic & Performance Coaching

   One stylesheet for the whole site. Tools may add their own small CSS file
   for tool-specific UI, but should reuse the tokens and components below.

   Contents
   1. Fonts
   2. Design tokens
   3. Base / reset
   4. Layout helpers
   5. Header + navigation
   6. Buttons
   7. Page sections (page intro, bands)
   8. Components (process steps, split, facts, cards, notes)
   9. Forms
   10. Footer
   11. Utilities
   ========================================================================== */

/* 1. Fonts -------------------------------------------------------------- */
/* Georgia for reading text and headings, Helvetica Neue / Arial for small
   interface labels (buttons, nav, kickers). Both are system fonts, so no
   font files are downloaded. */

/* 2. Design tokens ------------------------------------------------------ */
:root {
  /* Brand */
  --cardinal: #990000;
  --cardinal-deep: #6b0000;
  --gold: #ffcc00;
  --gold-deep: #b8860b;      /* large text / decoration only on white */
  --tint: #fbeded;           /* light cardinal tint */

  /* Neutrals */
  --ink: #1b2430;
  --ink-soft: #5a6577;
  --line: #e6e2d8;
  --paper: #ffffff;
  --paper-warm: #fbfaf7;
  --green: #1e7a55;
  --shadow: 0 14px 36px rgba(153, 0, 0, 0.12);

  /* Type */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Georgia, "Times New Roman", serif;
  --font-ui: "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  --step-3: clamp(1.875rem, 1.4rem + 2vw, 2.5rem);
  --step-4: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Shape */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-pill: 999px;

  --container: 72rem;
  --measure: 38rem;
  --header-h: 4.5rem;
}

/* 3. Base / reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-s);
  line-height: 1.15;
  color: var(--ink);
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; }
h1 { font-size: var(--step-4); line-height: 1.05; }
h2 { font-size: var(--step-3); line-height: 1.18; color: var(--cardinal); }
h3 { font-size: var(--step-1); line-height: 1.25; color: var(--cardinal); }
h4 { font-size: var(--step-0); }

/* Small uppercase label above a heading */
.kicker {
  margin: 0 0 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

p, ul, ol { margin: 0 0 var(--space-s); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--cardinal); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cardinal-deep); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold); color: var(--ink); }

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

/* 4. Layout helpers ----------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.measure { max-width: var(--measure); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-s);
}
.skip-link:focus { top: 1rem; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* 5. Header + navigation ----------------------------------------------- */
/* Two tiers:
   .topbar       thin deep-red strip (contact + Student area); scrolls away
   .site-header  white main bar (logo, menu, Book a consultation); sticky
   On phones the top strip is hidden and its links move into the menu panel. */

.topbar {
  background: var(--cardinal-deep);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 2.25rem;
}
.topbar-note { margin: 0; letter-spacing: 0.02em; }
.topbar-links { display: flex; align-items: center; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--gold); text-decoration: underline; }
.topbar a:focus-visible { outline-color: var(--gold); }
.topbar-student {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  border: 1px solid rgba(255, 204, 0, 0.55);
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: var(--gold) !important;
}
.topbar-student:hover { background: rgba(255, 204, 0, 0.12); text-decoration: none !important; }
.topbar-student[aria-current="page"] { background: var(--gold); color: var(--cardinal-deep) !important; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgba(27, 36, 48, 0.35); }

.header-inner,
.topbar-inner {
  width: min(100% - 2.5rem, 80rem); /* a little wider than page content so logo + menu fit */
  margin-inline: auto;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  line-height: 1.1;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--cardinal);
}
.brand-sub {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
/* Header logo: compass mark + gold divider + wordmark, adapted from the
   full logo (assets/images/logo-mark.png is the mark only; the words are
   live text so they stay sharp and readable at any size). */
.site-header .brand { flex-direction: row; align-items: center; gap: 0.75rem; }
.brand-mark { display: block; width: auto; height: 2.75rem; flex: 0 0 auto; }
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--gold-deep);
}
.site-header .brand-name { font-size: 1.25rem; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.site-header .brand-sub {
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a6a0a; /* darker brand gold so small text stays readable on white */
}

.site-nav { display: flex; align-items: center; gap: 1.75rem; }

.nav-list { display: flex; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.nav-list a {
  position: relative;
  display: block;
  padding: 0.6rem 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
/* Refined underline: grows in from the center on hover, stays on the current page */
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.25rem;
  height: 2px;
  background: var(--cardinal);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.nav-list a:hover { color: var(--cardinal); }
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--cardinal); }

.nav-actions { display: flex; align-items: center; gap: var(--space-s); }
.nav-actions .btn { box-shadow: 0 6px 16px -8px rgba(153, 0, 0, 0.6); }

/* Only shown inside the phone menu (the top strip covers them on desktop) */
.nav-extra { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Keep every header item on one line. */
.nav-list a, .site-nav .btn, .brand-name, .brand-sub, .topbar a { white-space: nowrap; }

/* Tablet / phone: menu button + full-height panel.
   Only collapses when JavaScript is running (.js on <html>); without JS the
   full menu stays visible and usable.
   Breakpoint must match the matchMedia value in assets/js/site.js. */
@media (max-width: 70rem) {
  .js .nav-toggle { display: inline-flex; }
  .topbar-note { display: none; }
  .topbar-inner { justify-content: flex-end; }

  .site-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .js .site-nav {
    position: fixed;
    top: var(--nav-top, var(--header-h));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .js .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
  }

  .no-js .header-inner { flex-wrap: wrap; padding-block: var(--space-s); }

  .nav-list { flex-direction: column; gap: 0; }
  .nav-list a {
    padding: 0.8rem 0.25rem;
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-list a::after { display: none; }
  .nav-list a[aria-current="page"] { padding-left: 0.9rem; box-shadow: inset 3px 0 0 var(--cardinal); }

  .nav-actions { flex-direction: column; align-items: stretch; gap: 0.6rem; padding-top: 1.25rem; }
  .nav-actions .btn { width: 100%; min-height: 3.25rem; font-size: 1rem; }

  .nav-extra {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.6rem;
  }
  .nav-extra .btn { width: 100%; min-height: 3.25rem; font-size: 1rem; }
  .nav-extra-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.25rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
  }
  .nav-extra-contact a { color: var(--ink-soft); }
}

/* Phones: hide the top strip (its links are in the menu), smaller logo,
   icon-only menu button (the word stays available to screen readers). */
@media (max-width: 48rem) {
  .topbar { display: none; }
}
@media (max-width: 30rem) {
  .brand-mark { height: 2.25rem; }
  .site-header .brand { gap: 0.6rem; }
  .brand-text { padding-left: 0.6rem; }
  .site-header .brand-name { font-size: 1.0625rem; }
  .site-header .brand-sub { font-size: 0.5625rem; letter-spacing: 0.1em; }
  .nav-toggle { padding: 0.6rem; }
  .nav-toggle-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 23rem) {
  .site-header .brand-sub { white-space: normal; max-width: 10.5rem; line-height: 1.3; }
}

/* 6. Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--cardinal); color: #fff; }
.btn-primary:hover { background: var(--cardinal-deep); color: #fff; }

.btn-secondary { background: transparent; color: var(--cardinal); border-color: var(--cardinal); }
.btn-secondary:hover { background: var(--tint); color: var(--cardinal-deep); }

.btn-gold { background: var(--gold); color: var(--cardinal-deep); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
.btn-gold:hover { background: #ffd83d; color: var(--cardinal-deep); }

.btn-ghost-light { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #fff; }

.btn-sm { min-height: 2.5rem; padding: 0.55rem 1.1rem; font-size: 0.8125rem; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* 7. Page sections ------------------------------------------------------ */
.section { padding-block: var(--space-xl); }
.section-tight { padding-block: var(--space-l); }
.section-warm { background: var(--paper-warm); border-block: 1px solid var(--line); }

.section-head { max-width: 40rem; margin-bottom: var(--space-l); }
.section-head p { color: var(--ink-soft); font-size: 1.125rem; }

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 36rem; }

/* Interior page intro — same red band + gold rule as the home hero */
.page-intro {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 204, 0, 0.18), transparent 32%),
    linear-gradient(90deg, rgba(107, 0, 0, 0.98) 0%, rgba(153, 0, 0, 0.9) 60%, rgba(153, 0, 0, 0.72) 100%),
    var(--cardinal-deep);
}
.page-intro::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
}
.page-intro h1 { max-width: 20ch; color: #fff; font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
.page-intro .lede { color: #f8e7e7; }
.page-intro .kicker { color: var(--gold); }
.breadcrumb { font-family: var(--font-ui); font-size: var(--step--1); color: #f8e7e7; margin-bottom: var(--space-s); }
.breadcrumb a { color: #fff; }
.page-intro a:focus-visible { outline-color: var(--gold); }

/* Content sections with a heading block (home page, success stories, …) */
.home-section { padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); }
.home-section.alt { background: var(--paper-warm); border-block: 1px solid var(--line); }
.home-head { max-width: 45rem; margin-bottom: 1.4rem; }
.home-head h2 { margin-bottom: 0.5rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.8rem); }
.home-head p { color: var(--ink-soft); }
.home-head .btn-row { margin-top: 1.1rem; }

/* Buttons and gold emphasis inside a red page intro */
.page-intro h1 em { font-style: normal; color: var(--gold); }
.page-intro .btn-row { margin-top: 1.5rem; }

/* Closing call-to-action band */
.cta-band {
  background: linear-gradient(150deg, var(--cardinal), var(--cardinal-deep));
  color: #fff;
  text-align: center;
  padding-block: var(--space-xl);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #f8e7e7; font-size: 1.0625rem; max-width: 58ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--space-m); }
.cta-band .cta-band-mini {
  margin-top: var(--space-s);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f8e7e7;
}
.cta-band a:focus-visible { outline-color: var(--gold); }

/* 8. Components --------------------------------------------------------- */

/* Process steps: Diagnose → Build → Practice → Perform.
   Markup: <ol class="process"><li class="process-step"><h3>…</h3><p>…</p></li>…</ol> */
.process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  counter-reset: step;
}
.process-step {
  counter-increment: step;
  padding: 1.05rem;
  background: var(--paper);
  border-left: 4px solid var(--gold);
}
.process-step::before {
  content: "Step " counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.process-step h3 { margin: 0.35rem 0; font-size: 1.0625rem; }
.process-step p { color: var(--ink-soft); font-size: 0.875rem; }
@media (max-width: 51rem) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 35rem) { .process { grid-template-columns: 1fr; } }

/* Split layout: text + aside */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
@media (max-width: 52rem) { .split { grid-template-columns: 1fr; } }

/* Fact list (credentials, details) */
.facts .fact-label { font-family: var(--font-ui); font-size: 0.875rem; }
.facts { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.facts li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-s);
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.facts dt, .facts .fact-label { font-weight: 600; color: var(--ink); }
.facts .fact-value { color: var(--ink-soft); }
@media (max-width: 30rem) { .facts li { grid-template-columns: 1fr; gap: 0.1rem; } }

/* Cards — used for tools and resources, where items genuinely are
   parallel, self-contained units. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-m);
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.card h3 { margin-bottom: 0; font-size: 1.1875rem; }
.card p { color: var(--ink-soft); font-size: 0.975rem; }
.card-link { margin-top: auto; padding-top: var(--space-xs); font-family: var(--font-ui); font-size: 0.875rem; font-weight: 800; color: var(--cardinal); }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--cardinal); }
a.card:hover h3 { color: var(--cardinal); }

.status {
  font-family: var(--font-ui);
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--tint);
  color: var(--cardinal-deep);
}
.status-live { background: #e8f3ea; color: #1d5a2c; }

/* Quote / testimonial */
.quote {
  margin: 0;
  padding-left: var(--space-m);
  border-left: 3px solid var(--gold);
}
.quote p { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.quote footer { margin-top: var(--space-xs); font-size: var(--step--1); color: var(--ink-soft); }

/* Callout for students / notices */
.callout {
  padding: var(--space-m);
  background: var(--tint);
  border-radius: var(--radius-m);
  border: 1px solid #f1d6d6;
}

/* DEV NOTE — visible build placeholders. Search the project for
   "dev-note" and remove every one before launch. */
.dev-note {
  font-family: var(--font-ui);
  margin-block: var(--space-m);
  padding: var(--space-s) var(--space-m);
  font-size: var(--step--1);
  color: #5b4a00;
  background: #fff8d6;
  border: 1px dashed var(--gold-deep);
  border-radius: var(--radius-s);
}
.dev-note strong { color: #3f3300; }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-l); }
.prose h3 { margin-top: var(--space-m); }
.prose ul { padding-left: 1.2rem; }

/* 9. Forms -------------------------------------------------------------- */
.form { display: grid; gap: var(--space-m); max-width: 40rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-m); }
@media (max-width: 36rem) { .form-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.35rem; }
.field label, .field legend { font-family: var(--font-ui); font-weight: 700; font-size: 0.875rem; }
.field .hint { font-size: var(--step--1); color: var(--ink-soft); }
.optional { font-weight: 400; color: var(--ink-soft); }

.input, .select, .textarea {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 1rem;           /* 16px+ prevents iOS zoom on focus */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #cdbebe;
  border-radius: var(--radius-s);
}
.textarea { min-height: 8rem; resize: vertical; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 1px;
  border-color: var(--cardinal);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--cardinal);
}

/* Honeypot field — hidden from people, visible to spam bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-family: var(--font-ui); font-weight: 700; }
.form-status:empty { margin-top: calc(-1 * var(--space-m)); }
.form-status[data-state="success"] { color: #1d5a2c; }
.form-status[data-state="error"] { color: var(--cardinal); }

.privacy-note { font-size: var(--step--1); color: var(--ink-soft); }

/* Password page for protected tools (served by /functions/…/_middleware.js) */
.login-card {
  max-width: 28rem;
  padding: var(--space-l) var(--space-m);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  display: grid;
  gap: var(--space-m);
}
.login-error {
  margin: 0;
  padding: 0.75rem 1rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--cardinal);
  background: var(--tint);
  border-radius: var(--radius-s);
}

/* 10. Footer ------------------------------------------------------------ */
.site-footer {
  background: var(--cardinal-deep);
  color: rgba(255, 255, 255, 0.85);
  padding-block: var(--space-xl) var(--space-l);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer a:focus-visible { outline-color: var(--gold); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
}
.footer-brand .brand-name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.5rem; display: block; }
.footer-brand .brand-sub { color: rgba(255, 255, 255, 0.75); display: block; margin-bottom: var(--space-s); }
.footer-tagline { font-family: var(--font-display); color: var(--gold); font-size: 1.0625rem; }
.footer-framework { color: rgba(255, 255, 255, 0.75); font-size: var(--step--1); }

.footer-col h2 {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-s);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.45rem; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 60rem) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* 11. Utilities --------------------------------------------------------- */
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.text-soft { color: var(--ink-soft); }