/* =============================================================================
   HEADER GEOMETRY - one logo size and one pill inset, every page, both states
   -----------------------------------------------------------------------------
   The owner's 18 Sep 2026 rule: ONE logo size everywhere, rest or scrolled,
   any page, any width, and large enough to read. The value lives in the token
   file as --header-logo-height (72px since 22 Sep 2026, when the owner
   authorised a larger value for Website Review V3 slide 2-01); this file only
   applies it, so the one size has one name. The earlier rest/scrolled clamp
   pair is retired and its three tokens are deleted from the token file. */
#hd { --logo-h: var(--header-logo-height); }
#hd.scrolled { --logo-h: var(--header-logo-height); }
#hd .burger { margin: 0; }
@media (min-width: 1281px) {
  #hd .menu {
    gap: var(--header-menu-gap);
    flex: 1 1 auto;
    justify-content: center;
  }
  #hd .menu a { font-size: var(--type-control); }
  #hd .nav-disclosure > summary { padding-inline: var(--header-disclosure-padding); }
  /* A plain link takes the disclosure's inset too, so every visible gap in
     the bar is one figure: without it, gaps measured 32, 26 and 20px on the
     Eskan header, 24 Sep 2026. */
  #hd .menu > a.nav-link { padding-inline: var(--header-disclosure-padding); }
}
/* THE PILL'S INSET IS ONE FIGURE ON ALL FOUR SIDES, 21 Sep 2026.
   It used to be --hd-pad on every side, which is right for the logo and wrong
   for the contact button: measured at 1600, the pill stood 80px tall and the
   40px button sat 20px clear above and below but only 8px clear of the pill's
   end, so the one control the eye lands on was the one sitting unevenly. The
   inline inset now matches that vertical clearance. This file is where the
   value belongs rather than the three header stylesheets - it loads after all
   of them and is the rule that actually wins. */
#hd > .nav {
  padding-block: var(--hd-pad);
  padding-inline: var(--nav-pill-inset);
  gap: var(--header-nav-gap);
}

/* And the button comes down to the same figure. It carried 28px, which made
   it the widest control in the bar by a distance - the "too big" half of the
   same instruction. */
#hd .nav-cta {
  padding-inline: var(--nav-pill-inset);
}
#hd #navLogo {
  min-inline-size: 0;
  height: var(--logo-h);
}
@media (min-width: 561px) and (max-width: 1280px) {
  #hd #navLogo { height: var(--logo-h); }
}
@media (max-width: 560px) {
  #hd > .nav { padding: var(--header-nav-mobile-padding); }
}
@media (max-width: 420px) {
  #hd > .nav { gap: var(--header-nav-gap-small); }
}

/* The drawer owns the chrome while open; the underlying bar must not paint. */
body.menu-open #hd .nav::before,
body.menu-open #hd > .nav > .logo,
body.menu-open #hd > .nav > .nav-actions {
  visibility: hidden;
  pointer-events: none;
}

/* =============================================================================
   NAV CONTROLS - the icon controls in the header bar and in the drawer
   -----------------------------------------------------------------------------
   ONE FAMILY, ONE DEFINITION, EVERY PAGE. This file exists because the same
   four controls sat in four different shapes depending on which stylesheet
   happened to own them:

     .nav-search        44x44, radius var(--r), no border, glyph 1rem-1.25rem
     .burger            44x44, radius 0, three <span> bars 24-26px wide
     .menu-close        44x44, radius 0, a 1px --line box around the glyph
     .nav-icon--*       present on the two homepages, absent on the other 37

   Nothing errored. The bar simply read as three unrelated buttons - one
   rounded, one bare, one boxed - and the drawer's close control read as a
   different product from the burger that opened it. That is what a design
   system exists to prevent, so the family is stated once here rather than
   three times across sdeira-v2.css, sdeira-v2-en.css and sdeira-subpage.css.

   WHY THIS FILE LOADS LAST. Every other shared sheet loads before the page's
   own so a page can tune it. This one is the opposite case: the whole point is
   that a page CANNOT tune it, because a per-page override is exactly how the
   three shapes above came to exist. It is loaded after the page sheet on all
   43 pages that carry a header, and it declares only this family - it cannot
   reach anything else.

   EVERY VALUE IS A TOKEN. The 44px target is WCAG 2.5.8 and is the one number
   here that is not a custom property; it is stated as a literal in
   assets/css/sdeira-search.css too, with the same reasoning.
   ========================================================================== */

