/*
 * Base layer: self-hosted fonts, reset-lite, typography, container, buttons, form basics.
 *
 * Fonts: Inter variable (OFL, downloaded — no Google Fonts CDN, GDPR) as the substitute for the
 * proprietary Aktiv Grotesk design font (see TODO in tokens.css). Weight map from the design:
 * Light→300, Regular→400, Medium→500, SemiBold→600, Bold Italic→700 italic.
 * unicode-range values copied from the Google Fonts CSS2 response for Inter (latin covers ASCII,
 * latin-ext covers LT diacritics ą č ę ė į š ų ū ž).
 */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/inter-roman-300-700-latin-joy4ri1.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: 300 700;
    font-display: swap;
    src: url("../fonts/inter-roman-300-700-latin-ext-9fzmmZy.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-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/inter-italic-300-700-latin-AGsS33x.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: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/inter-italic-300-700-latin-ext-Q79ZwCc.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-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

* {
    margin: 0;
}

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

html.pv-scroll-lock {
    overflow: hidden;
}

/* Sticky footer: on a short page (login, 404, the payment states) the footer used to sit wherever
   the content ended, leaving dead background below it to the bottom of the screen. Body is the
   column and #main absorbs the slack, so the footer is always AT the bottom edge or below it. */
body {
    min-height: 100vh;
    /* dvh keeps it honest on mobile, where 100vh assumes the URL bar is retracted. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--neutrali);
    color: var(--juoda);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 24px; /* body 16/24 Regular */
    -webkit-font-smoothing: antialiased;
}

/* Takes the leftover height. `1 0 auto` — grow into the gap, never shrink below its content. */
#main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* Pinning the footer alone just moves the dead space INSIDE main. A page built as one full-height
   panel (login/register/reset split, the payment states, the error band) should own that slack, so
   its background reaches the footer instead of stopping mid-screen. Only-child on purpose: pages
   made of several stacked sections must keep their natural heights. */
#main > :only-child {
    flex: 1 0 auto;
}

/* The chrome keeps its own height whatever is left over. */
body > header,
body > footer {
    flex: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
}

/* Focus convention — no focus states drawn in Figma (chrome audit) */
:focus-visible {
    outline: 2px solid var(--ryski-raudona);
    outline-offset: 2px;
}

/* Layout */
.container {
    width: 100%;
    max-width: calc(var(--container-max) + 2 * var(--container-pad));
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Typography */
h1,
h2,
h3 {
    font-weight: 300;
    text-transform: uppercase;
}

.section-label {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 1.6px;
    font-weight: 300;
    text-transform: uppercase;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-3);
    z-index: calc(var(--z-age-gate) + 1);
    padding: var(--space-2) var(--space-3);
    background: var(--balta);
    color: var(--juoda);
    border-radius: var(--radius-input);
}

.skip-link:focus-visible {
    top: var(--space-3);
}

/* Buttons — fully-rounded pills, standard height 48px (PLAN §2.3 + chrome audit) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: 48px;
    padding-inline: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: none;
    font-size: 14px;
    /* Figma button labels are 400 (SKAITYTI PLAČIAU / VISAS ASORTIMENTAS / PRENUMERUOTI). */
    font-weight: 400;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
        opacity .2s ease, transform .2s ease;
}

.btn--dark {
    background: var(--juoda);
    color: var(--balta);
}

.btn--red {
    background: var(--ryski-raudona);
    color: var(--neutrali-pilka);
}

/* AA shade, not raw --ryski-raudona: see tokens.css comment — --ryski-raudona-shade clears
   4.5:1 AA on --neutrali (this button's actual page background), --neutrali-pilka and white. */
.btn--ghost-red {
    border-color: var(--ryski-raudona-shade);
    color: var(--ryski-raudona-shade);
}

/* Dark outline pill — the vineyards/coupons CTAs (Figma 2134:2324/2326: ~1px --juoda stroke). */
.btn--ghost-dark {
    border-color: var(--juoda);
    color: var(--juoda);
}

/* Design-QA 2026-07-27 (home y≈3028, Frame 7): the outline CTA fills SOLID black on hover. */
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
    background: var(--juoda);
    color: var(--balta);
    opacity: 1;
}

/* White pill on red bands — the design's hero CTA recipe (2370:7920: white bg, --juoda text).
   Used for the 404/blocked CTA: the earlier white ghost was 4.2:1 on --ryski-raudona (< AA 4.5). */
.btn--white {
    background: var(--balta);
    color: var(--juoda);
}

.btn:hover {
    opacity: .9;
}

/* Form basics live in components/forms.css (the Figma "Input" component set). */

/* Flash messages (states undesigned — minimal branded strip) */
.pv-flash {
    padding: var(--space-3);
    text-align: center;
    background: var(--neutrali-pilka);
}

.pv-flash--success {
    background: var(--sekmes-zalia);
    color: var(--balta);
}

.pv-flash--error {
    background: var(--ryski-raudona);
    color: var(--balta);
}

/* Motion ------------------------------------------------------------------ */
/* Turbo Drive page navigations cross-fade via the View Transitions API (the
   <meta name="view-transition"> in base.html.twig opts in; unsupported browsers hard-swap). */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .2s;
}

/* Shared entrance keyframes for overlays/menus toggled via [hidden] — a keyframe replays each
   time hidden is removed, so no JS changes are needed to animate opens (closes stay instant,
   the platform convention). */
@keyframes pv-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pv-fade-down {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pv-scale-in {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: scale(1); }
}

/* Safety net: honour reduced-motion everywhere (covers every transition/animation above and in
   the component sheets, incl. the accordion tween, carousel fades and drawer/menu entrances). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}