/* ==========================================================================
   Slovenská Skyrunningová Asociácia — site.css
   Hand-rolled. No framework. Everything the site needs lives in this file.

   How to work with this file
   -------------------------
   1. TOKENS      — every colour, size and space value is declared once, here.
                    Never hard-code a value in a page; use a token.
   2. ELEMENTS    — bare HTML gets styled directly, so page markup stays clean.
   3. RHYTHM      — vertical spacing is owned by .prose, not by the markup.
                    Paragraphs and headings never carry spacing classes.
   4. COMPONENTS  — a small set of repeatable blocks (.btn, .table, .box …).
   5. UTILITIES   — a deliberately short list. If you reach for a new one,
                    check a component doesn't already cover it.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* --- Brand colour. Unchanged from the previous site. --- */
	--ink: #000;
	--paper: #fff;
	--muted: #666;
	--accent: #ff5049;
	/* orange */
	--violet: #4a41ff;
	/* Bootstrap's default link blue — the old site never overrode it, so
	   every un-classed <a> in its body copy (prose links, the Muži/Ženy
	   quick links, download links) rendered this exact colour. */
	--link: #0d6efd;
	--link-hover: #0a58ca;
	/* Form validation red — the old site's own colour for this (#ff0e00 on
	   the invalid border), distinct from --accent. Bootstrap's stock danger
	   red (#dc3545) never got used here; keep both spots the old site drew
	   an invalid field in agreeing on the same, punchier red. */
	--error: #ff0e00;

	/* --- Derived greys. Only these four. --- */
	--line: rgba(0, 0, 0, .14);
	/* hairlines, table rows   */
	--line-soft: rgba(0, 0, 0, .08);
	/* section separators      */
	--line-invert: rgba(255, 255, 255, .18);
	/* hairlines on black      */
	--fill-soft: #f4f4f4;
	/* input / subtle surface  */
	--rule: #ddd;
	/* inline separators: 6,4 km | 950 m | VERTICAL */

	/* --- Type --- */
	--font: "GT America", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

	/* Sizes match the previous Bootstrap site one-for-one.
	   Read the old markup before changing any of these: its 81 `.fs-5` uses are
	   almost all on <h2> section headings (72 of them), NOT on body copy — only
	   one <p> carried it. Body copy was Bootstrap's untouched 1rem default, and
	   every page title was <h1 class="fs-2"> = 32px. That is the scale below. */
	--text-xs: .8125rem;
	/* 13px — badges                                     */
	--text-sm: .875rem;
	/* 14px — notes, tables, nav, footer     (old .small) */
	--text-base: 1rem;
	/* 16px — body            (old Bootstrap body default) */
	--text-md: 1.125rem;
	/* 18px — lead paragraph, h3                          */
	--text-lg: 1.25rem;
	/* 20px — h2, hero list                    (old fs-5) */
	--text-xl: clamp(1.625rem, 1.25rem + 1.1vw, 2rem);
	/* 26→32px — page title h1                 (old fs-2) */
	--text-hero: clamp(2rem, 1.4rem + 1.9vw, 2.5rem);
	/* 32→40px — homepage hero title only      (old fs-1) */

	/* Old site set line-height: 1.45 !important on body. */
	--leading-body: 1.45;
	--leading-tight: 1.3;
	--leading-head: 1.15;

	/* GT America is tuned tight at display sizes and loose at text sizes. */
	--track-head: -.03em;
	--track-body: -.01em;
	--track-flat: 0;

	/* --- Space. One scale, 4px base. Structural gaps are in rem so the
	       rhythm stays identical no matter what font size sits next to them. --- */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 2.75rem;
	--sp-8: 4rem;

	/* --- Vertical rhythm. Used only by .prose (see §3). --- */
	--flow-tight: .4rem;
	/* lead-in paragraph → its list      */
	--flow: 1rem;
	/* paragraph → paragraph             */
	--flow-head: .55rem;
	/* heading → first thing under it    */
	--flow-h3: 1.9rem;
	/* space above a sub-heading         */
	--flow-h2: 2.5rem;
	/* space above a section heading     */
	--flow-block: 1.9rem;
	/* space around figures, tables, boxes */

	/* --- Layout. Two widths, and only two. ---

	   --shell   the page frame: masthead, nav, footer, and the two pages whose
	             content is itself a wide, multi-column block rather than
	             running text (the homepage hero + partners, the Kontakt
	             info/form split). 1140px = the old Bootstrap .container at xl,
	             so the site occupies the same envelope it always did.
	   --measure the reading column for running text and — deliberately — for
	             data tables too. Widening a table out to the shell was tried
	             and reverted: every other narrow-column page then had a
	             wide-column table sitting under it, which read as broken
	             alignment, not as a feature. A table that doesn't fit scrolls
	             inside .table-scroll instead.
	             --measure itself is narrower than the shell on purpose.
	             Measured, not guessed: at 16px GT America this renders 76
	             characters a line, against the 45–75 that reading research
	             puts as comfortable. Widening it to fill the shell is the
	             mistake it looks like a fix for — long lines lose the eye on
	             the return sweep. If you change the body size, re-measure and
	             move this with it. */
	--shell: 71.25rem;
	--measure: 40rem;
	--pad-x: 1rem;
	--pad-y: clamp(2rem, 5vw, 3rem);

	--radius: 3px;
	--border-strong: 2px;

	color-scheme: light;
}