/* ---- 1. The controls themselves -------------------------------------------
   Geometry only. `display` is deliberately NOT set: .burger is display:none
   above the drawer breakpoint and each page's own sheet decides where that is
   (1280 on the homepages and the sub-pages, and the two microsites are not in
   this family at all). Setting it here would put a burger on every desktop. */
/* ---- 0. Shared header CTA --------------------------------------------------
   The CTA belongs to the header control family, not to the homepage sheet.
   Keeping the wipe here gives the homepage and generated sub-pages one
   entrance and hover treatment despite their different page stylesheets. */
.nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--accent-fill);
  color: var(--brand-white);
  border-color: var(--accent-fill);
  font-weight: 800;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.nav-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px -40%;
  background: var(--surface-brand-deep);
  clip-path: polygon(78% 0, 0 0, 22% 100%, 100% 100%);
  transform: translate3d(-78%, 0, 0);
  transition: transform var(--dur-slow) var(--ease-out) 55ms;
  pointer-events: none;
}

.nav-cta:is(:hover, :focus-visible, :active) {
  background: var(--accent-fill);
  color: var(--brand-white);
  border-color: var(--accent-fill);
}

.nav-cta:is(:hover, :focus-visible, :active)::before {
  transform: none;
}

/* The same component mirrors only the travel direction for RTL. The stripe
   geometry stays physically unchanged, while the reading-start edge moves. */
[dir="rtl"] .nav-cta::before {
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  transform: translate3d(78%, 0, 0);
}

[dir="rtl"] .nav-cta:is(:hover, :focus-visible, :active)::before {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta,
  .nav-cta::before {
    transition: none;
  }
}

