@layer components {
  /* Zohar's masthead: a slim, sticky, frosted bar over the dark canvas (and over
     the home hero), with small letter-spaced links — echoing zohar.yoga's nav.
     Overrides the shared header (loaded earlier in the bundle); zohar-only. */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    max-inline-size: none; /* full-bleed bar (shared header caps at page width) */
    min-block-size: var(--header-height);
    padding-block: 0;
    align-items: center;
    background: oklch(16% 0.012 235 / 0.62);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-end: 1px solid oklch(100% 0 0 / 0.08);
  }
  /* The shared desktop rule adds tall block padding; keep zohar's bar slim. */
  @media (min-width: 40rem) {
    .site-header { padding-block: 0; }
  }

  /* The brand always sits on the frosted bar — keep it light, with a shadow so it
     reads where the bar overlaps a bright hero. */
  .site-header__brand { color: oklch(97% 0.008 235); text-shadow: 0 1px 10px oklch(0% 0 0 / 0.55); }
  .site-header__brand:hover { color: #fff; }
  .site-header__tagline { color: oklch(85% 0.01 235); }

  /* zohar nav character — spaced, uppercase, in both layouts. LTR only: Hebrew and Arabic
     have no case, and spacing pulls their letters apart. */
  [dir="ltr"] .site-header__nav a { letter-spacing: 0.14em; text-transform: uppercase; }

  /* Only the desktop nav sits inline over the frosted bar, so force *it* light.
     On mobile the nav is a themed dropdown panel — leave the shared (themed)
     colour so the links stay legible in light mode too. */
  @media (min-width: 40rem) {
    .site-header__nav a {
      font-size: var(--text-x-small);
      color: oklch(92% 0.01 235);
      text-shadow: 0 1px 10px oklch(0% 0 0 / 0.55);
    }
    .site-header__nav a:hover { color: #fff; }

    /* Dropdown items sit on an opaque themed panel, not the frosted bar — the
       light-on-blur treatment above would wash them out (near-white text, near-white
       panel, only the shadow showing, so they read as blurred). Use themed colours. */
    .site-header__nav .menu__submenu { color: var(--color-subtle); }
    .site-header__nav .menu__submenu a { color: var(--color-subtle); text-shadow: none; }
    .site-header__nav .menu__submenu a:hover { color: var(--color-text); }
  }

  /* Hamburger (mobile) and the logged-out theme toggle as light translucent chips on the frosted
     bar. The signed-in toggle lives inside the account panel, so it keeps its themed styling. */
  .site-header__menu-toggle,
  .site-header__actions > .theme-toggle {
    color: oklch(92% 0.01 235);
    background: oklch(100% 0 0 / 0.1);
    border-color: oklch(100% 0 0 / 0.25);
  }
  .site-header__actions > .theme-toggle:hover { color: #fff; border-color: oklch(100% 0 0 / 0.4); }

  /* The account menu sits on the frosted bar too — light like the nav, not the
     themed dark "subtle" (near-invisible on the blur). The dropdown panel keeps its
     own themed surface, so only the trigger needs it. */
  .site-header .identity-menu__trigger,
  .site-header .site-header__signin,
  .site-header .site-header__admin { color: oklch(92% 0.01 235); }
  .site-header .identity-menu__trigger:hover,
  .site-header .site-header__signin:hover,
  .site-header .site-header__admin:hover { color: #fff; }
}