/* ==========================================================================
   KF.Social interactive content components  —  gh-content2.css
   Golden Hour brand. Shipped as a SEPARATE stylesheet (never merged into the
   unversioned, 7-day edge-cached golden.css) so a new component can never be
   paired with a stale copy of the core stylesheet.

   Components (all mobile-first, print-friendly, reduced-motion aware):
     .kf-deck   — question decks (light / curious / deep sets)
     .kf-quote  — pull quote (large Fraunces italic, gold rule)
     .kf-seed   — discussion seed ("Ask your group" parchment card)
     .kf-tool   — interactive tool mount (name generator, social battery)

   SPECIFICITY NOTES (a past bug: `.seo-page a{color:var(--text-link)}` beat
   bare component classes, and `.sp-content blockquote{...}` beats a bare
   `.kf-quote`). Every rule here is scoped under `.seo-page` and/or
   `.sp-content` so it wins on specificity AND on source order (this file is
   linked AFTER golden.css). Colours are always set explicitly on cream so
   nothing inherits an invisible link colour.
   ========================================================================== */

/* --- shared tokens ------------------------------------------------------- */
.seo-page .kf-deck,
.seo-page .kf-seed,
.seo-page .kf-tool{
  --kf-c2-line:var(--line);
  --kf-c2-ink:var(--ink);
  --kf-c2-gold:var(--gold-deep);
  margin:2rem 0;
}

/* ==========================================================================
   Question deck
   ========================================================================== */
.seo-page .kf-deck{
  display:grid;
  gap:1rem;
}
@media (min-width:720px){
  .seo-page .kf-deck{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
}
.seo-page .kf-deck-set{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  padding:1.5rem 1.5rem 1.4rem;
}
/* Set label rendered as a gold eyebrow. */
.seo-page .kf-deck-set > h3{
  margin:0 0 1rem;
  font-family:'Inter',sans-serif;
  font-style:normal;
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.seo-page .kf-deck-set ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:kf-deck;
}
.seo-page .kf-deck-set ol li{
  counter-increment:kf-deck;
  position:relative;
  padding:.55rem 0 .55rem 2.4rem;
  color:var(--ink);
  line-height:1.5;
  border-top:1px solid var(--line);
}
.seo-page .kf-deck-set ol li:first-child{border-top:0;}
/* Fraunces italic numerals in gold. */
.seo-page .kf-deck-set ol li::before{
  content:counter(kf-deck);
  position:absolute;
  left:0;
  top:.5rem;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-weight:500;
  font-size:1.15rem;
  line-height:1;
  color:var(--gold);
  min-width:1.6rem;
  text-align:left;
}

/* Copy affordances (added by JS; absent without JS). Quiet ink pills: a bare
   hairline outline, ink label, no fill until hover, so they read as a soft
   secondary action rather than a coloured button. */
.seo-page .kf-copy{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
  padding:.38rem .8rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.seo-page .kf-copy:hover{background:var(--cream-2);border-color:var(--ink);color:var(--ink);}
.seo-page .kf-copy:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.seo-page .kf-copy.is-done{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--cream);}

/* Per-set copy sits top-right of the eyebrow row. */
.seo-page .kf-deck-set{padding-top:1.5rem;}
.seo-page .kf-set-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:.75rem;
  margin:0 0 1rem;
}
.seo-page .kf-set-head > h3{margin:0;}
/* Deck-level "Copy all" bar. */
.seo-page .kf-deck-actions{
  grid-column:1/-1;
  display:flex;
  justify-content:flex-end;
  margin-top:-.25rem;
}

/* ==========================================================================
   Pull quote  (must beat `.sp-content blockquote` — hence .sp-content .kf-quote)
   ========================================================================== */
