/* ===================================================================== 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) { html.layout-unified .appbar--unified .appbar__row--brand { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; } html.layout-unified .appbar--unified .appbar__toggle { display: inline-flex; } /* Mobile brand layout: airport TITLE on the first row (centered), then both logos centered together on a second row below it. Re-slotting via grid areas keeps the desktop 3-column (logo · title · logo) layout untouched. */ html.layout-unified .ubrand { grid-template-columns: auto auto; grid-template-areas: "title title" "logoleft logoright"; justify-content: center; align-items: center; column-gap: 14px; row-gap: 0; } html.layout-unified .ubrand__title { grid-area: title; } html.layout-unified .ubrand__slot--left { grid-area: logoleft; justify-content: flex-end; } html.layout-unified .ubrand__slot--right { grid-area: logoright; justify-content: flex-start; } /* With two auto columns centered as a group: two logos sit balanced side by side; one logo (the other slot is empty / 0-width) still centers cleanly. */ html.layout-unified .ubrand--has-logos { row-gap: 6px; } /* No logos at all → drop the empty second row entirely. */ html.layout-unified .ubrand:not(.ubrand--has-logos) .ubrand__slot { display: none; } /* Cap logo height on phones so a large desktop banner setting can't blow up the logos row. */ html.layout-unified .ubrand__logo { height: var(--appbar-logo-height, 36px); max-height: 44px; } }