/* ============================================================
   Swing Studio — "Cast iron & chalk"
   Chalk ground, iron ink, ember-orange action, swing-arc motif.
   ============================================================ */

/* ---- Theme tokens ---- */
:root {
  --ground: #F5F2EC;
  --surface: #FFFFFF;
  --ink: #1C1C1F;
  --muted: #55555C;
  --brand: #C2410C;          /* CTA fill */
  --brand-text: #B03A0A;     /* accent text / ticks / links */
  --steel: #3B4A5A;          /* secondary accent text */
  --on-brand: #FFFFFF;       /* text on brand fills — fixed, never flips */
  --chalk: #F5F2EC;          /* text on always-dark bands — fixed, never flips */
  --band: #1C1C1F;           /* always-dark header/hero/footer/CTA/finder panel */
  --border: #E2DDD3;
  --border-dark: #33333A;

  --radius: 10px;
  --maxw: 1080px;
  --gap: clamp(1rem, 3vw, 2rem);

  --font-head: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
}

html[data-theme="dark"] {
  --ground: #121214;
  --surface: #2A2A31;        /* cards (>=1.3:1 vs ground — measured 1.31) */
  --ink: #F5F2EC;
  --muted: #BDBDC6;
  --brand: #C2410C;
  --brand-text: #FF9A6B;
  --steel: #8FA3B8;
  --on-brand: #FFFFFF;
  --chalk: #F5F2EC;
  --band: #0B0B0D;
  --border: #33333A;
  --border-dark: #2A2A30;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-text); }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
/* Bug (4): never put vertical padding directly on a .container element.
   Sections own their own vertical rhythm; .container only pads horizontally. */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.swing-arc { position: relative; }
.swing-arc > :first-child { position: relative; }
.swing-arc::before {
  content: "";
  position: absolute;
  top: -.4em; left: -.2em;
  width: 2.6em; height: 2.6em;
  border: 3px solid var(--brand);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: .25;
  transform: rotate(-20deg);
  pointer-events: none;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
  padding: .7rem 1.3rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}
.btn--primary:hover { background: #A5370B; border-color: #A5370B; color: var(--on-brand); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--ground); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ============================================================
   ALWAYS-DARK BANDS (bug 1 & 2)
   .site-header, .hero, .band, .site-footer, .finder__card
   All text/elements get explicit light-on-dark colours.
   No light card surfaces inside these.
   ============================================================ */
.site-header,
.hero,
.band,
.site-footer,
.finder__card {
  background: var(--band);
  color: var(--chalk);
}
.site-header h1, .site-header h2, .site-header h3, .site-header h4,
.hero h1, .hero h2, .hero h3, .hero h4,
.band h1, .band h2, .band h3, .band h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.finder__card h1, .finder__card h2, .finder__card h3, .finder__card h4 {
  color: var(--chalk);
}
.site-header p, .hero p, .band p, .site-footer p, .finder__card p,
.site-header li, .hero li, .band li, .site-footer li, .finder__card li,
.site-header dt, .site-header dd,
.hero dt, .hero dd,
.band dt, .band dd,
.site-footer dt, .site-footer dd,
.finder__card dt, .finder__card dd {
  color: var(--chalk);
}
/* muted text on dark bands — keep readable (steel/chalk mix, not the light --muted) */
.site-header .muted, .hero .muted, .band .muted,
.site-footer .muted, .finder__card .muted {
  color: #C9C9D2;
}
/* links on dark bands (bug 6: must NOT override button text) */
.site-header a:not(.btn), .hero a:not(.btn), .band a:not(.btn),
.site-footer a:not(.btn), .finder__card a:not(.btn) {
  color: #FF9A6B;
}
/* ticks / accent glyphs on dark surfaces use brand-text, never --brand (bug 8) */
.hero .tick, .band .tick, .site-footer .tick, .finder__card .tick,
.site-header .tick { color: #FF9A6B; }

/* proof / stat text: the proof strip is NOT an always-dark band — it uses
   --surface/--ink/--muted which are theme-aware, defined in its own section. */

/* notes / img-note / demo-note on dark */
.site-header .img-note, .hero .img-note, .band .img-note,
.site-footer .img-note, .finder__card .img-note { color: #C9C9D2; }

/* Buttons inside dark bands — explicit so link rules can't bleed in (bug 6).
   Covers both a.btn and button.btn, incl. :hover. */
.site-header a.btn--primary, .hero a.btn--primary, .band a.btn--primary,
.site-footer a.btn--primary, .finder__card a.btn--primary,
.site-header button.btn--primary, .hero button.btn--primary, .band button.btn--primary,
.site-footer button.btn--primary, .finder__card button.btn--primary {
  color: var(--on-brand);
  background: var(--brand);
  border-color: var(--brand);
}
.site-header a.btn--primary:hover, .hero a.btn--primary:hover, .band a.btn--primary:hover,
.site-footer a.btn--primary:hover, .finder__card a.btn--primary:hover,
.site-header button.btn--primary:hover, .hero button.btn--primary:hover, .band button.btn--primary:hover,
.site-footer button.btn--primary:hover, .finder__card button.btn--primary:hover {
  color: var(--on-brand);
  background: #A5370B;
  border-color: #A5370B;
}
/* ghost buttons on dark: chalk outline/text, invert on hover.
   Both a.btn--ghost AND button.btn--ghost, incl :hover (bug 1 & 6). */
.site-header a.btn--ghost, .hero a.btn--ghost, .band a.btn--ghost,
.site-footer a.btn--ghost, .finder__card a.btn--ghost,
.site-header button.btn--ghost, .hero button.btn--ghost, .band button.btn--ghost,
.site-footer button.btn--ghost, .finder__card button.btn--ghost {
  color: var(--chalk);
  background: transparent;
  border-color: var(--chalk);
}
.site-header a.btn--ghost:hover, .hero a.btn--ghost:hover, .band a.btn--ghost:hover,
.site-footer a.btn--ghost:hover, .finder__card a.btn--ghost:hover,
.site-header button.btn--ghost:hover, .hero button.btn--ghost:hover, .band button.btn--ghost:hover,
.site-footer button.btn--ghost:hover, .finder__card button.btn--ghost:hover {
  color: var(--band);
  background: var(--chalk);
  border-color: var(--chalk);
}

/* demo-note: solid dark background block (works on light or dark page) */
.demo-note {
  background: var(--band);
  color: #C9C9D2;
  border-left: 3px solid var(--brand-text);
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  margin: 0 0 1rem;
}
.demo-note strong { color: var(--chalk); }
.demo-note a { color: #FF9A6B; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border-dark); }
.site-header .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: .75rem; /* header padding lives here (bug 4: not on a .section .container) */
}
.brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .03em;
  color: var(--chalk);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: .4rem;
  line-height: 1.05;
  overflow-wrap: break-word;
}
.brand:hover { text-decoration: none; }
.brand .brand__mark { color: #FF9A6B; }
.site-nav { display: flex; align-items: center; gap: .25rem 1.1rem; flex-wrap: wrap; margin-left: auto; }
.site-nav a:not(.btn) {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--chalk);
  text-decoration: none;
  padding: .3rem .1rem;
}
.site-nav a:not(.btn):hover { color: #FF9A6B; text-decoration: none; }
.site-nav a[aria-current="page"] { color: #FF9A6B; border-bottom: 2px solid var(--brand); }
.header-cta { margin-left: .25rem; }

/* theme toggle */
.theme-toggle {
  background: transparent;
  border: 1px solid #55555C;
  color: var(--chalk);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: none;
  transition: border-color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--chalk); background: rgba(255,255,255,.06); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero .container { padding-block: clamp(3rem, 8vw, 6rem); position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 5vw, 3rem); align-items: center; }
.hero__grid > * { min-width: 0; } /* bug 3 */
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius); object-fit: cover; aspect-ratio: 4/3; width: 100%; }
.hero p.lead { font-size: 1.2rem; }
.hero .img-note {
  position: absolute; bottom: .5rem; left: .5rem;
  background: rgba(11,11,13,.8); color: #C9C9D2;
  font-size: .72rem; padding: .25rem .5rem; border-radius: 6px;
  margin: 0;
}

/* ============================================================
   PROOF STRIP
   ============================================================ */
.proof { background: var(--surface); border-block: 1px solid var(--border); }
.proof .container { padding-block: 1.6rem; display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: center; text-align: center; }
.proof__item { display: flex; flex-direction: column; min-width: 0; }
.proof__big { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: var(--ink); line-height: 1.1; }
.proof__label { color: var(--muted); font-size: .9rem; }
.proof__stars { color: var(--brand-text); letter-spacing: .1em; }

/* ============================================================
   CARDS / GRID
   ============================================================ */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid > * { min-width: 0; } /* bug 3 */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.card h3 { color: var(--ink); }
.card__num { font-family: var(--font-head); color: var(--brand-text); font-weight: 700; font-size: 1.3rem; }

.feature-img { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); position: relative; }
.feature-img img { width: 100%; object-fit: cover; aspect-ratio: 4/3; }
.img-note { font-size: .8rem; color: var(--muted); margin: .4rem 0 0; }

/* lists with ticks */
.ticklist { list-style: none; padding: 0; margin: 0; }
.ticklist li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; }
.ticklist li .tick { position: absolute; left: 0; top: 0; color: var(--brand-text); font-weight: 700; }

