@charset "UTF-8";
/* snippet-navbar-shadcn (moved from inline <style> in snippet-navbar-shadcn.php) */

#snippet-navbar-fixed-dropdown .navbar {
  min-height: 4.5rem !important;
  transition:
    min-height 200ms ease,
    background-color 200ms ease,
    -webkit-backdrop-filter 200ms ease,
    backdrop-filter 200ms ease;
}

#snippet-navbar-fixed-dropdown .navbar.md-navbar-past-hero {
  min-height: 3.5rem !important;
  /* "Frosted glass" effect without reducing opacity of the contents */
  background: rgba(
    255,
    255,
    255,
    0.75
  ) !important; /* override later `.navbar-marketing { background: var(--bs-white); }` */
  /* Make the frosted edge read a bit clearer on light backgrounds */
  border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
  will-change: backdrop-filter;
}

.nav-link-font {
  font-size: clamp(
    0.75rem,
    1.4vw,
    0.875rem
  ); /* smallest size, scales with viewport, largest size */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: 0.05em;
}
@media (max-width: 767.98px) {
  .nav-link-font {
    font-size: 1.0625rem !important; /* force 17px min on mobile */
  }
}

.bars {
  padding: 20px;
}

/* Ensure nav-item is positioned for absolute arrow */
#snippet-navbar-fixed-dropdown .navbar-nav > .nav-item {
  position: relative;
}

/* progress bar START */
.mdbar {
  background: transparent;
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}
#MDBar {
  background-color: var(--bs-primary) !important;
}
/* progress bar END */

/* Respect reduced-motion preference across navbar UI */
@media (prefers-reduced-motion: reduce) {
  #snippet-navbar-fixed-dropdown *,
  #snippet-navbar-fixed-dropdown *::before,
  #snippet-navbar-fixed-dropdown *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dropdown Arrow (Stripe-style) - Desktop only */

/* ===================================
   DROPDOWNS
   =================================== */

.dropdown-menu {
  font-size: 0.9rem;
  border: none;
  box-shadow: var(--md-box-shadow);
}

/* Dropdown Arrow (Stripe-style) */
.nav-item .SiteHeaderArrow {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-top: 0px;
  background-color: var(--bs-body-bg);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: none;
  border-right: none;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.02);
  z-index: 1001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Show arrow when dropdown is active */
.nav-item.show .SiteHeaderArrow,
.nav-item:hover .SiteHeaderArrow {
  opacity: 1;
}

/* Ensure dropdown menu has proper spacing for arrow */
.nav-item .dropdown-menu {
  margin-top: 1rem;
}

.dropdown-menu .dropdown-header {
  font-size: 0.75rem;
  font-weight: var(--md-font-weight-bold);
  display: flex;
  align-items: center;
}

.dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
}

.dropdown-menu .dropdown-item .dropdown-item-icon {
  margin-right: 0.5rem;
  line-height: 1;
}

.dropdown-menu .dropdown-item .dropdown-item-icon svg {
  height: 0.9em;
  width: 0.9em;
}

.dropdown-menu .dropdown-item.active .dropdown-item-icon,
.dropdown-menu .dropdown-item:active .dropdown-item-icon {
  color: var(--bs-white);
}

.dropdown .dropdown-toggle {
  display: inline-flex;
  align-items: center;
}

.dropdown .dropdown-toggle .dropdown-arrow {
  margin-left: 0.4rem;
  margin-right: 0;
  transition: transform 0.1s ease-in-out;
  font-size: 0.6em;
}

.dropdown .dropdown-toggle.show .dropdown-arrow {
  transform: rotate(90deg);
}

/* Show arrow when dropdown is active */
.nav-item.show .SiteHeaderArrow,
.nav-item:hover .SiteHeaderArrow,
.dropdown.show .SiteHeaderArrow {
  opacity: 1;
}

/* Hide on mobile */
@media (max-width: 767.98px) {
  .SiteHeaderArrow {
    display: none;
  }
}

/* Dark mode: frosted effect on scroll-past-hero */
[data-bs-theme="dark"]
  #snippet-navbar-fixed-dropdown
  .navbar.md-navbar-past-hero {
  /* Match light mode's frosted opacity, but with a true black tint */
  background: rgba(0, 0, 0, 0.75) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Dark mode: Dropdown Arrow - System Preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .nav-item .SiteHeaderArrow {
    background-color: var(--bs-mode, #1b1e21);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.2);
  }
}

/* Dark mode: Dropdown Arrow - Manual Toggle */
[data-bs-theme="dark"] .SiteHeaderArrow {
  background-color: var(--bs-dark, #1b1e21);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.2);
}

/* Apply blur only when supported (prevents "it does nothing" confusion in unsupported browsers) */
@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  #snippet-navbar-fixed-dropdown .navbar.md-navbar-past-hero {
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
  }
}

/* When the mobile overlay menu is open, prevent scrolling the page underneath.
   We keep scrolling enabled within the navbar overlay / dropdown menus. */
html.md-navbar-open,
body.md-navbar-open {
  overflow: hidden !important;
  height: 100% !important;
}

body.md-navbar-open {
  position: fixed !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  touch-action: none; /* extra safety on mobile */
}

/* Dropdown toggles currently show TWO arrows:
   - your inline SVG chevron
   - Bootstrap's default caret from `.dropdown-toggle::after`
   Keep the SVG and hide the Bootstrap caret. */
#snippet-navbar-fixed-dropdown .dropdown-toggle::after {
  display: none !important;
}

