/*
  Header.

  Overgenomen uit TGP_website_v52.html. In v52 stond de header-CSS op twee
  plekken: een blok onder de HEADER-kop en een later blok dat .nav opnieuw
  definieerde en de dropdown toevoegde. Het latere blok won. Hier staat alleen
  de uitkomst, dus zonder de overschreven regels en zonder .logo en .cart-icon,
  die in de markup van v52 nergens meer gebruikt worden.
*/

.header {
  padding: 1.5rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(253, 246, 240, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(158, 90, 110, 0.1);
}

.logo-link {
  display: block;
  line-height: 0;
}

.logo-img {
  height: 32px;
  width: auto;
  filter: brightness(0) saturate(100%) invert(41%) sepia(21%) saturate(1167%) hue-rotate(296deg) brightness(93%) contrast(89%);
}

/* ── Nav ── */

/*
  De rechterhelft van de header. In v52 zat alles in .nav met gap 2rem.
  Hier is dat gesplitst in .nav (de menulijst) en .header-acties (zoeken,
  tas, hamburger), met dezelfde 2rem ertussen. Op desktop is de uitkomst
  daardoor gelijk aan v52, op mobiel kan alleen .nav inklappen.
*/
.header-rechts {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header-acties {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav > a {
  text-decoration: none;
  color: var(--mauve);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s;
}

.nav > a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s;
}

.nav > a:hover {
  color: var(--wine);
}

.nav > a:hover::after {
  width: 100%;
}

/* ── Shop by Scent ── */

.dropdown {
  position: relative;
}

.drop-trigger {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mauve);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

.drop-trigger:hover {
  color: var(--wine);
}

.drop-trigger .chevron {
  transition: transform 0.3s;
}

.dropdown:hover .drop-trigger,
.dropdown:focus-within .drop-trigger {
  color: var(--wine);
}

.dropdown:hover .chevron,
.dropdown:focus-within .chevron {
  transform: rotate(180deg);
}

.drop-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  background: var(--wit);
  border: 1px solid rgba(158, 90, 110, 0.1);
  border-radius: 14px;
  padding: 0.7rem 0;
  min-width: 185px;
  box-shadow: 0 16px 48px rgba(26, 15, 18, 0.1);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 300;
}

.dropdown:hover .drop-menu,
.dropdown:focus-within .drop-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.drop-menu a {
  display: block;
  padding: 0.52rem 1.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mauve);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, padding-left 0.2s;
}

.drop-menu a:hover {
  background: var(--blush-licht);
  color: var(--wine);
  padding-left: 1.7rem;
}

/* ── Zoeken en tas ── */

.search-trigger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  margin-right: 0.6rem;
  color: var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.search-trigger:hover {
  background: rgba(158, 90, 110, 0.1);
  color: var(--wine);
}

.search-trigger svg {
  display: block;
}

.cart-btn {
  background: var(--gold);
  color: var(--noir) !important;
  padding: 0.48rem 1.2rem;
  border-radius: 100px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s;
}

.cart-btn:hover {
  background: var(--wine);
  color: var(--cream) !important;
  transform: translateY(-1px);
}

.cart-btn::after {
  display: none !important;
}

/* Alleen zichtbaar voor beheerders, als een menu-locatie nog leeg is. */
.tgp-menu-hint {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wine);
  text-decoration: underline;
}

/* ── Hamburgerknop ── */

/*
  Alleen zichtbaar op mobiel. Drie lijnen die bij openen een kruis worden.
  44px hoog en breed, dat is het minimum voor een tikdoel.
*/
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--noir);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.nav-toggle:hover {
  background: rgba(158, 90, 110, 0.1);
}

.nav-toggle-lijnen {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-toggle-lijnen span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease, top 0.28s ease;
}

.nav-toggle-lijnen span:nth-child(1) { top: 0; }
.nav-toggle-lijnen span:nth-child(2) { top: 6px; }
.nav-toggle-lijnen span:nth-child(3) { top: 12px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-lijnen span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lijnen span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-lijnen span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/*
  Mobiel.

  In v52 stond hier alleen `.nav { display: none }`, waardoor met de nav ook
  het zoekicoon en de tas verdwenen. Nu klapt alleen de menulijst in en komt
  die als paneel onder de header tevoorschijn.

  Breekpunt 768px, niet de 600px uit CLAUDE.md. Dat is bewust: dit is het
  breekpunt dat v52 al gebruikte, en tussen 600 en 768px past de volledige
  nav met tien families niet naast het logo. Zeg het als je toch 600 wilt.
*/
@media (max-width: 768px) {

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 5% 1.25rem;
    background: var(--cream);
    border-bottom: 1px solid rgba(158, 90, 110, 0.1);
    box-shadow: 0 16px 40px rgba(26, 15, 18, 0.08);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }

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

  .nav-toggle {
    display: flex;
  }

  /* Ruimere tikdoelen, en de onderstreping van desktop hoort hier niet. */
  .nav > a,
  .drop-trigger {
    padding: 0.85rem 0;
    font-size: 0.8rem;
  }

  .nav > a::after {
    display: none;
  }

  .dropdown {
    width: 100%;
  }

  /*
    Op touch bestaat hover niet, dus de dropdown staat hier gewoon open als
    ingesprongen lijst. Dat scheelt een tweede tikbeweging per familie.
  */
  .drop-trigger {
    cursor: default;
  }

  .drop-trigger .chevron {
    display: none;
  }

  .drop-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    min-width: 0;
    padding: 0 0 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .drop-menu a {
    padding: 0.6rem 0 0.6rem 1rem;
  }

  .drop-menu a:hover {
    background: transparent;
    padding-left: 1.4rem;
  }
}