@layer dx-component-base {
/* ==========================================================================
   Component: Header
   ========================================================================== */

.dx-header {
  /* Header is rendered with `class="dx-header dx-section dx-section--padding-block-none"`
     on the outer <header>, which gives it `width: 100%` + `padding-inline:
     var(--dx-spacing-gutter)` from .dx-section (gutter on small viewports
     so logo + nav don't kiss the screen edges) and zeroes the .dx-section
     default `padding-block` via the --padding-none modifier (header has its
     own block padding on .dx-header__inner below).

     Header reads the mode-driven semantic vars (--dx-bg / --dx-text) set by
     the dx-mode-* class on the element, so swapping mode flips both surface
     and text without per-mode rules here. */
  background: hsl(var(--dx-bg));
  color: hsl(var(--dx-text));
}

/* Sticky-top: pins the header to the viewport top while scrolling.
   `top` reads `--dx-admin-bar-offset` (set in dx-defaults.css) so logged-in
   users get the header pinned below the WordPress admin bar instead of
   underneath it. Logged-out users see 0px → no behavioural change. */
.dx-header--sticky-top {
  position: sticky;
  top: var(--dx-admin-bar-offset);
  z-index: 50;
}

.dx-header__cta {
  display: flex;
  align-items: center;
}

.dx-header__inner {
  /* `dx-container` (added on this element in components/header.php) provides
     `max-width: var(--dx-container-width-default)` + `margin: 0 auto` +
     `width: 100%` — same primitive every section uses, so editing the
     container width token flows through to the header automatically.
     Header-specific concerns left here: flex layout for brand / nav / CTA,
     and the 1rem block padding (header is denser than a regular section). */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
}

.dx-header__brand a {
  text-decoration: none;
  color: inherit;
}

/* `.dx-header__logo` is a span wrapper that contains either an inline
   <svg> (sanitised SVG upload) or an <img> (raster upload). Sizing the
   wrapper instead of the inner media lets one rule handle both — without
   it, hardcoded width/height attributes inside designer-exported SVGs
   would override CSS height and the logo would render at its intrinsic
   size. The child rule below pins the SVG / img to fill the wrapper's
   height with auto width to preserve aspect ratio.

   `--dx-header-logo-size` is set per-instance from the Header panel's
   Logo Size input (emitted on `#dx-site-header` by components/header.php).
   The 40px fallback covers fresh installs and empty values. */
.dx-header__logo {
  display: inline-block;
  height: var(--dx-header-logo-size, 40px);
  /* Reset line-height so the inline-block doesn't leave whitespace
     under SVG/img children. */
  line-height: 0;
}

.dx-header__logo > svg,
.dx-header__logo > img {
  display: block;
  height: 100%;
  width: auto;
}

.dx-header__site-name {
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

/* The menu itself is styled by `.dx-nav-menu` + `.dx-nav-menu--horizontal`
   in `components/nav-menu.css`. Only the wrapper-level placement of the
   nav slot inside the header bar lives here — the nav element gets the
   `.dx-header__nav` extra class via the partial's `$extra_class`. */
.dx-header__nav {
  display: flex;
  align-items: center;
}

/* ──────────────────────────────────────────────────────────────────────
   Drawer + hamburger

   The drawer (`.dx-header__drawer`) wraps the nav + CTA. On desktop it
   lays them out as a flex row, identical to the pre-mobile design. The
   hamburger button (`.dx-header__menu-toggle`) is rendered into the
   markup unconditionally but hidden on desktop — the CSS swap below
   the breakpoint reveals it and converts the drawer into a slide-down
   panel anchored to the bottom of the header.

   No JS is needed for the layout swap; assets/js/header-drawer.js only
   manages the open/closed state (toggling `is-open` on the drawer and
   `aria-expanded` on the button).
   ────────────────────────────────────────────────────────────────────── */

.dx-header__drawer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Hamburger button — three stacked bars rendered with currentColor so
   it inherits the header mode's text colour. The middle bar is the
   element's own background-shape; the outer two are ::before / ::after
   pseudos positioned ±8px above / below. On `.is-open` (mirrored from
   the toggle button via JS), the bars cross into an X. */
.dx-header__menu-toggle {
  display: none; /* desktop default — revealed in the mobile media query */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  border-radius: var(--dx-effect-border-radius, 0);
}

.dx-header__menu-toggle:hover,
.dx-header__menu-toggle:focus-visible {
  outline: none;
  opacity: 0.75;
}

.dx-header__menu-toggle-icon,
.dx-header__menu-toggle-icon::before,
.dx-header__menu-toggle-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dx-effect-transition-duration) ease,
              opacity var(--dx-effect-transition-duration) ease;
}

.dx-header__menu-toggle-icon {
  position: relative;
}

.dx-header__menu-toggle-icon::before,
.dx-header__menu-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.dx-header__menu-toggle-icon::before { top: -7px; }
.dx-header__menu-toggle-icon::after  { top:  7px; }

/* Open state — bars cross into an X. The middle bar fades out; the
   outer two rotate to ±45° around the centre. */
