/* ============================================
   Unified Header v2 - Stripe-style
   Transparent overlay with blur on scroll
   Works on both logged-in and logged-out pages
   ============================================ */

/* Global reset to remove default browser spacing */
html, body {
  margin: 0;
  padding: 0;
}

:root {
  /* Header padding - equal top and bottom for perfect vertical centering */
  --header-padding-y-top: 9px; /* Equal top padding for vertical centering */
  --header-padding-y-bottom: 9px; /* Equal bottom padding for vertical centering */
  --header-padding-x: var(--page-gutter, 18px);
  
  /* Header dimensions - calculated from padding + content height */
  /* Content height (~48px) + padding top (9px) + padding bottom (9px) = 66px (increased by 10px) */
  --vs-header-content-h: 48px; /* Content height - increased by 10px */
  --vs-header-h: calc(var(--header-padding-y-top) + var(--vs-header-content-h) + var(--header-padding-y-bottom)); /* 9px + 48px + 9px = 66px */
  --vs-maxw: var(--page-max-width, 1200px);

  /* Text colors */
  --vs-text: rgba(255, 255, 255, 0.92);
  --vs-text-dim: rgba(255, 255, 255, 0.72);

  /* Border and surface */
  --vs-border: rgba(255, 255, 255, 0.10);
  --vs-surface: rgba(10, 12, 18, 0.35); /* "blended" */
  --vs-surface-strong: rgba(10, 12, 18, 0.72); /* scrolled */

  /* Blur and radius */
  --vs-blur: 14px;
  --vs-radius: 14px;

  /* Focus ring */
  --vs-focus: rgba(255, 255, 255, 0.55);
}

/* Expose header height globally for layout calculations */
:root {
  --header-h: var(--vs-header-h);
}

/* --- header shell --- */
/* Ensure header has NO top margin */
header,
.site-header,
.vs-header {
  margin-top: 0;
  margin-bottom: 0;
}

body > header,
body > .vs-header {
  margin-top: 0;
}

.vs-header {
  position: sticky;
  top: 0;
  z-index: 1000; /* Lower z-index to prevent covering everything */
  height: var(--vs-header-h); /* Explicit height prevents layout collapse */
  min-height: var(--vs-header-h); /* Ensure minimum height */

  /* Default: transparent background for logged-in pages */
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, border-bottom-color 0.2s ease, backdrop-filter 0.2s ease;
  
  /* Ensure header takes up space in document flow */
  display: block;
  box-sizing: border-box;
}

/* Remove scrim overlay to match hero exactly */
.vs-header::before {
  display: none; /* Remove scrim to match hero background exactly */
}

/* When scrolled, add subtle background */
.vs-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* AI Logbook and AI Workspace pages: Ensure neutral header (no color) */
body[data-mode="app"] .vs-header {
  --vs-text: rgba(15, 23, 42, 0.92); /* Neutral dark gray text */
  --vs-text-dim: rgba(15, 23, 42, 0.70); /* Neutral dimmed text */
  --vs-border: rgba(0, 0, 0, 0.08); /* Neutral border */
  background: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body[data-mode="app"] .vs-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(0, 0, 0, 0.08);
  --vs-text: rgba(15, 23, 42, 0.92); /* Neutral dark gray text */
  --vs-text-dim: rgba(15, 23, 42, 0.70); /* Neutral dimmed text */
}