/* ==========================================================================
   2. ELEMENTS
   ========================================================================== */

@font-face {
	font-family: "GT America";
	src: url("/fonts/GT-America-Standard-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "GT America";
	src: url("/fonts/GT-America-Standard-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

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

/* Margins are handed out by .prose and by components — never by the browser. */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd,
address,
table,
fieldset,
legend {
	margin: 0;
	padding: 0;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: var(--leading-body);
	letter-spacing: var(--track-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: normal;
	/* GT America stylistic sets: ss01 single-storey %, ss02/ss03 alternates,
	   zero = slashed zero. Same set the previous site used. */
	font-feature-settings: "kern" 1, "zero" 1, "ss01" 1, "ss02" 1, "ss03" 1;
}

h1,
h2,
h3,
h4 {
	font-weight: 700;
	line-height: var(--leading-head);
	text-wrap: balance;
}

h1 {
	font-size: var(--text-xl);
	letter-spacing: var(--track-head);
}

h2 {
	font-size: var(--text-lg);
	letter-spacing: -.02em;
	line-height: var(--leading-tight);
}

h3 {
	font-size: var(--text-md);
	letter-spacing: var(--track-body);
}

h4 {
	font-size: var(--text-base);
	letter-spacing: var(--track-body);
}

p {
	text-wrap: pretty;
}

/* Small text loses the tracking — it is drawn tight enough already. */
small,
.small,
figcaption,
.note,
.meta,
.badge,
table {
	letter-spacing: var(--track-flat);
}

/* Blue is the link signal on its own — no underline needed on top of it. */
a {
	color: var(--link);
	text-decoration: none;
	transition: color .12s ease-out;
}

a:hover {
	color: var(--link-hover);
}

strong,
b {
	font-weight: 700;
}

ul,
ol {
	padding-left: 1.15em;
}

li+li {
	margin-top: var(--sp-1);
}

/* A nested list is part of its parent item, so it sits closer. */
li>ul,
li>ol {
	margin-top: var(--sp-1);
}

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

/* Images carry no width/height attributes, so they size from their own file.
   Declared here rather than left implicit so a component rule that sets one
   axis (.logo img, .partners-row img) reads as a deliberate exception.
   Deliberately no max-width: that stays on the img element rule, which loses
   to utilities like .half. */
.img-auto {
	width: auto;
	height: auto;
}

figure img {
	border-radius: var(--radius);
}

figcaption {
	font-size: var(--text-sm);
	line-height: var(--leading-tight);
	color: var(--muted);
	margin-top: var(--sp-2);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--line);
}

address {
	font-style: normal;
	line-height: var(--leading-tight);
}

hr {
	height: 0;
	border: 0;
	border-top: 1px solid var(--line-soft);
}

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

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

/* ==========================================================================
   3. LAYOUT — two centred columns: a wide frame, a narrow reading column
   ========================================================================== */

/* Two primitives, sharing one padding so their edges agree at small sizes.

   .col-wide  the frame — masthead, nav, footer, homepage hero and partners.
   .col       running text. Narrow on purpose; see --measure.

   Both centre, so a page reads as a narrow text column hung inside a wide
   masthead. Below ~1140px they converge and the distinction disappears. */
.col,
.col-wide {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--pad-x);
}

.col {
	max-width: calc(var(--measure) + var(--pad-x) * 2);
}

.col-wide {
	max-width: calc(var(--shell) + var(--pad-x) * 2);
}

/* The page body block. Same top and bottom breathing room everywhere. */
.main {
	display: block;
	padding-block: var(--pad-y);
}

/* Separates major blocks inside a page (article from article, section from
   partners strip). Replaces the old <hr> soup. */
.divide {
	border-top: 1px solid var(--line-soft);
	margin-top: var(--sp-7);
	padding-top: var(--sp-7);
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--paper);
	padding: var(--sp-2) var(--sp-4);
	text-decoration: none;
	z-index: 10;
}

.skip:focus {
	left: var(--sp-2);
	top: var(--sp-2);
}

/* --- Masthead ------------------------------------------------------------ */

/* The border sits on the constrained inner column, not the full-width
   <header> — the old site's border-bottom was inside a Bootstrap .container,
   never edge-to-edge, and a viewport-wide rule reads as a different, heavier
   design than the rest of the page. Same reasoning on .nav and .footer below. */
.masthead-inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	padding-block: var(--sp-4);
	border-bottom: 1px solid var(--line);
}

