/* ==========================================================================
   HOODEL shared header — styles for components/shared/header.php.
   Loaded by EVERY public page that renders the shared header (all five
   homepages and every internal page); body carries .hoodel-shared-header.
   Extracted 2026-10-02 from hoodel-home2.css section 3/4 (header, mega
   menus, dark-mode header, theme toggle) and merged with the former
   header-languages.css (language selector, last section below), so the
   header costs one stylesheet everywhere without raising any page's
   render-blocking stylesheet count. Rules keep their original order and
   specificity; `body.hoodel-home2-page` became `body.hoodel-shared-header`.
   Theme: :root[data-theme] from the shared hoodel_theme preference.
   ========================================================================== */

/* ---------- Tokens (container, gutter, spacing, header height) ---------- */
:root{
  --container-max:1440px;
  --gutter:clamp(18px,3.2vw,40px);

  /* spacing scale -- also root-scoped: the Header/Footer overrides below
     (nav gaps, logo inset, mega menu) need these outside <main> too. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:40px; --sp-8:48px; --sp-9:64px; --sp-10:80px;
  --sp-11:96px; --sp-12:120px;

  /* Real Header height, kept in one place (and genuinely :root-scoped,
     unlike the tokens below which only resolve inside <main
     class="hoodel-home2">) so JS reading it via
     getComputedStyle(document.documentElement) -- needed for the floating
     CTA's scroll-position math, which runs against html/body, not main --
     actually sees it. */
  --h2-header-h:96px;
}

/* ---------- Language-aware physical Header composition ----------
   fa.css forces `nav` and `.navlinks` to `direction:ltr` sitewide (its own
   comment: "Preserve the approved visual composition") -- which keeps the
   physical layout LTR (logo left, nav right) even on this RTL page. That
   was a deliberate prior choice, but the requirement now is the opposite:
   physical composition must actually follow the page's own direction, not
   stay fixed. Keyed off `html[dir]` rather than hardcoded for this one
   page, so the same rule is correct if this stylesheet is ever reused on
   a genuinely `dir="ltr"` page (only the `dir="rtl"` branch is live/
   testable today -- there is no English/Russian/Turkish index2 prototype
   to render against, and this task does not create one). RTL: brand
   (logo+language) renders at the physical right, nav group at the
   physical left, and -- because `.navlinks` gets the same treatment --
   its own first (highest-priority) item begins at the right edge of that
   nav group and cascades left, not just the outer two groups swapping. */
