/* =============================================================================
   ABC — header navigation (final).

   Replaces the "header dropdowns" and "light header variant" sections of
   inc/pages/pages.css. Enqueue AFTER app.min.css.

   Desktop: a white card anchored under its trigger by a notch, with a soft
   layered shadow. Rows have a Canela title, a short Inter subtitle (verbatim site
   copy) and a gold arrow that slides in on hover and marks the current page. The
   About Us landing page is the card's heading row, underlined by a short gold rule.
   Mobile: an accordion inside the theme's navy overlay card (gold-rule indent,
   Canela titles), animated both ways, ending in the header's own CTA.

   Everything is scoped under #header-nav, so it outranks the compiled bundle's
   class-only rules (.header_nav .ul_menu ul {display:flex}, a:hover {opacity:.4},
   .header.is-scrolled ... a {color:#00182b}) without !important.

   Open-state contract: li.menu-item-has-children.is-open shows its .sub-menu.
   nav.js wraps each .sub-menu in div.abcn-collapse (for the mobile height
   animation) and adds the .abcn-trigger buttons; both markups are covered below.
   Before nav.js runs, #header-nav:not([data-abcn]) keeps plain CSS hover/focus.
   ========================================================================== */

#header-nav {
    --abcn-navy: #00182b;
    --abcn-gold: #997233;          /* brand gold: rules, arrows, dots (graphics) */
    --abcn-gold-ink: #8a6529;      /* gold for TEXT / text-on-gold: 5.3:1 on white */
    --abcn-gold-soft: #c9a56b;     /* gold for text on the navy overlay: 7.6:1 */
    --abcn-muted: rgba(0, 24, 43, .66);  /* subtitles: ~#576673, 5.9:1 on white, 5.4:1 on the #f0f5f8 hover tint */
    --abcn-ring: rgba(0, 24, 43, .07);   /* card + notch outline, one shape */
    --abcn-gap: 12px;              /* trigger bottom -> card top */
    --abcn-ease: cubic-bezier(.2, .8, .2, 1);
}

/* On the #f5f8fa light ground a white card needs a firmer edge. */
.abc-header-light #header-nav {
    --abcn-ring: rgba(0, 24, 43, .13);
}

/* The glass pill has 10px of its own padding: drop the card clear of its edge. */
.header.is-scrolled #header-nav,
.header.is-preparing-scrolled #header-nav {
    --abcn-gap: 24px;
}

#header-nav .ul_menu > .menu-item-has-children {
    position: relative;
}

#header-nav .sub-menu {
    display: block;
    list-style: none;
    margin: 0;
    text-align: left;
}

#header-nav .sub-menu > li {
    display: block;
    list-style: none;
    margin: 0;
}

/* -------------------------------------------------------------- trigger -- */
#header-nav .abcn-trigger {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    padding: 9px 12px;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

#header-nav .abcn-chevron {
    display: block;
    flex: none;
    width: 12px;
    height: 12px;
    opacity: .8;
    transition: transform .25s var(--abcn-ease);
}

#header-nav .is-open > .abcn-trigger .abcn-chevron {
    transform: rotate(180deg);
}

#header-nav .abcn-trigger:focus {
    outline: none;
}

/* currentColor: white over the hero video, navy on light grounds — always visible. */
#header-nav .abcn-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* --------------------------------------------------------------- panel rows --
   Shared by the desktop card and the mobile accordion; colours differ per context. */
#header-nav .sub-menu a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-radius: 10px;
    padding: 11px 40px 11px 14px;
    text-align: left;
    white-space: normal;
    opacity: 1;
    text-decoration: none;
    transition: background-color .16s ease;
}

#header-nav .sub-menu a:is(:hover, :focus-visible) {
    opacity: 1;
}

#header-nav .sub-menu a:focus {
    outline: none;
}

#header-nav .sub-menu a:focus-visible {
    outline: 2px solid var(--abcn-gold);
    outline-offset: -2px;
}

#header-nav .abcn-title {
    display: block;
    font-family: Canela, Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .003em;
}

#header-nav .abcn-sub {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

#header-nav .abcn-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    color: var(--abcn-gold);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .18s ease, transform .22s var(--abcn-ease);
}

#header-nav .sub-menu a:is(:hover, :focus-visible) .abcn-arrow,
#header-nav .sub-menu a[aria-current="page"] .abcn-arrow,
#header-nav .sub-menu .current-menu-item > a .abcn-arrow {
    opacity: 1;
    transform: none;
}