.masthead a {
	display: block;
	text-decoration: none;
}

/* The old site sized these in vh — 6vh desktop / 10vh mobile for the mark,
   4vh / 7vh for Dynafit. These rem values land on the same rendered height at
   a normal viewport but do not reflow when mobile browser chrome slides away,
   and cause no layout shift on load. Keep the 0.67 Dynafit:mark ratio. */
.logo img {
	height: 3rem;
	width: auto;
}

.logo-partner {
	padding-left: var(--sp-5);
	border-left: 1px solid var(--ink);
}

.logo-partner img {
	height: 2.1rem;
	width: auto;
}

@media (min-width: 40em) {
	.logo img {
		height: 3.5rem;
	}

	.logo-partner img {
		height: 2.35rem;
	}
}

/* --- Main navigation ---------------------------------------------------- */

.nav-inner {
	display: flex;
	gap: var(--sp-6);
	overflow-x: auto;
	/* Not decoration — load-bearing. overflow-x: auto with overflow-y left at
	   visible makes the used value of overflow-y compute to auto, not visible
	   (CSS Overflow 3 §3): the row becomes scrollable on BOTH axes. The links'
	   line box overshoots this element by 1px, so that vertical axis is really
	   scrollable, and dragging the row sideways drags it a pixel upward too —
	   the row visibly nudges. The old site never hit this because its markup
	   split the job in two: an outer .nav-scroller with a fixed height and
	   overflow-y: hidden, wrapping an inner row that only scrolled sideways.
	   One declaration does the same job here.

	   This is also why the fix is NOT touch-action: pan-x. That would pin the
	   gesture to one axis, but it also stops a finger landing on this strip
	   from scrolling the page — the same failure that froze /bodovanie. The
	   old site carried no touch-action at all and behaved correctly. */
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Reaching this row's end never chains out to the browser's back gesture. */
	overscroll-behavior-x: contain;
	border-bottom: 1px solid var(--line);
}

/* The old nav spread its links edge-to-edge with justify-content-between, so
   the row's own content reached exactly as far as its border-bottom. Packed
   flex-start, seven short links stop well short of the 1140px shell and leave
   the hairline trailing on into empty space — this restores that edge-to-edge
   read at the widths where it fits, gap becoming a floor rather than the only
   spacing once the browser distributes the remainder. Left packed below that,
   where the row already scrolls sideways on its own content. */
@media (min-width: 64em) {
	.nav-inner {
		justify-content: space-between;
	}
}

.nav-inner::-webkit-scrollbar {
	display: none;
}

/* The old nav carried no Bootstrap fs-* class, so its links rendered at the
   plain body size (16px). --text-sm (14px) read as a shrunk, secondary nav
   next to that.

   Every old nav link — active or not — carried the same "link-body-emphasis"
   class with no opacity utility alongside it, which resolves to plain #000
   at full opacity. There was no dimmed, inactive state: the only thing that
   ever marked the current page was font-weight: 700 plus the underline. A
   muted colour on the other items here was a deviation, not a design choice. */
