/**
 * Fitpedia — Site Header (Editorial Masthead, LIGHT theme)
 * Loaded by: includes/class-fp-header.php
 *
 * The header is built with NATIVE Divi 4 modules in the Theme-Builder
 * Header layout (NOT a Code Module). Hook classes:
 *
 *   Section:    fp-header-section
 *   Row 1:      fp-header-row-utility   (1/2 + 1/2)
 *   Row 2:      fp-header-row-masthead  (1/4 + 1/2 + 1/4)
 *   Row 3:      fp-header-row-nav       (4/4)
 *
 *   Modules:
 *     fp-header-mod-kicker        — Text · "Kraft. Kultur. Wahrheit." (left utility)
 *     fp-header-mod-date          — Text · long date stamp (right utility)
 *     fp-header-mod-index         — Text · Index trigger (mobile only)
 *     fp-header-mod-brand         — Image · Fitpedia gold-sunburst logo
 *     fp-header-mod-cta           — Text · Newsletter CTA
 *     fp-header-mod-nav           — Menu · main navigation
 *
 * Specificity note: Divi emits per-row inline rules like
 *   `.et_pb_row_1_tb_header.et_pb_row { padding: 0 !important; }`
 * (specificity 0,2,0). To override, our row rules use
 *   `.fp-header-section .et_pb_row.fp-header-row-X` (specificity 0,3,0).
 */


/* ====================================================================
 *  TOKENS + section reset
 * ==================================================================== */
.fp-header-section {
  --fp-h-paper:        #F5F5F5;
  --fp-h-paper-warm:   #FAF7EE;
  --fp-h-ink:          #0B0B0B;
  --fp-h-ink-dim:      rgba(11, 11, 11, 0.62);
  --fp-h-ink-faint:    rgba(11, 11, 11, 0.38);
  --fp-h-gold:         #D4AF37;
  --fp-h-gold-dim:     #8a7326;
  --fp-h-rule:         rgba(212, 175, 55, 0.55);
  --fp-h-rule-soft:    rgba(11, 11, 11, 0.10);
  --fp-h-pad-x:        clamp(20px, 4vw, 56px);

  position: relative;
  z-index: 300;  /* sits ABOVE the mega-menu drawer (z-index 200) so the nav row stays hoverable while a vertical panel is open */
  background: var(--fp-h-paper) !important;
  color: var(--fp-h-ink);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.005em;
  isolation: isolate;
  padding: 0 !important;
}

.fp-header-section,
.fp-header-section * { box-sizing: border-box; }

/* Subtle paper grain */
.fp-header-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='hn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hn)'/%3E%3C/svg%3E");
}
.fp-header-section > .et_pb_row { position: relative; z-index: 1; }


/* ====================================================================
 *  Divi module / wrapper resets
 * ==================================================================== */
.fp-header-section .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
}
.fp-header-section .et_pb_column {
  margin-bottom: 0 !important;
  padding: 0 !important;
}
.fp-header-section .et_pb_text,
.fp-header-section .et_pb_text_inner {
  color: inherit;
  font-family: inherit;
  margin: 0 !important;
  padding: 0 !important;
}
.fp-header-section .et_pb_module { margin-bottom: 0 !important; }


/* ====================================================================
 *  TIER 1 — UTILITY BAR (.fp-header-row-utility)
 *  Left: brand kicker "Kraft. Kultur. Wahrheit."
 *  Right: long date stamp "Sonntag, 26.04.2026"
 * ==================================================================== */
.fp-header-section .et_pb_row.fp-header-row-utility {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--fp-h-pad-x) !important;
  background: var(--fp-h-ink) !important;
  border-bottom: 1px solid var(--fp-h-rule);
}
.fp-header-section .fp-header-row-utility > .et_pb_column {
  flex: 0 0 auto !important;
  width: auto !important;
}
.fp-header-section .fp-header-row-utility > .et_pb_column:last-child { margin-left: auto; }

/* Kicker — Fraunces italic, paper on ink */
.fp-header-mod-kicker .et_pb_text_inner {
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(13px, 1.05vw, 16px);
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--fp-h-paper) !important;
}

