/* =============================================================================
   Header — feste Navigationsleiste (Zahnarztpraxis Mozin)
   -----------------------------------------------------------------------------
   Fixierte Markenblau-Leiste, weisse Schrift, Anker-Navigation. @scope kapselt
   die Styles auf .header (kein BEM-Praefix).
   Zustand ueber data-open (gesetzt von header.js) fuer das mobile Menue.
   ========================================================================== */

@scope (.header) {
  :scope {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 999;
    background-color: var(--color-blue);
    color: var(--color-white);
    box-shadow: 0 5px 25px rgb(0 0 0 / 25%);
  }

  .bar {
    display: flex;
    align-items: center;
    gap: var(--grid-gap);
    /* Die blaue Leiste laeuft ueber die volle Fensterbreite, gedeckelt wird nur
       der Inhalt: oberhalb von --content-max sitzen Telefon/Logo und Nav-Punkte
       an der Inhaltskante, buendig zu Hero-Logo und Slider-Punkten. */
    padding-block: 0.75rem;
    padding-inline: calc(var(--inner-padding) + var(--content-flank));
  }

  /* Telefon und Logo liegen uebereinander und werden per Cross-Fade getauscht.
     Feste Hoehe, damit der Balken beim Wechsel nicht springt. */
  .brand-slot {
    position: relative;
    display: flex;
    align-items: center;
    min-block-size: 2.5rem;
  }

  .brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Startet ausgeblendet, blendet beim Scrollen ein; pointer-events:none
       verhindert, dass der unsichtbare Link Klicks auf die darunterliegende
       Telefonnummer abfaengt. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  /* Logo-SVG (Zahn-Herz + Schriftzug "Lena Mozin • Zahnaerztin"), weiss. */
  .brand-logo {
    display: block;
    block-size: clamp(2rem, 2.6vw, 2.5rem); /* ~32 -> 40px */
    inline-size: auto;
  }

  .phone {
    position: absolute;
    inset-inline-start: 0;
    margin: 0;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase; /* "TELEFON:" */
    white-space: nowrap;
    /* Oben sichtbar, blendet beim Scrollen aus. */
    opacity: 1;
    transition: opacity 0.4s ease;

    a {
      color: var(--color-white);
      text-decoration: none;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }
    }
  }

  /* Gescrollt: Telefon aus, Logo ein (Klasse setzt header.js). */
  :scope.is-scrolled .phone {
    opacity: 0;
    pointer-events: none;
  }

  :scope.is-scrolled .brand {
    opacity: 1;
    pointer-events: auto;
  }

  /* Navigation nach rechts schieben. */
  .nav {
    margin-inline-start: auto;
  }

  .nav ul {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav a {
    position: relative;
    display: inline-block;
    color: var(--color-white);
    font-size: var(--h4-size); /* ~24px */
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-transform: uppercase;

    /* Unterstrich-Effekt von links. */
    &::after {
      content: '';
      position: absolute;
      inset-inline: 0 100%;
      inset-block-end: -4px;
      block-size: 3px;
      background: var(--color-white);
      transition: inset-inline-end 0.3s ease-out;
    }

    &:hover::after,
    &:focus-visible::after {
      inset-inline-end: 0;
    }
  }

  /* Hamburger-Toggle, nur unterhalb der medium-Breakpoint sichtbar. Mittlere
     Leiste in der Mitte, die aeusseren per ::before/::after bei -8px/+8px;
     beim Oeffnen faellt die Mitte weg und die anderen drehen zum X. */
  .toggle {
    display: none;
    position: relative;
    inline-size: 26px;
    block-size: 21px;
    margin-inline-start: auto;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 500ms ease-in-out;
  }

  /* Mittlere Leiste zentriert; die aeusseren haengen als Pseudo-Elemente daran,
     damit sie sich um dieselbe Achse drehen. */
  .toggle-bar {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    inline-size: 26px;
    block-size: 3px;
    margin-block-start: -1.5px; /* halbe Hoehe -> optisch mittig */
    background: var(--color-white);
    transition: all 500ms ease-in-out;

    &::before,
    &::after {
      content: '';
      position: absolute;
      inset-inline-start: 0;
      inline-size: 26px;
      block-size: 3px;
      background: var(--color-white);
      transition: all 500ms ease-in-out;
    }

    &::before {
      inset-block-start: -8px;
    }

    &::after {
      inset-block-start: 8px;
    }
  }

  /* Geoeffnet: Mitte transparent, aeussere drehen zum X. */
  :scope[data-open] .toggle-bar {
    background: transparent;

    &::before,
    &::after {
      inset-block-start: 0;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }
  }

  @media (width <= 1023px) {
    /* Telefonnummer bleibt auch mobil sichtbar (Cross-Fade wie Desktop), nur
       mit kleinerer Schrift. */
    .phone {
      font-size: var(--text-size-md);
    }

    .toggle {
      display: flex;
    }

    .nav {
      display: none;
      flex-basis: 100%;
      margin-inline-start: 0;
    }

    .nav ul {
      flex-direction: column;
      gap: 0.75rem;
      padding-block: 1rem;
    }

    /* Geoeffnetes Menue (data-open wird von header.js gesetzt). */
    :scope[data-open] .bar {
      flex-wrap: wrap;
    }

    :scope[data-open] .nav {
      display: block;
    }
  }
}