:root {
    /* ── Värvid ───────────────────────────────────────────── */
    --color-bg: #ECF6E6;
    --color-surface: #DDEDD3;
    --color-border: #c0d0b8;
    --color-text: #6E6E6E;
    --color-text-muted: #6b6b6b;
    --color-accent: #FF7447;
    --color-accent-hover: #E05530;
    --color-dark: #262928;
    --color-on-dark: #f0f5ee;
    --color-on-dark-muted: #c8d5c4;
    --color-white: #ffffff;

    /* ── Tüpograafia ──────────────────────────────────────── */
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-base: 1rem;
    --font-size-h1: 2rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --line-height: 1.6;
    --line-height-tight: 1.5;

    /* ── Vertikaalne rütm (KÕIK ülemised marginid tulevad siit) ─────
       Kogu sait kasutab ainult ÜLEMIST margini ja AINULT neid kahte väärtust:
         --heading-margin-top  → pealkirjad ja plokid (suur vahe)
         --paragraph-spacing    → tekst, loendid, pildid (väike vahe)
       Ära kirjuta margine käsitsi (nt 3rem / 0.5rem) — viita alati muutujale,
       et seos oleks koodi lugedes selge.

       ERAND — liidetud vahe: mõni vahe on tahtlikult jagatud kahe naaberploki
       vahel (nt menüüriba 0.5rem + pealkirjariba 2.5rem = 3rem). Nii ei kao
       vahe ära, kui plokid teineteisest lahku lähevad (sticky header, kerimine).
       Selline liitmine peab olema koodis KOMMENTEERITUD mõlemas otsas, muidu
       ei paista kummastki arvust, et tegu on ühe 3rem vahe poolega. */
    --heading-margin-top: 3rem;
    --paragraph-spacing: 0.5rem;

    /* ── Kujundusplokkide sisepadding ─────────────────────── */
    --block-padding-y: 1rem;
    /* --block-padding-x on astmeline → defineeritud "Layout" plokis allpool */

    /* ── Detailid ─────────────────────────────────────────── */
    --radius: 0.25rem;
    --transition: 0.15s;
    --border-width: 0.0625rem;        /* = 1px */

    /* ── Layout: astmeline sisu-laius + külgpadding ───────── */
    /* Astmete VÄÄRTUSED, murdepunktid ja aktiivne aste elavad
       eraldi failis → steps.css. Laius + padding + murdepunkt
       PEAVAD koos muutuma, seepärast on need ühes kohas koos.
       main.css tarbib siit ainult: --max-width, --block-padding-x,
       --width-step-2, --width-step-3. */
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Header (brand-riba) ──────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-brand {
    background-color: var(--color-bg);
    border-bottom: var(--border-width) solid var(--color-border);
    padding: var(--paragraph-spacing) var(--block-padding-x);
}

.header-brand__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.header-brand__logo-link {
    text-decoration: none;
    flex: 0 0 var(--width-step-2);
}

.header-brand__logo {
    height: 4rem;
    width: auto;
    display: block;
}

.header-brand__info {
    flex: 1 1 0;
    padding-left: var(--block-padding-x);   /* joondub bänneri infotekstiga */
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.header-brand__link {
    color: var(--color-accent);
    text-decoration: none;
    /* Telefoninumber on reamurdmise mõttes neli eraldi sõna ("+372", "630",
       "9080") → kitsas peas (kus kast kahaneb min-content'i järgi, vt steps.css)
       murdus number keset ennast. nowrap teeb numbrist ühe murdmatu ühiku ja
       tõstab seega ka min-content'i alampiiri. Koos template'i "Tel: "-ga
       püsib terve rida koos. E-mailile mõjuta (on niikuinii üks sõna). */
    white-space: nowrap;
}

.header-brand__link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* ── Nav (menüüriba) ──────────────────────────────────────── */

.nav {
    background-color: var(--color-dark);
    /* Menüüriba: üleval 0 — ülemine vahe tuleb itemite enda paddingust (et need
       oleksid klikitavad).
       All 0.5rem: see on menüüriba OMA vahe. Header on sticky, seega kerimisel
       libiseb sisu menüü alla — kui vahe tuleks ainult alt tulevast plokist,
       kaoks see kerides ära ja pilt puutuks vastu menüüd. Menüü→pealkiri 3rem
       on seega tahtlikult jagatud: 0.5rem siit + 2.5rem page-banner'i ülalt. */
    padding: 0 var(--block-padding-x) var(--paragraph-spacing);
}

.nav__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.nav__list {
    list-style: none;
    display: flex;
}

.nav__link {
    /* inline-block, et püstpadding tekitaks reaalse ruumi (inline-<a> püstpadding
       ei lükkaks teksti ega muudaks kõrgust). */
    display: inline-block;
    color: var(--color-on-dark-muted);
    text-decoration: none;
    /* Item: üleval ja paremal 0.5rem padding (= klikitav ala + vahe nuppude
       vahel), all ja vasakul 0. */
    padding: var(--paragraph-spacing) var(--paragraph-spacing) 0 0;
    border-radius: var(--radius);
    transition: var(--transition);
}

.nav__link:hover {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.1);
}

.nav__link--active {
    color: var(--color-accent);
    font-weight: 500;
}

/* ── Page Banner (pealkirjariba) ──────────────────────────── */

.page-banner {
    background-color: var(--color-dark);
    color: var(--color-on-dark);
    /* Pealkiri: üleval 2.5rem — menüüriba annab omalt poolt 0.5rem, kokku 3rem
       (vt .nav kommentaari: jaotus on vajalik sticky-headeri pärast).
       All väike vahe. */
    padding: calc(var(--heading-margin-top) - var(--paragraph-spacing))
             var(--block-padding-x)
             var(--paragraph-spacing);
}

.page-banner__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.page-banner__title {
    color: var(--color-on-dark);
    margin: 0;                        /* üksik pealkiri ribal — ploki padding annab ruumi */
}

/* ── Main & Content Box (sisu) ────────────────────────────── */

.site-main {
    flex: 1;
    /* Ülapadding 0: bänneri ja sisu vahe tuleb ainsana sisu esimese pealkirja
       3rem-st (mitte padding + margin liitumisest). */
    padding: 0 var(--block-padding-x) var(--block-padding-y);
}

.content-box {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Sisutekst läheb vaikimisi vasakule poole disainijoont (kuni 48rem);
   parem pool jääb esialgu tühjaks. Täislaiust vajavad plokid määravad ise max-width: none. */
.content-box > * {
    max-width: var(--width-step-2);
}

/* 2-veeruline paigutus (disainijoon) elab design-line.css-is. */

/* ── Tüpograafia ──────────────────────────────────────────── */

/* Vertikaalne rütm — ÜKS reegel kogu saidile:
   • Margin on AINULT ülaservas ja AINULT leht-elemendil (pealkiri, tekst).
     Ümbris-divid (design-line, __left/__right, memberships, intro) jäävad 0-le,
     nii et ükski vahe ei teki kahe margini liitumisest.
   • Iga vahe on TÄPSELT üks väärtus: 3rem (pealkirjad), 0.5rem (tekst) või 0.
   Pealkirja 3rem on piiratud sisualaga (.content-box) — bänner/hero seavad oma
   vahed ise (kompaktsed), et globaalne 3rem neid ei lükkaks. */
h1, h2, h3, h4 {
    line-height: 1.25;
}

.content-box :is(h1, h2, h3, h4) {
    margin-top: var(--heading-margin-top);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

p { margin-top: var(--paragraph-spacing); }

a {
    color: var(--color-accent);
    text-decoration: underline;
}

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

address {
    font-style: normal;
}

.content-box img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: var(--paragraph-spacing);
}

.logo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--paragraph-spacing);
    margin-top: var(--paragraph-spacing);
}

