/*
Theme Name: Offroad
Theme URI: https://offroad.ee
Author: 4X4 Alakomitee MTÜ
Description: Roadbook-minimalism: lihtne PHP/HTML/CSS/JS teema offroad.ee jaoks.
Version: 0.1.0
Requires PHP: 8.0
Text Domain: offroad
*/

:root {
	--bg: #fff;
	--ink: #111;
	--muted: #6b6b6b;
	--line: #111;
	--hairline: #d9d9d9;
	--accent: #de844a;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--pad: 1.25rem;
	--maxw: 68rem;
	--section: clamp(3.5rem, 7vw, 5rem); /* ühtne vahe sektsioonide vahel */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
	margin: 0;
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--ink);
	background: var(--bg);
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--accent); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

h1, h2, h3, .big {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.05;
	margin: 0 0 0.6em;
}
h1 { font-size: clamp(1.8rem, 6vw, 3rem); }
h2 { font-size: clamp(1.3rem, 4vw, 1.9rem); }
h3 { font-size: 1.1rem; }

.mono { font-family: var(--mono); font-size: 0.85em; }

/* ---------- Header ---------- */
.site-header {
	border-bottom: 2px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg);
}
.site-header .bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem var(--pad);
	max-width: var(--maxw);
	margin: 0 auto;
}
.wordmark {
	font-weight: 900;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.nav-toggle {
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	padding: 0.5rem;
	margin-right: -0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before,
.nav-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}
.nav-toggle-icon::before { top: -7px; }
.nav-toggle-icon::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.nav-toggle-icon,
	.nav-toggle-icon::before,
	.nav-toggle-icon::after { transition: none; }
}
.site-nav { display: none; }
.site-nav.open {
	display: block;
	border-top: 2px solid var(--line);
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
	display: block;
	padding: 0.85rem var(--pad);
	border-bottom: 1px solid var(--hairline);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.05rem;
	text-decoration: none;
}

@media (min-width: 800px) {
	.nav-toggle { display: none; }
	.site-nav { display: block !important; border-top: 1px solid var(--hairline); }
	.site-nav ul { display: flex; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; padding: 0 calc(var(--pad) - 0.75rem); }
	.site-nav a { border-bottom: 0; font-size: 0.85rem; padding: 0.55rem 0.75rem; }
}

/* ---------- Roadbook front page ---------- */
/* Kaardipildi-hero (kasutaja enda pilt), täislaiuses. */
.hero-map { position: relative; border-bottom: 2px solid var(--line); }
.hero-map img {
	display: block;
	width: 100%;
	height: clamp(300px, 45vw, 620px);
	object-fit: cover;
	object-position: 62% 50%; /* maastur + lähim rajalõik fookuses ka kitsal ekraanil */
}
/* Võistluse ametlik kaanefoto hero'na: keskne fookus, plakati ülaosa nähtav. */
.hero-map.event-cover img { object-position: 50% 35%; }
.hero-map .next-event { margin: 1rem var(--pad) 1.25rem; }
@media (min-width: 800px) {
	.hero-map .next-event {
		position: absolute;
		left: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
		bottom: 2rem;
		margin: 0;
		max-width: 26rem;
	}
}

.next-event {
	border: 2px solid var(--line);
	background: var(--bg);
	margin: 1.5rem 0;
}
.next-event .label {
	display: block;
	font-family: var(--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.5rem 0.9rem;
	border-bottom: 1px solid var(--hairline);
	color: var(--muted);
}
.next-event .body { padding: 0.9rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; }
.next-event .date { font-family: var(--mono); font-weight: 700; }
.next-event .name { font-weight: 800; text-transform: uppercase; font-size: 1.25rem; }
.next-event .reg { margin-left: auto; }

/* ---------- Roadbook tabel / kalender ---------- */
.rb { border-top: 2px solid var(--line); margin: 1rem 0 2rem; }
.rb-row {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	gap: 0 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--hairline);
}
.rb-row.est { }
.rb-row.foreign { color: var(--muted); }
.rb-date { font-family: var(--mono); font-size: 0.85rem; padding-top: 0.2rem; white-space: nowrap; }
.rb-date .country { display: block; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; }
.rb-name { font-weight: 800; text-transform: uppercase; font-size: 1.05rem; line-height: 1.2; }
.rb-name a { text-decoration: none; border-bottom: 1px solid var(--hairline); }
.rb-meta { font-size: 0.85rem; color: var(--muted); }
.rb-reg { margin-top: 0.35rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.btn {
	display: inline-block;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 2px solid var(--line);
	padding: 0.35rem 0.75rem;
	background: var(--ink);
	color: #fff;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { background: none; color: var(--ink); }
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); background: none; }

