/* ==========================================================================
   RESPONSIVE  -  the layouts that broke between phone and wide desktop
   ==========================================================================

   Found by rendering every route at 320-1440px and measuring, not by eye:
   each rule below answers a measured overflow, an element drawn on top of
   another, or a control that did not work at that width. Where the defect
   lives in a hand-authored sheet it was fixed there instead; this file holds
   the corrections to the generated ones (base.css and the page extracts),
   which are rewritten by every design sync and cannot be edited.

   Loaded last of all, after site-fixes.css. Copied to public/ and hashed by
   `npm run sync:design` - see AUTHORED_SHEETS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The mobile menu never opened
   --------------------------------------------------------------------------

   Below 1100px the design hides `.nav-menu` with `display: none !important`
   and the hamburger opened it with an inline `display: flex` - which an
   !important rule beats. `aria-expanded` flipped and nothing appeared, so on
   every phone and tablet the site had no navigation at all. MainNav now sets
   `is-open`, and the drawer is drawn here. The navy, padding and shadow are
   the inline values the design's `js/main.js` applies.

   Up to 1250px rather than 1100px because that is where the Arabic menu
   collapses (section 4). `is-open` can only be set while the hamburger is
   showing - MainNav closes the drawer when it is hidden - so the wider range
   never draws a drawer on an English desktop.
   -------------------------------------------------------------------------- */

@media (max-width: 1250px) {
    .main-header .nav-menu.is-open {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0 !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        /* Down to the bottom of the screen. The header's height varies by
           up to 16px between widths; the 20px bottom padding absorbs it. */
        max-height: calc(100dvh - 178px);
        overflow-y: auto;
        overscroll-behavior: contain;
        margin: 0;
        padding: 12px 20px 20px;
        background-color: #0B1E36;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        z-index: 1001;
    }

    .main-header .nav-menu.is-open > li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .main-header .nav-menu.is-open > li:last-child {
        border-bottom: 0;
    }

    .main-header .nav-menu.is-open .nav-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 13px 2px !important;
        font-size: 15px !important;
        white-space: normal;
    }

    .main-header .nav-menu.is-open .nav-link.nav-ai-link {
        display: inline-flex;
        margin: 12px 0 4px;
        padding: 8px 16px !important;
    }

    .main-header .nav-menu.is-open .nav-search-btn {
        padding: 12px 2px !important;
    }

    /* The carets promise a hover panel a touch screen cannot open. */
    .main-header .nav-menu.is-open .nav-link > svg:not(.spark) {
        display: none;
    }

    /* The Specialties item links to the directory; the illustrated panel is
       a desktop hover affordance and would not fit a drawer. */
    .main-header .nav-menu.is-open .megamenu-panel {
        display: none !important;
    }

    /* The plain dropdowns become an indented list, so every page they hold
       is reachable without hover. */
    .main-header .nav-menu.is-open .nav-dropdown {
        position: static;
        min-width: 0;
        margin: -4px 0 10px;
        padding: 0 0 0 14px;
        background: none;
        border: 0;
        border-inline-start: 2px solid rgba(255, 255, 255, 0.12);
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    html[dir="rtl"] .main-header .nav-menu.is-open .nav-dropdown {
        padding: 0 14px 0 0;
    }

    .main-header .nav-menu.is-open .nav-dropdown a {
        display: block;
        padding: 9px 4px;
        font-size: 14px !important;
        white-space: normal;
        color: rgba(255, 255, 255, 0.82);
    }

    .main-header .mobile-nav-toggle {
        min-width: 32px;
        min-height: 32px;
        cursor: pointer;
    }
}

/* --------------------------------------------------------------------------
   2. The header's button, once the menu has collapsed
   --------------------------------------------------------------------------

   The row is `space-between` over three items once the menu is hidden, so
   the button floated in the middle of the bar, half-way between the logo and
   the hamburger. It belongs beside the hamburger. A physical `margin-left`,
   not a logical one: rtl.css reverses the row as well as the direction, so
   the Arabic header runs in the same visual order as the English one.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .main-header .navbar #nav-cta-btn {
        margin-left: auto;
    }

    .main-header .navbar {
        gap: 14px;
    }
}

/* --------------------------------------------------------------------------
   3. The header on a phone: one row, not two
   --------------------------------------------------------------------------

   "Book an Appointment" does not fit beside the logo on a phone, so the row
   was allowed to wrap and the button took a second line (site-fixes.css).
   That made the header 250px tall instead of 186px - and every page's hero
   is padded to clear the one-row header, so on every English page the first
   30-90px of the hero (breadcrumbs, badges, the headline itself) sat
   underneath the button. The Arabic label is short enough that its header
   never wrapped, which is why only English showed it.

   So the header stays one row: a slightly smaller logo, and the label set
   small on two lines. Below 375px even that does not fit and the button
   keeps only its arrow badge; the label stays in the markup, visually hidden,
   so it is still the link's accessible name.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .main-header .navbar {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .main-header .nav-brand img {
        height: 46px !important;
    }

    .main-header .navbar #nav-cta-btn {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 150px;
        gap: 8px;
        padding-block: 5px !important;
        padding-inline: 14px 5px !important;
        font-size: 10.5px !important;
        line-height: 1.2;
        white-space: normal;
    }

    .main-header .navbar #nav-cta-btn > span:first-child {
        white-space: normal;
    }

    .main-header .navbar #nav-cta-btn .icon-circle {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 374px) {
    .main-header .navbar #nav-cta-btn {
        padding: 5px !important;
    }

    .main-header .navbar #nav-cta-btn > span:first-child {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   4. The Arabic menu is longer than the English one
   --------------------------------------------------------------------------

   The design collapses the menu to the hamburger at 1100px, "before the row
   can overflow" - a breakpoint measured on the English labels. The Arabic
   row needs 1136px, so from 1101 to ~1240px it pushed the booking button off
   the right edge of the screen. Same rule, Arabic's own breakpoint.
   -------------------------------------------------------------------------- */

@media (max-width: 1250px) {
    html[dir="rtl"] .main-header .nav-menu:not(.is-open) {
        display: none !important;
    }

    html[dir="rtl"] .main-header .mobile-nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    html[dir="rtl"] .main-header .navbar #nav-cta-btn {
        margin-left: auto;
    }
}

/* --------------------------------------------------------------------------
   5. The Specialties mega panel opened off the screen
   --------------------------------------------------------------------------

   The panel is up to 1140px wide and centred on its own menu item - which
   sits left of centre - so it opened with its left edge cut off: 151px at
   1180px, 57px at 1440px. In Arabic the same overhang is on the side RTL
   scrolls towards, so even closed it added ~127px of sideways scroll to every
   Arabic page and pushed the whole page right, leaving a white strip down
   the left (rtl.css's `overflow-x: clip` on the root does not contain it).

   Centred on the menu instead. The menu is centred in the bar, and its
   bottom edge is the item's bottom edge, so the panel lands in the middle of
   the page with the same 15px drop and no gap to cross with the pointer.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .main-header .nav-menu {
        position: relative;
    }

    .main-header .megamenu-item {
        position: static;
    }

    .main-header .megamenu-panel {
        width: min(1140px, 92vw);
        max-width: none;
        /* Taller than the screen, too: 842px from a 140px top on a 1440x900
           display, so the "Explore all specialties" button at its foot was
           below the fold. It scrolls inside itself instead. */
        max-height: calc(100vh - 170px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* The Arabic cards carry each department's full introduction where the
       English ones have a five-word line, which made the Arabic panel 1362px
       tall. Two lines is more than any English description uses. */
    .main-header .megamenu-card .card-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        /* The clamp alone let one Arabic description keep a third line in
           Chrome 150; the height cap is the guarantee, the clamp adds the
           ellipsis. */
        max-height: 2lh;
        overflow: hidden;
    }
}

/* --------------------------------------------------------------------------
   6. The hero slider's arrows sat on the hero text
   --------------------------------------------------------------------------

   They are placed in the gutter between the viewport edge and the content,
   which is only wider than a 48px arrow above ~1420px. Below that the left
   arrow covered the start of the intro paragraph (at 1050px it sat on
   "commitment to international standards"). Smaller, and centred in the
   gutter that actually exists. At tablet width and below there is no gutter
   to use at all - 30px on a tablet, 13px on a phone - and the arrows landed
   on the text and under the floating contact buttons, so they are hidden
   there; the slides are decorative and keep cross-fading on their own.
   -------------------------------------------------------------------------- */

@media (max-width: 1420px) {
    .hero-slider-nav {
        width: 34px;
        height: 34px;
    }

    .hero-slider-nav svg {
        width: 16px;
        height: 16px;
    }

    .hero-slider-nav--prev {
        left: max(2px, calc(((100% - min(1260px, 92%)) / 2 - 34px) / 2));
    }

    .hero-slider-nav--next {
        right: max(2px, calc(((100% - min(1260px, 92%)) / 2 - 34px) / 2));
    }
}

@media (max-width: 900px) {
    .hero-slider-nav {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   7. Home: the doctors heading and its paragraph shared one row on a phone
   --------------------------------------------------------------------------

   `.doctors-top-bar` is a two-item row with no mobile rule. At 390px the
   heading and the paragraph were squeezed into two narrow columns; at 320px
   the paragraph ran 18px off the screen.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .doctors-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin-bottom: 32px;
    }

    .doctors-top-right {
        max-width: none;
    }

    /* Its 75px top margin lines the paragraph up with the heading beside
       it; stacked, it only opens a hole under the button. */
    .doctors-top-right .section-desc {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   8. Home: the location section was wider than a phone
   --------------------------------------------------------------------------

   Its single mobile column is a bare `1fr`, which cannot shrink below its
   content - and the content includes the e-mail address, one unbreakable
   30-character word. The column came out 357px on a 320px screen, map and
   all. The two buttons beneath it shared one row with no wrap.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .map-layout-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
}

.map-details-value,
.map-details-value a {
    overflow-wrap: anywhere;
}

.map-action-row {
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   9. Footer contact details in Arabic
   --------------------------------------------------------------------------

   rtl.css makes phone and e-mail links `inline-block` with `direction: ltr`
   so the digits read the right way round - which also makes each one a
   single unbreakable box. In the two-column footer (561-900px) the e-mail
   address was wider than its column and hung off the screen edge.
   -------------------------------------------------------------------------- */

.footer-contact-row .contact-item,
.footer-contact-row .contact-item a {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   10. Contact: visiting-hours times ran off the card
   --------------------------------------------------------------------------

   Each ward row is the ward name and its times side by side, with the times
   `shrink-0`. A time slot such as "2:00 pm - 4:00 pm & 7:00 pm - 9:00 pm" is
   wider than a phone's card, so it pushed out past the edge - 90px at 320px,
   off the left edge in Arabic. On a phone the times go under the ward name.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    .ward-card__body > div {
        flex-direction: column;
        gap: 4px;
    }

    .ward-card__body > div > span:last-child {
        flex-shrink: 1;
        text-align: start;
    }
}

/* --------------------------------------------------------------------------
   11. The floating buttons sat on the call/WhatsApp bar
   --------------------------------------------------------------------------

   Inner pages pin `.float-bar` (~110px tall) to the bottom of screens up to
   900px, and the assistant's stack of round buttons is pinned 22px from the
   same edge - so the phone button landed on top of the bar's WhatsApp
   button. assistant.css has a `.mphw-raised` position for exactly this, but
   nothing ever sets that class. Keyed off the bar's presence instead, so it
   needs no script.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    body:has(.float-bar) .mphw-stack {
        bottom: 148px;
    }

    body:has(.float-bar) .mphw-chat {
        bottom: 222px;
    }
}

/* --------------------------------------------------------------------------
   12. Two things that sat wrong once the mobile menu could open
   --------------------------------------------------------------------------

   The assistant's floating buttons are stacked above everything
   (z-index 99990), so they covered the right-hand end of the open menu's
   lower rows. They step aside while the menu is open, as does the bar.

   And the current page's desktop marker - a 2px white rule the full width of
   the link - becomes a full-width line across the drawer, which reads as a
   heavy divider rather than "you are here". In the drawer it is a short
   accent under the label instead.
   -------------------------------------------------------------------------- */

/* The call/WhatsApp bar too: it is pinned over the bottom of the screen, so
   it hid the drawer's last rows. */
body:has(.main-header .nav-menu.is-open) .mphw-stack,
body:has(.main-header .nav-menu.is-open) .float-bar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 1250px) {
    .main-header .nav-menu.is-open .nav-link.active {
        position: relative;
    }

    .main-header .nav-menu.is-open .nav-link.active::after {
        width: 28px;
        bottom: 6px;
        inset-inline-start: 2px;
        left: auto;
        background-color: #1c97d4;
    }

    html:not([dir="rtl"]) .main-header .nav-menu.is-open .nav-link.active::after {
        left: 2px;
    }
}

/* The page stays put behind the open menu, instead of scrolling underneath
   it and showing through below its last row. */
html:has(.main-header .nav-menu.is-open) {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Phones: with the menu button moved to the top bar (2026-10-29), "Book an
   Appointment" has the row to itself: one line, a wider button.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .main-header .navbar #nav-cta-btn,
    html[dir="rtl"] .main-header .navbar #nav-cta-btn {
        max-width: none !important;
        min-width: 200px;
        justify-content: space-between;
        white-space: nowrap !important;
        padding-inline: 18px 6px !important;
        font-size: 11.5px !important;
    }

    .main-header .navbar #nav-cta-btn > span:first-child {
        white-space: nowrap !important;
    }
}

