/* ==========================================================================
   Partial: MainNavTop (site header)
   --------------------------------------------------------------------------
   Markup: Resources/Private/PageView/Partials/MainNavTop.html
   Script: Resources/Public/JavaScript/Partials/main-nav-top.js
   Uses the global tokens / components (theme.css, components.css: .btn).

   01. Header bar (sticky, hides on scroll down, shows on scroll up)
   02. Logo, utility (search, phone, WhatsApp), icon buttons
   03. Burger
   04. Main navigation – burger mode   (html.nav-compact)
   05. Main navigation – desktop mode  (html:not(.nav-compact))
   06. Search panel
   07. Without JavaScript
   08. Measuring

   No fixed breakpoint: the mode depends on the real space. The inline script
   in Partials/MainNavTopMeasure.html measures if all menu items fit next to
   the buttons and sets .nav-compact on <html> as soon as they don't (any menu
   length, title, font, zoom). It runs right after the header, before the
   first paint, so the header does not jump while the page loads.
   ========================================================================== */


/* ==========================================================================
   01. HEADER BAR
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  color: var(--c-text);
  transition: translate 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-soft); }
.site-header.is-hidden { translate: 0 -100%; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: var(--header-h-mobile);
}


/* ==========================================================================
   02. LOGO, UTILITY, ICON BUTTONS
   ========================================================================== */
.site-header__logo {
  display: block;
  margin-inline-end: auto;
  padding-block: 0.25rem;
}
.site-header__logo img {
  width: auto;
  height: clamp(1.5rem, 1rem + 2.5vw, 2rem);   /* 24px at 320 → 32px */
}

.site-header__utility {
  display: flex;
  align-items: center;
}

/* Square 44px touch target with a centered icon */
.icon-btn,
.site-header__phone {
  display: inline-grid;
  place-items: center;
  min-width: var(--tap);
  min-height: var(--tap);
  color: inherit;
  font-size: 1.25rem;   /* icon size (.icon = 1em) */
  text-decoration: none;
  transition: color var(--transition);
}
.icon-btn:hover,
.site-header__phone:hover { color: var(--c-primary); }
.site-header__search-toggle[aria-expanded="true"] { color: var(--c-primary); }

/* Mobile: phone as icon button, the number stays readable for screen readers */
.site-header__phone-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Smallest phones: logo + 4 icons don't fit with 44px buttons (Leibbrand: below ~346px) */
@media (max-width: 22rem) {
  .site-header__utility .icon-btn,
  .site-header__utility .site-header__phone { min-width: 2.25rem; }
}


/* ==========================================================================
   03. BURGER
   Bars are drawn with CSS, "X" state via aria-expanded.
   ========================================================================== */
.nav-toggle {
  position: relative;
  margin-inline-end: calc((var(--tap) - 1.5rem) / -2);   /* bars flush with the content edge */
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 50%;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition), background-color var(--transition);
}
.nav-toggle__bars { top: 50%; transform: translate(-50%, -50%); }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; transform: translateX(-50%); }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateX(-50%) translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateX(-50%) translateY(-7px) rotate(-45deg); }


/* ==========================================================================
   04. BURGER MODE (html.nav-compact)
   Full width panel below the bar, the bar (logo, close button) stays visible.
   ========================================================================== */
.nav-compact .site-header__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: calc(100dvh - var(--header-h-mobile));
  padding: 0.5rem var(--gutter) max(2rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
  visibility: hidden;
  opacity: 0;
  translate: 0 -0.5rem;
  transition: opacity var(--transition), translate var(--transition), visibility var(--transition);
}
.nav-compact.nav-open .site-header__panel {
  visibility: visible;
  opacity: 1;
  translate: none;
}
.nav-compact.nav-open { overflow: hidden; }   /* no page scrolling behind the panel */

.nav-compact .main-nav__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--c-line);
}
.nav-compact .main-nav__link {
  flex: 1;
  padding-block: 0.75rem;
  font-size: 1.25rem;
  line-height: 1.4;
  text-decoration: none;
}
.nav-compact .main-nav__link[aria-current="page"],
.nav-compact .main-nav__item.is-active > .main-nav__link {
  text-decoration: underline 2px var(--c-primary);
  text-underline-offset: 0.3em;
}

.nav-compact .main-nav__toggle {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  margin-inline-end: calc((var(--tap) - 1.25rem) / -2);
  font-size: 1.25rem;
}
.nav-compact .main-nav__toggle .icon { transition: rotate var(--transition); }
.nav-compact .main-nav__toggle[aria-expanded="true"] .icon { rotate: 180deg; }

.nav-compact .main-nav__sub {
  display: none;
  flex-basis: 100%;
  padding-bottom: 0.75rem;
}
.nav-compact .main-nav__toggle[aria-expanded="true"] + .main-nav__sub { display: block; }
.nav-compact .main-nav__sub-link {
  display: block;
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: 1.0625rem;
  text-decoration: none;
}
.nav-compact .main-nav__sub-link:hover,
.nav-compact .main-nav__sub-link[aria-current="page"] { color: var(--c-primary); }

.nav-compact .site-header__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.75rem;
}
.nav-compact .site-header__actions .btn { min-height: var(--tap); }


/* ==========================================================================
   05. DESKTOP MODE (html:not(.nav-compact))
   Row 1: logo | search + phone      Row 2: navigation | buttons
   Both rows share the container edges, so the nav text starts flush with
   the logo and the phone number ends flush with the "Projektanfrage" button.
   The menu stays on one line; if it doesn't fit, the JS switches to burger mode.
   ========================================================================== */
