/*
 * MARKT_UI_SYSTEM_V1 — nav.css
 * Batch 5.3 · DIETRICH OS · betongoldmarkt.de
 *
 * Unified institutional navigation system.
 * Handles two structural nav systems on the platform:
 *
 *   System A — Homepage
 *     <header class="hdr">
 *       <a class="hdr-brand">…</a>
 *       <nav class="hdr-nav">…</nav>
 *     </header>
 *
 *   System B — All other pages (p1 / p2 / p3)
 *     <header class="header">
 *       <div class="container nav">
 *         <a class="brand">…</a>
 *         <nav class="menu">…</nav>
 *       </div>
 *     </header>
 *
 * Load order: tokens.css → base.css → layout.css → markt.css → nav.css
 * nav.css overrides markt.css nav rules via cascade (later = wins).
 * Homepage inline nav CSS removed in Batch 5.3 — nav.css takes authority.
 *
 * Preserved:
 *   - All existing class names and IDs
 *   - All href routing
 *   - position:fixed (homepage) / position:sticky (other pages)
 *   - .hide-m responsive behaviour
 *   - No JS hook changes
 *
 * Uses only --mc-* tokens from tokens.css.
 */


/* ════════════════════════════════════════════════════════════════
   SYSTEM B — .header wrapper
   Source: markt.css .header
   Override: z-index 30→100, blur 10px→16px, border → gold-line
════════════════════════════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: var(--mc-z-nav);                        /* 100 */
  background: var(--mc-glass-bg);                  /* rgba(9,9,11,0.88) */
  backdrop-filter: var(--mc-glass-blur);            /* blur(16px) */
  -webkit-backdrop-filter: var(--mc-glass-blur);
  border-bottom: 1px solid var(--mc-gold-line);    /* rgba(201,168,76,0.18) */
  box-shadow: 0 1px 32px rgba(0,0,0,0.40),
              0 1px 0   var(--mc-gold-line);
  transition:
    background  var(--mc-duration-md) var(--mc-ease-out),
    box-shadow  var(--mc-duration-md) var(--mc-ease-out);
}

/* nav flex row inside .header — override markt.css .nav padding */
.container.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-space-5);                          /* 24px */
  padding-block: var(--mc-space-3);                /* 12px top/bottom */
  height: var(--mc-nav-height);                    /* 58px */
}


/* ════════════════════════════════════════════════════════════════
   SYSTEM A — .hdr wrapper
   Source: homepage inline <style> (removed in Batch 5.3)
   Authority: nav.css is now the single source of truth
════════════════════════════════════════════════════════════════ */
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--mc-z-nav);                        /* 100 */
  height: var(--mc-nav-height);                    /* 58px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--mc-container-pad);         /* clamp(16px,4vw,32px) */
  box-sizing: border-box;
  background: var(--mc-glass-bg);                  /* rgba(9,9,11,0.88) */
  backdrop-filter: var(--mc-glass-blur);
  -webkit-backdrop-filter: var(--mc-glass-blur);
  border-bottom: 1px solid var(--mc-gold-line);
  box-shadow: 0 1px 32px rgba(0,0,0,0.40),
              0 1px 0   var(--mc-gold-line);
  transition:
    background  var(--mc-duration-md) var(--mc-ease-out),
    box-shadow  var(--mc-duration-md) var(--mc-ease-out);
}


/* ════════════════════════════════════════════════════════════════
   BRAND — System A (.hdr-brand) + System B (.brand)
   Unified: column flex, gold name, muted tag
════════════════════════════════════════════════════════════════ */
.hdr-brand,
.brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.hdr-brand .name,
.brand .name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mc-gold);                           /* #C9A84C */
  line-height: 1;
}

.hdr-brand .tag,
.brand .tag {
  font-size: var(--mc-type-xs);                    /* 11px */
  color: var(--mc-text-muted);                     /* rgba(240,237,230,0.55) */
  font-family: var(--mc-font-body);
  letter-spacing: var(--mc-tracking-normal);       /* 0.01em */
  line-height: 1;
}


/* ════════════════════════════════════════════════════════════════
   NAV LINKS — System A (.hdr-nav) + System B (.menu)
   Unified: muted base, subtle hover bg, smooth transitions
════════════════════════════════════════════════════════════════ */
.hdr-nav,
.menu {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--mc-space-1);                          /* 4px — System A tight */
}

/* System B uses slightly larger gap — preserve */
.menu {
  gap: 10px;
  font-size: var(--mc-type-sm);                    /* 13px */
}

/* Base link style — both systems */
.hdr-nav a,
.menu a {
  font-size: var(--mc-type-sm);                    /* 13px */
  font-weight: 500;
  color: var(--mc-text-muted);
  padding: 5px var(--mc-space-3);                  /* 5px 12px */
  border-radius: var(--mc-radius-sm);              /* 6px */
  letter-spacing: var(--mc-tracking-normal);
  white-space: nowrap;
  transition:
    color      var(--mc-duration-sm) var(--mc-ease-out),
    background var(--mc-duration-sm) var(--mc-ease-out);
}

.hdr-nav a:hover,
.menu a:hover {
  color: var(--mc-text);
  background: rgba(255,255,255,0.06);
}

