/* Shared responsive header: keep every page's full link list inside its menu. */
#mobile-menu-btn {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

#mobile-menu-btn::after {
    content: "Menu";
}

html[lang="ar"] #mobile-menu-btn::after {
    content: "القائمة";
}

#lang-switcher,
#lang-switcher-mobile {
    min-height: 44px;
    white-space: nowrap;
}

@media (min-width: 768px) {
    :is(header, nav, .fixed, .sticky):has(#mobile-menu-btn)
    [class~="hidden"][class~="md:flex"],
    :is(header, nav, .fixed, .sticky):has(#mobile-menu-btn)
    [class~="hidden"][class~="lg:flex"] {
        display: none !important;
    }

    :is(header, nav, .fixed, .sticky):has(#mobile-menu-btn)
    [class~="md:hidden"].flex.items-center,
    :is(header, nav, .fixed, .sticky):has(#mobile-menu-btn)
    [class~="lg:hidden"].flex.items-center {
        display: flex !important;
    }
}

#mobile-menu:not(.hidden) {
    display: block !important;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Keep the APS brand name on one line in every page header. */
:is(header, nav.fixed) a:has(> img[src*="logo.png"] + [data-i18n="nav.brandName"].text-xl) {
    white-space: nowrap;
}

:is(header, nav.fixed) a:has(> img[src*="logo.png"] + [data-i18n="nav.brandName"].text-xl)
> [data-i18n="nav.brandName"].text-xl {
    white-space: nowrap;
}

@media (max-width: 480px) {
    :is(header, nav.fixed)
    a:has(> img[src*="logo.png"] + [data-i18n="nav.brandName"].text-xl)
    > [data-i18n="nav.brandName"].text-xl {
        font-size: clamp(0.6875rem, 3vw, 0.8125rem) !important;
        line-height: 1.2;
    }

    nav.fixed > .max-w-7xl > .flex.justify-between
    > a:has(> img[src*="logo.png"] + [data-i18n="nav.brandName"].text-xl)
    ~ div #mobile-menu-btn::after {
        display: none;
    }
}

@media (max-width: 420px) {
    #mobile-menu-btn::after {
        display: none;
    }

    #mobile-menu-btn {
        min-width: 44px;
        padding-inline: 0.5rem;
    }
}

@media (max-width: 340px) {
    nav.fixed > .max-w-7xl {
        padding-inline: 8px !important;
    }

    nav.fixed .flex.justify-between > a:has(> img[src*="logo.png"] + [data-i18n="nav.brandName"].text-xl) {
        gap: 0.25rem;
    }

    nav.fixed .flex.justify-between > a:has(> img[src*="logo.png"] + [data-i18n="nav.brandName"].text-xl) > img {
        height: 2rem !important;
    }

    nav.fixed .flex.justify-between > a:has(> img[src*="logo.png"] + [data-i18n="nav.brandName"].text-xl)
    > [data-i18n="nav.brandName"].text-xl {
        font-size: 0.5625rem !important;
    }

    nav.fixed .flex.justify-between > [class~="lg:hidden"].flex.items-center {
        gap: 0.5rem;
    }
}

/* Keep the desktop artwork aligned with the copy without stretching its square canvas. */
@media (min-width: 769px) {
    .hero-section {
        padding-top: 5.5rem !important;
        padding-bottom: 1rem !important;
    }

    .hero-section > .hero-bg-split {
        top: 5.5rem !important;
        bottom: 1rem !important;
    }

    nav.fixed .max-w-7xl > .flex.items-center.justify-between.h-16 {
        height: 5.5rem;
    }

    nav.fixed .max-w-7xl > .flex.items-center.justify-between.h-16 > div:first-child img {
        height: 4rem;
    }

    nav.fixed .max-w-7xl > .flex.items-center.justify-between.h-16 > div:first-child [data-i18n="nav.brandName"] {
        font-size: 1.5rem;
    }

    .hero-section .grid.items-center {
        align-items: stretch !important;
    }

    .hero-section h1[data-i18n="hero.title"] {
        font-size: clamp(2.5rem, 5.2vh, 3.25rem);
        line-height: 1.05;
        margin-bottom: 1rem;
    }

    .hero-section h1[data-i18n="hero.title"] + p {
        margin: 0 0 1rem;
        font-size: clamp(1rem, 2.2vh, 1.25rem);
        line-height: 1.35;
    }

    .hero-section .grid.items-center > div:first-child > p {
        margin-top: 0.5rem !important;
        margin-bottom: 0;
        font-size: 0.875rem;
        line-height: 1.35;
    }

    .hero-section .grid.items-center > div:first-child > div a {
        padding: 0.75rem 1.5rem;
    }

    .hero-product-frame {
        width: 42vw;
        height: 100%;
        max-width: none;
        overflow: hidden;
        align-self: stretch !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, #c6c6c6, #b7b7b7);
    }

    .hero-product-image {
        display: block;
        width: 100%;
        height: 100% !important;
        min-height: 0;
        max-width: none !important;
        object-fit: contain;
        transform: none !important;
    }
}

/* Extend only the product-panel background to the page edge on desktop. */
@media (min-width: 769px) {
    [dir="rtl"] .hero-product-frame {
        position: relative;
        overflow: visible;
        background: transparent;
        isolation: isolate;
    }

    [dir="rtl"] .hero-product-frame::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset-block: 0;
        inset-inline-start: 0;
        inset-inline-end: calc(1.5rem - 8vw);
        background: linear-gradient(145deg, #c6c6c6, #b7b7b7);
    }
}

@media (min-width: 920px) {
    [dir="rtl"] .hero-section .grid.items-center {
        min-height: 541.2px;
    }

    [dir="rtl"] .hero-section .grid.items-center > div:first-child {
        transform: translateY(48px);
    }

    [dir="rtl"] .hero-section h1[data-i18n="hero.title"] {
        box-sizing: border-box;
        padding-top: 24px;
        font-size: clamp(2.25rem, 3.4vw, 2.5rem);
    }
}