/* Brand (logo icon + clinic name) */
#snippet-navbar-fixed-dropdown .navbar-logo {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

#snippet-navbar-fixed-dropdown .navbar-logo:focus,
#snippet-navbar-fixed-dropdown .navbar-logo:focus-visible,
#snippet-navbar-fixed-dropdown .navbar-logo:active {
  outline: none !important;
  box-shadow: none !important;
}

#snippet-navbar-fixed-dropdown .navbar-logo .md-navbar-brand-text {
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  font-size: 1.35rem;
  color: inherit;
  white-space: nowrap;
}

/* Rotate chevrons on top-level nav items when dropdown is open */
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item.dropdown.show
  > button.nav-link
  svg.lucide-chevron-down,
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item.dropdown
  > button.nav-link[aria-expanded="true"]
  svg.lucide-chevron-down {
  transform: rotate(180deg);
}

/* ===================================
   CONTACT US DROPDOWN 
   =================================== */

/* Contact Card - Base Styles */
.md-contact-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  background-color: transparent;
  position: relative;
  overflow: hidden;
}

.md-contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb), 0.03) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.md-contact-card:hover::before {
  opacity: 1;
}

.md-contact-card:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.15);
  background-color: rgba(var(--bs-primary-rgb), 0.02);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Highlight Card (Featured - Book Online) */
.md-contact-card-highlight {
  background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb), 0.04) 0%,
    rgba(var(--bs-secondary-rgb), 0.04) 100%
  );
  border-color: rgba(var(--bs-primary-rgb), 0.12);
}

.md-contact-card-highlight:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb), 0.08) 0%,
    rgba(var(--bs-secondary-rgb), 0.08) 100%
  );
  border-color: rgba(var(--bs-primary-rgb), 0.25);
  box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb), 0.15);
}

/* Icon Container */
.md-contact-card-icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb), 0.08) 0%,
    rgba(var(--bs-primary-rgb), 0.12) 100%
  );
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.md-contact-card:hover .md-contact-card-icon {
  background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb), 0.15) 0%,
    rgba(var(--bs-primary-rgb), 0.2) 100%
  );
  transform: scale(1.05) rotate(2deg);
}

.md-contact-card-highlight .md-contact-card-icon {
  background: linear-gradient(
    135deg,
    var(--bs-primary) 0%,
    var(--bs-secondary) 100%
  );
}

.md-contact-card-icon svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: var(--bs-primary);
  fill: none;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.md-contact-card-highlight .md-contact-card-icon svg {
  stroke: var(--bs-white);
}

.md-contact-card:hover .md-contact-card-icon svg {
  stroke: var(--bs-primary);
}

.md-contact-card-highlight:hover .md-contact-card-icon svg {
  stroke: var(--bs-white);
  transform: scale(1.1);
}

/* Content */
.md-contact-card-content {
  flex: 1;
  min-width: 0;
}

.md-contact-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bs-body-color);
  margin-bottom: 0.25rem;
  transition: color 0.2s ease;
}

.md-contact-card:hover .md-contact-card-title {
  color: var(--bs-primary);
}

.md-contact-card-desc {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--bs-secondary-color, #6c757d);
  opacity: 0.85;
}

/* ===================================
   DARK MODE SUPPORT
   =================================== */

/* Manual Dark Mode */
[data-bs-theme="dark"] .md-contact-card {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .md-contact-card::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    transparent 100%
  );
}

[data-bs-theme="dark"] .md-contact-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .md-contact-card-highlight {
  background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb), 0.08) 0%,
    rgba(var(--bs-secondary-rgb), 0.08) 100%
  );
  border-color: rgba(var(--bs-primary-rgb), 0.2);
}

[data-bs-theme="dark"] .md-contact-card-highlight:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb), 0.12) 0%,
    rgba(var(--bs-secondary-rgb), 0.12) 100%
  );
  border-color: rgba(var(--bs-primary-rgb), 0.35);
}

[data-bs-theme="dark"] .md-contact-card-icon {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.12) 100%
  );
}

[data-bs-theme="dark"] .md-contact-card:hover .md-contact-card-icon {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
}

[data-bs-theme="dark"] .md-contact-card-icon svg {
  stroke: rgba(255, 255, 255, 0.9);
}

[data-bs-theme="dark"] .md-contact-card:hover .md-contact-card-title {
  color: rgba(255, 255, 255, 1);
}

/* System Preference Dark Mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .md-contact-card {
    color: var(--bs-body-color);
  }

  :root:not([data-bs-theme="light"]) .md-contact-card::before {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 100%
    );
  }

  :root:not([data-bs-theme="light"]) .md-contact-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  :root:not([data-bs-theme="light"]) .md-contact-card-highlight {
    background: linear-gradient(
      135deg,
      rgba(var(--bs-primary-rgb), 0.08) 0%,
      rgba(var(--bs-secondary-rgb), 0.08) 100%
    );
    border-color: rgba(var(--bs-primary-rgb), 0.2);
  }

  :root:not([data-bs-theme="light"]) .md-contact-card-highlight:hover {
    background: linear-gradient(
      135deg,
      rgba(var(--bs-primary-rgb), 0.12) 0%,
      rgba(var(--bs-secondary-rgb), 0.12) 100%
    );
    border-color: rgba(var(--bs-primary-rgb), 0.35);
  }

  :root:not([data-bs-theme="light"]) .md-contact-card-icon {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.12) 100%
    );
  }

  :root:not([data-bs-theme="light"])
    .md-contact-card:hover
    .md-contact-card-icon {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.2) 100%
    );
  }

  :root:not([data-bs-theme="light"]) .md-contact-card-icon svg {
    stroke: rgba(255, 255, 255, 0.9);
  }

  :root:not([data-bs-theme="light"])
    .md-contact-card:hover
    .md-contact-card-title {
    color: rgba(255, 255, 255, 1);
  }
}

/* Mobile Responsive */
@media (max-width: 767.98px) {
  .md-contact-card {
    padding: 0.625rem 0.75rem;
  }

  .md-contact-card-icon {
    width: 2rem;
    height: 2rem;
  }

  .md-contact-card-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .md-contact-card-title {
    font-size: 0.875rem;
  }

  .md-contact-card-desc {
    font-size: 0.75rem;
  }
}

