/*
 * CI4 mobile presentation contract.
 *
 * The compiled landing bundle remains the visual source of truth. These
 * target-only rules close the small-screen gaps that cannot be changed in the
 * read-only Node source: compact header sizing, a predictable drawer width,
 * and touch-friendly overflow behavior.
 */

/* Keep the initial state safe before JavaScript runs. This is deliberately an
 * external rule because the application CSP allows styles from 'self' but
 * rejects inline style attributes. */
.mobile-drawer[hidden],
.drawer-overlay[hidden] {
    display: none !important;
}

/* Apply the accessibility state at every viewport width. The mobile media
 * query below adds the transform/overflow behavior, but visibility must not
 * depend on the browser reporting the expected breakpoint. */
.mobile-drawer[aria-hidden='true'],
.drawer-overlay[aria-hidden='true'] {
    display: none !important;
}

.mobile-drawer[aria-hidden='false'],
.drawer-overlay[aria-hidden='false'] {
    display: block;
}

@media (max-width: 900px) {
    .site-header {
        overflow: visible !important;
        /* A cached document may still contain the drawer under the header.
         * Removing the filter prevents the header from becoming the fixed
         * positioning/painting boundary for that older DOM. */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* aria-hidden is the state contract; it must win over a stale is-open
     * class from an old cached DOM or a stylesheet arriving out of order. */
    .mobile-drawer[aria-hidden='true'] {
        display: none !important;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(102%) !important;
    }

    .mobile-drawer[aria-hidden='false'] {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0) !important;
    }

    .drawer-overlay[aria-hidden='true'] {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    .drawer-overlay[aria-hidden='false'] {
        pointer-events: auto;
        opacity: 1;
    }

    .mobile-drawer {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        width: min(86vw, 21rem);
        max-width: 100vw;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        box-sizing: border-box;
        z-index: 122 !important;
        background: var(--surface) !important;
        display: flex !important;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: clamp(16px, 3vw, 20px);
    }

    .mobile-drawer[aria-hidden='false'] nav,
    .mobile-drawer[aria-hidden='false'] > .button {
        visibility: visible;
        opacity: 1;
    }

    .mobile-drawer[aria-hidden='false'] nav {
        display: grid !important;
        flex: 1 1 auto;
    }

    .mobile-drawer[aria-hidden='false'] > .button {
        display: inline-flex !important;
    }

    .drawer-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 121 !important;
        background: rgb(2 6 23 / 50%);
    }
}

@media (max-width: 640px) {
    .header-inner {
        gap: clamp(8px, 2vw, 14px);
    }

    .header-actions {
        min-width: 0;
        gap: clamp(6px, 1.5vw, 10px);
    }

    .brand {
        width: clamp(108px, 34vw, 146px);
    }

    .logo {
        width: 100%;
    }

    .language-switcher {
        min-width: 0;
    }

    .language-switcher [data-select2-field] .select2-container,
    .language-switcher > select {
        width: clamp(5.5rem, 27vw, 8rem) !important;
        min-width: 0;
        max-width: 100%;
    }

    .language-switcher [data-select2-field] .select2-selection__rendered {
        padding-left: 9px;
        padding-right: 24px;
    }

    .mobile-drawer {
        width: min(84vw, 21rem);
        padding: 16px;
    }

    .mobile-drawer nav {
        padding-block: 10px 16px;
    }

    .mobile-drawer nav a {
        min-height: 44px;
        padding-inline: 6px;
    }

    .mobile-drawer > .button {
        min-height: 46px;
    }

    .hero-visual {
        width: 100%;
    }

    .hero-visual .theme-asset {
        width: 100%;
    }

    body.nav-open {
        touch-action: none;
    }

    .company-strip > div,
    .stats-strip,
    .product-grid,
    .project-grid,
    .pricing-grid,
    .process-panel ol,
    .filter-row {
        scrollbar-width: none;
    }

    .company-strip > div::-webkit-scrollbar,
    .stats-strip::-webkit-scrollbar,
    .product-grid::-webkit-scrollbar,
    .project-grid::-webkit-scrollbar,
    .pricing-grid::-webkit-scrollbar,
    .process-panel ol::-webkit-scrollbar,
    .filter-row::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 390px) {
    .header-inner {
        gap: 6px;
    }

    .header-actions {
        gap: 4px;
    }

    .brand {
        width: clamp(104px, 34vw, 132px);
    }

    .language-switcher [data-select2-field] .select2-container,
    .language-switcher > select {
        width: clamp(5rem, 26vw, 6.75rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-drawer,
    .drawer-overlay {
        transition: none;
    }
}