/* ============================================================================
   responsive.css — every viewport media query, gathered in one place.
   MUST load last: these rules override the files above at equal specificity.
   ========================================================================== */

@media (max-width: 1360px) {
    :root { --gutter: 48px; }
    .hero__card--passport { right: 48px; }
    .hero__card--voucher { left: 48px; }
}

@media (max-width: 1180px) {
    /* `.nav__logo` is a 225px box holding an 87px mark — a reserve that balances `space-between` on a
       wide screen. It is also the first 138px to give back when the bar runs out of room, and giving
       it back is what keeps the five links on one line down to the menu breakpoint below. */
    .nav__logo { width: auto; }

    .headline { font-size: 42px; line-height: 54px; }
    .hero__copy .headline { white-space: normal; }
    .why__headline { font-size: 34px; line-height: 46px; }
    .why__line { flex-wrap: wrap; }
    .why__card-body h3 { font-size: 28px; line-height: 36px; }
    .steps { flex-wrap: wrap; }
    .step { flex: 1 1 calc(33.333% - 11px); }
    .why__cards { flex-wrap: wrap; }
    .why__card { flex: 1 1 calc(50% - 8px); min-height: 0; }
    .why__card:nth-child(even) { margin-top: 0; min-height: 0; }
}

/* ── The navigation bar gives up first ──────────────────────────────────────────
   Everything else on this page survives to 900; five labels, a button, a language switch and a mark
   on one line do not. This query is the nav's alone. */
@media (max-width: 1100px) {
    /* ── The menu below 1100px ───────────────────────────────────
       **This used to be `.nav__links { display: none }` and nothing else.** The five links simply
       stopped existing on a phone: no button, no drawer, no way to reach the authorities section or
       the contact section except by scrolling the whole page. Every one of them is now in a panel
       the menu button opens.

       **1100 rather than the 900 the rest of this file uses, because that is where the bar actually
       runs out.** Measured at 1440: the links need 584px in English, the sign-in button and language
       switch 247, the mark 87, the padding 96 — 1014 before a single pixel of gap. At 920 the three
       groups were already touching and لماذا إكسبرس ترافل؟ had folded onto three lines inside
       its own pill. The band from 900 to 1100 looked like a desktop bar and read like a broken one.

       The panel carries the sign-in button and the language switch as well, because at 390px the bar
       cannot hold them beside a menu button — measured: the logo and those two already leave 24px of
       slack, and a 44px target does not fit in 24px. Nothing is lost by moving them: the hero puts
       the same sign-in button in front of the visitor a screen-height later.

       `visibility` alongside the opacity, so a closed panel is out of the tab order rather than an
       invisible row of links a keyboard still walks through. */
    .nav__toggle { display: flex; }

    .nav__menu {
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: absolute;
        inset-inline: 48px;
        inset-block-start: calc(100% + 8px);
        padding: 16px;
        border-radius: 20px;
        /* **Opaque, where the rest of the page is glass.** The bar's own translucency works because
           what is behind it is a few pixels of sky; a panel is 330px tall and lands squarely on the
           hero headline. At 0.92 the headline still read through it as a ghost behind the links,
           and a blur did not help — 8% of 32px white type is legible. The page's own background
           colour, so the panel reads as a piece of the page rather than a new surface. */
        background: #050d1f;
        border: 1px solid var(--glass-border);
        box-shadow: 0 24px 48px rgba(3, 8, 20, 0.55);
        opacity: 0;
        visibility: hidden;
        translate: 0 -8px;
        transition: opacity 0.25s ease, translate 0.25s ease, visibility 0.25s;
    }

    .nav.is-open .nav__menu { opacity: 1; visibility: visible; translate: none; }

    /* The pill that held the links on a wide screen is the panel now, so the links inside it drop
       their own surface and become a plain column. */
    .nav__links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .nav__links a { justify-content: flex-start; padding: 12px 16px; font-size: 15px; }

    /* A hairline between the navigation and the two controls under it: they answer different
       questions and should not read as a sixth and seventh link. */
    .nav__left {
        gap: 12px;
        padding-block-start: 16px;
        border-top: 1px solid var(--hairline);
    }
    .nav__cta { flex: 1; text-align: center; }

    /* The bar is left with the logo and the button, and the panel hangs under it. Giving the open
       bar its scrolled background stops the panel appearing to float away from anything. */
    .nav.is-open {
        background: rgba(5, 13, 31, 0.6);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

@media (max-width: 900px) {
    :root { --gutter: 24px; }

    .nav { padding-inline: 24px; }
    /* The panel lines up with the mark and the menu button, so it follows the bar's padding. */
    .nav__menu { inset-inline: 24px; }

    .to-top { inset-block-end: 20px; inset-inline-end: 20px; width: 44px; height: 44px; }

    /* The cards drop out of absolute positioning here, so the hero has to
       stack — otherwise they sit beside the copy and push it off-screen.
       The window offset is dropped too: the aperture is near full-bleed
       at this width, so plain centring reads better. */
    .hero { flex-direction: column; height: auto; padding: 130px 0 72px; }
    .hero__copy { translate: none; width: 100%; max-width: none; padding-inline: var(--gutter); }
    /* Back in normal flow here, so drop the viewport-centring offset. */
    .hero__card, .hero__card.is-in {
        position: static;
        width: 100%;
        max-width: 360px;
        margin: 24px auto 0;
        translate: none;
        animation: none;
    }

    .headline { font-size: 32px; line-height: 44px; }

    .authorities__row { flex-direction: column; }
    .authorities__cell { border-inline-start: 0; border-top: 1px solid var(--hairline); }
    .authorities__cell:first-child { border-top: 0; }

    .steps, .why__cards, .panels { flex-direction: column; }
    .step, .why__card, .panel { flex: 1 1 auto; width: 100%; }

    .docs__row { flex-direction: column; align-items: stretch; gap: 32px; }
    .docs__list, .passport { width: 100%; }

    .chat { flex: 1 1 100%; width: 100%; }
    .whatsapp__copy { flex: 1 1 100%; }
    .bubble, .bubble p { max-width: 100%; width: auto; }

    .footer__top { flex-wrap: wrap; gap: 32px; }
    .footer__col { flex: 1 1 45%; }
}