/* Over a video banner: make top-level navigation items white (but don't affect dropdown menus) */
#snippet-navbar-fixed-dropdown
  .navbar-marketing:not(.navbar-shrink)
  .navbar-nav
  > .nav-item
  > .nav-link,
#snippet-navbar-fixed-dropdown
  .navbar-marketing:not(.navbar-shrink)
  .navbar-nav
  > .nav-item
  > button.nav-link {
  color: var(--bs-white) !important;
  /*
    box-shadow: 0 3px 4px rgba(0,0,0,0.1);
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter:saturate(180%) blur(5px);
    backdrop-filter:saturate(180%) blur(5px);    
    */
}

/* Top-level hover highlight: match Bootstrap dropdown hover background in BOTH themes */
:root:not([data-bs-theme="dark"]) #snippet-navbar-fixed-dropdown,
[data-bs-theme="light"] #snippet-navbar-fixed-dropdown {
  --md-topnav-hover-stroke: #111;
}
[data-bs-theme="dark"] #snippet-navbar-fixed-dropdown {
  --md-topnav-hover-stroke: var(--bs-body-color);
}

#snippet-navbar-fixed-dropdown .navbar-nav > .nav-item > .nav-link,
#snippet-navbar-fixed-dropdown .navbar-nav > .nav-item > button.nav-link {
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

#snippet-navbar-fixed-dropdown .navbar-nav > .nav-item > .nav-link:hover,
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item
  > .nav-link:focus-visible,
#snippet-navbar-fixed-dropdown .navbar-nav > .nav-item > button.nav-link:hover,
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item
  > button.nav-link:focus-visible {
  background-color: var(--md-secondary-100) !important;
  color: var(--bs-secondary) !important;
  -webkit-text-fill-color: var(
    --bs-secondary
  ) !important; /* Safari/WebKit edge cases */
}

/* If any nested element (eg SVG) has its own color, force it to inherit on hover */
#snippet-navbar-fixed-dropdown .navbar-nav > .nav-item > .nav-link:hover *,
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item
  > .nav-link:focus-visible
  *,
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item
  > button.nav-link:hover
  *,
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item
  > button.nav-link:focus-visible
  * {
  color: inherit !important;
}

/* Ensure the chevron SVG also flips to black on hover (SVG uses stroke, not text color) */
#snippet-navbar-fixed-dropdown .navbar-nav > .nav-item > .nav-link:hover svg,
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item
  > .nav-link:focus-visible
  svg,
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item
  > button.nav-link:hover
  svg,
#snippet-navbar-fixed-dropdown
  .navbar-nav
  > .nav-item
  > button.nav-link:focus-visible
  svg {
  stroke: var(--md-topnav-hover-stroke) !important;
}

/* Keep dropdown menu text black (scoped to light mode so we don't break dark theme) */
:root:not([data-bs-theme="dark"]) #snippet-navbar-fixed-dropdown .dropdown-menu,
[data-bs-theme="light"] #snippet-navbar-fixed-dropdown .dropdown-menu {
  --bs-dropdown-link-color: #111;
  --bs-dropdown-link-hover-color: #111;
  --bs-dropdown-link-active-color: #111;
  --bs-dropdown-header-color: #111;
  /* Override Bootstrap's default blue "active/pressed" background with the same gray used on hover */
  --bs-dropdown-link-active-bg: var(--md-secondary-100);
}

/* Light mode: solid white navbar with black text */
:root:not([data-bs-theme="dark"])
  #snippet-navbar-fixed-dropdown
  .navbar-marketing,
[data-bs-theme="light"] #snippet-navbar-fixed-dropdown .navbar-marketing {
  /*background: var(--bs-body-bg); */
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
}

/* Light mode DESKTOP ONLY: black text and inverse hover (keep mobile white) */
@media (min-width: 767.98px) {
  /* Light mode: brand text should be dark on the solid white navbar */
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-logo
    .md-navbar-brand-text,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-logo
    .md-navbar-brand-text {
    color: #111 !important;
  }

  /* Light mode: make nav items black text (override the white text rule) */
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link,
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
  }

  /* Light mode: make chevron SVG black to match text */
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link
    svg,
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link
    svg,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link
    svg,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link
    svg {
    stroke: #111 !important;
  }

  /* Light mode: on hover, use the SAME highlight background as dropdown items */
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link:hover,
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link:focus-visible,
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link:hover,
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link:focus-visible,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link:hover,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link:focus-visible,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link:hover,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link:focus-visible {
    background-color: var(--md-secondary-100) !important;
    color: var(--bs-secondary) !important;
    -webkit-text-fill-color: var(--bs-secondary) !important;
  }

  /* Light mode: on hover, make chevron SVG match the text */
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link:hover
    svg,
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link:focus-visible
    svg,
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link:hover
    svg,
  :root:not([data-bs-theme="dark"])
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link:focus-visible
    svg,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link:hover
    svg,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > .nav-link:focus-visible
    svg,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link:hover
    svg,
  [data-bs-theme="light"]
    #snippet-navbar-fixed-dropdown
    .navbar-marketing
    .navbar-nav
    > .nav-item
    > button.nav-link:focus-visible
    svg {
    stroke: var(--md-topnav-hover-stroke) !important;
  }
}