@media (min-width: 800px) {
	.rb-row { grid-template-columns: 8rem 1fr auto; align-items: center; }
	.rb-reg { margin-top: 0; }
}

/* ---------- Sisu ---------- */
.content { padding-top: var(--section); padding-bottom: var(--section); }
/* Järjestikused sektsioonid: vahe tuleb ainult ülalt, et see ei kuhjuks. */
main > section + section { padding-top: var(--section); }
main > section:not(:last-child) { padding-bottom: 0; }
.content > :last-child { margin-bottom: 0; }
/* Jooksev tekst loetava laiusega; pealkirjad, kalender ja tabelid jäävad täislaiuses. */
.content .entry, .content > p { max-width: 70ch; }
.content .entry table { max-width: none; }
.content .entry :is(h2, h3) { margin-top: 1.6em; }
.content .entry table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.content .entry :is(td, th) { border: 1px solid var(--hairline); padding: 0.4rem 0.6rem; text-align: left; }
.content .entry th { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.entry a { color: var(--accent); }

/* ---------- Sõitja ABC ---------- */
.parent-link {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.8rem;
	text-decoration: none;
	color: var(--muted);
	margin-bottom: 1rem;
}
/* Koondlehe read on tervenisti klikitavad; nummerdus roadbook-stiilis. */
.abc-row { color: inherit; text-decoration: none; }
.abc-row:hover .rb-name { color: var(--accent); }
.abc-row .rb-date { font-weight: 700; }

/* Võistlusklassid: iga klass eraldi sektsioon, ülal ankrunimekiri (.cat-nav). */
.klass { border-top: 2px solid var(--line); padding-top: 1.25rem; margin-top: var(--section); }
.klass h2 { margin-bottom: 0.2em; }
.klass-sub { margin: 0 0 1.25rem; font-size: 1.1rem; color: var(--muted); }
.klass-text > p:first-child { margin-top: 0; }
.klass-text .small { font-size: 0.85rem; color: var(--muted); }
.klass-text table.specs th { width: 9rem; vertical-align: top; }
.klass-photo { margin: 0 0 1.5rem; }
.klass-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--hairline); }
.klass-photo figcaption { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); margin-top: 0.4rem; }

@media (min-width: 800px) {
	.klass-body { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 0 2.5rem; align-items: start; }
	.klass-text { grid-column: 1; grid-row: 1; }
	.klass-photo { grid-column: 2; grid-row: 1; margin: 0; position: sticky; top: 6rem; }
}

/* Uudised */
.post-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--line); }
.post-list li { border-bottom: 1px solid var(--hairline); padding: 0.9rem 0; }
.post-list .date { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); display: block; }
.post-list a { font-weight: 800; text-transform: uppercase; text-decoration: none; font-size: 1.05rem; line-height: 1.25; }
.post-list .cats { font-size: 0.75rem; color: var(--muted); }

/* Uudiste nimekiri pisipiltidega (avaleht). */
.post-list.thumbs li { display: flex; align-items: center; gap: 1rem; }
.post-list.thumbs .thumb { flex: 0 0 auto; }
.post-list.thumbs .thumb img {
	display: block;
	width: clamp(5.5rem, 18vw, 8rem);
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var(--hairline);
}
.pagination { display: flex; gap: 0.75rem; margin: 1.5rem 0; font-family: var(--mono); font-size: 0.9rem; }
.post-meta { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); margin-bottom: 1.5rem; }

.cat-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 1.5rem; }
.cat-nav a {
	font-family: var(--mono);
	font-size: 0.75rem;
	text-decoration: none;
	border: 1px solid var(--hairline);
	padding: 0.15rem 0.5rem;
}
.cat-nav a.active, .cat-nav a:hover { border-color: var(--ink); }

/* ---------- Ühekordne sündmus ---------- */
.event-facts {
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: -0.3rem 0 1.5rem;
}
.event-photo { margin: 0 0 2rem; border: 2px solid var(--line); }
.event-photo img { display: block; width: 100%; }

