/* ==========================================================
   MOBILE OVERLAY
========================================================== */

.site-header .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--overlay-bg);
    color: var(--overlay-text);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open a {
    color: var(--overlay-text);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
    background: var(--overlay-nav-hover-bg);
    color: var(--overlay-nav-hover-text) !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
    background: var(--overlay-nav-focus-bg);
    color: var(--overlay-nav-focus-text) !important;

    outline: 2px solid var(--overlay-focus-outline);
    outline-offset: 3px;

    box-shadow: var(--overlay-focus-shadow);
}

/* ==========================================================
   MOBILE NAVIGATION OVERLAY
========================================================== */

@media (max-width: 900px) {

    /* ==========================================================
   MOBILE OVERLAY: BASE + FOCUS
========================================================== */

    .mobile-menu-overlay .wp-block-navigation-item__label,
    .mobile-menu-overlay .wp-social-link a,
    .mobile-menu-overlay .wp-social-link svg,
    .mobile-menu-overlay .wp-social-link svg path {
        color: inherit !important;
        fill: currentColor !important;
    }

    .mobile-menu-overlay :is(.wp-block-navigation-item__content,
        .mobile-menu-close,
        .mobile-menu-toggle):focus-visible {
        background: var(--overlay-nav-focus-bg);
        color: var(--overlay-nav-focus-text) !important;

        outline: 3px solid var(--overlay-focus-outline);
        outline-offset: 4px;

        box-shadow: var(--overlay-focus-shadow);
    }

    .mobile-menu-socials .wp-social-link:focus-within {
        background: var(--overlay-nav-focus-bg);
        color: var(--overlay-nav-focus-text) !important;

        box-shadow: var(--overlay-focus-shadow);
    }

    .mobile-menu-socials .wp-social-link a:focus-visible {
        outline: none;
        box-shadow: none;
    }

    /* ==========================================================
   MOBILE HEADER STATE
========================================================== */

    .site-header *,
    .site-header *::before,
    .site-header *::after {
        transition: none !important;
        animation: none !important;
    }

    body.mobile-menu-is-open {
        overflow: hidden;
    }

    .header-inner {
        grid-template-columns: auto 1fr auto;
        min-height: var(--header-height);
        align-items: center;
    }

    .main-navigation {
        display: none !important;
    }

    /* ==========================================================
   MOBILE MENU BUTTONS
========================================================== */

    .mobile-menu-toggle,
    .mobile-menu-close {
        min-width: 56px;
        min-height: 56px;

        border: 0;
        border-radius: 999px;

        cursor: pointer;
    }

    .mobile-menu-toggle {
        margin: 0;
        padding: .3rem;

        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        grid-column: 3;
        justify-self: end;
        align-self: center;

        gap: 5px;

        background: var(--overlay-toggle-bg);
        color: var(--overlay-toggle-text);
    }

    .mobile-menu-toggle:hover {
        background: var(--overlay-toggle-hover-bg);
        color: var(--overlay-toggle-hover-text);
    }

    .mobile-menu-toggle span {
        width: 24px;
        height: 2px;

        border-radius: 999px;

        background: currentColor;
    }

    .mobile-menu-close {
        background: var(--overlay-close-bg);
        color: var(--overlay-close-text);
    }

    .mobile-menu-close:hover {
        background: var(--overlay-close-hover-bg);
        color: var(--overlay-close-hover-text);
    }

    .site-header.is-scrolled .wp-block-site-logo img {
        width: 56px;
        transform: none;
    }

    .site-header.is-scrolled .mobile-menu-toggle {
        margin-block: .25rem;
    }

    /* ==========================================================
   MOBILE OVERLAY PANEL
========================================================== */

    .mobile-menu-overlay {
        position: fixed;
        inset: 0;

        z-index: 9999999;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 2rem;

        padding: 5rem 1.5rem 2rem;

        background: var(--overlay-bg);
        color: var(--overlay-text);

        opacity: 0;
        pointer-events: none;

        overflow-y: auto;
        overscroll-behavior: contain;

        transform: translateY(-8px);

        transition:
            opacity 200ms ease,
            transform 200ms ease;
    }

    .mobile-menu-overlay.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* ==========================================================
   CLOSE BUTTON
========================================================== */

    .mobile-menu-close {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;

        width: 56px;
        height: 56px;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 0;
        border-radius: 999px;

        background: var(--overlay-close-bg);
        color: var(--overlay-close-text);

        font-size: 2rem;
        line-height: 1;

        cursor: pointer;
    }

    .mobile-menu-close:hover {
        background: var(--overlay-close-hover-bg);
        color: var(--overlay-close-hover-text);
    }

    /* ==========================================================
   MOBILE OVERLAY NAVIGATION
========================================================== */

    .mobile-menu-primary,
    .mobile-menu-legal {
        width: min(100% - 3rem, 340px);
    }

    .mobile-menu-primary .wp-block-navigation__container,
    .mobile-menu-legal .wp-block-navigation__container {
        width: 100%;

        display: flex;
        flex-direction: column;
        gap: 1rem;

        margin: 0;
        padding: 0;
    }

    .mobile-menu-primary .wp-block-navigation-item,
    .mobile-menu-legal .wp-block-navigation-item {
        width: 100%;
    }

    .mobile-menu-primary .wp-block-navigation-item__content,
    .mobile-menu-legal .wp-block-navigation-item__content {
        width: 100%;
        min-height: 56px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 1rem 1.5rem;

        border-radius: 999px;

        background: var(--overlay-nav-bg);
        color: var(--overlay-nav-text) !important;

        text-align: center;
        text-decoration: none;

        font-weight: 800;
    }

    .mobile-menu-primary .wp-block-navigation-item__content {
        font-size: 1.25rem;
    }

    .mobile-menu-legal .wp-block-navigation-item__content {
        font-size: .95rem;
        font-weight: 700;
    }

    .mobile-menu-primary .wp-block-navigation-item__content:hover,
    .mobile-menu-legal .wp-block-navigation-item__content:hover {
        background: var(--overlay-nav-hover-bg);
        color: var(--overlay-nav-hover-text) !important;
    }

    .mobile-menu-primary .current-menu-item>.wp-block-navigation-item__content,
    .mobile-menu-primary .current_page_item>.wp-block-navigation-item__content,
    .mobile-menu-legal .current-menu-item>.wp-block-navigation-item__content,
    .mobile-menu-legal .current_page_item>.wp-block-navigation-item__content {
        background: var(--overlay-nav-active-bg);
        color: var(--overlay-nav-active-text) !important;
    }

    .mobile-menu-primary .wp-block-navigation-item__label,
    .mobile-menu-legal .wp-block-navigation-item__label {
        color: inherit !important;
    }

    /* ==========================================================
   MOBILE OVERLAY DIVIDER
========================================================== */

    .mobile-menu-divider {
        width: min(180px, 48%);
        height: 2px;

        margin: .5rem auto;

        border-radius: 999px;

        background:
            linear-gradient(90deg,
                transparent,
                var(--overlay-divider),
                transparent);

        box-shadow:
            0 0 10px color-mix(in srgb,
                var(--overlay-divider) 45%,
                transparent);
    }

    /* ==========================================================
   MOBILE OVERLAY SOCIALS
========================================================== */

    .mobile-menu-socials {
        display: flex;
        gap: 3rem;
    }

    .mobile-menu-socials .wp-social-link {
        width: 48px;
        height: 48px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 999px;

        background: var(--overlay-social-bg);
        color: var(--overlay-social-text) !important;
    }

    .mobile-menu-socials .wp-social-link:hover {
        background: var(--overlay-social-hover-bg);
        color: var(--overlay-social-hover-text) !important;
    }

    .mobile-menu-socials .wp-social-link a {
        width: 100%;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        color: inherit !important;
    }

    .mobile-menu-socials .wp-social-link svg,
    .mobile-menu-socials .wp-social-link svg path {
        fill: currentColor !important;
    }
}

