/* ============================================================
   HairTC — Header CSS (sitewide)
   Top utility bar + nav hover effects
   ============================================================ */

/* ── TOP UTILITY BAR ── */
.hh-topbar {
  background: #0F172A;
  border-bottom: 1px solid #1e293b;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 101;
}
.hh-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hh-topbar-logo {
  font-family: 'Playfair Display', Georgia, serif;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-right: 16px;
  padding-right: 16px;
  border-right: 1px solid #334155;
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}
.hh-topbar-logo span { color: #2563EB; }
.hh-topbar-btn {
  background: #1e293b;
  color: #94A3B8;
  border: none;
  padding: 7px 16px;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms, color 150ms;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}
.hh-topbar-btn:hover,
.hh-topbar-btn.active {
  background: #2563EB !important;
  color: #fff !important;
  text-decoration: none;
}

/* ── MAIN NAV — navy hover, white text, all pages ── */

/* Ensure GP header uses Inter */
.site-header,
.site-header .inside-header,
.main-navigation,
.nav-primary,
.site-branding {
  font-family: 'Inter', sans-serif !important;
}

/* Logo sizing */
.site-header .custom-logo,
.site-header .site-logo img {
  max-height: 42px !important;
  width: auto !important;
}

/* Nav link base styles */
.main-navigation .nav-primary > ul > li > a,
.main-navigation .menu > li > a,
nav.main-navigation li a {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #0F172A !important;
  text-transform: uppercase !important;
  letter-spacing: 0.055em !important;
  padding: 7px 13px !important;
  border-radius: 7px !important;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease !important;
  display: inline-block !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

/* HOVER — navy background, white text, subtle lift */
.main-navigation .nav-primary > ul > li > a:hover,
.main-navigation .menu > li > a:hover,
nav.main-navigation li a:hover {
  background: #0F172A !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

/* Compare Clinics — bordered item, same navy hover */
.main-navigation li.menu-item-231 > a,
.main-navigation li:last-of-type > a {
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
}
.main-navigation li.menu-item-231 > a:hover {
  background: #0F172A !important;
  color: #fff !important;
  border-color: #0F172A !important;
  transform: translateY(-2px) !important;
}

/* GET A FREE QUOTE button */
.main-navigation li.menu-item-232 > a,
.site-header a[href*="consultation"],
.generate-header-nav .button-primary {
  background: #2563EB !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  border: none !important;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
}
.main-navigation li.menu-item-232 > a:hover {
  background: #1D4ED8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37,99,235,0.35) !important;
  color: #fff !important;
}

/* Mobile nav — keep readable */
@media (max-width: 768px) {
  .main-navigation li a:hover {
    transform: none !important;
    border-radius: 6px !important;
    background: #0F172A !important;
    color: #fff !important;
  }
  .hh-topbar { padding: 7px 12px; overflow-x: auto; }
  .hh-topbar-logo { font-size: 13px; margin-right: 10px; padding-right: 10px; }
  .hh-topbar-btn { padding: 6px 12px; font-size: 11px; white-space: nowrap; }
}