/* The overview row (About Us landing page) is the panel's heading. One calm line:
   the card is sized to fit it (width: max-content below), so it never wraps. */
#header-nav .abcn-overview .abcn-title {
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: 0;
}

#header-nav .abcn-overview .abcn-sub {
    white-space: nowrap;
}

/* A short gold rule under the heading row; it lengthens as the row is hovered. */
#header-nav .abcn-overview::after {
    content: "";
    display: block;
    width: 20px;
    height: 1.5px;
    margin: 3px 14px 9px;
    background: var(--abcn-gold);
    opacity: .7;
    transition: width .32s var(--abcn-ease), opacity .2s ease;
}

#header-nav .abcn-overview:is(:hover, :focus-within)::after {
    width: 36px;
    opacity: 1;
}

/* Mobile-only CTA (injected by nav.js from the header's own button). */
#header-nav .ul_menu > .abcn-cta {
    display: none;
}

/* ==================================================================== DESKTOP */
@media (min-width: 992px) {

    #header-nav .abcn-collapse {
        display: contents;
    }

    #header-nav .abcn-trigger:hover,
    #header-nav .is-open > .abcn-trigger {
        background: rgba(255, 255, 255, .12);
    }

    /* Current section: a small gold dot under the label. */
    #header-nav .ul_menu > .current-menu-item > .abcn-trigger::after,
    #header-nav .ul_menu > .current-menu-ancestor > .abcn-trigger::after,
    #header-nav .ul_menu > .current-menu-parent > .abcn-trigger::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 1px;
        width: 4px;
        height: 4px;
        margin-left: -2px;
        border-radius: 50%;
        background: var(--abcn-gold);
        transition: opacity .15s ease;
    }

    /* Open: the notch takes that spot, and the panel marks the current row. */
    #header-nav .ul_menu > .is-open > .abcn-trigger::after {
        opacity: 0;
    }

    /* Navy top level on the glass pill and on light-ground pages. */
    .header.is-scrolled #header-nav .abcn-trigger,
    .header.is-preparing-scrolled #header-nav .abcn-trigger,
    .abc-header-light #header-nav .abcn-trigger,
    .abc-header-light #header-nav .ul_menu > li > a {
        color: var(--abcn-navy);
    }

    .header.is-scrolled #header-nav .abcn-trigger:hover,
    .header.is-scrolled #header-nav .is-open > .abcn-trigger,
    .header.is-preparing-scrolled #header-nav .abcn-trigger:hover,
    .header.is-preparing-scrolled #header-nav .is-open > .abcn-trigger,
    .abc-header-light #header-nav .abcn-trigger:hover,
    .abc-header-light #header-nav .is-open > .abcn-trigger {
        background: rgba(0, 24, 43, .06);
    }

    /* The card. Sized to its content (never narrower than 300px), centred on
       the trigger. */
    #header-nav .sub-menu {
        position: absolute;
        top: calc(100% + var(--abcn-gap));
        left: 50%;
        z-index: 70;
        width: -webkit-max-content;
        width: max-content;
        min-width: 300px;
        max-width: calc(100vw - 32px);
        box-sizing: border-box;
        padding: 8px;
        border-radius: 16px;
        background: #fff;
        box-shadow:
            0 0 0 1px var(--abcn-ring),
            0 2px 4px rgba(0, 24, 43, .04),
            0 12px 24px -8px rgba(0, 24, 43, .14),
            0 32px 64px -20px rgba(0, 24, 43, .22);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, -6px);
        transform-origin: 50% 0;
        transition:
            opacity .18s ease,
            transform .24s var(--abcn-ease),
            visibility 0s linear .24s;
    }

    /* Notch pointing at the trigger; its outline is the card's own ring, so the
       two read as one shape on every ground. */
    #header-nav .sub-menu::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        width: 12px;
        height: 12px;
        margin-left: -6px;
        border-radius: 3px 0 0 0;
        background: #fff;
        box-shadow: -1px -1px 0 var(--abcn-ring);
        transform: rotate(45deg);
    }

    #header-nav .is-open > .sub-menu,
    #header-nav .is-open > .abcn-collapse > .sub-menu,
    #header-nav:not([data-abcn]) .menu-item-has-children:hover > .sub-menu,
    #header-nav:not([data-abcn]) .menu-item-has-children:focus-within > .sub-menu,
    #header-nav:not([data-abcn]) .menu-item-has-children:hover > .abcn-collapse > .sub-menu,
    #header-nav:not([data-abcn]) .menu-item-has-children:focus-within > .abcn-collapse > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
        transition:
            opacity .18s ease,
            transform .24s var(--abcn-ease),
            visibility 0s;
    }

    /* Invisible bridge across the gap so the pointer can reach the card. */
    #header-nav .ul_menu > .is-open::after,
    #header-nav:not([data-abcn]) .ul_menu > .menu-item-has-children:hover::after {
        content: "";
        position: absolute;
        top: 100%;
        left: -8px;
        right: -8px;
        height: calc(var(--abcn-gap) + 6px);
    }

    #header-nav .sub-menu a {
        color: var(--abcn-navy);
    }

    #header-nav .sub-menu a:is(:hover, :focus-visible) {
        background: #f0f5f8;
    }

    #header-nav .abcn-title {
        color: var(--abcn-navy);
    }

    #header-nav .abcn-sub {
        color: var(--abcn-muted);
    }

    /* Current page: darker gold title (AA at this size) plus the fixed arrow. */
    #header-nav .sub-menu a[aria-current="page"] .abcn-title,
    #header-nav .sub-menu .current-menu-item > a .abcn-title {
        color: var(--abcn-gold-ink);
    }
}

