/* ==========================================================================
   SALONKI HEADER — premium mega navigation                     2026-10-24
   Single source of truth for the header look. Loaded AFTER main.css so the
   older layering (base nav rules + ClinicMaster ports) no longer decides how
   the menu looks; it only supplies structural defaults.

   Markup : templates/partials/header.php
   Hooks  : .site-header / .nav-toggle / .site-nav / .nav-item / .menu-toggle
            (kept for public/assets/js/main.js — no JS contract change)
   Scope  : every nav-internal rule is prefixed with #site-nav so it wins on
            specificity without !important.
   ========================================================================== */

:root {
  --mh-h: 4rem;
  --mh-ink: #0A3366;
  --mh-ink-soft: #44506B;
  --mh-muted: #7C879E;
  --mh-line: #ECE7DE;
  --mh-line-soft: #F4F0E9;
  --mh-cream: #FFF7EC;
  --mh-accent: #F46700;
  --mh-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: var(--mh-h);
}

/* ── Bar ────────────────────────────────────────────────────────────────── */
/* The frosted layer lives on ::before, never on .site-header itself:
   a backdrop-filter on the header would turn it into the containing block for
   position:fixed descendants — which would trap the mobile drawer inside the
   bar. Keep the header filter-free. */
.site-header.mh-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid rgba(10, 51, 102, 0.07);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.mh-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 252, 248, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  transition: background-color 0.25s ease;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.mh-header::before { background: #FFFCF8; }
}

.site-header.mh-header.is-scrolled {
  border-bottom-color: rgba(10, 51, 102, 0.09);
  box-shadow: 0 20px 42px -34px rgba(10, 51, 102, 0.55);
}

.site-header.mh-header.is-scrolled::before {
  background: rgba(255, 255, 255, 0.96);
}

.mh-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--mh-h);
  padding-block: 0;
}

.mh-brand { flex: 0 0 auto; }

.site-header .mh-brand .brand-logo {
  height: 1.375rem;
  width: auto;
}

/* ── Right cluster ──────────────────────────────────────────────────────── */
.mh-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.mh-near {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.5rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(10, 51, 102, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--mh-ink);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.mh-near svg { flex: none; }

.mh-near span { display: none; }

.mh-near:hover,
.mh-near:focus-visible {
  background: var(--mh-ink);
  border-color: var(--mh-ink);
  color: #FFFFFF;
  text-decoration: none;
}

.mh-near.is-current {
  border-color: rgba(244, 103, 0, 0.5);
  color: var(--mh-accent);
}

.mh-near:focus-visible {
  outline: 2px solid var(--mh-accent);
  outline-offset: 2px;
}

/* ── Burger (mobile) ────────────────────────────────────────────────────── */
.mh-burger {
  margin-left: auto;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(10, 51, 102, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--mh-ink);
}

.mh-burger:hover { border-color: var(--mh-ink); }

/* ── Mobile drawer ──────────────────────────────────────────────────────── */
#site-nav.mh-nav.is-open {
  position: fixed;
  top: calc(var(--mh-h) + 1px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  padding: 1.25rem var(--wrap-pad) calc(2.5rem + env(safe-area-inset-bottom));
  background: #FFFFFF;
  border-top: 1px solid var(--mh-line-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Replaces the legacy cmMenuIn port so the drawer never animates twice. */
  animation: mh-drawer-in 0.22s var(--mh-ease) both;
}

@keyframes mh-drawer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.mh-nav-open { overflow: hidden; }

#site-nav .mh-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#site-nav .mh-item {
  position: static;
  display: block;
  border-bottom: 1px solid var(--mh-line-soft);
}

#site-nav .mh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#site-nav .mh-link {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.4rem;
  min-height: 3.25rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--mh-ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

#site-nav .mh-link::before,
#site-nav .mh-link::after { display: none; }

#site-nav .mh-link[aria-current="page"]::after {
  content: "";
  display: block;
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  margin-left: 0.15rem;
  border-radius: 50%;
  background: var(--mh-accent);
}

#site-nav .mh-link .mh-chev { display: none; }

#site-nav .mh-sub {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--mh-muted);
}

html.js #site-nav .mh-sub { display: inline-flex; }

#site-nav .mh-sub .mh-chev { transition: transform 0.2s var(--mh-ease); }
#site-nav .mh-sub[aria-expanded="true"] .mh-chev { transform: rotate(180deg); }

/* ── Panels (mobile: accordion) ─────────────────────────────────────────── */
#site-nav .mh-panel {
  position: static;
  display: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.25rem 0 1rem;
  border: 0;
  border-radius: 0;
  background: #FFFDFA;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

html.js #site-nav .nav-item.is-open > .mh-panel { display: block; }
html:not(.js) #site-nav .mh-panel { display: block; }

#site-nav .mh-grid {
  display: grid;
  gap: 1rem;
}

#site-nav .mh-grid--2,
#site-nav .mh-grid--3,
#site-nav .mh-grid--mega { grid-template-columns: minmax(0, 1fr); }

#site-nav .mh-col-title {
  margin: 0.25rem 0 0.375rem;
  color: var(--mh-muted);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#site-nav .mh-links {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#site-nav .mh-links a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin: 0;
  border: 0;
  background: none;
  color: var(--mh-ink-soft);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}

#site-nav .mh-links a:hover,
#site-nav .mh-links a:focus-visible {
  color: var(--mh-ink);
  text-decoration: none;
}

#site-nav .mh-count {
  margin-left: auto;
  color: var(--mh-muted);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#site-nav .mh-arrow {
  display: inline-block;
  margin-left: auto;
  color: var(--mh-accent);
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

