/* Element defaults: typography, links, focus, prose. */

html {
  font-family: var(--font-sans);
  font-size: 100%;
  background: var(--bg);
  color: var(--text);
  accent-color: var(--accent);
}

body {
  font-size: var(--text-0);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex: 1 0 auto;
}

/* ---- Focus: a two-colour ring that stays visible on any background (2.4.7, 2.4.11, 2.4.13) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--focus-halo);
  border-radius: var(--radius-s);
}

/* Firefox falls back to :focus for programmatic focus on non-interactive targets. */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* ---- Headings ------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  max-inline-size: var(--measure);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--text);
}

h1 {
  font-size: var(--text-4);
  font-weight: 800;
  font-stretch: var(--width-wide);
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--text-2);
  font-stretch: 104%;
}

h3 {
  font-size: var(--text-1);
  font-weight: 650;
}

h4 {
  font-size: var(--text-0);
  font-weight: 650;
}

/* ---- Text ------------------------------------------------------------------- */
/* Code blocks (pre) are not in this list: they span the full layout width.
 * Lists are not in it either; they are capped separately below. */
p,
dl,
blockquote,
figure,
table,
address {
  max-inline-size: var(--measure);
}

/* Lists get the measure only where they are content: inside the prose wrapper
 * that every Markdown page has. A list anywhere else (a menu, the language
 * switcher, a card grid, a link index, a tab strip) is part of the interface
 * and spans its row. Nothing here looks at role="list": that attribute keeps
 * list semantics for lists styled without markers (see reset.css) and has no
 * layout meaning. */
.prose :is(ul, ol) {
  max-inline-size: var(--measure);
}

address {
  font-style: normal;
}

small,
.text-small {
  font-size: var(--text--1);
}

strong,
b {
  font-weight: 650;
}

em,
i {
  font-style: italic;
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
  cursor: help;
}

mark {
  background: var(--amber);
  color: oklch(20% 0.02 85);
  padding-inline: 0.15em;
  border-radius: 0.2em;
}

hr {
  border: 0;
  border-block-start: 2px solid var(--border);
  inline-size: min(100%, 8rem);
  margin-inline: 0;
}

/* ---- Links ------------------------------------------------------------------- */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklch, currentColor 55%, transparent);
  transition: text-decoration-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.14em;
}

/* External links: a visible mark whose alternative text (the part after the
 * slash) is what assistive technology gets instead of the arrow. The text is
 * chosen by the language of the link's context, so a link inside an English
 * passage on a Slovak page is announced in English. The leading space keeps
 * the label from running into the link text. Baseline 2024 (Firefox 128). */
a[rel~="external"]::after {
  content: "\2197" / " external link";
  display: inline-block;
  font-size: 0.7em;
  margin-inline-start: 0.2em;
  vertical-align: 0.2em;
  transition: translate var(--duration-fast) var(--ease-out);
}

a[rel~="external"]:lang(sk)::after {
  content: "\2197" / " externý odkaz";
}

a[rel~="external"]:lang(cs)::after {
  content: "\2197" / " externí odkaz";
}

a[rel~="external"]:hover::after {
  translate: 0.1em -0.1em;
}

/* ---- Lists ---------------------------------------------------------------------- */
ul:not([role="list"]),
ol:not([role="list"]) {
  padding-inline-start: 1.4em;
}

/* Breathing room between items in content lists only. UI lists carry
 * role="list" and lay themselves out with flex or grid gaps. */
:where(ul:not([role="list"]), ol:not([role="list"])) > li + li {
  margin-block-start: 0.35em;
}

li::marker {
  color: var(--accent);
  font-weight: 650;
}

dt {
  font-weight: 650;
}

dd {
  margin-inline-start: 1.4em;
}