.nav a {
	flex: none;
	padding-block: var(--sp-3);
	font-size: var(--text-base);
	white-space: nowrap;
	text-decoration: none;
	color: var(--ink);
	border-bottom: var(--border-strong) solid transparent;
	margin-bottom: -1px;
}

/* Old Bootstrap nav-underline behaviour: hover/focus doesn't change colour
   (every link is already #000) — it reveals the same border-bottom the
   active page keeps permanently, in currentcolor. */
.nav a:hover,
.nav a:focus-visible {
	border-bottom-color: var(--ink);
}

.nav a[aria-current="page"] {
	color: var(--ink);
	font-weight: 700;
	border-bottom-color: var(--ink);
}

/* --- Page title -------------------------------------------------------- */

.page-head {
	padding-bottom: var(--sp-3);
	border-bottom: var(--border-strong) solid var(--ink);
}

.page-head .badge {
	margin-bottom: var(--sp-2);
}

/* Whatever follows the title — jump links or the text block — clears it by
   the same amount on every page. */
.page-head+*,
.jump+* {
	margin-top: var(--sp-6);
}

/* --- Jump links (replaces the old desktop sidebar) ---------------------- */

/* Horizontal band of in-page anchors under the title. Scrolls sideways on
   small screens, exactly like the main nav, so the page reads as one system. */
