/* ============================================================================
   Anvyr V2 — Responsive Breakpoints
   Mobile < 640 · Tablet 640–1024 · Desktop > 1024
   ============================================================================ */

/* ── Mobile (< 640px) ────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    h1, .h1  { font-size: 28px; }
    h2, .h2  { font-size: 24px; }
    h3, .h3  { font-size: 19px; }

    .section {
        padding-block: var(--space-3xl);
    }
    .container {
        padding-inline: var(--space-md);
    }

    /* Nav: hide desktop, show hamburger */
    .main-nav   { display: none; }
    .nav-utils  { display: none; }
    .mobile-menu-btn { display: flex; }
    .mobile-nav-overlay { display: block; }

    /* Footer stacks */
    .footer-inner {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }
    .footer-left {
        align-items: center;
    }
}

/* ── Tablet (640–1024px) ─────────────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1024px) {
    h1, .h1  { font-size: 34px; }

    .section {
        padding-block: var(--space-4xl);
    }
    .container {
        padding-inline: var(--space-lg);
    }

    /* Nav: hide desktop, show hamburger */
    .main-nav   { display: none; }
    .nav-utils  { display: none; }
    .mobile-menu-btn { display: flex; }
    .mobile-nav-overlay { display: block; }
}

/* ── Desktop (> 1024px) ──────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .main-nav           { display: flex; }
    .nav-utils          { display: flex; }
    .mobile-menu-btn    { display: none; }
    .mobile-nav-overlay { display: none; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    .mobile-nav-overlay,
    .mobile-menu-btn,
    .nav-utils,
    .theme-toggle { display: none !important; }

    body {
        background: #fff;
        color: #000;
    }
    a { color: #000; text-decoration: underline; }
    a[href]::after { content: ' (' attr(href) ')'; font-size: 0.85em; }
}