/* Marketing/homepage: blue background matching hero */
body[data-mode="marketing"] .vs-header {
  background: radial-gradient(circle at top, #020617 0%, #020617 40%, #020617 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  --vs-text: rgba(255, 255, 255, 0.98);
  --vs-text-dim: rgba(255, 255, 255, 0.74);
}

body[data-mode="marketing"] .vs-header .brand-beta {
  color: #0b1220;
  background: rgba(201, 242, 255, 0.92);
  border-color: rgba(125, 215, 255, 0.95);
  text-shadow: 0 0 6px rgba(79, 209, 255, 0.35);
  box-shadow: 0 0 14px rgba(79, 209, 255, 0.35);
}

body[data-mode="marketing"] .vs-header[data-scrolled="true"] {
  background: radial-gradient(circle at top, #020617 0%, #020617 40%, #020617 100%); /* Same as hero */
  backdrop-filter: none; /* Remove blur to match hero exactly */
  -webkit-backdrop-filter: none;
  border-bottom-color: rgba(255, 255, 255, 0.08); /* Match hero border */
}

/* Hide navigation on auth pages (login, signup, etc.) */
body[data-mode="auth"] .vs-nav {
  display: none !important;
}

body[data-mode="auth"] .vs-header__actions {
  display: none !important;
}

/* Auth pages: Ensure header stays at top, doesn't create side-by-side layout */
body[data-mode="auth"] .vs-header {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  flex-shrink: 0 !important; /* Don't shrink */
}

/* Auth pages: white text on dark background (new brand identity) */
body[data-mode="auth"] .vs-header {
  --vs-text: rgba(255, 255, 255, 0.92); /* White text for dark background */
  --vs-text-dim: rgba(255, 255, 255, 0.78); /* White dimmed */
  --vs-border: rgba(255, 255, 255, 0.10); /* Light border for white text */
  --vs-surface: rgba(255, 255, 255, 0.04); /* Dark surface */
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

body[data-mode="auth"] .vs-header[data-scrolled="true"] {
  background: rgba(6, 11, 20, 0.95); /* --vs-bg-950 with transparency */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.10);
}

/* Update logo mark gradient for brand identity (glacier/teal signal colors) */
body[data-mode="auth"] .vs-brand .ts-logo-mark,
body[data-mode="auth"] .vs-brand .vs-logo-mark {
  background: radial-gradient(circle at 30% 20%, #7fd7ff, #4fb3c8); /* --vs-signal-500 to --vs-signal-600 */
}

/* Logged-in pages: dark grey text on transparent header */
body[data-mode="app"] .vs-header,
body[data-mode="recruiter"] .vs-header {
  --vs-text: rgba(100, 116, 139, 0.92); /* Neutral gray text - no color */
  --vs-text-dim: rgba(100, 116, 139, 0.72); /* Neutral gray dimmed - no color */
  --vs-border: rgba(0, 0, 0, 0.10); /* Dark border for dark text */
  --vs-surface: rgba(255, 255, 255, 0.35); /* Light surface for dark text */
  --vs-surface-strong: rgba(255, 255, 255, 0.72); /* Light surface when scrolled */
  --vs-focus: rgba(100, 116, 139, 0.55); /* Neutral gray focus ring - no color */
  background: rgba(255, 255, 255, 0.6); /* Frosted transparent header */
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body[data-mode="app"] .vs-header[data-scrolled="true"],
body[data-mode="recruiter"] .vs-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.vs-header__inner {
  height: 100%;
  min-height: var(--vs-header-h); /* Ensure inner takes full height */
  max-width: var(--vs-maxw);
  margin: 0 auto;
  /* Equal padding top and bottom for perfect vertical centering */
  padding-top: var(--header-padding-y-top);
  padding-bottom: var(--header-padding-y-bottom);
  padding-left: var(--header-padding-x);
  padding-right: var(--header-padding-x);

  display: flex;
  align-items: center; /* This centers all children vertically within the available space */
  justify-content: space-between;
  gap: 16px;
  position: relative; /* For scrim positioning */
  z-index: 1; /* Above scrim */
  /* Ensure all direct children align properly */
  box-sizing: border-box;
  /* Explicitly ensure vertical centering */
  vertical-align: middle;
}

.vs-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--vs-text);
  transition: opacity 0.2s;
  /* Ensure consistent vertical alignment - no extra padding */
  padding: 0;
  margin: 0;
  line-height: 1;
}

.vs-brand:hover {
  opacity: 0.8;
}

body[data-mode="marketing"] .vs-brand {
  gap: 12px;
}

.vs-brand .brand-text {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--vs-text);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
}

/* Logged-in pages: Ensure consistent brand text color (on-brand dark gray) */
body[data-mode="app"] .vs-brand .brand-text,
body[data-mode="recruiter"] .vs-brand .brand-text {
  color: rgba(15, 23, 42, 0.95); /* Consistent on-brand dark gray - matches brand identity */
}

body[data-mode="marketing"] .vs-brand .brand-text {
  font-size: 1.45rem;
  color: rgba(255, 255, 255, 0.98);
}

.vs-brand .signal-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.vs-brand .signal-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

body[data-mode="marketing"] .vs-brand .signal-mark {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 16px rgba(127, 215, 255, 0.35));
}

/* Logo mark - reuse existing VS logo styling - slightly smaller for shorter header */
.vs-brand .ts-logo-mark,
.vs-brand .vs-logo-mark {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #38bdf8, #1d4ed8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #f9fafb;
  flex-shrink: 0;
}