.seo-page .kf-quote,
.sp-content .kf-quote{
  position:relative;
  margin:2.75rem 0 2.5rem;
  padding:.15rem 0 .15rem 1.9rem;
  border-left:3px solid var(--gold);
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:2rem;
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--ink);
  max-width:26ch;
}
/* A quiet oversized opening quote glyph in gold, set in the left gutter. */
.sp-content .kf-quote::before{
  content:"\201C";
  position:absolute;left:-.05rem;top:-.9rem;
  font-size:3.4rem;line-height:1;color:var(--gold-soft);
  pointer-events:none;
}
@media (max-width:520px){
  .sp-content .kf-quote{font-size:1.55rem;max-width:none;padding-left:1.4rem;}
  .sp-content .kf-quote::before{font-size:2.6rem;top:-.65rem;}
}
/* Copy affordance for the quote sits just below it. */
.seo-page .kf-quote-copy{margin-top:.75rem;}

/* ==========================================================================
   Discussion seed  ("Ask your group" parchment card)
   ========================================================================== */
.seo-page .kf-seed{
  position:relative;
  background:var(--cream-2);
  border:1px solid var(--gold-soft);
  border-radius:var(--r-md);
  padding:1.4rem 1.5rem;
}
.seo-page .kf-seed::before{
  content:"Ask your group";
  display:block;
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:.5rem;
}
.seo-page .kf-seed p{
  margin:0;
  color:var(--ink);
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:1.25rem;
  line-height:1.4;
}
.seo-page .kf-seed .kf-copy{margin-top:.9rem;}

/* ==========================================================================
   Interactive tools  (.kf-tool)
   Static fallback (inside the div) is styled as ordinary prose; JS replaces
   it with a live UI carrying the classes below.
   ========================================================================== */
.seo-page .kf-tool{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:1.75rem 1.5rem;
}
.seo-page .kf-tool-controls{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:flex-end;
  margin-bottom:1.25rem;
}
.seo-page .kf-field{display:flex;flex-direction:column;gap:.35rem;flex:1 1 160px;}
.seo-page .kf-field label{
  font-size:.72rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);
}
.seo-page .kf-field select,
.seo-page .kf-field input{
  font-family:'Inter',sans-serif;
  font-size:.95rem;
  color:var(--ink);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.6rem .75rem;
  min-height:44px;
}
.seo-page .kf-field select:focus-visible,
.seo-page .kf-field input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.seo-page .kf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:'Inter',sans-serif;font-size:.95rem;font-weight:650;
  background:var(--ink);color:var(--cream);
  border:1px solid var(--ink);border-radius:999px;
  padding:.7rem 1.4rem;min-height:44px;cursor:pointer;
  transition:background .18s var(--ease),transform .18s var(--ease);
}
.seo-page .kf-btn:hover{background:#2C2517;color:var(--cream);}
.seo-page .kf-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;color:var(--cream);}
.seo-page .kf-btn:active{transform:translateY(1px);}

/* Name generator results: each result a crafted parchment row with a
   Fraunces-scale name and a quiet copy pill. */
