/* ============================================================
   Hugon Veneer — Navigation
   Utility bar, main nav, mobile toggle/drawer
   All variable names aligned to base.css :root definitions
   ============================================================ */

/* -----------------------------------------------
   Skip link
   ----------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: top var(--t-fast) var(--t-ease);
}
.skip-link:focus { top: var(--space-4); }

/* -----------------------------------------------
   Site header (sticky)
   ----------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition:
    background-color var(--t-base) var(--t-ease),
    box-shadow var(--t-base) var(--t-ease),
    border-color var(--t-base) var(--t-ease);
}

/* Scrolled state — slight blur + shadow */
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--color-border);
}

/* Dark variant — for pages with hero overlay */
.site-header--dark {
  background-color: transparent;
  color: var(--color-white);
  border-bottom-color: transparent;
}
.site-header--dark.is-scrolled {
  background-color: rgba(44, 24, 16, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--shadow-md);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.site-header--dark .logo,
.site-header--dark .logo__mark,
.site-header--dark .logo__text { color: var(--color-white); }
.site-header--dark .nav-toggle span { background-color: var(--color-white); }
.site-header--dark .nav-list li a { color: var(--color-white); }
.site-header--dark .utility-bar {
  border-bottom-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(44, 24, 16, 0.6);
}
.site-header--dark .utility-bar__link { color: rgba(255, 255, 255, 0.6); }
.site-header--dark .utility-bar__link:hover { color: var(--color-accent-soft); }

/* -----------------------------------------------
   Utility bar
   ----------------------------------------------- */
.utility-bar {
  height: var(--utility-height);
  background-color: var(--color-bg-alt);
  font-size: var(--fs-xs);
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  letter-spacing: var(--ls-wide);
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--utility-height);
  gap: var(--space-4);
}

/* -----------------------------------------------
   Language switcher
   ----------------------------------------------- */
.language-switcher { position: relative; }

.language-switcher__current {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.375rem 0;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: var(--fw-medium);
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Dropdown arrow (CSS triangle) */
.language-switcher__current::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  margin-left: 0.3em;
  transition: transform var(--t-fast) var(--t-ease);
}

/* Language dropdown nav — hidden by default */
.language-switcher nav {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 140px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--t-fast) var(--t-ease),
    transform var(--t-fast) var(--t-ease),
    visibility 0s linear var(--t-fast);
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Show dropdown on hover or explicit button state. */
.language-switcher:hover nav,
.language-switcher.is-open nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--t-fast) var(--t-ease), transform var(--t-fast) var(--t-ease), visibility 0s;
}
.language-switcher:hover .language-switcher__current::after,
.language-switcher.is-open .language-switcher__current::after {
  transform: rotate(180deg);
}

.language-switcher nav a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease);
}
.language-switcher nav a:hover,
.language-switcher nav a:focus-visible {
  background-color: var(--color-bg-alt);
  color: var(--color-primary);
}
.language-switcher nav a[aria-current="page"] {
  color: var(--color-secondary);
  font-weight: var(--fw-semibold);
}

/* -----------------------------------------------
   Utility bar link
   ----------------------------------------------- */
.utility-bar__link {
  color: var(--color-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--t-fast) var(--t-ease);
}
.utility-bar__link:hover { color: var(--color-primary); }

/* -----------------------------------------------
   Main navigation bar
   ----------------------------------------------- */
.main-nav {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
}

/* -----------------------------------------------
   Logo
   ----------------------------------------------- */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-primary);
  flex: 0 0 auto;
  z-index: calc(var(--z-header) + 1);
}

.logo__mark {
  width: 36px; height: 36px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

.logo__text {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Footer variant — lighter color */
.logo--footer .logo__text { color: var(--color-white); }
.logo--footer .logo__mark {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* -----------------------------------------------
   Nav toggle (hamburger)
   ----------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: calc(var(--z-header) + 1);
}

.nav-toggle,
.language-switcher__current {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
  transition: transform var(--t-base) var(--t-ease), opacity var(--t-fast) var(--t-ease);
}

/* Expanded (X) state */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* -----------------------------------------------
   Primary navigation
   ----------------------------------------------- */
.primary-nav {
  display: block;
  flex: 1;
}

.nav-list {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0; padding: 0;
  align-items: center;
  justify-content: center;
}

.nav-list li a {
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--t-fast) var(--t-ease);
  letter-spacing: var(--ls-wide);
}

/* Animated underline on hover */
.nav-list li a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background-color: var(--color-secondary);
  transition: width var(--t-base) var(--t-ease-out);
}
.nav-list li a:hover { color: var(--color-primary); }
.nav-list li a:hover::after { width: 100%; }
.nav-list li a[aria-current="page"] { color: var(--color-primary); font-weight: var(--fw-semibold); }
.nav-list li a[aria-current="page"]::after { width: 100%; }

/* -----------------------------------------------
   Mobile navigation
   ----------------------------------------------- */
@media (max-width: 1023px) {
  .nav-toggle { display: flex; }

  /* Hide utility bar on mobile */
  .utility-bar { display: none; }

  /* Mobile drawer */
  .primary-nav {
    position: fixed;
    top: var(--nav-height);
    left: 0; right: 0; bottom: 0;
    background-color: var(--color-white);
    padding: var(--space-6) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--t-ease-out);
    z-index: var(--z-sticky);
    flex: none;
  }
  .primary-nav.is-open { transform: translateX(0); }

  /* Stack nav items vertically */
  .nav-list {
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
  }
  .nav-list li a {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-md);
    letter-spacing: normal;
  }
  .nav-list li a::after { display: none; }

  /* Lock body scroll when mobile nav is open */
  body.has-mobile-nav-open { overflow: hidden; }
}

/* Desktop: ensure nav toggle is hidden */
@media (min-width: 1024px) {
  .nav-toggle { display: none !important; }
}