/*
 * Hover-driven nav dropdowns with a nested (services -> cities) second level.
 *
 * Added on top of the template rather than editing style.css. Values for
 * background, radius, shadow and item styling mirror the template's own
 * .dropdown-menu / .dropdown-item rules so the menus read as part of the
 * original design. Bootstrap 4 opens dropdowns on click only and has no
 * submenu support, hence these rules.
 */

.nav-has-dropdown {
    position: relative;
}

/* ---------- First level ---------- */

.header-con .navbar-light .navbar-nav .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 250px;
    padding: 10px;
    margin-top: 10px;
    background-color: var(--secondary--color);
    border-radius: 10px;
    box-shadow: 0px 0px 100px rgb(0 0 0 / 15%);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/*
 * The panels wrap their list in an inner element so the collapsed nav can
 * animate them (see the accordion block at the end of this file). On desktop
 * that wrapper must not affect layout at all.
 */
.header-con .navbar-light .navbar-nav .nav-dropdown-inner,
.header-con .navbar-light .navbar-nav .nav-submenu-inner {
    display: contents;
}

/* The 13-city list is laid out in two columns so the panel stays compact. */
.header-con .navbar-light .navbar-nav .nav-dropdown--columns {
    column-count: 2;
    column-gap: 4px;
    min-width: 340px;
}

/* Bridges the gap between the trigger and the panel so the hover doesn't drop. */
.header-con .navbar-light .navbar-nav .nav-dropdown::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: 16px;
}

.header-con .navbar-light .navbar-nav .nav-has-dropdown:hover > .nav-dropdown,
.header-con .navbar-light .navbar-nav .nav-has-dropdown:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Items ---------- */

.header-con .navbar-light .navbar-nav .nav-dropdown-item {
    position: relative;
    list-style: none;
}

.header-con .navbar-light .navbar-nav .nav-dropdown-link {
    display: block;
    padding: 7px 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--accent--color);
    text-decoration: none;
    border-radius: 10px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/*
 * Navy text on a yellow ground for hover: the label itself stays navy, so the
 * highlight reads as a change of background rather than of text colour.
 */
.header-con .navbar-light .navbar-nav .nav-dropdown-link:hover,
.header-con .navbar-light .navbar-nav .nav-dropdown-link:focus {
    background-color: var(--primary--color);
    color: var(--accent--color);
    text-decoration: none;
}

.header-con .navbar-light .navbar-nav .nav-submenu-arrow {
    float: right;
    margin-left: 14px;
    font-size: 13px;
    line-height: 24px;
}

/* ---------- Second level (cities per service) ---------- */

.header-con .navbar-light .navbar-nav .nav-submenu {
    position: absolute;
    top: -10px;
    left: 100%;
    min-width: 200px;
    padding: 10px;
    margin-left: 8px;
    background-color: var(--secondary--color);
    border-radius: 10px;
    box-shadow: 0px 0px 100px rgb(0 0 0 / 15%);
    z-index: 21;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/*
 * The 13-city list would overflow a single column, so lay it out in two.
 * It stays top-aligned with the parent panel (rather than with its own
 * trigger row) so the panel never runs off the top of the viewport.
 */
.header-con .navbar-light .navbar-nav .nav-submenu--tall {
    column-count: 2;
    column-gap: 4px;
    min-width: 340px;
}

/* Bridges the horizontal gap to the submenu. */
.header-con .navbar-light .navbar-nav .nav-submenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 8px;
    height: 100%;
}

.header-con .navbar-light .navbar-nav .nav-has-submenu:hover > .nav-submenu,
.header-con .navbar-light .navbar-nav .nav-has-submenu:focus-within > .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Flip the submenu to the left when it would overflow the viewport's right edge. */
.header-con .navbar-light .navbar-nav .nav-dropdown--flip .nav-submenu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 8px;
}

.header-con .navbar-light .navbar-nav .nav-dropdown--flip .nav-submenu::before {
    left: auto;
    right: -8px;
}

/* ---------- Expander buttons ---------- */

/*
 * Only meaningful in the collapsed nav; on desktop the panels open on hover,
 * so the chevron button is hidden and takes no space.
 */
.nav-expander {
    display: none;
}

/* ---------- Collapsed nav (mobile / tablet) ---------- */

