.abn-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    background: var(--abn-surface);
    border-bottom: 1px solid rgba(6, 120, 189, 0.12);
    box-shadow: 0 12px 42px rgba(0, 63, 102, 0.06);
    transition: box-shadow var(--abn-transition), background var(--abn-transition);
}

.abn-header.is-scrolled {
    background: var(--abn-surface);
    box-shadow: 0 18px 50px rgba(0, 44, 71, 0.12);
}

.abn-header__accent {
    display: grid;
    height: 5px;
    grid-template-columns: 1.8fr 0.7fr 0.9fr 0.55fr;
}

.abn-header__accent span:nth-child(1) { background: var(--abn-primary); }
.abn-header__accent span:nth-child(2) { background: var(--abn-turquoise); }
.abn-header__accent span:nth-child(3) { background: var(--abn-green); }
.abn-header__accent span:nth-child(4) { background: var(--abn-gold); }

.abn-header__inner {
    display: grid;
    min-height: calc(var(--abn-header-height) - 5px);
    align-items: center;
    grid-template-columns: minmax(190px, 248px) minmax(0, 1fr) auto;
    gap: clamp(14px, 2.2vw, 34px);
}

/*
 * The logo is a wide 4.25:1 lockup - emblem, two lines of bilingual text, and
 * the national emblem. Its legibility is governed by WIDTH: at 228px the
 * English line rendered about 8px tall. These widths are set so that line
 * stays readable, and they are paired with the grid columns below, which are
 * what actually cap the brand in practice.
 */
.abn-brand {
    display: flex;
    width: min(100%, 340px);
    flex-direction: column;
    align-items: flex-start;
    color: var(--abn-primary-deep) !important;
    line-height: 0;
    text-decoration: none !important;
}

.abn-brand img {
    display: block;
    width: 100%;
}

.abn-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.abn-header__quick-nav {
    display: none;
}

@media (min-width: 1200px) and (max-width: 1679.98px) {
    .abn-header__quick-nav {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        grid-column: 2;
        gap: clamp(4px, 0.65vw, 12px);
    }

    .abn-header__quick-nav a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        padding: 8px clamp(7px, 0.7vw, 13px);
        color: var(--abn-ink) !important;
        border-radius: 12px;
        font-size: clamp(0.72rem, 0.82vw, 0.84rem);
        font-weight: 700;
        line-height: 1.5;
        text-decoration: none;
        white-space: nowrap;
        transition: color var(--abn-transition), background var(--abn-transition), transform var(--abn-transition);
    }

    .abn-header__quick-nav a:hover,
    .abn-header__quick-nav a:focus-visible {
        color: var(--abn-primary-deep) !important;
        background: var(--abn-surface-blue);
        transform: translateY(-2px);
    }
}

/*
 * 38px rather than 46px. There are now four of these (menu, language, search,
 * accessibility) and every pixel they take comes straight out of the brand
 * column and the quick-nav beside them. 38px with a 20px glyph still clears
 * the 24x24 CSS-pixel minimum in WCAG 2.5.8 comfortably, and the hit area is
 * padded further by the 8px gap between them.
 */
.abn-icon-button,
.abn-header__menu-toggle {
    display: inline-grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--abn-primary-deep);
    background: var(--abn-surface);
    border: 1px solid var(--abn-border);
    border-radius: 11px;
    place-items: center;
    transition: color var(--abn-transition), background var(--abn-transition), border-color var(--abn-transition), transform var(--abn-transition);
}

.abn-icon-button:hover,
.abn-header__menu-toggle:hover {
    color: #fff;
    background: var(--abn-primary);
    border-color: var(--abn-primary);
    transform: translateY(-2px);
}

.abn-icon-button svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.abn-header__menu-toggle {
    display: none;
}

.abn-header__menu-icon {
    display: grid;
    width: 22px;
    gap: 4px;
}

