/* Multi-level (nested) navbar dropdown support.
   Bootstrap 5's default .dropdown-menu only supports one level out of the box;
   this adds support for 2-3+ nested levels, added by the CRM's Menu Bar page. */

.navbar .dropdown-submenu {
    position: relative;
}

.navbar .dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

/* Desktop: reveal nested submenu on hover */
@media (min-width: 992px) {
    .navbar .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* Mobile / collapsed navbar: submenus stack instead of flying out sideways,
   and are toggled by click via the small script in scripts.php */
@media (max-width: 991.98px) {
    .navbar .dropdown-submenu > .dropdown-menu {
        position: static;
        left: 0;
        margin-left: 1rem;
        border: none;
        box-shadow: none;
    }
}

.navbar .dropdown-submenu > .dropdown-toggle::after {
    float: right;
    margin-top: 8px;
}

/* Logo + site name in navbar */
.navbar-brand img.site-logo {
    max-height: 55px;
    width: auto;
}

/* Pricing Plans section (service_pricing) */
.pricing-plan {
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-plan:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.billing-toggle .period-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ---- Hero Slider Themes (5-10) ---- */

/* 5. Split Panel - solid color box, text left, image fills the rest */
.split-panel-box {
    background: rgba(0, 0, 0, .55);
    border-left: 5px solid var(--primary);
}

/* 6. Minimal Bottom Caption - caption pinned to bottom of the slide */
.slide-theme-bottom-caption .carousel-inner {
    top: auto;
    bottom: 0;
    transform: none;
}
.bottom-caption-box {
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}

/* 7. Bold Gradient Banner */
.gradient-banner-box {
    background: linear-gradient(135deg, var(--primary) 0%, rgba(0, 0, 0, .55) 100%);
}

/* 8. Floating White Card - dark text on a white card over the image */
.card-overlay-box h1,
.card-overlay-box p {
    color: #1f1f1f !important;
}

/* 9. Diagonal Accent Split - angled color panel behind the text */
.diagonal-split-box {
    background: rgba(0, 0, 0, .6);
    position: relative;
}
.diagonal-split-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary);
    opacity: .18;
    clip-path: polygon(0 0, 85% 0, 65% 100%, 0% 100%);
    z-index: -1;
}

/* 10. Neon Glow Accent - bold, dark, glowing title */
.neon-glow-box {
    background: rgba(0, 0, 0, .35);
}
.neon-glow-box h1 {
    text-shadow: 0 0 10px var(--primary), 0 0 24px var(--primary);
}

/* Google Rating badge */
.google-g-badge {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Hero slider video slides - fill the slide exactly like the <img> does */
.slide-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Page Header video background (when a page's header "image" field is
   actually a video file) - sits behind the title/breadcrumb with the same
   dark tint the default image background uses. */
.page-header-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.page-header-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(22, 22, 22, .7);
    z-index: 1;
}

/* Shared utility: object-fit:cover for any media_tag() output that needs
   to fill its container like a background (about section, quote CTA,
   why-choose-us background, etc.) */
.media-cover {
    object-fit: cover;
}