body[data-mode="marketing"] .vs-brand .ts-logo-mark,
body[data-mode="marketing"] .vs-brand .vs-logo-mark {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  background: radial-gradient(circle at 30% 20%, #7fd7ff, #4fb3c8);
  box-shadow: 0 0 18px rgba(127, 215, 255, 0.25);
}

.vs-brand .ts-logo-text-block,
.vs-brand .vs-logo-text-block {
  display: flex;
  flex-direction: column;
  /* Remove all default spacing that could create gap */
  margin: 0;
  padding: 0;
  line-height: 1;
}

.vs-brand .ts-logo-text,
.vs-brand .vs-logo-text {
  font-weight: 600;
  font-size: 1.25rem; /* 20px: Balanced with button height */
  line-height: 1; /* Reduced from 1.2 to eliminate optical padding */
  color: var(--vs-text);
  /* Remove all default margins that could create gap */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0;
  display: block;
}

/* Logged-in pages: Ensure consistent brand text color (on-brand dark gray) */
body[data-mode="app"] .vs-brand .ts-logo-text,
body[data-mode="app"] .vs-brand .vs-logo-text,
body[data-mode="recruiter"] .vs-brand .ts-logo-text,
body[data-mode="recruiter"] .vs-brand .vs-logo-text {
  color: rgba(15, 23, 42, 0.95); /* Consistent on-brand dark gray - matches brand identity */
}

body[data-mode="marketing"] .vs-brand .ts-logo-text,
body[data-mode="marketing"] .vs-brand .vs-logo-text {
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.98);
}

.vs-brand .ts-logo-tagline,
.vs-brand .vs-logo-tagline {
  font-size: 0.65rem; /* Slightly smaller for shorter header */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vs-text-dim);
  line-height: 1; /* Reduced from 1.2 to eliminate optical padding */
  /* Remove all default margins that could create gap */
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0;
  display: block;
}

body[data-mode="marketing"] .vs-brand .ts-logo-tagline,
body[data-mode="marketing"] .vs-brand .vs-logo-tagline {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.65);
}

/* --- nav links --- */
.vs-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.vs-nav a,
.vs-nav .ts-nav-list a {
  color: var(--vs-text-dim);
  text-decoration: none;
  font-size: clamp(0.875rem, 0.9vw, 0.9375rem); /* 14px - 15px: clamp(14px, 0.9vw, 15px) */
  font-size: 13px; /* Slightly smaller for shorter header */
  line-height: 1;
  padding: 8px 8px; /* Consistent vertical padding matching other elements */
  border-radius: 10px;
  transition: color 0.2s, background 0.2s;
  /* Ensure consistent vertical alignment */
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.vs-nav a:hover,
.vs-nav .ts-nav-list a:hover {
  color: var(--vs-text);
  background: rgba(255, 255, 255, 0.06);
}

/* Logged-in pages: adjust nav link hover for dark text - neutral gray, no color */
body[data-mode="app"] .vs-nav a:hover,
body[data-mode="app"] .vs-nav .ts-nav-list a:hover,
body[data-mode="recruiter"] .vs-nav a:hover,
body[data-mode="recruiter"] .vs-nav .ts-nav-list a:hover {
  color: rgba(100, 116, 139, 0.92); /* Neutral gray - no color */
  background: rgba(0, 0, 0, 0.06);
}

.vs-nav a[aria-current="page"],
.vs-nav .ts-nav-list a[aria-current="page"] {
  color: var(--vs-text);
  background: rgba(255, 255, 255, 0.1);
}

/* Logged-in pages: adjust active nav link for dark text - neutral gray, no color */
body[data-mode="app"] .vs-nav a[aria-current="page"],
body[data-mode="app"] .vs-nav .ts-nav-list a[aria-current="page"],
body[data-mode="recruiter"] .vs-nav a[aria-current="page"],
body[data-mode="recruiter"] .vs-nav .ts-nav-list a[aria-current="page"] {
  color: rgba(100, 116, 139, 0.92); /* Neutral gray - no color */
  background: rgba(0, 0, 0, 0.1);
}

/* Pulsing glow for AI Logbook link after onboarding */
.logbook-glow-pulse {
  position: relative;
  animation: logbookGlowPulse 2s ease-in-out infinite;
}

.logbook-glow-pulse::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(110, 231, 249, 0.4) 0%, rgba(76, 201, 240, 0.2) 50%, transparent 100%);
  z-index: -1;
  animation: logbookGlowRing 2s ease-in-out infinite;
}

