/*
 * Header chrome — ported from ems-wp (theme/_topbar.scss, base/_header.scss).
 * Plain CSS (no build step): legacy $ems_* colors resolved to new-palette tokens where
 * they exist, with a literal fallback matching the old site. Flag images copied to
 * assets/images/. Full nav/mega-menu styling is still part of the wider CSS effort.
 */

/* ---- Sticky header ------------------------------------------------------ */

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    transition: box-shadow 200ms ease;
}

.sticky-header.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media screen and (min-width: 601px) {
    .admin-bar .sticky-header {
        top: var(--wp-admin--admin-bar--height, 32px);
    }
}

/* ---- Auto-hide ("tuck") on scroll down ---------------------------------- */
/*
 * `.is-tucked` is added by initStickyHeader() in assets/js/modules/nav.js while
 * scrolling down and removed on the first upward gesture.
 *
 * The transform goes on `.sticky-header`, which is the whole pinned unit — topbar,
 * notification bar and .site-header together. Tucking only .site-header leaves the
 * topbar stranded on screen and clips the logo behind it.
 *
 * translateY(-100%) is relative to the element's own height, so it always clears
 * fully regardless of whether the topbar/notification bar are present. With the
 * admin bar the element starts at top:32px and ends at [32-H, 32], i.e. tucked
 * behind the (higher z-index) admin bar rather than overlapping it.
 *
 * DESKTOP ONLY: below 1079px this is the mobile bar that opens the full-screen
 * sheet — 1079px is $breakpoint-menu + 1 from assets/scss/layout/_header.scss and
 * must stay in step with MENU_BREAKPOINT in nav.js.
 */
@media screen and (min-width: 1079px) {
    .sticky-header {
        /* Re-declares the box-shadow transition above: `transition` is one property,
           so listing only transform here would silently drop the shadow fade. */
        transition: box-shadow 200ms ease, transform 260ms ease;
    }

    .sticky-header.is-tucked {
        transform: translateY(-100%);
    }
}

/* Never tuck for reduced-motion users — the header just stays put. nav.js applies
   the same gate, so the class is not added either; this is the belt to that braces. */
@media (prefers-reduced-motion: reduce) {
    .sticky-header,
    .sticky-header.is-tucked {
        transform: none;
        transition: none;
    }
}

/* ---- Topbar ------------------------------------------------------------- */
.topbar {
    font-size: 16px;
    background-color: #5b7cfb;
    background: linear-gradient(90deg, rgba(51, 67, 144, 1) 0%, rgba(91, 124, 251, 1) 87%);
    color: #fff;
}

.topbar .grid-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 10px;
    position: relative;
    max-width: 1340px;
    margin: 0 auto;
}

@media screen and (max-width: 1100px) {
    .topbar .grid-container {
        padding: 5px 10px;
    }
}

/* Region-gated banner — hidden until region.js resolves the region and adds .shown. */
.topbar .grid-container .banner-content {
    width: calc(100% - 150px);
    opacity: 0;
    overflow: hidden;
    float: left;
    transition: opacity 300ms ease;
}

.topbar .grid-container .banner-content.shown {
    opacity: 1;
}

@media screen and (min-width: 800px) {
    .topbar .grid-container .banner-content {
        width: calc(100% - 300px);
        margin: 0 0 0 150px;
        text-align: center;
        white-space: normal;
        overflow: visible;
    }
}

.topbar .grid-container .banner-content p {
    font-size: 14px;
    color: #fff;
    margin-bottom: 0;
    font-weight: 400;
    padding: 0 10px;
}

@media screen and (min-width: 1340px) {
    .topbar .grid-container .banner-content p {
        font-size: 16px;
    }
}

.topbar .grid-container .banner-content p .arrow-link {
    color: #fff !important;
    border-bottom: 1px solid;
}

/* ---- Topbar right-hand links (login + region) --------------------------- */
.topbar__links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 20px;
    font-size: 14px;
    color: #fff;
    padding-right: 15px;
    position: relative;
}

@media screen and (max-width: 500px) {
    .topbar__links {
        column-gap: 10px;
    }
}

.topbar_login-links {
    position: relative;
}

.login-toggler {
    padding-right: 20px;
    border-right: 1px solid #fff;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.login-toggler::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 200ms ease;
}

.login-toggler:hover,
.login-toggler.show {
    color: #fff;
    text-decoration: underline;
}

.login-toggler.show::after {
    transform: rotate(180deg);
}

@media screen and (max-width: 500px) {
    .login-toggler {
        padding-right: 10px;
    }
}

/* Login dropdown — hidden until toggled (vanilla, no Bootstrap). */
.login-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 10000;
    min-width: 200px;
    margin: 0;
    padding: 20px 24px;
    list-style: none;
    background: #fff;
    color: var(--wp--preset--color--dark-blue, #11132b);
    border: 1px solid #eaeaea;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 20px rgba(91, 124, 251, 0.2);
    display: none;
}

