/* ==========================================================================
   SUPERLOOM – Navigation
   Header, nav-trigger (three-dot icon), fullscreen overlay nav.

   Two header variants:
   .site-header--with-logo   → superloom.studio + /worlds (logo visible)
   .site-header--no-logo     → /worlds/* worlds (logo hidden, burger only)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Header – base
-------------------------------------------------------------------------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: var(--size-5xl);
  padding-bottom: 0;
}


/* --------------------------------------------------------------------------
   Logo + tagline block (left side of header)
-------------------------------------------------------------------------- */

.header-identity {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: var(--leading-115);
}


/* --------------------------------------------------------------------------
   Nav trigger – three stacked circles
   Touch target: 44×44px minimum (WCAG 2.5.5)
-------------------------------------------------------------------------- */

.nav-trigger {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-trigger__label {
  font-family: var(--font-serif);
  font-size: var(--size-md);
  font-weight: 300;
  font-variation-settings: var(--fraunces-axes);
  font-optical-sizing: auto;
  line-height: var(--leading-115);
  color: var(--color-text);
}

.nav-trigger:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}







/* --------------------------------------------------------------------------
   Nav overlay – fullscreen
-------------------------------------------------------------------------- */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: var(--color-bg);

  /* Max-width + margin: mirrors .page so content aligns exactly */
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-page);
  padding-top: var(--size-5xl);

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--duration-base) var(--ease-out),
    visibility var(--duration-base) var(--ease-out);
}

.nav-overlay[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay {
    transition: none;
  }
}


/* --------------------------------------------------------------------------
   Overlay header row
-------------------------------------------------------------------------- */

.nav-overlay__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.nav-close {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-close:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: 2px;
}

.nav-close__label {
  font-family: var(--font-serif);
  font-size: var(--size-md);
  font-weight: 300;
  font-variation-settings: var(--fraunces-axes);
  font-optical-sizing: auto;
  line-height: var(--leading-115);
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Nav groups
-------------------------------------------------------------------------- */

.nav-overlay__body {
  margin-top: var(--size-xl);
}

.nav-group {
  padding-block: var(--size-md);
  border-top: 1px solid var(--color-text);
}

.nav-group:last-child {
  border-bottom: 1px solid var(--color-text);
}

.nav-group__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}


/* --------------------------------------------------------------------------
   Nav links – base
   Kreis-Indikator via ::before pseudo-element.
   Links sind relativ positioniert so dass der Kreis absolut dazu sitzt.
   padding-left schafft Platz für den Kreis + Abstand.
-------------------------------------------------------------------------- */

.nav-link--primary,
.nav-link--secondary {
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: var(--leading-125);
  color: var(--color-text);
  text-decoration: none;
  display: inline-block;
  position: relative;

  /* Platz für Kreis (1rem) + Abstand (0.75rem) = 1.75rem.
     Im Default (kein State) ist der Kreis unsichtbar, aber der Platz
     ist reserviert damit der Text nicht springt beim State-Wechsel. */
  padding-left: calc(1rem + 0.75rem);
}

.nav-link--primary {
  font-size: var(--size-md);   /* 1.333rem */
  padding-block: 0.75rem;
}

.nav-link--secondary {
  font-size: var(--size-sm);   /* 1rem */
  padding-block: 0.75rem;
}


/* Kreis – immer im DOM via ::before, Größe und Opacity variieren */
.nav-link--primary::before,
.nav-link--secondary::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: var(--color-text);

  /* Vertikal zentriert zur ersten Textzeile */
  top: 50%;
  transform: translateY(-50%);

  /* Default: unsichtbar, kein Platz-Problem */
  opacity: 0;

  /* Kreis links, bündig mit padding-left-Ursprung */
  left: 0;

  /* Transition für hover – reduced-motion deaktiviert das weiter unten */
  transition: opacity var(--duration-fast) var(--ease-out),
              width var(--duration-fast) var(--ease-out),
              height var(--duration-fast) var(--ease-out);
}


/* Hover: kleiner Kreis */
.nav-link--primary:hover::before,
.nav-link--secondary:hover::before {
  opacity: 1;
  width: 8px;
  height: 8px;
  left: calc((16px - 8px) / 2); /* = 4px – zentriert unter großem Kreis */
}

/* Active: großer Kreis */
.nav-link--primary[aria-current="page"]::before,
.nav-link--secondary[aria-current="page"]::before {
  opacity: 1;
  width: 16px;
  height: 16px;
  left: 0;
}

/* Active: kein underline, kein bold – Kreis übernimmt */
.nav-link--primary[aria-current="page"],
.nav-link--secondary[aria-current="page"] {
  font-weight: 300;
}


/* Hover underline entfernen – Kreis ist der Indikator */
.nav-link--primary:hover,
.nav-link--secondary:hover {
  text-decoration: none;
}


/* Focus */
.nav-link--primary:focus-visible,
.nav-link--secondary:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}


/* Reduced motion: Kreis erscheint sofort, kein Übergang */
@media (prefers-reduced-motion: reduce) {
  .nav-link--primary::before,
  .nav-link--secondary::before {
    transition: none;
  }
}