/* =============================================================================
   Baas — reset, dokument, tüpograafia, vormielemendid.
   Ainult elemendiselektorid ja üksikud utiliidid. Komponendid on eraldi
   failis, et spetsiifilisus ei hakkaks omavahel võitlema.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--pd-paber);
  color: var(--pd-tint);
  font-family: var(--pd-f-tekst);
  font-size: var(--pd-t-md);
  line-height: var(--pd-lh-lai);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Pealkirjad ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--pd-f-pealkiri);
  font-weight: 700;
  line-height: var(--pd-lh-keskm);
  letter-spacing: var(--pd-ls-tihe);
  text-wrap: balance;
  color: var(--pd-tint);
}

h1 { font-size: var(--pd-t-4xl); font-weight: 800; line-height: var(--pd-lh-tihe); }
h2 { font-size: var(--pd-t-3xl); font-weight: 750; line-height: 1.14; }
h3 { font-size: var(--pd-t-2xl); font-weight: 700; }
h4 { font-size: var(--pd-t-xl);  font-weight: 700; }
h5 { font-size: var(--pd-t-lg);  font-weight: 650; }
h6 { font-size: var(--pd-t-md);  font-weight: 650; }

/* --- Tekst --------------------------------------------------------------- */

p, ul, ol, dl, blockquote, figure, pre, table { margin: 0; }

a {
  color: var(--pd-teine-tekst);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
a:hover { color: var(--pd-teine-tume); }

strong, b { font-weight: 650; }

small { font-size: var(--pd-t-sm); color: var(--pd-tint-3); }

code, kbd, samp {
  font-family: var(--pd-f-andmed);
  font-size: .875em;
  font-variant-numeric: tabular-nums;
}

hr {
  border: 0;
  border-top: var(--pd-piir);
  margin-block: var(--pd-s-8);
}

/* --- Meedia -------------------------------------------------------------- */

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Vormielemendid ------------------------------------------------------ */

input, textarea, select, button {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="number"], input[type="search"],
textarea, select {
  width: 100%;
  padding: .6rem .75rem;
  background: var(--pd-pind);
  border: var(--pd-piir-tugev);
  border-radius: var(--pd-raadius);
  transition: border-color var(--pd-kiire), box-shadow var(--pd-kiire);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--pd-teine-tekst);
  box-shadow: 0 0 0 3px var(--pd-teine-hell);
}
textarea { resize: vertical; min-height: 6rem; }

/* --- Fookus -------------------------------------------------------------- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pd-teine-tekst);
  outline-offset: 2px;
  border-radius: var(--pd-raadius);
}

/* --- Ligipääsetavus ------------------------------------------------------ */

.pd-skip {
  position: absolute;
  left: var(--pd-s-4);
  top: calc(var(--pd-s-4) * -6);
  z-index: var(--pd-z-modaal);
  background: var(--pd-tint);
  color: var(--pd-tint-vastu);
  padding: var(--pd-s-3) var(--pd-s-4);
  border-radius: var(--pd-raadius);
  text-decoration: none;
  transition: top var(--pd-kiire);
}
.pd-skip:focus { top: var(--pd-s-4); color: var(--pd-tint-vastu); }

/*
 * Nähtamatu, aga ekraanilugejale loetav.
 *
 * `.screen-reader-text` on siin sellepärast, et WordPressi enda funktsioonid
 * kasutavad just seda klassi — `the_posts_pagination()` väljastab
 * „Postituste leheküljendus" pealkirja, `get_search_form()` sildi jne. Teema
 * eemaldab `wp-block-library` ja `classic-theme-styles`, kust see klass
 * tavaliselt tuleb, nii et ilma selle reeglita on need tekstid lihtsalt
 * lehel nähtaval.
 */
.pd-peidus,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Fookusesse jõudes peab peidetud link siiski nähtavale tulema. */
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0; clip-path: none;
}

/* =============================================================================
   Paigutuse utiliidid
   ========================================================================== */

.pd-wrap {
  width: 100%;
  max-width: var(--pd-laius);
  margin-inline: auto;
  padding-inline: var(--pd-s-5);
}
@media (min-width: 48rem) { .pd-wrap { padding-inline: var(--pd-s-8); } }

.pd-wrap--kitsas { max-width: var(--pd-laius-kitsas); }

.pd-sektsioon { padding-block: var(--pd-s-16); }
@media (min-width: 48rem) { .pd-sektsioon { padding-block: var(--pd-s-20); } }

/* Voogudele antakse vahe gap'iga, mitte marginaalidega — nii ei teki
   kokkuvarisevaid ega kahekordistuvaid vahesid. */