:is(.nav-search,
    .nav-icon--search,
    .nav-icon--accessibility,
    .burger,
    .menu-close) {
  align-items: center;
  justify-content: center;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  min-inline-size: 44px;
  min-block-size: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

/* The glyph, at the system's control size. Stated on the family rather than
   left to the .icon-control role class, because .burger and .menu-close used
   to be drawn from bare <span> bars and a page that still carries that markup
   would otherwise render an empty box. */
:is(.nav-search,
    .nav-icon--search,
    .nav-icon--accessibility,
    .burger,
    .menu-close) > i.ph {
  font-size: var(--icon-control);
  line-height: 1;
}

/* ---- 2. On the bar --------------------------------------------------------
   The bar is always white now (Liwa migration F1/F2 - a full-width white
   strip from first paint on every page), so the resting ink is the blue-grey
   --muted tone the reference uses, never white. The hover is a tone step,
   never a colour the token file does not have. Ported from the reference
   sdeira-nav-controls.css. */
:is(.nav-search, .nav-icon--search, .nav-icon--accessibility, .burger) {
  color: var(--muted);
  cursor: pointer;
}

:is(.nav-search, .burger, .lang):is(:hover, :focus-visible) {
  /* --accent-strong, not --accent-text: see sdeira-subpage.css's .lang hover
     for why the solid-fill ink role fails on this pale wash background. */
  color: var(--accent-strong);
  background-color: var(--accent-wash);
}

/* Past the threshold the bar is the floating glass pill - still light, so the
   ink stays the same muted tone; there is no white state to swap away from.
   The reference carries no scrolled override here for that reason. */

/* THE TWO MARKERS ARE NOT CONTROLS. .nav-icon--search on the Arabic side has
   no index and no results page to open; .nav-icon--accessibility has no panel
   behind it on either side. They take the family's geometry and colour so the
   row is even, and pointer-events: none so neither answers a pointer it cannot
   serve. Promoting either to a real control is the deletion of one line here
   plus a <span> becoming a <button> in the partial. */
:is(.nav-icon--search, .nav-icon--accessibility) {
  pointer-events: none;
  /* AND THEY STAY IN THE BAR AT EVERY WIDTH. They borrow .lang's class for its
     geometry, so `.nav-actions > .lang { display: none }` below the drawer
     breakpoint took them with it: on the 32 generated pages the accessibility
     marker was present at 1281 and gone at 1280, measured 0x0, with nothing in
     the console. The language control has somewhere to go when the bar
     collapses - its drawer row - and swapping it for a globe icon on a phone
     buys nothing. These two are icons in both places by design. */
}

/* Written with the child combinator to MATCH the specificity of the rule it
   has to beat - `.nav-actions > .lang { display: none }`, two classes. A bare
   `:is(.nav-icon--search, .nav-icon--accessibility)` is one class and loses
   however late this file loads, which is exactly what it did: measured 0x0 at
   360 and 897 on all 37 sub-pages while the two homepages showed 44x44.
   Loading last is not the same as winning. */
.nav-actions > :is(.nav-icon--search, .nav-icon--accessibility) {
  display: inline-flex;
}

/* WHILE THE DRAWER IS OPEN THE BAR'S ICONS STAND DOWN. The burger already did
   this - `body.menu-open .burger { opacity: 0 }` in each chrome sheet - and the
   rest of the row did not, which only showed up on the RTL pages: the drawer
   opens on the right in both directions, so in Arabic it leaves the icon group
   on the left exposed over the backdrop and the visitor sees a bar search and
   a drawer search at the same moment. Same treatment as the burger, extended to
   the row it belongs to. */
body.menu-open
  :is(.nav-search, .nav-icon--search, .nav-icon--accessibility) {
  opacity: 0;
  pointer-events: none;
}

/* ---- 3. The drawer's close control ----------------------------------------
   It sits on the drawer's light ground, not on the bar, so its ink is the page
   ink and its hover is the accent wash - the same pair every other control on
   a light surface uses. The 1px --line box it used to carry is gone: the
   system separates by tone, and a boxed X beside a bare burger was the single
   loudest inconsistency in the chrome. */
/* The one control in this family that CAN take a display here: .menu-head is
   display: none above the drawer breakpoint in all three chrome sheets, so the
   close control is hidden by its parent rather than by its own rule and an
   unconditional value cannot leak an X onto a desktop bar. */
.menu-close {
  display: inline-flex;
  color: var(--ink);
  cursor: pointer;
}

.menu-close:is(:hover, :focus-visible) {
  color: var(--accent-strong);
  background-color: var(--accent-wash);
}

/* ---- 4. Focus ------------------------------------------------------------- */
:is(.nav-search, .burger, .menu-close):focus-visible {
  outline: 3px solid var(--brand-razeen);
  outline-offset: 2px;
}

/* ---- 5. The same controls, in the drawer ----------------------------------
   THE BAR'S ICONS MUST NOT DISAPPEAR WHEN THE BAR COLLAPSES. Below the drawer
   breakpoint the language control moves into .menu-mobile-actions and the rest
   of the bar's icons were simply dropped - so search and the accessibility
   marker existed on desktop and nowhere on a phone, which is the viewport that
   needs them most.

   They are rows here, not a strip of 44px squares: the drawer is a list and a
   row carries a label, which is also what makes the target comfortably larger
   than the minimum. The shape is .menu-lang's own, stated once for all three
   so the block cannot drift row to row. */
.menu.open :is(.menu-lang, .menu-search, .menu-a11y) {
  display: flex;
  inline-size: 100%;
  min-block-size: 48px;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-inline: 4px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--charcoal);
  font-size: var(--type-control);
  font-weight: 700;
  text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.menu.open :is(.menu-lang, .menu-search, .menu-a11y) > i.ph {
  flex: 0 0 auto;
  font-size: var(--icon-control);
  line-height: 1;
}

/* An interactive row answers the pointer. The two markers do not - .menu-a11y
   on every page, and .menu-search--marker on the Arabic side where the row is
   the twin of the bar's placeholder rather than a control. Same reasoning as
   the bar, same single line to delete when there is something to open. */
.menu.open :is(.menu-lang, .menu-search:not(.menu-search--marker)):is(:hover, :focus-visible) {
  background-color: var(--accent-wash);
  color: var(--accent-text);
}

.menu.open :is(.menu-a11y, .menu-search--marker) {
  pointer-events: none;
}

.menu.open :is(.menu-lang, .menu-search):focus-visible {
  outline: 3px solid var(--brand-razeen);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  :is(.nav-search,
      .nav-icon--search,
      .nav-icon--accessibility,
      .burger,
      .menu-close,
      .menu-lang,
      .menu-search,
      .menu-a11y) {
    transition: none;
  }
}