#site-nav .mh-links a:hover .mh-arrow,
#site-nav .mh-links a:focus-visible .mh-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Promo card (Preise panel) */
#site-nav .mh-promo {
  padding: 1rem;
  border: 1px solid #F3E3CE;
  border-radius: 1rem;
  background: linear-gradient(155deg, #FFF8EE, #FDEFDC);
}

#site-nav .mh-promo-kicker {
  margin: 0 0 0.35rem;
  color: var(--mh-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#site-nav .mh-promo-title {
  margin: 0 0 0.35rem;
  color: var(--mh-ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

#site-nav .mh-promo-text {
  margin: 0 0 0.75rem;
  color: var(--mh-ink-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
}

#site-nav .mh-promo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--mh-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

#site-nav .mh-promo-link:hover { color: var(--mh-accent); }

/* Panel footer */
#site-nav .mh-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mh-line-soft);
}

#site-nav .mh-foot-note {
  max-width: 34ch;
  color: var(--mh-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

#site-nav .mh-foot-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--mh-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

#site-nav .mh-foot-link:hover { color: var(--mh-accent); }

/* ── Desktop ────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root { --mh-h: 4.75rem; }

  .mh-inner { gap: clamp(1rem, 2vw, 2rem); }

  .site-header .mh-brand .brand-logo { height: 1.625rem; }

  .mh-near { padding: 0 1rem; font-size: 0.875rem; }
  .mh-near span { display: inline; }

  #site-nav.mh-nav {
    position: static;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 0;
    order: initial;
    background: transparent;
    border: 0;
  }

  #site-nav .mh-list {
    flex-direction: row;
    align-items: center;
    width: auto;
    margin: 0;
    gap: 0.125rem;
  }

  #site-nav .mh-item {
    display: flex;
    align-items: center;
    height: var(--mh-h);
    border: 0;
  }

  #site-nav .nav-head { display: flex; align-items: center; }

  #site-nav .mh-link {
    height: 2.5rem;
    min-height: 0;
    padding: 0 0.75rem;
    border-radius: 999px;
    color: #22304A;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }

  #site-nav .mh-link::before,
  #site-nav .mh-link::after { display: none; }

  #site-nav .mh-link .mh-chev {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.5;
    transition: transform 0.2s var(--mh-ease), opacity 0.2s ease;
  }

  #site-nav .mh-item:hover .mh-link .mh-chev,
  #site-nav .mh-item:focus-within .mh-link .mh-chev,
  #site-nav .mh-item.is-open .mh-link .mh-chev {
    transform: rotate(180deg);
    opacity: 1;
  }

  #site-nav .mh-item:hover > .nav-head > .mh-link,
  #site-nav .mh-item:focus-within > .nav-head > .mh-link {
    background: rgba(10, 51, 102, 0.055);
    color: var(--mh-ink);
  }

  #site-nav .mh-link[aria-current="page"] {
    color: var(--mh-ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 0 var(--mh-accent);
  }

  html.js #site-nav .mh-sub { display: none; }

  /* Panels: anchored to the header, centred, so mega widths never overflow */
  #site-nav .mh-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 220;
    display: block;
    width: min(calc(100vw - 3rem), 34rem);
    margin: 0;
    padding: 1.375rem 1.5rem 1rem;
    border: 1px solid rgba(10, 51, 102, 0.07);
    border-radius: 1.25rem;
    background: #FFFFFF;
    box-shadow: 0 34px 72px -36px rgba(10, 51, 102, 0.5), 0 2px 10px rgba(10, 51, 102, 0.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 0.5rem);
    transition: opacity 0.18s ease, transform 0.22s var(--mh-ease), visibility 0s linear 0.22s;
  }

  #site-nav .mh-panel--mega { width: min(calc(100vw - 3rem), 52rem); }
  #site-nav .mh-panel--wide { width: min(calc(100vw - 3rem), 44rem); }
  #site-nav .mh-panel--narrow { width: min(calc(100vw - 3rem), 24rem); }

  #site-nav .mh-item:hover > .mh-panel,
  #site-nav .mh-item:focus-within > .mh-panel,
  #site-nav .mh-item.is-open > .mh-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }

  #site-nav .mh-grid { gap: 1.75rem; }
  #site-nav .mh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #site-nav .mh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #site-nav .mh-grid--mega {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 15rem);
    gap: 1.5rem;
  }

  #site-nav .mh-col-title { margin: 0 0 0.5rem; }

  #site-nav .mh-links { gap: 0.0625rem; }

  #site-nav .mh-links a {
    padding: 0.5rem 0.625rem;
    margin: 0 -0.625rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  #site-nav .mh-links a:hover,
  #site-nav .mh-links a:focus-visible { background: #FBF7F1; }

  #site-nav .mh-panel--mega .mh-grid { align-items: start; }

  #site-nav .mh-panel-foot {
    margin-top: 1.25rem;
    padding-top: 0.875rem;
  }
}

/* ── Narrow desktop: keep 7 entries on one line ─────────────────────────── */
@media (min-width: 1024px) and (max-width: 1199px) {
  #site-nav .mh-link { padding: 0 0.55rem; font-size: 0.875rem; }
  .mh-near { padding: 0; width: 2.5rem; justify-content: center; }
  .mh-near span { display: none; }
}

/* ── Motion preferences ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #site-nav.mh-nav.is-open { animation: none; }

  #site-nav .mh-panel {
    transition: none;
    transform: translate(-50%, 0);
  }

  #site-nav .mh-link .mh-chev,
  #site-nav .mh-sub .mh-chev,
  #site-nav .mh-arrow { transition: none; }
}