/* Municipal navigation: restrained surfaces, clear hierarchy and visible focus. */
body .osm-site-header .osm-primary-nav .sub-menu {
    box-sizing: border-box;
    width: 264px;
    min-width: 0;
    max-width: calc(100vw - 40px);
    padding: 8px;
    border: 1px solid var(--osm-submenu-border, #dfe5e8);
    border-radius: 16px;
    background: var(--osm-submenu-bg, #fff);
    box-shadow: 0 18px 48px rgb(15 28 38 / 13%), 0 3px 10px rgb(15 28 38 / 5%);
    z-index: 50;
}
body .osm-site-header .osm-primary-nav .sub-menu > li { margin: 0; }
body .osm-site-header .osm-primary-nav .sub-menu > li + li { margin-top: 3px; }
body .osm-site-header .osm-primary-nav .sub-menu > li > a {
    position: relative;
    padding: 12px 16px;
    border-radius: 9px;
    color: var(--osm-submenu-text, #172127);
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 160ms ease, color 160ms ease;
}
body .osm-site-header .osm-primary-nav .sub-menu > li > a:is(:hover, :focus-visible) {
    background: var(--osm-soft, #f1f5f7);
    background: color-mix(in srgb, var(--osm-submenu-hover-bg, var(--osm-primary)) 9%, var(--osm-submenu-bg, #fff));
    color: var(--osm-submenu-text, #172127);
}
body .osm-site-header .osm-primary-nav .sub-menu > li:is(.current-menu-item, .current_page_item) > a {
    background: var(--osm-submenu-hover-bg, var(--osm-primary));
    color: var(--osm-submenu-hover-text, #fff);
}
body .osm-site-header .osm-primary-nav .sub-menu > li > a:focus-visible {
    outline: 2px solid var(--osm-primary, #175b82);
    outline-offset: -2px;
}
body .osm-site-header .osm-primary-nav .menu-item-has-children > a::after {
    width: 5px; height: 5px; margin-left: 10px;
    transition: transform 160ms ease;
}
@media (min-width: 1400px) {
    body .osm-site-header .osm-primary-nav li > .sub-menu { top: calc(100% + 10px); left: 0; }
    /* A pointer bridge keeps the dropdown open while crossing the small gap. */
    body .osm-site-header .osm-primary-nav li > .sub-menu::before {
        content: ""; position: absolute; inset: -12px 0 100%;
    }
    body .osm-site-header .osm-primary-nav li:is(:hover, :focus-within) > .sub-menu {
        animation: oursask-dropdown-enter 160ms ease-out;
    }
    body .osm-site-header .osm-primary-nav .sub-menu .sub-menu { top: -9px; left: calc(100% + 8px); }
    body .osm-site-header .osm-primary-nav .sub-menu .sub-menu::before { inset: 0 100% 0 -10px; }
    body .osm-site-header .osm-primary-nav .sub-menu .menu-item-has-children > a { padding-right: 32px; }
    body .osm-site-header .osm-primary-nav .sub-menu .menu-item-has-children > a::after {
        position: absolute; right: 16px; top: 20px; margin: 0; transform: rotate(-45deg);
    }
    body .osm-site-header .osm-primary-nav > div > ul > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }
    body .osm-site-header .osm-primary-nav > div > ul > li:nth-last-child(-n+2) .sub-menu .sub-menu { left: auto; right: calc(100% + 8px); }
    body .osm-site-header .osm-primary-nav > div > ul > li:nth-last-child(-n+2) .sub-menu .sub-menu::before { inset: 0 -10px 0 100%; }
}
@media (max-width: 1399px) {
    body .osm-site-header .osm-primary-nav > div {
        border-radius: 16px; padding: 12px; box-shadow: 0 18px 48px rgb(15 28 38 / 13%);
    }
    body .osm-site-header .osm-primary-nav .sub-menu {
        position: static; width: auto; max-width: none; padding: 4px 0 4px 12px;
        margin: 3px 0 8px 14px; border: 0; border-left: 1px solid var(--osm-submenu-border, #dfe5e8);
        border-radius: 0; background: transparent; box-shadow: none;
    }
    body .osm-site-header .osm-primary-nav .sub-menu > li > a { min-height: 44px; padding: 11px 12px; }
    body .osm-site-header .osm-primary-nav .sub-menu > li > a { color: var(--osm-mobile-text, var(--osm-submenu-text)); }
    body .osm-site-header .osm-primary-nav .sub-menu > li > a:is(:hover, :focus-visible) {
        background: color-mix(in srgb, var(--osm-primary) 9%, var(--osm-mobile-bg, #fff));
        color: var(--osm-mobile-text, var(--osm-submenu-text));
    }
    body .osm-site-header .osm-primary-nav .sub-menu > li:is(.current-menu-item, .current_page_item) > a {
        background: var(--osm-submenu-hover-bg, var(--osm-primary)); color: var(--osm-submenu-hover-text, #fff);
    }
}
@keyframes oursask-dropdown-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    body .osm-site-header .osm-primary-nav li > .sub-menu { animation: none; }
    body .osm-site-header .osm-primary-nav .sub-menu a,
    body .osm-site-header .osm-primary-nav .menu-item-has-children > a::after { transition: none; }
}
