/* =====================================================================
   site.css — shared "chrome" for the whole site: app bar (nav + language
   switch + local-time / weather widgets), footer, and the informational
   page layout (Contact, Address & Map, Lost & Found, Prohibited Items).

   Loaded by index.php and every page.php after the theme stylesheet, so
   theme overrides still win where they need to. Brand colours come from
   CSS custom properties that flip per theme, so this file is tenant-neutral.
   It NEVER touches the flight-board markup/classes.
   ===================================================================== */

/* Reset — the new pages (page.php) don't carry index.php's inline reset, so
   without this the default body margin shows the dark theme backdrop as a
   black border around the app bar and under the footer. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --brand-primary:   #242C65;   /* navy (Aleppo default) */
  --brand-secondary: #1E7960;   /* forest green */
  --brand-ink:       #242C65;
  --brand-soft:      rgba(36, 44, 101, 0.06);
  --brand-line:      rgba(36, 44, 101, 0.12);
  --appbar-bg:       #ffffff;
}
html.theme-green {
  --brand-primary:   #009552;
  --brand-secondary: #252d65;
  --brand-ink:       #1f2a44;
  --brand-soft:      rgba(0, 149, 82, 0.07);
  --brand-line:      rgba(37, 45, 101, 0.12);
}
/* Qamishli. The primary is #A05F00 rather than a brighter amber because this
   token is used BOTH as text on white and as a background under white text,
   and contrast is symmetric: #A05F00 measures 5.08:1 against white, so it
   clears WCAG AA (4.5:1) in both directions. The brighter #B26A00 it was
   picked from measures 4.24:1 and fails both. Don't lighten it back. */
html.theme-amber {
  --brand-primary:   #A05F00;
  --brand-secondary: #252d65;
  --brand-ink:       #3a2a12;
  --brand-soft:      rgba(160, 95, 0, 0.07);
  --brand-line:      rgba(37, 45, 101, 0.12);
}
/* Deir ez-Zor. The primary is #8B1538 (deep maroon), measured at 5.51:1
   against white (AA+). Used as both text on white and as a background under
   white text, so contrast is symmetric. */
html.theme-maroon {
  --brand-primary:   #8B1538;
  --brand-secondary: #252d65;
  --brand-ink:       #3a2a12;
  --brand-soft:      rgba(139, 21, 56, 0.07);
  --brand-line:      rgba(37, 45, 101, 0.12);
}

/* ---- shared utilities (mirrors index.php inline so subpages have them) -- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
html[lang="ar"] [data-lang="en"] { display: none !important; }
html[lang="en"] [data-lang="ar"] { display: none !important; }

/* =====================================================================
   APP BAR
   ===================================================================== */
.appbar {
  /* Sticky so the menu stays visible on every scroll position, including
     when the homepage is opened at #flights-section (the anchor jump used to
     scroll the non-sticky bar out of view). The homepage's `.page` wrapper
     uses `overflow: clip` (not `hidden`) so it doesn't trap this sticky. */
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  /* Admin-tunable banner height (per-tenant). min-height (not height) so the
     mobile nav drawer can still expand the bar. The logo height scales from
     the same setting — see partials/site-header.php. */
  min-height: var(--appbar-height, 68px);
  padding: 12px clamp(16px, 4vw, 40px);
  background: var(--appbar-bg);
  border-bottom: 1px solid var(--brand-line);
  box-shadow: 0 1px 10px rgba(36, 44, 101, 0.04);
  flex-wrap: wrap;
}

.appbar__brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  /* keep the brand block right-aligned in both directions */
  text-align: start;
  margin-inline-end: auto;
}
/* Logo sits at the inline-START of the brand: RTL → right of the title,
   LTR → left of the title. */
.appbar__logo {
  flex: 0 0 auto;
  /* rectangular logo — width:height = 3.1 (object-fit keeps it undistorted).
     Height scales with the admin banner-height setting (--appbar-logo-height). */
  height: var(--appbar-logo-height, 44px);
  width: auto;
  aspect-ratio: 3.1 / 1;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}
/* Two-line airport title: Arabic on top, English below. Sizes are admin-tunable
   (--brand-ar-size / --brand-en-size). The English line runs wider, so the
   Arabic line gets word-spacing — NOT letter-spacing, which would break Arabic
   letter-joining — to bring its visual width closer to the English line. */
/* Both title lines share one center point (Arabic on top, English below).
   align-items+text-align center keeps them centered together regardless of the
   differing line widths; RTL/LTR text shaping is preserved per line. */
.appbar__brand-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.appbar__brand-ar {
  font-size: var(--brand-ar-size, 17px);
  font-weight: 800; color: var(--brand-primary); line-height: 1.15;
  word-spacing: 0.22em;
}
.appbar__brand-en {
  font-size: var(--brand-en-size, 11px);
  font-weight: 600; color: var(--brand-secondary); letter-spacing: 0.4px; margin-top: 5px;
}