.seo-page .kf-names{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.seo-page .kf-name{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.75rem 1rem;color:var(--ink);
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.seo-page .kf-name:hover{border-color:var(--gold-soft);background:#fff;}
.seo-page .kf-name-text{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.15rem;line-height:1.3;color:var(--ink);
}

/* ---- Social battery quiz: progressive one-question flow ---------------- */
/* Progress header: "Question N of 10" + slim gold bar. */
.seo-page .kf-quiz-head{margin:0 0 1.5rem;}
.seo-page .kf-progress{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 .55rem;
}
.seo-page .kf-quiz-bar{
  height:5px;border-radius:999px;background:var(--cream-2);
  border:1px solid var(--line);overflow:hidden;
}
.seo-page .kf-quiz-bar-fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));
  transition:width .35s var(--ease);
}
/* One-question stage. */
.seo-page .kf-quiz-stage{min-height:16rem;}
.seo-page .kf-q{margin:0;}
.seo-page .kf-q-prompt{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.5rem;line-height:1.3;color:var(--ink);margin:0 0 1.15rem;
  outline:none;max-width:34ch;
}
.seo-page .kf-q-opts{display:grid;gap:.6rem;}
.seo-page .kf-opt{
  display:flex;align-items:center;gap:.75rem;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);
  padding:.85rem 1rem;cursor:pointer;color:var(--ink);line-height:1.4;font-weight:500;
  transition:border-color .15s var(--ease),background .15s var(--ease),transform .12s var(--ease);
}
.seo-page .kf-opt:hover{border-color:var(--gold-soft);background:#fff;}
.seo-page .kf-opt:active{transform:scale(.995);}
.seo-page .kf-opt input{accent-color:var(--gold-deep);margin:0;flex:none;width:18px;height:18px;}
.seo-page .kf-opt:focus-within{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold-soft);}
/* Back / secondary quiz nav: a quiet ink text button. */
.seo-page .kf-quiz-nav{margin-top:1.15rem;}
.seo-page .kf-quiz-back{
  display:inline-flex;align-items:center;gap:.35rem;
  background:none;border:0;padding:.4rem .2rem;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;color:var(--body);
  transition:color .15s var(--ease);
}
.seo-page .kf-quiz-back::before{content:"\2190";font-size:.95rem;}
.seo-page .kf-quiz-back:hover{color:var(--ink);}
.seo-page .kf-quiz-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
/* Result card: Fraunces display + gold accents, generous. */
.seo-page .kf-result{
  background:var(--cream-2);border:1px solid var(--gold-soft);border-radius:var(--r-lg);
  padding:1.9rem 1.75rem;margin-top:.5rem;
}
.seo-page .kf-result-eyebrow{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:.6rem;
}
.seo-page .kf-result h3{
  margin:0 0 .65rem;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:2rem;line-height:1.1;color:var(--ink);
}
.seo-page .kf-result .kf-result-table{
  margin:1rem 0 0;font-weight:600;color:var(--gold-deep);line-height:1.5;
}
.seo-page .kf-result p{color:var(--body);line-height:1.6;margin:0 0 .7rem;}
.seo-page .kf-result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.25rem;}
.seo-page .kf-result-again::before{content:"\21BB";font-size:1rem;}

/* Result doorway: personalized gem CTA + app fallback */
.seo-page .kf-result-cta{
  margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--gold-soft);
}
.seo-page .kf-result-cta-label{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:.7rem;
}
.seo-page a.kf-result-cta-primary{
  display:inline-block;background:var(--ink);color:var(--cream) !important;
  font-weight:700;font-size:.95rem;text-decoration:none;
  padding:.7rem 1.35rem;border-radius:999px;
}
.seo-page a.kf-result-cta-primary:hover,
.seo-page a.kf-result-cta-primary:focus-visible{
  background:var(--gold-deep);color:var(--cream) !important;
}
.seo-page .kf-result-cta-line{margin:.65rem 0 .5rem;color:var(--body);font-size:.92rem;line-height:1.55;}
.seo-page a.kf-result-cta-secondary{
  display:inline-block;color:var(--gold-deep);font-weight:600;font-size:.9rem;
  text-decoration:underline;text-underline-offset:3px;
}
.seo-page a.kf-result-cta-secondary::after{content:" \2192";}

/* ==========================================================================
   Motion + accessibility
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .seo-page .kf-copy,
  .seo-page .kf-btn,
  .seo-page .kf-opt,
  .seo-page .kf-quiz-bar-fill,
  .seo-page .kf-quiz-back{transition:none;}
  .seo-page .kf-btn:active,
  .seo-page .kf-opt:active{transform:none;}
}

/* ==========================================================================
   Print: decks/quotes/seeds render clean; every button + live control hidden.
   ========================================================================== */
@media print{
  .seo-page .kf-copy,
  .seo-page .kf-deck-actions,
  .seo-page .kf-btn,
  .seo-page .kf-tool-controls,
  .seo-page .kf-quiz-head,
  .seo-page .kf-quiz-nav,
  .seo-page .kf-result-actions,
  .seo-page .kf-quote-copy{display:none !important;}
  .seo-page .kf-deck-set,
  .seo-page .kf-seed,
  .seo-page .kf-tool,
  .seo-page .kf-name,
  .seo-page .kf-opt{
    box-shadow:none !important;
    border:1px solid #ccc !important;
    background:#fff !important;
  }
  .seo-page .kf-deck{display:block;}
  .seo-page .kf-deck-set{margin:0 0 1rem;break-inside:avoid;}
}