/* Active state */
.hdr-nav a.active,
.menu a.active {
  color: var(--mc-text);
}


/* ════════════════════════════════════════════════════════════════
   NAV VARIANTS — bold, rate, wa-btn
════════════════════════════════════════════════════════════════ */

/* nav-bold — highlighted section link */
.hdr-nav a.nav-bold,
.menu a.nav-bold {
  color: var(--mc-text);
  font-weight: 700;
}

.hdr-nav a.nav-bold:hover,
.menu a.nav-bold:hover {
  color: var(--mc-gold);
  background: transparent;
}

/* rate / rate-nav — Ratenzahlung gold highlight */
.hdr-nav a.rate,
.menu a.rate-nav {
  color: var(--mc-gold);
  font-weight: 600;
  border: 1px solid var(--mc-gold-border);         /* rgba(201,168,76,0.25) */
  padding: 4px var(--mc-space-3);
}

.hdr-nav a.rate:hover,
.menu a.rate-nav:hover {
  background: var(--mc-gold-dim);                  /* rgba(201,168,76,0.10) */
  border-color: var(--mc-gold-border-hv);
}

/* wa-btn — WhatsApp style button (homepage only) */
.hdr-nav a.wa-btn {
  background: var(--mc-gold);
  color: #000;
  font-weight: 700;
  padding: 5px var(--mc-space-4);                  /* 5px 16px */
  border-radius: var(--mc-radius-sm);
  font-size: var(--mc-type-sm);
  transition:
    background   var(--mc-duration-sm) var(--mc-ease-out),
    transform    var(--mc-duration-sm) var(--mc-ease-out),
    box-shadow   var(--mc-duration-sm) var(--mc-ease-out);
}

.hdr-nav a.wa-btn:hover {
  background: var(--mc-gold-bright);
  color: #000;
  transform: translateY(-1px);
  box-shadow: var(--mc-shadow-gold);
}


/* ════════════════════════════════════════════════════════════════
   CTA BUTTON — .nav-cta (Investor Check)
   Unified across both systems — premium gold pill
════════════════════════════════════════════════════════════════ */
.hdr-nav a.nav-cta,
.menu a.nav-cta {
  background: var(--mc-gold);
  color: #000;
  font-weight: 700;
  font-size: var(--mc-type-sm);                    /* 13px */
  padding: 5px var(--mc-space-4);                  /* 5px 16px */
  border-radius: var(--mc-radius-sm);              /* 6px */
  letter-spacing: 0.01em;
  border: none;
  transition:
    background   var(--mc-duration-sm) var(--mc-ease-out),
    transform    var(--mc-duration-sm) var(--mc-ease-out),
    box-shadow   var(--mc-duration-sm) var(--mc-ease-out);
}

.hdr-nav a.nav-cta:hover,
.menu a.nav-cta:hover {
  background: var(--mc-gold-bright);               /* #D9BB6A */
  color: #000;
  transform: translateY(-1px);
  box-shadow: var(--mc-shadow-gold);               /* 0 4px 24px rgba(201,168,76,0.15) */
}


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
   Max 780px: hide secondary links (.hide-m)
   Max 640px: tighten spacing
════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
  .hdr-nav .hide-m,
  .menu .hide-m {
    display: none;
  }

  .hdr {
    padding-inline: var(--mc-space-5);             /* 24px → 16px via clamp already */
  }
}

@media (max-width: 640px) {
  .hdr-nav,
  .menu {
    gap: var(--mc-space-2);                        /* 8px */
  }

  .hdr-nav a,
  .menu a {
    padding: 5px var(--mc-space-2);               /* 5px 8px */
  }

  .hdr-nav a.nav-cta,
  .menu a.nav-cta {
    padding: 5px 18px 5px 13px;                 /* +5px right — calmer mobile tap target */
  }

  .hdr-nav a.wa-btn {
    padding: 5px var(--mc-space-3);             /* 5px 12px — unchanged */
  }

  /* Hide rate border on very small screens — keep gold color */
  .hdr-nav a.rate,
  .menu a.rate-nav {
    border: none;
    padding: 5px var(--mc-space-2);
  }
}


/* ════════════════════════════════════════════════════════════════
   SCROLLED STATE
   Add via JS: document.querySelector('.hdr, .header').classList.add('is-scrolled')
   Deepens background when page is scrolled.
   (Optional hook — no JS change required for base behaviour.)
════════════════════════════════════════════════════════════════ */
.hdr.is-scrolled,
.header.is-scrolled {
  background: rgba(9, 9, 11, 0.97);
  box-shadow: 0 2px 40px rgba(0,0,0,0.60),
              0 1px 0   var(--mc-gold-line);
}


/* ════════════════════════════════════════════════════════════════
   SAFARI RENDERING SAFETY
   -webkit-backdrop-filter declared above on both .hdr and .header.
   Extra: prevent backdrop-filter stacking artefact on fixed children.
════════════════════════════════════════════════════════════════ */
@supports not (backdrop-filter: blur(1px)) {
  .hdr,
  .header {
    background: rgba(9, 9, 11, 0.97);
  }
}