.jump {
	display: flex;
	gap: var(--sp-5);
	margin-top: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	/* Same both-axes trap as .nav-inner — see the note there. */
	overflow-y: hidden;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.jump::-webkit-scrollbar {
	display: none;
}

/* Old markup: <span class="orange-text">&rightarrow;</span><a href="#muzi">…
   with the link left un-classed — plain Bootstrap link blue, same as every
   other un-styled <a> on the old site. */
.jump a {
	flex: none;
	font-size: var(--text-sm);
	white-space: nowrap;
	text-decoration: none;
	color: var(--link);
}

.jump a:hover {
	color: var(--link-hover);
}

/* The arrow is GT America's own glyph — no icon font, no SVG. */
.jump a::before {
	content: "\2192";
	color: var(--accent);
	margin-right: .45em;
}

/* ==========================================================================
   4. RHYTHM — .prose owns all vertical spacing inside a text block
   ==========================================================================
   Markup carries no spacing classes. The rules below give every page the same
   cadence: paragraphs one step apart, sub-headings further, section headings
   further still, and anything that reads as a caption or list pulled tight to
   the line it belongs to.
   ========================================================================== */

.prose>*+* {
	margin-top: var(--flow);
}

/* Headings open a new movement. */
.prose>h2+*,
.prose>h3+*,
.prose>h4+* {
	margin-top: var(--flow-head);
}

.prose>*+h2 {
	margin-top: var(--flow-h2);
}

.prose>*+h3,
.prose>*+h4 {
	margin-top: var(--flow-h3);
}

/* A list, or a small print note, belongs to the paragraph above it. */
.prose>p+ul,
.prose>p+ol,
.prose>p+.note,
.prose>ul+.note,
.prose>table+.note,
.prose>.table-scroll+.note {
	margin-top: var(--flow-tight);
}

/* Metadata sits directly under its heading. */
.prose>h2+.meta,
.prose>h3+.meta,
.prose>.badge+h2 {
	margin-top: var(--sp-1);
}

.prose>.meta+* {
	margin-top: var(--flow);
}

/* A label line above a heading ("English version") belongs to that heading. */
.prose>.meta+h2,
.prose>.meta+h3 {
	margin-top: var(--sp-1);
}

/* Figures, tables, boxes and forms need air on both sides. */
.prose>*+figure,
.prose>*+.box,
.prose>*+.table-scroll,
.prose>*+table,
.prose>*+.form {
	margin-top: var(--flow-block);
}

.prose>figure+*,
.prose>.box+*,
.prose>.table-scroll+*,
.prose>table+*,
.prose>.form+* {
	margin-top: var(--flow-block);
}

/* …but a note explaining a table stays with the table (rule above wins by
   source order, so restate it here). */
.prose>.table-scroll+.note,
.prose>table+.note {
	margin-top: var(--sp-3);
}

.prose>:first-child {
	margin-top: 0;
}

/* Opt-in hairline above a major heading, for long pages that need the reader
   to feel where one part ends and the next begins. */
.prose>.rule-above {
	border-top: 1px solid var(--line-soft);
	padding-top: var(--flow-h2);
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Text roles -------------------------------------------------------- */

.lead {
	font-size: var(--text-md);
	line-height: 1.4;
	letter-spacing: var(--track-body);
}

/* Date lines, "aktualizované: …", label lines above a heading. */
.meta {
	display: block;
	font-size: var(--text-sm);
	line-height: var(--leading-tight);
	color: var(--muted);
}

/* Small print: Poznámka blocks, disclaimers, discipline definitions. */
.note {
	font-size: var(--text-sm);
	line-height: var(--leading-tight);
}

.note-muted {
	color: var(--muted);
}

.muted {
	color: var(--muted);
}

/* Arrow affordances. Both glyphs come from GT America — same codepoints
   (U+2192, U+2193) as the old site's &rightarrow;/&darr; entities, in the same
   font, so the shape itself is identical. Weight is fixed at regular, always
   — verified against the rendered old site, not just its markup: even the
   homepage's bold CTA button explicitly wrapped its arrow in <span
   class="fw-normal"> to force it thin, and buttons with no bold class at all
   (2% z dane) render the same thin arrow by default. The arrow reads as an
   affordance, never as text to shout, no exceptions for .btn. margin-left,
   not a leading thin space, so the gap after the text is a real, adjustable
   value. */
.arrow::after {
	content: "\2192";
	font-weight: 400;
	margin-left: .4em;
}

.arrow-down::after {
	content: "\2193";
	font-weight: 400;
	margin-left: .4em;
}

/* --- Badge ------------------------------------------------------------- */

.badge {
	display: inline-block;
	background: var(--accent);
	color: var(--paper);
	font-size: var(--text-xs);
	font-weight: 700;
	line-height: 1;
	padding: .35em .6em;
	border-radius: 999px;
	vertical-align: .1em;
}

.badge-new {
	background: var(--violet);
}

/* --- Button ------------------------------------------------------------ */

.btn {
	display: inline-block;
	background: var(--ink);
	color: var(--paper);
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.2;
	padding: .7em 1.1em;
	border: 0;
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: var(--track-body);
}

/* a:hover (blue) beats .btn's own color here on specificity alone — a:hover
   is a type selector plus a pseudo-class, one column ahead of .btn's single
   class. Restate white explicitly, and darken the same way the old #222
   background did: a touch of opacity, not a hue change. */
.btn:hover {
	color: var(--paper);
	opacity: .85;
}

.btn:disabled {
	background: var(--muted);
	cursor: not-allowed;
}

.btn-sm {
	font-size: var(--text-sm);
	padding: .6em 1em;
}

/* --- Box: bordered callout (Naše údaje, Aktualizácia …) ---------------- */

.box {
	border: 3px solid var(--ink);
	border-radius: var(--radius);
	padding: var(--sp-5);
}

.box>*+* {
	margin-top: var(--sp-2);
}

/* A callout heading is a section heading semantically, but it shouldn't shout
   inside a bordered block — so it is sized down to sub-heading scale. */
.box h2 {
	font-size: var(--text-md);
	letter-spacing: var(--track-body);
}

/* --- Tables ------------------------------------------------------------ */

/* Wrapper: lets a wide table scroll without the page scrolling sideways.

   No touch-action lock, and this is the one place it really mattered: on
   /bodovanie the ranking tables are taller than a phone screen, so pan-x here
   meant almost anywhere the visitor put a finger, the page would not scroll
   vertically — it read as the page having frozen. See .nav-inner. */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

/* Old tables carried no Bootstrap fs-* class, so they rendered at the plain
   body size (16px) — only the specs/meta lines inside a row were sized down
   via .small. --text-sm here made every ranking and every schedule row read
   smaller than the backup's did. */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-base);
	line-height: var(--leading-tight);
	/* tnum keeps result columns in vertical register; GT America handles the
	   whole table now — no second, narrower typeface anywhere on the site.
	   ss01/ss02/ss03 must be restated here, not just inherited from body:
	   font-feature-settings does not merge between cascaded declarations, so
	   without them the arrow glyph in .table-schedule .event.arrow::after
	   falls back to the plain Unicode arrow — a longer, thinner shape than
	   GT America's own SS03 alternate. */
	font-variant-numeric: tabular-nums slashed-zero;
	font-feature-settings: "kern" 1, "zero" 1, "ss01" 1, "ss02" 1, "ss03" 1, "tnum" 1;
}