/* chips (static, informational) */
.chip {
  display: inline-block;
  font-size: .82rem;
  font-weight: 500;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(194,65,12,.1);
  color: var(--brand-text);
  border: 1px solid rgba(194,65,12,.3);
}
.needs-content {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, rgba(85,85,92,.08), rgba(85,85,92,.08) 6px, transparent 6px, transparent 12px);
  color: var(--muted);
  border: 1px dashed var(--muted);
}

/* NAP definition list */
dl.nap { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; }
dl.nap dt { font-family: var(--font-head); font-weight: 600; color: var(--muted); }
dl.nap dd { margin: 0; color: var(--ink); }

/* ============================================================
   CTA BAND
   ============================================================ */
.band { position: relative; overflow: hidden; }
.band .container { padding-block: clamp(2.5rem, 6vw, 4rem); position: relative; z-index: 2; text-align: center; }
.band__bg { position: absolute; inset: 0; z-index: 1; opacity: .18; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band .btn-row { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { border-top: 1px solid var(--border-dark); }
.site-footer .container { padding-block: 2.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer__grid > * { min-width: 0; }
.site-footer h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .4rem; }
.footer__legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border-dark); font-size: .85rem; color: #C9C9D2; }

/* ============================================================
   FINDER (Signature feature)
   ============================================================ */
.finder { }
.finder__layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap); align-items: start; }
.finder__layout > * { min-width: 0; }
.finder fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; margin: 0 0 1.4rem; }
.finder legend { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; padding: 0 .4rem; color: var(--ink); }
.finder legend .step { color: var(--brand-text); }