/* Large screens: the bundle scales header type with the viewport above 1440px
   (logo, CTA and nav links). Same media pair as app.min.css, so the triggers
   stay in step with the logo and CTA; values keep the ~28px Figma rhythm. */
@media (min-width: 1440px) {
    #header-nav .abcn-trigger {
        gap: .3645833333vw;
        font-size: .9895833333vw;
        line-height: 1.4583333333vw;
        padding: .5572916667vw .7291666667vw;
    }

    #header-nav .abcn-chevron {
        width: .7421875vw;
        height: .7421875vw;
    }

    /* The card scales in the same rhythm: every value below equals its px
       counterpart exactly at 1440px (1vw = 14.4px) and grows with the trigger,
       logo and CTA above it, so header and panel read as one scale. */
    #header-nav {
        --abcn-gap: .8333333333vw;
    }

    .header.is-scrolled #header-nav,
    .header.is-preparing-scrolled #header-nav {
        --abcn-gap: 1.6666666667vw;
    }

    #header-nav .sub-menu {
        min-width: 20.8333333333vw;
        padding: .5555555556vw;
        border-radius: 1.1111111111vw;
    }

    #header-nav .sub-menu::before {
        top: -.3472222222vw;
        width: .8333333333vw;
        height: .8333333333vw;
        margin-left: -.4166666667vw;
        border-radius: .2083333333vw 0 0 0;
    }

    #header-nav .sub-menu a {
        gap: .2083333333vw;
        border-radius: .6944444444vw;
        padding: .7638888889vw 2.7777777778vw .7638888889vw .9722222222vw;
    }

    #header-nav .abcn-title {
        font-size: 1.25vw;
    }

    #header-nav .abcn-overview .abcn-title {
        font-size: 1.4583333333vw;
    }

    #header-nav .abcn-sub {
        font-size: .9027777778vw;
    }

    #header-nav .abcn-arrow {
        right: .9722222222vw;
        width: .9722222222vw;
        height: .9722222222vw;
        margin-top: -.4861111111vw;
    }

    #header-nav .abcn-overview::after {
        width: 1.3888888889vw;
        height: .1041666667vw;
        margin: .2083333333vw .9722222222vw .625vw;
    }

    #header-nav .abcn-overview:is(:hover, :focus-within)::after {
        width: 2.5vw;
    }

    #header-nav .ul_menu > .current-menu-item > .abcn-trigger::after,
    #header-nav .ul_menu > .current-menu-ancestor > .abcn-trigger::after,
    #header-nav .ul_menu > .current-menu-parent > .abcn-trigger::after {
        width: .2777777778vw;
        height: .2777777778vw;
        margin-left: -.1388888889vw;
    }
}

@media (min-width: 992px) and (max-width: 1440px) {
    #header-nav .abcn-trigger {
        gap: 6px;
        font-size: 16px;
        line-height: 1.2;
        padding: 9px 12px;
    }

    #header-nav .abcn-chevron {
        width: 12px;
        height: 12px;
    }
}

