/**
 * Header Styles.
 *
 * @package Accommodate
 */

/* Header. Solid variant surface by default so non-overlap pages never
   fade from transparent when the header turns sticky; only overlap pages
   start transparent (see the overlap rule below). */
.accommodate-header {
  --accommodate-header-color-default: var(--color-text);
  --accommodate-header-border-size: 1px;
  --accommodate-header-border-color: var(--color-border);
  --accommodate-header-color: var(--accommodate-header-color-default);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background-color: var(--accommodate-header-bg, var(--color-surface));
  border-block-end: var(--accommodate-header-border-size) solid var(--accommodate-header-border-color);
  color: var(--accommodate-header-color);
  transition: background-color var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}

/* Sticky state: sticky overrides, falling back to the Defaults when empty,
   and to the variant surface (not transparent) when nothing is configured. */
.accommodate-header.is-scrolled {
  background-color: var(--accommodate-header-sticky-bg, var(--accommodate-header-bg, var(--color-surface)));
  --accommodate-header-color: var(--accommodate-header-sticky-color, var(--accommodate-header-color-default));
  color: var(--accommodate-header-color);
  border-block-end-width: var(--accommodate-header-sticky-border-size, var(--accommodate-header-border-size));
  border-block-end-color: var(--accommodate-header-sticky-border-color, var(--accommodate-header-border-color));
  box-shadow: var(--shadow-md);
}

.accommodate-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "branding nav actions";
  align-items: center;
  gap: var(--space-md);
  /* Align the header inner with the theme container on every view, so the
     branding and actions line up with boxed content (Boxed template, single
     posts/listings, listing archive). Full-width pages keep full-bleed
     content but still use the same boxed header. */
  max-width: var(--content-width);
  margin-inline: auto;
  padding-block: var(--space-md);
  padding-inline: var(--container-padding);
}

/* Home: the front page aligns its blocks to the content width without an
   inner gutter, so once the header is boxed it drops its inline padding to
   line the branding and actions up with that content. Below the content
   width the inner still spans the viewport, so it keeps the normal padding
   and the branding never touches the screen edge. */
@media (min-width: 1264px) {
  body.home .accommodate-header__inner {
    padding-inline: 0;
  }
}

/* Branding */
.accommodate-header__branding {
  grid-area: branding;
  flex-shrink: 0;
}

.accommodate-header__logo {
  display: flex;
  align-items: center;
}

/* When the logo links to the home page, the anchor wraps the whole logo
   block (default/overlap/sticky states) or the site logo image. Match the
   logo's box so the whole logo is clickable and no inline gaps show. */
.accommodate-header__logo .custom-logo-link,
.accommodate-header__logo > .custom-logo-link {
  display: inline-block;
  line-height: 0;
}

/* Logo scales with the header: it fills the inner box minus its vertical
   padding, so a Customizer header height (or a variant token) both grows and
   shrinks it. At the 80px default this resolves to the previous 48px cap. */
.accommodate-header__logo img {
  max-height: calc(var(--header-height, 80px) - var(--space-md) * 2);
  width: auto;
}

/* Sticky logo swap: the sticky logo appears once the header is scrolled.
   The swap only applies when a `--logo-swap` header is rendered — i.e. when a
   scrolled logo actually differs from the initial one. Otherwise the single
   default logo must keep showing in the sticky state too. */
.accommodate-header__logo--sticky {
  display: none;
}

.accommodate-header--logo-swap.is-scrolled .accommodate-header__logo--default {
  display: none;
}

.accommodate-header--logo-swap.is-scrolled .accommodate-header__logo--sticky {
  display: block;
}

/* Dark-mode logo swap: when a dark logo is configured, it replaces the light
   one (or the site logo) inside the same logo slot. */
.accommodate-header__logo-img--dark {
  display: none;
}

html[data-theme="dark"] .accommodate-header__logo--has-dark .accommodate-header__logo-img--light,
html[data-theme="dark"] .accommodate-header__logo--has-dark .custom-logo-link {
  display: none;
}

html[data-theme="dark"] .accommodate-header__logo--has-dark .accommodate-header__logo-img--dark {
  display: block;
}

.accommodate-header__site-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--accommodate-header-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.accommodate-header__site-name:hover {
  color: var(--color-accent-text);
}

/* Navigation — 1fr grid column, right aligned toward the header actions. */
.accommodate-header__nav {
  grid-area: nav;
  display: none;
  justify-self: end;
}

.accommodate-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.accommodate-nav li {
  position: relative;
}

