/* =================================================================
   Site header — fixed bar with the menu toggle, logo and quick actions.
   Frosted glass over the hero; turns solid once the page is scrolled
   past it (.site-header--scrolled, set by js/components/site-header.js).
   Phones: full-width bar. Tablets up: floating rounded pill.
   ================================================================= */

.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  width: 100%;
  height: var(--header-height);
}

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--container-max);
  height: 100%;
  margin-inline: auto;
  padding-inline: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(250, 247, 249, 0.55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 4px 20px rgba(29, 25, 64, 0.1);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Catalogue page: brighter glass over its dark hero */
.site-header--on-dark .site-header__bar {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.9);
}

.site-header--scrolled .site-header__bar {
  background: var(--color-neutral-50);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(0, 0, 0, 0.1);
  border-bottom-color: rgba(29, 25, 64, 0.08);
  box-shadow: 0 4px 20px rgba(29, 25, 64, 0.13);
}

.site-header--on-dark.site-header--scrolled .site-header__bar {
  background: var(--color-white);
  border-color: rgba(0, 0, 0, 0.08);
}

.site-header__logo-image {
  width: auto;
  height: 7rem;
  object-fit: contain;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: end;
}

/* Icon buttons in the bar (mixed with .icon-button) — darker glass while
   the header is transparent, the standard icon-button look once solid */
.site-header__button {
  width: 4.8rem;
  height: 4.8rem;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, filter 0.4s ease;
}

.site-header:not(.site-header--scrolled) .site-header__button {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--color-heading);
}

.site-header:not(.site-header--scrolled) .site-header__button:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

/* The map link moves into the side menu on phones */
.site-header__location { display: none; }

.site-header__language-label {
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
}

@media (min-width: 769px) {
  .site-header { padding: 1rem 2rem; }

  .site-header__bar {
    padding-inline: 2.4rem;
    border: 0.1rem solid rgba(255, 255, 255, 0.55);
    border-radius: 10rem;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.08);
  }

  .site-header--scrolled .site-header__bar {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1);
  }

  .site-header__logo-image { height: 6rem; }

  .site-header__button { width: 4rem; height: 4rem; }

  .site-header__location { display: inline-flex; }
}

/* ─────────────────────────── Menu toggle (hamburger ↔ close) ─────────────────────────── */

.menu-toggle { justify-self: start; }

.menu-toggle__icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 2rem;
}

.menu-toggle__bar {
  display: block;
  height: 0.2rem;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform var(--transition-base), opacity var(--transition-base), width var(--transition-base), background 0.4s ease;
}
.menu-toggle__bar:last-child { width: 70%; }

.menu-toggle:hover .menu-toggle__bar { background: var(--color-white); }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child  { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child   { width: 100%; transform: translateY(-7px) rotate(-45deg); }