@media (max-width: 991px) {
    /*
     * The collapsed menu is an accordion.
     *
     * Every panel used to be forced open here (`visibility: visible` with no
     * height limit), which stacked 6 services, 6 nested city lists and 13
     * cities into one column: 1666px of menu — over two screens — and 56
     * links to scroll past. Panels are now closed until their section is
     * tapped, so the menu opens at roughly one screen and the visitor
     * chooses what to expand.
     *
     * `grid-template-rows: 0fr -> 1fr` is what animates it: unlike max-height
     * it needs no magic number, so a panel is exactly as tall as its content.
     */
    .header-con .navbar-light .navbar-nav .nav-dropdown,
    .header-con .navbar-light .navbar-nav .nav-submenu {
        position: static;
        transform: none;
        min-width: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        background: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        overflow: hidden;
        /* Columns and bottom-anchoring are desktop-only affordances. */
        column-count: initial;
        top: auto;
        bottom: auto;

        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.28s ease;
    }

    /*
     * The wrapper is `display: contents` on desktop; here it has to be a real
     * box, because it is the single grid row that gets squeezed to 0fr.
     * `min-height: 0` lets it actually collapse below its content height.
     */
    .header-con .navbar-light .navbar-nav .nav-dropdown-inner,
    .header-con .navbar-light .navbar-nav .nav-submenu-inner {
        display: block;
        min-height: 0;
        overflow: hidden;
        /*
         * A 0fr grid row clips the panel to no height, but its links would
         * still be tab-stops and still be announced by a screen reader.
         * `visibility: hidden` takes them out of both, and is re-enabled
         * below when the section opens. It is transitioned with a delay so
         * the content stays painted for the duration of the collapse.
         */
        visibility: hidden;
        transition: visibility 0s linear 0.28s;
    }

    .header-con .navbar-light .navbar-nav .nav-item.is-open > .nav-dropdown > .nav-dropdown-inner,
    .header-con
        .navbar-light
        .navbar-nav
        .nav-dropdown-item.is-open
        > .nav-submenu
        > .nav-submenu-inner {
        visibility: visible;
        transition-delay: 0s;
    }

    .header-con .navbar-light .navbar-nav .nav-item.is-open > .nav-dropdown,
    .header-con .navbar-light .navbar-nav .nav-dropdown-item.is-open > .nav-submenu {
        grid-template-rows: 1fr;
    }

    /* Inner padding lives on a wrapper row so it does not show when closed. */
    .header-con .navbar-light .navbar-nav .nav-item.is-open > .nav-dropdown {
        padding: 4px 0 6px 12px;
    }

    .header-con .navbar-light .navbar-nav .nav-dropdown-item.is-open > .nav-submenu {
        padding: 6px 0 4px 12px;
    }

    /*
     * The chevron button. Sits on the right of the row it belongs to; the
     * label beside it stays a normal link to the overview page.
     */
    .header-con .navbar-light .navbar-nav .nav-expander {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 46px;
        height: 46px;
        padding: 0;
        border: none;
        background: none;
        color: var(--accent--color);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        transition: transform 0.25s ease;
    }

    .header-con .navbar-light .navbar-nav .nav-expander:focus-visible {
        outline: 2px solid var(--accent--color);
        outline-offset: -4px;
        border-radius: 8px;
    }

    /* Chevron points up once its panel is open. */
    .header-con .navbar-light .navbar-nav .nav-item.is-open > .nav-expander,
    .header-con .navbar-light .navbar-nav .nav-dropdown-item.is-open > .nav-expander {
        transform: rotate(180deg);
    }

    /* The row needs to be a positioning context for the absolute button. */
    .header-con .navbar-light .navbar-nav .nav-has-dropdown,
    .header-con .navbar-light .navbar-nav .nav-has-submenu {
        position: relative;
    }

    /* Keep the label clear of the chevron. */
    .header-con .navbar-light .navbar-nav .nav-has-dropdown > .nav-link,
    .header-con .navbar-light .navbar-nav .nav-has-submenu > .nav-dropdown-link {
        padding-right: 50px;
    }

    .header-con .navbar-light .navbar-nav .nav-expander--sub {
        width: 40px;
        height: 40px;
        font-size: 13px;
    }

    .header-con .navbar-light .navbar-nav .nav-dropdown::before,
    .header-con .navbar-light .navbar-nav .nav-submenu::before {
        content: none;
    }

    .header-con .navbar-light .navbar-nav .nav-dropdown-link {
        padding: 5px 0;
        font-size: 15px;
        line-height: 22px;
        white-space: normal;
    }

    .header-con .navbar-light .navbar-nav .nav-submenu-arrow {
        display: none;
    }

    /*
     * Cities under a service read as an inline run of pills rather than a
     * tall single column, so an expanded service costs a couple of rows
     * instead of thirteen.
     *
     * The flex layout lives on an inner wrapper, NOT on .nav-submenu itself —
     * .nav-submenu is the collapsing grid above, and `display: flex` here
     * would override that and leave the panel permanently open.
     */
    .header-con .navbar-light .navbar-nav .nav-submenu-inner {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /*
     * The template's collapsed nav forces `li { width: 100%; margin: 0 10px }`
     * (responsive.css), which would put every city on its own row. Both are
     * reset here so the pills can sit side by side; the pill chrome lives on
     * the <li> because that is the flex item.
     */
    .header-con .navbar-light .navbar-nav .nav-submenu .nav-dropdown-item {
        width: auto;
        margin: 0;
        padding-bottom: 0;
        border: 1px solid rgb(7 41 92 / 20%);
        border-radius: 20px;
    }

    .header-con .navbar-light .navbar-nav .nav-submenu .nav-dropdown-link {
        padding: 2px 10px;
        font-size: 13px;
        line-height: 20px;
    }
}