.login-dropdown.show {
    display: block;
}

.login-dropdown .textwidget {
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.login-dropdown .mega-sub-menu-title {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
}

.login-dropdown li a {
    font-size: 16px;
    color: var(--wp--preset--color--dark-blue, #11132b);
    line-height: 30px;
    font-weight: 400;
    text-decoration: none;
    display: block;
}

.login-dropdown li a:hover {
    color: var(--wp--preset--color--green, #07b7ad);
    text-decoration: underline;
}

/* ---- Region switcher ---------------------------------------------------- */
.region-switcher {
    position: relative;
    width: 80px;
    cursor: pointer;
    color: #fff;
}

.region-switcher.disabled {
    opacity: 0.7;
    pointer-events: none;
}

.region-switcher__current {
    display: flex;
    align-items: center;
}

.region-switcher__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    z-index: 10000;
    min-width: 130px;
    background: #fff;
    color: var(--wp--preset--color--dark-blue, #11132b);
    border: 1px solid #eaeaea;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 20px rgba(91, 124, 251, 0.2);
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    transition: opacity 400ms ease;
}

@media screen and (min-width: 1311px) {
    .region-switcher__dropdown {
        left: 0;
        right: auto;
    }
}

.region-switcher.reveal .region-switcher__dropdown {
    opacity: 1;
    height: auto;
    padding: 20px 24px;
    overflow: visible;
}

.region-switcher.reveal .region-switcher__overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.region-switcher__dropdown__option {
    display: block;
    margin-bottom: 10px;
    white-space: nowrap;
    color: var(--wp--preset--color--dark-blue, #11132b);
    text-decoration: none;
}

.region-switcher__dropdown__option:last-child {
    margin-bottom: 0;
}

.region-switcher__dropdown__option:hover {
    text-decoration: underline;
}

/* Flags (SVGs copied from ems-wp; paths relative to this stylesheet). */
.region-switcher .flag {
    height: 22px;
    width: 22px;
    border-radius: 1000px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    margin-right: 5px;
    flex: 0 0 auto;
}

.region-switcher .flag[data-region="US"] { background-image: url("../images/flag-us.svg"); }
.region-switcher .flag[data-region="CA"] { background-image: url("../images/flag-ca.svg"); }
.region-switcher .flag[data-region="GB"] { background-image: url("../images/flag-gb.svg"); }
.region-switcher .flag[data-region="AU"] { background-image: url("../images/flag-au.svg"); }
.region-switcher .flag[data-region="NZ"] { background-image: url("../images/flag-nz.svg"); }
.region-switcher .flag[data-region="Global"] { background-image: url("../images/flag-global.svg"); }

@media screen and (max-width: 799px) {
    .region-switcher {
        width: auto;
    }
    .region-switcher .flag {
        height: 16px;
        width: 16px;
    }
}

/* ---- Notification bar --------------------------------------------------- */
.notification-bar {
    position: relative;
    background: var(--wp--preset--color--green, #07ece1);
}

.notification-bar__inner {
    max-width: 1340px;
    margin: 0 auto;
    display: flex;
    padding: 8px 15px;
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.notification-bar__inner__content p {
    color: var(--wp--preset--color--dark-blue, #11132b);
    font-weight: 800;
    margin-bottom: 0;
}

.notification-bar__inner__button .wp-block-button__link {
    background-color: var(--wp--preset--color--dark-blue, #11132b) !important;
    color: #fff !important;
    padding: 7px 20px !important;
    transition: 300ms all;
}

.notification-bar__inner__button .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--gray, #6b7280) !important;
    color: #fff !important;
}

/* ---- Header search toggle (functional show/hide) ------------------------ 
.header-search {
    position: relative;
}
*/
.header-search .searchform-toggle {
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    display: inline-flex;
    align-items: center;
    padding: 6px;
}

.header-search-form-container {
    /* display: none; */
    position: absolute;
    right: 0;
    z-index: 10000;
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 10px 20px rgba(91, 124, 251, 0.2);
    width: calc(100% - 200px);
    transition: opacity .2s ease, visibility .2s ease;
}

.header-search.search-active .header-search-form-container {
    display: flex;
}

/* ---- Underline reveal on scroll (paired with [underline] shortcodes) ---- */
.underline {
    position: relative;
    white-space: nowrap;
}

.underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 500ms ease;
}

.underline.blue_underline::after { background: var(--wp--preset--color--blue, #5b7cfb); }
.underline.green_underline::after { background: var(--wp--preset--color--green, #33d6a7); }

.underline.visible::after {
    transform: scaleX(1);
}