/* ============================================================
   Header – Lykos SEO
   ============================================================ */

/* ---- Shell ---- */
.site-header {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  z-index:          100;
  transition:       background-color var(--transition-slow),
                    box-shadow        var(--transition-slow);
}

.site-header.scrolled {
  background-color: rgba(255,255,255,.95);
  backdrop-filter:  blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:       0 1px 0 rgba(0,0,0,.06);
}

/* ---- Inner row ---- */
.site-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1.5rem;
  max-width:       var(--container-max);
  margin-inline:   auto;
  padding:         1rem 2rem;
}

/* ---- Brand / Logo ---- */
.site-header__brand {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  flex-shrink: 0;
}

.site-header__brand img {
  height: 40px;
  width:  auto;
}

.site-header__brand span {
  font-weight: 700;
  font-size:   var(--text-base);
  color:       var(--color-text);
  white-space: nowrap;
  transition:  color var(--transition);
}

.site-header.scrolled .site-header__brand span { color: var(--color-bg); }
.site-header.scrolled .site-header__brand img { filter: invert(1); }

/* ---- Desktop navigation ---- */
.site-header__navigation {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* wp_nav_menu output */
.site-header__navigation ul.menu,
.site-header__navigation > ul {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  list-style:  none;
}

.site-header__navigation .menu-item { position: relative; }

.site-header__navigation .menu-item > a {
  display:       block;
  padding:       .375rem .75rem;
  font-size:     var(--text-sm);
  font-weight:   500;
  color:         var(--color-text);
  border-radius: var(--radius-sm);
  transition:    background-color var(--transition), color var(--transition);
  white-space:   nowrap;
}
.site-header__navigation .menu-item > a:hover {
  background-color: rgba(255,255,255,.08);
}

.site-header.scrolled .site-header__navigation .menu-item > a { color: var(--color-bg); }
.site-header.scrolled .site-header__navigation .menu-item > a:hover {
  background-color: rgba(0,0,0,.06);
}

/* Dropdown sub-menu */
.site-header__navigation .sub-menu {
  position:         absolute;
  top:              calc(100% + .5rem);
  left:             0;
  min-width:        200px;
  background-color: var(--color-white);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-md);
  box-shadow:       var(--shadow-card-hover);
  list-style:       none;
  opacity:          0;
  visibility:       hidden;
  transform:        translateY(-4px);
  transition:       opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index:          200;
}

.site-header__navigation .menu-item-has-children.is-hovering > .sub-menu,
.site-header__navigation .menu-item:focus-within > .sub-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

.site-header__navigation .sub-menu li a {
  display:       block;
  padding:       .625rem 1rem;
  font-size:     var(--text-sm);
  color:         var(--color-text-dark);
  transition:    background-color var(--transition);
}
.site-header__navigation .sub-menu li a:hover {
  background-color: var(--color-light, #f5f5f5);
  color:            var(--color-primary);
}

/* ---- CTA button ---- */
.site-header__cta {
  display:          inline-flex;
  align-items:      center;
  height:           36px;
  padding:          0 1rem;
  border-radius:    var(--radius-md);
  font-size:        var(--text-sm);
  font-weight:      500;
  color:            var(--color-white);
  background-color: var(--color-primary);
  border:           1px solid var(--color-primary);
  white-space:      nowrap;
  flex-shrink:      0;
  transition:       background-color var(--transition), border-color var(--transition);
}
.site-header__cta:hover {
  background-color: var(--color-primary-hover);
  border-color:     var(--color-primary-hover);
  color:            var(--color-white);
}

/* ---- Hamburger toggle (mobile only) ---- */
.site-header__toggle {
  display:        none;
  flex-direction: column;
  justify-content:center;
  gap:            5px;
  width:          36px;
  height:         36px;
  padding:        6px;
  border-radius:  var(--radius-sm);
  cursor:         pointer;
  flex-shrink:    0;
}

.site-header__toggle span {
  display:          block;
  width:            100%;
  height:           2px;
  border-radius:    2px;
  background-color: var(--color-text);
  transition:       transform var(--transition), opacity var(--transition), background-color var(--transition);
}

.site-header.scrolled .site-header__toggle span { background-color: var(--color-bg); }

/* X shape when open */
.site-header__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__toggle.is-open span:nth-child(2) { opacity: 0; }
.site-header__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile navigation panel ---- */
.mobile-navigation {
  display:          flex;
  flex-direction:   column;
  max-height:       0;
  overflow:         hidden;
  background-color: var(--color-surface);
  transition:       max-height var(--transition-slow), border-color var(--transition);
}

.mobile-navigation.is-open {
  max-height:  calc(100vh - 62px);
  overflow-y:  auto;
  border-top:  1px solid var(--color-border-dark);
}

.mobile-navigation a {
  padding:    .75rem 2rem;
  font-size:  var(--text-sm);
  font-weight:500;
  color:      var(--color-text);
  border-bottom: 1px solid var(--color-border-dark);
  transition: color var(--transition), background-color var(--transition);
}
.mobile-navigation a:hover {
  color:            var(--color-primary);
  background-color: rgba(255,255,255,.03);
}
.mobile-navigation a:last-child { border-bottom: none; }

/* CTA inside the mobile drawer (desktop CTA is hidden on small screens) */
.mobile-navigation a.mobile-navigation__cta {
  margin:           1rem 1.25rem 1.25rem;
  padding:          .75rem 1rem;
  text-align:       center;
  color:            var(--color-white);
  background-color: var(--color-primary);
  border-radius:    var(--radius-md);
  border-bottom:    none;
  font-weight:      600;
}
.mobile-navigation a.mobile-navigation__cta:hover {
  color:            var(--color-white);
  background-color: var(--color-primary-hover);
}

/* Body scroll lock when mobile nav is open */
body.nav-open { overflow: hidden; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .site-header {
    background-color: rgba(10,10,10,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .site-header.scrolled {
    background-color: rgba(255,255,255,.95);
  }

  .site-header__navigation { display: none; }
  .site-header__cta        { display: none; }
  .site-header__toggle      { display: flex; }

  .mobile-navigation {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    z-index: 99;
  }

  .mobile-navigation.is-open {
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }

  .mobile-navigation a {
    padding-inline: 1.25rem;
  }
}

@media (max-width: 640px) {
  .site-header__inner { padding: .75rem 1.5rem; }
  .site-header__cta   { display: none; }
  .site-header__brand img { height: 32px; }
  .site-header__toggle {
    width:   24px;
    height:  24px;
    padding: 0;
  }
  .mobile-navigation { top: 57px; }
}