.logo-row img {
    width: auto;
    margin-top: 0;
}

/* memberships on puhas ümbris → ise 0 margin; sees olev h2 kannab oma 3rem-i.
   flow-root teeb temast BFC, nii et h2-margin EI collapse'i üles ploki servani
   (ei paistaks ümbrise marginina) — margin jääb puhtalt pealkirjale. */
.memberships {
    display: flow-root;
}

/* Statistikaplokk: sees olevad <p> saavad standardse ülemise margini,
   esimene nullitakse (plokk algab oma ülaservast). */
.intro-stats > :first-child {
    margin-top: 0;
}

/* ── Footer ───────────────────────────────────────────────── */

.site-footer {
    border-top: var(--border-width) solid var(--color-border);
    padding: var(--paragraph-spacing) var(--block-padding-x);
    text-align: center;
    color: var(--color-text-muted);
}

.site-footer p {
    margin: 0;
}

/* ── Project Card (projektid) ─────────────────────────────── */

.projects-list {
    display: flex;
    flex-direction: column;
}

.project-card {
    padding: var(--block-padding-y) 0;
    border-bottom: var(--border-width) solid var(--color-border);
}

.project-card:last-child,
.project-card--is-last {
    border-bottom: none;
}

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

.project-card__meta {
    color: var(--color-text-muted);
    display: flex;
    gap: var(--paragraph-spacing);
    flex-wrap: wrap;
}

.project-card__description {
    color: var(--color-text-muted);
    white-space: pre-line;            /* säilita kirjelduse reavahetused (\n) */
}

.project-card__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--paragraph-spacing);
    margin-top: var(--paragraph-spacing);
    padding: 0;
}

.project-card__tags li {
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius);
    border: var(--border-width) solid var(--color-border);
    color: var(--color-text-muted);
}

.project-card__tags--systems li {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ── Responsive ───────────────────────────────────────────── */
/* Astmeline sisu-laius (astmete väärtused, murdepunktid ja kõik
   murdepunktiga seotud ümberkorraldused) elab failis steps.css,
   mis laaditakse PÄRAST main.css-i. Vt steps.css. */