/* ==========================================================================
   OE MyOxford Header (oe/myoxford-header)
   Mirrors the my.oxfordeconomics.com header. Production sizes are built from
   --oe-* tokens with calc() so they match exactly.
   ========================================================================== */

.oe-block-myoxford-header {
    /* Approved hex exception (this block only, 2026-10-05): exact production
       values so the MyOxford nav looks the same on every page. No close
       token substitutes. */
    --oe-myoxford-header-nav-bg: linear-gradient(90deg, #090B1E 0%, #0B1733 31.5%, #0A2246 58%, #052D59 84%, #003365 100%);
    --oe-myoxford-header-nav-line: linear-gradient(90deg, #003466 0, #00649D 697px, #003466 700px, #004175 750px, #004174 900px, #004073 1200px, #003466 1600px, #003466 100%);
    --oe-myoxford-header-gold: #E7A800;
    --oe-myoxford-header-text: #2E353C;

    /* Production sizes, from tokens */
    --oe-myoxford-header-font-size: var(--oe-font-size-small);
    --oe-myoxford-header-top-height: calc(var(--oe-spacing-2xlarge) + var(--oe-spacing-base));        /* 80px */
    --oe-myoxford-header-top-pad-left: calc(var(--oe-spacing-xlarge) + var(--oe-spacing-xsmall));     /* 56px */
    --oe-myoxford-header-top-pad-right: calc(var(--oe-spacing-xlarge) + var(--oe-spacing-3xsmall));   /* 50px */
    --oe-myoxford-header-logo-width: calc(var(--oe-spacing-4xlarge) + var(--oe-spacing-small));       /* 140px */
    --oe-myoxford-header-icon-size: calc(var(--oe-spacing-base) - var(--oe-spacing-5xsmall));         /* 15px */
    --oe-myoxford-header-email-gap: calc(var(--oe-spacing-xsmall) - var(--oe-spacing-5xsmall));       /* 7px */
    --oe-myoxford-header-list-height: calc(var(--oe-spacing-xlarge) + var(--oe-spacing-2xsmall));     /* 52px (+2px line = 54px bar) */
    --oe-myoxford-header-list-pad: calc(var(--oe-spacing-2xlarge) - var(--oe-spacing-5xsmall));      /* 63px */
    --oe-myoxford-header-list-gap: calc(var(--oe-spacing-large) + var(--oe-spacing-2xsmall));         /* 36px */
    --oe-myoxford-header-underline: calc(var(--oe-spacing-4xsmall) * 2);                              /* 3px */

    position: relative;
}

.oe-block-myoxford-header__top,
.oe-block-myoxford-header__bar {
    padding-left: 0;
    padding-right: 0;
}

/* ---- Top bar ------------------------------------------------------------- */

.oe-block-myoxford-header__top {
    background: var(--oe-color-primary-4);
}

.oe-block-myoxford-header__top-inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--oe-spacing-base);
    height: var(--oe-myoxford-header-top-height);
    padding: 0 var(--oe-myoxford-header-top-pad-right) 0 var(--oe-myoxford-header-top-pad-left);
}

.oe-block-myoxford-header__logo {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    color: var(--oe-color-heritage-blue);
}

.oe-block-myoxford-header__logo-svg,
.oe-block-myoxford-header__logo-img {
    display: block;
    width: var(--oe-myoxford-header-logo-width);
    max-width: 100%;
    height: auto;
}

.oe-block-myoxford-header__actions {
    display: flex;
    align-items: center;
    gap: var(--oe-spacing-medium);
}

.oe-block-myoxford-header__email {
    display: inline-flex;
    align-items: center;
    gap: var(--oe-myoxford-header-email-gap);
    font-size: var(--oe-myoxford-header-font-size);
    line-height: var(--oe-line-height-medium-large);
    color: var(--oe-myoxford-header-text);
    text-decoration: none;
    white-space: nowrap;
}

.oe-block-myoxford-header__email:hover {
    color: var(--oe-myoxford-header-text);
    text-decoration: underline;
}

.oe-block-myoxford-header__email-icon {
    flex-shrink: 0;
    width: var(--oe-myoxford-header-icon-size);
    height: var(--oe-myoxford-header-icon-size);
}

.oe-block-myoxford-header__toggle {
    display: none;
}

/* ---- Navigation bar (desktop) -------------------------------------------- */

.oe-block-myoxford-header__bar {
    position: relative;
    padding-bottom: var(--oe-spacing-3xsmall);
    background: var(--oe-myoxford-header-nav-bg);
}

.oe-block-myoxford-header__bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--oe-spacing-3xsmall);
    background: var(--oe-myoxford-header-nav-line);
}

.oe-block-myoxford-header__bar-inner {
    box-sizing: border-box;
    padding-left: var(--oe-myoxford-header-list-pad);
}

/* The nav's global shadow class is for the phone dropdown only. */
@media (min-width: 1100px) {
    .oe-block-myoxford-header .oe-block-myoxford-header__nav {
        box-shadow: none;
    }
}

.oe-block-myoxford-header__list {
    display: flex;
    align-items: stretch;
    gap: var(--oe-myoxford-header-list-gap);
    height: var(--oe-myoxford-header-list-height);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;           /* safety net if the menu grows */
    scrollbar-width: none;
}

.oe-block-myoxford-header__list::-webkit-scrollbar {
    display: none;
}

.oe-block-myoxford-header__item {
    display: flex;
    margin: 0;
    padding: 0;
}

.oe-block-myoxford-header__link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: var(--oe-myoxford-header-font-size);
    line-height: var(--oe-line-height-medium-large);
    color: var(--oe-color-primary-4);
    text-decoration: none;
    white-space: nowrap;
}