/* ===================================================================== MOBILE
   Inside the theme's navy overlay card: an accordion, left-aligned rows. */
@media (max-width: 991px) {

    /* The theme's overlay is position:fixed; inset:0 with visible overflow, so
       an expanded accordion on a short or landscape phone ran off-screen with no
       way to reach it. Let the overlay itself scroll (the 94px top padding keeps
       the card clear of the absolutely-positioned close X, which scrolls with it). */
    #header-nav {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #header-nav .ul_menu {
        flex-shrink: 0;
    }

    #header-nav .ul_menu > li {
        width: 100%;
    }

    #header-nav .ul_menu > li + li {
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    #header-nav .abcn-trigger {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 16px 10px;
        border-radius: 10px;
        color: #fff;
        font-size: 18px;
        text-align: left;
    }

    #header-nav .abcn-chevron {
        width: 14px;
        height: 14px;
        opacity: .7;
    }

    #header-nav .abcn-trigger:focus-visible {
        outline-offset: -2px;
    }

    /* Current section: gold dot after the label. */
    #header-nav .ul_menu > .current-menu-item > .abcn-trigger .abcn-trigger__label::after,
    #header-nav .ul_menu > .current-menu-ancestor > .abcn-trigger .abcn-trigger__label::after,
    #header-nav .ul_menu > .current-menu-parent > .abcn-trigger .abcn-trigger__label::after {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        margin: 0 0 3px 9px;
        border-radius: 50%;
        background: var(--abcn-gold);
        vertical-align: middle;
    }

    /* Accordion: height animates both ways (0fr <-> 1fr); the closed list is
       also visibility:hidden, so it leaves the tab order and the a11y tree. */
    #header-nav .abcn-collapse {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .3s var(--abcn-ease);
    }

    #header-nav .is-open > .abcn-collapse {
        grid-template-rows: 1fr;
    }

    #header-nav .abcn-collapse > .sub-menu {
        min-height: 0;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        transition: opacity .18s ease, visibility 0s linear .3s;
    }

    #header-nav .is-open > .abcn-collapse > .sub-menu {
        visibility: visible;
        opacity: 1;
        transition: opacity .24s ease .06s, visibility 0s;
    }

    /* No-JS fallback (no wrapper yet): plain show/hide. */
    #header-nav .ul_menu > li > .sub-menu {
        display: none;
    }

    #header-nav .ul_menu > li.is-open > .sub-menu {
        display: block;
    }

    /* Panel: indented behind a thin gold rule. */
    #header-nav .sub-menu {
        position: relative;
        width: auto;
        padding: 0 0 0 20px;   /* no vertical padding: it would survive the 0fr collapse */
    }

    /* Bottom breathing room as content, so it collapses with the panel. */
    #header-nav .sub-menu::after {
        content: "";
        display: block;
        height: 14px;
    }

    #header-nav .sub-menu::before {
        content: "";
        position: absolute;
        top: 4px;
        bottom: 18px;
        left: 11px;
        width: 1px;
        background: var(--abcn-gold);
        opacity: .75;
    }

    #header-nav .sub-menu a,
    .header.is-scrolled #header-nav .sub-menu a,
    .header.is-preparing-scrolled #header-nav .sub-menu a {
        color: #fff;
        padding: 10px 36px 10px 10px;
    }

    #header-nav .sub-menu a:is(:hover, :focus-visible) {
        background: rgba(255, 255, 255, .06);
    }

    #header-nav .sub-menu a:focus-visible {
        outline-color: var(--abcn-gold-soft);
    }

    #header-nav .abcn-title {
        color: #fff;
        font-size: 19px;
    }

    #header-nav .abcn-sub {
        color: rgba(255, 255, 255, .64);
    }

    #header-nav .abcn-arrow {
        right: 10px;
        color: var(--abcn-gold-soft);
    }

    #header-nav .sub-menu a[aria-current="page"] .abcn-title,
    #header-nav .sub-menu .current-menu-item > a .abcn-title {
        color: var(--abcn-gold-soft);
    }

    #header-nav .abcn-overview .abcn-title {
        font-size: 21px;
    }

    /* Phones: the heading subtitle can't fit one line, so it breaks at a fixed
       measure — always "Making Japan accessible, / one brand at a time", in every
       browser (no reliance on text-wrap:balance, which Safari < 17.4 ignores). */
    #header-nav .abcn-overview .abcn-sub {
        max-width: 12.75em;
        white-space: normal;
    }

    #header-nav .abcn-overview::after {
        margin: 2px 10px 8px;
    }

    /* The header CTA, repeated as a pill at the foot of the overlay card
       (the theme hides .in_desktop below 992px, so phones had no CTA). */
    #header-nav .ul_menu > .abcn-cta {
        display: block;
        padding: 14px 0 4px;
    }

    #header-nav .ul_menu > li.abcn-cta {
        border-top: 0;
    }

    #header-nav .abcn-cta > a,
    .header.is-scrolled #header-nav .abcn-cta > a,
    .header.is-preparing-scrolled #header-nav .abcn-cta > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 15px 20px;
        border-radius: 999px;
        background: var(--abcn-gold-ink);
        color: #fff;
        font-family: Inter, sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
        text-align: center;
        opacity: 1;
        transition: background-color .2s ease;
    }

    #header-nav .abcn-cta > a:is(:hover, :focus-visible) {
        background: #7a5923;
        opacity: 1;
    }

    #header-nav .abcn-cta > a:focus {
        outline: none;
    }

    #header-nav .abcn-cta > a:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    #header-nav .abcn-cta svg {
        flex: none;
        width: 16px;
        height: 16px;
    }
}

