/* ETUSIVU B (2.214.0). Vain public/valinta.html (body.etusivu).

   Oma tiedostonsa eikä tyyli.css:n osa: etusivu ladataan kirjautumatta
   kerran, kirjautuneet eivät näe sitä koskaan. Siksi sen säännöt eivät
   kulje jokaisen sivun mukana.

   Värit ovat palvelun omat (tyyli.css): pohja #28362E, vihreä #26562e,
   oranssi #f3a45c (--oma-oranssi, body.oma), vaalea vihreä #9cc7a4. */

body.etusivu{height:auto;min-height:100%;
  --et-pohja:#28362E; --et-vihrea:#26562e; --et-vaalea:#9cc7a4;
  --et-raja:#e3d6bb}

/* Tasainen vihreä pohja (2.215.0, Aleksi: "muutetaan kuviotausta tasaisen
   vihreäksi niin kuin vanhassa kirjaudu sivulla"). Pohja on body:n oma
   tausta tyyli.css:stä (--bg #28362E); 2.214.0:n kuviokartta poistui.

   hidden-määre voittaa aina: .btn ja lomakkeet asettavat oman display-
   arvonsa, joka muuten jyräisi selaimen oman [hidden]-säännön. */
body.etusivu [hidden]{display:none!important}

/* Yläpalkki: nimi vasemmalla, kieli ja Usein kysytyt oikealla. */
.et-yla{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 24px}
.et-nimi{font-weight:800;font-size:20px;letter-spacing:-.01em;color:#fff;text-decoration:none}
.et-nimi span{color:var(--et-vaalea)}
.et-yla-oikea{display:flex;align-items:center;gap:10px}
body.etusivu .kielipalkki{position:static}
.et-pilleri{background:rgba(40,54,46,.8);border:1px solid rgba(255,255,255,.2);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:600;color:#fff;text-decoration:none;white-space:nowrap}
.et-pilleri:hover{border-color:rgba(255,255,255,.45)}

.et-paa{flex:1;display:flex;flex-direction:column;align-items:center;padding:24px 16px 8px}

/* Valkoinen kortti. .login-box antaa vaalean pinnan muuttujat (tyyli.css),
   tässä vain koko ja muoto. */
.et-kortti.login-box{max-width:440px;border:0;border-radius:20px;padding:26px;
  box-shadow:0 20px 50px rgba(0,0,0,.35)}
.et-tunnus{text-align:right;font-size:12px;font-style:italic;color:var(--et-vihrea);
  margin:-6px -4px 6px 0;letter-spacing:.01em}
.et-kortti h1{margin:0 0 4px;font-size:24px;letter-spacing:-.015em;text-wrap:balance}
.et-sel{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.5}
.et-kortti label{font-size:13px;font-weight:600;color:var(--ink)}
.et-kortti input:not([type=checkbox]){height:44px;border-radius:10px;font-size:15px;padding:0 12px}
.et-unohtunut{text-align:right;font-size:13px;margin:8px 0 14px}
.et-unohtunut a{color:var(--et-vihrea);font-weight:600}

.et-tietosuoja{font-size:12.5px;color:var(--muted);line-height:1.5;margin:12px 0 14px}
.et-tietosuoja a{color:var(--et-vihrea);font-weight:600}
#formReg .et-kirjaudu{margin-top:2px}

.et-kirjaudu,.et-luo{display:flex;width:100%;height:48px;border-radius:999px;
  font-size:15px;font-weight:700}
.et-kirjaudu{background:var(--oma-oranssi);border-color:var(--oma-oranssi);color:var(--oma-oranssi-teksti)}
.btn.et-luo{margin-top:10px;background:#fff;color:#1d211c;border:1.5px solid var(--et-raja)}
.btn.et-luo:hover{border-color:#cdb98f;filter:none}

.et-maksuton{margin:14px 0 0;text-align:center;font-size:14px;color:rgba(255,255,255,.85);max-width:440px}

/* Kolme hyötyä: pohjaa vaaleampi vihreä laatta ja pieni varjo (2.215.0,
   Aleksin vaihtoehto 2 – tasaisella pohjalla läpikuultavat laatikot eivät
   erottuneet). Vain kortti on valkoinen, jotta kirjautuminen on sivun
   kirkkain kohta. */
.et-hyodyt{list-style:none;margin:40px 0 0;padding:0;width:100%;max-width:1000px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.et-hyodyt li{background:#3a4c41;border:1px solid #4d6355;border-radius:14px;padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.22)}
.et-hyodyt b{display:block;font-size:15px;margin-bottom:4px;color:#fff}
.et-hyodyt span{font-size:13.5px;color:rgba(255,255,255,.75);line-height:1.5}

/* Ammattilaisen sisäänkäynti: pieni ja himmeä (Aleksi: "enemmän piiloon"). */
.et-amm{margin:30px 0 0;font-size:12.5px;color:rgba(255,255,255,.6);text-align:center}
.et-amm a{color:rgba(255,255,255,.78);display:inline-flex;align-items:center;gap:4px;margin-left:4px}
.et-amm .vakanen{width:12px;height:12px}

body.etusivu .alatunniste{border:0;background:transparent}

/* Puhelin: kortti heti nimen alla, lomake näkyy ilman vieritystä. */
@media (max-width:800px){
  .et-yla{padding:14px 16px}
  .et-paa{padding-top:4px}
  .et-kortti.login-box{padding:22px 20px}
  .et-hyodyt{grid-template-columns:1fr;margin-top:26px;max-width:440px}
}
/* Kapea puhelin: nimi, kielivalitsin ja Usein kysytyt mahtuvat samalle
   riville vasta pienemmillä mitoilla (390 px:n ruudulla rivi oli 422 px).
   Alle 360 px:n ruudulla oikea ryhmä rivittyy nimen alle (flex-wrap)
   eikä sivu vieri sivuttain. */
@media (max-width:480px){
  .et-yla{gap:8px}
  .et-yla-oikea{gap:8px}
  .et-nimi{font-size:18px}
  .et-pilleri{padding:6px 10px;font-size:12.5px}
}
@media (max-width:350px){
  .et-nimi{font-size:16px}
}