/*
 * AAMV design system: layout (DESIGN_SYSTEM.md §3).
 * Utility bar, header and navigation (desktop, mobile < 1050px), account menu, notices,
 * page bands and overlap, doodles, footer.
 */

.skip-link:focus {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 12px 20px;
    border-radius: var(--a-radius-pill);
    background: var(--a-ink);
    color: var(--a-white);
    font-weight: 800;
}

/* ---------- Utility bar ---------- */
.a-utility { background: var(--a-ink); color: var(--a-paper); font-size: var(--a-fs-small); line-height: 1.3; }
.a-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--a-h-utility);
}
.a-utility__contact, .a-utility__account { display: flex; align-items: center; gap: 24px; min-width: 0; }
.a-utility__account { flex-shrink: 0; gap: 20px; }
.a-utility__contact > *, .a-utility__account > * { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.a-utility .bi { font-size: 16px; }
.a-utility a { color: var(--a-paper); font-weight: 700; text-decoration: none; }
.a-utility a:hover { color: var(--a-sun); text-decoration: underline; }
.a-utility a.a-utility__cta { color: var(--a-sun); font-weight: 800; }
/* Current section (Administration in the back office) */
.a-utility a.is-active { color: var(--a-sun); text-decoration: underline; }

/* ---------- Header ---------- */
.a-header {
    position: relative;
    z-index: 1020;
    background: var(--a-card);
    border-bottom: 3px solid var(--a-sun);
}
.a-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: calc(var(--a-h-header) - 3px);
}
/* Overflow guard: every child may shrink; the account name is the part that gives way (ellipsis) */
.a-header__inner > * { min-width: 0; }

.a-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; color: var(--a-ink); text-decoration: none; }
.a-brand:hover { color: var(--a-ink); }
.a-brand img { display: block; width: 88px; height: 64px; object-fit: contain; }
.a-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.a-brand__name { font-family: var(--a-font-display); font-size: 30px; font-weight: 800; }
.a-brand__tagline { display: flex; flex-direction: column; color: var(--a-muted); font-size: var(--a-fs-xs); font-weight: 700; line-height: 1.25; white-space: nowrap; }

/* Navigation (desktop): links, submenu toggles, then the login button or the account pill */
.a-nav { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.a-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.a-nav__item { position: relative; }
.a-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--a-radius-pill);
    background: transparent;
    color: var(--a-ink);
    font-family: var(--a-font-body);
    font-size: var(--a-fs-field);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--a-ease), color var(--a-ease);
}
.a-nav__link:hover, .a-nav__toggle[aria-expanded="true"] { background: var(--a-sand); color: var(--a-ink); }
.a-nav__link.is-active, .a-nav__link[aria-current] { background: var(--a-coral-soft); color: var(--a-coral-ink); }
.a-nav__link:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 2px; }
.a-nav__toggle .bi { font-size: 13px; transition: transform var(--a-ease); }
.a-nav__toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
.a-nav > .btn { flex-shrink: 0; margin-left: 12px; }
.a-nav > .dropdown { min-width: 0; margin-left: 12px; }
.a-nav__mobile-only { display: none !important; }

/* Submenus: opened by hover, keyboard focus or the toggle (aria-expanded); .is-submenu-closed wins */
.a-nav__submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 250px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--a-card);
    border: var(--a-border) solid var(--a-ink);
    border-radius: var(--a-radius-field);
    box-shadow: 6px 6px 0 var(--a-sun);
}
.a-nav__submenu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.a-nav__item.has-submenu:hover > .a-nav__submenu,
.a-nav__item.has-submenu:focus-within > .a-nav__submenu,
.a-nav__item.has-submenu > .a-nav__toggle[aria-expanded="true"] + .a-nav__submenu { display: block; }
.a-nav__item.has-submenu.is-submenu-closed > .a-nav__submenu { display: none; }
.a-nav__submenu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: 10px;
    color: var(--a-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}
