/* ------------------------------------------------------------------
   Night Horse — brand alignment + interaction layer for /seo-grader
   Loaded AFTER grader-approved.css. Additive only: no layout, spacing
   or structural changes to the approved design. Adds (1) the site's
   typefaces, (2) a small cyan shift toward the site palette, and
   (3) the hover/active states the approved sheet never defined.
   ------------------------------------------------------------------ */

/* ---------- 1. typography: match the main site ---------- */
:root{
  --font-sans:'Onest', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
main, main p, main li, main input, main button, main summary, main label, main small, main span, main b, main strong{
  font-family:'Onest', ui-sans-serif, system-ui, sans-serif;
}
main h1, main h2, main h3, main h4,
.score-orbit strong, .price b, .card-number, .finding-index, .overall-score strong{
  font-family:'Unbounded', 'Onest', sans-serif;
  letter-spacing:-0.01em;
}
.mini-label, .eyebrow, .grade-chip, .popular-label, .signal-strip, .scanner-topline,
.terminal-lines, .impact, .secure-label, .progress-heading b{
  font-family:'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- 2. palette: nudge toward the site cyan (subtle) ---------- */
:root{
  --cyan:#22cfee;          /* was #16c7e8 — a step toward the site's #3FE0FF */
  --cyan-bright:#5de7f6;   /* unchanged */
  --line-strong:rgba(93,231,246,.46);
}

/* ---------- 3. interaction states (the missing piece) ---------- */
main a, main button, main summary, .price-card, .method-card,
.category-card, .pattern-card, .page-sample, .connected-list article{
  transition:transform .18s cubic-bezier(.22,1,.36,1),
             box-shadow .18s ease,
             border-color .18s ease,
             background .18s ease,
             color .18s ease;
}

/* pricing cards + their buttons */
.price-card{will-change:transform}
.price-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-strong);
  box-shadow:0 22px 50px rgba(3,10,20,.55), 0 0 0 1px rgba(93,231,246,.16);
}
.price-card:hover .price b{color:var(--cyan-bright)}
.price-card button{cursor:pointer}
.price-card button:hover{
  transform:translateY(-2px);
  border-color:#78dff4;
  color:#eafcff;
  background:linear-gradient(100deg, rgba(34,207,238,.18), rgba(155,124,255,.16));
  box-shadow:0 12px 30px rgba(22,199,232,.24);
}
.price-card.featured:hover{
  box-shadow:0 26px 60px rgba(3,10,20,.6), 0 0 0 1px rgba(93,231,246,.3);
}

/* every other button on the page (Talk to NightHorse, report actions, etc.) */
main button:not(.primary-button):not(.category-card){cursor:pointer}
main button:not(.primary-button):not(.category-card):hover{
  transform:translateY(-2px);
  border-color:#78dff4;
  color:#eafcff;
  box-shadow:0 12px 30px rgba(22,199,232,.22);
}
.primary-button{cursor:pointer}
.primary-button:active,
main button:not(.primary-button):not(.category-card):active,
.price-card button:active{transform:translateY(0)}

/* category score cards */
.category-card{cursor:pointer}
.category-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  box-shadow:0 16px 38px rgba(3,10,20,.5);
}
.category-card:hover strong{color:var(--cyan-bright)}

/* report + method + connected cards */
.method-card:hover, .connected-list article:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  box-shadow:0 18px 42px rgba(3,10,20,.5);
}
.pattern-card:hover, .page-sample:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
}

/* links + FAQ rows */
main a:not(.primary-button):hover{color:var(--cyan-bright)}
.faq-list summary{cursor:pointer}
.faq-list summary:hover{color:var(--cyan-bright)}
.competitor-toggle summary:hover{color:var(--cyan-bright)}

/* keyboard users get the same affordance */
main a:focus-visible, main button:focus-visible, main summary:focus-visible, main input:focus-visible{
  outline:2px solid var(--cyan-bright);
  outline-offset:3px;
  border-radius:6px;
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  main a, main button, main summary, .price-card, .method-card,
  .category-card, .pattern-card, .page-sample, .connected-list article{
    transition:none;
  }
  .price-card:hover, .category-card:hover, .method-card:hover,
  .connected-list article:hover, .pattern-card:hover, .page-sample:hover,
  main button:hover, .price-card button:hover{transform:none}
}