th,
td {
	padding: .6rem var(--sp-3);
	text-align: left;
	vertical-align: top;
}

th:first-child,
td:first-child {
	padding-left: 0;
}

th:last-child,
td:last-child {
	padding-right: 0;
}

thead th {
	font-weight: 700;
	white-space: nowrap;
}

tbody tr+tr>* {
	border-top: 1px solid var(--line);
}

/* Results tables: black header band. */
.table-ranking thead th {
	background: var(--ink);
	color: var(--paper);
}

.table-ranking thead th:first-child {
	padding-left: var(--sp-3);
}

.table-ranking thead th:last-child {
	padding-right: var(--sp-3);
}

.table-ranking tbody td:first-child {
	padding-left: var(--sp-3);
	color: var(--muted);
}

.table-ranking tbody td:last-child {
	padding-right: var(--sp-3);
}

/* TOP 3 tables: solid black. */
.table-podium {
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--radius);
	overflow: hidden;
}

.table-podium th,
.table-podium td {
	padding-inline: var(--sp-3);
}

.table-podium thead th {
	border-bottom: 1px solid var(--line-invert);
}

.table-podium tbody tr+tr>* {
	border-top: 1px solid var(--line-invert);
}

.table-podium tbody td:first-child {
	color: rgba(255, 255, 255, .55);
}

/* Numeric column, right-aligned. */
.num {
	text-align: right;
}

/* Fixed-width rank column keeps names starting on the same x-position. */
.rank {
	width: 2.5rem;
}

/* Schedule table (Termínovka): narrow date column, event block on the right. */
.table-schedule th[scope="row"] {
	width: 6.5rem;
	font-weight: 400;
	white-space: nowrap;
}

.table-schedule td,
.table-schedule th {
	padding-block: var(--sp-4);
}

/* Old markup: class="link-dark fw-bold" — the event name stays the page's
   ink colour, never the blue link treatment used elsewhere on the site. */
