/**
 * Redesign Header — global header (sitewide).
 * Rules 1:1 from redesign-quellen/01-BOILERPLATE.html (Nav 77-111, dropdowns
 * 353-366, search-ic 368-371, lang-panel 373-388, responsive 330-333 / 461-466).
 * Selectors for the dropdown/menu are mapped from the boilerplate's hand-written
 * .has-sub/.sub to the wp_nav_menu output (.menu-item-has-children/.sub-menu);
 * visual values are unchanged. Depends on redesign-base.css for tokens/buttons.
 */

/* ---------- Header / bar ---------- */
header#hdr{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s var(--ease)}
header#hdr .bar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 26px;max-width:var(--maxw);margin:0 auto;
}
header#hdr.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}

/* ---------- Logo (uploaded image) ---------- */
.logo{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;color:#fff;transition:color .4s}
.logo img{display:block;height:auto}
header#hdr.scrolled .logo{color:var(--navy)}

/* ---------- Nav ---------- */
nav.menu{display:flex;align-items:center;gap:30px}
nav.menu > ul{display:contents}              /* let <li> be the flex items (boilerplate had bare anchors) */
nav.menu li{list-style:none;position:relative}
nav.menu a{font-size:15px;font-weight:500;color:rgba(255,255,255,.82);transition:color .25s;position:relative}
header#hdr.scrolled nav.menu a{color:var(--text-mute)}
nav.menu a:hover{color:#fff}
header#hdr.scrolled nav.menu a:hover{color:var(--navy)}
nav.menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--orange);transition:width .3s var(--ease)}
nav.menu a:hover::after{width:100%}

/* ---------- Nav dropdowns (mega menu) — mapped to wp_nav_menu .sub-menu ---------- */
nav.menu .menu-item-has-children > a{display:inline-flex;align-items:center;gap:6px}
/* Caret: boilerplate had an inline chevron SVG (stroke:currentColor, 11x11, rotate on hover).
   wp_nav_menu emits no SVG, so reproduce it 1:1 as a ::after mask that inherits currentColor. */
nav.menu .menu-item-has-children > a::after{
  content:"";width:11px;height:11px;flex:0 0 auto;opacity:.7;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
nav.menu .menu-item-has-children:hover > a::after{transform:rotate(180deg)}
nav.menu .sub-menu{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;min-width:262px;
  box-shadow:0 30px 60px -28px rgba(15,33,56,.35);opacity:0;visibility:hidden;transition:all .3s var(--ease);z-index:30;
}
nav.menu .sub-menu::before{content:"";position:absolute;top:-22px;left:0;right:0;height:22px}
nav.menu .menu-item-has-children:hover > .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
nav.menu .sub-menu a{display:block;padding:10px 14px;border-radius:10px;font-size:14px;color:var(--text-mute);font-weight:500;transition:all .2s}
nav.menu .sub-menu a::after{display:none}
nav.menu .sub-menu a:hover{background:rgba(46,80,144,.06);color:var(--navy)}

/* ---------- Nav right ---------- */
.nav-right{display:flex;align-items:center;gap:16px}

/* search icon */
.search-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2);transition:all .3s}
header#hdr.scrolled .search-ic{color:var(--text-mute);border-color:var(--line)}
.search-ic:hover{border-color:var(--orange);color:var(--orange)}

/* lang toggle pill */
.lang{
  display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;font-weight:600;
  color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.22);padding:8px 12px;border-radius:999px;cursor:pointer;transition:all .3s;
}
header#hdr.scrolled .lang{color:var(--text-mute);border-color:var(--line)}
.lang:hover{border-color:var(--orange);color:var(--orange)}

/* Country-Selector (Live-Switcher bei aktiviertem country_selector_enable): gescrollter Header = weisser
   Grund -> Trigger dunkeln wie .lang. Globe/Arrow (stroke=currentColor) + Country/Language (Vererbung)
   erben die Farbe. Werte 1:1 aus dem .lang-Muster (--text-mute / --line). Hero-Zustand bleibt hell. */
header#hdr.scrolled .pdn-country-selector__trigger{color:var(--text-mute);border-color:var(--line)}

/* burger */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:#fff;transition:.3s}
header#hdr.scrolled .burger span{background:var(--navy)}

/* ---------- Language / country picker ---------- */
.lang-wrap{position:relative}
.lang-panel{
  position:absolute;top:calc(100% + 14px);right:0;width:360px;max-height:70vh;overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 36px 70px -30px rgba(15,33,56,.45);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s var(--ease);z-index:40;
}
.lang-panel.open{opacity:1;visibility:visible;transform:none}
.lang-panel h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);margin:6px 4px 10px}
.lang-panel h5:not(:first-child){margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.lang-grid a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;font-size:13px;color:var(--text);transition:background .2s}
.lang-grid a::after{display:none}
.lang-grid a:hover{background:rgba(46,80,144,.07)}
.lang-grid .fl{width:20px;height:14px;border-radius:3px;flex:0 0 auto;background:linear-gradient(135deg,var(--blue),var(--blue-bright));font-size:8px;color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--font-mono)}
.lang-grid a b{font-weight:600}
.lang-grid a small{color:var(--text-mute);font-size:11px}
.lang-grid a .col{display:flex;flex-direction:column;line-height:1.25}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  nav.menu,.lang{display:none}
  .burger{display:flex}
  .sub-menu,.lang-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;min-width:0;width:auto;padding:8px 0 0 14px}
  .lang-panel{display:none}
  .lang-panel.open{display:block}
  .lang-grid{grid-template-columns:1fr}
}