/* =====================================================================
   WAIFI — Responsive Foundation (responsive.css)
   ---------------------------------------------------------------------
   Responsibility: breakpoint scaffolding (Mobile First, min-width) and
   the print stylesheet. NO section-specific layout here — per-section
   overrides live in sections.css (co-located) per DESIGN_SYSTEM §13.
   Convention: breakpoint rules grouped by component/section with a
   comment naming what they adjust.
   Breakpoints (frontend.md §9): tablet 768px, laptop 1024px, desktop 1280px.
   Load order: 7th (LAST).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. GLOBAL BREAKPOINT HOOKS
   Mobile-first: base styles are mobile. These hooks document where
   responsive shifts happen. Most component grids are already handled in
   layout.css; section-specific overrides go below in their own blocks.
   --------------------------------------------------------------------- */

/* Tablet ≥ 768px */
@media (min-width: 48rem) {
    /* Section heads centred on larger screens */
    .section__head {
        margin-inline: auto;
        text-align: center;
    }

    .section__title {
        margin-bottom: var(--space-3);
    }
}

/* Laptop ≥ 1024px */
@media (min-width: 64rem) {
    /* Larger section rhythm on big screens */
    .section {
        padding-block: var(--space-section);
    }
}

/* Desktop ≥ 1280px — cap content, prevent over-stretch */
@media (min-width: 80rem) {
    .container {
        padding-inline: var(--space-5);
    }
}

/* ---------------------------------------------------------------------
   2. PRINT STYLESHEET (frontend-ready; deliver readable hard copy)
   Goals: colours readable, links visible (URL printed), decorative
   /interactive elements hidden. Forces black text on white for ink.
   --------------------------------------------------------------------- */
@media print {

    /* Reset to ink-safe palette */
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
    }

    /* Full-width, no padding gutters when printed */
    .container {
        max-width: 100%;
        padding: 0;
    }

    /* Remove vertical rhythm — flow as document */
    .section {
        padding-block: 0.5rem;
        page-break-inside: avoid;
    }

    /* Headings stay dark & bold */
    h1, h2, h3, h4 {
        color: #000 !important;
        page-break-after: avoid;
    }

    /* Show the destination URL after links so printed links are useful */
    a,
    a:visited {
        color: #000 !important;
        text-decoration: underline;
    }

    a[href^="http"]::after,
    a[href^="//"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #444 !important;
    }

    /* But don't print URLs for internal anchor links */
    a[href^="#"]::after {
        content: "";
    }

    /* Hide purely interactive / decorative elements */
    .floating-btn,
    .nav-toggle,
    .skip-link,
    .hero__media,
    .spinner,
    .reveal {
        display: none !important;
    }

    /* Reveal hidden-on-screen content if it matters for print */
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Force opaque backgrounds for legibility on coloured surfaces */
    .card,
    .site-footer {
        background: #fff !important;
        border: 1px solid #ccc !important;
    }
}