/* header.css
   Responsive header using only base.css variables (no hard-coded design values).
   Mobile-first, fluid wrap without media queries.
*/

header {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: var(--space-2);
  padding-inline: var(--gutter);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}
.site-logo a {
  color: var(--color-text);
  text-decoration: none;
}
.site-logo h1 {
  font-size: var(--fs-xl);
  line-height: var(--leading);
  margin: 0;
}
.site-logo img {
  display: block;
  max-block-size: var(--space-6);
  height: auto;
  width: auto;
}

/* Primary nav container */
nav.primary-menu {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* WordPress typically outputs: nav.primary-menu > ul.primary-menu */
nav.primary-menu > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Links */
nav.primary-menu a {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-1);
  padding-inline: var(--space-1);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--ease-fast), background-color var(--ease-fast),
    box-shadow var(--ease-fast);
}
nav.primary-menu a:hover {
  color: var(--color-primary-strong);
}
nav.primary-menu a:focus-visible {
  outline: var(--space-0) solid var(--color-primary);
  outline-offset: var(--space-0);
}

/* Active/current states from WP classes */
nav.primary-menu li.current-menu-item > a,
nav.primary-menu li.current_page_item > a,
nav.primary-menu li.current-menu-ancestor > a {
  color: var(--color-primary);
  box-shadow: inset 0 calc(var(--space-0) * -1) 0 0 var(--color-primary);
}

/* Dropdowns (basic hover-only behavior; no JS) */
nav.primary-menu li {
  position: relative;
}
nav.primary-menu li.menu-item-has-children > a {
  padding-inline-end: var(--space-2);
}
nav.primary-menu ul.sub-menu {
  display: none;
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-1);
  margin: 0;
  list-style: none;
  min-inline-size: 100%;
}
nav.primary-menu li:hover > ul.sub-menu {
  display: block;
}
nav.primary-menu ul.sub-menu > li > a {
  display: block;
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Optional muted utility in header context */
header .muted {
  color: var(--color-muted);
}