/*
 * Market switcher: the country/language choice at the top of the header.
 *
 * Loaded on every page, not just the migrated surface - the header is shared,
 * and a switcher that changed shape between pages would be worse than either
 * shape. It was the first piece of site-wide chrome on the design system
 * (Decision 14); the navigation and footer followed (Decisions 15 and 17).
 *
 * From 640px it is the row of flags it always was, pixel for pixel. Below 640px,
 * nine flags and three labels were a strip of noise across the top of a phone,
 * so they collapse into one quiet control - current flag, code, chevron - that
 * opens the same list, with every destination and every form untouched.
 *
 * The compact form needs JavaScript, so it only applies once the inline script
 * after the markup (layout.html) has marked the switcher .is-enhanced - the same
 * script that makes it work. Without it, a phone keeps the row, and no market is
 * ever out of reach.
 */

/* The five declarations each option carried inline, moved here so a phone can
   restyle the rows. Qualified with button. to beat Foundation's button styles,
   which the inline style used to outrank on its own. */
button.market-switcher__option,
button.market-switcher__option:hover,
button.market-switcher__option:focus {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
}

/* The option's accessible name. Hidden visually on the row, where the flag
   and the hint are what a sighted visitor reads; it becomes the visible label
   in the phone list. */
.market-switcher__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.market-switcher__toggle {
    display: none;
}

/* The row's hint ("NL", "FR") beside its flag: the legacy row's own offsets
   and grey, moved here from an inline style, pixel for pixel. */
.market-switcher__hint {
    position: relative;
    inset-block-start: 2px;
    inset-inline-start: 1px;
    color: #494949;
}

@media (max-width: 639px) {
    /* Written as a max-width query, unlike the rest of the design system: here
       the phone form is the exception layered over a legacy default that every
       page already has, and a min-width rule would have to undo eight
       declarations to restore the row. */

    .market-switcher.is-enhanced {
        inset-inline-end: var(--shop-gutter);
    }

    /* Lightweight on purpose: no border, no fill until it is pointed at, so it
       sits under the logo in weight rather than beside it. 40px tall, because
       that is the strip the header already reserves above the logo; a 44px
       target would push the whole header down on every page. */
    .market-switcher.is-enhanced button.market-switcher__toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 40px;
        margin: 0;
        padding: 0 var(--shop-space-2);
        border: none;
        border-radius: var(--shop-radius-md);
        background: transparent;
        color: var(--shop-text);
        font-family: var(--shop-font);
        font-size: var(--shop-text-md);
        font-weight: var(--shop-weight-semibold);
        line-height: 1;
    }

    .market-switcher.is-enhanced button.market-switcher__toggle[aria-expanded="true"] {
        background: var(--shop-surface-subtle);
        color: var(--shop-ink);
    }

    /* Hover only where there is a pointer to hover with: on touch, :hover sticks
       after the tap that closed the list and left the button looking open. */
    @media (hover: hover) {
        .market-switcher.is-enhanced button.market-switcher__toggle:hover {
            background: var(--shop-surface-subtle);
            color: var(--shop-ink);
        }

        .market-switcher.is-enhanced button.market-switcher__option:hover {
            background: var(--shop-surface-subtle);
        }
    }

    .market-switcher.is-enhanced button.market-switcher__toggle:focus-visible {
        outline: 2px solid var(--shop-accent);
        outline-offset: 2px;
    }

    .market-switcher__toggle img {
        flex: none;
        width: 16px;
        height: 12px;
    }

    /* The shared Phosphor caret (images/icons/caret-down.svg); 16px keeps its
       stroke close to the weight of the other header icons. */
    .market-switcher__chevron {
        flex: none;
        display: flex;
        width: var(--shop-icon-xs);
        height: var(--shop-icon-xs);
        transition: rotate var(--shop-duration) var(--shop-ease);
    }

    .market-switcher__chevron svg {
        width: 100%;
        height: 100%;
    }

    .market-switcher__toggle[aria-expanded="true"] .market-switcher__chevron {
        rotate: 180deg;
    }

    /* base.css drops motion only on the migrated surface; this file is on every
       page, so it says so itself. */
    @media (prefers-reduced-motion: reduce) {
        .market-switcher__chevron {
            transition: none;
        }
    }

    /* The list: closed until the toggle says otherwise. Driven by the ARIA state
       itself, so what is announced and what is shown cannot disagree. */
    .market-switcher.is-enhanced .market-switcher__list {
        position: absolute;
        inset-block-start: calc(100% + var(--shop-space-1));
        inset-inline-end: 0;
        z-index: var(--shop-z-dropdown);
        display: none;
        min-width: 232px;
        max-width: calc(100vw - var(--shop-gutter) * 2);
        margin: 0;
        padding: 6px;
        border: 1px solid var(--shop-border);
        border-radius: var(--shop-radius-lg);
        background: var(--shop-surface);
        box-shadow: var(--shop-shadow-card-hover);
    }

    .market-switcher.is-enhanced .market-switcher__toggle[aria-expanded="true"] + .market-switcher__list {
        display: block;
    }

    .market-switcher.is-enhanced .market-switcher__list li {
        display: block;
        padding: 0;
    }

    .market-switcher.is-enhanced button.market-switcher__option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: var(--shop-tap);
        margin: 0;
        padding: 0 var(--shop-space-3);
        border-radius: var(--shop-radius-md);
        color: var(--shop-ink);
        font-family: var(--shop-font);
        font-size: var(--shop-text-control);
        line-height: var(--shop-leading-tight);
        text-align: start;
    }

    .market-switcher.is-enhanced button.market-switcher__option:focus-visible {
        outline: 2px solid var(--shop-accent);
        outline-offset: -2px;
    }

    /* The market you are on: the weight, and a tick at the end of the row. */
    .market-switcher.is-enhanced button.market-switcher__option[aria-current="true"] {
        font-weight: var(--shop-weight-semibold);
    }

    .market-switcher.is-enhanced button.market-switcher__option[aria-current="true"]::after {
        content: "";
        flex: none;
        width: 16px;
        height: 16px;
        margin-inline-start: auto;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b21b6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.8'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    /* France's asset is 20x18 where the rest are 16x12. */
    .market-switcher.is-enhanced .market-switcher__option img {
        flex: none;
        width: 16px;
        height: 12px;
        object-fit: cover;
    }

    .market-switcher.is-enhanced .market-switcher__name {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }

    .market-switcher.is-enhanced .market-switcher__hint {
        display: none;
    }
}