/* =========================================================
   theme-override.css
   301 EVENTS — “SOCOOL” FULL HEADER + NAV EXECUTION
   Goal:
   - Top teal strip
   - Dark charcoal header (logo + long search + icons)
   - Dark charcoal nav row (SoCool-style typography)
   - Keep your existing site sections intact
   ========================================================= */

/* =========================
   0) TOKENS
   ========================= */
:root{
  --navy:#0a2463;
  --gold:#f4d03f;
  --electric-blue:#00b4d8;

  /* SoCool-like header tones */
  --top-teal:#0a87b9;         /* teal strip */
  --header-dark:#171717;      /* main black bar */
  --header-dark-2:#1c1c1c;    /* subtle variation */
  --search-bg:#3a3a3a;        /* search field fill */
  --search-border:#5a5a5a;    /* search border */
  --white:#ffffff;

  --maxw:1400px;

  /* Typography feel (SoCool: wide tracking, uppercase) */
  --nav-letterspace:0.16em;
  --nav-weight:800;
}

/* =========================
   1) GLOBAL CONTAINER
   ========================= */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}

/* =========================
   2) TOP BAR (TEAL STRIP)
   ========================= */
.top-bar{
  background:var(--top-teal) !important;
  color:#fff !important;
  padding:14px 0 !important;
}

.top-bar .top-bar-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:14px;
}

.top-bar .partner-link{
  color:#fff !important;
  text-decoration:none;
}

.top-bar .divider{
  color:rgba(255,255,255,0.65);
}

/* =========================
   3) MAIN HEADER BAR (DARK)
   - logo + search + utilities
   ========================= */
header.main-header{
  background:linear-gradient(180deg,var(--header-dark) 0%, var(--header-dark-2) 100%) !important;
  border-bottom:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:none !important;
}

header.main-header .header-container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 20px !important;
  display:flex;
  align-items:center;
  gap:24px;
}

/* Logo sizing (SoCool look = compact on left) */
header.main-header .logo img{
  height:62px;
  width:auto;
  display:block;
  border-radius:6px;
}

/* Make ALL header text white */
header.main-header,
header.main-header a,
header.main-header span{
  color:#fff !important;
}

/* Utility items (icon + label) */
.header-utilities{
  margin-left:auto;
  display:flex;
  gap:46px;
  align-items:center;
}

.header-utilities .utility-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff !important;
  opacity:0.92;
  transition:opacity .2s ease, transform .2s ease;
}

.header-utilities .utility-item:hover{
  opacity:1;
  transform:translateY(-1px);
}

/* Utility labels */
.header-utilities .utility-item span{
  font-size:13px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

/* Force SVG strokes to white */
header.main-header svg path{
  stroke:#fff !important;
}

/* =========================
   4) SEARCH BAR (SOCOOL STYLE)
   - long rectangular, dark grey fill
   ========================= */
.search-container{
  flex:1 1 auto;
  max-width:760px;                /* long like screenshot */
  display:flex;
  align-items:center;
  gap:10px;

  background:var(--search-bg) !important;
  border:2px solid var(--search-border) !important;
  border-radius:6px !important;
  padding:12px 14px !important;

  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}

.search-input{
  flex:1;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#fff !important;
  font-size:18px;
  font-weight:500;
}

.search-input::placeholder{
  color:rgba(255,255,255,0.55) !important;
  font-weight:500;
}

.search-btn{
  border:0 !important;
  background:transparent !important;
  color:rgba(255,255,255,0.85) !important;
  cursor:pointer;
  padding:4px 6px;
  transition:opacity .2s ease, transform .2s ease;
}

.search-btn:hover{
  opacity:1;
  transform:scale(1.05);
}

/* Focus ring */
.search-container:focus-within{
  border-color:rgba(255,255,255,0.75) !important;
}

/* =========================
   5) NAV ROW (DARK, SOCOOL TYPOGRAPHY)
   ========================= */
.main-navigation{
  background:linear-gradient(180deg,var(--header-dark) 0%, #111 100%) !important;
  border-bottom:1px solid rgba(255,255,255,0.10) !important;
}

.main-navigation .nav-container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 20px !important;
}

.nav-menu{
  display:flex;
  align-items:center;
  gap:56px;                     /* wide spacing like screenshot */
}

/* Links */
.nav-menu .nav-link{
  color:#fff !important;
  text-decoration:none;
  font-size:16px;
  font-weight:var(--nav-weight);
  text-transform:uppercase;
  letter-spacing:var(--nav-letterspace);
  opacity:0.92;
  transition:opacity .2s ease, color .2s ease;
}

.nav-menu .nav-link:hover{
  opacity:1;
  color:#fff !important;
}

/* Dropdown chevrons */
.dropdown-icon{
  opacity:0.9;
}

/* CTA in nav (Book Appointment = gold pill) */
.nav-link-cta{
  background:var(--gold) !important;
  color:#111 !important;
  padding:14px 18px !important;
  border-radius:14px !important;
  line-height:1.15;
  font-weight:900 !important;
  letter-spacing:0.10em !important;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  border:2px solid rgba(255,255,255,0.18);
}

.nav-link-cta:hover{
  filter:brightness(1.02);
}

/* =========================
   6) DROPDOWNS (KEEP CLEAN)
   ========================= */
.mega-dropdown,
.dropdown-menu{
  background:#fff !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.18) !important;
  border-radius:16px !important;
}

.dropdown-heading{
  color:#111 !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:0.10em;
}

.dropdown-list a{
  color:#1a1a1a !important;
  font-weight:700 !important;
}

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

/* =========================
   7) RESPONSIVE (KEEP HEADER LOOK)
   ========================= */
@media (max-width: 1100px){
  .header-utilities{
    gap:28px;
  }
  .nav-menu{
    gap:28px;
    flex-wrap:wrap;
  }
}

@media (max-width: 820px){
  header.main-header .header-container{
    flex-wrap:wrap;
  }

  .search-container{
    order:3;
    width:100%;
    max-width:none;
  }

  .header-utilities{
    margin-left:0;
    width:100%;
    justify-content:flex-end;
  }

  .top-bar .top-bar-links{
    font-size:12px;
    flex-wrap:wrap;
    text-align:center;
  }
}
/* =========================================================
   HEADER SIZE COMPRESSION (KEEP STYLE, REDUCE HEIGHT)
   ========================================================= */

/* Reduce top bar height */
.top-bar {
  padding: 8px 0 !important;
}

/* Reduce main header vertical size */
header.main-header .header-container {
  padding: 10px 20px !important;
}

/* Slightly smaller logo so header is shorter */
header.main-header .logo img {
  height: 80px !important;
}

/* Compact search bar height */
.search-container {
  padding: 8px 12px !important;
  max-width: 640px !important;
}

.search-input {
  font-size: 16px !important;
}

/* Utilities tighter */
.header-utilities {
  gap: 32px !important;
}

.header-utilities .utility-item span {
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
}

/* =========================
   NAV ROW — FORCE SINGLE LINE
   ========================= */

/* Reduce nav padding */
.main-navigation .nav-container {
  padding: 12px 20px !important;
}

/* Keep everything on ONE row */
.nav-menu {
  flex-wrap: nowrap !important;
  gap: 34px !important;
}

/* Slightly reduce nav font size */
.nav-menu .nav-link {
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
}

/* Compact CTA button */
.nav-link-cta {
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}

/* Prevent dropdown labels from breaking lines */
.nav-menu .nav-link,
.nav-link-cta {
  white-space: nowrap !important;
}