/* Header-specific styles building on base.css */

.site-header {
  backdrop-filter: blur(6px);
}

.site-header-inner {
  position: relative;
}

.site-logo__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.75rem;
  padding-block: 0.2rem;
  border: 2px solid var(--color-border);
  background: var(--color-neutral-50);
  box-shadow: var(--shadow-hard-sm);
}

.site-logo__link:hover {
  color: var(--color-primary);
}

.site-nav__link {
  position: relative;
  font-size: var(--font-size-xs);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-inline: 0.1rem;
}

.site-nav__link--cta {
  padding-inline: 0.6rem;
  padding-block: 0.25rem;
  border: 2px solid var(--color-border);
  background: var(--color-primary);
  color: #ffffff;
  box-shadow: var(--shadow-hard-sm);
}

.site-nav__link--cta:hover {
  background: var(--color-primary-soft);
}

/* Ensure desktop nav is visible even if JS fails */
.site-nav {
  display: flex;
}

/* Mobile nav list */
.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-nav__link {
  display: block;
  padding-block: 0.4rem;
  border-bottom: 2px solid var(--color-neutral-200);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.mobile-nav__link--cta {
  border: 2px solid var(--color-border);
  margin-top: var(--space-2);
  padding-block: 0.6rem;
  padding-inline: 0.75rem;
  background: var(--color-primary);
  color: #ffffff;
  text-align: center;
}

.mobile-nav__link--cta:hover {
  background: var(--color-primary-soft);
}

/* Mobile nav open state helper */
@media (max-width: 960px) {
  body.nav-open {
    overflow: hidden;
  }
}

/* Desktop nav is visible, mobile panel is hidden by default */
.site-nav {
  display: flex;
}

.mobile-nav {
  display: none;
}

@media (max-width: 960px) {
  .site-nav {
    display: none;
  }

  .mobile-nav {
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
  }

  .mobile-nav.is-open {
    display: flex;
  }
}