/* ============================================================
   CoLe's Heart — header.css
   Restyle des Themify-Ultra-Headers (Design "header-horizontal")
   auf das Design-System: helle Creme-Sticky-Bar, horizontales Logo,
   Poppins-Nav, Gold-Hover, "Spenden" als Gold-Pill (li.nav-cta).
   Nutzt das echte WP-Menü (MainNav) + Themify-Mobil-Menü.
   Lädt via assets/css-Auto-Loader (filemtime-Cache-Buster).
   ============================================================ */

/* ---- Creme-Glas-Leiste ----
   Sticky/Fixed kommt vom Themify-Fixed-Header (Body-Klasse .fixed-header-enabled,
   `position:fixed`). Reines CSS-`position:sticky` scheitert hier an
   #pagewrap{overflow-x:clip}, daher der Theme-eigene Mechanismus. */
#headerwrap {
  z-index: 999;
  background: color-mix(in srgb, var(--ch-cream) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ch-line);
  box-shadow: 0 2px 14px rgba(62, 58, 51, .05);
}
/* etwaige Theme-Header-Hintergründe/Overlays neutralisieren */
#headerwrap .header-background,
#headerwrap > .header-background-overlay { display: none !important; }

/* ---- Header-Zeile: Logo links · Navigation rechts ----
   Inhalt auf Container-Breite begrenzen (wie eine Section), zentriert.
   Der Creme-Hintergrund bleibt vollbreit (liegt auf #headerwrap). */
#headerwrap #header {
  max-width: 1460px; width: 100%; margin: 0 auto;
  padding: 18px 40px;
  display: flex; align-items: center;
  background: none; border: none; box-shadow: none;
}
/* Logo bündig links; schiebt die Navigation an den rechten Padding-Rand */
#headerwrap .header-bar { margin: 0 auto 0 0; padding: 0; display: flex; align-items: center; min-height: 0; }

/* ---- Logo ---- */
#headerwrap #site-logo { margin: 0; padding: 0; line-height: 0; }
#headerwrap #site-logo a { display: inline-block; line-height: 0; }
#headerwrap #site-logo img,
#headerwrap #site-logo img.site-logo-image {
  height: 56px; width: auto; max-width: none; margin: 0; display: block;
}
/* Tagline ausblenden (Design ohne) */
#headerwrap #site-description,
#headerwrap .site-description { display: none !important; }

/* ---- Header-Widgets (3-col, leer) ausblenden ---- */
#headerwrap .header-widgets,
#headerwrap .pull-down { display: none !important; }

/* ---- Navigation (Desktop) ---- */
#headerwrap #main-nav-wrap { float: none; margin: 0; padding: 0; }
#headerwrap #main-nav {
  display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none;
  background: none;
}
/* Desktop: Nav-Container ohne Eigen-Padding → rechte Nav-Kante = rechter Padding-Rand */
@media (min-width: 881px) {
  #headerwrap #mobile-menu,
  #headerwrap #mobile-menu .navbar-wrapper,
  #headerwrap #main-nav-wrap {
    margin: 0; padding: 0; width: auto; max-width: none; background: none; border: none;
  }
  #headerwrap #main-nav { justify-content: flex-end; }
}
#headerwrap #main-nav > li { margin: 0; padding: 0; background: none; border: none; }
#headerwrap #main-nav > li > a {
  font-family: var(--ch-font-body); font-weight: 500; font-size: 15.5px; line-height: 1;
  color: var(--ch-ink); padding: 11px 14px; border-radius: 10px; background: none;
  transition: color .2s ease, background-color .2s ease;
}
#headerwrap #main-nav > li > a:hover,
#headerwrap #main-nav > li.current-menu-item > a,
#headerwrap #main-nav > li.current_page_item > a,
#headerwrap #main-nav > li.current-menu-parent > a { color: var(--ch-gold-600); }

/* ---- "Spenden" als Gold-Pill (li.nav-cta) ---- */
#headerwrap #main-nav > li.nav-cta { margin-left: 10px; }
#headerwrap #main-nav > li.nav-cta > a {
  background: var(--ch-gold-400); color: #fff !important;
  border-radius: var(--ch-radius-pill, 999px); padding: 11px 22px;
  font-weight: 500; box-shadow: var(--ch-shadow-gold);
  /* transform in die Transition aufnehmen (Basis-Nav transitioniert nur color/bg) */
  transition: background-color .2s ease, color .2s ease,
              transform var(--ch-dur-fast, .15s) var(--ch-ease, ease), box-shadow .2s ease;
}
#headerwrap #main-nav > li.nav-cta > a:hover {
  background: var(--ch-gold-500); color: #fff !important;
  transform: translateY(-2px); box-shadow: var(--ch-shadow-md);
}
#headerwrap #main-nav > li.nav-cta > a:active {
  transform: translateY(0) scale(0.98); background: var(--ch-gold-600);
}

/* ---- Mobile (Themify Off-Canvas-Menü) ---- */
@media (max-width: 880px) {
  #headerwrap #header { padding: 12px 18px; }
  #headerwrap #site-logo img { height: 46px; }
  #headerwrap #main-nav { flex-direction: column; align-items: stretch; gap: 0; }
  #headerwrap #main-nav > li > a { padding: 14px 16px; }
  #headerwrap #main-nav > li.nav-cta { margin: 14px 16px 0; }
  #headerwrap #main-nav > li.nav-cta > a { display: inline-block; text-align: center; }
}