/* =============================================================================
   Responsive rules, widest breakpoint first.
   ============================================================================= */

/* The nav (six links) plus wordmark, search and theme toggle need roughly
   1,000px of row; below that the links move into the menu sheet. */
@media (max-width: 1100px) {
  .main-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: grid;
  }

  .header-actions {
    margin-left: auto;
  }

  .search-wrapper {
    flex: 1 1 auto;
    max-width: 22rem;
    margin-left: auto;
  }

  .search-wrapper + .header-actions {
    margin-left: 0;
  }
}

@media (max-width: 1024px) {
  .page-layout.with-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    order: 2;
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  :root {
    --gutter-inline: 1rem;
    --section-y: 4rem;
    --section-y-tight: 3rem;
  }

  /* Wordmark and actions on the first row, full-width search on the second. */
  .header-inner {
    flex-wrap: wrap;
    padding-block: var(--space-3);
    row-gap: var(--space-3);
  }

  .search-wrapper {
    order: 5;
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
  }

  .header-actions,
  .search-wrapper + .header-actions {
    margin-left: auto;
  }

  .search-kbd {
    display: none;
  }

  .search-input {
    padding-right: var(--space-4);
  }

  .search-dropdown {
    width: 100%;
  }

  /* Touch targets: 44px floor for the icon buttons. */
  .theme-toggle,
  .mobile-menu-btn {
    width: 44px;
    height: 44px;
  }

  /* iOS zooms any focused field under 16px. */
  input,
  select,
  textarea,
  .search-input,
  .search-input-page,
  .calculator-form input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .calculator-form select,
  .calculator-form textarea {
    font-size: 1rem;
  }

  .hero h1,
  .hub-head h1 {
    font-size: var(--text-h3);
  }

  .hero-compact h1 {
    font-size: var(--text-h4);
  }

  .tool-head-row {
    align-items: flex-start;
  }

  .hero-stats {
    gap: var(--space-6);
  }

  .hub-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Many groups: one scrollable row of pills instead of five wrapped rows. */
  .hub-filter,
  .search-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .search-filters {
    justify-content: flex-start;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .calc-left {
    padding: var(--space-5);
  }

  .calc-layout {
    gap: var(--space-4);
  }

  .calc-split {
    grid-template-columns: 1fr !important;
    gap: var(--space-4);
  }

  .calc-right .rich-result,
  .calc-right .calculator-result {
    position: static !important;
  }

  .calc-right .result-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .result-metric-card.primary {
    padding: var(--space-5);
  }

  .result-chart-row {
    flex-direction: column;
    align-items: center;
  }

  /* In a column the legend's 11rem flex-basis became a fixed height, and
     centring shrank it to its content width. */
  .result-legend {
    flex: none;
    align-self: stretch;
  }

  .schedule-slot .schedule-table-wrap {
    max-height: 360px;
  }

  .breadcrumb-page {
    font-size: var(--text-xs);
  }

  .categories-grid,
  .tools-grid,
  .related-tools,
  .benefits-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .author-box {
    align-items: flex-start;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .search-page-hint {
    display: none;
  }

  .search-hit-cat {
    display: none;
  }

  .hub-about {
    padding-top: var(--space-10);
    gap: var(--space-8);
  }
}

@media (max-width: 480px) {
  .hero {
    padding: var(--space-5) 0 var(--space-8);
  }

  .hero-compact h1 {
    font-size: var(--text-h4);
    margin-bottom: var(--space-2);
  }

  .btn-lg {
    width: 100%;
  }

  .home-cta .btn-lg {
    width: auto;
    flex: 1 1 auto;
  }

  .share-buttons {
    justify-content: center;
  }

  /* On a tool page the calculator is the point: measured at 375px wide the
     head (breadcrumb, lede, byline, actions) ate over half the viewport before
     the form started, so it tightens here rather than on desktop. */
  .tool-head .hero-badges {
    display: none;
  }

  .tool-head-meta {
    margin-top: var(--space-2);
  }

  .tool-actions {
    margin: var(--space-2) 0;
  }

  /* Share / Copy link / Embed / Save measured 34px tall against the ~44px
     touch-target guideline. */
  .tool-actions .btn {
    min-height: 44px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .site-header,
  .site-footer,
  .sidebar,
  .ad-block,
  .tool-actions,
  .jump-links,
  .share-buttons,
  .newsletter-box,
  .mobile-menu {
    display: none !important;
  }

  .page-layout.with-sidebar {
    grid-template-columns: 1fr;
  }

  .hero,
  .band-tint {
    background: none;
  }

  body {
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}