.table-schedule .event {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

/* Old markup: <small class="fw-normal">→</small> — a step down in size on top
   of the shared regular-weight rule above, since the event name next to it is
   bold and full-size. */
.table-schedule .event.arrow::after {
	font-size: var(--text-sm);
	margin-left: var(--sp-1);
}

.table-schedule .event:hover {
	color: var(--link-hover);
}

.table-schedule .specs {
	display: block;
	font-size: var(--text-sm);
	line-height: var(--leading-tight);
	margin-top: var(--sp-1);
}

/* Divider between distance / elevation / discipline. */
.sep {
	color: var(--rule);
	padding-inline: .5em;
}

.table-schedule th .badge {
	margin-top: var(--sp-1);
}

/* Cancelled event: the date and the name are struck through. The distance /
   elevation line is only greyed — striking it puts a line through the "|"
   separators, which then read as dashes. */
.cancelled {
	color: var(--muted);
}

.cancelled th,
.cancelled .event {
	text-decoration: line-through;
}

/* --- Definition list (disciplines) ------------------------------------- */

/* Closing glossary, carrying the same weight as the Poznámka above it: same
   small size, same muted grey, no heading of its own. It had one, but at
   --text-sm a heading only competed with the terms it was meant to introduce.

   The note and the three disciplines read as four equal blocks — .prose's
   --flow (1rem) sets the note-to-list gap and --sp-4 (also 1rem) sets the gap
   between entries, so all four sit the same distance apart. Only dt→dd stays
   tight, because a term and its definition are one block, not two. */
.defs {
	font-size: var(--text-sm);
	line-height: var(--leading-tight);
	letter-spacing: var(--track-flat);
	color: var(--muted);
}

.defs dt {
	font-weight: 700;
}

.defs dd {
	margin-top: var(--sp-1);
}

.defs dd+dt {
	margin-top: var(--sp-4);
}

/* --- News entries ------------------------------------------------------ */

.entry+.entry {
	border-top: 1px solid var(--line-soft);
	margin-top: var(--sp-7);
	padding-top: var(--sp-7);
}

/* --- Hero (home page) -------------------------------------------------- */

/* Two columns on desktop, stacked below — the split the old site had, at the
   same 5:7 ratio and the same 768px breakpoint. Lives in .col-wide, so this is
   the one block on the site that uses the full shell width for text. */
.hero {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
}

@media (min-width: 48em) {
	.hero {
		grid-template-columns: 5fr 7fr;
		gap: var(--sp-7);
	}
}

/* The hero title is the old <h2 class="fs-1"> — larger than a page title, and
   with no rule under it, so it reads as a poster rather than a page heading. */
.hero h1 {
	font-size: var(--text-hero);
	margin-top: var(--sp-2);
}

.hero-list {
	list-style: none;
	padding: 0;
	margin-top: var(--sp-3);
}

.hero-text .btn {
	margin-top: var(--sp-5);
}

/* The old hero photo caption sat in the flow with nothing after it but
   whitespace before the partners strip's own divider — this one shouldn't
   carry a second hairline on top of that. */
.hero figcaption {
	border-bottom: none;
	padding-bottom: 0;
}

/* --- Split (Kontakt: info | form) --------------------------------------- */

/* The old Kontakt page ran "O nás" and the form side by side in two equal
   Bootstrap halves, not stacked — this restores that. Lives in .col-wide like
   .hero, for the same reason: an even split needs the full shell to read as
   two real columns rather than two cramped ones. */
.split {
	display: grid;
	gap: var(--sp-7);
}

@media (min-width: 48em) {
	.split {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-8);
	}
}

.hero-list li {
	font-size: var(--text-lg);
	line-height: 1.35;
	letter-spacing: var(--track-body);
}

.hero-list li+li {
	margin-top: var(--sp-2);
}

.hero-list li::before {
	content: "\2192";
	margin-right: .5em;
}

/* --- Form -------------------------------------------------------------- */

.field+.field {
	margin-top: var(--sp-5);
}

/* Submit button and any trailing note. */
.form>p {
	margin-top: var(--sp-5);
}

.field label {
	display: block;
	font-size: var(--text-sm);
	margin-bottom: var(--sp-1);
}

.input {
	display: block;
	width: 100%;
	font: inherit;
	letter-spacing: var(--track-body);
	color: var(--ink);
	background: var(--paper);
	padding: .75rem var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.input:hover,
.input:focus {
	border-color: var(--ink);
}

/* Black, not --accent — an orange-red ring here reads as a validation error
   on a field the visitor hasn't even submitted yet. Old site drew focus the
   same way: border-color: #000, no colour of its own. */
.input:focus {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
}

textarea.input {
	min-height: 8rem;
	max-height: 24rem;
	resize: vertical;
	/* Grows with what's typed instead of scrolling inside a fixed box.
	   Progressive enhancement: unsupported browsers just keep the manual
	   resize handle above. */
	field-sizing: content;
}

.input[aria-invalid="true"] {
	border-color: var(--error);
}

.error {
	display: none;
	font-size: var(--text-sm);
	color: var(--error);
	margin-top: var(--sp-1);
}

.input[aria-invalid="true"]~.error {
	display: block;
}

/* Form-level message (server error, network failure). */
.error-text {
	color: var(--error);
	margin-top: var(--sp-4);
}

.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Partners strip ---------------------------------------------------- */

.partners {
	display: grid;
	gap: var(--sp-7);
	text-align: center;
	justify-items: center;
}

.partners-label {
	font-size: var(--text-sm);
	color: var(--muted);
	margin-bottom: var(--sp-5);
}

.partners-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-5);
}

/* Logos are sized on width so wordmarks of different heights read as equals.
   Same widths the old site used: 10em for the main partner, 7.5em for the rest. */
.partners-main img {
	width: 10rem;
}

.partners-row img {
	width: 7.5rem;
}

