/* ─────────────────────────────────────────────────────────────────
   base.css — reset + typography + accessibility primitives
   ───────────────────────────────────────────────────────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    line-height: var(--lh-base);
    color-scheme: light;
    /* Belt-and-braces: body already sets overflow-x:clip, but
       document.documentElement.scrollWidth measures html — without this
       Chrome on mobile/tablet still reports the off-canvas drawer as
       horizontal overflow, even though the user can't actually scroll.
       Mirror the body rule on html so the measurement matches the UX. */
    overflow-x: hidden;
    overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--color-ink);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent horizontal scroll triggered by off-canvas mobile drawer
       (.primary-nav uses transform: translateX(100%) which contributes to
       scrollWidth). `clip` is preferred over `hidden` because it does NOT
       create a scroll container, so position: sticky on the header still works. */
    overflow-x: hidden;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    /* Default — small headings. h1/h2 override below with proportional rhythm. */
    margin: 0 0 var(--space-3);
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance; /* better headline line-breaks where supported */
    /* German compound words like "Verpackungsmaterialien" exceed 343px
       container width on 375 mobile and were being clipped by body
       overflow-x:clip. break-word only breaks when a single token
       cannot fit, so LT/EN copy is unaffected. */
    overflow-wrap: break-word;
}

/* Proportional bottom rhythm — bigger heading, more breathing room. Small
   headings stay tight; large ones earn the air. */
h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; margin-bottom: var(--space-4); }
h2 { font-size: var(--fs-h2); letter-spacing: -0.018em; margin-bottom: var(--space-4); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-lg); letter-spacing: var(--tracking-snug); }
h5, h6 { font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); margin-bottom: var(--space-2); }

/* Editorial display heading — for hero blocks. Tighter tracking, darker
   ink, optical balance for large counters. */
.display-1 {
    font-family: var(--font-head);
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: -0.028em;
    color: var(--color-ink);
    /* Hero h1 (up to 64px) — earn extra air below before lead paragraph. */
    margin: 0 0 var(--space-5);
    text-wrap: balance;
    /* Editorial type features — kerning, ligatures, contextual alts,
       optical sizing for larger glyphs. Browsers without support no-op. */
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures contextual;
}

p {
    margin: 0 0 var(--space-3);
    max-width: 70ch;
    text-wrap: pretty;
    /* Same rationale as headings — protect mobile against unbreakable
       compound words in DE/RU body copy. */
    overflow-wrap: break-word;
}

/* Drop cap utility — applies to the first letter of the first paragraph
   inside a .has-dropcap container. Editorial; use sparingly (one per
   page max) on lead/intro paragraphs. Sized to roughly 3 lines tall and
   floated so body text wraps around it. */
.has-dropcap > p:first-of-type::first-letter,
p.has-dropcap::first-letter {
    float: left;
    font-family: var(--font-head);
    font-size: 3.4em;
    font-weight: var(--fw-bold);
    line-height: 0.9;
    margin: 0.08em var(--space-3) 0 0;
    color: var(--color-green-dark);
    /* Optical correction — most fonts have left side-bearing > visual
       edge for capitals. Negative left margin pulls the cap flush. */
    margin-left: -0.04em;
    /* Disable underline-from-link rules on this pseudo. */
    background: none;
    text-decoration: none;
}
@media (max-width: 600px) {
    .has-dropcap > p:first-of-type::first-letter,
    p.has-dropcap::first-letter {
        font-size: 2.8em;
        margin-right: var(--space-2);
    }
}

a {
    color: var(--color-green-dark);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease),
                background-size var(--duration-base) var(--ease);
    /* Animated underline that expands from the left on hover.
       Uses a linear-gradient background sized to 0% width by default
       and 100% on hover. Thinner than text-decoration, brand-tinted,
       and respects text-color via color-mix(currentColor). */
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
}
a:hover {
    color: var(--color-green-darker);
    background-size: 100% 1px;
}
/* Disable the animated underline for buttons, logo, nav, cards, lang
   pills, social icons, breadcrumb arrows, badge-styled links, kicker
   links — anywhere the link is structurally a button or tile. */
