/* Header-specific styles for PLBaldursGate */

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  z-index: 10000;
  background: var(--color-surface-3);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 9000;
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-surface-1), white 2%), var(--color-surface-1));
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-ambient);
}

.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
}
.brand__logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.brand__logo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.brand__name { font-family: var(--font-serif); font-weight: 700; letter-spacing: 0.02em; }

/* Primary nav */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav__list { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.nav__link:hover { background: rgba(255,255,255,0.04); }
.nav__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Search */
.site-search { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-search__input { width: clamp(12rem, 20vw, 20rem); }
.site-search__submit { padding-inline: var(--space-4); }

/* Mobile menu toggle */
.nav-toggle { display: none; }

/* Backdrop for mobile menu */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 8000;
}

/* Responsive behavior */
@media (max-width: 64em) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    /* Default: desktop layout */
  }
  /* Enable JS-controlled collapse only when JS is present */
  .js-enabled .primary-nav {
    position: fixed;
    top: calc(64px + env(safe-area-inset-top));
    right: 0;
    left: 0;
    margin: 0 auto;
    width: min(100%, var(--container-max));
    background: linear-gradient(180deg, color-mix(in oklab, var(--color-surface-2), white 3%), var(--color-surface-2));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated);
    padding: var(--space-5);
    display: block;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-dramatic);
    z-index: 9001;
  }
  .js-enabled .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .js-enabled .site-search { width: 100%; margin-top: var(--space-4); }
  .js-enabled .site-search__input { width: 100%; }

  .site-header.is-open .primary-nav { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .site-header.is-open + .nav-backdrop,
  .site-header.is-open .nav-backdrop { display: block; }
}

/* High-contrast tweaks */
@media (prefers-contrast: more) {
  .nav__link:hover { background: transparent; text-decoration: underline; }
}