/* ------------------------------------------------------------------
   4. TYPOGRAPHY FIT — Unbounded is a wider display face than the
   system font this layout was measured for. Without these, headings
   wrap badly, pack together vertically, and the h1 em underline
   (absolutely positioned for a single line) slices through text.
   ------------------------------------------------------------------ */

/* give the wider face room to breathe, and balance the rag */
main h1, main h2, main h3{
  letter-spacing:-.022em;      /* was -.045em: too tight for Unbounded */
  text-wrap:balance;           /* stops "No / guesswork." style breaks */
}
main h1{line-height:1.06; font-size:clamp(34px,3.9vw,58px)}
main h2{line-height:1.1;  font-size:clamp(28px,3.5vw,46px)}
.connected-copy h2{line-height:1.12; font-size:clamp(26px,3vw,40px)}
.faq-section h2, .final-cta h2{line-height:1.08; font-size:clamp(30px,3.6vw,50px)}
.section-intro h2{line-height:1.1}
main h3{line-height:1.18}

/* the emphasis underline, rebuilt so it follows EVERY wrapped line
   instead of one absolute bar drawn across the middle */
main h1 em{
  background-image:linear-gradient(90deg, var(--cyan), transparent);
  background-size:100% 2px;
  background-position:0 calc(100% + 1px);
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding-bottom:3px;
}
main h1 em:after{display:none}

/* body copy: a touch more leading so the bone text is not jammed */
.hero-lede, .connected-copy p, .faq-section > div p, .final-cta p, .section-intro p{
  line-height:1.62;
}

@media (max-width:700px){
  main h1{font-size:clamp(29px,7.6vw,40px); line-height:1.1}
  main h2{font-size:clamp(24px,6.4vw,34px); line-height:1.14}
  .connected-copy h2,.faq-section h2,.final-cta h2{font-size:clamp(24px,6.4vw,34px)}
}

/* the approved sheet targets `.hero h1` (higher specificity than `main h1`),
   so the fit rules must match that weight to take effect */
.hero h1, .hero-copy h1{
  font-size:clamp(34px,3.9vw,58px);
  line-height:1.06;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.report-heading h2, .site-sample h3, .panel-heading h3{letter-spacing:-.02em}
@media (max-width:700px){
  .hero h1, .hero-copy h1{font-size:clamp(29px,7.6vw,40px); line-height:1.1}
}

/* ---------- 5. remove the decorative emphasis underline ----------
   The approved design draws a gradient bar under the highlighted words.
   At brand type sizes it reads as a stray line rather than emphasis,
   so the cyan colour alone carries the emphasis. */
main h1 em{
  background-image:none;
  padding-bottom:0;
}
main h1 em:after{display:none}

/* ---------- 6. pricing row alignment ----------
   The featured card was raised 10px, which knocked its label, price,
   feature list and button out of line with the cards either side.
   It still reads as featured via its violet border, glow and badge. */
.price-card.featured{transform:none}
.price-card.featured:hover{transform:translateY(-6px)}   /* same lift as its neighbours */

/* keep the three columns on identical internal rhythm */
.price-card > p{min-height:3.1em}                        /* equal blurb block */
.price-card ul{flex:1 0 auto}

/* ---------- 7. iOS zoom on focus ----------
   iOS Safari zooms the page in whenever a focused field is under 16px and
   never zooms back out — the approved 13px modal input triggers it on every
   phone. Raised only under 768px, so the approved desktop design is
   untouched. (Never fix this with user-scalable=no; that takes pinch-zoom
   away from everyone who needs it.) The scan fields (.url-field and
   .competitor-toggle) are already 17px, so only the modal needs raising. */
@media (max-width:768px){
  .lead-modal input,
  .lead-modal textarea,
  .lead-modal select{font-size:16px}
}