.oe-block-myoxford-header__link:hover,
.oe-block-myoxford-header__link:focus {
    color: var(--oe-color-primary-5);
}

.oe-block-myoxford-header__link.is-current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--oe-myoxford-header-underline);
    background: var(--oe-myoxford-header-gold);
}

.oe-block-myoxford-header__nav-extra {
    display: none;
}

/* ---- Focus --------------------------------------------------------------- */

.oe-block-myoxford-header__logo:focus-visible,
.oe-block-myoxford-header__email:focus-visible,
.oe-block-myoxford-header__toggle:focus-visible {
    outline: var(--oe-spacing-3xsmall) solid var(--oe-color-sky-blue);
    outline-offset: var(--oe-spacing-3xsmall);
}

/* Inset, because the scrolling list would clip an outside ring. */
.oe-block-myoxford-header__link:focus-visible {
    outline: var(--oe-spacing-3xsmall) solid var(--oe-color-primary);
    outline-offset: calc(var(--oe-spacing-3xsmall) * -1);
}

/* ---- Phones and tablets: ☰ button and dropdown card ---------------------- */

@media (max-width: 1099px) {
    .oe-block-myoxford-header__top-inner {
        padding: 0 var(--oe-spacing-base);
    }

    .oe-block-myoxford-header__actions > .oe-block-myoxford-header__email {
        display: none;
    }

    .oe-block-myoxford-header__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--oe-sizing-large);
        height: var(--oe-sizing-large);
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: var(--oe-border-radius-small);
        background: none;
        color: var(--oe-color-heritage-blue);
        cursor: pointer;
    }

    .oe-block-myoxford-header__toggle:hover,
    .oe-block-myoxford-header__toggle:focus {
        background: none;
        color: var(--oe-color-heritage-blue);
    }

    .oe-block-myoxford-header__toggle svg {
        width: var(--oe-sizing-medium);
        height: var(--oe-sizing-medium);
    }

    .oe-block-myoxford-header__toggle-close,
    .oe-block-myoxford-header__toggle[aria-expanded="true"] .oe-block-myoxford-header__toggle-open {
        display: none;
    }

    .oe-block-myoxford-header__toggle[aria-expanded="true"] .oe-block-myoxford-header__toggle-close {
        display: block;
    }

    /* The bar collapses to a zero-height anchor for the dropdown. */
    .oe-block-myoxford-header__bar {
        z-index: 100;
        height: 0;
        padding-bottom: 0;
        background: none;
    }

    .oe-block-myoxford-header__bar::after {
        content: none;
    }

    .oe-block-myoxford-header__bar-inner {
        position: relative;
        padding-left: 0;
    }

    .oe-block-myoxford-header .oe-block-myoxford-header__nav {
        display: none;
        position: absolute;
        top: var(--oe-spacing-2xsmall);
        left: var(--oe-spacing-base);
        right: var(--oe-spacing-base);
        padding: var(--oe-spacing-xsmall);
        border-radius: var(--oe-border-radius-large);
        background: var(--oe-color-primary-4);
    }

    .oe-block-myoxford-header.is-open .oe-block-myoxford-header__nav {
        display: block;
        animation: oe-myoxford-header-drop 160ms ease-out;
    }

    .oe-block-myoxford-header__list {
        flex-direction: column;
        gap: 0;
        height: auto;
        overflow: visible;
    }

    .oe-block-myoxford-header__link,
    .oe-block-myoxford-header__nav-extra .oe-block-myoxford-header__email {
        display: flex;
        width: 100%;
        height: auto;
        padding: var(--oe-spacing-small) var(--oe-spacing-base);
        border-radius: var(--oe-border-radius-base);
        font-size: var(--oe-sm);
        color: var(--oe-color-secondary);
        white-space: normal;
    }

    .oe-block-myoxford-header__link:hover,
    .oe-block-myoxford-header__link:focus,
    .oe-block-myoxford-header__nav-extra .oe-block-myoxford-header__email:hover {
        background: var(--oe-color-muted);
        color: var(--oe-color-secondary);
        text-decoration: none;
    }

    .oe-block-myoxford-header__link.is-current::after {
        top: var(--oe-spacing-small);
        bottom: var(--oe-spacing-small);
        left: 0;
        right: auto;
        width: var(--oe-myoxford-header-underline);
        height: auto;
    }

    .oe-block-myoxford-header__nav-extra {
        display: block;
        margin-top: var(--oe-spacing-xsmall);
        padding-top: var(--oe-spacing-xsmall);
        border-top: var(--oe-spacing-5xsmall) solid var(--oe-color-secondary-muted);
    }

    /* Icon before the text, like "Sign out" on production. */
    .oe-block-myoxford-header__nav-extra .oe-block-myoxford-header__email {
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: var(--oe-spacing-small);
    }

    .oe-block-myoxford-header__link:focus-visible,
    .oe-block-myoxford-header__nav-extra .oe-block-myoxford-header__email:focus-visible {
        outline: var(--oe-spacing-3xsmall) solid var(--oe-color-sky-blue);
        outline-offset: calc(var(--oe-spacing-3xsmall) * -1);
    }

    /* Editor: no script there, so show the card in the flow for checking. */
    .editor-styles-wrapper .oe-block-myoxford-header__bar {
        height: auto;
    }

    .editor-styles-wrapper .oe-block-myoxford-header .oe-block-myoxford-header__nav {
        display: block;
        position: static;
        margin: var(--oe-spacing-2xsmall) var(--oe-spacing-base) var(--oe-spacing-base);
    }
}

@keyframes oe-myoxford-header-drop {
    from { opacity: 0; transform: translateY(calc(var(--oe-spacing-2xsmall) * -1)); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .oe-block-myoxford-header.is-open .oe-block-myoxford-header__nav {
        animation: none;
    }
}