/* ==========================================================================
   components.css — silvaland-disain.md §4 ja §7 mustrid
   Iga AA-nõue on siin CSS-i sisse ehitatud, mitte dokumendis olev palve.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nupud (§4). Puutesihtmärk min 24px, soovituslik 44px (2.5.8).
   -------------------------------------------------------------------------- */
.silva-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Primary: kollane täidis, must tekst (17,78), KOHUSTUSLIK tumeroheline piir.
   Ilma piirita on nupp valgel taustal 1,18:1 — kuju ei ole tuvastatav (1.4.11). */
.silva-btn--primary {
  background: var(--silva-yellow);
  color: var(--silva-black);
  border-color: var(--silva-green-900);   /* 11,78 valgel — mitte eemaldada */
}
.silva-btn--primary:hover { background: var(--silva-yellow-600); }  /* must 12,76 */

/* Secondary: pind ise on 11,78 valgel, piiri ei vaja */
.silva-btn--secondary {
  background: var(--silva-green-900);
  color: var(--silva-white);              /* 11,78 */
}
.silva-btn--secondary:hover { background: var(--silva-green-800); }

/* Tertiary / outline */
.silva-btn--tertiary {
  background: transparent;
  color: var(--btn-tertiary);
  border-color: var(--btn-tertiary);
}
.silva-btn--tertiary:hover { background: var(--silva-green-50); }

.silva-btn[aria-disabled="true"],
.silva-btn:disabled {
  background: var(--silva-green-100);
  color: var(--silva-ink-2);              /* 7,28 */
  border-color: var(--silva-border);
  pointer-events: none;
}

/* Tumedal pinnal ei vaja primary piiri — kollane vs #134021 on 9,97.
   .silva-hero on TEADLIKULT välja jäetud: kui hero taha tuleb foto,
   ei ole taust enam #134021 ja piir on ainus, mis nupu kuju garanteerib. */
.silva-section--dark .silva-btn--primary { border-color: transparent; }
/* Iga tumeroheline pind seab kontuurnupu kollaseks (9,97). Muutujana,
   sest punktlapp jättis navigatsioonipaneeli vahele ja "Log in" jäi
   tumerohelisel tumeroheliseks — 1:1. */
.silva-section--dark,
.silva-nav-panel__sheet {
  --btn-tertiary: var(--silva-yellow);
}

/* 2.5.8 puutesihtmärk: min 24x24, soovituslik 44x44.
   Lauses olev link on standardi järgi erand ("inline" exception), üksi
   seisev EI OLE. See selektor tabab täpselt üksi seisvad lingid —
   lõigu või listi ainsa sisuna — ja jätab lauses olevad puutumata.
   Nii ei pea seda igas templates meeles pidama. */
p > a:only-child,
li > a:only-child,
.silva-trustbar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Tekstilink CTA kõrval */
.silva-textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--link-on-surface, var(--accent-text));
}

/* --------------------------------------------------------------------------
   RiskNotice (§3.2 Disclosure) — min 15px, --silva-ink-2, MITTE ink-3.
   Hoiatust ei tohi vormistada hallima ja väiksemana kui ülejäänud tekst (§11).
   -------------------------------------------------------------------------- */
.silva-risk {
  margin-top: var(--sp-4);
  max-width: 60ch;
  font-size: var(--fs-body-sm);           /* 15px — miinimum */
  line-height: var(--lh-body);
  /* Värv pärineb kontekstist. Heledal --silva-ink-2 (9,24), tumedal
     --silva-green-100 (9,28). MITTE kunagi --silva-ink-3.
     Vaikeväärtus on heleda pinna oma, nii et uus konteiner ei saa
     hoiatust kogemata nähtamatuks muuta. */
  color: var(--text-2-on-surface, var(--silva-ink-2));
}

.silva-cta-group { margin-top: var(--sp-8); }
.silva-cta-group__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

/* --------------------------------------------------------------------------
   Usalduse riba (§6 sektsioon 1)
   -------------------------------------------------------------------------- */
.silva-trustbar {
  background: var(--trustbar-bg);
  border-top: 1px solid var(--header-rule);   /* nüüd footeri ees, mitte hero ees */
  font-size: var(--fs-body-sm);
  color: var(--trustbar-text);
}
.silva-trustbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  align-items: center;
  margin: 0;
  padding: var(--sp-3) 0;
  list-style: none;
}
.silva-trustbar__list li { margin: 0; }
.silva-trustbar a { color: var(--trustbar-link); }

