/* Shared orgsite section navigation. Keep the menu above the overlapping hero.
 * Legacy themes use important rules, so this opt-in component owns its layout and colors. */
:root .sub-nav-container.orgsite-subnav {
    position: relative !important; z-index: 20 !important; margin: -30px auto 50px !important; padding: 0 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav {
    position: relative !important; width: calc(100% - 48px) !important; max-width: 1060px !important; min-width: 0 !important;
    margin: 0 auto !important; padding: 0 !important; background: #fff !important; border: 0 !important; border-radius: 8px !important;
    box-shadow: 0 5px 15px rgb(0 0 0 / 10%) !important; overflow: hidden !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul {
    display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important;
    width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; gap: 0 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li {
    position: relative !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important;
    min-width: 0 !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important;
    background: transparent !important; border: 0 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li::after { display: none !important; }
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li > a {
    display: flex !important; flex: 1 !important; align-items: center !important; justify-content: center !important;
    min-height: 56px !important; height: auto !important; margin: 0 !important; padding: 14px 18px !important;
    color: var(--text-main, #333) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important;
    font-family: inherit !important; font-size: 16px !important; font-weight: 500 !important; line-height: 1.5 !important;
    white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important;
    text-decoration: none !important; text-align: center !important; box-shadow: none !important;
    transition: background-color .15s, color .15s !important; touch-action: manipulation !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li.active > a,
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li > a[aria-current="page"] {
    background: var(--main-color, #ff7f2a) !important; color: var(--orgsite-subnav-active-text, #fff) !important; font-weight: 700 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav > ul > li:not(.active) > a:hover {
    background: var(--sub-color, #d65f16) !important; color: #fff !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav a:focus-visible {
    outline: 3px solid var(--text-main, #222) !important; outline-offset: -4px !important;
}
/* Nested section links remain available with a pointer or keyboard on desktop. */
:root .sub-nav-container.orgsite-subnav .sub-nav:has(.depth-3) { overflow: visible !important; }
:root .sub-nav-container.orgsite-subnav .sub-nav li.has-depth > .depth-3 {
    display: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; position: absolute !important; z-index: 2 !important; top: 100% !important; left: 0 !important;
    width: max-content !important; min-width: 100% !important; max-width: min(360px, calc(100vw - 24px)) !important;
    margin: 0 !important; padding: 8px !important; list-style: none !important; background: #fff !important;
    border: 1px solid #eee !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 5px 15px rgb(0 0 0 / 10%) !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav .has-depth:hover > .depth-3,
:root .sub-nav-container.orgsite-subnav .sub-nav .has-depth:focus-within > .depth-3 { display: block !important; }
:root .sub-nav-container.orgsite-subnav .sub-nav .depth-3 > li {
    display: block !important; position: relative !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
}
:root .sub-nav-container.orgsite-subnav .sub-nav .depth-3 > li::after { display: none !important; }
:root .sub-nav-container.orgsite-subnav .sub-nav .depth-3 a {
    display: flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important;
    padding: 10px 12px !important; font-size: 14px !important; line-height: 1.5 !important; white-space: normal !important;
    word-break: keep-all !important; overflow-wrap: anywhere !important; text-decoration: none !important;
}
@media (max-width: 768px) {
    :root .sub-nav-container.orgsite-subnav { margin-bottom: 36px !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav { width: calc(100% - 24px) !important; overflow-x: hidden !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav > ul { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-columns: auto !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav > ul > li > a { min-height: 52px !important; padding: 12px 10px !important; font-size: 14px !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav li.has-depth > .depth-3 {
        display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; position: static !important; width: 100% !important; max-width: none !important; min-width: 0 !important;
        margin: 0 !important; padding: 0 !important; border: 0 !important; border-top: 1px solid #eee !important; border-radius: 0 !important; box-shadow: none !important;
    }
    :root .sub-nav-container.orgsite-subnav .sub-nav .has-depth > a { flex: 0 0 auto !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav .depth-3 a { font-size: 13px !important; }
    :root .sub-nav-container.orgsite-subnav .sub-nav li.has-depth > .depth-3::before { display: none !important; }
}
@media (max-width: 480px) {
    :root .sub-nav-container.orgsite-subnav .sub-nav > ul { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* NODL's yellow brand needs the same dark selected text as its existing menus. */
:root .nodl-page .sub-nav-container.orgsite-subnav { --orgsite-subnav-active-text: #242424 !important; }
:root .nodl-page .sub-nav-container.orgsite-subnav .sub-nav > ul > li:not(.active) > a:hover {
    background: var(--main-color, #ffde00) !important; color: #242424 !important;
}