/* ===========================================
   NAVBAR-MEGA-V2.CSS - Navbar Refinements
   Imports base navbar-mega.css, adds always-on
   glass effect & tighter border radii.
   Toggle: USE_V2_STYLES = True
   =========================================== */

@import url("navbar-mega.c65ee00a3b17.css");

/* -----------------------------------------
   0. Top Breathing Room
   ----------------------------------------- */
.navbar {
  padding-top: 0.5rem !important;
}

/* -----------------------------------------
   1. Always-On Glass Effect (default state)
   ----------------------------------------- */
.navbar .container {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(200%);
  -webkit-backdrop-filter: blur(16px) saturate(200%);
  border-radius: 24px;
  border: 1px solid var(--im-accent-200);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 16px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* Scrolled state — slightly more opaque, same radius */
.navbar.is-scrolled .container {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 24px;
  border: 1px solid var(--im-accent-200);
}

/* -----------------------------------------
   2. Tighter Dropdown Radius + More Opaque
   ----------------------------------------- */
.im-mega-panel {
  border-radius: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
}

.navbar.is-scrolled .im-mega-panel {
  background: rgba(255, 255, 255, 0.98);
}

/* -----------------------------------------
   3. Remove translateX Hover on Links
   ----------------------------------------- */
.im-mega-link:hover,
.im-mega-link:focus-visible {
  transform: none;
  padding-left: 0.5rem;
}

.im-biz-link:hover,
.im-biz-link:focus-visible {
  transform: none;
  padding-left: 0.5rem;
}

.im-tool-link:hover,
.im-tool-link:focus-visible {
  transform: none;
}

.im-resource-link:hover,
.im-resource-link:focus-visible {
  transform: none;
}

/* -----------------------------------------
   4. Business CTA Card — Tighter Radius
   ----------------------------------------- */
.im-biz-cta {
  border-radius: 8px;
}

/* -----------------------------------------
   5. Dark Mode Adjustments
   ----------------------------------------- */
.dark-mode .navbar .container {
  background: rgba(23, 23, 23, 0.75);
  border-radius: 24px;
  border: 1px solid var(--im-accent-bright);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 2px 16px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.dark-mode .navbar.is-scrolled .container {
  background: rgba(23, 23, 23, 0.88);
  border-radius: 24px;
  border: 1px solid var(--im-accent-bright);
}

.dark-mode .im-mega-panel {
  border-radius: 0;
  background: rgba(23, 23, 23, 0.97);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
}

.dark-mode .navbar.is-scrolled .im-mega-panel {
  background: rgba(23, 23, 23, 0.98);
}

/* -----------------------------------------
   6. Mobile — Reset Glass on Narrow Screens
   ----------------------------------------- */
@media (max-width: 991.98px) {
  .im-mega-panel {
    border-radius: 0;
    background: transparent;
  }
}