/*
Theme Name: Mummodisko
Theme URI: https://www.mummodisko.fi/
Author: Kuvajälki / Ville Tarpila
Description: Mummodisko ry:n sivuston teema. Ilme on otettu yhdistyksen
  omasta julistepohjasta. Suunniteltu luettavaksi puhelimella ja
  heikentyneellä näöllä: 21 px leipäteksti, lyhyet rivit, isot painikkeet.
Version: 1.0.202610191328
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mummodisko
*/

  /* ------------------------------------------------------------------
     VERSIO 2, 16.10.2026.

     Suunnitteluperiaate: sivustoa luetaan usein puhelimella ja
     heikentyneella naolla. Siksi yksi asia kerrallaan, 21 px
     leipateksti, lyhyet rivit ja isot painikkeet.

     Mita versiosta 1 poistettiin ja miksi:
       - korttiruudukot: kolme asiaa rinnakkain pakottaa pienen tekstin
       - lukurivi (2017 / Satoja / Tuhansia / 700+): kaksi niista ei ole
         lukuja, eli muoto ilman sisaltoa
       - toistuva tunnuslausepalkki neljassa kohdassa
       - taustaliukumat: pelkkaa koristetta
       - versaaliotsikot leipatekstin ylla: versaali on hitaampi lukea
     ------------------------------------------------------------------ */
  :root {
    /* Varit on otettu yhdistyksen omasta julistepohjasta. Vaalea pohja
       19.10.2026: leipateksti tummana vaalealla, tumma tausta
       otsikkoalueille ja nayttaville nostoille.

       Kaksi aksenttisavya, koska sama vari ei toimi molemmilla
       pohjilla. Mitatut WCAG-kontrastit 19.10.2026:
         teksti vaalealla      16,65:1  AAA
         aksentti vaalealla     6,83:1  AA   (#FF4D6D olisi 2,81)
         lampo vaalealla        6,30:1  AA   (#F2B441 olisi 1,62)
         himmea vaalealla       7,00:1  AAA
         vaalea tummalla       16,65:1  AAA
         lammin tummalla       10,31:1  AAA */
    --pohja: #F6EFE4;          /* sivun tausta */
    --teksti: #1A0824;         /* leipäteksti */
    --tumma: #1A0824;          /* otsikkoalueet ja nostot */
    --paneeli: #2A1038;        /* tumma paneeli */
    --korostus: #FF4D6D;       /* brändipinkki, vain tummalla tai pintana */
    --aksentti: #A3103A;       /* pinkki tekstinä vaalealla */
    --lammin: #F2B441;         /* brändikelta, vain tummalla */
    --lampo: #7A4E00;          /* kelta tekstinä vaalealla */
    --vaalea: #F6EFE4;
    --himmea: #5C4A66;         /* apuselite vaalealla */
    --himmea-tumma: #CBB8D6;   /* apuselite tummalla */
    --reuna: rgba(26,8,36,0.16);
    --reuna-tumma: rgba(246,239,228,0.14);
    color-scheme: light;
  }
  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--pohja);
    color: var(--teksti);
    font-family: Montserrat, ui-sans-serif, -apple-system, sans-serif;
    font-size: 21px;          /* v1 oli 19 */
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
  }

  .ylapalkki { height: 7px; background: var(--korostus); }

  /* ---------------- otsake ---------------- */
  header.ylaosa {
    padding: 1.3rem 20px;
    border-bottom: 1px solid var(--reuna);
    position: sticky; top: env(safe-area-inset-top, 0px);
    background: var(--tumma); color: var(--vaalea); z-index: 30;
    border-bottom-color: var(--reuna-tumma);
  }
  .ylarivi {
    max-width: 62rem; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  /* Logo on kuva eika teksti. Korkeus skaalautuu ruudun mukaan;
     leveys seuraa, koska logo on lahes nelio (496 x 400) eika
     vaakamerkki. */
  .logo { display: inline-flex; line-height: 0; text-decoration: none; }
  .logo img { display: block; height: clamp(54px, 12vw, 86px); width: auto; }

  .valikkonappi {
    appearance: none; font: inherit; font-weight: 700; font-size: 1rem;
    background: none; color: var(--vaalea);
    border: 2px solid var(--himmea-tumma); border-radius: 6px;
    padding: 0.7rem 1.1rem; min-height: 50px; cursor: pointer;
  }
  nav.valikko { max-width: 62rem; margin: 0.9rem auto 0; display: none; }
  nav.valikko.auki { display: block; }
  nav.valikko button {
    display: block; width: 100%; text-align: left;
    appearance: none; font: inherit; font-size: 1.1rem; font-weight: 700;
    background: none; border: 0; border-bottom: 1px solid var(--reuna-tumma);
    color: var(--vaalea); padding: 1.05rem 0.2rem; min-height: 60px; cursor: pointer;
  }
  nav.valikko button[aria-current="page"] { color: var(--lammin); }
  nav.valikko button.tilaa {
    background: var(--lammin); color: var(--tumma);
    border-radius: 6px; text-align: center; margin-top: 1rem; border-bottom: 0;
  }
  @media (min-width: 56rem) {
    .valikkonappi { display: none; }
    nav.valikko { display: block; margin-top: 0.8rem; }
    nav.valikko { display: flex; flex-wrap: wrap; gap: 0.2rem; }
    nav.valikko button {
      width: auto; border-bottom: 3px solid transparent; font-size: 1rem;
      padding: 0.7rem 0.9rem; min-height: 50px;
    }
    nav.valikko button[aria-current="page"] { border-bottom-color: var(--korostus); color: var(--vaalea); }
    nav.valikko button.tilaa { margin-top: 0; padding: 0.7rem 1.2rem; }
  }

  /* ---------------- rakenne ---------------- */
  main { max-width: 62rem; margin: 0 auto; padding: 0 20px 5rem; }
  .sivu[hidden] { display: none !important; }

  section.osa { padding-block: 3.2rem; border-bottom: 1px solid var(--reuna); }
  section.osa:last-of-type { border-bottom: 0; }

  h1 {
    font-weight: 900; font-size: clamp(2.1rem, 7.5vw, 3.6rem);
    line-height: 1.12; margin: 0 0 1.3rem; max-width: 20ch;
    overflow-wrap: break-word;
  }
  h2 {
    font-weight: 900; font-size: clamp(1.5rem, 5vw, 2.3rem);
    line-height: 1.2; margin: 0 0 1.1rem; max-width: 24ch;
    overflow-wrap: break-word;
  }
  p { margin: 0 0 1.4rem; max-width: 34rem; }   /* lyhyet rivit */
  .iso { font-size: clamp(1.2rem, 3.6vw, 1.5rem); font-weight: 600; }

  /* ---------------- kuvapaikka ---------------- */
  .kuva {
    margin: 0 -20px 2.2rem; background: var(--paneeli);
    border-top: 1px solid var(--reuna); border-bottom: 1px solid var(--reuna);
    aspect-ratio: 3 / 2; display: grid; place-items: center; padding: 1.5rem;
    overflow: hidden;
  }
  /* Oikea valokuva täyttää kuvapaikan; paikkamerkkiteksti käyttää
     samaa laatikkoa. */
  .kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Kuvapaikan sisennys on paikkamerkkitekstia varten. Kun laatikossa
     on oikea valokuva, sisennys nakyy paneelin varisena kehyksena
     kuvan ymparilla (havaittu tuotannosta 19.10.2026). */
  .kuva:has(img) { padding: 0; }
  .kuva figcaption, .kuvateksti {
    margin: -1.6rem 0 2.2rem; color: var(--himmea);
    font-size: 0.95rem; line-height: 1.45; max-width: 34rem;
  }
  .kuva p {
    margin: 0; max-width: 28rem; text-align: center; color: var(--himmea-tumma);
    font-size: 0.95rem; line-height: 1.5;
  }
  .kuva strong { display: block; color: var(--lammin); font-size: 1.05rem; margin-bottom: 0.4rem; }
  @media (min-width: 56rem) { .kuva { margin-inline: 0; border-radius: 8px; border: 1px solid var(--reuna); } }

  /* ---------------- napit ---------------- */
  .nappi {
    display: inline-block; font: inherit; font-weight: 700; font-size: 1.15rem;
    border: 3px solid transparent; border-radius: 6px; cursor: pointer;
    padding: 1.1rem 1.6rem; min-height: 62px; text-decoration: none;
  }
  .nappi-paa { background: var(--aksentti); color: #fff; }
  .nappi-toinen { background: none; color: var(--teksti); border-color: var(--teksti); }
  .napit { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

  /* ---------------- keikat ---------------- */
  .keikka {
    border-top: 2px solid var(--reuna); padding: 1.8rem 0;
  }
  .keikka:last-child { border-bottom: 2px solid var(--reuna); }
  .keikka .pvm {
    font-weight: 900; font-size: clamp(2.2rem, 9vw, 3.1rem); line-height: 1;
    color: var(--aksentti); font-variant-numeric: tabular-nums; margin: 0 0 0.2rem;
  }
  .keikka .viikonpaiva {
    font-weight: 700; color: var(--lampo); margin: 0 0 0.9rem;
    font-size: 1.05rem;
  }
  .keikka .paikka {
    font-weight: 900; font-size: clamp(1.35rem, 4.6vw, 1.8rem);
    line-height: 1.25; margin: 0 0 0.5rem; max-width: none;
  }
  .keikka .rivi { margin: 0 0 0.4rem; max-width: none; }
  .keikka .vapaa {
    display: inline-block; margin-top: 0.8rem;
    background: var(--lammin); color: var(--tumma);
    font-weight: 700; font-size: 1rem; padding: 0.5em 0.9em; border-radius: 5px;
  }

  /* ---------------- lainaukset ---------------- */
  blockquote {
    margin: 0 0 2.6rem; padding: 0 0 0 1.4rem;
    border-left: 5px solid var(--aksentti);
    font-size: clamp(1.15rem, 3.4vw, 1.4rem); line-height: 1.6;
  }
  blockquote p { margin: 0; max-width: 32rem; }

  /* ---------------- ihmiset ---------------- */
  .ihminen { border-top: 2px solid var(--reuna); padding: 2rem 0; }
  .ihminen .nimi { font-weight: 900; font-size: 1.5rem; margin: 0 0 0.2rem; max-width: none; }
  .ihminen .rooli { color: var(--lampo); font-weight: 700; margin: 0 0 1rem; max-width: none; }
  .ihminen .kuva { aspect-ratio: 1; max-width: 18rem; margin: 0 0 1.2rem; border-radius: 8px; border: 1px solid var(--reuna); }

  /* ---------------- yhteys ---------------- */
  .yhteys { border-top: 2px solid var(--reuna); padding: 1.8rem 0; }
  .yhteys .nimike { color: var(--lampo); font-weight: 700; margin: 0 0 0.4rem; max-width: none; }
  .yhteys .arvo {
    font-weight: 900; font-size: clamp(1.25rem, 4.4vw, 1.7rem);
    line-height: 1.35; margin: 0 0 0.9rem; max-width: none;
    overflow-wrap: anywhere; user-select: all;
  }
  .kopio {
    appearance: none; font: inherit; font-weight: 700; font-size: 1rem;
    background: none; border: 2px solid var(--teksti); color: var(--teksti);
    border-radius: 6px; padding: 0.7rem 1.1rem; min-height: 50px; cursor: pointer;
  }

  /* Valkoinen tummalla pinkillä = 6,83:1. Aiempi vaalea kirkkaalla
     pinkillä oli 2,81:1 eli alle vaatimuksen (mitattu 19.10.2026). */
  .lopetus {
    background: var(--aksentti); color: #fff;
    margin: 3rem -20px 0; padding: 2.6rem 20px; text-align: center;
  }
  .lopetus p {
    margin: 0 auto; max-width: 24ch; font-weight: 900;
    font-size: clamp(1.4rem, 5vw, 2.1rem); line-height: 1.25;
  }

  /* ---------------- paketit ---------------- */
  .paketti { border-top: 2px solid var(--reuna); padding: 1.4rem 0; }
  .paketti:last-of-type { border-bottom: 2px solid var(--reuna); margin-bottom: 1.8rem; }
  .paketti .nimi {
    font-weight: 900; font-size: clamp(1.3rem, 4.4vw, 1.7rem);
    margin: 0 0 0.3rem; max-width: none; color: var(--aksentti);
  }
  .paketti .selite { margin: 0; }

  /* ---------------- lomake ---------------- */
  .lomake { margin-top: 1rem; }
  .lomake fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
  .lomake legend, .lomake label.nimike {
    display: block; font-weight: 700; font-size: 1.05rem;
    margin: 0 0 0.5rem; padding: 0;
  }
  .lomake .kentta { margin: 0 0 1.6rem; max-width: 34rem; }
  .lomake .apu { color: var(--himmea); font-size: 0.95rem; margin: 0.3rem 0 0; }
  .lomake input[type=text], .lomake input[type=email], .lomake input[type=tel],
  .lomake textarea {
    width: 100%; font: inherit; font-size: 1.05rem;
    padding: 0.85rem 0.9rem; min-height: 56px;
    border: 2px solid var(--teksti); border-radius: 6px;
    background: #fff; color: var(--teksti);
  }
  .lomake textarea { min-height: 7rem; line-height: 1.6; }
  .lomake input:focus-visible, .lomake textarea:focus-visible {
    outline: 3px solid var(--aksentti); outline-offset: 2px;
  }
  /* Valinnat ovat isoja, koska niitä klikataan sormella ja usein
     heikentyneellä näöllä: koko rivi on klikattava. */
  .lomake .valinta {
    display: flex; align-items: flex-start; gap: 0.8rem;
    padding: 0.85rem 0.9rem; margin: 0 0 0.6rem; max-width: 34rem;
    border: 2px solid var(--reuna); border-radius: 6px; cursor: pointer;
    background: #fff;
  }
  .lomake .valinta:hover { border-color: var(--teksti); }
  .lomake .valinta input { width: 26px; height: 26px; margin: 0.2rem 0 0; flex: 0 0 26px; accent-color: var(--aksentti); }
  .lomake .valinta span { font-weight: 600; }
  .lomake .hunaja { position: absolute; left: -9999px; }
  .lomake .laheta { margin-top: 0.6rem; }
  #kiitos { display: none; }
  #kiitos.nakyy { display: block; }

  /* Tumma osio: otsikkoalueet ja nayttavat nostot.

     Tummuus ulottuu RUUDUN REUNAAN asti, ei sisaltopalstan reunaan.
     Pyoristetty laatikko vaalean sisalla luki irrallisena korttina;
     nyt hero jatkaa otsikkopalkkia yhtena tummana alueena.

     Tekniikka: main on 62rem levyinen, joten tumma osio venytetaan
     ruudun levyiseksi negatiivisella marginaalilla ja sisennys
     palautetaan padding-arvolla. */
  .osa.tumma {
    background: var(--tumma); color: var(--vaalea);
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50% + 20px);
    padding-block: 3.2rem 3.6rem;
    border-bottom: 0;
  }
  /* Heti otsikkopalkin jälkeen tuleva tumma osio liitetään siihen
     kiinni, jotta sauma ei näy. */
  .sivu > .osa.tumma:first-child { margin-top: 0; padding-top: 2.6rem; }
  .osa.tumma .iso, .osa.tumma p { color: var(--vaalea); }
  .osa.tumma .nappi-toinen { color: var(--vaalea); border-color: var(--himmea-tumma); }

  footer { border-top: 1px solid var(--reuna); padding: 2.4rem 20px 3rem; }
  footer .sisa { max-width: 62rem; margin: 0 auto; }
  footer p { color: var(--himmea); margin: 0 0 0.5rem; font-size: 1rem; }
  footer a { color: var(--teksti); }


/* ---------------- WordPressin omat ---------------- */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
body.admin-bar header.ylaosa { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar header.ylaosa { top: 46px; } }

/* valikko tulee WordPressin valikkona, ei painikkeina */
nav.valikko ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 56rem) { nav.valikko ul { display: flex; flex-wrap: wrap; gap: 0.2rem; } }
nav.valikko li { margin: 0; }
nav.valikko a {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 1.1rem; font-weight: 700;
  border-bottom: 1px solid var(--reuna);
  color: var(--vaalea); text-decoration: none;
  padding: 1.05rem 0.2rem; min-height: 60px;
}
nav.valikko .current-menu-item > a,
nav.valikko .current_page_item > a { color: var(--lammin); }
nav.valikko li.tilaa > a {
  background: var(--lammin); color: var(--pohja);
  border-radius: 6px; text-align: center; margin-top: 1rem; border-bottom: 0;
}
@media (min-width: 56rem) {
  nav.valikko a {
    width: auto; border-bottom: 3px solid transparent; font-size: 1rem;
    padding: 0.7rem 0.9rem; min-height: 50px;
  }
  nav.valikko .current-menu-item > a,
  nav.valikko .current_page_item > a {
    border-bottom-color: var(--korostus); color: var(--vaalea);
  }
  nav.valikko li.tilaa > a { margin-top: 0; padding: 0.7rem 1.2rem; }
}

/* sisältö tulee sivun contentista, joten .sivu-kääre puuttuu */
.sisalto > :first-child { margin-top: 0; }
.sisalto img { max-width: 100%; height: auto; }
/* Nama kolme riviä olivat tummalta teemalta ja jaivat voimaan
   vaalean pohjan jalkeen: 19.10.2026 404-sivun "Etusivulle"-nappi oli
   vaaleaa tekstia vaalealla eli nakymaton (mitattu tuotannosta,
   color: rgb(246,239,228) taustalla rgb(246,239,228)). Varit tulevat
   nyt .nappi-saannoista, jotka osaavat seka vaalean etta tumman. */
.sisalto a { color: var(--aksentti); }
.sisalto .nappi { text-decoration: none; }
.sisalto .osa.tumma a { color: var(--lammin); }

/* ==================================================================
   YLATUNNISTE YHDELLE RIVILLE TYOPOYDALLA (23.10.2026)

   Mitattu ennen muutosta 961 px ikkunassa: otsake oli 248 px korkea,
   koska logo (86 px), valikko ja tilausnappi olivat kukin omalla
   rivillaan. Valikon linkit ovat yhteensa 1089 px levyiset, eli ne
   eivat mahdu yhdelle riville tuossa ikkunassa alkuperaisella
   koolla. Siksi logoa ja valikon valistysta pienennetaan. Jos tila
   loppuu silti, valikko rivittyy - mutta logo ei enaa vie omaa
   riviaan, joten otsake pysyy matalana.
   ================================================================== */
@media (min-width: 56rem) {
  header.ylaosa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 0.7rem;
  }
  header.ylaosa > .ylarivi {
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
  }
  header.ylaosa .logo img { height: 48px; }
  header.ylaosa > nav.valikko {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    justify-content: flex-end;
    align-items: center;
  }
  nav.valikko ul {
    justify-content: flex-end;
    align-items: center;
    row-gap: 0.3rem;
  }
  nav.valikko a {
    font-size: 0.92rem;
    padding: 0.5rem 0.55rem;
    min-height: 42px;
  }
  nav.valikko li.tilaa > a {
    margin-top: 0;
    margin-left: 0.6rem;
    padding: 0.5rem 0.95rem;
  }
}