/* Dark mode: align with `snippet-navbar-fixed-dropdown` theme rules */
[data-bs-theme="dark"] #snippet-navbar-fixed-dropdown .navbar-marketing {
  /* Black + reduced opacity (like light mode's softened white) */
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
}

[data-bs-theme="dark"] #snippet-navbar-fixed-dropdown .navbar-shrink {
  box-shadow: 0 3px 4px rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: saturate(180%) blur(5px);
  backdrop-filter: saturate(180%) blur(5px);
}

[data-bs-theme="dark"] #snippet-navbar-fixed-dropdown .dropdown-menu {
  --bs-dropdown-bg: var(--bs-dark);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-active-color: var(--bs-body-color);
  --bs-dropdown-link-disabled-color: var(--bs-gray-200);
  --bs-dropdown-divider-bg: var(--bs-body-bg);
  -webkit-box-shadow: none;
  box-shadow: none;
}

#snippet-navbar-fixed-dropdown .dropdown-header {
  font-size: 0.65rem !important;
  margin-left: 0.5rem !important;
}

[data-bs-theme="dark"] #snippet-navbar-fixed-dropdown .dropdown-header {
  color: var(--bs-white) !important;
}

/* Dropdown items: no extra padding (we'll use a tiny gap on mobile instead) */
#snippet-navbar-fixed-dropdown .dropdown-menu .dropdown-item {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.8rem !important;
  transition: all 0.2s ease-in-out !important;
  /* Allow long titles to wrap instead of being clipped */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile-only navbar behavior:
   - hamburger on the far right
   - collapsed menu becomes a full-screen overlay
   - nav items left-aligned in a vertical list */