.accommodate-nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) 0;
  color: var(--accommodate-header-color);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.accommodate-nav a:hover,
.accommodate-nav .current-menu-item > a {
  color: var(--color-accent-text);
}

/* Dropdown */
.accommodate-nav .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-width: 200px;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-dropdown);
}

.accommodate-nav li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.accommodate-nav .sub-menu a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: background-color var(--transition-fast);
}

.accommodate-nav .sub-menu a:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-primary);
}

/* Header actions — right-side controls (theme mode switch + mobile menu
   toggle) in the auto-sized third grid column. */
.accommodate-header__actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Theme mode toggle (light/dark switch) — shows the icon for the mode the
   switch switches TO (moon in light, sun in dark). */
.accommodate-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accommodate-header-color);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.accommodate-theme-toggle:hover {
  color: var(--color-primary);
}

.accommodate-theme-toggle__icon--sun {
  display: none;
}

html[data-theme="dark"] .accommodate-theme-toggle__icon--sun {
  display: block;
}

html[data-theme="dark"] .accommodate-theme-toggle__icon--moon {
  display: none;
}

/* Locale toggle (EN/JA switch) — mirrors the theme-mode toggle aesthetics:
   bare 40×40 header action. Shows the label for the language the switch
   switches TO (JA in English, EN in Japanese). */
.accommodate-locale-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accommodate-header-color);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.accommodate-locale-toggle:hover {
  color: var(--color-primary);
}

.accommodate-locale-toggle__label--en {
  display: none;
}

html:lang(ja) .accommodate-locale-toggle__label--en {
  display: block;
}

html:lang(ja) .accommodate-locale-toggle__label--ja {
  display: none;
}

/* Mobile Toggle */
.accommodate-header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.accommodate-header__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--accommodate-header-color);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.accommodate-header__toggle[aria-expanded="true"] .accommodate-header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.accommodate-header__toggle[aria-expanded="true"] .accommodate-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.accommodate-header__toggle[aria-expanded="true"] .accommodate-header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Desktop */
@media (min-width: 1024px) {
  .accommodate-header__nav {
    display: block;
  }

  .accommodate-header__toggle {
    display: none;
  }
}

/* Sticky header variants (Customizer) */
.accommodate-header--static {
  position: relative;
}

.accommodate-header--scroll-up {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  transform: translateY(-100%);
  transition: transform var(--transition-base);
}

.accommodate-header--scroll-up.is-visible {
  transform: translateY(0);
}

/* The scroll-up header is fixed, so content needs a top offset — unless the
   page enables the overlap header, which overlays content instead. */
body.accommodate-header-scroll-up:not(.accommodate-overlap-header) .accommodate-content {
  padding-block-start: var(--header-height);
}

/* Overlap header (per-page setting): transparent over the page top at its
   start position, turning into the solid sticky bar once scrolled.
   With a sticky mode enabled the header is fixed (sticks on scroll); with
   the sticky mode set to "No" (--static) it is absolute — it still overlays
   the content (no push-down) but scrolls away with the page. */
body.accommodate-overlap-header .accommodate-header:not(.accommodate-header--static) {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
}

body.accommodate-overlap-header .accommodate-header--static {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}

/* Overlap initial position (before scrolling) uses the "Overlap" overrides,
   falling back to the Defaults when empty, and to transparent when neither
   is configured (the header overlays the hero). */
.accommodate-header--overlap:not(.is-scrolled) {
  background-color: var(--accommodate-header-overlay-bg, var(--accommodate-header-bg, transparent));
  --accommodate-header-color: var(--accommodate-header-overlay-color, var(--accommodate-header-color-default));
  color: var(--accommodate-header-color);
  border-block-end-width: var(--accommodate-header-overlay-border-size, var(--accommodate-header-border-size));
  border-block-end-color: var(--accommodate-header-overlay-border-color, var(--accommodate-header-border-color));
}

/* WordPress admin bar (logged in): core pushes the page down via
   `html { margin-top }`, but the sticky/fixed header anchors to the viewport
   top and slides under the fixed admin bar. Offset it below the bar using
   the height core exposes as a custom property. The admin bar is only fixed
   at ≥601px wide (below that it scrolls away with the page, so no offset).
   The plain static header is in flow and already covered by the core page
   bump; only offset it on overlap pages where it is absolutely positioned. */
@media screen and (min-width: 601px) {
  body.admin-bar .accommodate-header:not(.accommodate-header--static),
  body.admin-bar.accommodate-overlap-header .accommodate-header--static {
    inset-block-start: var(--wp-admin--admin-bar--height, 32px);
  }
}