/* ==========================================================================
   kfe_site_header — the bar, the two menu copies, the phone panel
   --------------------------------------------------------------------------
   Neutral by contract: every colour is a --kfe-* token read with today's value
   as its fallback, and no token is DECLARED here (ADR-0004 decision 2). The
   sizes that vary per client — the logo, the bar padding, the menu size, the
   row's width — are instance controls, not defaults. What is written literally
   is small fixed geometry the reference draws the same way at every size: the
   40px toggle, the 2px active underline at offset 5, the caret.

   Two copies of one menu, and why: a closed <details> does not render its
   content outside <summary>, and no author rule can reveal it in every engine,
   so the wide bar and the script-free panel cannot share one list. Exactly one
   copy is ever `display: none`-free, so neither hidden copy is in the
   accessibility tree and neither needs aria-hidden.
   ========================================================================== */

/* ---------- the bar ---------- */
.kfe .kfe-site-header-bar {
  position: relative;
  z-index: 20;
  background: var(--kfe-white);
  border-block-end: 1px solid var(--kfe-line);
}

/* `bar_padding` writes all four sides here and replaces both of these.
   THE ROW WRAPS, and the menu list with it. Nothing in the pack may force the page wider
   than the viewport (base.css says so of the grids, for the same reason): a bar that cannot
   fit its logo, menu, languages and button on one line puts the overflow on a second line
   rather than overlapping them or widening the document. A site that wants the reference's
   single line sets `nav_size`, `bar_padding` and its button size so that it fits. */
.kfe .kfe-site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 9px 20px;
  padding-block: 12px;
  min-width: 0;
}

.kfe .kfe-site-header-logo { display: block; flex: 0 0 auto; line-height: 0; }

/* Both logo controls write variables, never the property, so that the ≤767 rule at the foot of
   this file can override the width a `logo_width` set for the desktop bar. A control selector
   carrying `width` directly would sit at `{{WRAPPER}}`'s specificity and win from inside no media
   query at all. Unset, both variables are absent and the image keeps its intrinsic size. */
.kfe .kfe-site-header-logo img {
  display: block;
  inline-size: var(--kfe-site-header-logo-w, auto);
  block-size: auto;
  max-inline-size: 100%;
}

.kfe .kfe-site-header-end {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
}