@media (max-width: 767.98px) {
  /* When the mobile menu is open we show a full-screen backdrop. Ensure the navbar (controls + panel + footer)
       sits ABOVE the backdrop (otherwise the overlay can dim the nav UI due to stacking contexts). */
  #snippet-navbar-fixed-dropdown .navbar.fixed-top {
    z-index: 1095 !important;
  }

  /* Mobile: when scrolled past hero (`.md-navbar-past-hero`), DO NOT use the desktop frosted/blur style.
       Keep the navbar (parent of `.md-mobile-nav-controls`) solid when the menu is NOT open. */
  html:not(.md-navbar-open)
    #snippet-navbar-fixed-dropdown
    .navbar.md-navbar-past-hero {
    background: var(--bs-white) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-bs-theme="dark"]:not(.md-navbar-open)
    #snippet-navbar-fixed-dropdown
    .navbar.md-navbar-past-hero {
    background: var(--bs-dark) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Shared sizing vars for mobile panel/backdrop masking */
  #snippet-navbar-fixed-dropdown {
    /* Full-screen mobile nav */
    --md-mobile-panel-width: 100vw;
    --md-mobile-topbar-height: 4rem;
    --md-mobile-header-height: calc(
      env(safe-area-inset-top, 0px) + var(--md-mobile-topbar-height)
    );
  }

  /* Remove the default Bootstrap navbar vertical padding and lock the header height
       so OPEN/CLOSED look identical with no extra whitespace around the controls row. */
  #snippet-navbar-fixed-dropdown .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: var(--md-mobile-header-height) !important;
    height: var(--md-mobile-header-height);
  }

  /* Mobile top bar layout:
       hamburger = far left, logo = centered, other controls = far right */
  #snippet-navbar-fixed-dropdown .container-fluid {
    position: relative; /* anchor for absolute-centered logo */
    /* Make the header container match the controls row height (open/closed) */
    display: flex;
    align-items: stretch;
    height: var(--md-mobile-header-height);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* Make CLOSED layout full-bleed so it matches the OPEN (fixed) layout width */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* AOS adds transforms; that breaks `position: fixed` for the mobile controls when opening the menu */
    transform: none !important;
  }

  /* Group top buttons into a single "header" layer above the scrolling menu */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-controls {
    /* Always pin on mobile so the layout never reflows/“tightens” when opening */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1065; /* above the overlay (1060) */
    min-height: 4rem;
    display: flex;
    align-items: center;
    width: calc(100%);
    height: var(--md-mobile-header-height);
    box-sizing: border-box;
    /* Use the OPEN padding as the canonical mobile header sizing so CLOSED matches OPEN */
    padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) 1rem 0.5rem;
    /* box-shadow: 0 1px 0 rgba(17, 17, 17, 0.08); */
    /* Keep controls crisp + not “dimmed” by the backdrop */
    background: var(--bs-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* (No special open-state rule needed; we keep it pinned in both states.) */

  /* Reduce Safari/iOS compositing blur on icons/logo */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-controls img,
  #snippet-navbar-fixed-dropdown .md-mobile-nav-controls svg {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Mobile-only: tiny gap between dropdown items (no padding, especially no right padding) */
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .dropdown-menu
    .dropdown-item,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu
    .dropdown-item {
    padding: 0 !important;
  }

  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .dropdown-menu
    .dropdown-item:not(:last-child),
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu
    .dropdown-item:not(:last-child) {
    margin-bottom: 0.6rem !important;
  }
  /* Mobile header icon ordering:
       - phone on the left
       - hamburger on the right
       (logo stays centered via absolute positioning) */
  #snippet-navbar-fixed-dropdown .navbar-toggler.bars {
    margin-left: auto; /* push to far right */
    position: relative;
    z-index: 1063; /* above the full-screen menu */
    order: 2;
  }

  /* Center the logo in the mobile top bar (independent of left/right control widths) */
  #snippet-navbar-fixed-dropdown .navbar-toggler.navbar-logo {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
  }

  #snippet-navbar-fixed-dropdown .md-mobile-nav-controls {
    justify-content: flex-start;
  }

  /* Phone icon */
  #snippet-navbar-fixed-dropdown .navbar-toggler[aria-label="Call Now!"] {
    margin-left: 0;
  }

  /* Right-side controls (theme toggle + phone) */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-controls-right {
    margin-left: 0; /* no longer the "push-right" element */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    order: 1; /* move to left of the hamburger */
  }

  /* Toggle hamburger <-> X (depends on icon classes from your ICON_* output) */
  /* Keep both icons perfectly overlapped + animate between them */
  #snippet-navbar-fixed-dropdown .navbar-toggler.bars {
    position: relative;
  }

  #snippet-navbar-fixed-dropdown .navbar-toggler.bars .icon-bars,
  #snippet-navbar-fixed-dropdown .navbar-toggler.bars .icon-xmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition:
      opacity 160ms ease,
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
    line-height: 1;
    margin: 0 !important;
    pointer-events: none;
  }

  /* Make the hamburger icon bigger (without changing the button size) */
  #snippet-navbar-fixed-dropdown .navbar-toggler.bars .icon-bars {
    font-size: 1.35rem;
  }
  #snippet-navbar-fixed-dropdown .navbar-toggler.bars .icon-bars svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  /* Ensure the close (X) icon has a visible size/color on mobile */
  #snippet-navbar-fixed-dropdown .navbar-toggler.bars .icon-xmark {
    width: 1.35rem;
    height: 1.35rem;
    color: #111; /* default light background */
  }

  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .navbar-toggler.bars
    .icon-xmark {
    color: #fff;
  }

  /* Default: X is hidden + slightly rotated/scaled for a nicer morph */
  #snippet-navbar-fixed-dropdown .navbar-toggler.bars .icon-xmark {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.8);
  }
  #snippet-navbar-fixed-dropdown
    .navbar-toggler.bars[aria-expanded="true"]
    .icon-bars {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.8);
  }
  #snippet-navbar-fixed-dropdown
    .navbar-toggler.bars[aria-expanded="true"]
    .icon-xmark {
    opacity: 1 !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  /* Keep other top controls above the overlay as well */
  #snippet-navbar-fixed-dropdown .navbar-toggler.navbar-logo,
  #snippet-navbar-fixed-dropdown .navbar-toggler[aria-label="Call Now!"] {
    position: relative;
    z-index: 1061;
  }

  /* Mobile nav panel (full screen) */
  #snippet-navbar-fixed-dropdown .navbar-collapse {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100vw;
    height: 100vh;
    background: var(--bs-white);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    box-shadow: none;
    border-right: none;

    /* Layout: scrollable body + pinned footer */
    display: flex;
    flex-direction: column;

    /* leave padding to the body/footer, not the overlay container */
    padding: 0;

    /* never scroll the overlay itself (keeps footer pinned); only body scrolls */
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: pan-y;
    z-index: 1060;

    /* animation (closed state) */
    opacity: 0;
    transform: translateX(-105%);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 180ms ease,
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0s linear 220ms;
  }

  /* Open state */
  #snippet-navbar-fixed-dropdown .navbar-collapse.show {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 180ms ease,
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* Click-outside backdrop */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    /* Dim the entire page behind the nav while it slides */
    background: rgba(15, 15, 16, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Close faster than the panel slide-out */
    transition:
      opacity 80ms ease,
      visibility 0s linear 80ms;
    z-index: 1059; /* just below the panel (1060); above page content */
    touch-action: none;
  }

  #snippet-navbar-fixed-dropdown .md-mobile-nav-backdrop.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 160ms ease;
  }

  #snippet-navbar-fixed-dropdown {
    position: fixed !important;
    top: 0 !important;
    z-index: 10000;
  }

  /* Scrollable nav body (the ONLY scrollbar in the mobile overlay) */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-body {
    /* flex: 1 1 auto; */
    /* leave room for the fixed top controls row so content never overlaps it */
    padding: calc(env(safe-area-inset-top, 0px) + 6.5rem) 1.25rem 1.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* Some layouts wrap content in `.text-center`; force the mobile menu content left. */
    text-align: left !important;
    height: 100vh;
    margin-bottom: 8rem;
  }

  /* Pinned footer CTA row */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-footer {
    /* flex: 0 0 auto; */
    position: fixed;
    width: 100%;
    bottom: calc(env(safe-area-inset-bottom) + 6rem);
    padding: 0.75rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    padding-top: 1.25rem;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    /* Layout is handled by `.md-mobile-footer-bar` */
  }

  /* Theme toggle buttons in the mobile footer */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-footer .color-mode-buttons {
    width: 100%;
    justify-content: center;
  }

  #snippet-navbar-fixed-dropdown
    .md-mobile-nav-footer
    .color-mode-buttons
    .btn {
    flex: 1 1 0;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  /* Theme buttons in mobile footer */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-footer .dark-mode-switch {
    width: 100%;
  }

  #snippet-navbar-fixed-dropdown .md-mobile-nav-footer .dark-mode-switch .btn {
    flex: 1 1 0;
    white-space: nowrap;
  }

  /* Footer CTA buttons: make icons consistent size */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-footer .btn svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  #snippet-navbar-fixed-dropdown .mobile-nav-footer-theme-switch {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: fit-content !important;
    display: inline-flex;
    align-items: center;
  }

  /* Footer layout: theme left, pill centered */
  #snippet-navbar-fixed-dropdown .md-mobile-footer-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  #snippet-navbar-fixed-dropdown .md-mobile-footer-cta {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* Add horizontal dividers like the reference (top-level items only) */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-body .navbar-nav > .nav-item {
    border-bottom: 1px solid rgba(17, 17, 17, 0.1);
    padding: 0.25rem 0;
  }

  #snippet-navbar-fixed-dropdown
    .md-mobile-nav-body
    .navbar-nav
    > .nav-item:last-child {
    border-bottom: 0;
  }

  /* Remove the "pill" feel on mobile list items; make them read like a menu */
  #snippet-navbar-fixed-dropdown
    .md-mobile-nav-body
    .navbar-nav
    > .nav-item
    > .nav-link,
  #snippet-navbar-fixed-dropdown
    .md-mobile-nav-body
    .navbar-nav
    > .nav-item
    > button.nav-link {
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* During Bootstrap's transition phase (`.collapsing`), animate based on html state classes */
  #snippet-navbar-fixed-dropdown .navbar-collapse.collapsing {
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 180ms ease,
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Ensure Bootstrap's inline height doesn't interfere with our fixed offcanvas */
    height: 100vh !important;
  }

  /* Opening: offscreen -> onscreen */
  html.md-navbar-opening
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing {
    opacity: 1;
    transform: translateX(0);
  }

  /* Closing: onscreen -> offscreen */
  html.md-navbar-closing
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing {
    opacity: 0;
    transform: translateX(-105%);
  }

  /* When the mobile menu is OPEN, make top-level items muted (dropdown items stay black) */
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .navbar-nav
    > .nav-item
    > .nav-link,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .navbar-nav
    > .nav-item
    > .nav-link,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .navbar-nav
    > .nav-item
    > button.nav-link,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .navbar-nav
    > .nav-item
    > button.nav-link {
    color: rgba(17, 17, 17, 0.7) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.7) !important;
    background: transparent !important;
  }

  /* Make the chevron SVG match the text color in the open mobile menu */
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .navbar-nav
    > .nav-item
    > .nav-link
    svg,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .navbar-nav
    > .nav-item
    > .nav-link
    svg,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .navbar-nav
    > .nav-item
    > button.nav-link
    svg,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .navbar-nav
    > .nav-item
    > button.nav-link
    svg {
    stroke: #111 !important;
  }

  /* Make dropdown "cards" seamless in the mobile full-screen menu */
  #snippet-navbar-fixed-dropdown .navbar-collapse.collapsing .dropdown-menu,
  #snippet-navbar-fixed-dropdown .navbar-collapse.show .dropdown-menu {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  /* Mobile dropdown open/close animation.
       We can't animate `display: none`, so keep the dropdown-menu laid out and animate max-height/opacity instead.
       Also: do NOT create a second scrollbar (we use overflow:hidden, not overflow-y:auto). */
  #snippet-navbar-fixed-dropdown .navbar-collapse.collapsing .dropdown-menu,
  #snippet-navbar-fixed-dropdown .navbar-collapse.show .dropdown-menu {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    pointer-events: none;
    transition:
      max-height 240ms ease,
      opacity 180ms ease,
      transform 240ms ease,
      padding 240ms ease;
    will-change: max-height, opacity, transform;
  }

  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu.show,
  #snippet-navbar-fixed-dropdown .navbar-collapse.show .dropdown-menu.show {
    max-height: 9999px; /* large enough to fit any menu without inner scrolling */
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    #snippet-navbar-fixed-dropdown .navbar-collapse.collapsing .dropdown-menu,
    #snippet-navbar-fixed-dropdown .navbar-collapse.show .dropdown-menu {
      transition: none !important;
    }
  }

  /* Mobile-only: use GAP between items (no padding) */
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu
    .dropdown-item,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .dropdown-menu
    .dropdown-item {
    padding: 0 !important; /* override markup `py-*` utilities */
    margin: 0 !important;
  }

  /* Mobile dropdown spacing:
       - Parent headers (e.g. "Family Dentistry") should be flush-left (no left margin)
       - Child links under a header should be indented */
  #snippet-navbar-fixed-dropdown .navbar-collapse.collapsing .dropdown-header,
  #snippet-navbar-fixed-dropdown .navbar-collapse.show .dropdown-header {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Indent ONLY the simple child links generated by `snippet_navbar()` (class="dropdown-item")
       and NOT the preview card item (which uses `.rounded-4`). */
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu
    a.dropdown-item:not(.rounded-4),
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .dropdown-menu
    a.dropdown-item:not(.rounded-4) {
    margin-left: 0.25rem !important;
  }

  /* Apply gap per column so links are evenly spaced without adding padding */
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .dropdown-menu.show
    .row.g-0
    > [class*="col-"],
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu.show
    .row.g-0
    > [class*="col-"] {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* match item-to-item spacing */
  }

  /* The first "header" item sits in its o    wn column; give it the same spacing
       below it as the rest of the dropdown items have between themselves. */
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .dropdown-menu.show
    .row.g-0
    > [class*="col-"]:first-child
    > .dropdown-item,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu.show
    .row.g-0
    > [class*="col-"]:first-child
    > .dropdown-item {
    margin-bottom: 1rem !important;
  }

  /* Mobile dropdown layout (full-screen menu): force vertical flow */
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .dropdown-menu.show
    .row.g-0,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu.show
    .row.g-0 {
    display: block;
  }

  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .dropdown-menu.show
    .row.g-0
    > [class*="col-"],
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu.show
    .row.g-0
    > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tighten spacing so the buttons list sits neatly under the preview card */
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .dropdown-menu.show
    .row.g-0
    > .p-3,
  #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .dropdown-menu.show
    .row.g-0
    > .p-3 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Left-align + stack menu items (override the existing flex utility classes).
       Scope to the scrollable body so the footer CTA row can stay centered. */
  #snippet-navbar-fixed-dropdown .md-mobile-nav-body .navbar-nav {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important; /* override `ms-auto` on the UL */
    margin-right: 0 !important;
    gap: 0.25rem !important;
  }

  #snippet-navbar-fixed-dropdown .md-mobile-nav-body .navbar-nav > .nav-item {
    width: 100% !important;
  }

  #snippet-navbar-fixed-dropdown
    .md-mobile-nav-body
    .navbar-nav
    > .nav-item
    > .nav-link,
  #snippet-navbar-fixed-dropdown
    .md-mobile-nav-body
    .navbar-nav
    > .nav-item
    > button.nav-link {
    width: 100% !important;
    display: flex !important; /* override `d-inline-flex` */
    justify-content: flex-start !important;
    text-align: left !important;
  }
}