/* --------------------------------------------------------------------------
   Hero (§7). Ülekate on KOHUSTUSLIK — ilma selleta murrab foto vahetamine
   kontrasti vaikselt. Sellepärast on ta ::after, mitte valikuline klass.
   -------------------------------------------------------------------------- */
.silva-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  background: var(--silva-green-900);     /* fotota varuvariant — juba AA */
  color: var(--silva-white);
  padding-block: var(--sp-24);
  /* Katab suurema osa ekraanist kohe laadimisel. svh (mitte ainult vh)
     tähtis mobiilis, kus brauseri tööriistariba muudab vh väärtust
     kerimise ajal — svh ei hüppa ega jäta hero'd vahepeal liiga lühikeseks. */
  min-height: 100vh;
  min-height: 100svh;
}
.silva-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.silva-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.silva-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,64,33,.25) 0%, rgba(19,64,33,.72) 100%);
}
.silva-hero h1 { color: var(--silva-white); }
.silva-hero__lead {
  font-size: var(--fs-h3);
  color: var(--silva-green-100);          /* 9,28 */
  max-width: 60ch;
}

/* Stat — number ja silt on ERALDI elemendid, mitte üks string (§3.2) */
.silva-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 0;
  padding: 0;
  list-style: none;
}
.silva-stat {
  margin: 0;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-pill);
  background: var(--silva-green-900);     /* läbipaistmatu pill — §7 muster */
  color: var(--silva-white);              /* 11,78, ei sõltu foto sisust */
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Kaardid. Tumedas režiimis on piir KOHUSTUSLIK — tõstetud pind on
   põhipinna vastu ainult 1,28:1 ja vari üksi seda ei lahenda (§9).
   -------------------------------------------------------------------------- */
.silva-card {
  padding: var(--sp-6);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1px solid var(--border);
}

/* Kaart tumedas sektsioonis EI TOHI jääda heledaks pinnaks — ta pärib
   ümbritsevalt valge ja green-100 teksti, mis heledal pinnal on 1,09:1.
   Läbipaistev pind + nähtav piir hoiab teksti õigel taustal. */
.silva-section--dark .silva-card {
  background: transparent;
  border-color: var(--silva-green-400);      /* 3,48 vs #134021 — 1.4.11 ✅ */
}

/* Aus lahtiütlus (§4.3 SecurityBlocki neljas element). See ei ole
   peidetav ega kokkuvolditav ja tal on kollane piir, sest ta peab
   olema nähtav, mitte taandatud. Kollane piir tumerohelisel: 9,97. */
.silva-section--dark .silva-card--disclosure {
  border-color: var(--silva-yellow);
  border-width: 2px;
  margin-top: var(--sp-12);
}
.silva-card h3 { margin-bottom: var(--sp-2); }
.silva-card p:last-child { margin-bottom: 0; }

.silva-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Plaanikaardid ja sammurida (§7 slaid 10).
   Sammunumber on TEKST, mitte pilt; DOM-järjekord = visuaalne järjekord.
   -------------------------------------------------------------------------- */
