/**
 * Mobile header logo — Figma "M-site" (360px frame).
 *
 * The white logo notch and the logo itself are baked into the designer asset
 * vendors/images/mobile-bg.png (360 x 210: notch 152 x 48, logo at 13,12 sized 102 x 26).
 * The header row paints that asset as a full-width strip, scaled with the viewport and
 * capped at 480px so tablets do not get an oversized logo. The notch cutout is
 * transparent in the PNG, so the strip's background-color shows through it.
 *
 * Loaded after every page package so it wins over the per-package mobile rules.
 */

:root {
    --mh-scale: min(100vw, 480px); /* width the 360px artwork is stretched to */
    --mh-height: calc(var(--mh-scale) * 48 / 360); /* header row = notch height */
    --mh-logo-width: calc(var(--mh-scale) * 152 / 360); /* clickable notch width */
    --mh-navy: #173A5D;
    --mh-notch: #F6F6F6;
}

/* ── Module / pages / join / events / articles header (.site-header) ─────────── */
@media (max-width: 999px) {
    .site-header {
        position: relative;
        z-index: 10;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        height: var(--mh-height) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background-color: var(--mh-notch) !important;
        background-image: url('../vendors/images/mobile-bg.png'),
            linear-gradient(var(--mh-navy), var(--mh-navy)) !important;
        background-size: var(--mh-scale) auto,
            max(0px, calc(100% - var(--mh-scale))) 100% !important;
        background-position: left top, right top !important;
        background-repeat: no-repeat !important;
    }

    .site-header .logo-area,
    .page-join .site-header .logo-area {
        display: block !important;
        flex: 0 0 auto !important;
        width: var(--mh-logo-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        clip-path: none !important;
        pointer-events: auto !important;
    }

    .site-header .logo-area img {
        display: none !important;
    }

    /* Hamburger: three 18px lines, 18px from the right edge, sitting 3px below the
       row centre exactly as in the Figma frame */
    .site-header .mobile-menu-btn,
    .page-join .site-header .mobile-menu-btn {
        position: relative;
        top: calc(var(--mh-scale) * 3 / 360);
        align-self: center !important;
        gap: 3px !important;
        margin: 0 10px 0 auto !important;
        padding: 8px !important;
    }

    .site-header .mobile-menu-btn span {
        width: 18px !important;
        height: 2px !important;
    }

    .site-header .mobile-menu-btn.is-open span:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    .site-header .mobile-menu-btn.is-open span:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }

    /* Figma: countdown label starts 35px below the header row (y = 83 on the 360 frame) */
    .banner-inner > .site-header ~ .hero-content {
        padding-top: calc(var(--mh-scale) * 33 / 360) !important;
    }

    /*
     * The hero artwork (1420px design width) still carries the desktop logo tab and
     * nav divider in its 75px top band. Scale it so that band is exactly one strip
     * tall (1420 / 75 * 48 = 908.8 design px per 360px viewport, i.e. 2.5244 x the
     * strip scale): the band then sits fully behind the header strip, the dots keep
     * their desktop proportion, and the navy fill covers the rest of the banner.
     */
    .banner-section,
    .evant-banner-section,
    body:not(.page-about):not(.page-contact):not(.page-privacy) .banner-section,
    body.page-about .banner-section.about-banner,
    body.page-contact .banner-section.contact-banner,
    body.page-privacy .banner-section.privacy-bg,
    section.banner-section.about-banner,
    .page-contact .banner-section.contact-banner,
    .page-join .banner-section-join {
        background-color: var(--mh-navy) !important;
        background-size: calc(var(--mh-scale) * 2.5244) auto !important;
        background-position: right top !important;
        background-repeat: no-repeat !important;
    }

    /* Detail pages already use the plain mobile artwork; the strip now carries its notch */
    .evant-banner-section.mobile-bg {
        background-image: none !important;
    }

    /* Join-bg-new.png bakes in a light page margin and a taller band; use the standard
       dotted artwork on mobile so the header strip lines up like every other page. */
    .page-join .banner-section-join {
        background-image: url('../join/images/join-bg.png') !important;
    }
}

/* ── Home page header (.hero > .header) — its hamburger layout starts at 768px ── */
@media (max-width: 768px) {
    .hero:not(.hero-header-only) .header {
        position: relative;
        z-index: 10;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100%;
        height: var(--mh-height) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: var(--mh-notch);
        background-image: url('../vendors/images/mobile-bg.png'),
            linear-gradient(var(--mh-navy), var(--mh-navy));
        background-size: var(--mh-scale) auto,
            max(0px, calc(100% - var(--mh-scale))) 100%;
        background-position: left top, right top;
        background-repeat: no-repeat;
    }

    .hero:not(.hero-header-only) .logo-wrapper {
        position: relative;
        flex: 0 0 auto;
        width: var(--mh-logo-width);
        height: 100%;
    }

    .hero:not(.hero-header-only) .logo-link {
        display: block;
        width: 100%;
        height: 100%;
    }

    .hero:not(.hero-header-only) .logo-img,
    .hero:not(.hero-header-only) .logo-curve-nav,
    .hero:not(.hero-header-only) .banner-curve {
        display: none !important;
    }

    .hero:not(.hero-header-only) .menu-toggle {
        width: 34px;
        height: 100%;
        gap: 3px;
        margin: 0 10px 0 auto !important;
        padding: 0;
    }

    .hero:not(.hero-header-only) .menu-toggle-bar {
        width: 18px;
        height: 2px;
    }

    .hero:not(.hero-header-only) .menu-toggle.is-active .menu-toggle-bar:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    .hero:not(.hero-header-only) .menu-toggle.is-active .menu-toggle-bar:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }
}