/* ==========================================================================
   Responsive — the mobile menu, page-wide small-screen overrides and print.
   Section-specific breakpoints sit next to their section in sections.css.
   ========================================================================== */

/* While the mobile menu is open the page behind it does not scroll. */
.menu-open {
    overflow: hidden;
}

/* Eight links plus the availability text overflow the bar below about
   1200px; the text gives way to its dot first. */
@media (max-width: 1200px) {
    .nav-status-text {
        display: none;
    }
}

@media (max-width: 1100px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
    }

    .nav-status-text {
        display: none;
    }

    .nav-logo,
    .nav-actions {
        position: relative;
        z-index: calc(var(--z-overlay) + 1);
    }

    .nav-menu {
        position: fixed;
        inset: 0;
        z-index: var(--z-overlay);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--space-1);
        padding: var(--header-height) var(--shell-pad) var(--space-7);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--color-stage-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--dur-base) ease, visibility 0s linear var(--dur-base);
    }

    .nav-menu.nav-menu-open {
        opacity: 1;
        visibility: visible;
        transition: opacity var(--dur-base) ease;
    }

    .nav-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-family: var(--font-display);
        font-size: clamp(1.75rem, 7vw, 2.75rem);
        line-height: 1.15;
        letter-spacing: var(--tracking-display);
        color: var(--color-on-stage);
    }
}

@media (max-width: 560px) {
    .contact-form-row {
        grid-template-columns: 1fr;
    }

    .nav-logo-role {
        display: none;
    }
}

@media print {
    body::after,
    .site-header,
    .ticker,
    .hero-figure,
    .hero-word-wrap,
    .contact-form,
    .quote-cta {
        display: none !important;
    }

    .hero,
    .project-detail-hero,
    .quote-card {
        min-height: 0;
        background: none !important;
    }

    .hero *,
    .project-detail-hero *,
    .quote-card * {
        color: black !important;
    }

    .section {
        padding-block: 1.5rem;
    }

    /* Sections never scrolled to are still waiting to be revealed. */
    .motion-ready [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    a {
        color: inherit;
        text-decoration: underline;
    }
}