/* ---------- Vorm / registreerimine ---------- */
.rsvp-block { margin-top: var(--section); border-top: 2px solid var(--line); padding-top: 1.5rem; }
.rsvp-block [hidden] { display: none !important; }

.rsvp-left {
	display: inline-block;
	border: 1px solid var(--line);
	padding: 0.15rem 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0 0 1.25rem;
}
.rsvp-alert {
	border-left: 4px solid var(--accent);
	background: #faf4ef;
	padding: 0.7rem 0.9rem;
	margin: 0 0 1.25rem;
	max-width: 46rem;
}
.rsvp-closed { font-weight: 800; text-transform: uppercase; }
.rsvp-ok { border: 2px solid var(--line); max-width: 46rem; }
.rsvp-ok .label {
	display: block;
	font-family: var(--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0.5rem 0.9rem;
	border-bottom: 1px solid var(--hairline);
	color: var(--muted);
}
.rsvp-ok .body { padding: 0.9rem; }

.rsvp { max-width: 46rem; }
.rsvp fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rsvp legend {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	padding: 0;
	margin-bottom: 0.6rem;
}
.rsvp .f { margin: 0 0 1rem; }
.rsvp label {
	display: block;
	font-family: var(--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin-bottom: 0.25rem;
}
.rsvp input[type="text"],
.rsvp input[type="email"],
.rsvp input[type="tel"],
.rsvp select {
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 0.5rem 0.6rem;
	min-height: 44px;
}
.rsvp select { max-width: 8rem; }
.rsvp :is(input, select, button):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}
.rsvp .has-err input { border-color: #b3261e; }
.rsvp-err { display: block; font-size: 0.8rem; color: #b3261e; margin-top: 0.2rem; }

/* Valikuvariandid: raadionupp sildi sees, kogu rida klikitav. */
.rsvp-mode { margin-bottom: 1.5rem; }
.rsvp-mode .opt {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--sans);
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
	border: 1px solid var(--hairline);
	padding: 0.7rem 0.9rem;
	margin-bottom: -1px;
	cursor: pointer;
}
.rsvp-mode .opt:has(input:checked) { border-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); }
.rsvp-mode input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; margin: 0; }

/* Osalustasu: summa muutub inimeste arvuga. */
.rsvp-fee { border: 2px solid var(--line); padding: 0.9rem; margin-top: 1.5rem; }
.rsvp-fee > :first-child { margin-top: 0; }
.rsvp-fee > :last-child { margin-bottom: 0; }
.rsvp-fee-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.75rem; margin: 0 0 0.5rem; }
.rsvp-fee-label {
	font-family: var(--mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}
.rsvp-fee-sum { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; }
.rsvp-fee-calc { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.rsvp-fee-text { margin: 0; }
.rsvp-fee-text .rsvp-fee-sum { font-size: inherit; }

.rsvp-group-fields { margin-top: 1.25rem; }
.rsvp-group-name input { max-width: 22rem; }
.rsvp-people { margin-top: 1.5rem; }
.rsvp-person { border-top: 1px solid var(--hairline); padding-top: 1rem; margin-top: 1rem; }
.rsvp-person legend { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.rsvp-people .rsvp-person:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
/* Üksi registreerudes on "1. inimene" liigne — nähtav ainult laudkonna puhul. */
.rsvp.is-single .rsvp-person legend { display: none; }

.rsvp-submit { margin: 1.5rem 0 0; }
/* .btn on kirjutatud <a> jaoks; nupuna vajab veel neid. */
.rsvp button.btn { font-family: inherit; cursor: pointer; min-height: 44px; }
.rsvp-note { color: var(--muted); font-size: 0.9rem; margin-top: 1.25rem; }

/* Honeypot: robotile nähtav, inimesele mitte. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 800px) {
	.rsvp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
	.rsvp-opts { display: flex; }
	.rsvp-opts .opt { flex: 1; margin: 0 0 0 -1px; }
	.rsvp-group-fields { display: grid; grid-template-columns: 8rem 1fr; gap: 0 1.25rem; align-items: start; }
}

/* ---------- Footer ---------- */
.site-footer {
	border-top: 2px solid var(--line);
	padding: 1.5rem 0 2.5rem;
	font-size: 0.85rem;
	color: var(--muted);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 3rem; }
.site-footer a { text-decoration: none; }
.site-footer .fin { font-family: var(--mono); font-size: 0.75rem; }