.silva-plan {
  background: var(--silva-green-300);     /* heleroheline pind */
  border: 1px solid var(--silva-green-900);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  color: var(--silva-green-900);          /* 5,07 — ainus AA-tekst siin peal */
}
/* ⚠️ #94B19D peal ei mahu tekstihierarhiat. Kaardil on ÜKS tekstiaste. */
.silva-plan h3,
.silva-plan p { color: var(--silva-green-900); }
.silva-plan__term {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.silva-step__number {
  display: inline-block;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--silva-yellow);
  color: var(--silva-black);              /* 17,78 */
  font-size: var(--fs-body-sm);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.silva-section--dark .silva-step__number {
  background: transparent;
  color: var(--silva-yellow);             /* 9,97 tumerohelisel */
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Tasemekaardid (§7 slaid 9). Värv kannab hierarhiat, AGA number ja nimi
   peavad jääma — järk ei tohi olla ainult värvis (1.4.1).
   -------------------------------------------------------------------------- */
.silva-tier { border-radius: var(--radius-md); padding: var(--sp-6); }
.silva-tier__rank {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-weight: 700;
  margin-bottom: var(--sp-4);
}
.silva-tier--1 { background: var(--silva-green-300); color: var(--silva-black); }  /* 9,03 */
.silva-tier--2 { background: var(--silva-green-900); color: var(--silva-white); }  /* 11,78 */
.silva-tier--3 { background: var(--silva-green-900); color: var(--silva-yellow); } /* 9,97 */
.silva-tier--4 { background: var(--silva-yellow);    color: var(--silva-black); }  /* 17,78 */
.silva-tier h3 { color: inherit; }
.silva-tier p  { color: inherit; }

/* --------------------------------------------------------------------------
   FAQ — natiivne <details>, ei vaja JavaScripti (§8)
   -------------------------------------------------------------------------- */
.silva-faq { border-top: 1px solid var(--silva-border-soft); }
.silva-faq__item { border-bottom: 1px solid var(--silva-border-soft); }
.silva-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-4) 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.silva-faq__q::-webkit-details-marker { display: none; }
.silva-faq__q::after {
  content: '+';
  font-size: 1.5em;
  line-height: 1;
  color: var(--silva-green-600);
}
.silva-faq__item[open] .silva-faq__q::after { content: '\2212'; }
.silva-faq__a { padding-bottom: var(--sp-4); }

/* --------------------------------------------------------------------------
   Vahelehed (SecurityBlock). Ilma JS-ita: kõik paneelid nähtavad,
   pealkirjadega. JS lisab vahelehe-käitumise progressiivselt.
   -------------------------------------------------------------------------- */
.silva-tabs__panel + .silva-tabs__panel { margin-top: var(--sp-8); }

/* --------------------------------------------------------------------------
   Päis ja jalus
   -------------------------------------------------------------------------- */
.silva-header {
  background: var(--surface);
  border-bottom: 1px solid var(--header-rule);
  position: sticky;
  top: 0;
  z-index: 10;
}
.silva-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-block: var(--sp-4);
}
.silva-logo {
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: var(--ls-brand);
  text-transform: uppercase;              /* CSS-iga, mitte lähtetekstis */
  color: var(--header-text);
  text-decoration: none;
  min-width: 120px;                       /* §6 miinimumlaius */
}
.silva-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  list-style: none;
  margin: 0; padding: 0;
}
.silva-nav li { margin: 0; }
.silva-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--header-text);
  text-decoration: none;
  font-weight: 600;
}
.silva-nav a:hover,
.silva-nav .current-menu-item > a { text-decoration: underline; }

.silva-header__actions { display: flex; gap: var(--sp-3); align-items: center; }

.silva-footer {
  background: var(--silva-green-900);
  color: var(--silva-white);
  padding-block: var(--sp-16) var(--sp-8);
}
.silva-footer a { color: var(--silva-yellow); }        /* 9,97 */
.silva-footer h2, .silva-footer h3 { color: var(--silva-white); }
.silva-footer__cols {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.silva-footer__legal {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--silva-green-400);        /* 3,48 vs #134021 */
  font-size: var(--fs-body-sm);
  color: var(--silva-green-100);                       /* 9,28 */
}
.silva-footer__legal p { max-width: 90ch; color: var(--silva-green-100); }

/* ==========================================================================
   Responsive. WCAG 1.4.10: sisu peab mahtuma 320px laiusele ilma
   horisontaalse kerimiseta. See on ühtlasi 1.4.4 (200% suurendus) —
   400% suurendus 1280px ekraanil ongi 320px laiune vaateava.
   ========================================================================== */

@media (max-width: 900px) {
  .silva-header__inner { flex-wrap: wrap; row-gap: var(--sp-4); }
  .silva-nav { order: 3; width: 100%; }
  .silva-nav ul { gap: var(--sp-4); }
  .silva-section { padding-block: var(--sp-16); }
}

@media (max-width: 560px) {
  /* Logo omal real, nav teisel, nupud kolmandal täislaiuses —
     ainus paigutus, mis 320px sisse mahub ilma teksti kärpimata. */
  .silva-header__inner { justify-content: flex-start; }
  .silva-header__actions { order: 4; width: 100%; }
  .silva-header__actions .silva-btn { flex: 1 1 auto; }

  .silva-cta-group__actions { flex-direction: column; align-items: stretch; }
  .silva-cta-group__actions .silva-btn { width: 100%; }
  .silva-textlink { justify-content: center; }

  .silva-trustbar__list { gap: var(--sp-2); }
  .silva-section { padding-block: var(--sp-12); }
}

/* ==========================================================================
   Navigatsioon — menüünupp ja paremalt avanev paneel
   ========================================================================== */