/* Light-ground pages: the burger lines on the light ground in navy. Scoped to
   the OPEN button: the close X sits on the navy overlay and must stay white. */
.abc-header-light .header_toggle-open .header_toggle-line {
    background: #00182b;
}

/* Light-ground pages serve the navy wordmark; the bundle's scrolled-state invert
   (written for the white one) turned it near-white on the pale pill. */
.abc-header-light .header.is-scrolled .header_grid .header_logo img,
.abc-header-light .header.is-preparing-scrolled .header_grid .header_logo img {
    filter: none;
}

/* Burger and close X: the bundle strips button outlines, so neither showed focus.
   A white ring over a navy halo reads on photo heroes, the light header and the
   navy overlay alike. */
.header .header_toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px #00182b;
}

/* ------------------------------------------------- scrolled pill over dark --
   header-ground.js adds .is-over-dark while a dark ground (navy panels, the Why
   band, the map, the footer, photos) sits under the pill. The pale glass with
   navy labels measured ~2:1 there; this is the same pill in navy glass. */
.header.is-scrolled.is-over-dark .header_grid {
    background: rgba(0, 24, 43, .6);
}

/* White wordmark (photo-hero pages): shown as drawn instead of inverted. The logo answers
   to its OWN ground (.is-over-dark-logo) as well as the pill's, because the pill can
   straddle a light/dark boundary with the wordmark on the dark half. */
.header.is-scrolled:is(.is-over-dark, .is-over-dark-logo) .header_grid .header_logo img {
    filter: none;
}

/* Navy wordmark (light-ground pages): knocked out to white. */
.abc-header-light .header.is-scrolled:is(.is-over-dark, .is-over-dark-logo) .header_grid .header_logo img {
    filter: brightness(0) invert(1);
}

@media (min-width: 992px) {
    .header.is-scrolled.is-over-dark #header-nav .abcn-trigger,
    .header.is-scrolled.is-over-dark #header-nav .ul_menu > li > a {
        color: #fff;
    }

    .header.is-scrolled.is-over-dark #header-nav .abcn-trigger:hover,
    .header.is-scrolled.is-over-dark #header-nav .is-open > .abcn-trigger {
        background: rgba(255, 255, 255, .12);
    }
}

/* The bundle fades the pill's background with no motion guard; drop that fade
   (keeping its width/radius/shadow transitions) when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
    .header[data-header].is-scrolled .header_grid {
        transition-property: width, border-radius, box-shadow;
    }
}

@media (prefers-reduced-motion: reduce) {
    #header-nav .sub-menu,
    #header-nav .is-open > .sub-menu,
    #header-nav .is-open > .abcn-collapse > .sub-menu,
    #header-nav .abcn-collapse,
    #header-nav .abcn-collapse > .sub-menu,
    #header-nav .abcn-chevron,
    #header-nav .abcn-arrow,
    #header-nav .abcn-trigger,
    #header-nav .abcn-overview::after,
    #header-nav .sub-menu a {
        transition: none !important;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
    #header-nav .sub-menu {
        transform: translate(-50%, 0);
    }
}