.options { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.options--tiles { flex-direction: column; }

/* each selectable tile/chip: hide native input, style label */
.opt { position: relative; min-width: 0; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.3;
  transition: border-color .12s, background .12s;
}
.opt label .tick {
  width: 1.1em; display: inline-flex; justify-content: center;
  color: var(--brand-text); font-weight: 700;
  opacity: 0; /* bug 13: tick hidden until selected */
}
.opt input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; }
/* selected: outline + tick, not colour alone (bug 13) */
.opt input:checked + label { border-color: var(--brand); background: rgba(194,65,12,.08); font-weight: 700; }
.opt input:checked + label .tick { opacity: 1; }

.finder textarea {
  width: 100%; min-height: 90px; resize: vertical;
  font-family: var(--font-body); font-size: 1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.finder .helper { font-size: .85rem; color: var(--muted); margin: .4rem 0 0; }
.finder .counter { font-size: .8rem; color: var(--muted); }

/* dependent row (bug 14) hidden by default; JS toggles [hidden] */
#privateFriendRow[hidden] { display: none; }

/* ---- Finder result card: always-dark panel ---- */
.finder__card {
  border-radius: var(--radius);
  padding: 1.4rem;
  position: sticky; top: 5rem;
  border: 1px solid var(--border-dark);
}
.finder__card h3 { color: var(--chalk); }
.finder__summary {
  font-size: 1.1rem;
  line-height: 1.5;
  padding: .9rem 1rem;
  background: rgba(255,255,255,.05);
  border-radius: var(--radius);
  border: 1px solid #33333A;
  color: var(--chalk);
  margin-bottom: 1.1rem;
}
.finder__summary.is-empty { color: #C9C9D2; font-style: italic; }
.finder__card .ticklist li { color: var(--chalk); }
.finder__card .ticklist li .tick { color: #FF9A6B; }
.finder__msg {
  font-size: .9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid #33333A;
  border-radius: var(--radius);
  padding: .8rem;
  color: #D7D7DE;
  white-space: pre-wrap;
  margin: 1rem 0;
}
.finder__card .btn-row { margin-top: .5rem; }
.copy-status { font-size: .85rem; color: #C9C9D2; margin: .5rem 0 0; min-height: 1.2em; }
.copy-status[data-state="done"] { color: #FF9A6B; }

/* ============================================================
   RESPONSIVE (bug 3)
   ============================================================ */
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .finder__layout { grid-template-columns: 1fr; }
  .finder__card { position: static; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* nav on its own row */
  .site-header .container { flex-direction: column; align-items: stretch; gap: .6rem; }
  .site-nav { margin-left: 0; justify-content: flex-start; }
  .brand { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* hide header CTA button on very small screens (bug 3) */
  .header-cta { display: none; }
  body { font-size: 16px; }
  .btn { width: 100%; justify-content: center; }
  .btn-row .btn { flex: 1 1 auto; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* visually-hidden utility */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}