/* ---- Quotes, code, tables ---------------------------------------------------------- */
blockquote {
  padding-inline-start: var(--space-s);
  border-inline-start: 4px solid var(--accent);
  color: var(--text-muted);
  font-size: var(--text-1);
  font-weight: 300;
  line-height: var(--leading-snug);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

:not(pre) > code {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 0.1em 0.35em;
}

pre {
  background: var(--bg-inverse);
  color: var(--text-inverse);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  overflow-x: auto;
  line-height: 1.5;
  tab-size: 2;
}

pre code {
  font-size: var(--text--1);
}

kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: 1px solid var(--border-strong);
  border-block-end-width: 3px;
  border-radius: var(--radius-s);
  background: var(--bg-raised);
  font-size: 0.85em;
  line-height: 1.4;
}

table {
  border-collapse: collapse;
  inline-size: 100%;
  font-size: var(--text--1);
  line-height: 1.4;
}

.table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
}

.table-wrap > table {
  max-inline-size: none;
}

caption {
  text-align: start;
  font-weight: 650;
  padding-block: var(--space-2xs);
}

th,
td {
  padding: var(--space-2xs) var(--space-xs);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border);
}

th {
  font-weight: 650;
  background: var(--bg-sunken);
}

/* ---- Media ------------------------------------------------------------------------- */
img,
picture,
video {
  border-radius: var(--radius-m);
}

figure {
  margin-block: var(--space-m);
}

figcaption {
  font-size: var(--text--1);
  color: var(--text-muted);
  margin-block-start: var(--space-2xs);
}

/* ---- Details ----------------------------------------------------------------------- */
details {
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding-inline: var(--space-s);
}

summary {
  cursor: pointer;
  padding-block: var(--space-xs);
  font-weight: 650;
  min-block-size: var(--target-comfortable);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

summary::marker,
summary::-webkit-details-marker {
  color: var(--accent);
}

details[open] > summary {
  border-block-end: 1px solid var(--border);
}

details > :not(summary) {
  margin-block: var(--space-xs);
}

/* ---- Form controls -------------------------------------------------------------------- */
label {
  display: inline-block;
  font-weight: 650;
}

input:not([type="checkbox"], [type="radio"], [type="range"]),
textarea,
select {
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: var(--target-comfortable);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--bg-raised);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-s);
}

input:not([type="checkbox"], [type="radio"], [type="range"]):hover,
textarea:hover,
select:hover {
  border-color: var(--text);
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

input[type="checkbox"],
input[type="radio"] {
  inline-size: 1.4em;
  block-size: 1.4em;
  margin-inline-end: 0.5em;
  vertical-align: -0.25em;
}

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: var(--space-s) var(--space-m);
}

legend {
  font-weight: 700;
  padding-inline: var(--space-2xs);
}

button {
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
}

/* ---- Prose: long-form content from Markdown --------------------------------------------- */
.prose {
  --flow-space: var(--space-s);
}

.prose > :is(h2, h3, h4) {
  --flow-space: var(--space-l);
}

/* The easy-to-read version of a page (written to the European standards for
 * easy-to-read): larger type with more leading, a shorter measure, more room
 * between paragraphs and list items. The content breaks its own lines, one
 * sentence per line. */
.prose--easy {
  --measure: 34rem;
  --flow-space: var(--space-m);
  font-size: calc(var(--text-0) * 1.1);
  line-height: 1.7;
}

.prose--easy li + li {
  margin-block-start: var(--space-2xs);
}

/* An accordion of sections in the prose gets the same room as a section heading
 * (unless it directly follows one: the rule below then applies). */
.prose > ad-accordion {
  --flow-space: var(--space-l);
}

.prose > :is(h2, h3, h4) + * {
  --flow-space: var(--space-xs);
}

.prose > :is(h2, h3, h4) {
  scroll-margin-block-start: var(--space-l);
}

.prose img {
  box-shadow: var(--shadow-md);
}

.prose a:not([class]) {
  font-weight: 550;
}

.lede {
  font-size: var(--text-1);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  font-weight: 350;
  max-inline-size: var(--measure);
}

.eyebrow {
  font-size: var(--text--1);
  font-weight: 650;
  font-stretch: var(--width-condensed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

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

.eyebrow a:hover {
  text-decoration: underline;
}