/* ==========================================================
   Sven Star SEO Tools — Floating pill header
   ========================================================== */

.site-header {
  position: sticky;
  top: 14px;
  z-index: 1000;
  width: calc(100% - 32px);
  max-width: 1180px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: var(--header-shadow);
  transition: box-shadow 0.35s ease, background 0.35s ease;
}
.site-header.scrolled {
  box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.35);
}
:root[data-theme="light"] .site-header.scrolled {
  box-shadow: 0 18px 40px rgba(120,100,40,0.22), 0 4px 12px rgba(120,100,40,0.12);
}

/* Animated glowing outline — see js/header-snake.js
   Width/height are set as exact pixel attributes by JS (matching the
   header's own offsetWidth/offsetHeight 1:1), NOT via percentage CSS —
   percentage sizing on an absolutely positioned child resolves against
   the parent's padding box, which is 2px smaller than the border box
   the header's rounded corners are actually drawn against. That
   mismatch was stretching/misaligning the traced outline near the
   pill's curved ends. */
.header-snake {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.header-snake-glow {
  filter:
    drop-shadow(0 0 1.5px rgba(212,175,55,0.9))
    drop-shadow(0 0 4px rgba(212,175,55,0.55))
    drop-shadow(0 0 9px rgba(212,175,55,0.35));
}

.header-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 8px 0 22px;
  gap: 16px;
}

/* ---------- Logo ---------- */
.header-inner .logo { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.header-inner .logo-star {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  filter: drop-shadow(0 0 8px var(--neon-purple));
}
.header-inner .logo-text { font-weight: 700; font-size: 16.5px; letter-spacing: -0.2px; white-space: nowrap; }

/* ---------- Desktop nav (true-centered) ---------- */
.nav-desktop {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-desktop > a {
  font-size: 14px; font-weight: 500; color: var(--text-dim);
  position: relative; padding: 6px 0;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.nav-desktop > a::after {
  content: ''; position: absolute; bottom: 0; left: 0; height: 2px; width: 0;
  background: var(--gradient-1);
  transition: width 0.35s var(--ease);
}
.nav-desktop > a:hover { color: var(--text); }
.nav-desktop > a:hover::after { width: 100%; }

.nav-item { position: relative; display: flex; align-items: center; }
.nav-link {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
  font-size: 14px; font-weight: 500; color: var(--text-dim);
  padding: 6px 0;
  transition: color 0.3s ease;
}
.nav-item:hover .nav-link, .nav-link:focus-visible { color: var(--text); }
.chevron { transition: transform 0.3s var(--ease); }
.nav-item:hover .chevron { transform: rotate(180deg); }

/* ---------- Dropdown panels (hover on desktop, [hidden]-toggle on touch) ---------- */
.dropdown-panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
  box-shadow: var(--dropdown-shadow);
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 1300;
}
/* Touch / no-hover fallback: JS toggles the `hidden` attribute on click */
@media (hover: none), (pointer: coarse) {
  .dropdown-panel:not([hidden]) {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}
/* Desktop: pure CSS hover/focus (JS removes the `hidden` attribute up front) */
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover > .dropdown-panel,
  .nav-item:focus-within > .dropdown-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

.dropdown-panel-right { left: auto; right: 0; transform: translateY(-6px); }
@media (hover: none), (pointer: coarse) {
  .dropdown-panel-right:not([hidden]) { transform: translateY(0); }
}
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover > .dropdown-panel-right,
  .nav-item:focus-within > .dropdown-panel-right {
    transform: translateY(0);
  }
}

.dropdown-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--text-dim);
  transition: background 0.2s ease, color 0.2s ease;
}
.dropdown-panel a:hover { background: rgba(212,175,55,0.1); color: var(--text); }
.dd-count { font-size: 11px; color: var(--text-dimmer); }

.dropdown-heading {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-dimmer);
  padding: 8px 12px 4px;
}
.dropdown-note {
  font-size: 12px; color: var(--text-dimmer);
  padding: 10px 12px 2px;
  border-top: 1px solid var(--border);
  margin-top: 6px;
}

/* ---------- Right-side actions ---------- */
.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
:root[data-theme="light"] .icon-btn { background: rgba(20,17,12,0.04); }
.icon-btn:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); transform: translateY(-2px); }

.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.header-cta.btn { padding: 10px 22px; font-size: 14px; }

/* ---------- Hamburger (mobile) ---------- */
.hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px;
  z-index: 2;
}
.hamburger span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.3s ease; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile dropdown menu ---------- */
.nav-mobile {
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 900;
}
.nav-mobile.open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mobile a {
  padding: 12px 10px; font-size: 15px; color: var(--text-dim);
  border-radius: 12px;
}
.nav-mobile a:hover { background: rgba(212,175,55,0.08); color: var(--text); }
.nav-mobile .btn { margin-top: 8px; justify-content: center; }

.theme-toggle-mobile {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 10px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--text-dim);
}
.toggle-track {
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
}
.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gradient-1);
  transition: transform 0.3s var(--ease);
}
:root[data-theme="light"] .toggle-thumb { transform: translateX(18px); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .site-header { width: calc(100% - 20px); margin-top: 10px; top: 10px; }
  .header-inner { height: 58px; padding: 0 8px 0 18px; }
  .header-inner .logo-text { font-size: 15px; }
}

@media (max-width: 400px) {
  .header-inner { padding: 0 6px 0 14px; gap: 10px; }
  .header-inner .logo-star { width: 28px; height: 28px; }
  .header-inner .logo-text { font-size: 13px; }
}