@keyframes logbookGlowPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(110, 231, 249, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(110, 231, 249, 0.6);
  }
}

@keyframes logbookGlowRing {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Support for navigation.js generated lists */
.vs-nav .ts-nav-list {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs-nav .ts-nav-list li {
  margin: 0;
  padding: 0;
}

.vs-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Ensure consistent vertical alignment */
  padding: 0;
  margin: 0;
  line-height: 1;
}

.vs-user {
  color: var(--vs-text-dim);
  font-size: 13px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Ensure consistent vertical alignment */
  padding: 0;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* --- buttons --- */
.vs-btn {
  appearance: none;
  border: 1px solid var(--vs-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--vs-text);
  border-radius: 12px;
  padding: 7px 12px; /* Reduced vertical padding for shorter header */
  font-size: 13px; /* Slightly smaller */
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, border-color 0.2s;
}

.vs-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* Logged-in pages: adjust button colors for dark text */
body[data-mode="app"] .vs-btn,
body[data-mode="recruiter"] .vs-btn {
  background: rgba(0, 0, 0, 0.05);
}

body[data-mode="app"] .vs-btn:hover,
body[data-mode="recruiter"] .vs-btn:hover {
  background: rgba(0, 0, 0, 0.09);
}

.vs-btn--primary {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.12);
}

body[data-mode="marketing"] .vs-btn--primary {
  background: linear-gradient(180deg, #6ee7f9 0%, #4cc9f0 100%);
  color: #0b1220;
  border-color: rgba(127, 215, 255, 0.4);
  box-shadow: 0 10px 26px rgba(99, 210, 255, 0.35);
}

body[data-mode="marketing"] .vs-btn--primary:hover {
  background: linear-gradient(180deg, #7ae0ff 0%, #63d2ff 100%);
  border-color: rgba(127, 215, 255, 0.6);
}

.vs-btn--primary:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* Logged-in pages: adjust primary button for dark text */
body[data-mode="app"] .vs-btn--primary,
body[data-mode="recruiter"] .vs-btn--primary {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.12);
}

body[data-mode="app"] .vs-btn--primary:hover,
body[data-mode="recruiter"] .vs-btn--primary:hover {
  background: rgba(0, 0, 0, 0.16);
}

.vs-btn--ghost {
  background: transparent;
}

/* --- focus accessibility --- */
.vs-header a:focus-visible,
.vs-header button:focus-visible {
  outline: 2px solid var(--vs-focus);
  outline-offset: 2px;
}

/* --- mobile toggle --- */
.vs-nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--vs-border);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.2s;
  /* Ensure consistent vertical alignment - no extra padding */
  padding: 0;
  margin: 0;
  line-height: 1;
  flex-shrink: 0;
}

.vs-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* Logged-in pages: adjust hamburger button hover for dark text */
body[data-mode="app"] .vs-nav-toggle,
body[data-mode="recruiter"] .vs-nav-toggle {
  border-color: var(--vs-border);
  background: rgba(0, 0, 0, 0.05);
}

body[data-mode="app"] .vs-nav-toggle:hover,
body[data-mode="recruiter"] .vs-nav-toggle:hover {
  background: rgba(0, 0, 0, 0.09);
}

.vs-nav-toggle__icon {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--vs-text);
  position: relative;
}

.vs-nav-toggle__icon::before,
.vs-nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--vs-text);
  transition: transform 0.2s, top 0.2s;
}

.vs-nav-toggle__icon::before { top: -6px; }
.vs-nav-toggle__icon::after { top: 6px; }

.vs-nav-toggle[aria-expanded="true"] .vs-nav-toggle__icon {
  background: transparent;
}

.vs-nav-toggle[aria-expanded="true"] .vs-nav-toggle__icon::before {
  top: 0;
  transform: rotate(45deg);
}

.vs-nav-toggle[aria-expanded="true"] .vs-nav-toggle__icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- drawer --- */
.vs-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100; /* Above header but not excessive */
  pointer-events: none; /* Don't block clicks when hidden */
}

.vs-drawer:not([hidden]) {
  pointer-events: auto; /* Allow clicks when visible */
}

.vs-drawer[hidden] {
  display: none;
}

