/* ═══════════════════════════════════════════════════════════════════════
   PÍSMA — samohostované, nie z Google CDN
   ───────────────────────────────────────────────────────────────────────
   Predtým sa ťahali z `fonts.googleapis.com`. To znamená, že IP adresa
   každého návštevníka odišla do USA ešte pred udelením súhlasu s cookies.
   Mníchovský súd to v roku 2022 posúdil ako neoprávnený prenos a na
   nemeckej verzii webu je to reálne riziko ([[J-091]]).

   ⚠️ `latin-ext` je POVINNÝ, nie doplnok. Slovenská diakritika (ľ, š, č, ť,
      ž, ý, á, í, é, ô, ň, ď) aj nemecké prehlásky v ňom žijú. Bez neho by
      web vyzeral správne len do prvého „ž".

   Sora a DM Sans sú variabilné (jeden súbor pokryje všetky hrúbky),
   IBM Plex Mono variabilný nie je, preto má 400 a 500 zvlášť.
   ═══════════════════════════════════════════════════════════════════════ */

/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/sora-latin-ext-300_800.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;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(../fonts/sora-latin-300_800.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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-ext-300_700.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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/dm-sans-latin-300_700.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin-ext-400.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin-400.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin-ext-500.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;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-mono-latin-500.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;
}

/* ════════════════════════════════════════════
   Aspecta Theme — base.css
   Design tokens, reset, typography
   v6 design system
   ════════════════════════════════════════════ */

:root {
    /* ── TMAVÁ PALETA — REBRÍK ELEVÁCIE, 4 priečky (JEDNO meno na farbu, session 2026-07-16).
       Predtým každá mala 2 mená (raw --ink + alias --bg…) = zbytočný bordel.
       Zoradené od najtmavšej po najsvetlejšiu — v tomto poradí ich číta aj DS.
       ⚠️ --bg-deep JE súčasť kánonu (session 2026-07-23): je to spodná priečka, nie
       cudzí token. Predtým tu stálo, že najtmavšia je --ink — nebola to pravda,
       footer aj hero bežia na --bg-deep. Rola je nižšie, meniť ju len s DS. */
    --bg-deep: #050507;        /* 1 · RÁM stránky — hero, klientsky pás, manifest, footer, .section--deep */
    --ink: #0D0F12;            /* 2 · ZÁKLADNÁ plocha — body, header, .section */
    --charcoal: #16191E;       /* 3 · ELEVOVANÉ sekcie — .section--elev, CTA, brand */
    --charcoal-light: #21252D; /* 4 · KARTY — najvyššia elevácia */
    --border: #22222A;
    --border-strong: #2E2E36;
    --text: #F5F5F4;           /* off-white text na tmavom (nie čisté #fff) */
    --text-muted: #8A8A8B;
    --text-faint: #7D7D7F;     /* bolo #555556: 2,57 : 1 na --ink, kánon žiada 4,5 (J-105); teraz 4,6 na --ink, 4,9 na --bg-deep */

    /* Accent */
    --accent: #EC2326;         /* značková červená podľa súboru loga (D-023 §3); bolo #EC2426 */
    --accent-hover: #FF3133;
    --accent-deep: #C8181A;
    --accent-glow: rgba(236, 36, 38, 0.4);

    /* Light interlude palette */
    /* Svetlá plocha — STUDENÁ skoro-biela (bola teplý krém #F5F1EA; teplota nesadala
       k studenej tmavej palete + červenej — kalibrácia session 2026-07-16). */
    --bg-light: #F4F6F9;       /* studená skoro-biela (bolo #F5F1EA krém) */
    --bg-light-elev: #FFFFFF;
    --text-dark: #0A0A0B;
    --text-dark-muted: #5A5A5C;
    --text-dark-faint: #9A9A9C;
    --border-light: #E3E7ED;   /* studený okraj (bolo #E5DFD2 teplý) */
    --border-light-strong: #CDD3DB;
    --mist: #ECEEF1;           /* voliteľný svetlý relief (Farebnosť) */
    --paper: var(--bg-light);  /* svetlý relief = bg-light */

    /* Typography */
    --font-display: 'Sora', system-ui, -apple-system, sans-serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Type scale — jeden zdroj veľkostí (best-practice ladder) */
    --fs-display:   clamp(2.75rem, 7.4vw, 7rem);
    --fs-display-2: clamp(2.5rem, 6vw, 5.5rem);
    --fs-h1:        clamp(2.5rem, 5vw, 4.5rem);
    --fs-h2:        clamp(2rem, 3.5vw, 3rem);
    --fs-h3:        1.5rem;
    --fs-h4:        1.25rem;
    --fs-h5:        1.125rem;
    --fs-h6:        1rem;
    --fs-body-l:    1.2rem;
    --fs-body:      1rem;
    --fs-small:     0.95rem;
    --fs-caption:   0.85rem;
    --fs-mono:      0.72rem;

    /* Layout */
    --container: 1320px;
    --gutter: 32px;
    --header-height: 72px;
    --kicker-gap: 24px;   /* jednotná medzera kicker → nadpis (všetky sekcie) */

    /* ── Foundations: Radius — FAKT VEĽMI JEMNÝ (Erika), žiadne pilulky ── */
    --r-sm: 6px;    /* tlačidlá · inputy · chipy · kickery · tagy · badge */
    --r-md: 8px;    /* karty · quote · tbl · cta-inline · faq · timeline */
    --r-xl: 12px;   /* veľké panely · CTA panel */

    /* ── Foundations: Elevácia ──
       svetlá plocha = mäkký ŠIROKÝ tieň nízke krytie (karta sa vznáša, grounded Stripe);
       tmavá plocha = elevácia svetlom (--edge-top hrana), tieň na tmavom nevidno. */
    --shadow-2: 0 1px 2px rgba(20,25,35,.04), 0 6px 16px -6px rgba(20,25,35,.08), 0 24px 40px -24px rgba(20,25,35,.14);
    --shadow-3: 0 2px 4px rgba(20,25,35,.05), 0 12px 24px -8px rgba(20,25,35,.10), 0 36px 60px -28px rgba(20,25,35,.20);
    --edge-top: rgba(255,255,255,.16);

    /* Animation */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); /* plynulý, pomalší doraz — Webflow feel (J-058) */
}

