/**
 * Maironis — Base (reset, elements, typographic scale)
 * Author: Tobalt — https://tobalt.lt (built for MLLM)
 * Loads after tokens.css. All values reference custom properties.
 */

/* ─── Self-hosted fonts (Myriad Pro, licensed — client-supplied) ──────────
 * WOFF2 converted from the supplied OTF pack. No external font CDN
 * (gov privacy + offline). Courier not in the pack → token stack falls
 * back to system Courier New; bundle Courier Prime later if desired.
 * NB: pack ships Condensed (400) and Bold Condensed (700) but no true
 * SemiBold Condensed — the 600 heading weight maps to Bold Condensed.
 */
@font-face {
  font-family: "Myriad Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/myriadpro-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Myriad Pro"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/myriadpro-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Myriad Pro"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/myriadpro-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Myriad Pro Condensed"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/myriadpro-cond.woff2") format("woff2");
}
/* 600–700 range so the H2/H3 semibold request lands on Bold Condensed. */
@font-face {
  font-family: "Myriad Pro Condensed"; font-weight: 600 700; font-style: normal; font-display: swap;
  src: url("../fonts/myriadpro-boldcond.woff2") format("woff2");
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
/* Author display rules otherwise beat the UA [hidden] rule — enforce it. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ─── Document ─── */
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Headings (base mapping — semantic tags inherit the scale) ─── */
h1 {
  font-family: var(--font-accent);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  color: var(--color-text);
}
h2 {
  font-family: var(--font-condensed);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--color-text);
}
h3 {
  font-family: var(--font-condensed);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

p { max-width: 70ch; }

a { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--mllm-accent); }

/* ─── Named text-style utilities (mirror the Figma text styles 1:1) ───── */
.t-h1-accent      { font-family: var(--font-accent);    font-weight: var(--fw-bold);     font-size: var(--fs-h1-accent);       line-height: var(--lh-heading); }
.t-h1             { font-family: var(--font-accent);    font-weight: var(--fw-regular);  font-size: var(--fs-h1);              line-height: var(--lh-heading); }
.t-h2             { font-family: var(--font-condensed); font-weight: var(--fw-semibold); font-size: var(--fs-h2);              line-height: var(--lh-heading); }
.t-h3             { font-family: var(--font-condensed); font-weight: var(--fw-semibold); font-size: var(--fs-h3);              line-height: var(--lh-heading); }
.t-body-big       { font-family: var(--font-body);      font-weight: var(--fw-regular);  font-size: var(--fs-body-big);        line-height: var(--lh-body); }
.t-body-big-accent{ font-family: var(--font-accent);    font-weight: var(--fw-bold);     font-size: var(--fs-body-big-accent); line-height: var(--lh-body); }
.t-body           { font-family: var(--font-body);      font-weight: var(--fw-regular);  font-size: var(--fs-body);            line-height: var(--lh-body); }
.t-body-bold      { font-family: var(--font-body);      font-weight: var(--fw-bold);     font-size: var(--fs-body);            line-height: var(--lh-body); }
.t-body-accent    { font-family: var(--font-accent);    font-weight: var(--fw-regular);  font-size: var(--fs-body);            line-height: var(--lh-body); }
.t-small          { font-family: var(--font-body);      font-weight: var(--fw-regular);  font-size: var(--fs-small);           line-height: var(--lh-body); }
.t-small-accent   { font-family: var(--font-condensed); font-weight: var(--fw-semibold); font-size: var(--fs-small-accent);    line-height: var(--lh-body); }
.t-menu           { font-family: var(--font-accent);    font-weight: var(--fw-bold);     font-size: var(--fs-body);            line-height: var(--lh-tight); }

/* The Myriad Pro Condensed pack ships only a Bold Condensed cut for weight >=600,
   so condensed headings render tight and letters run together ("liejasi raidės",
   Eglė ruttl). A hair of tracking separates them with no visible design shift. */
h2, h3, .t-h2, .t-h3, .t-small-accent { letter-spacing: 0.02em; }

/* ─── Accessibility helpers ─── */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.skip-link {
  position: absolute; left: var(--space-2); top: -100px;
  background: var(--c-juoda-900); color: var(--c-juoda-100);
  padding: var(--space-3) var(--space-5); z-index: 1000;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ─── Layout primitives ─── */
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-max); }

/* Block canvas: MLLM section blocks span full width and self-contain; any
   stray/raw content gets a readable measure so plain pages still read well. */
.mllm-flow { width: 100%; }
.mllm-flow > :where(p, h1, h2, h3, h4, ul, ol, blockquote, figure:not([class])) {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Vertical rhythm between stacked section blocks. */
.mllm-flow > section { margin-block: 0; }
.mllm-flow > .mllm-tekstas-foto { padding-block: var(--space-10); }