/* ==========================================================================
   hover-lang.org — placeholder-page stylesheet
   Every page loads /assets/design-system/styles.css first (tokens + base),
   then this file for the simple placeholder-page furniture (docs, examples,
   download, blog, playground, 404). Nav and footer are the real SiteNav /
   SiteFooter React components (see includes/header.php + footer.php) and
   style themselves inline — nothing here targets them.
   ========================================================================== */

* { box-sizing: border-box; }

.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; }