/* Site layer on top of the Streamea design system: only what the system lacks. Tokens only. */

html { scroll-padding-top: var(--header-height); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); }
main:focus { outline: none; }

/* Skip link, visible on keyboard focus */
.site-skip {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-24)); z-index: 20;
  padding: var(--space-2) var(--space-4); background: var(--ink-surface); color: var(--on-ink);
  font-family: var(--font-display); font-weight: 500; font-size: 15px; text-decoration: none;
}
.site-skip:focus { top: var(--space-2); outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Forced colours repaint the header and footer but not the logo images: keep their plates */
@media (forced-colors: active) {
  .st-header-logo img { forced-color-adjust: none; background: var(--paper); }
  .st-footer-brand img { forced-color-adjust: none; background: var(--ink-surface); }
}

/* Language switch (SK / EN) in the header, on phones too: each link opens the same page in
   the other language. The current one is in ink and underlined, so it is not told by colour alone. */
.site-lang { display: flex; align-items: center; gap: var(--space-1); }
.site-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; color: var(--ink-muted); text-decoration: none; }
.site-lang a:hover { color: var(--ink); }
.site-lang a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-lang a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 767px) { .st-header-locale.site-lang { display: flex; } }

/* Titles that reveal from Glagolitic stay hidden until the reveal takes over, so they never
   flash Latin first. The animation shows them anyway after 3 s if the script never runs. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal]:not(.st-reveal) { visibility: hidden; animation: site-show 0s 3s forwards; }
}
@keyframes site-show { to { visibility: visible; } }

/* Sections below the first screen wait out of sight and rise into view when reached
   (site.js adds .site-lazy, then .is-in). Without JavaScript nothing is hidden. */
.site-lazy { opacity: 0; transform: translateY(var(--space-12)); transition: opacity .9s var(--st-ease), transform .9s var(--st-ease); }
.site-lazy.is-in { opacity: 1; transform: none; }

/* Hero: on phones the headline spans the full width, so the rain sits above it instead of beside it */
@media (min-width: 768px) and (max-width: 1279px) {
  .st-rain-mask-hero {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 500px, #000 620px);
    mask-image: linear-gradient(90deg, transparent 0, transparent 500px, #000 620px);
  }
}
@media (max-width: 767px) {
  .st-hero-in { padding-top: var(--space-32); }
  .st-hero-title { font-size: min(56px, 16vw); overflow-wrap: break-word; }
  .st-footer-col a { overflow-wrap: anywhere; }
  .st-rain-mask-hero {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent var(--space-32));
    mask-image: linear-gradient(180deg, #000 0%, transparent var(--space-32));
  }
}

/* CTA band: the waiting list is an email, so the right column holds a button and two hint lines */
.st-cta-form { align-items: flex-start; }
.site-hint { margin: 0; max-width: 40ch; }
.site-hint a { color: var(--on-ink); text-underline-offset: 3px; }
.site-hint a:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }

/* Footer: the provider details required on Slovak business websites */
@media (min-width: 768px) { .st-footer-legal { align-items: flex-end; } }

/* Footer word: 17vw keeps growing past the 1440px container and runs off the right edge on
   wide screens. Cap it at the size that fills the container (word width is ~5.3 x font size). */
.st-footer-word { font-size: min(17vw, 258px); }
.site-imprint { margin: 0; line-height: 20px; }

/* Legal and 404 pages: one column of text at reading measure */
.site-page { max-width: var(--container-max); margin: 0 auto; padding: var(--space-24) var(--space-8) var(--space-32); box-sizing: border-box; }
.site-page-head { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-12); }
.site-page-title { margin: 0; max-width: 14em; }
.site-page-meta { margin: 0; color: var(--ink-muted); }
.site-page-body { border-top: var(--hairline) solid var(--ink); padding-top: var(--space-8); }
.site-page-body > :first-child { margin-top: 0; }
.site-page-body h2 { margin: var(--space-16) 0 var(--space-4); font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; }
.site-page-body h3 { margin: var(--space-8) 0 var(--space-2); font-family: var(--font-display); font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.site-page-body p, .site-page-body li { max-width: var(--measure); color: var(--ink-2); font-size: 16px; line-height: 24px; }
.site-page-body p { margin: 0 0 var(--space-4); }
.site-page-body ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.site-page-body li { margin: var(--space-1) 0; }
.site-page-body a:not(.st-link) { color: var(--ink); text-underline-offset: 3px; }
.site-page-body a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 900px) {
  .site-page { padding: var(--space-16) var(--space-4) var(--space-24); }
  .site-page-title { font-size: 40px; }
}
.site-page-body .muted { color: var(--ink-muted); }