.a-nav__submenu a:hover { background: var(--a-sun-soft); color: var(--a-ink); }
.a-nav__submenu a:focus-visible { outline: 3px solid var(--a-sun); outline-offset: -3px; }
.a-nav__separator { height: var(--a-border); margin: 6px 8px; background: var(--a-line); }

/* Account pill (dropdown toggle) */
.a-account {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: var(--a-h-btn);
    padding: 0 14px 0 4px;
    border: var(--a-border) solid var(--a-line);
    border-radius: var(--a-radius-pill);
    background: var(--a-field);
    color: var(--a-ink);
    font-family: var(--a-font-body);
    font-size: var(--a-fs-field);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--a-ease);
}
.a-account:hover, .a-account[aria-expanded="true"] { border-color: var(--a-ink); color: var(--a-ink); }
.a-account:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 2px; }
.a-account.dropdown-toggle::after { display: none; }
.a-account > .a-avatar, .a-account > .bi { flex-shrink: 0; }
.a-account__name { min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.a-account .bi-chevron-down { font-size: 14px; transition: transform var(--a-ease); }
.a-account[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.a-account + .dropdown-menu { min-width: 240px; margin-top: 8px !important; }
/* Heading of the account entries in the mobile panel only (see below) */
.a-nav__account-head { display: none; }

/* Mobile controls (call tile and burger), hidden on desktop */
.a-header__mobile { display: none; align-items: center; gap: 8px; flex-shrink: 0; }
.a-header__call, .a-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 14px;
    color: var(--a-ink);
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
}
.a-header__call { border: 0; background: var(--a-sun-soft); }
.a-header__call:hover { background: var(--a-sun); color: var(--a-ink); }
.a-burger { border: var(--a-border) solid var(--a-ink); background: var(--a-card); cursor: pointer; }
.a-burger:hover { background: var(--a-sun-soft); }
.a-burger .bi-x-lg, .a-burger[aria-expanded="true"] .bi-list { display: none; }
.a-burger[aria-expanded="true"] .bi-x-lg { display: inline-block; }
.a-header__call:focus-visible, .a-burger:focus-visible { outline: 3px solid var(--a-sun); outline-offset: 2px; }

/*
 * Tighter header from 1050 to 1280px: the longest menu (member: 5 entries, plus the account pill with a long
 * first name) must fit in the container. No tagline, smaller logo and links, shorter account name.
 */
@media (max-width: 1279.98px) {
    .a-brand { gap: 10px; }
    .a-brand__tagline { display: none; }
    .a-brand img { width: 72px; height: 52px; }
    .a-brand__name { font-size: 26px; }
    .a-nav__list { gap: 2px; }
    .a-nav__link { padding: 8px 10px; font-size: 16px; }
    .a-nav > .btn, .a-nav > .dropdown { margin-left: 8px; }
    .a-account { gap: 8px; padding-right: 12px; font-size: 16px; }
    .a-account__name { max-width: 140px; }
}

/* ---------- Mobile header (< 1050px) ---------- */
@media (max-width: 1049.98px) {
    .a-header__inner { height: calc(var(--a-h-header-mobile) - 3px); }
    .a-brand { gap: 10px; }
    .a-brand img { width: 62px; height: 46px; }
    .a-brand__name { font-size: 26px; }
    .a-header__mobile { display: flex; }

    /* The navigation unrolls under the header as a full-screen scrolling panel */
    body.a-menu-open { overflow: hidden; }
    body.a-menu-open .a-header { position: fixed; top: 0; left: 0; right: 0; }
    .a-nav { display: none; }
    .a-nav.is-open {
        position: fixed;
        top: var(--a-h-header-mobile);
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* Start at the top: with the desktop flex-end, an overflowing panel spills upwards out of reach */
        justify-content: flex-start;
        gap: 12px;
        padding: 16px var(--a-container-pad) 40px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--a-card);
    }
    .a-nav__list { flex-direction: column; align-items: stretch; }
    .a-nav__link { display: flex; width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--a-radius-field); font-size: 20px; text-align: left; }
    /* Chevron of the submenu parents: large enough to be seen, in ink even on the active entry (CPT-8) */
    .a-nav__toggle .bi { margin-left: auto; color: var(--a-ink); font-size: 20px; }
    .a-nav__submenu { position: static; min-width: 0; margin: 4px 0 8px 16px; padding: 4px 0 4px 12px; border: 0; border-left: var(--a-border) dashed var(--a-line); border-radius: 0; box-shadow: none; }
    .a-nav__submenu::before { display: none; }
    /* Mobile: in line in the panel, shown only when its toggle is expanded (not on hover or focus) */
    .a-nav__item.has-submenu:hover > .a-nav__submenu,
    .a-nav__item.has-submenu:focus-within > .a-nav__submenu { display: none; }
    .a-nav__item.has-submenu > .a-nav__toggle[aria-expanded="true"] + .a-nav__submenu { display: block; }
    .a-nav__submenu a { font-size: 18px; white-space: normal; }
    .a-nav > .btn, .a-nav > .dropdown { width: 100%; margin: 0; }
    .a-nav > .btn:first-of-type { margin-top: 8px; }
    .a-nav__mobile-only { display: flex !important; }

    /*
     * Account entries flat under a separator (CPT-8), not behind a second dropdown: a heading (avatar and
     * name), then the links of the account menu, 18px on 48px targets. The pill is hidden, the list always shown.
     */
    .a-nav > .a-nav__account { margin-top: 4px; padding-top: 16px; border-top: var(--a-border) solid var(--a-line); }
    .a-nav__account-head { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 0 16px; color: var(--a-ink); font-size: 18px; font-weight: 800; line-height: 1.3; }
    .a-nav__account > .a-account { display: none; }
    .a-nav__account > .dropdown-menu {
        position: static !important;
        inset: auto !important;
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none !important;
    }
    .a-nav__account .dropdown-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; border-radius: var(--a-radius-field); font-size: 18px; font-weight: 700; white-space: normal; }
    .a-nav__account .dropdown-item .bi { font-size: 20px; }
    .a-nav__account .dropdown-divider { margin: 8px 16px; }
}

