@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-secondary)!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.10);
}

/* 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.60rem !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.50);
        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.10);
        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.70) !important;
        -webkit-text-fill-color: rgba(17, 17, 17, 0.70) !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.10);
    }

    [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;
    }
}