/* ===================================================================== UNIFIED THEME — shared 3-row header ===================================================================== Loaded ONLY when the per-tenant `site_theme` setting = 'unified' (index.php + partials/page-head.php add `layout-unified` to and link this file). EVERY selector is scoped under html.layout-unified, so the default layout is byte-for-byte unchanged. The tenant PALETTE (navy / green) is inherited untouched — this file only restructures the header into three rows: Row 1 right logo · centered airport title · left logo Row 2 main menu (reading-start side) + language toggle (opposite side) Row 3 time + weather (the existing .wxbar band) The rows are kept compact so the combined header stays close to the original (app bar + weather bar) height. Flight board, footer, info pages, airline cards, widgets etc. are never touched. ===================================================================== */ /* The app bar becomes a vertical stack of rows instead of one flex row. */ html.layout-unified .appbar--unified { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 0; min-height: 0; /* the rows own their height now */ } /* Shared row wrapper. */ html.layout-unified .appbar--unified .appbar__row { display: flex; align-items: center; width: 100%; padding: 5px clamp(16px, 4vw, 40px); } /* ---------------- Row 1: logos + centered title ---------------- */ html.layout-unified .appbar--unified .appbar__row--brand { padding-top: 7px; padding-bottom: 5px; } html.layout-unified .ubrand { flex: 1 1 auto; display: grid; /* Equal 1fr side columns → the title is ALWAYS centered, whether 0, 1, or 2 logos are shown (an empty slot still reserves its column). */ grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: clamp(10px, 3vw, 26px); width: 100%; text-decoration: none; /* Keep the two logo slots physically fixed (left slot on the left, right slot on the right) in BOTH languages — logos aren't directional. The title keeps its own script shaping and is centered via text-align. */ direction: ltr; } html.layout-unified .ubrand__slot { display: flex; align-items: center; min-width: 0; } html.layout-unified .ubrand__slot--left { justify-content: flex-start; } html.layout-unified .ubrand__slot--right { justify-content: flex-end; } html.layout-unified .ubrand__logo { height: var(--appbar-logo-height, 44px); width: auto; max-width: 100%; object-fit: contain; display: block; border-radius: 8px; } html.layout-unified .ubrand__title { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; line-height: 1.12; } /* The two title lines reuse the shared brand tokens (.appbar__brand-ar / .appbar__brand-en, already styled + admin-sized in site.css). */ /* ---------------- Row 2: menu + language toggle ---------------- */ html.layout-unified .appbar--unified .appbar__row--nav { justify-content: space-between; /* menu at start, language toggle at end */ gap: 6px 18px; border-top: 1px solid var(--brand-line); padding-top: 2px; padding-bottom: 2px; flex-wrap: wrap; } html.layout-unified .appbar--unified .appbar__nav { order: 0; flex: 0 1 auto; } html.layout-unified .appbar--unified .appbar__side { order: 0; flex: 0 0 auto; margin: 0; } /* The menu hugs the reading-start edge (RTL → right, LTR → left); the language toggle sits at the opposite end via space-between. Both follow . */ html.layout-unified .appbar--unified .appbar__menu { justify-content: flex-start; flex-wrap: wrap; } /* ---------------- Row 3: time + weather ---------------- */ html.layout-unified .wxbar { border-top: 1px solid var(--brand-line); } html.layout-unified .wxbar__inner { padding-top: 8px; padding-bottom: 8px; } /* ---------------- Mobile (≤900px) ---------------- The hamburger (already surfaced by the global mobile rule) lives in row 1 next to the logos/title; the menu collapses into a drawer. The nav keeps its .appbar / .appbar__nav classes, so the existing global mobile collapse rules in site.css (.appbar.is-open .appbar__nav { max-height }) drive it — we only need to lay row 1 out as [brand | hamburger]. */ @media (max-width: 900px) { /* The menu button is absolutely pinned to the app-bar corner (site.css), so the brand row is a single full-width centered column; reserve the corner so the content never sits under the button. */ html.layout-unified .appbar--unified .appbar__row--brand { display: block; padding-inline: 46px; } html.layout-unified .appbar--unified .appbar__toggle { display: inline-flex; } /* Mobile banner (unified) matches the two-row spec: row 1 = airport TITLE, row 2 = the RIGHT logo only (the left logo is hidden on mobile). Centered. If the right logo is disabled/absent its slot is empty and collapses. */ html.layout-unified .ubrand { display: flex; flex-direction: column; align-items: center; gap: 6px; } html.layout-unified .ubrand__title { order: -1; } html.layout-unified .ubrand__slot--left { display: none; } html.layout-unified .ubrand__slot--right { justify-content: center; } /* Cap logo height on phones so a large desktop banner setting can't blow up the logo row; keep aspect ratio. */ html.layout-unified .ubrand__logo { height: var(--appbar-logo-height, 36px); max-height: 44px; width: auto; } /* On mobile the language toggle moves inside the open menu, so unified "row 2" is empty when closed — collapse its border + padding so it leaves no stray strip under row 1. */ html.layout-unified .appbar--unified .appbar__row--nav { border-top: 0; padding-top: 0; padding-bottom: 0; min-height: 0; gap: 0; } /* Open menu (unified): the app bar is the 100dvh flex column (site.css). Here the header is the brand ROW (row 1) and the nav ROW (row 2) must fill the remaining height so the nested nav can scroll — mirroring the default layout's shared-header behavior. The brand row is unchanged (title + right logo); a divider separates it from the menu. */ html.layout-unified .appbar--unified.is-open .appbar__row--brand { flex: 0 0 auto; padding-bottom: 10px; border-bottom: 1px solid var(--brand-line); } html.layout-unified .appbar--unified.is-open .appbar__row--nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; /* CRITICAL: the base `.appbar__row { align-items: center }` would otherwise shrink the nav to its content width and centre it (the ~125px narrow menu bug) — force full-width children in this open flex column. Match the default layout's sensible side padding (unified pads rows, not the bar). */ align-items: stretch; width: 100%; padding-inline: clamp(16px, 4vw, 40px); } html.layout-unified .appbar--unified.is-open .appbar__nav { flex: 1 1 auto; min-height: 0; width: 100%; } }