/* Mobilná čitateľnosť — najmenšie typo tokeny bumpnuté GLOBÁLNE (celý web,
   nie per-stránka): sublabel/mono, small, caption. Väčšie tokeny (h*, body,
   display) sú clamp/rem a na mobile sadnú samy. */
@media (max-width: 600px) {
    :root {
        --fs-small:   1rem;      /* 0.95 → 1rem (16px) */
        --fs-caption: 0.92rem;   /* 0.85 → 0.92rem */
        --fs-mono:    0.82rem;   /* 0.72 → 0.82rem (~13px) */
        /* Hero/display type na mobile výraznejšie (clamp minimá boli desktop-ladené
           = malé). Bump floorov, aby H1 aj veľké čísla mali na mobile ťah. */
        --fs-h1:        clamp(2.9rem, 12vw, 3.6rem);   /* ~47px (bolo 40px floor) */
        --fs-display-2: clamp(3.2rem, 13vw, 3.7rem);   /* stat/display čísla ~51px (bolo 40px) */
    }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

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

a { color: inherit; text-decoration: none; }

button { background: none; border: none; cursor: pointer; color: inherit; }

ul, ol { list-style: none; }

/* ── Container ── */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
}

/* ── Typography helpers — jeden ladder, veľkosti z --fs-* tokenov ── */
.t-display   { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display);   line-height: 0.95; letter-spacing: -0.04em; }
.t-display-2 { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-display-2); line-height: 1;    letter-spacing: -0.03em; }

.t-h1, h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1;    letter-spacing: -0.035em; }
.t-h2, h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.025em; }
.t-h3, h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2;  letter-spacing: -0.01em; }
.t-h4, h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.01em; }
.t-h5, h5 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5); line-height: 1.3; }
.t-h6, h6 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h6); line-height: 1.35; }

.t-body-l  { font-family: var(--font-body); font-size: var(--fs-body-l);  line-height: 1.55; color: var(--text-muted); }
.t-body    { font-family: var(--font-body); font-size: var(--fs-body);    line-height: 1.6; }
.t-small   { font-family: var(--font-body); font-size: var(--fs-small);   line-height: 1.55; }
.t-caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: 1.5; }
.t-mono    { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-mono); }

p { font-family: var(--font-body); }

.accent { color: var(--accent); font-style: normal; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }

/* ── Reveal animation ──
   Grounded na Webflow (Quantara, J-058): reveal je JS-pomalý a plynulý — prvok sa zdvihne
   a zaostrí. Erika: „strašne rýchle" → 1s trvanie + jemný easing + väčší pohyb (24px) + blur. */
.js .reveal,
.js .fade-in {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
    transition: opacity 1s var(--ease-reveal), transform 1s var(--ease-reveal), filter 1s var(--ease-reveal);
    will-change: opacity, transform;
}
.reveal.is-visible,
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Stagger children with delay */
.stagger > * { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.12s; }
.stagger > *:nth-child(3) { transition-delay: 0.24s; }
.stagger > *:nth-child(4) { transition-delay: 0.36s; }
.stagger > *:nth-child(5) { transition-delay: 0.48s; }
.stagger > *:nth-child(6) { transition-delay: 0.60s; }
.stagger > *:nth-child(7) { transition-delay: 0.72s; }
.stagger > *:nth-child(8) { transition-delay: 0.84s; }

/* ── Accessibility ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
    /* Marquee is a utility (showing many client logos), not a decorative animation —
       keep it running but slow it right down so motion-sensitive users are not jarred. */
    .marquee__track {
        animation-duration: 90s !important;
        animation-iteration-count: infinite !important;
    }
}

/* .screen-reader-text je meno, ktoré používa samotný WordPress — napr. nadpis
   „Stránkovanie príspevkov“ z the_posts_pagination(). Bez nej sa ten nadpis
   vykreslí ako obrovský titulok nad stránkovaním (referencie, blog aj archív). */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pri ovládaní klávesnicou musí byť skok na obsah viditeľný. */
.screen-reader-text:focus {
    position: static;
    width: auto; height: auto;
    clip: auto;
    margin: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }