/*
 * iDrive Responsive Fixes — CSS-only corrections for two live overflow
 * regressions found 2026-09-12, both root-caused live via direct DOM
 * measurement (Playwright), not guessed from reading the stylesheets alone.
 *
 * Ships as its own plugin rather than edits to the theme's own stylesheets,
 * per the standing rule since the 2026-09-12 theme-directory-wipe incident:
 * no more direct theme-file deploys for anything that can instead be an
 * isolated, reversible plugin. Deactivating this plugin removes every
 * override below instantly and leaves no trace.
 *
 * ============================================================================
 * FIX 1 — header overflow at every "desktop" width from ~1051px up to
 * ~1650px (not just the ~1440px the visual audit happened to sample).
 * ============================================================================
 *
 * Root cause: .site-header__actions in the header bar carries SIX items —
 * the language switcher (SLICE 112), the currency switcher (SLICE 130t),
 * the social icons, Sign in, Book a journey, and the mobile hamburger — but
 * only four of those six ever got a responsive collapse rule:
 *   - .desktop-nav / .header-account / .header-social hide at max-width:1050px
 *     (app.css)
 *   - .lang-switcher[data-lang-switcher] hides at the same 1050px (corridor-v1.css)
 *   - .site-header__actions > .currency-switcher — NEVER got a hide rule at
 *     any width. It was added in SLICE 130t with only a margin override for
 *     when it's re-rendered inside the mobile drawer; the header-bar copy
 *     was left permanently visible.
 *
 * Measured directly on the live site: with every item visible, the header
 * bar's own content needs ~1430-1440px of width, but .container (which
 * .site-header__inner also uses) is hard-capped at max-width:1280px
 * (corridor-v1.css) / var(--idrive-width):1240px (app.css) at every viewport
 * from ~1272px up — so the row was overflowing its own container at EVERY
 * "desktop" width, not just narrow ones. Below ~1440px that overflow runs
 * past the browser viewport edge too, which is what read as "Book a
 * journey" being clipped to a single letter "B": the button was rendered in
 * full, just positioned mostly off-screen to the right.
 *
 * The same missing collapse also explains the mobile hamburger being
 * completely unreachable at 390px: the currency-switcher pill, with nothing
 * to hide it, was still occupying header-bar space that .menu-toggle needed,
 * pushing the hamburger button off the right edge of the viewport entirely.
 *
 * Fix: fold the currency-switcher (header-bar instance only — the copy
 * inside #mobile-drawer is untouched and remains the way to reach it below
 * the breakpoint) into the SAME collapse group as the other secondary items,
 * and move that whole group's breakpoint from 1050px up to 1650px — the
 * width empirically confirmed (live, via direct measurement, not estimated)
 * to be where the full six-item row actually fits again. Below 1650px the
 * header now behaves exactly like it already does below 1050px today:
 * brand + Book a journey + hamburger, with everything else reachable from
 * the drawer. This does mean common laptop widths (1280/1366/1440/1536)
 * now see the "hamburger" header instead of the (already-broken) full desktop
 * bar — a strict improvement, since that row was never actually fitting at
 * those widths to begin with.
 *
 * Also widens .site-header__inner's own cap from 1240/1280px to 1600px
 * (scoped to the header only — .container elsewhere on the site, and its
 * 1280px cap, is untouched) so that above 1650px there is enough room with
 * real margin (~70px, confirmed at both 1651px and 1920px), rather than
 * merely swapping a narrow-viewport overflow for a wide-viewport one.
 */
@media (max-width: 1650px) {
	.desktop-nav,
	.header-account,
	.header-social,
	.lang-switcher[data-lang-switcher],
	.site-header__actions > .currency-switcher {
		display: none !important;
	}
	.menu-toggle {
		display: flex !important;
	}
}

.site-header .site-header__inner {
	width: min(calc(100% - 2rem), 1600px) !important;
	max-width: 1600px !important; /* corridor-v1.css's .container{max-width:1280px} would otherwise still cap this */
}

/* Closes the last ~6px sliver at the very narrowest common phone width
   (390px, e.g. iPhone 12/13/14/15). SLICE 130r deliberately kept the
   "Your Pakistan. Your Journey." tagline visible on mobile because it fit
   at 375px at the time; it no longer has quite enough room once combined
   with the mobile hamburger button, so it steps aside only below 400px
   (the tagline itself, not the logo or the iDrive.pk wordmark, which are
   both untouched at every width). */
@media (max-width: 400px) {
	.brand small {
		display: none !important;
	}
}

/*
 * ============================================================================
 * FIX 2 — the "edit journey" panel on the results page overflowing hard
 * right on mobile (reported live, with a screenshot, 2026-09-12).
 * ============================================================================
 *
 * Root cause: .rp (display:grid) lays out .rp-editor in a single grid
 * track sized to the results column's real width (measured live: 311px on
 * a 390px-wide phone). But CSS grid items, like flex items, default to
 * min-width:auto — meaning their minimum size is their CONTENT's min-content
 * width, not the track size. .rp-editor's content is the v2 journey
 * composer (.booking-shell, a nowrap flex row with fixed-column-ratio grids
 * inside it), which refuses to shrink below its own desktop-sized natural
 * width. Confirmed live: with .rp-editor at the browser's default
 * min-width:auto, opening it on a 390px phone rendered it — and everything
 * inside it — at 1290px wide, silently clipped on the right by the page's
 * overflow-x:clip (so nothing scrolls into view; the content is just gone).
 * This is what was reported as "the search expands and hides the right
 * side" — it happens specifically when the journey-details editor on the
 * results page is opened.
 *
 * Fix is the standard, minimal one for this exact class of bug (the same
 * pattern app.css already applies to .results-tool and others): give the
 * grid item an explicit min-width:0 so it actually shrinks to its track,
 * and lets its own already-correct internal responsive rules do the rest.
 * Verified live: with this alone, .rp-editor and every element inside it
 * (the composer, its quick-picks, its trip-planner tray) drop straight to
 * the correct 311px and the overflow is gone — no other change needed.
 */
.rp-editor {
	min-width: 0 !important;
}