/* Desktop: Bootstrap hides `.navbar-toggler` on `navbar-expand-md` at md+.
   Keep the full logo link visible without affecting the hamburger button. */
@media (min-width: 767.98px) {
  #snippet-navbar-fixed-dropdown
    .navbar-expand-md
    .navbar-toggler.navbar-logo-desktop {
    display: inline-flex !important;
    align-items: center;
  }
}

@media (max-width: 767.98px) {
  #snippet-navbar-fixed-dropdown .navbar-toggler.navbar-logo-desktop {
    display: none !important;
  }
}

@media (min-width: 767.98px) {
  #snippet-navbar-fixed-dropdown .navbar-toggler.navbar-logo-mobile {
    display: none !important;
  }
}

/* Mobile-first: keep dropdowns IN the document flow when the navbar is collapsed,
   so they are full-width and scroll naturally (no absolute positioning). */
#snippet-navbar-fixed-dropdown
  .navbar-nav
  .dropdown.dropdown-xl
  > .dropdown-menu {
  position: static;
  width: 100%;
  min-width: 20rem;
  max-width: 100%;
  transform: none;
}

/* Optional: if you want each dropdown item to behave like a 2-line block on mobile */
#snippet-navbar-fixed-dropdown
  .navbar-nav
  .dropdown.dropdown-xl
  > .dropdown-menu
  .dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Desktop (md+): Bootstrap dropdowns become absolutely-positioned; avoid shrink-to-fit
   by removing the narrow positioned ancestor and allowing the menu to size to content. */