/* ---- mobile toggle (hamburger) ---- */
.appbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  order: 2;
}
.appbar__toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; }
.appbar__toggle-bars span { display: block; width: 20px; height: 2px; background: var(--brand-primary); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.appbar.is-open .appbar__toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.appbar.is-open .appbar__toggle-bars span:nth-child(2) { opacity: 0; }
.appbar.is-open .appbar__toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- nav ---- */
.appbar__nav { order: 3; }
.appbar__menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0; padding: 0;
  flex-wrap: wrap;
}
.appbar__link {
  display: inline-block;
  padding: 8px 12px;
  /* No rounded corners and no default background — top menu items are flat. */
  border-radius: 0;
  font-size: 14px;
  /* Normal weight so the plain links (Airlines, About) match the dropdown
     parents, which render at inherited normal weight via `.appbar__parent`. */
  font-weight: normal;
  color: var(--brand-ink);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
/* Hover = colour cue only, no background fill (inactive items stay flat). */
.appbar__link:hover { color: var(--brand-primary); }
/* Only the active/selected item carries a subtle, square light background. */
.appbar__link.is-active { color: var(--brand-primary); background: var(--brand-soft); }

/* ---- side cluster: language switch ---- */
.appbar__side { order: 4; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---- mobile menu language utility row ----
   Shown only inside the open mobile menu (≤900px); hidden on desktop/tablet.
   The open menu reuses the REAL header (the app bar brand) — there is no
   separate/duplicate menu header. The close control is the persistent corner
   menu button (no separate close button). */
.appbar__mlang-row { display: none; }

/* Background-page scroll lock while the mobile menu is open (set by site.js).
   position:fixed + a negative inline `top` freezes the page at its current
   scroll offset without losing it; site.js restores the offset on close. */
body.alp-menu-locked {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

/* ---- desktop: centre the main menu, keep the language toggle on the side.
   Brand and side take equal flex (1fr each) so the auto-width nav sits in the
   TRUE centre of the header. Works in both LTR and RTL (logical properties).
   The language toggle stays in `.appbar__side`, outside the centred nav. ---- */
@media (min-width: 901px) {
  .appbar__brand { flex: 1 1 0; margin-inline-end: 0; min-width: 0; }
  .appbar__nav   { flex: 0 1 auto; }
  .appbar__menu  { justify-content: center; }
  .appbar__side  { flex: 1 1 0; justify-content: flex-end; }
}

/* ---- "Airport Information" dropdown ---- */
.appbar__has-sub { position: relative; }
.appbar__parent { font: inherit; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 4px; }
.appbar__caret { font-size: 10px; transition: transform 0.15s; }
.appbar__submenu {
  list-style: none; margin: 0; padding: 6px;
  position: absolute; inset-inline-start: 0; top: calc(100% + 6px);
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(36, 44, 101, 0.16);
  display: none;
  z-index: 60;
}
.appbar__submenu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--brand-ink); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.appbar__submenu a:hover { background: var(--brand-soft); color: var(--brand-primary); }
/* selected flight filter (All / Arrivals / Departures) shown as active */
.appbar__submenu a.is-active { background: var(--brand-soft); color: var(--brand-primary); font-weight: 700; }
.appbar__has-sub.is-active > .appbar__parent { color: var(--brand-primary); background: var(--brand-soft); }
.appbar__has-sub.is-open .appbar__submenu { display: block; }
/* force a flyout shut right after a click even while still hovered/focused
   (used by the Flights filter items, which don't navigate) */
.appbar__has-sub.is-dismissed > .appbar__submenu { display: none !important; }
.appbar__has-sub.is-open .appbar__caret { transform: rotate(180deg); }
@media (min-width: 901px) {
  .appbar__has-sub:hover .appbar__submenu,
  .appbar__has-sub:focus-within .appbar__submenu { display: block; }
  .appbar__has-sub:hover .appbar__caret { transform: rotate(180deg); }
  /* Transparent bridge over the gap between the parent item and the submenu
     so moving the cursor from one to the other never drops the hover (the
     submenu stays open while the cursor is over the parent OR the submenu).
     Full-width via inset-inline, so it works in both LTR and RTL. */
  .appbar__has-sub:hover .appbar__submenu::before,
  .appbar__has-sub:focus-within .appbar__submenu::before {
    content: '';
    position: absolute;
    top: -8px;
    inset-inline: 0;
    height: 8px;
  }
}
@media (max-width: 900px) {
  .appbar__has-sub { position: static; }
  .appbar__parent { width: 100%; justify-content: space-between; }
  .appbar__submenu { position: static; min-width: 0; border: none; box-shadow: none; background: transparent; padding: 0 0 6px 14px; }
}

/* ---- time + weather "instrument bar" (AeroMetric Light) ----------------
   Light tonal band below the menu. Big tenant-accent numerals (Aleppo navy /
   Damascus emerald), uppercase micro-labels, and a condition-coloured weather
   icon tile (emerald=clear, blue=rain, amber=storm...). Day/night aware. All
   data is fed by site.js — markup IDs are unchanged. */
.wxbar {
  --wx-cond: var(--brand-primary);     /* condition accent (set per data-group) */
  background: var(--brand-soft);
  background: color-mix(in srgb, var(--brand-primary) 5%, #f8f9ff);
  border-bottom: 1px solid var(--brand-line);
  color: var(--brand-ink);
  transition: background 0.4s ease;
}
.wxbar__inner {
  max-width: 1180px; margin: 0 auto;
  /* Time + weather form one balanced group, centered in the middle of the bar.
     flex-wrap lets them stack neatly on narrow screens. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px clamp(16px, 3vw, 28px);
  padding: 12px clamp(16px, 4vw, 40px);
}
.wxbar__time { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.wxbar__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-secondary);
}
.wxbar__clock {
  font-size: clamp(20px, 3.4vw, 26px); font-weight: 800; line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; direction: ltr; color: var(--brand-primary);
}
.wxbar__date { font-size: 13px; color: var(--brand-ink); opacity: 0.72; }

/* Separator between the time and weather widgets.
   The server emits it ONLY when both widgets are enabled; on top of that it
   stays hidden until the weather has actually rendered — weather-widget.js adds
   .wxbar--wx-on once a successful response paints, and removes it on failure or
   when the widget hides itself. So the line never floats beside an empty space
   during the fetch, after an API error, or when one widget is switched off.
   (It was previously always visible, which showed a stray rule whenever the
   weather request failed.) */
/* Weather is the ONLY widget in the band (the admin turned the clock off):
   hide the whole band until a reading paints, otherwise the tenant gets an
   empty coloured strip while the request is in flight — and forever if it
   fails, because #alp-weather stays [hidden]. weather-widget.js adds
   .wxbar--wx-on on success and removes it on failure. */
.wxbar--wx-only:not(.wxbar--wx-on) { display: none; }

.wxbar__divider { display: none; }
.wxbar--wx-on .wxbar__divider {
  display: block;
  width: 1px; align-self: stretch; background: var(--brand-line); margin: 4px 0;
}

/* -------------------------------------------------------------------------
   Admin widget switches — MOBILE ONLY (show_time_widget / show_weather_widget).
   The band and both widgets are always rendered so the DESKTOP header is
   untouched; partials/site-header.php stamps the admin's choice on the band and
   these rules apply it at phone/tablet-portrait widths only. Same ≤768px
   definition of "mobile" the board-filter switches use, so one admin setting
   means one thing across the page.

   display:none also keeps a hidden widget out of the accessibility tree here,
   and weather-widget.js / site.js skip their request and their timers while
   their widget is hidden at this width — so switching one off costs a phone
   nothing at runtime.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .wxbar--m-no-time .wxbar__time    { display: none; }
  .wxbar--m-no-wx   .wxbar__weather { display: none; }
  /* A separator needs BOTH neighbours; with either switched off it would sit
     against the edge of the band. */
  .wxbar--m-no-time .wxbar__divider,
  .wxbar--m-no-wx   .wxbar__divider { display: none; }
  /* Both off → the whole band goes, so the header loses its height instead of
     leaving an empty coloured strip. */
  .wxbar--m-no-time.wxbar--m-no-wx { display: none; }
  /* Clock off and weather ON but not painted yet (in flight, or the request
     failed): the band would be that same empty strip, because #alp-weather
     stays [hidden]. Collapse it until a reading arrives. */
  .wxbar--m-no-time:not(.wxbar--m-no-wx):not(.wxbar--wx-on) { display: none; }
}

.wxbar__weather { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wxbar__icon {
  width: 54px; height: 54px; flex: none; border-radius: 14px;
  display: inline-grid; place-items: center;
  background: var(--brand-soft);
  background: color-mix(in srgb, var(--wx-cond) 13%, #ffffff);
  color: var(--wx-cond);
  border: 1px solid var(--brand-line);
  border-color: color-mix(in srgb, var(--wx-cond) 22%, transparent);
}
.wxbar__icon svg { width: 32px; height: 32px; fill: currentColor; }
.wxbar__wx { display: flex; flex-direction: column; }
.wxbar__temp {
  font-size: clamp(20px, 3.4vw, 26px); font-weight: 800; line-height: 1; direction: ltr;
  font-variant-numeric: tabular-nums; color: var(--brand-primary);
}
.wxbar__cond { font-size: 13.5px; color: var(--brand-ink); opacity: 0.8; margin-top: 3px; }

.wxbar__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.wxbar__chip {
  display: flex; flex-direction: column; gap: 2px;
  background: #ffffff; border: 1px solid var(--brand-line);
  border-radius: 12px; padding: 7px 12px; min-width: 76px;
}
.wxbar__chip-k {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--brand-secondary); opacity: 0.9;
}
.wxbar__chip-v { font-weight: 800; font-size: 15px; color: var(--brand-primary); font-variant-numeric: tabular-nums; direction: ltr; }
.wxbar__chip-u { font-weight: 600; font-size: 12px; opacity: 0.8; }

/* condition-driven accent — tints the icon tile (intentional colour signal) */
.wxbar[data-group="clear"]   { --wx-cond: #009552; }
.wxbar[data-group="partly"]  { --wx-cond: #0e9488; }
.wxbar[data-group="cloudy"]  { --wx-cond: #64748b; }
.wxbar[data-group="fog"]     { --wx-cond: #6e7a6f; }
.wxbar[data-group="drizzle"] { --wx-cond: #3a6ea5; }
.wxbar[data-group="rain"]    { --wx-cond: #2563eb; }
.wxbar[data-group="snow"]    { --wx-cond: #0891b2; }
.wxbar[data-group="thunder"] { --wx-cond: #d97706; }

/* night — the icon tile deepens to navy (the crescent is swapped by site.js) */
.wxbar[data-daypart="night"] .wxbar__icon {
  background: #252d65;
  background: color-mix(in srgb, var(--wx-cond) 30%, #252d65);
  color: #ffffff; border-color: transparent;
}

@media (max-width: 640px) {
  /* Phones: keep time + weather side by side (horizontal), NOT stacked. The
     inner row no longer wraps and the weather block drops its full-width
     override so both widgets share one compact centered row. If the weather
     fetch fails, site.js hides the weather block and the lone time widget
     stays centered; if the clock can't format, site.js hides the time block. */
  .wxbar__inner { flex-wrap: nowrap; justify-content: center; gap: 14px; }
  /* Phones never show the separator. Must out-specify `.wxbar--wx-on
     .wxbar__divider` (0,2,0) from the base block, or the divider would come
     back here the moment the weather loaded. */
  .wxbar--wx-on .wxbar__divider,
  .wxbar__divider { display: none; }
  .wxbar__weather { width: auto; min-width: 0; justify-content: center; gap: 8px; }
  .wxbar__time { min-width: 0; }
}
@media (max-width: 460px) {
  .wxbar__chips { display: none; }
  /* Shrink the weather icon and drop the secondary date line so the icon +
     temperature still fit beside the clock on the narrowest phones. */
  .wxbar__icon { width: 42px; height: 42px; }
  .wxbar__icon svg { width: 26px; height: 26px; }
  .wxbar__date { display: none; }
}

/* ---- language switch ---- */
.appbar__lang {
  display: inline-flex;
  direction: ltr;             /* AR always left, EN always right */
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.appbar__lang a {
  font: inherit;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  color: rgba(36, 44, 101, 0.55);
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  min-width: 38px;
  text-align: center;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
/* `.active` is the class home.js toggles on the instant AR/EN switch;
   `.is-active` is the server-rendered state on subpages — style both. */
.appbar__lang a:hover:not(.is-active):not(.active) { color: var(--brand-primary); }
.appbar__lang a.is-active,
.appbar__lang a.active { background: #fff; color: var(--brand-primary); box-shadow: 0 1px 4px rgba(36, 44, 101, 0.12); }

/* =====================================================================
   INFORMATIONAL PAGE LAYOUT
   ===================================================================== */
.page-main {
  max-width: 880px;
  margin: 28px auto;
  padding: 32px clamp(20px, 4vw, 40px) 44px;
  /* Translucent white card keeps the page text readable over the navy
     theme's dark backdrop; on the light Damascus theme it's a subtle panel. */
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--brand-line);
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
}
.page-hero { margin-bottom: 24px; }
.page-hero__title {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 800;
  color: var(--brand-primary);
  line-height: 1.2;
  margin: 0;
}
.page-hero__lead { margin-top: 10px; color: #4a5568; font-size: 16px; }

/* Unpublished-page preview banner (super admin / content manager, ?preview=1) */
.page-preview-banner {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: rgba(217, 119, 6, 0.12); color: #92400e;
  border: 1px solid rgba(217, 119, 6, 0.35); font-size: 14px;
}
/* Optional featured image on a CMS page */
.page-featured { margin: 0 0 18px; }
.page-featured__img {
  display: block; width: 100%; height: auto; max-height: 420px;
  object-fit: cover; border-radius: 14px;
}

.page-body { font-size: 16px; line-height: 1.8; color: #2b3344; }
.page-block { margin: 0 0 16px; }
.page-block--heading {
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 800;
  color: var(--brand-primary);
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--brand-soft);
}
.page-block--paragraph { color: #2b3344; }
.page-block--list { margin: 0 0 18px; padding-inline-start: 22px; }
.page-block--list li { margin-bottom: 8px; }

/* contact rows */
.page-block--contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-inline-start: 4px solid var(--brand-secondary);
  border-radius: 12px;
}
.page-contact__label { font-weight: 800; color: var(--brand-primary); min-width: 140px; }
.page-contact__value { color: #2b3344; direction: ltr; unicode-bidi: plaintext; }
.page-contact__value a { color: var(--brand-secondary); font-weight: 700; text-decoration: none; }
.page-contact__value a:hover { text-decoration: underline; }

/* category cards (Prohibited Items) */
.page-block--category {
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(36, 44, 101, 0.04);
}
.page-category__title { font-size: 17px; font-weight: 800; color: var(--brand-primary); margin: 0 0 12px; }
.page-category__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.page-category__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: var(--brand-soft);
  border-radius: 10px;
}
.page-category__name { font-weight: 700; color: var(--brand-ink); }
.page-category__note { font-size: 14px; color: #5a6275; }

/* note / warning callouts */
.page-block--note {
  padding: 14px 16px;
  border-radius: 12px;
  margin: 18px 0;
  font-size: 15px;
  line-height: 1.7;
  border-inline-start: 4px solid var(--brand-secondary);
  background: var(--brand-soft);
  color: #2b3344;
}
.page-note--warning {
  border-inline-start-color: #b9540a;
  background: rgba(230, 126, 34, 0.09);
  color: #8a4708;
}
.page-note--success {
  border-inline-start-color: #1e7d4f;
  background: rgba(0, 149, 82, 0.10);
  color: #15603c;
}

/* accordion (+ FAQ) blocks — native <details>/<summary>, zero JS */
.page-block--accordion { margin: 18px 0; display: flex; flex-direction: column; gap: 8px; }
.page-accordion__item { background: rgba(31, 42, 68, 0.04); border: 1px solid var(--brand-line); border-radius: 12px; padding: 2px 16px; }
.page-accordion__q { cursor: pointer; font-weight: 700; color: var(--brand-ink); padding: 13px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.page-accordion__q::-webkit-details-marker { display: none; }
.page-accordion__q::after { content: '+'; font-size: 20px; font-weight: 400; opacity: 0.5; }
.page-accordion__item[open] .page-accordion__q::after { content: '\2212'; }
.page-accordion__a { padding: 0 0 14px; color: #4a5568; line-height: 1.75; }

/* cards block — responsive grid */
.page-block--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.page-card { background: #fff; border: 1px solid var(--brand-line); border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(36, 44, 101, 0.05); }
.page-card__title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--brand-primary); }
.page-card__text { margin: 0; font-size: 14px; line-height: 1.7; color: #4a5568; }

.page-back { display: inline-block; margin-top: 28px; font-weight: 700; color: var(--brand-secondary); text-decoration: none; }
.page-back:hover { text-decoration: underline; }

/* breadcrumbs (SEO Slice B) — visual trail; BreadcrumbList schema is JSON-LD.
   Logical properties + a direction-neutral "/" separator keep it correct in
   both RTL and LTR. */
.breadcrumbs { margin: 0 0 16px; }
.breadcrumbs__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; font-size: 13px; }
.breadcrumbs__item { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; color: #9aa0b5; }
.breadcrumbs__link { color: var(--brand-secondary); text-decoration: none; font-weight: 600; }
.breadcrumbs__link:hover { text-decoration: underline; }
.breadcrumbs__current { color: var(--brand-ink); font-weight: 700; }

/* airline detail page (SEO Slice D) */
.airline-page__hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.airline-page__logo { width: 120px; height: 80px; object-fit: contain; background: #fff; border: 1px solid var(--brand-line); border-radius: 12px; padding: 8px; flex: 0 0 auto; }
.airline-page__name { margin: 0; font-size: clamp(22px, 4vw, 30px); font-weight: 800; color: var(--brand-primary); line-height: 1.2; }
.airline-page__country { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; color: #4a5568; font-weight: 600; }
.airline-page__flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.airline-page__desc { color: #2b3344; line-height: 1.8; margin: 0 0 20px; }
.airline-page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.airline-page .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; background: var(--brand-secondary); color: #fff; border: 1px solid transparent; }
.airline-page .btn:hover { filter: brightness(0.95); }
.airline-page .btn--ghost { background: #fff; color: var(--brand-primary); border-color: var(--brand-line); }
.airline-page .btn--ghost:hover { background: var(--brand-soft); filter: none; }
/* Whole-card link to the airline's detail page (stretched-link pattern):
   an invisible overlay anchor covers the card; the action buttons below sit
   above it (z-index) so they stay independently clickable. */
.airline-card--link { position: relative; }
.airline-card--link:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 8px 22px rgba(31, 42, 68, 0.12);
}
.airline-card__cover { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.airline-card__cover:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px; border-radius: 16px;
}
.airline-card--link .airline-card__actions { position: relative; z-index: 2; }

/* Status / direction pills — SHARED so every page that renders a flight pill
   (home board, destination pages, flight-details, and any future page) styles
   them identically and legibly. Each variant sets BOTH a background AND an
   explicit text colour, so a pill NEVER inherits the page body colour (which is
   near-white on the public dark backdrop → previously invisible on info pages).
   This is the single source of truth; theme-green.css overrides only the
   brand-tinted variants for the green tenant (higher specificity wins). */
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill--arrival   { background: rgba(30, 121, 96, 0.10); color: #1E7960; }
.pill--departure { background: rgba(36, 44, 101, 0.08); color: #242C65; }
.pill--scheduled { background: rgba(36, 44, 101, 0.06);  color: #242C65; }
.pill--on-time   { background: rgba(30, 121, 96, 0.12);  color: #1E7960; }
/* #b9540a measured 4.31:1 against this pill's effective background
   (rgba(230,126,34,.12) over the white card) — below the 4.5:1 AA floor for
   normal text, and the pill is 11px. #b04f09 measures 4.73:1 and reads as the
   same warning orange. Any future lightening has to be re-measured against the
   COMPOSITED background, not against white. */
.pill--delayed   { background: rgba(230, 126, 34, 0.12); color: #b04f09; }
.pill--new-time  { background: rgba(142, 68, 173, 0.14); color: #7d3c98; }
.pill--boarding  { background: rgba(41, 128, 185, 0.12); color: #1f6391; }
.pill--departed  { background: rgba(36, 44, 101, 0.12);  color: #242C65; }
.pill--arrived   { background: rgba(30, 121, 96, 0.12);  color: #1E7960; }
.pill--cancelled { background: rgba(192, 57, 43, 0.12);  color: #c0392b; }

/* services pages (SEO Slice D) */
/* Flex-wrap + centered so any partial/last row — including a lone orphan (e.g.
   9 services at 2 per row → last row has 1) — centers, while full rows still
   grow to fill. Cards cap at max-width so an orphan doesn't balloon. */
.services-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 8px 0 4px; }
.service-card { flex: 1 1 300px; max-width: 480px; display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--brand-line); border-radius: 14px; box-shadow: 0 2px 10px rgba(36, 44, 101, 0.05); text-decoration: none; transition: box-shadow 0.15s, transform 0.1s; }
.service-card:hover { box-shadow: 0 6px 18px rgba(36, 44, 101, 0.10); transform: translateY(-1px); }
.service-card--featured { border-color: var(--brand-secondary); }
.service-card__icon { flex: 0 0 auto; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--brand-soft); color: var(--brand-primary); overflow: hidden; }
.service-card__logo { width: 52px; height: 52px; object-fit: contain; }
.service-card__icon .svc-glyph { width: 38px; height: 38px; }
.service-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.service-card__name { font-size: 17px; font-weight: 800; color: var(--brand-primary); }
.service-card__summary { font-size: 14px; color: #4a5568; line-height: 1.6; }
.svc-glyph { color: currentColor; }
/* Mobile: one full-width card per row, larger icon, title only (no summary). */
@media (max-width: 640px) {
  .services-grid { gap: 12px; }
  .service-card { flex-basis: 100%; max-width: none; padding: 18px 20px; gap: 18px; }
  .service-card__icon { width: 76px; height: 76px; border-radius: 16px; }
  .service-card__logo { width: 62px; height: 62px; }
  .service-card__icon .svc-glyph { width: 46px; height: 46px; }
  .service-card__name { font-size: 19px; }
  .service-card__summary { display: none; }
}
.services-empty { color: #667085; font-size: 15px; margin: 10px 0; }
.service-page__head { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; }
.service-page__icon { flex: 0 0 auto; width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--brand-soft); color: var(--brand-primary); overflow: hidden; }
.service-page__logo { width: 56px; height: 56px; object-fit: contain; }
.service-page__heading { min-width: 0; }
.service-page__name { margin: 0 0 6px; font-size: clamp(22px, 4vw, 30px); font-weight: 800; color: var(--brand-primary); }
.service-page__summary { font-size: 17px; color: var(--brand-ink); font-weight: 600; margin: 0 0 14px; }
.service-page__body { color: #2b3344; line-height: 1.9; margin: 0 0 18px; }
.service-page__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 20px; padding: 0; }
.service-page__facts > div { background: var(--brand-soft); border-radius: 10px; padding: 10px 14px; }
.service-page__facts dt { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--brand-secondary); margin: 0 0 3px; }
.service-page__facts dd { margin: 0; font-weight: 700; color: var(--brand-ink); }

/* destination pages (SEO Slice D) */
.dest-code { color: #6b7185; font-weight: 700; }
.dest-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.dest-flights__title { font-size: 18px; font-weight: 800; color: var(--brand-primary); margin: 22px 0 12px; }
/* Clickable flight rows → /flights/<uuid>. Stretched-anchor pattern: a real
   link in the first cell whose ::after covers the whole row (accessible,
   keyboard-focusable, no inline JS). */
.dest-flight-row { position: relative; cursor: pointer; }
.dest-flight-row:hover td { background: rgba(36, 44, 101, 0.05); }
.dest-flight-row__link { color: var(--brand-primary); font-weight: 800; text-decoration: none; }
.dest-flight-row__link:hover { text-decoration: underline; }
.dest-flight-row__link::after { content: ''; position: absolute; inset: 0; }
.dest-page .flights-table-wrap { background: #fff; border: 1px solid var(--brand-line); border-radius: 12px; overflow: hidden; }
.dest-page .flights-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dest-page .flights-table td { padding: 11px 14px; border-bottom: 1px solid rgba(36, 44, 101, 0.08); text-align: center; }
.dest-page .flights-table tr:last-child td { border-bottom: none; }
.dest-page .num { font-weight: 800; color: var(--brand-primary); }
.dest-page .when { color: #555; white-space: nowrap; }

/* =====================================================================
   MAP (self-hosted Leaflet + OSM tiles)
   ===================================================================== */
.airport-map {
  height: 420px;
  width: 100%;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  margin: 8px 0 14px;
  overflow: hidden;
  z-index: 0;            /* keep Leaflet panes under the sticky app bar */
}
.airport-map .leaflet-container { font: inherit; }

/* Google Maps embed (map_source = 'google'). It carries .airport-map too, so it
   inherits that box — same height, border, radius and overflow clipping — and
   switching source doesn't move the page around it. Do NOT add `border: 0`
   here: this selector has the same specificity as .airport-map and comes
   later, so it would win and delete the outline. The UA's default iframe
   border is already overridden by .airport-map's own border.

   `display: block` is the one thing needed — an iframe is inline by default,
   so it sits on the text baseline and leaves a descender-sized strip of page
   background inside the rounded border. */
.airport-map--embed { display: block; }

/* =====================================================================
   Official-website notice — footer line + /official page.

   Explicit colours, not inherited: the footer line sits on the footer's
   own surface and the page text on the near-white public body, where an
   inherited colour renders invisible on several themes.
   ===================================================================== */
.appfooter__official {
  margin: 0 0 6px;
  padding: 0 clamp(12px, 3vw, 28px);
  text-align: center;
  font-size: 12.5px;
  line-height: 1.6;
  color: #d7dced;
}
.appfooter__official a { color: #ffffff; text-decoration: underline; white-space: nowrap; }

/* The canonical domain used to be a hardcoded .official-domain box. It is an
   ordinary editable `note` block now (§/official), so it inherits
   .page-block--note and this rule is gone rather than left as dead weight. */

/* Impostor domains are deliberately NOT links — see the `official` spine in
   page.php. Styled as plain monospaced text so they read as evidence, not as
   somewhere to click. */
.official-impostors { margin: 8px 0 18px; padding-inline-start: 22px; }
.official-impostors li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  color: #26303f;
  margin: 4px 0;
}

/* Permanent bilingual map label (map_label_mode = 'always').
   Drawn on TOP of the OSM tiles — it does not and cannot change the names
   OpenStreetMap itself renders into them. Arabic over English, the same order
   the app bar stacks the airport title, identical on /map and /en/map.
   Leaflet's own .leaflet-tooltip supplies the callout arrow; these rules only
   restyle the box, so the arrow keeps pointing at the marker. */
.airport-map .leaflet-tooltip.map-label-tip {
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--brand-line);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  padding: 6px 12px;
  white-space: nowrap;          /* a wrapped airport name reads as two places */
  font: inherit;
  /* Leaflet ships a text-shadow-ish default; clear it so Arabic stays crisp. */
  text-shadow: none;
}
.airport-map .leaflet-tooltip.map-label-tip::before { border-top-color: var(--brand-line); }
.map-label { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
/* Explicit colour, never inherited: this sits over map imagery, and the public
   body colour is near-white on several themes. */
.map-label__ar { font-size: 14px; font-weight: 800; color: var(--brand-primary); }
.map-label__en {
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--brand-secondary); text-transform: uppercase;
}
@media (max-width: 520px) {
  /* Long bilingual names would otherwise overhang a narrow map. */
  .airport-map .leaflet-tooltip.map-label-tip { padding: 4px 9px; max-width: 78vw; white-space: normal; }
  .map-label { text-align: center; }
  .map-label__ar { font-size: 12.5px; }
  .map-label__en { font-size: 10px; }
}
.map-fallback-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--brand-secondary); text-decoration: none;
  margin-bottom: 18px;
}
.map-fallback-link:hover { text-decoration: underline; }

/* ---- Social Media page — link grid ---- */
.social-page { margin: 8px 0 18px; }
.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.social-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--brand-primary);
  font-weight: 700;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.social-card:hover {
  border-color: var(--brand-secondary);
  box-shadow: 0 4px 14px rgba(36, 44, 101, 0.1);
  transform: translateY(-1px);
}
.social-card__icon { flex: 0 0 auto; color: var(--brand-secondary); }
.social-card__name { flex: 1; }
.social-card__ext { color: #9aa3b2; font-size: 14px; }
.social-none {
  color: #777; font-size: 14px; padding: 18px; text-align: center;
  background: rgba(36, 44, 101, 0.03);
  border-radius: 12px; border: 1px dashed var(--brand-line);
}

/* ---- CMS image + gallery slider blocks ---- */
.page-block--image { margin: 14px 0; }
.page-image__img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid var(--brand-line);
}
.page-image__caption,
.page-gallery__caption {
  margin-top: 8px; font-size: 13px; color: #667; text-align: center;
}
.page-gallery { position: relative; margin: 14px 0; }
.page-gallery__track {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
}
.page-gallery__track::-webkit-scrollbar { height: 8px; }
.page-gallery__track::-webkit-scrollbar-thumb { background: rgba(36,44,101,0.2); border-radius: 8px; }
.page-gallery__img {
  flex: 0 0 100%;
  width: 100%; height: clamp(220px, 42vw, 420px);
  object-fit: cover;
  scroll-snap-align: center;
  border-radius: 14px;
  border: 1px solid var(--brand-line);
}
.page-gallery__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-primary);
  font-size: 22px; line-height: 1;
  box-shadow: 0 2px 10px rgba(36, 44, 101, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.page-gallery__btn:hover { background: #fff; }
.page-gallery__btn--prev { inset-inline-start: 10px; }
.page-gallery__btn--next { inset-inline-end: 10px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.appfooter {
  border-top: 1px solid var(--brand-line);
  /* Solid light surface (like the app bar) so the footer stays readable
     over the navy theme's dark cinematic backdrop. */
  background: #ffffff;
  padding: 36px clamp(16px, 4vw, 48px) 22px;
  margin-top: 40px;
}
.appfooter__cols {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
}
.appfooter__title { font-size: 14px; font-weight: 800; color: var(--brand-primary); margin: 0 0 12px; }
.appfooter__title--social { margin-top: 18px; }
.appfooter__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.appfooter__links a { color: #4a5568; text-decoration: none; font-size: 14px; }
.appfooter__links a:hover { color: var(--brand-primary); text-decoration: underline; }
.appfooter__gaca { display: inline-block; color: var(--brand-secondary); font-weight: 700; text-decoration: none; font-size: 14px; }
.appfooter__gaca:hover { text-decoration: underline; }
.appfooter__socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.appfooter__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--brand-line);
  color: var(--brand-primary);
}
.appfooter__social:hover { background: var(--brand-primary); color: #fff; }
.appfooter__social svg { fill: currentColor; }
.appfooter__copy {
  max-width: 1080px; margin: 26px auto 0; padding-top: 18px;
  border-top: 1px solid var(--brand-line);
  text-align: center; font-size: 13px; color: #5a6275;
}
.appfooter__copy strong { color: var(--brand-primary); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .appbar { gap: 10px; }
  /* ---- Persistent menu button (hamburger ⇄ X), position-STABLE ----
     Absolutely pinned to the app bar's top inline-end corner. The app bar is
     sticky (always at viewport top) and this button carries a z-index ABOVE the
     full-screen overlay (.appbar__nav z:200 within the bar), so it stays in the
     EXACT same spot in both states — only the icon morphs, the button never
     moves rows/containers. Being out of flow, it also stops pushing the centered
     title/logo. It is the SINGLE open/close control (the overlay has no separate
     close button). */
  .appbar__toggle {
    display: inline-flex;
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    width: 44px; height: 44px;
    margin: 0;
    z-index: 300;
  }
  .appbar__brand { gap: 6px; }
  /* Logo follows the (shrunk) mobile banner height; fall back to 36px. */
  .appbar__logo { height: var(--appbar-logo-height, 36px); width: auto; }
  /* Cap title sizes on phones so a large desktop setting never overflows. */
  .appbar__brand-ar { font-size: min(var(--brand-ar-size, 17px), 20px); }
  .appbar__brand-en { font-size: min(var(--brand-en-size, 11px), 14px); }

  /* ---- ONE airport title on mobile (the active language only) ----
     Desktop keeps the two-line lockup (Arabic над English) exactly as before —
     these rules live inside the ≤900px block and change nothing above it.
     The page is ONE responsive document, so the server cannot know the viewport;
     both lines are emitted (each ~30 bytes) and the inactive one is removed with
     display:none, which also takes it out of the accessibility tree so a screen
     reader announces a single title. The surviving line is PROMOTED to the
     primary treatment — English must not be left at its 11px secondary size when
     it is the only title on the page. */
  /* A long airport name wraps instead of colliding with the logo or the
     hamburger, and is capped at two lines so the banner height stays stable.
     Falls back to plain wrapping where -webkit-line-clamp is unsupported. */
  .appbar__brand-ar,
  .appbar__brand-en {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Three lines, not two: the app bar is min-height (it grows), and a long
       English name like "ALEPPO INTERNATIONAL AIRPORT" needs a third line at
       320px. Clamping at two truncated it to "ALEPPO INTERNATIONAL…", which
       hides the word AIRPORT — worse than a slightly taller banner. */
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.2;
  }
  /* Drop the inactive language. (0,2,1) beats the (0,1,0) rule above, so the
     display:-webkit-box there can never resurrect it, whatever the order. */
  html[lang="ar"] .appbar__brand-en,
  html[lang="en"] .appbar__brand-ar { display: none; }

  html[lang="en"] .appbar__brand-en {
    font-size: min(var(--brand-ar-size, 17px), 20px);
    font-weight: 800;
    color: var(--brand-primary);
    letter-spacing: 0;
    margin-top: 0;
  }
}
/* Narrowest phones: English airport names are long ("ALEPPO INTERNATIONAL
   AIRPORT", "DAMASCUS INTERNATIONAL AIRPORT") and the title column is only
   ~200px once the logo and menu button take their share. A modest step down
   fits most names in two lines instead of three, so the sticky bar stays
   compact — still well above the size at which the name becomes hard to read.
   Arabic is naturally shorter and keeps its size. */
@media (max-width: 360px) {
  html[lang="en"] .appbar__brand-en {
    font-size: min(var(--brand-ar-size, 17px), 15px);
  }
}

/* =====================================================================
   MOBILE MENU (≤900px) — the same breakpoint that reveals the hamburger.
   Keep this block and the `.appbar__toggle { display: inline-flex }` rule
   above on the SAME query: they are two halves of one control. When these
   rules were (briefly) nested under the ≤360px title tweak, every phone
   wider than 360px showed the hamburger AND the full desktop nav at once,
   and pressing the button appeared to do nothing — `.appbar.is-open` had
   no rules to apply at that width.
   ===================================================================== */
@media (max-width: 900px) {
  /* ---- Open menu = ONE shared header + a scrollable nav (no overlay, no
     duplicate header) ----
     Closed: the nav (mobile menu) is simply hidden and the app bar is the
     sticky two-row banner. Open: the WHOLE app bar becomes the full-height menu
     screen — its EXISTING brand (title row + logo row) IS the header and stays
     visible at the top; this nav is the scrollable list below it. State only
     toggles the panel; the header markup is never duplicated. */
  .appbar__nav { display: none; }

  /* The app bar itself becomes the 100dvh menu screen: a flex column of
       [ real header (brand) ] + [ scrollable nav ].
     Solid background so no page content shows through; lifted above the two
     fixed top accent strips (#scroll-progress z:100, green ribbon z:1000). The
     corner toggle (position:absolute, z:300) is unchanged and stays on top; the
     body scroll-lock is handled by site.js. Horizontal insets match the closed
     bar exactly; safe-area padding is added top/bottom for notches. */
  .appbar.is-open {
    position: fixed;
    inset: 0;
    height: 100vh;            /* fallback for browsers without dvh */
    height: 100dvh;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    /* CRITICAL: override the closed bar's `align-items: center`. In this flex
       COLUMN, `center` would shrink each child (the nav) to its content width
       and centre it — which is exactly what left the menu a ~125px column.
       `stretch` makes the header + nav span the full width. */
    align-items: stretch;
    background: var(--appbar-bg);
    overflow: hidden;         /* the nav area scrolls, not the whole screen */
    border-bottom: none;
    box-shadow: none;
    padding: max(12px, env(safe-area-inset-top)) clamp(16px, 4vw, 40px)
             max(12px, env(safe-area-inset-bottom));
    gap: 0;
  }
  /* Row 1 = the real header (brand), fixed at the top; a divider below it is the
     clear visual transition into the menu. Keeps its two-row centered layout. */
  .appbar.is-open .appbar__brand {
    flex: 0 0 auto;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--brand-line);
  }
  /* Row 2 = the scrollable navigation area, filling the remaining height so the
     header never scrolls away and only the list scrolls (no nested-scroll trap). */
  .appbar.is-open .appbar__nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;            /* let the flex child shrink so it can scroll */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: 4px;
    /* subtle fade-in of the LIST only (the header stays put) */
    animation: alp-menu-in 0.18s ease both;
  }
  @keyframes alp-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* Language utility row — top of the nav area, BELOW the real header (the only
     place the language toggle lives on mobile). Hidden on desktop. */
  .appbar__mlang-row { display: flex; justify-content: flex-start; padding: 6px 0 10px; }
  .appbar__mlang { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  .appbar__mlang a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 12px;
    border: 1px solid var(--brand-line); border-radius: 10px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    color: var(--brand-ink); background: #fff;
  }
  .appbar__mlang a.is-active {
    background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
  }

  /* the outer (bar) language toggle is redundant on mobile — the language pills
     live in the open menu (the unified layout's now-empty "row 2" strip is
     collapsed in theme-unified.css, which loads after this file). */
  .appbar__side { display: none; }

  /* menu list fills the overlay; big touch rows, generous spacing */
  .appbar__menu { flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0 12px; }
  .appbar__menu > li { border-bottom: 1px solid var(--brand-line); }
  .appbar__link,
  .appbar__parent {
    display: flex; align-items: center;
    width: 100%; min-height: 52px; padding: 12px 8px;
    border-radius: 0; font-size: 16px;
    overflow-wrap: anywhere;
  }
  .appbar__link { color: var(--brand-ink); }
  .appbar__link.is-active,
  .appbar__has-sub.is-active > .appbar__parent { background: var(--brand-soft); color: var(--brand-primary); }
  /* submenu (one level): indented, subordinate typography, RTL/LTR via padding-inline.
     Flat on mobile — no rounded corners on the container or the items. */
  .appbar__submenu { padding: 0 0 8px; margin-inline-start: 12px; border-inline-start: 2px solid var(--brand-line); border-radius: 0; }
  .appbar__submenu a { min-height: 46px; display: flex; align-items: center; padding: 10px 12px; font-size: 15px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; border-radius: 0; }
  .appbar__caret { font-size: 13px; margin-inline-start: auto; }

  /* Mobile brand (default single-row layout only): airport NAME on the first
     line (centered), the logo centered on a line BELOW it. `order:-1` on the
     text lifts the title above the logo; centering the whole brand keeps it
     balanced. Unified layout has its own brand rules (theme-unified.css). */
  /* Mobile banner = two full-width rows: row 1 the airport TITLE (centered),
     row 2 the right LOGO (centered) below it. The brand spans the whole width;
     symmetric horizontal padding keeps the centered content clear of the corner
     menu button so nothing overlaps. `order:-1` lifts the title above the logo.
     (Default layout only — the unified layout has its own brand rows.) */
  .appbar:not(.appbar--unified) .appbar__brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 44px;   /* clears the 44px corner toggle on both sides */
    margin-inline: 0;
  }
  .appbar:not(.appbar--unified) .appbar__brand-text { order: -1; }
  /* Long titles wrap safely; the logo keeps its aspect ratio (see .appbar__logo). */
  .appbar:not(.appbar--unified) .appbar__brand-ar,
  .appbar:not(.appbar--unified) .appbar__brand-en { overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
  .wx__meta { display: none; }            /* keep the top bar compact on phones */
  .wx--time .wx__label { display: none; }
  .appbar__widgets { gap: 6px; }
  .page-contact__label { min-width: 0; }
}

/* =====================================================================
   MOBILE USABILITY PASS (≤768px, public chrome) — comfortable touch
   targets (~44px), readable form controls (≥16px → no iOS focus-zoom),
   and breathing room. Scoped to the shared public chrome (site.css is only
   loaded by the public pages); admin screens are untouched. Desktop is
   unchanged. Icon-only controls grow their HIT AREA, not the glyph.
   ===================================================================== */
@media (max-width: 768px) {
  /* Give the info-page card a little side breathing room so it doesn't sit
     flush to the screen edges (its text already has inner padding). */
  .page-main { margin-inline: 10px; }

  /* Footer: roomier tap targets + spacing so links aren't crowded. */
  .appfooter__links { gap: 2px; }
  .appfooter__links a,
  .appfooter__gaca,
  .page-back {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-block: 6px;
  }
  .appfooter__socials { gap: 12px; }
  .appfooter__social { width: 44px; height: 44px; }   /* icon stays small; hit area grows */

  /* FAQ / accordion rows: comfortable full-row tap target. */
  .page-accordion__q { min-height: 44px; }

  /* Gallery arrows: 44px hit area (glyph size unchanged). */
  .page-gallery__btn { width: 44px; height: 44px; }

  /* In-overlay language toggle: 44px targets. */
  .appbar__mlang a { min-width: 44px; min-height: 44px; }

  /* Public form controls: full-width, ≥16px (no iOS zoom), 44px min-height,
     comfortable spacing. Applies to CMS/contact forms rendered on public pages. */
  .page-main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .page-main select,
  .page-main textarea {
    font-size: 16px;
    min-height: 44px;
    max-width: 100%;
  }
  .page-main textarea { min-height: 96px; }
  .page-main input[type="checkbox"],
  .page-main input[type="radio"] { width: 20px; height: 20px; }

  /* Shared buttons/CTAs: comfortable minimum tap height. */
  .btn, .flights-cta, .page-card, .page-featured__link { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .appbar__nav, .appbar__toggle-bars span { transition: none !important; }
  .appbar.is-open .appbar__nav { animation: none !important; }
}

/* ---- Airlines page (cards grid) ---- */
.airlines-page { margin-top: 8px; }
.airlines-empty {
  text-align: center; color: var(--brand-ink); opacity: 0.7;
  background: var(--brand-soft); border: 1px dashed var(--brand-line);
  border-radius: 12px; padding: 22px 16px; font-size: 15px;
}
/* Centered flex wrap (not a stretch grid) so cards stay a fixed comfortable
   width and a short final row is centered rather than left-aligned. */
.airlines-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.airline-card {
  /* Fixed basis, no grow → cards never stretch awkwardly to fill the row. */
  flex: 0 1 260px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 22px 18px;
  background: var(--appbar-bg, #fff);
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(31, 42, 68, 0.05);
}
.airline-card__logo {
  width: 100%; height: 92px;
  display: flex; align-items: center; justify-content: center;
}
.airline-card__logo img {
  max-width: 100%; max-height: 92px; width: auto; height: auto; object-fit: contain;
}
.airline-card__monogram {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-primary);
  font-size: 30px; font-weight: 800;
}
.airline-card__name { font-size: 18px; font-weight: 800; color: var(--brand-ink); margin: 0; }
.airline-card__desc { font-size: 14px; color: var(--brand-ink); opacity: 0.82; line-height: 1.6; margin: 0; }
.airline-card__actions {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%;
}
.airline-card__btn {
  font: inherit; font-weight: 700; font-size: 14px;
  padding: 9px 16px; border-radius: 10px; text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
}
.airline-card__btn--flights {
  background: var(--brand-primary); color: #fff;
}
.airline-card__btn--flights:hover { opacity: 0.9; }
.airline-card__btn--site {
  background: transparent; color: var(--brand-primary);
  border: 1.5px solid var(--brand-line);
}
.airline-card__btn--site:hover { background: var(--brand-soft); }

/* =====================================================================
   FAQ — homepage subset section + dedicated /faq page app
   Shared classes so both surfaces look identical. Width matches the
   home flights section (max-width 1080). Answers may contain a small
   formatting allow-list (strong/em/a/ul/ol/li) + an optional figure.
   ===================================================================== */
.faq-section { width: 100%; max-width: 1080px; padding: 0 8px; margin: 0 auto; }
.faq-card {
  background: #fff; border: 1px solid var(--brand-line, rgba(31,42,68,.08));
  border-radius: 16px; box-shadow: 0 4px 18px rgba(31,42,68,.06); padding: 22px 24px;
}
.faq-title { font-size: 20px; font-weight: 800; margin: 0 0 14px; color: var(--brand-primary); text-align: center; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: rgba(31,42,68,.04); border-radius: 12px; padding: 2px 16px; }
.faq-q {
  cursor: pointer; font-weight: 700; color: #1f2a44; padding: 13px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '+'; font-size: 20px; font-weight: 400; opacity: .5; }
.faq-item[open] .faq-q::after { content: '\2212'; }
.faq-a { padding: 0 0 14px; color: #4a5568; line-height: 1.75; }
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a ul, .faq-a ol { margin: 0 0 10px; padding-inline-start: 22px; }
.faq-a a { color: var(--brand-primary); text-decoration: underline; }
.faq-a a:hover { text-decoration: none; }
.faq-figure { margin: 0 0 12px; }
.faq-figure img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.faq-viewall { text-align: center; margin-top: 16px; }
.faq-viewall__link,
.faq-toggle-all,
.faq-cat-select {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer;
  background: #fff; color: var(--brand-primary); border: 1.5px solid var(--brand-line, rgba(31,42,68,.16));
  text-decoration: none;
}
.faq-viewall__link:hover, .faq-toggle-all:hover { background: var(--brand-soft, rgba(36,44,101,.06)); }

/* Dedicated /faq page app (rendered by the faq_page block, hydrated by faq-page.js) */
.faq-app { width: 100%; }
.faq-app__controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.faq-search {
  flex: 1 1 260px; min-width: 0; padding: 10px 14px; font: inherit;
  border: 1.5px solid var(--brand-line, rgba(31,42,68,.18)); border-radius: 10px;
}
.faq-search:focus { outline: none; border-color: var(--brand-primary); }
.faq-app__toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.faq-cat-select__wrap { display: inline-flex; }
/* Groups always span the full container width (no side rail). */
.faq-app__body { display: block; }
.faq-app__groups { min-width: 0; }
.faq-group { margin-bottom: 26px; scroll-margin-top: 84px; }
.faq-group__title { font-size: 18px; font-weight: 800; color: var(--brand-primary); margin: 0 0 6px; }
.faq-group__desc { color: #6b7280; margin: 0 0 12px; }
.faq-empty { text-align: center; color: #6b7280; padding: 24px; }
.faq-item[hidden], .faq-group[hidden] { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (max-width: 720px) {
  .faq-card { padding: 18px 16px; }
}

/* =====================================================================
   COMING-SOON ADMIN BANNER
   Shown only when coming-soon mode is ON and a signed-in super admin /
   content manager is being served the REAL site (see §27 and
   ALP_COMING_SOON_ADMIN_BYPASS in api/instance.php). Never rendered for
   the public — anonymous visitors get the placeholder instead.
   Amber rather than a brand colour: this is a state warning, and it must
   read as "not what visitors see" on every tenant palette.
   ===================================================================== */
.cs-adminbar {
  position: relative;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  padding: 8px clamp(12px, 3vw, 28px);
  background: #fef0c7;
  color: #7a4a09;
  border-bottom: 1px solid #f0c765;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.cs-adminbar__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #b54708;
  flex: 0 0 auto;
}
.cs-adminbar__link {
  color: #7a4a09;
  font-weight: 800;
  text-decoration: underline;
  white-space: nowrap;
}
.cs-adminbar__link:hover, .cs-adminbar__link:focus-visible { color: #5c3806; }

@media print { .cs-adminbar { display: none; } }

/* =====================================================================
   .langbar — language suggestion bar (partials/site-header.php).

   HIDDEN BY DEFAULT and revealed only by `html.lang-suggest`, which
   lang-detect.js sets from the <head> before first paint when the
   visitor's browser prefers the other language. That is why the display
   switch lives here and not in JS: the bar is either in the initial
   layout or absent from it, so it never shifts the page after paint.

   It replaced the automatic first-visit language redirect (Googlebot
   rendered that redirect on every crawl and indexed the Arabic URL as
   English) — so this must stay an offer the visitor clicks, never a
   navigation that happens to them.

   Colours are neutral, not brand: the bar sits directly under the app bar
   on every tenant palette and must not read as part of it. Explicit
   colour AND background — the public body colour is near-white on several
   themes, so an inherited colour renders invisible here.
   ===================================================================== */
.langbar { display: none; }
html.lang-suggest .langbar {
  display: block;
  position: relative;
  z-index: 55;
  background: #eef2f7;
  color: #26303f;
  border-bottom: 1px solid #d3dce7;
  font-size: 13.5px;
  line-height: 1.5;
}
.langbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  padding: 8px clamp(12px, 3vw, 28px);
  text-align: center;
}
.langbar__text { color: #26303f; }
.langbar__action {
  color: var(--brand-primary);
  font-weight: 800;
  text-decoration: underline;
  white-space: nowrap;
}
.langbar__action:hover, .langbar__action:focus-visible { text-decoration: none; }
.langbar__close {
  /* Pinned to the reading END of the bar, so it lands top-right in LTR and
     top-left in RTL without a separate rule per direction. */
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: #5a6779;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.langbar__close:hover { background: #dde5ee; color: #26303f; }

@media (max-width: 560px) {
  .langbar__inner { padding-inline-end: 40px; }
}

/* Must out-specify `html.lang-suggest .langbar` (0,2,1), not just `.langbar`. */
@media print { html.lang-suggest .langbar { display: none; } }