/* ==========================================================
   MOBILE FIXED HEADER HARD FIX
========================================================== */

@media (max-width: 900px) {

    html,
    body {
        overflow-x: hidden;
    }

    .wp-site-blocks {
        padding-top: 68px;
        transform: none !important;
        filter: none !important;
        contain: none !important;
    }

    .site-header {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        z-index: 2147483647 !important;

        transform: none !important;
        contain: none !important;
        will-change: auto;
    }

    body.admin-bar .site-header {
        top: 46px !important;
    }
}

/* MOBILE HERO */
@media (max-width: 900px) {
    .hero-editorial {
        min-height: calc(100svh - 140px);

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: .85rem;

        padding: 1rem;
        padding-top: 1rem;
        padding-bottom: 1.5rem;
        margin-top: 0 !important;
        overflow: hidden;
    }

    .hero-card {
        position: relative;
        inset: auto;

        width: min(100%, 360px);
        margin-inline: auto;
    }

    .hero-card--title {
        padding: 1.1rem 1.25rem;
        transform: rotate(-1deg);
    }

    .hero-card--title h1 {
        font-size: clamp(2rem, 11vw, 3rem);
        line-height: 1.02;
    }

    .hero-card--artwork {
        width: min(68vw, 240px);
        padding: .5rem;
        transform: rotate(3deg);
    }

    .hero-card--artwork img {
        width: 100%;
        max-width: 28svh;
        margin-inline: auto;
        object-fit: contain;
    }

    .hero-card--text {
        width: min(100%, 340px);
        max-width: 34ch;
        padding: .9rem 1rem;
        transform: rotate(-1.5deg);
    }

    .hero-card--text p {
        font-size: 1.12rem;
        line-height: 1.55;
        text-wrap: pretty;
    }

    .hero-media.motion-float {
        animation: none;
        transform: none;
    }
}

/* Card-Grid */
@media (max-width: 900px) {
    .card-grid-row {
        display: flex !important;

        gap: 1rem;

        overflow-x: auto;
        overflow-y: hidden;

        padding-inline: .25rem;
        padding-bottom: .5rem;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        scroll-behavior: smooth;
    }

    .card-grid-row::-webkit-scrollbar {
        display: none;
    }

    .card-grid-row>* {
        flex: 0 0 84%;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .card-base {
        min-height: 320px;
    }

    .card-grid-wrapper {
        padding-inline: 1.25rem;
        overflow: hidden;
    }

    .scroll-hint {
        display: block;
        margin-top: .75rem;

        text-align: right;

        color: var(--wp--preset--color--primary);

        font-size: .9rem;
        font-weight: 700;

        opacity: .72;
    }
}