/* ---------- the bar's menu copy ---------- */
.kfe .kfe-site-header-nav { min-width: 0; flex: 0 1 auto; }
.kfe .kfe-site-header-nav ul { list-style: none; margin: 0; padding: 0; }
.kfe .kfe-site-header-nav > ul { display: flex; align-items: center; flex-wrap: wrap; }
.kfe .kfe-site-header-nav li { position: relative; }
.kfe .kfe-site-header-nav a {
  display: block;
  padding: 8px 11px;
  color: var(--kfe-heading, var(--kfe-primary));
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.kfe .kfe-site-header-nav a:hover,
.kfe .kfe-site-header-nav a:focus-visible { color: var(--kfe-accent); }

/* the caret on a parent, drawn rather than shipped as an image */
.kfe .kfe-site-header-nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-start: 7px;
  vertical-align: middle;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

/* ---------- the dropdown: :hover and :focus-within, no script ----------
   Closed is `display: none`, so a closed sub-menu is no Tab stop and the
   parent's own focus opens it. It carries no aria-expanded or aria-haspopup:
   nothing without script could keep either honest. Known limits: Escape and a
   tap outside close nothing. */
.kfe .kfe-site-header-nav .sub-menu { display: none; }
.kfe .kfe-site-header-nav li:hover > .sub-menu,
.kfe .kfe-site-header-nav li:focus-within > .sub-menu {
  display: block;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: 2;
  min-inline-size: 220px;
  padding-block: 8px;
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .kfe .kfe-site-header-nav li:hover > .sub-menu,
  .kfe .kfe-site-header-nav li:focus-within > .sub-menu {
    box-shadow: 0 12px 24px color-mix(in srgb, var(--kfe-primary) 16%, transparent);
  }
}
.kfe .kfe-site-header-nav .sub-menu a { white-space: nowrap; padding: 8px 16px; font-weight: 400; }

/* ---------- the current page: core's own classes, never styled bare ---------- */
.kfe .kfe-site-header-nav .current-menu-item > a,
.kfe .kfe-site-header-nav .current_page_item > a,
.kfe .kfe-site-header-nav .current-menu-parent > a,
.kfe .kfe-site-header-nav .current-menu-ancestor > a,
.kfe .kfe-site-header-panel .current-menu-item > a,
.kfe .kfe-site-header-panel .current_page_item > a,
.kfe .kfe-site-header-panel .current-menu-parent > a,
.kfe .kfe-site-header-panel .current-menu-ancestor > a {
  color: var(--kfe-accent);
  text-decoration: underline;
  text-decoration-color: var(--kfe-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- the language switcher ---------- */
.kfe .kfe-site-header-langs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* the separators are drawn, so no text node sits between two links */
.kfe .kfe-site-header-langs li + li::before {
  content: "\00B7";
  margin-inline-end: 6px;
  color: var(--kfe-muted);
  opacity: 0.55;
}
.kfe .kfe-site-header-langs a { color: var(--kfe-muted); font-weight: 600; text-decoration: none; }
.kfe .kfe-site-header-langs a:hover { color: var(--kfe-accent); }
.kfe .kfe-site-header-langs a[aria-current="page"] {
  color: var(--kfe-heading, var(--kfe-primary));
  text-decoration: underline;
  text-decoration-color: var(--kfe-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- the call to action ---------- */
.kfe .kfe-site-header-cta { flex: 0 0 auto; white-space: nowrap; }
.kfe .kfe-site-header-cta-short { display: none; }

/* ---------- the toggle and the panel ----------
   The panel is placed from the BAR — `inset-inline: 0` against the only
   positioned ancestor — so it spans the bar at any width and needs no pixel
   offset of its own. */
.kfe .kfe-site-header-menu { display: none; flex: 0 0 auto; }
.kfe .kfe-site-header-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 8px;
  color: var(--kfe-heading, var(--kfe-primary));
  cursor: pointer;
  list-style: none;
}
.kfe .kfe-site-header-toggle::-webkit-details-marker { display: none; }
.kfe .kfe-site-header-toggle::marker { content: ""; }
.kfe .kfe-site-header-burger {
  position: relative;
  display: block;
  inline-size: 22px;
  block-size: 2px;
  background: currentColor;
}
.kfe .kfe-site-header-burger::before,
.kfe .kfe-site-header-burger::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background: currentColor;
}
.kfe .kfe-site-header-burger::before { inset-block-start: -7px; }
.kfe .kfe-site-header-burger::after { inset-block-start: 7px; }
/* the visually hidden name of the toggle: a drawn burger has none otherwise */
.kfe .kfe-site-header-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kfe .kfe-site-header-panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 1;
  max-block-size: calc(100vh - 100%);
  overflow-y: auto;
  background: var(--kfe-white);
  border-block-start: 1px solid var(--kfe-line);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .kfe .kfe-site-header-panel { box-shadow: 0 12px 24px color-mix(in srgb, var(--kfe-primary) 16%, transparent); }
}
.kfe .kfe-site-header-panel ul { list-style: none; margin: 0; padding: 0; }
/* children are always shown in the panel, indented under their parent: a tap
   on a parent must navigate, and first-tap-opens needs script. */
.kfe .kfe-site-header-panel .sub-menu { padding-inline-start: 18px; }
.kfe .kfe-site-header-panel a {
  display: block;
  padding: 11px 18px;
  color: var(--kfe-heading, var(--kfe-primary));
  font-weight: 600;
  text-decoration: none;
  border-block-start: 1px solid var(--kfe-line);
}
.kfe .kfe-site-header-panel .sub-menu a { font-weight: 400; }
.kfe .kfe-site-header-panel a:hover,
.kfe .kfe-site-header-panel a:focus-visible { color: var(--kfe-accent); }

/* ==========================================================================
   The one breakpoint that matters: bar or panel
   --------------------------------------------------------------------------
   The panel takes over at the reference's own width, AND at every width on a
   pointer that cannot hover: a tap on a parent link navigates before any
   :hover can show its children, so a hover dropdown on a touch screen hides
   its sub-items outright. The two queries are exact complements, so exactly
   one copy is ever rendered.
   ========================================================================== */
@media (max-width: 1024px), (hover: none) {
  .kfe .kfe-site-header-nav { display: none; }
  .kfe .kfe-site-header-menu { display: block; }
}

/* ---------- phones: the short label, and the logo's own height ---------- */
@media (max-width: 767px) {
  .kfe .kfe-site-header-logo img {
    /* Written by `logo_height_mobile`; with the control unset neither variable exists and the
       width falls back to `logo_width`'s, so nothing changes. Setting the height releases the
       width (the control writes `-w-mobile: auto`), which is what lets the height govern here. */
    block-size: var(--kfe-site-header-logo-h-mobile, auto);
    inline-size: var(--kfe-site-header-logo-w-mobile, var(--kfe-site-header-logo-w, auto));
  }
  .kfe .kfe-site-header-cta-full { display: none; }
  .kfe .kfe-site-header-cta-short { display: inline; }
}

/* ---------- RTL: the caret is the only thing that does not follow ---------- */
html[dir="rtl"] body .kfe .kfe-site-header-nav .menu-item-has-children > a::after {
  transform: translateY(-2px) rotate(45deg);
}
html[dir="rtl"] body .kfe .kfe-site-header-langs { letter-spacing: 0; }