/**
 * Responsive — Global media query overrides
 *
 * Mobile-first: base styles are mobile, then layer
 * tablet and desktop with min-width queries.
 *
 * This file handles cross-cutting responsive adjustments
 * that don't belong in component-specific CSS files.
 *
 * @package RoiArt
 */

/* ── Tablet (768px+) ── */

@media (min-width: 768px) {
    :root {
        --container-padding: 24px;
    }

    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
}

/* ── Desktop (992px+) ── */

@media (min-width: 992px) {
    :root {
        --container-padding: 20px;
    }

    h1 { font-size: 2.5rem; }
}

/* ── Small mobile (< 478px) ── */

@media (max-width: 478px) {
    :root {
        --container-padding: 12px;
    }

    body {
        font-size: 16px;
    }
}

/* ── WordPress admin bar offset ── */

@media (min-width: 783px) {
    body.admin-bar .nav-bar {
        top: 32px;
    }
}

@media (max-width: 782px) {
    body.admin-bar .nav-bar {
        top: 46px;
    }
}

/* ── Print ── */

@media print {
    .top-bar,
    .nav-bar,
    .site-footer,
    .roiart-mobile-menu,
    .roiart-mobile-backdrop,
    .roiart-mobile-toggle {
        display: none;
    }

    .site-main {
        padding: 0;
    }
}