/* ---------- Notices (flash messages) ---------- */
/* Room below too: a message never touches the page band that follows (a green message on a green band merged) */
.a-notices { padding: 24px 0; }
.a-notices > .a-container { display: flex; flex-direction: column; gap: 12px; }
.a-notices .alert { margin: 0; }

/* ---------- Page band ---------- */
.a-band {
    --a-band: var(--a-sun-soft);
    position: relative;
    overflow-x: clip;
    padding: 56px 0 64px;
    background: var(--a-band);
}
.a-band--sun   { --a-band: var(--a-sun-soft); }
.a-band--coral { --a-band: var(--a-coral-soft); }
.a-band--sky   { --a-band: var(--a-sky-soft); }
.a-band--leaf  { --a-band: var(--a-leaf-soft); }
.a-band--overlap { padding-bottom: 136px; }
.a-band--tabs { padding-bottom: 0; }
/* Compact band (back office, ADM-2): h1 at the size of an h2, less padding */
.a-band--compact { padding: 36px 0 40px; }
.a-band--compact .a-band__title { font-size: var(--a-fs-h2); line-height: 1.1; }
.a-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.a-band__inner > * { margin: 0; }
.a-band__title { font-size: var(--a-fs-h1); line-height: 1.06; max-width: 900px; }
.a-band__lead { max-width: 720px; color: var(--a-ink-2); font-size: var(--a-fs-lead); }
.a-band__inner > .a-tabs { align-self: stretch; margin-top: 20px; }

.a-overlap { position: relative; z-index: 2; margin-top: -80px; }

.a-breadcrumb ol, ol.a-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--a-muted);
    font-size: var(--a-fs-small);
    font-weight: 700;
}
/*
 * The separator ends the previous item (never "/" at the start of a line when the breadcrumb wraps):
 * no break is allowed before "/", and the items wrap as a whole.
 */
.a-breadcrumb li { display: flex; align-items: center; min-width: 0; }
.a-breadcrumb li:not(:last-child)::after { content: "/"; flex-shrink: 0; margin-left: 8px; }
.a-breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--a-muted); }
.a-breadcrumb a:hover { color: var(--a-ink); }