html[dir="rtl"] body.hoodel-shared-header header:where(#top) nav,
html[dir="rtl"] body.hoodel-shared-header .navlinks{direction:rtl}
html[dir="ltr"] body.hoodel-shared-header header:where(#top) nav,
html[dir="ltr"] body.hoodel-shared-header .navlinks{direction:ltr}

/* Moderate height increase for real breathing room. Also transitions down
   to a compact state on scroll (body.is-scrolled, set by
   hoodel-home2.js) -- one coherent Header state system rather than a
   single fixed size, per the "top state / scrolled state" requirement.
   Mega/dropdown `top` tracks whichever height is currently active so
   they always sit flush under the Header, not the wrong one for the
   current state. */
header:where(#top){height:96px;transition:height .22s ease}
body.is-scrolled header:where(#top){height:68px}
body.is-scrolled{--h2-header-h:68px}
/* `transition` is a single cascaded property, not additive across rules --
   redeclaring it here without repeating the frozen opacity/transform/
   visibility list would silently cancel the Mega Menu's own open/close
   fade. All four are listed together so both keep working. */
.mega{top:96px;transition:opacity .16s ease,transform .16s ease,visibility .16s,top .22s ease}
.dropdown{top:95px;transition:opacity .16s ease,transform .16s ease,visibility .16s,top .22s ease}
body.is-scrolled .mega{top:68px}
body.is-scrolled .dropdown{top:67px}

/* Intentional width hierarchy for the three Mega Menus hoodel-home2.js
   upgrades from simple dropdowns (Solutions, Industries, Company) --
   Capabilities keeps its own unmodified, full-width 5-column .mega as
   the largest/widest reference. Same shared border/shadow/radius/
   typography system throughout (inherited from the base .mega/.mega-intro/
   .mega-col rules, untouched); only width and column count differ, so
   all four still read as one designed system rather than unrelated
   panels. Intro stays the first grid column in both modifiers, exactly
   like Capabilities' own -- which is what already puts it at the
   physical RIGHT under this page's dir="rtl" (CSS Grid places the first
   explicit column at the inline-start edge, i.e. the real reading
   direction, not just a text-align flip) without any extra RTL-specific
   rule needed here. */
/* body.hoodel-shared-header .mega{width:...} (below, the RTL/shared-container width
   fix) has higher specificity than a bare .mega--medium/.mega--compact
   class and would otherwise win and force all three width variants back
   to the same 880px -- confirmed live. Matching that same
   `body.hoodel-shared-header .mega` prefix here (plus the modifier class) beats it for
   JUST width/grid-template-columns while everything else that rule sets
   (left anchor, direction, radius, shadow, reveal origin) still cascades
   from it untouched, so the two narrower menus stay part of the exact
   same visual system. */
body.hoodel-shared-header .mega.mega--medium{
  width:min(760px,calc(100vw - 44px));
  grid-template-columns:minmax(240px,1.15fr) repeat(2,minmax(0,1fr));
}
body.hoodel-shared-header .mega.mega--compact{
  width:min(520px,calc(100vw - 44px));
  grid-template-columns:minmax(210px,1.1fr) minmax(0,1fr);
}
.navlinks{gap:var(--sp-6);font-size:var(--fs-nav)}
.navtrigger{font-size:var(--fs-nav)}
/* Nav/UI weight normalization: the shared core stylesheet's own cascade
   (outside our control here) lands these on arbitrary weights (650/600)
   rather than this page's deliberate 400/500/600/700 scale. Vazirmatn is
   already the correct family for these (patched by fa.css); only the
   weight needs correcting, at a specificity that reliably wins here.
   Literal 500 rather than var(--fw-medium): this header markup sits
   OUTSIDE the .hoodel-home2 subtree (it's a separate include loaded
   before <main>), so the token custom property isn't in scope here and
   silently fails to resolve, which is also why the pre-existing .btn
   rule just below never actually applied its intended weight either. */
.navlinks a:not(.btn),
.navtrigger{font-weight:500 !important}
.navlinks .btn{font-weight:500 !important}
/* Compact Header state: the CTA shrinks in step with everything else
   instead of staying its full-height size and reading as an oversized
   rectangle bolted onto a now-smaller row. */
body.is-scrolled .navlinks .btn{min-height:36px;padding:0 var(--sp-4)}
/* The Header's own consultation CTA is replaced (moved out, not hidden --
   hoodel-home2.js) by the Dark/Light theme control, so it no longer sits
   in the Header on THIS page at all; the consultation CTA itself now lives
   only in the Hero, the floating mid-scroll state, and the closing
   section (see .h2-cta-glass below). */
@media(max-width:960px){
  header:where(#top){height:88px;overflow:visible}
  .navlinks{top:88px;max-height:calc(100vh - 88px)}
  :root{--h2-header-h:88px}
}
@media(max-width:560px){
  header:where(#top){height:80px}
  :root{--h2-header-h:80px}
  .navlinks{top:80px;max-height:calc(100vh - 80px)}
}


/* Vertical centering fix for the taller Header: `nav{height:100%}` (frozen
   core.css) can only resolve against a parent with a DEFINITE height, and
   `.navwrap` (also frozen, plain `position:relative`, no height) never had
   one -- so `nav` was collapsing to its own content height and sitting at
   the natural top of the box, with the Header's extra height becoming
   dead space below it rather than being distributed around it. Stretching
   navwrap itself to the Header's full height and centering `nav` inside
   IT achieves real vertical centering without editing nav's own frozen
   alignment rule. */
/* `nav` sizes to its own content (brand-stack + navlinks) by default, so
   navwrap's flex-start alignment was hugging that whole content-sized box
   to one side (RTL default = right) -- squeezing BOTH brand-stack and
   navlinks into the header's right portion instead of letting nav's own
   `justify-content:space-between` spread them across the full width.
   `width:100%` on nav is what actually gives that space-between rule
   something to distribute. */
.navwrap{height:100%;display:flex;align-items:center}
header:where(#top) nav{width:100%}

/* Header breathing room: logo / nav / utility controls read as
   deliberate groups sharing one baseline, both vertically centered in
   the taller Header (the theme toggle no longer lives in here, so
   nothing needs to be pinned aside to make room for it). */
.navlinks{gap:var(--sp-7)}
.logo{margin-inline-end:var(--sp-6)}
/* .navlinks has its own explicit height (.navitem{height:64px}), so it
   doesn't stretch and nav's align-items:center centers it correctly.
   .brand-stack has no explicit height, so its default align-self:stretch
   fills the full (now-real, since .navwrap actually has a height) nav
   height, and its own content then renders pinned to the top of that
   stretched box -- logo/language looked top-anchored while nav looked
   centered. align-self:center makes it size to its own content and
   center as a unit too, so both groups share the same baseline. */
.brand-stack{align-self:center}

/* ---------- Mega menu: true RTL + shared-container width ----------
   Two independent bugs, both from the shared fa.css patch that forces
   .mega to `direction:ltr` while re-forcing `direction:rtl` only on the
   text INSIDE each column: the grid's own column order stayed mirrored
   to LTR (the intro panel rendering on the visual left, i.e. the
   reading-END side in RTL, instead of the reading-START side), and the
   panel's width/position used a hardcoded 44px inset instead of this
   page's shared container -- both fixed here, scoped to this page only,
   without editing the frozen shared stylesheets. */
/* A real Mega Menu, but no longer spanning the whole shared container --
   at full container width it reached under the Hero headline on the
   right (confirmed by inspecting its real rendered box against the H1's).
   Since the nav group itself now lives in the Header's left portion, the
   panel anchors to the same left gutter instead of centering across the
   full viewport, so it opens directly under the navigation it belongs to
   and never reaches the right-side headline/CTA zone. */
body.hoodel-shared-header .mega{
  left:auto;
  inset-inline-start:var(--gutter);
  /* Capabilities' width reference: the old production /fa/ page's own
     Mega Menu, inspected live in real Chromium -- 1360px wide (its intro
     column ~348px, each of its 4 link columns ~252px, i.e. exactly core
     .mega's own 1.38fr:1fr:1fr:1fr:1fr ratio, just starved of room at
     880px). Reusing this page's own content-grid tokens (--container-max,
     --gutter -- the same ones .wrap uses for the Hero/every section)
     lands at the identical 1360px at this page's own reference viewport,
     so the scale match isn't a coincidence: it's the same "full content
     width, inside the page's real gutters" geometry the old page used,
     expressed in the new Header's own token system instead of a
     hand-picked number. (Solutions/Industries/Company keep their own
     narrower mega--medium/mega--compact widths, overridden separately
     below with higher specificity -- this change only affects
     Capabilities, which carries neither modifier class.) */
  width:min(var(--container-max),calc(100vw - 2 * var(--gutter)));
  /* Same restrained surface language as the simple dropdowns now use --
     was a near-flat 6px radius on two corners only and a heavier 50px
     shadow, reading as a distinct, heavier component instead of the same
     system. */
  border-radius:16px;
  box-shadow:0 20px 48px rgba(15,25,45,.14);
  /* Reveal settles from the reading-start (right) corner of the panel --
     the RTL equivalent of the conventional top-left reveal a LTR mega
     menu would use. */
  transform-origin:top right;
  transform:translateY(-6px) scale(.99);
}
html[dir="ltr"] body.hoodel-shared-header .mega{transform-origin:top left}
.has-mega.open .mega{transform:translateY(0) scale(1)}
/* Interaction model rebuild: the frozen core stylesheet opens these on
   plain CSS :hover, with no JS anywhere coordinating between triggers --
   nothing prevented two panels from both being visible at once. A single
   controller (hoodel-home2.js) now owns opening/closing exclusively via
   .open; hover-triggered display is disabled here so that controller is
   the only way a panel becomes visible, eliminating the dual-open case
   structurally rather than patching around it. */
/* :not(.open) is load-bearing: without it, this rule's higher specificity
   beats the frozen .has-mega.open .mega{opacity:1} rule whenever the
   mouse is ALSO still hovering the trigger -- which it is throughout the
   entire real hover interaction, since the JS controller adds .open
   without the mouse ever leaving. That fought its own .open state and
   silently kept the panel invisible no matter what -- confirmed by
   forcing .open via script and finding opacity still computed to 0. */
body.hoodel-shared-header .has-mega:hover:not(.open) .mega{opacity:0;visibility:hidden;pointer-events:none}
.mega-intro{border-inline-end:1px solid var(--line);border-right:0}
.mega-col{border-inline-end:1px solid #edf3f8;border-right:0}
.mega-col:last-child{border-inline-end:0}

/* ---------- Simple flyout submenus (راهکارها/صنایع/شرکت): true RTL ----------
   These were still anchored with a physical `left:-18px`, a leftover from
   the same LTR-authored positioning system the main .mega had. .dropdown
   already carries `direction:rtl` (fa.css's own Persian-text patch), so a
   logical inset here resolves against ITS OWN direction, not the parent
   nav's -- inset-inline-end on an RTL element is the physical right edge,
   correctly anchoring the flyout to its trigger's reading-start side and
   letting it extend toward reading-end (left), matching the Mega Menu's
   own reading-start-anchored behavior one level up. Reveal now settles
   from that same top-right corner instead of a plain directionless fade. */
.dropdown{
  left:auto;
  inset-inline-end:-18px;
  /* Frozen core.css never gives this a radius/refined shadow at all
     (sharp 0px corners, flat 34px blur) -- reads as a raw generic
     rectangle. Matched to the same restrained surface language as the
     Mega Menu panel: soft radius, closer/quieter shadow, a hair more
     internal breathing room. */
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 12px 32px rgba(15,25,45,.12);
  transform-origin:top right;
  transform:translateY(-4px) scale(.98);
}
.has-dropdown.open .dropdown{transform:translateY(0) scale(1)}
body.hoodel-shared-header .has-dropdown:hover:not(.open) .dropdown{opacity:0;visibility:hidden;pointer-events:none}

/* ---------- Mega menu internal spacing/typography ----------
   Link rows were 9-10.5px with 5-6px vertical padding -- cramped well
   below this page's own UI type scale. Brought up to the same Vazirmatn
   500 the rest of the page's nav/UI uses, with taller rows and a small
   hover shift instead of relying on more borders/shadows for hierarchy. */
body.hoodel-shared-header .mega-title{
  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  margin-bottom:16px;
}
body.hoodel-shared-header .mega-col a,
body.hoodel-shared-header .mega-col .menu-label{
  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;
  font-size:14px;
  font-weight:500;
  padding:9px 2px;
  line-height:1.5;
  border-radius:6px;
  transition:color .18s ease,padding-inline-start .18s ease;
}
body.hoodel-shared-header .mega-col .menu-label{font-size:12.5px}
body.hoodel-shared-header .mega-col a:hover{
  color:#1264d7;
  padding-inline-start:6px;
}
body.hoodel-shared-header .mega-intro-title{
  font-family:"IBMPlexArabic","Vazirmatn",Tahoma,sans-serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:normal;
}
body.hoodel-shared-header .mega-intro p{font-family:"Vazirmatn",Tahoma,Arial,sans-serif;font-size:13.5px;line-height:1.75}
body.hoodel-shared-header .mega-link{font-family:"Vazirmatn",Tahoma,Arial,sans-serif;font-size:13px;font-weight:500}

/* Header dark-mode response (audit fix) — the toggle only exists on this
   page, so this is scoped here rather than in the shared hoodel-core.css;
   [data-theme="dark"] is never set on production pages, making this
   block fully inert there. Footer is intentionally left as-is: it is
   already permanently dark, which is the approved cinematic treatment
   in both themes, not a bug. */
:root[data-theme="dark"] header:where(#top){
  background:rgba(6,14,28,.92);
  border-bottom-color:rgba(148,178,214,.2);
}
:root[data-theme="dark"] .logo,
:root[data-theme="dark"] .navlinks > a:not(.btn),
:root[data-theme="dark"] .navtrigger,
:root[data-theme="dark"] .header-languages a,
:root[data-theme="dark"] .header-languages strong{
  color:#eef4fb;
}
:root[data-theme="dark"] .navtrigger span{color:#9fb3cc}
:root[data-theme="dark"] .navlinks > a:hover,
:root[data-theme="dark"] .navtrigger:hover{color:#5fd6e6}
:root[data-theme="dark"] .nav-toggle span{background:#eef4fb}
:root[data-theme="dark"] .mega,
:root[data-theme="dark"] .dropdown{
  background:rgba(10,20,38,.98);
  border-color:rgba(148,178,214,.22);
}
:root[data-theme="dark"] .mega-intro{background:rgba(10,20,38,.98)}
:root[data-theme="dark"] .mega-col{border-color:rgba(148,178,214,.16)}
:root[data-theme="dark"] .mega-intro-title,
:root[data-theme="dark"] .mega-col a,
:root[data-theme="dark"] .dropdown a{color:#eef4fb}
:root[data-theme="dark"] .mega-col .menu-label,
:root[data-theme="dark"] .dropdown .menu-label{color:#8fa0b8}
:root[data-theme="dark"] .mega-intro p{color:#a7b8d1}

/* Dark theme: complete menu contrast pass (kicker, column titles, links, labels,
   separators, hover/focus) for the desktop mega menus AND the mobile panel. */
:root[data-theme="dark"] .mega-kicker{color:#5fd6e6}
:root[data-theme="dark"] .mega-title{color:#8db9ff}
:root[data-theme="dark"] .mega-link{color:#5fd6e6}
:root[data-theme="dark"] .mega-link:hover{color:#a9f1fa}
:root[data-theme="dark"] .mega-intro-title{color:#f3f8ff}
:root[data-theme="dark"] .mega-intro p{color:#b8c7dd}
:root[data-theme="dark"] .mega-col .menu-label,
:root[data-theme="dark"] .dropdown .menu-label{color:#b4c3d9}
:root[data-theme="dark"] .mega-col a,
:root[data-theme="dark"] .dropdown a{color:#eef4fb}
:root[data-theme="dark"] body.hoodel-shared-header .mega-col a:hover,
:root[data-theme="dark"] .dropdown a:hover{color:#5fd6e6}
:root[data-theme="dark"] .mega-intro{border-inline-end-color:rgba(148,178,214,.22)}
:root[data-theme="dark"] .mega-col{border-inline-end-color:rgba(148,178,214,.16)}
:root[data-theme="dark"] header:where(#top) .navtrigger:focus-visible,
:root[data-theme="dark"] header:where(#top) .navlinks a:focus-visible,
:root[data-theme="dark"] header:where(#top) .mega a:focus-visible,
:root[data-theme="dark"] header:where(#top) .nav-toggle:focus-visible,
:root[data-theme="dark"] .h2-theme-toggle:focus-visible{outline:2px solid #5fd6e6;outline-offset:2px}
@media(max-width:960px){
  :root[data-theme="dark"] header:where(#top) .navlinks{
    background:#08101e;
    border-top-color:rgba(148,178,214,.2);border-bottom-color:rgba(148,178,214,.2);
    box-shadow:0 18px 35px rgba(0,0,0,.55);
  }
  :root[data-theme="dark"] header:where(#top) .navlinks .mega,
  :root[data-theme="dark"] header:where(#top) .navlinks .dropdown{
    background:rgba(255,255,255,.03);border-color:rgba(148,178,214,.2);box-shadow:none;
  }
  :root[data-theme="dark"] header:where(#top) .navlinks .mega-intro,
  :root[data-theme="dark"] header:where(#top) .navlinks .mega-col{background:transparent;border-color:rgba(148,178,214,.16)}
  :root[data-theme="dark"] header:where(#top) .navlinks > a:not(.btn),
  :root[data-theme="dark"] header:where(#top) .navlinks .navtrigger{color:#eef4fb}
}


/* ---------- 4. Theme toggle ----------
   The switch is a real part of the header markup (server-rendered in index2.php).
   Pill + sliding thumb, no external asset; the thumb slides via a logical inset so
   RTL/LTR need no separate rules. */

/* Pill switch, not the earlier circular button: a soft track with a
   sliding circular thumb, matching the classic light/dark switch pattern
   (sun knob in Light, moon knob in Dark) recreated from scratch in CSS +
   inline SVG -- no external asset of any kind. Thumb slides via a
   logical inset so the direction is correct for both RTL and LTR without
   separate rules. */
.h2-theme-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:60px;
  height:32px;
  padding:3px;
  border-radius:999px;
  border:1px solid rgba(21,55,92,.16);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 2px rgba(15,25,45,.08),0 4px 14px rgba(15,25,45,.1);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,width .22s ease,height .22s ease;
}
body.is-scrolled .h2-theme-toggle{width:52px;height:28px}
.h2-theme-toggle__icon{
  flex:1 1 0;
  display:grid;
  place-items:center;
  color:#8a97ab;
  pointer-events:none;
}
.h2-theme-toggle__icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h2-theme-toggle__thumb{
  position:absolute;
  top:3px;
  inset-inline-start:3px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#fff;
  color:#e8a838;
  box-shadow:0 2px 6px rgba(15,25,45,.25);
  transition:inset-inline-start .28s cubic-bezier(.4,0,.2,1),width .22s ease,height .22s ease,color .2s ease,background .2s ease;
}
body.is-scrolled .h2-theme-toggle__thumb{width:22px;height:22px;top:3px}
.h2-theme-toggle__thumb svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h2-theme-toggle__thumb .icon-moon{display:none}
.h2-theme-toggle:hover .h2-theme-toggle__thumb{box-shadow:0 3px 9px rgba(15,25,45,.32)}
.h2-theme-toggle:focus-visible{outline:2px solid #0b1d36;outline-offset:2px}

/* Dark state: thumb slides to the far side, shows the moon, track deepens. */
:root[data-theme="dark"] .h2-theme-toggle{
  border-color:rgba(148,178,214,.22);
  background:rgba(10,18,30,.62);
}
:root[data-theme="dark"] .h2-theme-toggle__icon{color:#5c6d86}
:root[data-theme="dark"] .h2-theme-toggle__thumb{
  inset-inline-start:calc(100% - 3px - 26px);
  background:#16243c;
  color:#c9d6ea;
}
:root[data-theme="dark"] body.is-scrolled .h2-theme-toggle__thumb{inset-inline-start:calc(100% - 3px - 22px)}
:root[data-theme="dark"] .h2-theme-toggle__thumb .icon-sun{display:none}
:root[data-theme="dark"] .h2-theme-toggle__thumb .icon-moon{display:block}

/* Small screens: slightly smaller switch (mobile header bar). */
@media(max-width:560px){
  .h2-theme-toggle{width:52px;height:28px}
  .h2-theme-toggle__thumb{width:22px;height:22px}
  :root[data-theme="dark"] .h2-theme-toggle__thumb{inset-inline-start:calc(100% - 3px - 22px)}
}
@media(prefers-reduced-motion:reduce){.h2-theme-toggle,.h2-theme-toggle__thumb{transition:none}}

/* ---------- 4b. Theme toggle in the Header nav row ----------
   Server-rendered inside .navlinks in the exact spot the Header's own
   consultation CTA used to occupy, so it inherits that row's real flex layout and
   the Header's sticky/compact transition. Only its layout AS A NAV CHILD is set here. */
.navlinks > #h2ThemeToggle{
  flex:0 0 auto;
  align-self:center;
  margin-inline-start:var(--sp-2);
}
/* Mobile: the switch lives in the header bar (outside the menu panel) so it stays
   reachable whether the menu is open or closed; the nav-row copy is not shown. */
.h2-theme-toggle--m{display:none}
@media(max-width:960px){
  .navlinks > #h2ThemeToggle{display:none}
  nav > .h2-theme-toggle--m{display:inline-flex;flex:0 0 auto;margin-left:auto;margin-inline-end:0}
  nav > .h2-theme-toggle--m + .nav-toggle{margin-left:0}
}

/* ---------- Internal pages: sticky header ----------
   Same root cause as the homepage's own fix (hoodel-home2.css): core's
   body{overflow-x:hidden} turns body into a scroll container, so the
   sticky header never sticks. clip keeps the horizontal clipping without
   creating a scroll container. The homepage keeps its own rule. */
body.hoodel-shared-header:not(.hoodel-home2-page){overflow-x:clip}
/* Header .wrap geometry for pages that don't load hoodel-home2.css
   (identical to its .wrap rule; scoped to the header only so page
   sections and the footer keep their own containers). */
header:where(#top) .wrap{width:min(var(--container-max),calc(100% - 2 * var(--gutter)))}

/* ---------- Language selector under the logo (was header-languages.css) ---------- */
.brand-stack{
  height:100%;
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.brand-stack .logo{
  flex:0 0 auto;
}

.header-languages{
  direction:ltr;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:-2px;
  font-family:"Manrope","Segoe UI",Arial,sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.07em;
  white-space:nowrap;
}

.header-languages a{
  display:inline-block;
  padding:7px 5px;
  margin:-7px -5px;
  color:#5a6a7d;
  transition:color .15s ease;
}

.header-languages a:hover{
  color:#075fd8;
}

.header-languages strong{
  color:#075fd8;
  font-weight:750;
}

.header-languages i{
  color:#c3ccd6;
  font-style:normal;
}

@media(max-width:560px){
  .brand-stack{
    align-items:flex-start;
    gap:3px;
  }

  .header-languages{
    align-self:center;
    margin-top:-1px;
    font-size:10px;
    gap:5px;
  }
}