/* Site-scoped link effects. Dropdown content and CTA buttons keep their own styles. */
.site-nav[class*='menu-effect-'] { --nav-link-accent: var(--brand, #fd7e14); }
.site-nav.brand[class*='menu-effect-'] { --nav-link-accent: #fff; }
.site-nav .site-menu > a:not(.mobile-nav-cta),
.site-nav .site-menu > .menu-parent > button { position: relative; transition: color .2s ease, background-color .2s ease; }
.site-nav.menu-effect-underline .site-menu > a:not(.mobile-nav-cta)::after,
.site-nav.menu-effect-underline .site-menu > .menu-parent > button::after {
    content: ''; position: absolute; height: 3px; left: 8px; right: 8px; bottom: -5px;
    border-radius: 3px; background: var(--nav-link-accent); transform: scaleX(0); transition: transform .2s ease;
}
.site-nav.menu-effect-underline .site-menu > a.is-active::after,
.site-nav.menu-effect-underline .site-menu > a:not(.mobile-nav-cta):hover::after,
.site-nav.menu-effect-underline .site-menu > .menu-parent.is-active > button::after,
.site-nav.menu-effect-underline .site-menu > .menu-parent > button:hover::after { transform: scaleX(1); }
.site-nav.menu-effect-underline .site-menu > a.is-active,
.site-nav.menu-effect-underline .site-menu > .menu-parent.is-active > button { color: var(--nav-link-accent); }
.site-nav.menu-effect-pill .site-menu > a:not(.mobile-nav-cta),
.site-nav.menu-effect-pill .site-menu > .menu-parent > button { padding: 8px 14px; border-radius: 999px; }
.site-nav.menu-effect-pill .site-menu > a.is-active,
.site-nav.menu-effect-pill .site-menu > a:not(.mobile-nav-cta):hover,
.site-nav.menu-effect-pill .site-menu > .menu-parent.is-active > button,
.site-nav.menu-effect-pill .site-menu > .menu-parent > button:hover { background: var(--nav-link-accent); color: #fff; }
.site-nav.menu-effect-pill.brand .site-menu > a.is-active,
.site-nav.menu-effect-pill.brand .site-menu > .menu-parent.is-active > button { color: var(--brand); }
.site-nav.menu-effect-bar .site-menu > a:not(.mobile-nav-cta),
.site-nav.menu-effect-bar .site-menu > .menu-parent > button { border-left: 3px solid transparent; padding-left: 10px; }
.site-nav.menu-effect-bar .site-menu > a.is-active,
.site-nav.menu-effect-bar .site-menu > a:not(.mobile-nav-cta):hover,
.site-nav.menu-effect-bar .site-menu > .menu-parent.is-active > button,
.site-nav.menu-effect-bar .site-menu > .menu-parent > button:hover { border-left-color: var(--nav-link-accent); color: var(--nav-link-accent); }
.site-nav.menu-effect-highlight .site-menu > a:not(.mobile-nav-cta),
.site-nav.menu-effect-highlight .site-menu > .menu-parent > button { padding: 8px 12px; border-radius: 8px; }
.site-nav.menu-effect-highlight .site-menu > a.is-active,
.site-nav.menu-effect-highlight .site-menu > a:not(.mobile-nav-cta):hover,
.site-nav.menu-effect-highlight .site-menu > .menu-parent.is-active > button,
.site-nav.menu-effect-highlight .site-menu > .menu-parent > button:hover { background: color-mix(in srgb, var(--nav-link-accent) 16%, transparent); color: var(--nav-link-accent); }
/* The core desktop menu resets border, padding, background and color with
   !important. Restore only the selected effect after that reset. */
@media (min-width: 701px) {
    .site-nav.menu-effect-underline .site-menu > a.is-active,
    .site-nav.menu-effect-underline .site-menu > a:not(.mobile-nav-cta):hover,
    .site-nav.menu-effect-underline .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-underline .site-menu > .menu-parent > button:hover {
        color: var(--nav-link-accent) !important;
    }
    .site-nav.menu-effect-pill .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-pill .site-menu > .menu-parent > button {
        padding: 8px 14px !important;
        border-radius: 999px;
    }
    .site-nav.menu-effect-pill .site-menu > a.is-active,
    .site-nav.menu-effect-pill .site-menu > a:not(.mobile-nav-cta):hover,
    .site-nav.menu-effect-pill .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-pill .site-menu > .menu-parent > button:hover {
        background: var(--nav-link-accent) !important;
        color: #fff !important;
    }
    .site-nav.menu-effect-pill.brand .site-menu > a.is-active,
    .site-nav.menu-effect-pill.brand .site-menu > a:not(.mobile-nav-cta):hover,
    .site-nav.menu-effect-pill.brand .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-pill.brand .site-menu > .menu-parent > button:hover {
        color: var(--brand) !important;
    }
    .site-nav.menu-effect-bar .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-bar .site-menu > .menu-parent > button {
        border-left: 3px solid transparent !important;
        padding-left: 11px !important;
    }
    .site-nav.menu-effect-bar .site-menu > a.is-active,
    .site-nav.menu-effect-bar .site-menu > a:not(.mobile-nav-cta):hover,
    .site-nav.menu-effect-bar .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-bar .site-menu > .menu-parent > button:hover {
        border-left-color: var(--nav-link-accent) !important;
        color: var(--nav-link-accent) !important;
    }
    .site-nav.menu-effect-highlight .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-highlight .site-menu > .menu-parent > button {
        padding: 8px 12px !important;
        border-radius: 8px;
    }
    .site-nav.menu-effect-highlight .site-menu > a.is-active,
    .site-nav.menu-effect-highlight .site-menu > a:not(.mobile-nav-cta):hover,
    .site-nav.menu-effect-highlight .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-highlight .site-menu > .menu-parent > button:hover {
        background: color-mix(in srgb, var(--nav-link-accent) 16%, transparent) !important;
        color: var(--nav-link-accent) !important;
    }
}
@media (max-width: 900px) {
    .site-nav.menu-effect-underline .site-menu > a::after,
    .site-nav.menu-effect-underline .site-menu > .menu-parent > button::after { bottom: 0; }
}
/* Drawer, dropdown and fullscreen menus have full-width rows. Keep each effect
   inside a comfortable tap target instead of stretching the desktop underline. */
@media (max-width: 700px) {
    .site-nav.brand[data-mobile-style='drawer'] { --nav-link-accent: var(--brand); }
    .site-nav[class*='menu-effect-']:not([data-mobile-style='bottom']) .site-menu {
        gap: 6px;
    }
    .site-nav[class*='menu-effect-']:not([data-mobile-style='bottom']) .site-menu > a:not(.mobile-nav-cta),
    .site-nav[class*='menu-effect-']:not([data-mobile-style='bottom']) .site-menu > .menu-parent > button {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        min-height: 44px;
        max-width: 100%;
        text-decoration: none;
    }
    .site-nav[class*='menu-effect-']:not([data-mobile-style='bottom']) .site-menu > .menu-parent > button {
        gap: 12px;
        justify-content: space-between;
    }
    .site-nav.menu-effect-underline:not([data-mobile-style='bottom']) .site-menu > a:not(.mobile-nav-cta)::after,
    .site-nav.menu-effect-underline:not([data-mobile-style='bottom']) .site-menu > .menu-parent > button::after {
        left: 0;
        right: auto;
        bottom: 3px;
        width: min(110px, 42%);
        height: 2px;
        transform-origin: left center;
    }
    .site-nav.menu-effect-underline:not([data-mobile-style='bottom']) .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-underline:not([data-mobile-style='bottom']) .site-menu > .menu-parent > button {
        padding-bottom: 8px !important;
    }
    .site-nav.menu-effect-pill:not([data-mobile-style='bottom']) .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-pill:not([data-mobile-style='bottom']) .site-menu > .menu-parent > button,
    .site-nav.menu-effect-highlight:not([data-mobile-style='bottom']) .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-highlight:not([data-mobile-style='bottom']) .site-menu > .menu-parent > button {
        padding: 10px 14px !important;
        width: 100%;
    }
    .site-nav.menu-effect-bar:not([data-mobile-style='bottom']) .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-bar:not([data-mobile-style='bottom']) .site-menu > .menu-parent > button {
        padding: 10px 14px !important;
        border-left-width: 3px;
        width: 100%;
    }
    .site-nav.menu-effect-pill.brand .site-menu > a.is-active,
    .site-nav.menu-effect-pill.brand .site-menu > a:not(.mobile-nav-cta):hover,
    .site-nav.menu-effect-pill.brand .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-pill.brand .site-menu > .menu-parent > button:hover {
        color: var(--brand) !important;
    }
    .site-nav.menu-effect-pill.brand[data-mobile-style='drawer'] .site-menu > a.is-active,
    .site-nav.menu-effect-pill.brand[data-mobile-style='drawer'] .site-menu > a:not(.mobile-nav-cta):hover,
    .site-nav.menu-effect-pill.brand[data-mobile-style='drawer'] .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-pill.brand[data-mobile-style='drawer'] .site-menu > .menu-parent > button:hover {
        color: #fff !important;
    }
    .site-nav.menu-effect-pill .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-pill .site-menu > .menu-parent > button:hover {
        color: #fff !important;
    }
    .site-nav.menu-effect-pill.brand:not([data-mobile-style='drawer']) .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-pill.brand:not([data-mobile-style='drawer']) .site-menu > .menu-parent > button:hover {
        color: var(--brand) !important;
    }
    .site-nav.menu-effect-underline .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-underline .site-menu > .menu-parent > button:hover,
    .site-nav.menu-effect-bar .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-bar .site-menu > .menu-parent > button:hover,
    .site-nav.menu-effect-highlight .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-highlight .site-menu > .menu-parent > button:hover {
        color: var(--nav-link-accent) !important;
    }
}
/* The bottom navigation is a horizontal rail: effects must stay within each tab. */
@media (max-width: 767px) {
    .site-nav.menu-effect-underline[data-mobile-style='bottom'] .site-menu > a:not(.mobile-nav-cta)::after,
    .site-nav.menu-effect-underline[data-mobile-style='bottom'] .site-menu > .menu-parent > button::after {
        bottom: 3px;
        left: 12px;
        right: 12px;
        height: 2px;
    }
    .site-nav.menu-effect-pill[data-mobile-style='bottom'] .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-pill[data-mobile-style='bottom'] .site-menu > .menu-parent > button,
    .site-nav.menu-effect-highlight[data-mobile-style='bottom'] .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-highlight[data-mobile-style='bottom'] .site-menu > .menu-parent > button {
        box-sizing: border-box;
        min-height: 40px;
        margin: 3px 0;
        padding: 7px 12px !important;
    }
    .site-nav.menu-effect-bar[data-mobile-style='bottom'] .site-menu > a:not(.mobile-nav-cta),
    .site-nav.menu-effect-bar[data-mobile-style='bottom'] .site-menu > .menu-parent > button {
        box-sizing: border-box;
        border-left-width: 3px;
        padding: 7px 10px !important;
    }
    .site-nav.menu-effect-pill.brand[data-mobile-style='bottom'] .site-menu > a.is-active,
    .site-nav.menu-effect-pill.brand[data-mobile-style='bottom'] .site-menu > a:not(.mobile-nav-cta):hover,
    .site-nav.menu-effect-pill.brand[data-mobile-style='bottom'] .site-menu > .menu-parent.is-active > button,
    .site-nav.menu-effect-pill.brand[data-mobile-style='bottom'] .site-menu > .menu-parent > button:hover {
        color: var(--brand) !important;
    }
}