@media (min-width: 767.98px) {
  /* Let the nav list span the container so dropdowns aren't constrained by shrink-to-fit UL width */
  #snippet-navbar-fixed-dropdown [data-slot="navigation-menu-list"] {
    width: 100%;
  }

  #snippet-navbar-fixed-dropdown .navbar-nav .dropdown.dropdown-xl {
    position: static; /* override Bootstrap's `.dropdown { position: relative; }` */
  }

  #snippet-navbar-fixed-dropdown
    .navbar-nav
    .dropdown.dropdown-xl
    > .dropdown-menu {
    position: absolute;
    /* Reduced spacing for tighter layout with arrow */
    /* top: calc(100% + 0.625rem); */
    top: calc(100% - 0.5rem);
    left: 50%;
    transform: translateX(-50%);

    /* Keep ALL desktop dropdown cards on-screen */
    width: max-content;
    min-width: 0;
    max-width: calc(100vw - 2rem);

    z-index: 1000; /* below arrow (1001) but above other content */
  }

  /* Desktop hover UX: keep menu open when moving from trigger -> menu (bridge the gap) */
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    .dropdown.dropdown-xl
    > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -0.625rem;
    height: 0.625rem;
    background: transparent;
  }

  /* Desktop-only: open dropdowns on hover (and keep accessible via keyboard) */
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    > .dropdown.dropdown-xl:hover
    > .dropdown-menu,
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    > .dropdown.dropdown-xl:focus-within
    > .dropdown-menu {
    display: block;
  }

  /* Show arrow on hover-open as well */
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    > .dropdown.dropdown-xl:hover
    > .SiteHeaderArrow,
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    > .dropdown.dropdown-xl:focus-within
    > .SiteHeaderArrow {
    opacity: 1;
  }

  /* Rotate chevron on hover-open as well */
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    > .dropdown.dropdown-xl:hover
    > button.nav-link
    svg.lucide-chevron-down,
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    > .dropdown.dropdown-xl:focus-within
    > button.nav-link
    svg.lucide-chevron-down {
    transform: rotate(180deg);
  }

  /* Contact Us dropdown: align under its trigger (instead of centered like mega menus) */
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    .dropdown.dropdown-xl.dropdown-align-start {
    position: relative !important; /* restore containing block for the absolute dropdown */
  }

  #snippet-navbar-fixed-dropdown
    .navbar-nav
    .dropdown.dropdown-xl.dropdown-align-start
    > .dropdown-menu {
    left: 0 !important;
    transform: none !important;
    top: calc(100% - 0.5rem); /* Match the reduced spacing */
  }

  /* Desktop-only: slightly smaller dropdown item text (mobile unchanged) */
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    .dropdown.dropdown-xl
    > .dropdown-menu
    a.dropdown-item {
    font-size: 0.8rem;
  }

  /* Dental Services dropdown: make it wider to accommodate 4 columns */
  /* NOTE: `.dropdown-menu` is not the adjacent sibling of the button (there's `.SiteHeaderArrow` in between),
       so we use `~` (general sibling) instead of `+`. */
  #snippet-navbar-fixed-dropdown
    #navbarDropdownDentalServices
    ~ .dropdown-menu {
    width: min(60rem, calc(100vw - 2rem));
  }

  /* Dental Services dropdown: slightly smaller link text on desktop only (mobile unchanged)
    #snippet-navbar-fixed-dropdown #navbarDropdownDentalServices + .dropdown-menu a.dropdown-item {
        font-size: 0.95rem;
    } */
}