/* Date — JetBrains Mono caps, gold on ink */
.fp-header-mod-date .et_pb_text_inner {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fp-h-gold) !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.fp-header-mod-date .fp-header-date-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--fp-h-gold);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
  animation: fp-h-pulse 2.4s ease-in-out infinite;
}

@keyframes fp-h-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}


/* ====================================================================
 *  TIER 2 — COMBINED BAR (.fp-header-row-bar)
 *  Single row holding [logo] [menu] [Newsletter] — replaces the
 *  previous masthead + nav rows.
 * ==================================================================== */
.fp-header-section .et_pb_row.fp-header-row-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(16px, 2vw, 32px);
  padding: 14px var(--fp-h-pad-x) !important;
  min-height: 64px;
  background: var(--fp-h-paper);
}
.fp-header-section .fp-header-row-bar > .et_pb_column {
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto;
  min-height: 0 !important;
  height: auto !important;
}
/* Center column — holds the menu, takes the rest of the space */
.fp-header-section .fp-header-row-bar > .et_pb_column:nth-child(2) {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
.fp-header-section .fp-header-row-bar > .et_pb_column:nth-child(1) { justify-content: flex-start; }
.fp-header-section .fp-header-row-bar > .et_pb_column:nth-child(3) { justify-content: flex-end; }
/* Force every direct module wrapper inside the bar to vertically center */
.fp-header-section .fp-header-row-bar .et_pb_module {
  align-self: center !important;
  margin: 0 !important;
}

/* Index trigger — text module containing a <button> (mobile only via media query) */
.fp-header-mod-index .fp-header-index-btn {
  background: transparent;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  color: var(--fp-h-ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.fp-header-mod-index .fp-header-index-bars {
  position: relative;
  display: inline-block;
  width: 22px; height: 12px;
}
.fp-header-mod-index .fp-header-index-bars::before,
.fp-header-mod-index .fp-header-index-bars::after {
  content: '';
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: var(--fp-h-gold-dim);
  transition: width 240ms ease;
}
.fp-header-mod-index .fp-header-index-bars::before { top: 3px; }
.fp-header-mod-index .fp-header-index-bars::after  { bottom: 3px; width: 70%; }
.fp-header-mod-index .fp-header-index-btn:hover .fp-header-index-bars::after { width: 100%; }

/* Brand — Divi image module rendering the Fitpedia gold-sunburst logo */
.fp-header-mod-brand,
.fp-header-mod-brand .et_pb_image_wrap,
.fp-header-mod-brand a.et_pb_lightbox_image,
.fp-header-mod-brand a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  text-decoration: none !important;
  background: transparent !important;
  align-self: center !important;
}
.fp-header-mod-brand img {
  width: auto !important;
  height: clamp(36px, 3.6vw, 44px) !important;
  display: block !important;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fp-header-mod-brand a:hover img { transform: scale(1.04); }

/* Newsletter CTA — small editorial pill, ink text on gold */
.fp-header-mod-cta .fp-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--fp-h-gold);
  color: var(--fp-h-ink) !important;
  text-decoration: none !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 200ms ease, transform 200ms ease, box-shadow 240ms ease, color 200ms ease;
  box-shadow: 0 0 0 1px var(--fp-h-gold) inset, 0 6px 20px -14px rgba(212, 175, 55, 0.7);
}
.fp-header-mod-cta .fp-header-cta:hover {
  background: var(--fp-h-ink);
  color: var(--fp-h-paper) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--fp-h-ink) inset, 0 14px 32px -18px rgba(11, 11, 11, 0.5);
}
.fp-header-mod-cta .fp-header-cta-arrow {
  display: inline-block;
  transition: transform 220ms ease;
}
.fp-header-mod-cta .fp-header-cta:hover .fp-header-cta-arrow { transform: translateX(3px); }


/* ====================================================================
 *  MAIN NAVIGATION MENU (.fp-header-mod-nav inside .fp-header-row-bar)
 *  Centered, with hover-trigger for the per-vertical mega-menu.
 * ==================================================================== */
