/* ==========================================================================
   hover-lang.org — site stylesheet
   Every page loads /assets/css/tokens.css first (tokens + base), then this
   file. Two jobs:
   1. Simple placeholder-page furniture (docs, examples, download, blog,
      playground, 404) — buttons, badges, cards, the .placeholder layout.
   2. Responsive rules for the real SiteNav / Hero / Impact / Features /
      Proof / SiteFooter React components (loaded on every page — Hero/
      Impact/Features/Proof only render on index.php). Those components were
      built as a fixed-viewport (1280×780) marketing preview with no
      breakpoints of their own, so everything below overrides their inline
      styles — that's why the mobile rules need !important: inline `style=`
      always wins over an external stylesheet unless it's flagged.
   ========================================================================== */

* { box-sizing: border-box; }
html { overflow-x: hidden; }

.wrap { max-width: var(--page-max); margin: 0 auto; }
img, svg { max-width: 100%; }

/* -------------------------------------------------------------------- */
/* Buttons                                                               */
/* -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: var(--weight-strong);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-none);
  border: 2px solid var(--color-black);
  background: var(--color-yellow);
  color: var(--color-navy-ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--color-black);
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast) var(--ease-snap);
}
.btn:hover { color: var(--color-navy-ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--color-black); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

.btn-secondary { background: var(--surface-sunk); color: var(--color-navy); border-color: var(--color-navy); box-shadow: 3px 3px 0 var(--color-navy); cursor: default; }
.btn-secondary:hover { color: var(--color-navy); box-shadow: 3px 3px 0 var(--color-navy); transform: none; }

.btn-lg { padding: 14px 26px; font-size: var(--text-md); box-shadow: 4px 4px 0 var(--color-black); }
.btn-lg:hover { box-shadow: 6px 6px 0 var(--color-black); }
.btn-lg:active { transform: translate(4px, 4px); box-shadow: none; }

/* -------------------------------------------------------------------- */
/* Badge                                                                 */
/* -------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: 2px solid var(--color-black);
  background: var(--color-yellow);
  color: var(--color-navy-ink);
}
.badge-outline { background: transparent; border-color: var(--color-navy); color: var(--color-navy); }

/* -------------------------------------------------------------------- */
/* Install line + minimal code frame (download.php's git-clone snippet)  */
/* -------------------------------------------------------------------- */
.install-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-inverse);
  border: 2px solid var(--color-black);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-on-inverse);
  max-width: 420px;
}
.install-line .prompt { color: var(--color-yellow); }
.install-line button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-on-inverse-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}
.install-line button:hover { color: var(--color-yellow); }

.code-frame { border: var(--border-strong); background: var(--surface-code); box-shadow: var(--shadow-hard); }
.code-frame pre {
  margin: 0;
  padding: 18px 20px;
  font-family: var(--font-code);
  font-size: 13px;
  line-height: var(--leading-code);
  color: var(--text-on-inverse);
  overflow-x: auto;
}
.code-frame .kw { color: var(--color-yellow); }

/* -------------------------------------------------------------------- */
/* Sections / rules                                                      */
/* -------------------------------------------------------------------- */
.section { padding: var(--space-16) var(--space-13); }
.on-card { background: var(--surface-card); border-bottom: var(--border-strong); }
.section-title { font-size: var(--text-2xl); margin: 0 0 var(--space-6); }
.section-lede { font-size: var(--text-md); color: var(--text-muted); max-width: var(--measure-prose); margin: 0 0 var(--space-12); }
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* -------------------------------------------------------------------- */
/* Card (generic panel)                                                  */
/* -------------------------------------------------------------------- */
.card { background: var(--surface-card); border: var(--border-strong); padding: var(--gutter-card); }
.card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: var(--border-hair);
  padding-bottom: 8px;
  margin-bottom: 14px;
}

/* -------------------------------------------------------------------- */
/* Placeholder pages (docs / examples / download / blog / playground / 404) */
/* -------------------------------------------------------------------- */
.placeholder { padding: var(--space-17) var(--space-13); text-align: center; border-bottom: var(--border-strong); }
.placeholder .badge { margin-bottom: var(--space-9); }
.placeholder h1 { font-size: var(--text-3xl); margin-bottom: var(--space-7); }
.placeholder p { font-size: var(--text-md); color: var(--text-muted); max-width: var(--measure-prose); margin: 0 auto var(--space-11); }
.placeholder .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   SiteNav — mobile menu
   The toggle button + open/closed state come from Nav.jsx (assets/js/site/
   Nav.jsx); this is purely the show/hide + panel-layout side of it.
   ========================================================================== */
.hv-nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-navy);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  cursor: pointer;
  margin-left: 12px;
}
.hv-nav-toggle:hover { color: var(--text-link-hover); border-color: var(--text-link-hover); }

@media (max-width: 860px) {
  .hv-nav { flex-wrap: wrap; padding: 14px 20px !important; }
  .hv-nav-links, .hv-nav-actions { display: none !important; }
  .hv-nav-toggle { display: inline-flex; margin-left: auto !important; }
  .hv-nav-open .hv-nav-links,
  .hv-nav-open .hv-nav-actions {
    display: flex !important;
    width: 100%;
    flex-basis: 100%;
    margin-left: 0 !important;
  }
  .hv-nav-open .hv-nav-links {
    flex-direction: column;
    gap: 0 !important;
    order: 3;
    border-top: var(--border-hair);
    margin-top: 14px;
  }
  .hv-nav-open .hv-nav-links a { padding: 12px 0; border-bottom: var(--border-hair); }
  .hv-nav-open .hv-nav-actions {
    order: 4;
    justify-content: space-between;
    padding-top: 14px;
  }
}

/* ==========================================================================
   Home page sections (Hero / Impact / Features / Proof / Footer)
   ========================================================================== */
@media (max-width: 1080px) {
  .hv-hero-inner { grid-template-columns: 1fr !important; }
  .hv-impact-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .hv-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hv-proof-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hv-proof-grid > div:nth-child(2n) { border-right: none !important; }
  .hv-proof-grid > div:nth-child(1), .hv-proof-grid > div:nth-child(2) { border-bottom: 2px solid rgba(242,234,210,0.3); }
  .hv-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}
@media (max-width: 680px) {
  .hv-hero-title { font-size: clamp(40px, 12vw, 64px) !important; }
  .hv-hero-inner { padding: 40px 20px 48px !important; gap: 32px !important; }
  .hv-impact, .hv-features-grid, .hv-proof, .hv-footer { padding-left: 20px !important; padding-right: 20px !important; }
  .hv-impact-fields { grid-template-columns: 1fr !important; }
  .hv-impact-fields > div:nth-child(odd) { border-right: none !important; }
  .hv-impact-fields > div:nth-child(-n+3) { border-bottom: 2px solid var(--color-navy); }
  .hv-features-grid { grid-template-columns: 1fr !important; }
  .hv-proof-grid { grid-template-columns: 1fr !important; }
  .hv-proof-grid > div { border-right: none !important; border-bottom: 2px solid rgba(242,234,210,0.3); }
  .hv-proof-grid > div:last-child { border-bottom: none; }
  .hv-footer-grid { grid-template-columns: 1fr !important; }
  .hv-footer-bottom { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  .hv-footer-bottom > span:last-child { margin-left: 0 !important; }
  .hv-disc { width: 140px !important; height: 140px !important; }
  .hv-disc-row { gap: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-drift { animation: none !important; }
}