/**
 * 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;
    }
}

/* WooCommerce notice icon gutter fix */
html body .woocommerce-message,
html body .woocommerce-info,
html body ul.woocommerce-error {
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
    padding: 14px 18px 14px 72px !important;
    line-height: 1.45 !important;
}

html body .woocommerce-message::before,
html body .woocommerce-info::before,
html body ul.woocommerce-error::before {
    position: absolute !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    top: 50% !important;
    left: 24px !important;
    right: auto !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    transform: translateY(-50%) !important;
}

html body .woocommerce-message .button.wc-forward {
    margin-left: 10px !important;
}

@media (max-width: 520px) {
    html body .woocommerce-message,
    html body .woocommerce-info,
    html body ul.woocommerce-error {
        padding-left: 60px !important;
    }

    html body .woocommerce-message::before,
    html body .woocommerce-info::before,
    html body ul.woocommerce-error::before {
        left: 18px !important;
    }

    html body .woocommerce-message .button.wc-forward {
        display: inline-block !important;
        margin: 8px 0 0 !important;
        white-space: normal !important;
    }
}

/* Inline WooCommerce notice layout */
html body .woocommerce-message,
html body .woocommerce-info,
html body ul.woocommerce-error {
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    min-height: 0 !important;
    padding: 14px 18px !important;
    line-height: 1.45 !important;
}

html body .woocommerce-message::before,
html body .woocommerce-info::before,
html body ul.woocommerce-error::before {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 24px !important;
    box-sizing: border-box !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    transform: none !important;
}

html body .woocommerce-message .button.wc-forward {
    flex: 0 0 auto;
    margin-left: auto !important;
    white-space: nowrap;
}

@media (max-width: 640px) {
    html body .woocommerce-message,
    html body .woocommerce-info,
    html body ul.woocommerce-error {
        align-items: flex-start !important;
    }

    html body .woocommerce-message .button.wc-forward {
        margin-left: 34px !important;
        white-space: normal;
    }
}