/* styles.css — extra rules that don't need SCSS variables */

/* hide navbar title text — logo SVG serves as the brand mark */
.navbar-title { display: none; }


/* smooth transitions on theme changes */
body {
  transition: background-color 200ms ease, color 200ms ease;
}

/* tighten code block line-height */
pre code {
  line-height: 1.65;
}


/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Mobile / responsive fixes ─────────────────────── */

/* Tables: scroll horizontally instead of breaking layout */
.page-columns table,
.content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Above the mobile breakpoint, keep the scroll container but let a narrow
   table keep its natural width: `width: fit-content` resolves to the table's
   max-content width when that fits, and to the available width when it does
   not — so simple tables still size to their cells (the reason the old rule
   reverted to `display: table`), while a table whose *min-content* is wider
   than the column scrolls inside itself instead of running under the
   right-hand "On this page" TOC. `overflow-x` is inert on `display: table`,
   which is why the previous rule never actually clipped anything. */
@media (min-width: 640px) {
  .page-columns table,
  .content table {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Callouts and code panels: ensure they don't bleed */
@media (max-width: 600px) {
  .callout,
  .code-panel {
    margin-left: 0;
    margin-right: 0;
    border-radius: 6px;
  }

  /* Tighten hero padding */
  .hero-banner {
    padding: 40px 0 32px;
  }

  /* Tighten section padding (supplement ferx.scss breakpoint) */
  .pad {
    padding: 48px 0;
  }

  /* Container: reduce horizontal padding */
  .container {
    padding: 0 16px;
  }

  /* Section-label chips: allow wrapping */
  .section-label {
    flex-wrap: wrap;
  }

  /* Stat row: single column on phones */
  .stat-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
}