/* Nupp on peidus, kuni nav.js on lisanud <html>-le klassi .silva-js.
   Nuppu, mis ilma JavaScriptita midagi ei tee, ei näidata kunagi. */
.silva-nav-toggle { display: none; }

.silva-js .silva-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;          /* 2.5.8 soovituslik 44x44 */
  padding: 0;
  background: transparent;
  border: 1px solid var(--header-text);
  border-radius: var(--radius-sm);
  color: var(--header-text);
  cursor: pointer;
}

.silva-nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.silva-nav-toggle__bars span {
  display: block;
  height: 2px;
  background: currentColor;           /* piir ja triibud 11,78 valgel */
  border-radius: 2px;
}

/* Töölaual: nav reas, nuppu ei ole. Allpool: nupp, nav paneelis.
   1080px on valitud nii, et logo + 4 nav-elementi + 2 nuppu mahuksid
   ÜHELE reale ilma murdumiseta — kahele reale minek on see, mida
   see lahendus välistab. */
@media (max-width: 1079px) {
  .silva-nav--inline { display: none; }
  .silva-header__actions { display: none; }
}
@media (min-width: 1080px) {
  .silva-js .silva-nav-toggle { display: none; }
}

/* Paneel.

   See rida on kohustuslik: .silva-nav-panel { display: flex } võidab
   spetsiifikuselt brauseri [hidden] { display: none } reegli üle. Ilma
   selleta jääb suletud paneel DOM-i "nähtavaks" — lingid on Tabiga
   fokuseeritavad ja ekraanilugejale loetavad, kuigi ekraanil neid ei ole.
   Klaviatuurikasutaja kukuks nähtamatusse menüüsse. */
.silva-nav-panel[hidden] { display: none; }

.silva-nav-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .5);
  display: flex;
  justify-content: flex-end;          /* avaneb PAREMALT */
}

.silva-nav-panel__sheet {
  width: min(360px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: var(--sp-6);
  background: var(--silva-green-900);
  color: var(--silva-white);          /* 11,78 */
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  transform: translateX(100%);
  transition: transform 200ms ease;
}

.silva-nav-open .silva-nav-panel__sheet { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .silva-nav-panel__sheet { transition: none; }
}

.silva-nav-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.silva-nav-panel__head .silva-logo { color: var(--silva-white); }

.silva-nav-panel__close {
  width: 48px; height: 48px;
  font-size: 1.75rem;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--silva-yellow);   /* 9,97 tumerohelisel — 1.4.11 ✅ */
  border-radius: var(--radius-sm);
  color: var(--silva-yellow);
  cursor: pointer;
}

.silva-nav--panel ul { flex-direction: column; gap: var(--sp-2); align-items: stretch; }
.silva-nav--panel a {
  display: block;
  padding: var(--sp-3) 0;
  font-size: var(--fs-h3);
  color: var(--silva-white);               /* 11,78 */
  border-bottom: 1px solid var(--silva-green-400);
}

.silva-nav-panel__actions { display: grid; gap: var(--sp-3); margin-top: auto; }
.silva-nav-panel__actions .silva-btn { width: 100%; }

/* Fookus paneelis on kollane, mitte tumeroheline (pind vahetus) */
.silva-nav-panel :focus-visible { outline-color: var(--silva-focus-dark); }

/* Leht ei keri, kui paneel on lahti */
body.silva-nav-open { overflow: hidden; }

/* ==========================================================================
   Ühtlased ruudustikud. 6 elementi 3 veerus = 3 + 3, mitte 4 + 2.
   Ragged teine rida on see, mille see klass ära kaotab.
   ========================================================================== */
.silva-grid--3 { grid-template-columns: repeat(3, 1fr); }
.silva-grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1000px) {
  .silva-grid--3 { grid-template-columns: repeat(2, 1fr); }   /* 3 × 2 */
}
@media (max-width: 640px) {
  .silva-grid--3,
  .silva-grid--2 { grid-template-columns: 1fr; }
}

/* Tegevusliinid — nummerdatud, joonega eraldatud, ilma kastita.
   Loeb sisukorrana, mitte kaardihunnikuna. */