.vs-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.vs-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 88vw);
  background: var(--vs-surface-strong);
  backdrop-filter: blur(var(--vs-blur));
  -webkit-backdrop-filter: blur(var(--vs-blur));
  border-left: 1px solid var(--vs-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.vs-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vs-drawer__close {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--vs-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--vs-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: background 0.2s;
}

.vs-drawer__close:hover {
  background: rgba(255, 255, 255, 0.09);
}

.vs-drawer__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
}

.vs-drawer__content a,
.vs-drawer__content .ts-nav-list a {
  color: var(--vs-text);
  text-decoration: none;
  padding: 12px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.2s;
  display: block;
}

.vs-drawer__content a:hover,
.vs-drawer__content .ts-nav-list a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.vs-drawer__content a[aria-current="page"],
.vs-drawer__content .ts-nav-list a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.12);
}

body[data-mode="app"] .vs-drawer__panel,
body[data-mode="recruiter"] .vs-drawer__panel {
  background: rgba(15, 23, 42, 0.95);
  border-left-color: rgba(148, 163, 184, 0.35);
  color: #f8fafc;
}

body[data-mode="app"] .vs-drawer__panel .brand-text,
body[data-mode="recruiter"] .vs-drawer__panel .brand-text {
  color: #f8fafc;
}

body[data-mode="app"] .vs-drawer__content a,
body[data-mode="app"] .vs-drawer__content .ts-nav-list a,
body[data-mode="recruiter"] .vs-drawer__content a,
body[data-mode="recruiter"] .vs-drawer__content .ts-nav-list a {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.2);
}

body[data-mode="app"] .vs-drawer__content a:hover,
body[data-mode="app"] .vs-drawer__content .ts-nav-list a:hover,
body[data-mode="recruiter"] .vs-drawer__content a:hover,
body[data-mode="recruiter"] .vs-drawer__content .ts-nav-list a:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Support for navigation.js generated lists in drawer */
.vs-drawer__content .ts-nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vs-drawer__content .ts-nav-list li {
  margin: 0;
  padding: 0;
}

.vs-drawer__hr {
  height: 1px;
  background: var(--vs-border);
  margin: 8px 0;
}

/* Auth state toggles */
[data-auth-only] {
  display: none;
}

body[data-auth-state="in"] [data-auth-only] {
  display: inline-flex;
}

body[data-auth-state="in"] [data-guest-only] {
  display: none;
}

body[data-auth-state="out"] [data-guest-only] {
  display: inline-flex;
}

body[data-auth-state="out"] [data-auth-only] {
  display: none;
}

/* --- responsive behavior --- */
/* First responsive breakpoint - move all nav links to hamburger */
@media (max-width: 1024px) {
  /* Hide all desktop navigation and action buttons */
  .vs-nav { 
    display: none !important; 
  }
  .vs-user { 
    display: none; 
  }
  .vs-header__actions .vs-btn,
  .vs-header__actions .vs-user {
    display: none !important;
  }
  
  /* Show hamburger menu */
  .vs-nav-toggle { 
    display: inline-flex; 
  }
  
  /* Hide desktop nav list in header */
  .vs-header__inner .vs-nav .ts-nav-list {
    display: none !important;
  }
  
  /* Show nav list in drawer */
  .vs-drawer__content .ts-nav-list {
    display: flex !important;
    flex-direction: column;
  }
  
  /* Ensure drawer content shows all nav links and buttons */
  .vs-drawer__content a:not(.vs-btn) {
    display: block;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--vs-text);
    text-decoration: none;
    transition: background 0.2s;
  }
  
  .vs-drawer__content a:not(.vs-btn):hover {
    background: rgba(255, 255, 255, 0.08);
  }
  
  /* Show all action buttons in drawer */
  .vs-drawer__content .vs-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
  
  /* Show user info in drawer */
  .vs-drawer__content .vs-user {
    display: block;
  }
}

/* Home page hero padding to prevent header overlap */
/* Minimal gap between header bottom and hero content */
.home-hero,
.ts-hero {
  scroll-margin-top: 120px;
  /* Minimal gap: header overlays hero, so minimal padding needed */
  padding-top: 0;
}

/* Ensure main content doesn't get covered */
main {
  position: relative;
  z-index: auto; /* No z-index to prevent stacking issues */
  scroll-margin-top: 120px;
}

/* Home page specific: minimal gap between header and content */
body[data-mode="marketing"] .ts-hero,
body[data-mode="marketing"] .home-hero {
  padding-top: 0; /* Header overlays hero, no padding needed */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vs-header,
  .vs-btn,
  .vs-nav a,
  .vs-drawer__panel {
    transition: none;
  }
}