/* Burden Advisory — Main stylesheet */

/* Import design system tokens and components */
@import url('./design-system.css');

/* Responsive grid adjustments for mobile */
@media (max-width: 860px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }

  /* Every page grid here is either repeat(N,1fr) or a literal two-column
     pair (240px 1fr, 1.1fr 0.9fr, ...) — none of them read as columns once
     the viewport is this narrow, so collapse all of them to one. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Collapsed 240px-fixed columns (the about-page portrait) still carry
     their fixed width from the inline style otherwise. */
  [style*="240px"] {
    width: 100% !important;
    max-width: 320px;
  }

  /* Secondary nav links wrap into a multi-line stack below the brand at
     this width — no hamburger menu exists, so drop them and keep the
     brand + primary CTA reachable; other pages are still one tap away
     via the footer. */
  .nav > a:not(.nav-brand):not(.btn) {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Reduce padding on mobile */
  main {
    padding: 0 var(--space-4) !important;
  }
}

/* Print styles */
@media print {
  body {
    background: white;
    color: black;
  }
  a {
    text-decoration: none;
    color: black;
  }
  nav, footer {
    display: none;
  }
}