.silva-op {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--silva-green-400);   /* 3,38 valgel — 1.4.11 ✅ */
}
.silva-op__image {
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--silva-green-50);   /* laadimise ajal, mitte tühi valge auk */
}
.silva-op__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.silva-op__index {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-brand);
  color: var(--silva-olive-700);        /* 4,88 valgel — kollane identiteet AA-vastavalt */
  margin-bottom: var(--sp-2);
}
.silva-section--dark .silva-op { border-top-color: var(--silva-yellow); }
.silva-section--dark .silva-op__index { color: var(--silva-yellow); }   /* 9,97 */

/* "Miks Silvaland" — kergem kui tegevusliinid, et kaks 3×2 ruudustikku
   järjest ei näeks identsed välja. */
.silva-reason {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--silva-border);      /* 6,06 valgel */
}
.silva-reason h3 { font-size: var(--fs-body); margin-bottom: var(--sp-2); }
.silva-reason p  { font-size: var(--fs-body-sm); color: var(--text-2); }

/* ==========================================================================
   Video — fassaad, mis ei tee lehe laadimisel ühtegi päringut YouTube'i
   ========================================================================== */
.silva-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--silva-green-900);   /* plakati puudumisel ühtlane pind */
  border: 1px solid var(--border);
}
.silva-video__poster { position: absolute; inset: 0; }
.silva-video__poster img { width: 100%; height: 100%; object-fit: cover; }

/* Tume ülekate plakatil — sama põhjus mis heros: teksti kontrast ei tohi
   sõltuda sellest, milline pilt üles laaditakse. */
.silva-video__poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,64,33,.25) 0%, rgba(19,64,33,.72) 100%);
}

.silva-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-6);
  background: transparent;
  border: 0;
  color: var(--silva-white);            /* 11,78 ülekatte peal */
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.silva-video__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--silva-yellow);
  color: var(--silva-black);            /* 17,78 kollasel */
  font-size: 1.5rem;
  padding-left: 4px;                    /* kolmnurk optiliselt keskele */
}
.silva-video.is-playing { border-color: transparent; }
.silva-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Sisulehed — page.php ühine päis ja tekstiveerg
   ========================================================================== */
.silva-page-header {
  position: relative;
  isolation: isolate;
  background: var(--silva-green-900);     /* fotota varuvariant — juba AA */
  color: var(--silva-white);
  padding-block: var(--sp-16);
}
.silva-page-header h1 { color: var(--silva-white); font-size: var(--fs-h2); }
.silva-page-header p  { color: var(--silva-green-100); max-width: 60ch; }

/* Esiletõstetud pilt (page.php: has_post_thumbnail). Sama muster mis
   .silva-hero__media — kohustuslik ülekate, mis EI SÕLTU pildi sisust. */
.silva-page-header__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.silva-page-header__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.silva-page-header__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,64,33,.35) 0%, rgba(19,64,33,.78) 100%);
}

/* Lõpu-CTA taustapilt (front-page.php: silva_closing_image). Sama muster
   mis hero ja page-header — kohustuslik ülekate, ei sõltu pildi sisust. */
.silva-closing {
  position: relative;
  isolation: isolate;
}
.silva-closing__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.silva-closing__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.silva-closing__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,64,33,.7) 0%, rgba(19,64,33,.9) 100%);
}

/* Jooksva teksti veerg. 1.4.12: ei ühtegi fikseeritud kõrgust. */
.silva-prose > * + * { margin-top: var(--sp-4); }
.silva-prose h2 { margin-top: var(--sp-12); }
.silva-prose h3 { margin-top: var(--sp-8); }
.silva-prose ul, .silva-prose ol { padding-left: var(--sp-6); }
.silva-prose img { border-radius: var(--radius-md); }
.silva-prose blockquote {
  margin: var(--sp-8) 0;
  padding-left: var(--sp-6);
  border-left: 4px solid var(--silva-green-400);
  color: var(--text-2);
}
.silva-prose table { width: 100%; border-collapse: collapse; }
.silva-prose th, .silva-prose td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--silva-border-soft);
  text-align: left;
}
/* Lai tabel keriks lehe üle serva — keerab omaenda konteineris (1.4.10) */
.silva-prose .silva-table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Sisulehe paigutus + sisukord. page.php ehitab .has-toc ainult siis, kui
   sisus on vähemalt kaks H2/H3-t (inc/template-tags.php, silva_content_with_toc).
   Ilma pealkirjadeta lehel jääb üks tekstiveerg, ilma tühja külgribata.
   -------------------------------------------------------------------------- */
