/* ==========================================================================
   Avenia Zero — landing page
   Colors sampled from image-20260806-143026.png
   ========================================================================== */

/* Fonts — Inter, self-hosted (SIL OFL, see assets/fonts/OFL.txt).
   Variable weight axis 400–700, split into the two subsets the site needs:
   latin-ext carries the Slovenian/Croatian/Polish diacritics. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Palette */
    --bg: #F2F1EC;
    --ink: #080808;
    --ink-muted: #5A5852;
    --on-dark: #FFFFFF;
    --accent: #D4C850;

    /* Spacing */
    --space-2xs: 0.375rem;
    --space-xs: 0.625rem;
    --space-sm: 0.875rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 12px;
    --radius-pill: 999px;

    /* Layout */
    --container: 1080px;
    --gutter: 1rem;

    --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hairline: 1px solid var(--ink);
}

/* Reset ------------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body,
p,
ul {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
}

/* Announced by screen readers, invisible on screen. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

/* Page shell — footer stays at the bottom on short viewports -------------- */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    line-height: 1.4;
}

.topbar__inner,
.main__inner {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Focus — one visible treatment everywhere ------------------------------- */

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

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

.topbar {
    border-bottom: var(--hairline);
}

.topbar__inner {
    padding-block: var(--space-sm);
}

.topbar__help {
    font-size: 0.875rem;
    font-weight: 700;
}

.topbar__mail {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.topbar__mail:hover {
    text-decoration-thickness: 2px;
}

/* Main ------------------------------------------------------------------- */

.main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-xl);
}

.main__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
}

.logo {
    display: block;
    width: min(240px, 68vw);
    height: auto;
}

/* Shop chooser ----------------------------------------------------------- */

.chooser {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
}

.shops {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    width: 100%;
    max-width: 340px;
}

.shop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--ink);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: transform 0.15s ease,
                box-shadow 0.15s ease,
                background-color 0.15s ease,
                color 0.15s ease;
}

.shop:hover,
.shop:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 0 var(--ink);
    background-color: var(--ink);
    color: var(--on-dark);
}

.shop:active {
    transform: translateY(0);
    box-shadow: none;
}

/* The shop geo-IP (or ?country=) picked out. Inverted like hover, plus an accent ring
   so "chosen for you" still reads differently from "your pointer is here". */
.shop--selected {
    background-color: var(--ink);
    color: var(--on-dark);
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
}

.shop--selected:hover,
.shop--selected:focus-visible {
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 4px 0 0 var(--ink);
}

.shop__flag {
    display: block;
    width: 40px;
    height: auto;
    flex: none;
}

/* Countdown -------------------------------------------------------------- */

.countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 1.5rem;
    color: var(--ink-muted);
    font-size: 0.875rem;
}

.countdown[hidden] {
    display: none;
}

.countdown__cancel {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.countdown__cancel:hover {
    text-decoration-thickness: 2px;
}

/* Footer ----------------------------------------------------------------- */

.footer {
    background-color: var(--ink);
    color: var(--on-dark);
    text-align: center;
    padding: var(--space-md) var(--gutter);
}

.footer__text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* Tablet — 768px and up -------------------------------------------------- */

@media (min-width: 768px) {
    :root {
        --gutter: 2rem;
    }

    .topbar__help {
        font-size: 0.9375rem;
    }

    .logo {
        width: min(300px, 42vw);
    }

    .shops {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        max-width: none;
        gap: var(--space-md);
    }

    .shop {
        padding: var(--space-sm) var(--space-lg);
    }

    .footer__text {
        font-size: 0.8125rem;
    }
}

/* Desktop — above 1024px ------------------------------------------------- */

@media (min-width: 1025px) {
    .main {
        padding-block: calc(var(--space-xl) * 1.5);
    }

    .logo {
        width: 340px;
    }

    .shops {
        gap: var(--space-lg);
    }

    .shop {
        font-size: 1rem;
    }

    .shop__flag {
        width: 44px;
    }
}

/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .shop:hover,
    .shop:focus-visible {
        transform: none;
    }
}