.dx-header__menu-toggle[aria-expanded="true"] .dx-header__menu-toggle-icon {
  background: transparent;
}
.dx-header__menu-toggle[aria-expanded="true"] .dx-header__menu-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.dx-header__menu-toggle[aria-expanded="true"] .dx-header__menu-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ──────────────────────────────────────────────────────────────────────
   Mobile breakpoint

   At 960px the desktop horizontal layout would start to crowd (logo +
   ~5 nav items + CTA = ~7 inline children fighting for space). Below
   it: hamburger appears, drawer turns into a hidden slide-down panel,
   nav restacks vertically.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .dx-header__menu-toggle {
    display: inline-flex;
  }

  .dx-header__drawer {
    /* Hidden by default — slides down from the bottom of the header
       when the toggle adds `.is-open`. Anchored to `.dx-header__inner`
       so it inherits the container width / horizontal positioning. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--dx-space-m, 1rem);
    padding: var(--dx-space-m, 1rem) var(--dx-spacing-gutter, 1rem);
    background: hsl(var(--dx-bg));
    color: hsl(var(--dx-text));
    border-top: 1px solid hsl(var(--dx-border));
    box-shadow: var(--dx-effect-shadow);
    /* Visibility-driven open/close — opacity + visibility so the panel
       fades in / out instead of snapping. transform gives it a tiny
       slide-down feel matching the dropdown menu's affordance. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dx-effect-transition-duration) ease,
                transform var(--dx-effect-transition-duration) ease,
                visibility 0s linear var(--dx-effect-transition-duration);
    z-index: 90;
  }

  .dx-header__drawer.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dx-effect-transition-duration) ease,
                transform var(--dx-effect-transition-duration) ease,
                visibility 0s linear 0s;
  }

  /* `.dx-header__inner` needs `position: relative` so the drawer's
     `position: absolute; top: 100%` anchors to it. */
  .dx-header__inner {
    position: relative;
  }

  /* Inside the drawer, restack the horizontal nav as a vertical list.
     Reuses the `.dx-nav-menu--horizontal` markup (same DOM as desktop)
     but flips the layout via these overrides — no second nav render
     needed. The submenu dropdown's absolute positioning is also
     overridden so children stack inline below the parent. */
  .dx-header__drawer .dx-nav-menu--horizontal .dx-nav-menu__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .dx-header__drawer .dx-nav-menu--horizontal .menu-item {
    width: 100%;
    /* alpha-safe divider: `--dx-border` is a Dynamic alias that can point
       at an alpha-ramp token (it defaults to Black Alpha 1), so
       `hsl(var(--dx-border) / 0.4)` would double-alpha to an invalid
       `hsl(0 0% 0% / 0.05 / 0.4)` and drop the border. color-mix composes
       the alpha safely — see the `.dx-button--neutral:hover` note in
       button.css for the full rationale. */
    border-bottom: 1px solid color-mix(in srgb, hsl(var(--dx-border)) 40%, transparent);
  }

  .dx-header__drawer .dx-nav-menu--horizontal .menu-item:last-child {
    border-bottom: 0;
  }

  .dx-header__drawer .dx-nav-menu--horizontal .menu-item > a {
    display: block;
    padding: 0.75rem 0;
  }

  /* Submenu in mobile drawer — render inline as accordion children
     instead of an absolute dropdown. Sub-menu items get a left indent
     so the hierarchy reads. */
  .dx-header__drawer .dx-nav-menu--horizontal .sub-menu {
    position: static;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 1rem;
    min-width: 0;
    /* Hidden until the parent gets `.dx-open` (toggle button click).
       Use display swap rather than opacity here — the desktop fade
       isn't appropriate inside a stacked drawer. */
    opacity: 0;
    visibility: hidden;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dx-effect-transition-duration) ease,
                opacity var(--dx-effect-transition-duration) ease,
                visibility 0s linear var(--dx-effect-transition-duration);
  }

  .dx-header__drawer .dx-nav-menu--horizontal .menu-item-has-children.dx-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    max-height: 100vh;
    transition: max-height var(--dx-effect-transition-duration) ease,
                opacity var(--dx-effect-transition-duration) ease,
                visibility 0s linear 0s;
  }

  /* Disable the hover-to-open behaviour on touch — the toggle button
     (injected by nav-menu.js) becomes the sole opener inside the
     drawer. Without this, a stray hover on touch devices would flash
     the submenu open momentarily. */
  .dx-header__drawer .dx-nav-menu--horizontal .menu-item-has-children:hover > .sub-menu,
  .dx-header__drawer .dx-nav-menu--horizontal .menu-item-has-children:focus-within > .sub-menu {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
  }
  .dx-header__drawer .dx-nav-menu--horizontal .menu-item-has-children.dx-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    max-height: 100vh;
  }

  /* Sub-menu link padding inside the drawer — slightly tighter than the
     top-level rows so the visual hierarchy reads. */
  .dx-header__drawer .dx-nav-menu--horizontal .sub-menu a {
    padding: 0.5rem 0;
  }

  /* CTA — full-width inside the drawer so it reads as a primary
     action rather than a small inline button. */
  .dx-header__cta {
    margin-left: 0;
    align-self: stretch;
  }
  .dx-header__cta .dx-button {
    width: 100%;
    justify-content: center;
  }
}
}