.silva-page-layout {
  width: min(100% - var(--sp-8), var(--wrap-content));
  margin-inline: auto;
}
.silva-page-layout.has-toc {
  width: min(100% - var(--sp-8), 1080px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: start;
  gap: var(--sp-12);
}

.silva-toc {
  position: sticky;
  top: var(--sp-8);
}
.silva-toc__label {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-body-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-brand);
  color: var(--text-2);
}
.silva-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--silva-border-soft);
}
.silva-toc li { margin: 0; }
.silva-toc li.is-sub a { padding-left: var(--sp-8); }
.silva-toc a {
  display: block;
  margin-left: -2px;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  border-left: 2px solid transparent;
  color: var(--text-2);
  font-size: var(--fs-body-sm);
  text-decoration: none;
}
.silva-toc a:hover,
.silva-toc a:focus-visible {
  color: var(--silva-green-800);
  border-left-color: var(--silva-green-600);
}
/* Aktiivne lõik kerimisel (assets/js/toc.js). aria-current, mitte ainult
   klass — nii saab ekraanilugeja sellest teada, mitte ainult silmaga
   nägija (1.3.1). Paksem kiri on värvile lisaks teine vihje (1.4.1). */
.silva-toc a[aria-current="true"] {
  color: var(--silva-green-800);
  font-weight: 700;
  border-left-color: var(--silva-green-600);
}

/* Kitsal ekraanil ei ole ruumi püsivaks külgribaks — sisukord tõuseb sisu
   ette, kokkusurutult, ja lakkab olemast "kaasa scrolliv" (1.4.10). */
@media (max-width: 900px) {
  .silva-page-layout.has-toc { grid-template-columns: 1fr; }
  .silva-toc {
    position: static;
    order: -1;
    padding: var(--sp-4) var(--sp-6);
    border: 1px solid var(--silva-border-soft);
    border-radius: var(--radius-md);
  }
  .silva-toc ol { border-left: 0; }
  .silva-toc a { padding-left: 0; }
  .silva-toc li.is-sub a { padding-left: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   Custom Gutenberg plokid (inc/blocks.php) — kliendi enda valik, mida
   sisulehele lisada. Kõik kolm kasutavad ainult olemasolevaid tokeneid.
   -------------------------------------------------------------------------- */
.silva-callout {
  margin: var(--sp-8) 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  border-left: 4px solid var(--silva-green-400);
  border-radius: var(--radius-md);
  background: var(--silva-green-50);
  color: var(--silva-green-900);
  font-size: var(--fs-h3);
}
.silva-callout__cite {
  display: block;
  margin-top: var(--sp-3);
  font-style: normal;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-2);
}

.silva-block-facts { margin: var(--sp-8) 0; }

.silva-block-cta {
  margin: var(--sp-8) 0;
  padding: var(--sp-8);
}
.silva-block-cta h3 { margin: 0 0 var(--sp-2); }
.silva-block-cta p { margin: 0 0 var(--sp-4); max-width: 60ch; }

/* KKK-akordion. summary saab ise fookuse ja avaneb <details>-i enda
   käitumisega — ilma ühegi JS-realta. */
.silva-block-faq { margin: var(--sp-8) 0; }
.silva-block-faq__title { margin-bottom: var(--sp-2); }
.silva-block-faq__item {
  border-bottom: 1px solid var(--silva-border-soft);
}
.silva-block-faq__item:first-of-type { border-top: 1px solid var(--silva-border-soft); }
.silva-block-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.silva-block-faq__item summary::-webkit-details-marker { display: none; }
.silva-block-faq__item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--silva-green-600);            /* 5,30 valgel — AA suur tekst */
}
.silva-block-faq__item[open] summary::after { content: '\2212'; }  /* miinusmärk */
.silva-block-faq__item summary:focus-visible {
  outline: 2px solid var(--silva-focus-light);
  outline-offset: 2px;
}
.silva-block-faq__item p { margin: 0 0 var(--sp-4); color: var(--text-2); max-width: 68ch; }

/* Info/hoiatuspaneel. --warning aktsent on lisainfo, mitte ainus vihje —
   pealkiri/tekst kannab tähenduse (1.4.1). */
.silva-panel {
  margin: var(--sp-8) 0;
  padding: var(--sp-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--silva-border-soft);
  border-left: 4px solid var(--silva-green-400);
  background: var(--surface-raised);
}
.silva-panel h3 { margin: 0 0 var(--sp-2); }
.silva-panel p { margin: 0; max-width: 60ch; color: var(--text-2); }
.silva-panel--warning { border-left-color: var(--silva-warning); }

