/* Rebahn — rebahn.eu
   Fondid: JetBrains Mono ja IBM Plex Sans (SIL OFL 1.1), majutatud siin, mitte Google Fonts serverist. */

@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Brändi tokenid (sama mis disainisüsteemis) */
:root {
  --bg: #0F1312;
  --surface: #161C1A;
  --line: #29312E;
  --text: #E7ECEA;
  --text-muted: #9AA5A0;
  --accent: #22A06B;
  --accent-hover: #2BB57A;
  --accent-text: #4CC88F;
  --ink: #0F1312;
  --danger: #F28B82;  /* ainult vormi vead */

  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --radius-sm: 4px;

  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);

  color-scheme: dark;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 28px;
  -webkit-font-smoothing: antialiased;
}

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

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

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
}
.skip:focus {
  left: var(--gutter);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--text);
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Päis ---------------------------------------------------------- */

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-height: 80px;
}

.brand {
  display: block;
  padding-block: var(--space-2);
}
/* <picture> valib liikuva logo ainult siis, kui kasutaja pole liikumist vähendanud. */
.brand picture,
.brand img {
  display: block;
}
.brand img {
  width: 132px;
  height: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
}
.site-nav a {
  display: inline-block;
  padding: 12px 0;
  color: var(--text-muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--text); }

.lang { display: flex; }
/* Puuteala vähemalt 44 px lai; tekst on keskel, nii jääb aktiivse keele allajoon teksti alla. */
.lang a {
  min-width: 44px;
  padding-inline: 4px;
  text-align: center;
}
.lang a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---- Avaplokk ------------------------------------------------------ */

.hero {
  padding-block: clamp(48px, 9vw, 128px) clamp(72px, 10vw, 136px);
}

/* Pealkirja suuruse ülempiir lähtub sisu tegelikust laiusest (cqi), mitte akna laiusest. */
.hero .wrap { container-type: inline-size; }

.hero h1 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-mono);
  font-weight: 700;
  /* Teine piir hoiab pikima sõna koos kursoriga sisu laiuses: 9,4 em on 15 tähte ja kursor
     („Privaatsusteave“). 100cqi on .wrap sisu laius, seega on arvesse võetud ka kerimisriba
     ja suur vaikekiri. Ilma selleta tekiks kitsal ekraanil horisontaalne kerimine. Kui pikim
     sõna, kursori mõõdud või tähevahe muutuvad, arvuta 9,4 uuesti. Esimene rida on varu
     brauserile, mis cqi-d ei tunne (nt iOS 15): see lähtub akna laiusest. */
  font-size: min(clamp(1.875rem, 1.05rem + 4.4vw, 4.5rem), calc((100vw - 2 * var(--gutter)) / 9.4));
  font-size: min(clamp(1.875rem, 1.05rem + 4.4vw, 4.5rem), calc(100cqi / 9.4));
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.nowrap { white-space: nowrap; }

/* Sama kursor mis logos. Ei vilgu: lehel liigub ainult päise logo (SVG-fail). */
.cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.12em;
  margin-left: 0.14em;
  background: var(--accent);
}

.lead {
  max-width: 56ch;
  margin: var(--space-5) 0 0;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 32px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.button:hover {
  background: var(--accent-hover);
  color: var(--ink);
}

.phone {
  display: inline-block;
  padding-block: 12px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 16px;
  text-decoration: none;
}
.phone:hover { color: var(--accent-text); }

/* ---- Sektsioonid: pealkiri vasakul, sisu paremal (nagu man-lehel) --- */

.section {
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vw, 96px);
}

.section .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.section h2 {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.01em;
}

.section p {
  max-width: 60ch;
  margin: 0;
}
.section p + p { margin-top: var(--space-3); }

@media (min-width: 860px) {
  .section .wrap {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-5);
  }
  .section h2 {
    font-size: 32px;
    line-height: 40px;
  }
}

/* Teenused: termin ja selgitus */
.services { margin: 0; }

.service {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}
.service:first-child {
  padding-top: 0;
  border-top: 0;
}
.service:last-child { padding-bottom: 0; }

.service dt {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}
.service dd {
  max-width: 60ch;
  margin: 0;
  color: var(--text-muted);
}

/* Kontakt */
.contact-intro { color: var(--text-muted); }

.email {
  /* Kitsal ekraanil on tekst alla 44 px kõrge; min-height hoiab puuteala piisavalt suurena. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-4);
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.625rem, 1.05rem + 2.4vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}
.email:hover { color: var(--accent-text); }

/* Kontaktivorm. Veaga lehel eemaldab Worker veateadetelt `hidden`-i ja lisab väljale
   aria-invalid; :user-invalid märgib vea juba brauseris, kui väli on läbi käidud. */
[hidden] { display: none !important; }  /* muidu võidaks display-reegel hidden-atribuudi */

.contact-form {
  display: grid;
  gap: var(--space-4);
  max-width: 680px;
  margin-top: var(--space-5);
}
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4) var(--space-3);
}
@media (min-width: 600px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-wide { grid-column: 1 / -1; }
}
.field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.field label { font-weight: 500; }
/* 17 px kiri, et iOS ei suurendaks fookuses lehte. */
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.field textarea {
  min-height: 176px;
  resize: vertical;
}
/* Kaks eraldi reeglit: brauser, mis :user-invalid'i ei tunne, jätaks ühise loendi tervikuna vahele
   ja serveri märgitud väli jääks punase äärisega märkimata. */
.field [aria-invalid="true"] {
  border: 2px solid var(--danger);
  padding: 8px 11px;
}
.field input:user-invalid,
.field textarea:user-invalid {
  border: 2px solid var(--danger);
  padding: 8px 11px;
}
.section .field-error {
  margin: 0;
  color: var(--danger);
  font-weight: 600;
}
.form-status {
  padding: var(--space-3);
  border: 2px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
/* .section p + p annaks peidetud naabri järel ülemise vahe. */
.section .form-status p { margin: 0; }
.section .form-note {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 22px;
}
button.button {
  justify-self: start;
  border: 0;
  cursor: pointer;
}
/* Lõksuväli robotitele: inimene ja ekraanilugeja seda ei näe. */
.hp { display: none; }
.section .contact-alt {
  margin-top: var(--space-5);
  color: var(--text-muted);
}

/* ---- Jalus --------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-5) var(--space-6);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 22px;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.legal { margin: 0; }
.legal strong {
  color: var(--text);
  font-weight: 500;
}

/* Telefon jaluses: puuteala jääb 46 px kõrgeks, aga negatiivne marginaal joondab teksti
   teiste jaluse ridadega. Suurus sama mis jalusel. */
.site-footer .phone {
  margin-block: -12px;
  font-size: 14px;
}

/* Privaatsusteabe link jaluses: puuteala sama, mis telefonil. */
.site-footer .footer-link {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

/* ---- 404 ja tänuleht: lühike teade ------------------------------------ */

.notfound,
.message {
  padding-block: clamp(64px, 12vw, 160px);
}
.notfound h1,
.message h1 {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.notfound p,
.message p {
  max-width: 56ch;
  margin: var(--space-4) 0 0;
  color: var(--text-muted);
}