.abn-header__menu-icon span {
    display: block;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

.abn-header__menu-icon span:nth-child(2) {
    width: 72%;
    justify-self: end;
}

.abn-header__language {
    position: relative;
}

.abn-header__language > summary {
    cursor: pointer;
    list-style: none;
}

.abn-header__language > summary::-webkit-details-marker {
    display: none;
}

.abn-header__language[open] > summary {
    color: #fff;
    background: var(--abn-primary);
    border-color: var(--abn-primary);
}

.abn-header__language-panel {
    position: absolute;
    inset-block-start: calc(100% + 12px);
    inset-inline-end: 0;
    z-index: 40;
    width: min(330px, calc(100vw - 32px));
    padding: 12px;
    background: var(--abn-surface);
    border: 1px solid var(--abn-border);
    border-radius: 16px;
    box-shadow: var(--abn-shadow-md);
}

.abn-header__language .mod-languages,
.abn-header__language .mod-languages > div {
    margin: 0;
}

.abn-header__language ul.mod-languages__list,
.abn-header__language ul.lang-block {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
}

.abn-header__language ul.mod-languages__list li,
.abn-header__language ul.lang-block li {
    display: block;
}

.abn-header__language ul.mod-languages__list a,
.abn-header__language ul.mod-languages__list span,
.abn-header__language ul.lang-block a,
.abn-header__language ul.lang-block span {
    display: grid;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px solid var(--abn-border);
    border-radius: 12px;
}

.abn-header__language li.lang-active a,
.abn-header__language li.lang-active span {
    background: var(--abn-surface-blue);
    border-color: rgba(6, 120, 189, 0.34);
}

.abn-header__language img {
    width: 28px;
    height: auto;
}

.abn-search-panel {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    align-items: start;
    padding-top: clamp(80px, 14vh, 160px);
}

.abn-search-panel[hidden] {
    display: none;
}

.abn-search-panel__dialog {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 32px), 760px);
    margin-inline: auto;
    padding: clamp(28px, 5vw, 50px);
    background: var(--abn-surface);
    border: 1px solid var(--abn-border);
    border-radius: var(--abn-radius-lg);
    box-shadow: 0 30px 90px rgba(0, 38, 61, 0.28);
}

.abn-search-panel__close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
}

.abn-search-panel__content .mod-finder__search {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.abn-search-panel__content input[type="text"],
.abn-search-panel__content input[type="search"] {
    width: 100%;
    min-height: 58px;
    padding-inline: 18px;
    color: var(--abn-ink);
    background: var(--abn-surface-soft);
    border: 1px solid var(--abn-border);
    border-radius: 16px;
    font: inherit;
}

.abn-search-panel__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    background: rgba(0, 34, 55, 0.68);
    border: 0;
    backdrop-filter: blur(5px);
}

body.abn-overlay-open {
    overflow: hidden;
}

@media (min-width: 1680px) {
    .abn-header__inner {
        width: min(calc(100% - 40px), 1780px);
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) auto;
        gap: clamp(14px, 1.3vw, 24px);
    }
}

/* The four action buttons shrank from 46px to 38px, freeing ~38px including
   gaps. It goes to the brand column, where the bilingual logo's English line
   is the tightest thing on the page to read. */
@media (max-width: 1679.98px) {
    .abn-header__inner {
        grid-template-columns: minmax(210px, 320px) 1fr auto;
    }

    .abn-brand {
        grid-column: 1;
    }

    .abn-header__actions {
        grid-column: 3;
    }

    .abn-header__menu-toggle {
        display: inline-grid;
    }
}

@media (max-width: 767.98px) {
    .abn-header__inner {
        min-height: calc(var(--abn-header-height) - 5px);
        grid-template-columns: minmax(140px, 1fr) auto;
        gap: 6px;
    }

    /* Phones have the least room, but the same legibility problem is worse
       here - so take what the action buttons can spare and no more. */
    .abn-brand {
        width: min(100%, 208px);
        grid-column: 1;
    }

    .abn-header__actions {
        grid-column: 2;
        gap: 6px;
    }

    .abn-header__language-panel {
        position: fixed;
        inset-block-start: calc(var(--abn-header-height) + 10px);
        inset-inline: 16px;
        width: auto;
    }

    /* Phones keep a slightly larger target than desktop: the buttons are the
       only navigation on offer once the quick-nav is gone. */
    .abn-icon-button,
    .abn-header__menu-toggle {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .abn-search-panel__content .mod-finder__search {
        display: block;
    }
}