/* ---------- Doodles (decorative, aria-hidden) ---------- */
.a-doodle { position: absolute; z-index: 0; display: block; width: 44px; height: 44px; pointer-events: none; }
.a-doodle--star-coral { color: var(--a-coral-star); }
.a-doodle--star-sun { color: var(--a-sun); }
.a-doodle--wave-sky, .a-doodle--wave-coral { width: 120px; height: 40px; }
.a-doodle--wave-sky { color: var(--a-sky); }
.a-doodle--wave-coral { color: var(--a-coral); }
.a-doodle--ring-leaf { width: 34px; height: 34px; color: var(--a-leaf); }
/* Slots of the page band (Components/_page_band.html.twig): top right, and bottom right out of the text */
.a-band__doodle { top: 36px; right: 6%; }
.a-band__doodle--end { top: auto; bottom: 28px; }

/* ---------- Footer ---------- */
/*
 * The wave is drawn above the footer (bottom: 100%): the margin makes room for it, so that it does not eat
 * into the bottom padding of the last section (80px, 48px on a phone).
 */
.a-footer {
    position: relative;
    margin-top: 40px;
    padding: 40px 0 36px;
    background: var(--a-ink);
    color: var(--a-on-dark);
    font-size: 16px;
}
.a-footer__wave { position: absolute; bottom: calc(100% - 1px); left: 0; display: block; width: 100%; height: 40px; color: var(--a-ink); }
.a-footer__wave path { fill: currentColor; }
.a-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-gutter); }
.a-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.a-footer__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--a-white); font-family: var(--a-font-display); font-size: 30px; font-weight: 800; line-height: 1.1; }
.a-footer__title { margin: 0; color: var(--a-sun); font-family: var(--a-font-body); font-size: var(--a-fs-field); font-weight: 800; line-height: 1.3; }
.a-footer a { color: var(--a-on-dark); text-decoration: none; }
.a-footer a.a-footer__brand { color: var(--a-white); }
.a-footer a:hover { color: var(--a-sun); text-decoration: underline; }
.a-footer a:focus-visible { outline-color: var(--a-sun); }
.a-footer address { margin: 0; font-style: normal; }
.a-footer__partners { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.a-footer__partners img { display: block; max-height: 56px; width: auto; padding: 6px; border-radius: 10px; background: var(--a-white); }
.a-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--a-on-dark-line);
    font-size: var(--a-fs-small);
}
.a-footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .a-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 767.98px) {
    .a-utility { display: none; }
    .a-band { padding: 32px 0 40px; }
    .a-band--overlap { padding-bottom: 96px; }
    .a-band--tabs { padding-bottom: 24px; }
    .a-band--compact { padding: 24px 0 32px; }
    .a-band__lead { font-size: var(--a-fs-lead); }
    .a-overlap { margin-top: -60px; }
    .a-doodle:not(.a-doodle--star-coral):not(.a-doodle--star-sun) { display: none; }
    .a-doodle--star-coral, .a-doodle--star-sun { width: 34px; height: 34px; }
    /*
     * Phone: the star of every band sits in the top right corner (!important: other bands position their
     * doodles inline), and the breadcrumb and the title keep clear of it.
     */
    .a-band > :is(.a-doodle--star-coral, .a-doodle--star-sun) { top: 12px !important; right: var(--a-container-pad) !important; bottom: auto !important; left: auto !important; }
    .a-band__doodle--end { display: none; }
    .a-band:has(> .a-doodle--star-coral, > .a-doodle--star-sun) > .a-band__inner > :is(.a-breadcrumb, .a-band__title) { padding-right: 48px; }
    .a-footer { margin-top: 26px; padding: 22px 0 28px; font-size: var(--a-fs-small); }
    .a-footer__wave { height: 26px; }
    .a-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .a-footer__col { gap: 8px; }
    .a-footer__col:nth-child(-n+2) { grid-column: 1 / -1; }
    .a-footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; }
    .a-footer__brand { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .a-account .bi-chevron-down { transition: none; }
}