@media (min-width: 40em) {
	.partners {
		grid-template-columns: auto 1px 1fr;
		align-items: center;
		gap: var(--sp-7);
	}

	/* Spread across the column rather than clustering in the middle — at shell
	   width a centred row leaves an obvious hole on the right. The stretch is
	   what makes space-evenly do anything: justify-items above shrink-wraps
	   every grid child, so without it the row is only as wide as its logos. */
	.partners>:last-child {
		justify-self: stretch;
	}

	.partners-row {
		justify-content: space-evenly;
		gap: var(--sp-6);
	}

	/* Explicit width: the grid centres its items, which would otherwise
	   shrink this empty div to zero and hide the divider. */
	.partners-rule {
		width: 1px;
		align-self: stretch;
		background: var(--line);
		min-height: 5rem;
	}
}

/* --- Footer ------------------------------------------------------------ */

.footer {
	padding-bottom: var(--sp-8);
}

/* Full shell width, same as .masthead-inner and .nav-inner above — a
   narrower, content-fit footer border was tried and reverted: it made the
   footer's border-top and padding read as a different width system from
   every other border on the page instead of matching them. */
.footer-grid {
	display: grid;
	gap: var(--sp-6);
	border-top: 1px solid var(--line-soft);
	padding-top: var(--sp-7);
}

@media (min-width: 40em) {
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5);
	}

	/* Equal-fr columns give the first one no more room than the third, but its
	   content (heading + description + logo) is the longest of the three — on
	   a narrower shell its text wraps right up against "Navigácia". Extra
	   padding here, not a wider gap, so columns two and three stay evenly
	   spaced. */
	.footer-grid>:first-child {
		padding-right: var(--sp-7);
	}
}

.footer h2 {
	font-size: var(--text-base);
	letter-spacing: var(--track-body);
	margin-bottom: var(--sp-2);
}

.footer p {
	font-size: var(--text-sm);
	line-height: var(--leading-tight);
	color: var(--muted);
}

.footer img {
	width: 4.5rem;
	margin-top: var(--sp-4);
}

.linklist {
	list-style: none;
	padding: 0;
	font-size: var(--text-sm);
}

.linklist li+li {
	margin-top: var(--sp-1);
}

.linklist a {
	color: var(--muted);
	text-decoration: none;
}

.linklist a:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: .16em;
}

/* --- Status message (form success / failure) --------------------------- */

/* Padding is deliberately not var(--sp-5) on every side: a box this short
   and wide reads as too much air top/bottom at the same value that looks
   right left/right. The heading is a plain inline <strong> in the markup
   (a transient status message shouldn't add a heading to the page outline)
   — display:block here gives it its own line and a size that reads as a
   heading, rather than leaning on margin alone to separate it from the body
   text below. */
.status {
	border: var(--border-strong) solid var(--ink);
	border-radius: var(--radius);
	padding: var(--sp-4) var(--sp-5);
}

.status strong {
	display: block;
	font-size: var(--text-md);
}

.status>*+* {
	margin-top: var(--sp-2);
}

/* ==========================================================================
   6. UTILITIES — short on purpose
   ========================================================================== */

.center {
	text-align: center;
}

.nowrap {
	white-space: nowrap;
}

.half {
	max-width: 50%;
}

.quarter {
	max-width: 25%;
}

/* Column hiding for tables. On a phone the ranking reads
   #, first name, surname, points — country is dropped. */
@media (max-width: 34.99em) {
	.hide-sm {
		display: none;
	}

	th,
	td {
		padding-inline: var(--sp-2);
	}

	.table-schedule th[scope="row"] {
		width: 4.75rem;
	}
}

@media (min-width: 35em) {
	.only-sm {
		display: none;
	}
}

/* ==========================================================================
   7. PRINT
   ========================================================================== */

@media print {

	.nav,
	.jump,
	.partners,
	.footer,
	.skip {
		display: none;
	}

	body {
		font-size: 11pt;
	}

	.table-podium {
		background: none;
		color: var(--ink);
		border: 1px solid var(--ink);
	}

	.table-podium tbody td:first-child,
	.table-ranking tbody td:first-child {
		color: var(--ink);
	}

	.table-ranking thead th {
		background: none;
		color: var(--ink);
		border-bottom: 2px solid var(--ink);
	}

	a {
		text-decoration: none;
	}
}