@media (max-width: 374px) {
    .main-header .navbar #nav-cta-btn,
    html[dir="rtl"] .main-header .navbar #nav-cta-btn {
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   Phones, 2026-10-30
   --------------------------------------------------------------------------

   The assistant's message box was 13px. iOS zooms the page into any input
   under 16px when it is focused, so typing blew the chat window up past the
   screen and the reply could no longer be read. 16px keeps the view still. */
@media (max-width: 900px) {
    .mphw-input,
    .mphw-search input,
    .mphw-search textarea {
        font-size: 16px !important;
    }

    /* The open chat stays inside the visible screen, keyboard or not. */
    .mphw-chat.mphw-open {
        max-height: calc(100dvh - 120px);
    }

    .mphw-chat.mphw-open .mphw-chat-body {
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* The homepage's "also available" specialty tags: every tag the same size,
   two to a row, instead of pills as wide as their names - which left some
   full-width and others half. A long name wraps inside its tag. */
@media (max-width: 640px) {
    .dept-extra-tags-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px !important;
    }

    .dept-extra-tags-list > * {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .dept-tag-pill,
    .dept-tag-pill--icon {
        box-sizing: border-box;
        min-height: 58px;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 8px 10px 8px 12px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        text-align: start;
    }

    .dept-tag-pill .dept-tag-icon {
        flex: 0 0 auto;
    }

    .dept-tag-pill:not(:has(.icon-circle))::after {
        margin-inline-start: auto;
    }
}

/* Homepage consultant carousel on phones: the name card overlaps the base of
   the portrait, and at 356px only the head showed above it - some faces were
   cut at the chin. A taller frame shows the head and shoulders; the photo
   still fills the card's width, so nothing is cropped at the sides. */
@media (max-width: 640px) {
    .doctors-track .doctor-img-wrapper,
    .doctors-slides .doctor-img-wrapper {
        height: 470px !important;
    }
}

/* The floating buttons on phones (assistant, emergency, WhatsApp, call):
   four 54px circles covered a third of the screen's right edge, over the
   page's own text. Smaller and tighter on phones only (2026-10-30). */
@media (max-width: 640px) {
    .mphw-stack {
        right: 14px;
        bottom: 16px;
        gap: 9px;
    }

    html[dir="rtl"] .mphw-stack {
        right: auto;
        left: 14px;
    }

    .mphw-btn {
        width: 42px;
        height: 42px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .mphw-btn svg {
        width: 19px;
        height: 19px;
    }

    .mphw-btn[data-tip]::before {
        font-size: 10px;
        padding: 4px 10px;
        right: calc(100% + 8px);
    }
}

/* Arabic: the buttons sit on the left, so their labels open to the right -
   opening left, as in English, put "Ask MPH AI" off the screen. */
html[dir="rtl"] .mphw-btn[data-tip]::before {
    right: auto;
    left: calc(100% + 12px);
}

@media (max-width: 640px) {
    html[dir="rtl"] .mphw-btn[data-tip]::before {
        left: calc(100% + 8px);
    }
}