/* v2 header — editorial: hairline top info row + spacious nav row.
   Transparent over the dark hero (white text), solid after scroll. */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: transparent;
  transition:
    background-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

/* ---- Top info row (existing contact data only) ---- */
.site-header__top {
  border-bottom: 1px solid var(--ondark-line);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  color: var(--ondark-70);
}
.site-header__top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 40px;
}
.site-header__top a {
  color: var(--ondark-70);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-header__top a:hover { color: #fff; }
.site-header__top span { color: var(--ondark-40); margin-right: 0.5rem; }

/* ---- Main row ---- */
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 84px;
  border-bottom: 1px solid var(--ondark-line);
}

.site-header__logo img { height: 46px; width: auto; }
.site-header__logo .logo-color { display: none; }
.site-header__logo .logo-white { display: block; }

/* ---- Nav ---- */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2.2rem);
}
.site-nav__links {
  display: contents;
}
/* drawer head (mobile only) */
.site-nav__head { display: none; }
.nav-close { display: none; }

.site-nav__link {
  position: relative;
  padding-block: 0.6rem;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ondark-70);
  transition: color var(--duration-fast) var(--ease-out);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--green-200);
  transition: right var(--duration-base) var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: #fff; }
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { right: 0; }

/* ---- Language switcher ---- */
.lang-switch {
  display: flex;
  align-items: center;
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.lang-switch a {
  padding: 0.35rem 0.55rem;
  color: var(--ondark-40);
  transition: color var(--duration-fast) var(--ease-out);
}
.lang-switch a + a { border-left: 1px solid var(--ondark-line); }
.lang-switch a:hover { color: #fff; }
.lang-switch [aria-current="true"] { color: var(--green-200); }

/* ---- Scrolled / solid state ---- */
.site-header.is-scrolled {
  background: rgb(251 250 247 / 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-200);
}
.site-header.is-scrolled .site-header__top { display: none; }
.site-header.is-scrolled .site-header__bar { border-bottom-color: transparent; min-height: 72px; }
.site-header.is-scrolled .site-header__logo .logo-white { display: none; }
.site-header.is-scrolled .site-header__logo .logo-color { display: block; height: 40px; }
.site-header.is-scrolled .site-nav__link { color: var(--ink-700); }
.site-header.is-scrolled .site-nav__link:hover,
.site-header.is-scrolled .site-nav__link[aria-current="page"] { color: var(--ink-900); }
.site-header.is-scrolled .site-nav__link::after { background: var(--green-600); }
.site-header.is-scrolled .lang-switch a { color: var(--ink-300); }
.site-header.is-scrolled .lang-switch a + a { border-left-color: var(--line-200); }
.site-header.is-scrolled .lang-switch a:hover { color: var(--ink-900); }
.site-header.is-scrolled .lang-switch [aria-current="true"] { color: var(--green-700); }

/* ---- Mobile toggle ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: auto;   /* pin to the far right on mobile */
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-fast);
}
.site-header.is-scrolled .nav-toggle span,
body.menu-open .nav-toggle span { background: var(--ink-900); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .site-header__top { display: none; }
  .site-header__action { display: none; }
}

@media (max-width: 1024px) {
  .nav-toggle { display: flex; }

  /* full-screen editorial panel (avoids scrim/stacking/transparency issues) */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-menu);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    height: 100dvh;
    padding: 0;
    background: var(--paper-050);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--duration-base) var(--ease-out),
      visibility 0s linear var(--duration-base);
  }
  .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }

  /* panel head: color logo + close button */
  .site-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding-inline: var(--container-pad);
    border-bottom: var(--border-hairline);
  }
  .site-nav__head img { height: 38px; width: auto; }

  .nav-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    position: relative;
  }
  .nav-close span {
    position: absolute;
    width: 22px;
    height: 2px;
    background: var(--ink-900);
  }
  .nav-close span:nth-child(1) { transform: rotate(45deg); }
  .nav-close span:nth-child(2) { transform: rotate(-45deg); }

  /* links: large editorial list with hairline dividers */
  .site-nav__links {
    display: flex;
    flex-direction: column;
    padding-inline: var(--container-pad);
    margin-top: var(--space-2);
  }
  .site-nav__link {
    padding-block: var(--space-5);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink-900);
    border-bottom: var(--border-hairline);
  }
  .site-nav__link::after { display: none; }
  .site-nav__link[aria-current="page"] { color: var(--green-700); }

  .site-nav .lang-switch {
    margin-top: auto;
    padding: var(--space-6) var(--container-pad) var(--space-8);
  }
  .site-nav .lang-switch a {
    color: var(--ink-500);
    padding: 0.5rem 0.9rem 0.5rem 0;
  }
  .site-nav .lang-switch a + a { border-left: 0; padding-left: 0.9rem; }
  .site-nav .lang-switch [aria-current="true"] { color: var(--green-700); }

  body.menu-open { overflow: hidden; }
}