/* ============================================================
   Main menu dropdown support (Roofs → Residential / Commercial)
   Loads after style.min.css; breakpoints match the theme:
   mobile overlay  = max-width 29.99875em
   horizontal bar  = min-width 30em
   ============================================================ */

/* Keep the dropdown above page content (hero video, etc.) */
.header {
    position: relative;
    z-index: 60;
}

.menu__sub-list {
    list-style: none;
}

/* ---------- Desktop / tablet: hover dropdown ---------- */
@media (min-width: 30em) {
    .menu__item--has-children {
        position: relative;
    }

    /* Caret on the parent link */
    .menu__item--has-children > .menu__link::after {
        content: "\25BE"; /* ▾ */
        margin-left: 0.375em;
        font-size: 0.8em;
    }

    .menu__sub-list {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
        background-color: #2e649a;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(0.5rem);
        transform: translateY(0.5rem);
        -webkit-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
        transition: opacity 0.3s ease 0s, transform 0.3s ease 0s, visibility 0.3s ease 0s;
        z-index: 50;
    }

    .menu__item--has-children:hover > .menu__sub-list,
    .menu__item--has-children:focus-within > .menu__sub-list {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    .menu__sub-list li {
        white-space: nowrap;
    }

    /* Sub-links: full-width rows, always white on the blue panel
       (overrides .menu__list li.active a when the parent is active) */
    .menu__list li .menu__sub-list li a {
        display: block;
        width: 100%;
        color: #fff;
    }

    .menu__list li .menu__sub-list li.active {
        background-color: #e6e8e6;
    }

    .menu__list li .menu__sub-list li.active a {
        color: #123b64;
    }

    /* Highlight the parent item when a child page is being viewed */
    .menu__item--child-active {
        background-color: #e6e8e6;
    }

    .menu__item--child-active > .menu__link {
        color: #123b64;
    }
}

/* ---------- Mobile overlay: children shown inline ---------- */
@media (max-width: 29.99875em) {
    .menu__sub-list {
        display: -ms-grid;
        display: grid;
        gap: 0.25rem;
        margin-top: 0.5rem;
    }

    /* The gray "active" block looks wrong wrapped around the whole
       group — keep the parent transparent with white text, and only
       highlight the actual current page row below. */
    .menu__list li.menu__item--has-children,
    .menu__list li.menu__item--has-children.active {
        background-color: transparent;
    }

    .menu__list li.menu__item--has-children > .menu__link {
        color: #fff;
    }

    /* Smaller than the 2rem top-level links to show hierarchy */
    .menu__list li .menu__sub-list li a {
        font-size: 1.5rem;
        color: #fff;
    }

    /* Current page row: same gray treatment the theme uses elsewhere */
    .menu__list li .menu__sub-list li.active {
        background-color: #e6e8e6;
    }

    .menu__list li .menu__sub-list li.active a {
        color: #123b64;
    }
}