/* Medium-only (md): keep ALL navbar dropdown menus fully on-screen.
   - Clamp menu width to the viewport (prevents left/right overflow)
   - Allow vertical scrolling if the menu is tall
   - Override global `text-wrap: nowrap !important` so long labels wrap instead of overflowing */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Medium-only: keep dropdowns anchored to the navbar (same vertical positioning as desktop),
       but prevent horizontal overflow and allow vertical scrolling when tall. */
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    .dropdown.dropdown-xl
    > .dropdown-menu {
    /* Do NOT change position/top here (keeps the tight gap under the navbar) */
    width: fit-content !important; /* shrink-to-fit on abs-positioned menus */
    min-width: 20rem !important;
    max-width: calc(100vw - 2rem) !important;

    max-height: calc(100vh - 8rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
  }

  /* Medium-only: override the higher-specificity align-start rule so these menus don't run off the right edge */
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    .dropdown.dropdown-xl.dropdown-align-start
    > .dropdown-menu {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Medium-only: Dental Services has an explicit wide desktop width; undo that on medium */
  #snippet-navbar-fixed-dropdown
    #navbarDropdownDentalServices
    ~ .dropdown-menu {
    width: fit-content !important;
    max-width: calc(100vw - 2rem) !important;
  }

  /* Allow long link titles to wrap (overrides the global `text-wrap: nowrap !important`) */
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    .dropdown.dropdown-xl
    > .dropdown-menu
    a.dropdown-item,
  #snippet-navbar-fixed-dropdown
    .navbar-nav
    .dropdown.dropdown-xl
    > .dropdown-menu
    .dropdown-header {
    white-space: normal !important;
    text-wrap: wrap !important;
    /* `anywhere` can cause the browser to choose a *very* narrow min-content width (letter-by-letter).
           Keep wrapping, but prefer breaking at normal points. */
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Medium-only: make these two dropdowns wider (they look bad when allowed to shrink too far),
       while still clamping to the viewport so they never overflow. */
  #snippet-navbar-fixed-dropdown #navbarDropdownPatientInfo ~ .dropdown-menu,
  #snippet-navbar-fixed-dropdown #navbarDropdownNews ~ .dropdown-menu {
    width: fit-content !important;
    min-width: 15rem !important;
    max-width: calc(100vw - 2rem) !important;
  }
  #snippet-navbar-fixed-dropdown
    #navbarDropdownDentalServices
    ~ .dropdown-menu {
    width: fit-content !important;
    min-width: 30rem !important;
    max-width: calc(100vw - 2rem) !important;
  }

  /* Medium-only: ensure Contact dropdown cards don't get too narrow */
  #snippet-navbar-fixed-dropdown .dropdown-menu .md-contact-card {
    min-width: 15rem !important;
  }
}

#snippet-navbar-fixed-dropdown {
  overflow-x: hidden !important;
}

/* Don't force desktop padding here; keep dropdown items consistent with base rules */
.dropdown-item {
  text-wrap: nowrap !important;
}

/* Mobile overlay background + menu item colors for dark mode */
@media (max-width: 767.98px) {
  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .md-mobile-nav-controls {
    background: var(--bs-dark);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  [data-bs-theme="dark"] #snippet-navbar-fixed-dropdown .navbar-collapse {
    background: rgba(15, 15, 16, 0.98);
  }

  [data-bs-theme="dark"] #snippet-navbar-fixed-dropdown .md-mobile-nav-footer {
    background: rgba(15, 15, 16, 0.98);
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .md-mobile-nav-backdrop {
    background: rgba(0, 0, 0, 0.45);
  }

  /* When the mobile menu is OPEN in dark mode: keep top-level items readable */
  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .navbar-nav
    > .nav-item
    > .nav-link,
  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .navbar-nav
    > .nav-item
    > .nav-link,
  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .navbar-nav
    > .nav-item
    > button.nav-link,
  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .navbar-nav
    > .nav-item
    > button.nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important;
  }

  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .navbar-nav
    > .nav-item
    > .nav-link
    svg,
  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .navbar-nav
    > .nav-item
    > .nav-link
    svg,
  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.collapsing
    .navbar-nav
    > .nav-item
    > button.nav-link
    svg,
  [data-bs-theme="dark"]
    #snippet-navbar-fixed-dropdown
    .navbar-collapse.show
    .navbar-nav
    > .nav-item
    > button.nav-link
    svg {
    stroke: rgba(255, 255, 255, 0.85) !important;
  }
}