/* =====================================================================
   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);
}

/* ---- 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: 2px;
}

/* ---- 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;
  font-weight: 700;
  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; }

/* ---- 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; }

.wxbar__divider { width: 1px; align-self: stretch; background: var(--brand-line); margin: 4px 0; }

.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) {
  /* Stacked on phones: hide the vertical divider, center each widget line. */
  .wxbar__divider { display: none; }
  .wxbar__weather { width: 100%; justify-content: center; }
}
@media (max-width: 460px) {
  .wxbar__chips { 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__eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--brand-secondary);
  margin-bottom: 8px;
}
.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; }

.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; }

/* =====================================================================
   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; }
.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; }

/* WiFi QR figure — admin-supplied image on the Airport WiFi page */
.wifi-qr {
  margin: 8px 0 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 16px;
}
.wifi-qr__img {
  width: var(--wifi-qr-size, 180px); height: auto; max-width: 100%;
  border-radius: 10px;
}
.wifi-qr__caption {
  font-weight: 700; color: var(--brand-secondary); text-align: center;
}

/* ---- 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; }
  .appbar__toggle { display: inline-flex; }
  .appbar__brand { margin-inline-end: auto; gap: 9px; }
  /* 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); }

  /* nav becomes a full-width collapsible drawer below the bar */
  .appbar__nav {
    order: 5;
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .appbar.is-open .appbar__nav { max-height: 70vh; overflow: auto; }
  .appbar__menu { flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0; }
  .appbar__link { display: block; padding: 12px 10px; border-radius: 0; }

  .appbar__side { order: 4; margin-inline-start: auto; }
}

@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; }
}

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