/* 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%;
}

/* On very small screens, give the table back its normal display
   (display:block breaks td widths for simple narrow tables) */
@media (min-width: 640px) {
  .page-columns table,
  .content table {
    display: table;
    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;
  }
}