.pd-voog { display: flex; flex-direction: column; gap: var(--pd-s-4); }
.pd-voog--tihe { gap: var(--pd-s-2); }
.pd-voog--lai  { gap: var(--pd-s-8); }

/* =============================================================================
   Korduvad tekstitüübid
   ========================================================================== */

/* Mono silt — koodid, mõõdud, kategooriad. Suuna A kandev detail. */
.pd-silt {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-2xs);
  font-weight: 500;
  letter-spacing: var(--pd-ls-lai);
  text-transform: uppercase;
  color: var(--pd-tint-3);
  font-variant-numeric: tabular-nums;
}

/* Mõõt — alati mõõdusinises, alati tabelnumbritega. */
.pd-moot {
  font-family: var(--pd-f-andmed);
  font-size: var(--pd-t-xs);
  color: var(--pd-teine-tekst);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Kood — trükikoha tähis, alati märkevärvis. */
.pd-kood {
  font-family: var(--pd-f-andmed);
  font-weight: 700;
  color: var(--pd-mark-tekst);
  letter-spacing: .05em;
}

.pd-juhtlause {
  font-size: var(--pd-t-lg);
  line-height: 1.55;
  color: var(--pd-tint-2);
  max-width: 60ch;
}

/* =============================================================================
   Pikk tekstisisu — sisulehed ja blogi.
   Klient kirjutab Gutenbergis; see kannab tema väljundit.
   Sama fail laetakse ka redaktorisse (editor-style), et admin näitaks sama.
   ========================================================================== */

.pd-proosa {
  max-width: var(--pd-laius-kitsas);
  display: flex;
  flex-direction: column;
  gap: var(--pd-s-5);
}
.pd-proosa > * { margin: 0; }

.pd-proosa h2 { font-size: var(--pd-t-2xl); margin-top: var(--pd-s-6); }
.pd-proosa h3 { font-size: var(--pd-t-xl);  margin-top: var(--pd-s-4); }
.pd-proosa h4 { font-size: var(--pd-t-lg); }

.pd-proosa ul, .pd-proosa ol {
  padding-left: var(--pd-s-5);
  display: flex; flex-direction: column; gap: var(--pd-s-2);
}
.pd-proosa li::marker { color: var(--pd-mark-tekst); }
.pd-proosa ol li::marker { font-family: var(--pd-f-andmed); font-size: .85em; }

.pd-proosa blockquote {
  border-left: 2px solid var(--pd-mark);
  padding-left: var(--pd-s-5);
  color: var(--pd-tint-2);
}

.pd-proosa figure { display: flex; flex-direction: column; gap: var(--pd-s-2); }
.pd-proosa figcaption { font-size: var(--pd-t-sm); color: var(--pd-tint-3); }

.pd-proosa table { width: 100%; border-collapse: collapse; font-size: var(--pd-t-sm); }
.pd-proosa :is(th, td) {
  text-align: left; padding: var(--pd-s-2) var(--pd-s-3);
  border-bottom: var(--pd-piir);
}
.pd-proosa th { font-weight: 650; }

.pd-proosa-scroll { overflow-x: auto; }

/* =============================================================================
   Lehe taustakujundid.

   Klient soovis, et hall taust oleks heledam ja et kogu lehel oleks värvilisi
   kujundeid. Kujundid on `main`-i taustakihina, mitte eraldi märgenditena:
   nad ei mõjuta paigutust, ei nõua ühtki lisaelementi ega saa kogemata
   ekraanilugejasse sattuda.

   Läbipaistvused on 7–10%. Kõige tugevam kombinatsioon (vaigistatud tekst
   lillal laigul) annab 4.58:1 ehk jääb WCAG AA piiri kohale; puhtal paberil
   on sama tekst 4.98:1. Läbipaistvusega ei tohi siin kõrgemale minna.

   Valge pinnaga sektsioonid (kaardid, lehepäis, sammude riba) katavad laigud
   kinni — nii tekib lehele rütm, kus värv paistab sektsioonide vahelt.
   ========================================================================== */

#pd-sisu {
  background-image:
    radial-gradient(34rem 34rem at 104% 6%,  rgba(255, 112, 0, .08), transparent 62%),
    radial-gradient(30rem 30rem at -6%  26%, rgba(16, 161, 157, .08), transparent 62%),
    radial-gradient(26rem 26rem at 106% 48%, rgba(166, 95, 195, .07), transparent 62%),
    radial-gradient(24rem 24rem at -5%  68%, rgba(255, 191, 0, .10), transparent 62%),
    radial-gradient(28rem 28rem at 103% 88%, rgba(16, 161, 157, .07), transparent 62%);
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  /* Kujundid on staatilised — siin ei liigu midagi, seega eraldi lülitit ei ole. */
}