/* Tilaa-napin teksti keltaisella pohjalla oli kerman vaalea, eli
   mitattuna noin 1,6:1 ja lukukelvoton. Tumma pohjavari on 10,3:1. */
nav.valikko li.tilaa > a { color: var(--tumma); }

/* Linkkinapit menettivat valkoisen tekstinsa, koska .sisalto a on
   tarkempi valitsin kuin .nappi-paa: punainen nappi luki umpinaisena
   laatikkona ilman tekstia /tulevat-keikat/-sivulla (23.10.2026). */
.sisalto a.nappi-paa { color: #fff; }
.sisalto a.nappi-toinen { color: var(--teksti); }
.osa.tumma a.nappi-toinen { color: var(--vaalea); }

/* Tummassa osiossa .sisalto .osa.tumma a on viela tarkempi, joten
   punaisen napin teksti luki keltaisena punaisella (noin 2,9:1).
   Mitattu etusivulta 23.10.2026. */
.sisalto .osa.tumma a.nappi-paa { color: #fff; }
.sisalto .osa.tumma a.nappi-toinen { color: var(--vaalea); }

/* ------------------------------------------------------------------
   LUETTAVUUS 23.10.2026

   Mitattu 961 px ikkunassa: lomakkeen opastetekstit ja kuvatekstit
   olivat 15,2 px, kun leipateksti on 21 px. Opasteteksti on ohje
   jota lukija tarvitsee tayttaakseen lomakkeen, joten se ei saa olla
   sivuston pienin teksti. Yhteystietojen some-linkit olivat 26 px
   korkeita kosketuskohteita; 44 px on pienin suositeltu.
   ------------------------------------------------------------------ */
.lomake .apu { font-size: 1.125rem; }
.kuva figcaption, .kuvateksti { font-size: 1.05rem; }
.sisalto .osa a[href*="facebook"],
.sisalto .osa a[href*="instagram"] {
  display: inline-block;
  min-height: 44px;
  padding: 0.45rem 0;
  font-weight: 700;
}