/* Force the menu wrap and ul to fill width and center the items */
.fp-header-mod-nav,
.fp-header-mod-nav.et_pb_menu,
.fp-header-mod-nav .et_pb_menu_inner_container,
.fp-header-mod-nav .et_pb_menu__wrap {
  background: transparent !important;
  padding: 0 !important;
  width: 100% !important;
  justify-content: center !important;
}
.fp-header-mod-nav .et_pb_menu__menu,
.fp-header-mod-nav nav.et-menu-nav {
  width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
}

.fp-header-mod-nav ul.et-menu,
.fp-header-mod-nav ul.menu {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  width: 100% !important;
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.fp-header-mod-nav .menu-item {
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
  float: none !important;
}

.fp-header-mod-nav .menu-item + .menu-item::before {
  content: '';
  position: absolute;
  left: calc(clamp(14px, 1.6vw, 24px) / -2 - 0.5px);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--fp-h-rule-soft);
}

.fp-header-mod-nav .menu-item > a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  position: relative;
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--fp-h-ink) !important;
  text-decoration: none !important;
  padding: 6px 0 !important;
  transition: color 200ms ease;
}
.fp-header-mod-nav .menu-item > a::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.45);
  transition: background 200ms ease, border-color 200ms ease;
}
.fp-header-mod-nav .menu-item > a::after {
  content: '';
  position: absolute;
  left: 14px; right: 0; bottom: 0;
  height: 1px;
  background: var(--fp-h-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms ease;
}
.fp-header-mod-nav .menu-item > a:hover { color: var(--fp-h-gold-dim) !important; }
.fp-header-mod-nav .menu-item > a:hover::before {
  background: var(--fp-h-gold);
  border-color: var(--fp-h-gold);
}
.fp-header-mod-nav .menu-item > a:hover::after { transform: scaleX(1); }

.fp-header-mod-nav .current-menu-item > a,
.fp-header-mod-nav .current_page_item > a { color: var(--fp-h-gold-dim) !important; }
.fp-header-mod-nav .current-menu-item > a::before,
.fp-header-mod-nav .current_page_item > a::before {
  background: var(--fp-h-gold);
  border-color: var(--fp-h-gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

.fp-header-mod-nav .mobile_nav,
.fp-header-mod-nav .mobile_menu_bar { display: none !important; }


/* ====================================================================
 *  STICKY VARIANT
 * ==================================================================== */
.fp-header-section.is-stuck {
  position: sticky;
  top: 0;
  background: rgba(245, 245, 245, 0.92) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--fp-h-rule);
  box-shadow: 0 12px 32px -24px rgba(11, 11, 11, 0.18);
}
.fp-header-section.is-stuck .fp-header-row-utility { display: none !important; }
.fp-header-section.is-stuck .et_pb_row.fp-header-row-bar {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 56px;
}
.fp-header-section.is-stuck .fp-header-mod-brand img { height: clamp(30px, 3.2vw, 40px) !important; }


/* ====================================================================
 *  RESPONSIVE
 * ==================================================================== */
@media (min-width: 981px) {
  /* Index trigger only exists for mobile users — hidden on desktop */
  .fp-header-mod-index { display: none !important; }
  .fp-header-mod-nav .menu-item > a { cursor: pointer; }
}

@media (max-width: 980px) {
  /* Mobile collapse: hide the menu, show Index trigger in its column instead */
  .fp-header-mod-nav { display: none !important; }
  .fp-header-mod-cta .fp-header-cta {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .fp-header-mod-cta .fp-header-cta-text { display: none; }
}

@media (max-width: 640px) {
  .fp-header-mod-kicker .et_pb_text_inner { font-size: 12px; }
  .fp-header-mod-date  .et_pb_text_inner { font-size: 10px; letter-spacing: 0.14em; }
}


/* ====================================================================
 *  REDUCED MOTION
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fp-header-section *,
  .fp-header-section *::before,
  .fp-header-section *::after {
    animation: none !important;
    transition: none !important;
  }
}