/* =========================================================
   SOCOOL-STYLE DARK THEME
   301 EVENTS — DARK PREMIUM HEADER + NAV
   NO WHITE TOP. EVER.
   Load this file LAST.
   ========================================================= */

/* =========================
   CORE COLOR TOKENS
   ========================= */
:root {
  --black: #0f0f10;
  --charcoal: #151515;
  --charcoal-soft: #1b1b1b;

  --white: #ffffff;
  --white-soft: rgba(255,255,255,0.85);
  --white-muted: rgba(255,255,255,0.65);

  --turquoise: #00b4d8;
  --gold: #f4d03f;

  --border-dark: rgba(255,255,255,0.08);
}

/* =========================
   GLOBAL RESET OVERRIDES
   ========================= */
body {
  background: #f5f6f7;
}

/* Kill any accidental white strips */
.top-bar,
.main-header,
.main-navigation {
  background: none !important;
}

/* =========================
   TOP UTILITY BAR (BLUE STRIP)
   ========================= */
.top-bar {
  background: #008ec4 !important;
  color: white;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.top-bar a {
  color: white !important;
  text-transform: uppercase;
  font-size: 12px;
}

/* =========================
   MAIN HEADER (LOGO + SEARCH)
   ========================= */
.main-header {
  background: var(--charcoal) !important;
  border-bottom: 1px solid var(--border-dark);
}

.header-container {
  max-width: 1500px;
}

/* Logo */
.logo img {
  height: 52px;
  filter: brightness(1.05);
}

/* Search bar — dark */
.search-container {
  background: #2a2a2a !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
}

.search-input {
  background: transparent;
  color: white;
}

.search-input::placeholder {
  color: rgba(255,255,255,0.55);
}

.search-btn {
  color: rgba(255,255,255,0.8);
}

/* Header utilities (Contact / Sign In / Cart) */
.header-utilities .utility-item {
  color: var(--white-soft) !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.header-utilities svg {
  stroke: white;
  opacity: 0.9;
}

/* =========================
   MAIN NAV BAR (THIS IS THE KEY)
   ========================= */
.main-navigation {
  background: var(--charcoal-soft) !important;
  border-bottom: 1px solid var(--border-dark);
}

.nav-container {
  max-width: 1500px;
}

/* NAV LINKS — EXACT STYLE MATCH */
.nav-link {
  color: white !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 26px 12px;
}

.nav-link:hover {
  color: var(--turquoise) !important;
}

/* Dropdown chevrons */
.dropdown-icon {
  stroke: white;
  opacity: 0.85;
}

/* BOOK APPOINTMENT CTA */
.nav-link-cta {
  background: transparent !important;
  color: white !important;
  border: 2px solid rgba(255,255,255,0.35);
  padding: 16px 18px !important;
  line-height: 1.2;
  letter-spacing: 0.18em;
}

.nav-link-cta:hover {
  background: white !important;
  color: black !important;
}

/* =========================
   MEGA DROPDOWN (DARK, NOT WHITE)
   ========================= */
.mega-dropdown,
.dropdown-menu {
  background: #1e1e1e !important;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.dropdown-heading {
  color: white !important;
  font-size: 12px;
  letter-spacing: 0.18em;
}

.dropdown-list a {
  color: var(--white-muted) !important;
  font-weight: 500;
}

.dropdown-list a:hover {
  color: var(--turquoise) !important;
}

/* =========================
   HERO TEXT — SOCOOL STYLE
   ========================= */
.hero-kicker {
  background: rgba(0,0,0,0.55);
  color: white;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.slide-title {
  font-size: 64px;
  letter-spacing: 0.28em;
  font-weight: 300;
}

.slide-subtitle {
  font-size: 44px;
  letter-spacing: 0.32em;
  font-weight: 200;
}

.slide-description {
  font-size: 14px;
  letter-spacing: 0.24em;
  opacity: 0.9;
}

/* =========================
   BUTTONS — MINIMAL + CLEAN
   ========================= */
.slide-cta {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.slide-cta.secondary {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.45);
}

/* =========================
   TRUST BAR — KEEP LIGHT
   ========================= */
.trust-bar {
  background: #f7f8f9 !important;
}

/* =========================
   REMOVE ALL WHITE GAPS
   ========================= */
header,
nav,
.top-bar {
  margin: 0;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 900px) {
  .nav-link {
    padding: 18px 10px;
    letter-spacing: 0.18em;
  }

  .slide-title {
    font-size: 42px;
  }

  .slide-subtitle {
    font-size: 28px;
  }
}