:root:not(.nav-compact) .site-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* minmax(0): tracks never grow past the container */
  grid-template-areas:
    "logo  utility"
    "panel panel";
  align-items: center;
  row-gap: 0.75rem;
  padding-block: 1.5rem 0.875rem;
}

:root:not(.nav-compact) .site-header__logo { grid-area: logo; }
:root:not(.nav-compact) .site-header__logo img { height: 2.5rem; }   /* 40px (design 38px) */

:root:not(.nav-compact) .site-header__utility {
  grid-area: utility;
  justify-self: end;
  gap: 1rem;
}

:root:not(.nav-compact) .site-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
}
:root:not(.nav-compact) .site-header__phone .icon { font-size: 1.125rem; }
/* Next to the number, icon on the content edge (no negative margin: it would count as overflow when measuring) */
:root:not(.nav-compact) .site-header__whatsapp {
  justify-items: end;
  min-width: 1.5rem;
  font-size: 1.125rem;
}
:root:not(.nav-compact) .site-header__phone:hover .site-header__phone-label { text-decoration: underline; text-underline-offset: 0.2em; }
:root:not(.nav-compact) .site-header__phone-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

:root:not(.nav-compact) .nav-toggle { display: none; }

:root:not(.nav-compact) .site-header__panel {
  grid-area: panel;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 0;
}

/* ---- Navigation ---- */
:root:not(.nav-compact) .main-nav {
  flex: 1 1 auto;
  min-width: 0;                         /* = the space left next to the buttons (measured by the JS) */
}
:root:not(.nav-compact) .main-nav__list {
  display: flex;
  align-items: center;
  /* Layout: 40px at 1360. --nav-gap is set by the JS when space gets tight (min 1.5rem) */
  gap: var(--nav-gap, clamp(1.5rem, 2.9vw, 3rem));
}
:root:not(.nav-compact) .main-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
:root:not(.nav-compact) .main-nav__link {
  position: relative;
  display: block;
  padding-block: 0.625rem;
  font-size: var(--fs-nav);
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
}
/* Red line: hover / focus = preview, active trail = permanent */
:root:not(.nav-compact) .main-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.25rem;
  height: 2px;
  background: var(--c-primary);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--transition);
}
:root:not(.nav-compact) .main-nav__link:hover::after,
:root:not(.nav-compact) .main-nav__link:focus-visible::after,
:root:not(.nav-compact) .main-nav__item.is-active > .main-nav__link::after,
:root:not(.nav-compact) .main-nav__item:has(.main-nav__toggle[aria-expanded="true"]) > .main-nav__link::after { scale: 1 1; }

:root:not(.nav-compact) .main-nav__toggle {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: var(--tap);
  font-size: 1rem;
}
:root:not(.nav-compact) .main-nav__toggle .icon { transition: rotate var(--transition); }
:root:not(.nav-compact) .main-nav__toggle[aria-expanded="true"] .icon { rotate: 180deg; }

/* ---- Dropdown ---- */
:root:not(.nav-compact) .main-nav__sub {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  z-index: 1;
  min-width: 15rem;
  padding-block: 0.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-soft);
  visibility: hidden;
  opacity: 0;
  translate: 0 0.375rem;
  transition: opacity var(--transition), translate var(--transition), visibility var(--transition);
}
:root:not(.nav-compact) .main-nav__toggle[aria-expanded="true"] + .main-nav__sub {
  visibility: visible;
  opacity: 1;
  translate: none;
}
@media (hover: hover) {
  :root:not(.nav-compact) .main-nav__item:hover > .main-nav__sub {
    visibility: visible;
    opacity: 1;
    translate: none;
  }
}
:root:not(.nav-compact) .main-nav__sub-link {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: var(--fs-small);
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition);
}
:root:not(.nav-compact) .main-nav__sub-link:hover,
:root:not(.nav-compact) .main-nav__sub-link:focus-visible { background: var(--c-tint); }
:root:not(.nav-compact) .main-nav__sub-link[aria-current="page"],
:root:not(.nav-compact) .main-nav__sub-link.is-active { box-shadow: inset 2px 0 var(--c-primary); }

/* ---- Buttons (row 2, right; equal width like the layout) ---- */
:root:not(.nav-compact) .site-header__actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
}
:root:not(.nav-compact) .site-header__actions .btn { min-width: 9.5rem; }


/* ==========================================================================
   06. SEARCH PANEL
   ========================================================================== */
.site-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-block: 1rem;
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
  box-shadow: var(--shadow-soft);
}
.site-search__form {
  display: flex;
  gap: 0.5rem;
}
.site-search__input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--c-text);
  font-size: 1rem;   /* ≥ 16px: no auto zoom in iOS Safari */
}
.site-search__input:focus-visible { outline-offset: 0; }
.site-search__submit {
  flex-shrink: 0;
  font-size: 1rem;
}


/* ==========================================================================
   07. WITHOUT JAVASCRIPT
   Nothing measures, so desktop mode stays: menu and buttons wrap onto
   several lines instead of overflowing (dropdowns open on hover).
   ========================================================================== */
@media (scripting: none) {
  .site-header { position: relative; }
  .site-header__search-toggle { display: none; }
  .site-header__panel,
  .main-nav__list { flex-wrap: wrap; }
  .site-header__panel { row-gap: 0.5rem; }
}


/* ==========================================================================
   08. MEASURING
   While the JS switches to desktop mode for a moment to measure, transitions
   are off, so nothing fades or slides (it happens within one frame).
   ========================================================================== */
.nav-measuring .site-header,
.nav-measuring .site-header * { transition: none !important; }