.btn, .logo, .nav-home, .card, .nav-toggle,
.primary-nav__list > li > a,
.lang-switcher__item, .header-top a,
.breadcrumb a, .site-footer__col a, .site-footer__social a,
.site-footer__legal a, .site-footer__top-link,
.theme-toggle, .skip-link,
.eyebrow__link, .card__more {
    background-image: none;
}
@media (prefers-reduced-motion: reduce) {
    a { transition: color var(--duration-fast) var(--ease); }
}

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

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

button { cursor: pointer; background: none; border: none; padding: 0; }

ul, ol { padding-left: var(--space-5); }

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

::selection {
    background: color-mix(in srgb, var(--color-green) 28%, transparent);
    color: var(--color-ink);
    text-shadow: none;
}
::-moz-selection {
    background: color-mix(in srgb, var(--color-green) 28%, transparent);
    color: var(--color-ink);
    text-shadow: none;
}

/* Custom scrollbar — restrained, brand-tinted. WebKit/Blink + Firefox.
   Designed to feel like ink, not chrome. */
@supports (scrollbar-color: auto) {
    html {
        scrollbar-color: var(--color-moss-soft) transparent;
        scrollbar-width: thin;
    }
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-moss) 40%, transparent);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-green) 60%, transparent);
    background-clip: padding-box;
}

/* Accessible focus ring.
   Two-layer approach:
   1. :focus gets a visible outline as the baseline for browsers that
      do not support :focus-visible (older Safari, Firefox < 85) so
      keyboard users always see something.
   2. :focus-visible refines the outline for modern browsers — this is
      what keyboard users see; mouse clicks don't trigger it.
   The earlier `outline: none` was removed because it blocked the
   baseline for unsupported browsers. */
:focus {
    outline: 2px solid var(--color-accent, var(--color-green));
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none; /* Hide ring for pointer interactions in supporting browsers */
}
:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-green);
    color: #fff;
    font-weight: var(--fw-semibold);
    z-index: var(--z-skip);
    border-radius: 0 0 var(--radius-md) 0;
}
/* Show skip link on keyboard focus (focus-visible) or on plain :focus
   as fallback for browsers without :focus-visible support. */
.skip-link:focus,
.skip-link:focus-visible {
    left: 0;
    text-decoration: none;
}

/* Visually hidden — for screen-reader-only labels */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─────────────────────────────────────────────────────────────────
   Print stylesheet — A4 format.
   Hides chrome (nav, footer, CTAs, lang switcher, social links).
   Shows main content, breadcrumbs, and contact rekvizitai.
   Adds href after links so URLs are visible on paper.
   ───────────────────────────────────────────────────────────────── */
@media print {
    @page {
        size: A4;
        margin: 20mm 15mm;
    }

    /* Hide navigation and decorative chrome */
    .site-header,
    .site-footer,
    .skip-link,
    .lang-switcher,
    .theme-toggle,
    .nav-toggle,
    .primary-nav,
    .hero__cta,
    .cta-block,
    .btn,
    .social-links,
    .site-footer__social,
    .showcase-dots,
    [data-reveal],
    .back-to-top {
        display: none !important;
    }

    /* Ensure readable body text */
    body {
        font-size: 11pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #000;
        page-break-after: avoid;
    }

    /* Show URLs after links — helpful for resource references */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #444;
    }
    /* Don't expand internal links, hash anchors, or tel/mailto */
    a[href^="/"]:after,
    a[href^="#"]:after,
    a[href^="tel:"]:after,
    a[href^="mailto:"]:after {
        content: none;
    }

    /* Keep images from breaking across pages */
    img {
        max-width: 100%;
        page-break-inside: avoid;
    }

    /* Breadcrumbs visible for context */
    .breadcrumb {
        display: block;
        margin-bottom: 8pt;
        font-size: 9pt;
        color: #444;
    }

    /* Contact rekvizitai — keep readable */
    .rekvizitai-card,
    .rekvizitai-list,
    .contact-channels {
        display: block;
    }

    /* Prevent widows / orphans */
    p {
        widows: 3;
        orphans: 3;
    }
}