/* ==========================================================================
   MEGAMENU STYLES

   NOTE: --dp-accent is a PLACEHOLDER (#0f6f6a, a teal). style.css was not
   provided, so this does not know your real brand color/variable name.
   Replace --dp-accent with your actual primary color before shipping.
   ========================================================================== */

:root {
    --dp-accent: #0f6f6a; /* PLACEHOLDER — replace with real brand color */
}

.megamenu-item > .dropdown-toggle::after {
    vertical-align: 0.15em;
}

/* Your site applies a global .overflow-x utility class to every section,
   including the <nav>. That's fine for sections with no dropdown content,
   but overflow-x != visible forces overflow-y to compute as "auto" per the
   CSS spec — which clips the megamenu panel the instant it extends below
   the nav bar. This was the actual reason clicking Services did nothing
   visible: the toggle WAS working, the panel was just being cut off by its
   own parent. Only override at desktop widths; mobile's accordion layout
   (position: static, see below) doesn't have this problem. */
@media (min-width: 992px) {
    nav.main-nav.overflow-x {
        overflow: visible !important;
    }
}

/* Desktop: full-width panel anchored to the navbar.
   data-bs-display="static" on the toggle (see header.php) stops Bootstrap's
   Popper instance from injecting inline position/transform styles that would
   otherwise override this layout — that inline-style conflict was the cause
   of the megamenu not working correctly. */
@media (min-width: 992px) {
    .megamenu-item {
        position: static;
    }

    .megamenu {
        left: 0;
        right: 0;
        top: 100%;
        width: 100%;
        margin-top: 0;
        border: none;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 0;
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
        padding: 0;
    }

    /* Pure CSS hover trigger — no JS needed, so there's no dropdown state
       to fall out of sync with Bootstrap's own click-based toggle. Both
       can coexist: hover opens it, Bootstrap's .show class (from a click)
       also displays it via its own default rule. */
    @media (hover: hover) {
        .megamenu-item:hover > .megamenu {
            display: block;
            animation: dpMegaFade 0.15s ease-out;
        }
    }
}

@keyframes dpMegaFade {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile / collapsed navbar: stack like a normal accordion item inside
   the collapse menu instead of a full-width panel */
@media (max-width: 991.98px) {
    .megamenu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0.25rem;
        background-color: transparent;
        border: 0;
        box-shadow: none;
        padding-left: 0.5rem;
    }

    .megamenu .row {
        row-gap: 1.25rem;
    }

    .megamenu-img {
        max-width: 120px;
    }

    .megamenu-footer {
        display: none;
    }
}

.megamenu-category {
    display: block;
    text-decoration: none;
    color: inherit;
}

.megamenu-img {
    border-radius: var(--dp-radius, 10px);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.megamenu-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.megamenu-category:hover .megamenu-img img {
    transform: scale(1.06);
}

.megamenu-category h6 {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    /*font-weight: 600;*/
    color: #1a1a1a;
    line-height: 1.25;
}

.megamenu-category:hover h6 {
    color: var(--dp-accent);
}

.megamenu-sublist {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 0;
}

.megamenu-sublist li a {
    display: block;
    padding: 0.2rem 0;
    font-size: 0.8rem;
    color: #6b6b6b;
    text-decoration: none;
    line-height: 1.4;
}

.megamenu-sublist li a:hover {
    color: var(--dp-accent);
    padding-left: 3px;
}

.megamenu-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 1rem;
}