/* Pilt + tekst. Kaks veergu; --right pöörab ainult visuaalse järjekorra
   (order), DOM-järjekord jääb loetuna samaks (1.3.2). */
.silva-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sp-8);
  margin: var(--sp-8) 0;
}
.silva-media-text__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.silva-media-text--right .silva-media-text__media { order: 2; }
.silva-media-text__body h3 { margin: 0 0 var(--sp-2); }
.silva-media-text__body p { margin: 0; color: var(--text-2); }
@media (max-width: 700px) {
  .silva-media-text { grid-template-columns: 1fr; }
  .silva-media-text--right .silva-media-text__media { order: 0; }
}

.silva-block-steps { margin: var(--sp-8) 0; }
.silva-block-steps > h3 { margin-bottom: var(--sp-4); }

.silva-block-file { margin: var(--sp-6) 0; }
.silva-block-file__meta { font-weight: 400; opacity: .85; }

.silva-block-team,
.silva-block-compare { margin: var(--sp-8) 0; }

/* ==========================================================================
   Meeskond
   ========================================================================== */
.silva-person { text-align: left; }
.silva-person__photo {
  aspect-ratio: 4 / 5;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--silva-green-100);    /* fotota: ühtlane pind, mitte tühi auk */
  display: grid;
  place-items: center;
}
.silva-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.silva-person__initials {
  font-size: var(--fs-h2);
  font-weight: 300;
  letter-spacing: var(--ls-brand);
  color: var(--silva-green-900);         /* 9,28 green-100 peal */
}
.silva-person h3 { margin-bottom: var(--sp-1); font-size: var(--fs-h3); }
.silva-person__role {
  color: var(--text-2);                  /* 9,24 valgel */
  font-size: var(--fs-body-sm);
  margin-bottom: var(--sp-2);
}

/* Alammenüü paneelis — pesastatud nimekiri, mitte rippmenüü.
   Ei vaja JavaScripti ega hover'it, töötab puutega. */
.silva-nav--panel .sub-menu {
  list-style: none;
  margin: 0 0 var(--sp-2);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--silva-green-400);
}
.silva-nav--panel .sub-menu a {
  font-size: var(--fs-body);
  font-weight: 400;
  border-bottom: 0;
  padding: var(--sp-2) 0;
  color: var(--silva-green-100);        /* 9,28 tumerohelisel */
}

/* ==========================================================================
   Töölaua rippmenüü (page.md §4.1)
   ========================================================================== */

.silva-nav--inline > ul > li { position: relative; }

.silva-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 44px;                    /* 2.5.8 — koos lingiga üks sihtmärk */
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--header-text);
  cursor: pointer;
}

.silva-nav__chevron {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;   /* 11,78 valgel — 1.4.11 ✅ */
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.silva-nav__toggle[aria-expanded="true"] .silva-nav__chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Paneel. Vaikimisi peidus.
   NB: display:none, mitte visibility — muidu jäävad lingid Tab-järjekorda
   ka suletuna. Sama viga, mis navigatsioonipaneelil juba korra oli. */
.silva-nav--inline .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 240px;
  margin: 0;
  padding: var(--sp-2);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);       /* 6,06 valgel */
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.silva-nav--inline > ul > li:hover > .sub-menu,
.silva-nav--inline > ul > li.is-open > .sub-menu { display: block; }

/* Klaviatuuri varulahendus AINULT siis, kui JavaScripti ei ole.
   JS-iga peab see maas olema: Esc viib fookuse nupule tagasi, nupp on
   <li> sees, seega :focus-within hoiaks menüü lahti ja Esc näiks
   mitte midagi tegevat. Siin võitlesid kaks lahendust teineteise vastu. */
html:not(.silva-js) .silva-nav--inline > ul > li:focus-within > .sub-menu { display: block; }

.silva-nav--inline .sub-menu li { margin: 0; }
.silva-nav--inline .sub-menu a {
  display: block;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  font-weight: 400;
  color: var(--text);                    /* 18,88 valgel */
  text-decoration: none;
}
.silva-nav--inline .sub-menu a:hover {
  background: var(--silva-green-50);
  text-decoration: underline;
}

/* Vanemlink ja nupp loevad ühe elemendina */
.silva-nav--inline > ul > li.menu-item-has-children > a { padding-right: var(--sp-1); }