/* =============================================================================
   Responsive overrides — mobile-first breakpoints.
   Tested at ~320px, 375px, 768px, 1024px, 1440px.
   ========================================================================== */

/* Small phones (~360px+): tighten container padding slightly */
@media (max-width: 374px) {
    :root { --container-pad: var(--space-4); }
    h1 { font-size: 1.8rem; }
}

/* Tablet and up (~768px) */
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }

    .hero__inner { grid-template-columns: 1.1fr 0.9fr; }
    .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; }
    .cta-band__inner > div { flex: 1; }

    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid .form-field--full,
    .form-grid .form-field--checkbox { grid-column: 1 / -1; }

    .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* Desktop and up (~1024px) */
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-5 { grid-template-columns: repeat(5, 1fr); }
    .trust-grid { grid-template-columns: repeat(5, 1fr); }

    .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }

    /* Reveal desktop navigation, hide the mobile toggle/drawer */
    .nav-toggle { display: none; }
    .primary-nav {
        position: static;
        inset: auto;
        background: none;
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
        padding: 0;
        transform: none;
        overflow: visible;
        width: auto;
    }
    .primary-nav__list {
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
        margin: 0;
    }
    .primary-nav__link {
        color: var(--color-charcoal);
        font-size: 0.98rem;
        padding: var(--space-2) 0;
        border-bottom: 2px solid transparent;
    }
    .primary-nav__link:hover,
    .primary-nav__link.is-active { color: var(--color-navy); border-color: var(--color-gold); }
    .nav-cta { margin-left: var(--space-2); }
}

/* Large desktop (~1440px) */
@media (min-width: 1440px) {
    :root { --container-max: 1280px; }
    .hero__inner { gap: var(--space-9); }
}

/* Mobile-only: the off-canvas drawer sits off-screen (transform) until opened;
   pointer-events are disabled while closed so it cannot be tabbed into, and
   main.js mirrors this with aria-hidden for assistive technology. */
@media (max-width: 1023px) {
    .primary-nav:not(.is-open) { pointer-events: none; }
}