/* ======================================================================
   Karhulan Kanat — Peltopäivä: perusta
   Runko ja yhteiset osat. Lähde: mockups/peltopaiva/index.html (inline-CSS)
   ja jaettu/jaettu.css lähes sellaisenaan. WordPress-merkinnän vuoksi
   muutetut valitsimet on merkitty kommentilla "WP:". Esittelypalkin
   säännöt eivät kuulu sivustoon.
   ====================================================================== */

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

html{
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
  scroll-behavior:smooth;
}
html.valikko-auki{ overflow:hidden; }

/* WP: ei padding-top:var(--palkki). Mockupin --palkki oli esittelypalkin
   korkeus; WordPressissä se on admin-palkin korkeus, jonka väli tulee
   WordPressiltä (html{margin-top}). Kiinteät elementit käyttävät muuttujaa. */
body{
  margin:0;
  background:var(--tausta);
  color:var(--muste);
  font-family:var(--leipa);
  font-size:var(--t-leipa);
  line-height:1.6;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

p{ margin:0 0 var(--v4); overflow-wrap:break-word; }
p:last-child{ margin-bottom:0; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3{
  font-family:var(--otsikko);
  font-weight:700;
  margin:0;
  line-height:1.08;
  letter-spacing:-.015em;
  text-wrap:balance;
  color:var(--muste);
}
h1{ font-size:var(--t-h1); line-height:1.01; letter-spacing:-.028em; font-variation-settings:"opsz" 144; }
h2{ font-size:var(--t-h2); line-height:1.05; letter-spacing:-.022em; font-variation-settings:"opsz" 110; }
h3{ font-size:var(--t-h3); line-height:1.18; letter-spacing:-.012em; font-variation-settings:"opsz" 40; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--brandi);
  outline-offset:3px;
}
.tumma :focus-visible,
.tumma:focus-visible{
  outline-color:var(--kerma);
}

::selection{ background:var(--nosto); color:var(--muste); }

/* ---------- Apurakenteet ---------- */

.kaista{
  max-width:var(--mitta);
  margin-inline:auto;
  padding-inline:var(--kuja);
}
.osio{ padding-block:clamp(3.25rem, 7.5vw, 6.5rem); }
.osio--tiivis-ala{ padding-bottom:clamp(2.5rem, 5vw, 4rem); }
/* Kiinteä tiivis palkki peittäisi ankkurikohdan ilman tätä. */
section[id]{ scroll-margin-top:calc(var(--palkki) + var(--tiivis-korkeus) + 1.25rem); }

.ohita{
  position:absolute; left:-9999px; top:0;
  background:var(--muste); color:var(--kerma);
  padding:.75rem 1.25rem; z-index:220;
  font-weight:600; text-decoration:none;
}
/* Ilman tätä linkki pysyi ruudun ulkopuolella myös fokusoituna, jolloin
   näppäimistön ensimmäinen Tab katosi joka sivulla näkymättömiin. */
.ohita:focus{ left:0; top:var(--palkki); }

/* Ohita-linkin kohde saa fokuksen ohjelmallisesti (tabindex="-1"), jotta
   ruudunlukijan lukukohta siirtyy sisältöön. Se ei ole toimintoelementti,
   joten globaali fokusrengas piirtäisi kehyksen koko sisältöalueen ympäri. */
#sisalto:focus{ outline:none; }
/* ---------- Typografinen tunnus ---------- */

/* Nimi, sen levyinen 1 px viiva, ja vuosiluku harvennettuna versaalina.
   Ei kuvamerkkiä. Sarakkeen leveys on max-content eli tasan nimen leveys,
   joten viiva ei koskaan jatku nimeä pidemmälle. */
.logo{
  --logo-vari:var(--muste);
  --logo-viiva:var(--muste);
  --logo-hillitty:var(--hillitty);
  display:inline-grid;
  grid-template-columns:max-content;
  color:var(--logo-vari);
  text-decoration:none;
  padding-block:.35rem;
}
.logo__nimi{
  font-family:var(--otsikko); font-weight:700;
  font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);
  line-height:1.02; letter-spacing:-.02em;
  font-variation-settings:"opsz" 144;
  color:var(--logo-vari);
}
.logo__vuosi{
  margin-top:.4rem; padding-top:.34rem;
  border-top:1px solid var(--logo-viiva);
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-mikro); line-height:1.2;
  letter-spacing:.2em;
  font-variant-numeric:tabular-nums;
  color:var(--logo-hillitty);
}
a.logo:hover .logo__nimi{ color:var(--brandi); }

/* Tiivis muoto: nimi ja vuosiluku samalla rivillä, erottimena pystyviiva. */
.logo--tiivis{
  display:inline-flex; align-items:center; gap:.6rem;
  /* Pitää linkin kosketuskohteen 44 px:ssä. */
  padding-block:.75rem;
}
.logo--tiivis .logo__nimi{
  font-size:1.0625rem; line-height:1.25;
  font-variation-settings:"opsz" 60;
}
.logo--tiivis .logo__vuosi{
  margin:0; padding:.2rem 0 .2rem .6rem;
  border-top:0;
  border-inline-start:1px solid var(--logo-viiva);
}

/* ---------- Typografiset perusosat ---------- */

.korva{
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-pieni); letter-spacing:.2em; text-transform:uppercase;
  color:var(--brandi);
  margin:0 0 var(--v4);
}
.korva--vaalea{ color:var(--vaalea-teksti); }

.ingressi{
  font-size:var(--t-ingressi);
  line-height:1.8;
  color:var(--muste);
}
.leipa-hillitty{ color:var(--hillitty); }
.pikkuteksti{ font-size:.875rem; line-height:1.6; color:var(--hillitty); }

/* Osiomerkintä: ohut vaakaviiva ja harvennettu versaalimerkintä */
.osasto{
  display:flex; align-items:baseline;
  border-top:1px solid var(--muste);
  padding-top:var(--v3);
  margin-bottom:clamp(1.75rem, 4vw, 3rem);
}
/* WP: nimi on kappale (mockupissa span), joten sääntö on tarkempi kuin
   osioiden kappalesäännöt (esim. .opas__teksti p). */
.osasto__nimi,
.osasto > .osasto__nimi{
  margin:0;
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-mikro); letter-spacing:.22em; text-transform:uppercase;
  line-height:1.6;
  color:var(--hillitty);
}

/* Epäsymmetrinen otsikkorivi: otsikko leveämpi, ingressi kapeampi */
.otsikkorivi{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--v5) clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}
.otsikkorivi > :last-child{ padding-top:.35rem; }

/* Otsikko vasemmalla, sisältö oikealla */
.parivaljakko{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:var(--v6) clamp(2rem, 6vw, 5.5rem);
  align-items:start;
}
/* Kun vasemmassa palstassa on otsikon lisäksi ingressi, kapea palsta puristaisi
   sen 18 merkin riveiksi. Tälle variantille annetaan luettava mitta. */
.parivaljakko--ingressilla{
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}

@media (max-width:56rem){
  .otsikkorivi,
  .parivaljakko{ grid-template-columns:minmax(0,1fr); }
  .otsikkorivi > :last-child{ padding-top:0; }
}

/* ---------- Painikkeet ja linkit ---------- */

/* WP: painikkeet ovat sisällössä ydinpainikkeita (div.wp-block-button.nappi >
   a.wp-block-button__link). Luokka on kääreessä, tyyli kuuluu linkille, joten
   jokainen sääntö kirjoitetaan kahdelle kohteelle: tavalliselle linkille
   (runko, shortcodet, skriptit) ja ydinpainikkeen linkille. Kääre itse jää
   tavalliseksi lohkoksi (:where(:not(.wp-block-button))). Linkkitasolla kirjoitetaan
   jokainen ominaisuus, jotta ytimen oletukset (#32373c, 9999px, varjo,
   fonttikoko ja pehmusteet) eivät jää voimaan. */

.napit{ display:flex; flex-wrap:wrap; gap:var(--v3); }

.nappi:where(:not(.wp-block-button)),
.wp-block-button.nappi > .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; height:auto; min-height:3rem; padding:.8rem 1.6rem;
  font-family:var(--leipa); font-weight:600; font-size:.9375rem;
  letter-spacing:.03em; text-decoration:none; text-align:center;
  border:1px solid transparent; border-radius:0; box-shadow:none; cursor:pointer;
  word-break:normal;
  transition:background-color 180ms var(--helppo), color 180ms var(--helppo), border-color 180ms var(--helppo);
}
.nappi--taytto:where(:not(.wp-block-button)),
.wp-block-button.nappi--taytto > .wp-block-button__link{ background:var(--brandi); color:#FFFFFF; border-color:transparent; }
.nappi--taytto:where(:not(.wp-block-button)):hover,
.wp-block-button.nappi--taytto > .wp-block-button__link:hover{ background:var(--brandi-tumma); color:#FFFFFF; }
.nappi--viiva:where(:not(.wp-block-button)),
.wp-block-button.nappi--viiva > .wp-block-button__link{ background:transparent; color:var(--muste); border-color:var(--muste); }
.nappi--viiva:where(:not(.wp-block-button)):hover,
.wp-block-button.nappi--viiva > .wp-block-button__link:hover{ background:var(--muste); color:var(--kerma); }
.nappi--kerma:where(:not(.wp-block-button)),
.wp-block-button.nappi--kerma > .wp-block-button__link{ background:var(--kerma); color:var(--korostus-tumma); border-color:transparent; }
.nappi--kerma:where(:not(.wp-block-button)):hover,
.wp-block-button.nappi--kerma > .wp-block-button__link:hover{ background:#FFFFFF; color:var(--korostus-tumma); }
.nappi[disabled]{ opacity:.6; cursor:default; }

.nuoli:where(:not(.wp-block-button)),
.wp-block-button.nuoli > .wp-block-button__link{
  display:inline-flex; align-items:center; gap:.5rem;
  width:auto; height:auto; min-height:2.75rem; padding:.5rem 0;
  font-family:var(--leipa); font-weight:600; font-size:.9375rem; letter-spacing:.03em;
  color:var(--brandi); background:transparent; text-decoration:none; text-align:start;
  border:0; border-bottom:1px solid currentColor; border-radius:0; box-shadow:none;
  word-break:normal;
}
.nuoli:where(:not(.wp-block-button)):hover,
.wp-block-button.nuoli > .wp-block-button__link:hover{ color:var(--brandi-tumma); background:transparent; }
.nuoli span{ transition:transform 180ms var(--helppo); }
.nuoli:hover span{ transform:translateX(4px); }
/* WP: <a>-painike perii rivivälin (1.6) kuten mockupin linkit; ytimen
   painikelinkki ei saa omaa riviväliään. <button> pitää selaimen oman. */
.wp-block-button:is(.nappi, .nuoli) > .wp-block-button__link{ line-height:inherit; }
/* WP: lohkopainikkeen tekstissä ei ole nuolispania, joten nuoli tulee CSS:stä.
   Tyhjä vaihtoehtoinen teksti pitää sen poissa ruudunlukijalta. */
.wp-block-button.nuoli > .wp-block-button__link::after{
  content:"→";
  content:"→" / "";
  display:inline-block;
  transition:transform 180ms var(--helppo);
}
.wp-block-button.nuoli > .wp-block-button__link:hover::after{ transform:translateX(4px); }
/* WP: mockupin style="color:var(--kerma)" vihreällä kaistalla. */
.nuoli--kerma:where(:not(.wp-block-button)),
.wp-block-button.nuoli--kerma > .wp-block-button__link,
.wp-block-button.nuoli--kerma > .wp-block-button__link:hover{ color:var(--kerma) !important; }

.linkki{
  color:var(--brandi); text-decoration:underline;
  text-underline-offset:.2em; text-decoration-thickness:1px;
}
.linkki:hover{ color:var(--brandi-tumma); text-decoration-thickness:2px; }

/* WP: sisällön tekstilinkit ilman luokkaa saavat .linkki-tyylin. */
:where(.kk-sisalto) :where(p, li, td, th, figcaption) a:not([class]){
  color:var(--brandi); text-decoration:underline;
  text-underline-offset:.2em; text-decoration-thickness:1px;
}
:where(.kk-sisalto) :where(p, li, td, th, figcaption) a:not([class]):hover{ color:var(--brandi-tumma); text-decoration-thickness:2px; }
:where(.tumma) :where(p) a:not([class]),
:where(.tumma) :where(p) a:not([class]):hover{ color:inherit; }

/* ---------- Kuvat ---------- */

.kuva{ margin:0; }
.kuva img{
  display:block;
  width:100%; height:auto;
  object-fit:cover;
  background:var(--nosto);
}

/* Leveät kuvat vuotavat sivun reunaan */
.vuoto-oikea{ margin-inline-end:calc(-1 * var(--vuoto)); }
.vuoto-vasen{ margin-inline-start:calc(-1 * var(--vuoto)); }

/* WP: kuvalohkon kuvateksti on figcaption.wp-element-caption. */
:is(.kuva__teksti, .kuva > .wp-element-caption){
  /* content-box: reunaan vuotavien kuvien kuvatekstillä on padding, joka ei saa
     syödä 36ch:n riviväliä kapeaksi palstaksi. */
  box-sizing:content-box;
  margin:.75rem 0 0;
  font-family:var(--otsikko); font-style:italic; font-weight:500;
  font-size:.875rem; line-height:1.55; color:var(--hillitty);
  font-variation-settings:"opsz" 9;
  text-align:start;
  max-width:36ch;
}
.vuoto-oikea :is(.kuva__teksti, .wp-element-caption){ padding-inline-end:var(--vuoto); }
.vuoto-vasen :is(.kuva__teksti, .wp-element-caption){ margin-inline-start:var(--vuoto); }

/* Täysleveä kuvakaista */
.kuvakaista{ margin:0; }
.kuvakaista img{
  display:block;
  width:100%; height:auto;
  aspect-ratio:2000/847;
  max-height:30rem;
  object-fit:cover;
  background:var(--nosto);
}
/* WP: mockupin figcaption.kuvakaista__teksti > span. Kuvateksti alkaa kaistan
   reunasta ja rivin mitta on enintään 52ch, ilman sisäistä spania. */
.kuvakaista > .wp-element-caption{
  max-width:none;
  margin:.75rem 0 0;
  padding-inline:
    max(var(--kuja), (100% - var(--mitta)) / 2 + var(--kuja))
    max(var(--kuja), 100% - max(var(--kuja), (100% - var(--mitta)) / 2 + var(--kuja)) - 52ch);
  font-family:var(--otsikko); font-style:italic; font-weight:500;
  font-size:.875rem; line-height:1.55; color:var(--hillitty);
  font-variation-settings:"opsz" 9;
  text-align:start;
}

/* ---------- Ilmoituspalkki ---------- */

/* Vierii normaalisti pois. Kontrastit kermaa vasten: pohja #3F5B3C
   vs. #E0D2B8 = 5,08:1, vs. #FBF7F0 = 7,09:1. */
.ilmoitus{
  background:var(--korostus);
  color:var(--kerma);
  border-bottom:1px solid var(--korostus-tumma);
}
.ilmoitus__sisus{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:0 clamp(.5rem, 2vw, 1.25rem);
  min-height:2.75rem;
  padding-block:.15rem;
}
.ilmoitus__teksti{
  margin:0;
  font-size:.875rem; line-height:1.45;
  color:var(--vaalea-teksti);
}
.ilmoitus__linkki{
  display:inline-flex; align-items:center;
  min-height:2.75rem;
  font-size:.875rem; font-weight:600;
  color:var(--kerma);
  text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px;
  white-space:nowrap;
}
.ilmoitus__linkki:hover{ text-decoration-thickness:2px; }
.ilmoitus__lyhyt{ display:none; }
@media (max-width:34rem){
  .ilmoitus__teksti{ font-size:.8125rem; }
  .ilmoitus__linkki{ font-size:.8125rem; }
  .ilmoitus__pitka{ display:none; }
  .ilmoitus__lyhyt{ display:inline; }
}

/* ---------- Masthead ---------- */

.masthead{ background:var(--tausta); }
.masthead__yla{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:var(--v4) var(--v6);
  padding-block:clamp(1.25rem, 3vw, 2.25rem) var(--v5);
}
.masthead__yhteys{ text-align:right; }
.puhelin{
  font-family:var(--otsikko); font-weight:700;
  font-size:clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  font-variation-settings:"opsz" 30;
  font-variant-numeric:tabular-nums;
  color:var(--brandi); text-decoration:none;
  border-bottom:1px solid var(--reuna-vahva);
  white-space:nowrap;
  display:inline-block; padding-block:.6rem;
}
.puhelin:hover{ color:var(--brandi-tumma); border-bottom-color:currentColor; }
.masthead__osoite{
  margin:.3rem 0 0; font-size:var(--t-pieni); color:var(--hillitty);
}
.paanavi{
  border-block:1px solid var(--muste);
}
.paanavi__sisus{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:0 clamp(1rem, 2.6vw, 2.25rem);
}
.paanavi ul{
  display:flex; flex-wrap:wrap; gap:0 clamp(1rem, 2.6vw, 2.25rem);
}
/* Vain listan linkit, ei kaistan painiketta. */
.paanavi ul a{
  display:inline-flex; align-items:center; min-height:2.75rem;
  font-size:var(--t-pieni); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muste); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color 180ms var(--helppo), border-color 180ms var(--helppo);
}
.paanavi ul a:hover{ color:var(--brandi); }
.paanavi ul a[aria-current="page"]{ color:var(--brandi); border-bottom-color:var(--brandi); }
.paanavi__cta{
  margin-inline-start:auto;
  margin-block:.3rem;
  min-height:2.75rem;
  padding:.55rem 1.25rem;
  font-size:.875rem;
}

@media (max-width:40rem){
  .masthead__yhteys{ text-align:left; }
  .masthead__yla{ align-items:flex-start; }
  .paanavi__cta{ margin-inline-start:0; margin-block:.15rem .5rem; }
}

/* Valikkopainike mastheadissa.
   Piilossa oletuksena: ilman JS:ää painike ei tekisi mitään, joten silloin
   näytetään sen sijaan tavallinen linkkilista. */
.masthead__hamppu{ display:none; }

@media (max-width:59.999rem){
  /* Vain kun JS on käytössä: linkkilista siirtyy paneeliin ja tilalle tulee painike.
     Ilman JS:ää .paanavi jää näkyviin, jolloin sivustolla voi liikkua normaalisti. */
  .js .paanavi{ display:none; }

  .js .masthead__yla{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    row-gap:var(--v4);
    column-gap:var(--v4);
  }
  .js .masthead__yla > .logo{ grid-column:1; grid-row:1; }
  .js .masthead__hamppu{
    display:inline-flex;
    grid-column:2; grid-row:1;
    justify-self:end;
  }
  .js .masthead__yhteys{ grid-column:1 / -1; grid-row:2; text-align:left; }
}

/* Sentinel, jota IntersectionObserver tarkkailee. Ei vie tilaa. */
.vartija{ height:1px; margin-bottom:-1px; }

/* ---------- Kiinteä tiivis palkki ---------- */

.tiivis{
  position:fixed; top:var(--palkki); left:0; right:0; z-index:120;
  background:var(--tausta);
  border-bottom:1px solid var(--muste);
  transform:translateY(-100%);
  opacity:0;
  visibility:hidden;
  transition:transform 200ms var(--helppo), opacity 200ms var(--helppo), visibility 0s linear 200ms;
}
.tiivis.on,
html.ei-tarkkailijaa .tiivis{
  transform:none; opacity:1; visibility:visible;
  transition:transform 200ms var(--helppo), opacity 200ms var(--helppo), visibility 0s;
}
.tiivis__sisus{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--v4);
  min-height:var(--tiivis-korkeus);
}
.tiivis__oikea{
  display:flex; align-items:center; gap:clamp(.75rem, 1.5vw, 1.25rem);
  min-width:0;
}
.tiivis__navi{ display:none; min-width:0; }
.tiivis__navi ul{
  display:flex; flex-wrap:nowrap; gap:0 clamp(.75rem, 1.4vw, 1.25rem);
}
.tiivis__navi a{
  display:inline-flex; align-items:center; min-height:2.75rem;
  font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--muste); text-decoration:none;
  border-bottom:2px solid transparent;
}
.tiivis__navi a:hover{ color:var(--brandi); }
/* Painike on tiiviissä palkissa kaikilla leveyksillä, myös työpöydällä.
   Kapeimmilla näytöillä tunnuksen ja painikkeen mitat kiristetään portaittain,
   jotta tunnus, painike ja valikkopainike mahtuvat 320 px:n riville. */
.tiivis__cta{
  display:inline-flex;
  min-height:2.75rem; padding:.55rem 1rem;
  font-size:.875rem; white-space:nowrap;
}
@media (min-width:60rem){
  .tiivis__navi{ display:block; }
}
@media (max-width:29.999rem){
  /* Vuosiluku jää pois: painike on tärkeämpi kuin tunnuksen toinen rivi. */
  .tiivis .logo__vuosi{ display:none; }
  .tiivis .logo--tiivis{ gap:0; }
}
@media (max-width:26rem){
  .tiivis__sisus{ gap:.5rem; }
  .tiivis__oikea{ gap:.625rem; }
  .tiivis__cta{ padding-inline:.75rem; font-size:.8125rem; }
}
@media (max-width:22.5rem){
  /* min-height pitää linkin 44 px:n kosketuskohteena pienemmälläkin kirjasimella. */
  .tiivis .logo--tiivis{ min-height:2.75rem; }
  .tiivis .logo--tiivis .logo__nimi{ font-size:.9375rem; }
  .tiivis__sisus{ gap:.375rem; }
  .tiivis__oikea{ gap:.5rem; }
  .tiivis__cta{ padding-inline:.5rem; font-size:.75rem; }
}

/* Hampurilaispainike */
.hamppu{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; flex:none;
  padding:0; margin:0;
  background:transparent; border:0; cursor:pointer;
  color:var(--muste);
}
.hamppu__viivat{
  position:relative; display:block;
  width:1.375rem; height:1px; background:currentColor;
}
.hamppu__viivat::before,
.hamppu__viivat::after{
  content:""; position:absolute; left:0;
  width:100%; height:1px; background:currentColor;
}
.hamppu__viivat::before{ top:-6px; }
.hamppu__viivat::after{ top:6px; }
.hamppu:hover{ color:var(--brandi); }
@media (min-width:60rem){
  .hamppu{ display:none; }
}

/* ---------- Mobiilivalikko ---------- */

.valikko{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column;
  background:var(--tausta);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  transform:translateY(-1rem);
  transition:opacity 200ms var(--helppo), transform 200ms var(--helppo), visibility 0s linear 200ms;
}
.valikko.on{
  opacity:1; visibility:visible; transform:none;
  transition:opacity 200ms var(--helppo), transform 200ms var(--helppo), visibility 0s;
}
.valikko__sisus{
  display:flex; flex-direction:column;
  flex:1 1 auto;
  max-width:var(--mitta); width:100%;
  margin-inline:auto;
  padding-inline:var(--kuja);
  padding-bottom:calc(var(--v6) + env(safe-area-inset-bottom, 0px));
}
.valikko__yla{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--v4);
  min-height:var(--tiivis-korkeus);
  border-bottom:1px solid var(--muste);
}
.valikko__sulje{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; flex:none;
  padding:0; margin:0;
  background:transparent; border:0; cursor:pointer;
  color:var(--muste);
  font-family:var(--otsikko); font-size:1.75rem; line-height:1;
}
.valikko__sulje:hover{ color:var(--brandi); }
.valikko__navi{ margin-top:clamp(1.5rem, 5vw, 2.5rem); }
.valikko__navi a{
  display:block;
  padding-block:clamp(.85rem, 3vw, 1.2rem);
  border-bottom:1px solid var(--reuna-vahva);
  font-family:var(--otsikko); font-weight:700;
  font-size:clamp(1.75rem, 5.5vw, 2.125rem);
  line-height:1.15; letter-spacing:-.02em;
  font-variation-settings:"opsz" 96;
  color:var(--muste); text-decoration:none;
}
.valikko__navi li:first-child a{ border-top:1px solid var(--reuna-vahva); }
.valikko__navi a:hover{ color:var(--brandi); }
.valikko__ala{
  margin-top:auto;
  padding-top:clamp(2rem, 6vw, 3rem);
}
.valikko__osoite{
  margin:.3rem 0 var(--v5);
  font-size:.9375rem; color:var(--hillitty);
}
.valikko__ala .nappi{ width:100%; }

/* ---------- Kiinteä alapalkki mobiilissa ---------- */

.pohjapalkki{
  position:fixed; inset:auto 0 0 0; z-index:110;
  display:none;
  align-items:center; gap:var(--v3);
  padding:var(--v3) var(--kuja);
  padding-bottom:calc(var(--v3) + env(safe-area-inset-bottom, 0px));
  background:var(--tausta);
  border-top:1px solid var(--muste);
}
.pohjapalkki .nappi{
  min-height:2.75rem;
  padding:.65rem .75rem;
  font-size:.875rem; letter-spacing:.02em; white-space:nowrap;
}
.pohjapalkki .nappi--taytto{ flex:1.6 1 0; }
.pohjapalkki .nappi--viiva{ flex:.9 1 0; }

@media (max-width:59.999rem){
  .pohjapalkki{ display:flex; }
  html.valikko-auki .pohjapalkki{ display:none; }
  body{ padding-bottom:calc(4.75rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Kansi (hero) ---------- */

.kansi{ padding-block:clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); }
.kansi__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:center;
}
.kansi h1{ margin-bottom:clamp(1.25rem, 2.5vw, 1.75rem); }
.kansi .ingressi{ max-width:46ch; margin-bottom:clamp(1.75rem, 3.5vw, 2.5rem); }
.kansi .napit{ margin-bottom:clamp(1.75rem, 3.5vw, 2.5rem); }

.kansi__osoite{
  margin:0;
  border-top:1px solid var(--reuna-vahva);
  padding-top:var(--v4);
  font-size:.9375rem; line-height:1.65;
  color:var(--hillitty);
  max-width:48ch;
}
.kansi__kuva img{ aspect-ratio:3/4; }
@media (min-width:56.001rem){
  /* Pystykuva täyttäisi muuten yli 880 px korkeuden. */
  .kansi__kuva img{ max-height:44rem; }
}

@media (max-width:56rem){
  .kansi__ruudukko{ grid-template-columns:minmax(0,1fr); }
  .kansi .ingressi{ max-width:56ch; }
  .kansi__kuva{ margin-inline:calc(-1 * var(--vuoto)); }
  .kansi__kuva :is(.kuva__teksti, .wp-element-caption){ padding-inline:var(--vuoto); }
}

/* ---------- Seuraava myyntipäivä -kaista ---------- */

.myyntipaiva{
  background:var(--korostus);
  color:var(--kerma);
  border-block:1px solid var(--korostus-tumma);
}
.myyntipaiva__sisus{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,27rem);
  gap:var(--v6) clamp(2rem, 5vw, 4rem);
  align-items:start;
  padding-block:clamp(2.5rem, 5vw, 3.75rem);
}
.myyntipaiva h2{
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-pieni); letter-spacing:.2em; text-transform:uppercase;
  color:var(--vaalea-teksti); margin-bottom:var(--v3); line-height:1.4;
}
.myyntipaiva__teksti{
  font-family:var(--otsikko); font-weight:500;
  font-size:clamp(1.25rem, 1.05rem + .85vw, 1.875rem);
  line-height:1.35; color:var(--kerma);
  font-variation-settings:"opsz" 60;
  max-width:44ch; margin:0;
}
/* Ylimenevien jakelujen rivi: ei oma korttinsa vaan listan jatke. */
.avoin--loput{
  background:none; border:0; padding:var(--v3) 0 0;
  display:flex; align-items:center;
}

/* Tilamyyntipäivä erottuu REKO-lohkosta ohuella viivalla, muttei huuda:
   se on tieto, ei toinen kehotus. */
.myyntipaiva__tilamyynti{
  margin-top:var(--v5);
  padding-top:var(--v4);
  border-top:1px solid rgba(245,240,232,.22);
}
.myyntipaiva__tilamyynti[hidden]{ display:none; }

.myyntipaiva__lisa{
  margin:var(--v4) 0 0; font-size:.9375rem; line-height:1.65;
  color:var(--vaalea-hillitty);
  max-width:56ch;
}
@media (max-width:56rem){
  .myyntipaiva__sisus{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Pilarit (typografiset, ei kuvia) ---------- */

/* Kolme yhtä leveää saraketta: väli tulee column-gapista, eroitin omana viivanaan,
   jottei padding kavenna keskimmäistä pilaria. */
.pilarit{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-template-rows:auto auto;
  column-gap:clamp(2rem, 4.8vw, 4rem);
  row-gap:0;
  margin-top:clamp(2.5rem, 5vw, 3.5rem);
}
.pilari{ position:relative; min-width:0; }
/* Otsikko ja teksti samoille riveille kaikissa pilareissa */
@supports (grid-template-rows: subgrid){
  .pilari{
    display:grid;
    grid-row:span 2;
    grid-template-rows:subgrid;
    grid-template-columns:minmax(0,1fr);
  }
}
.pilari + .pilari::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:calc(-1 * clamp(1rem, 2.4vw, 2rem));
  border-inline-start:1px solid var(--reuna-vahva);
}
.pilari h3{ margin:0 0 var(--v3); }
.pilari p{ color:var(--hillitty); margin:0; }
@media (max-width:56rem){
  .pilarit{ grid-template-columns:minmax(0,1fr); grid-template-rows:none; column-gap:0; }
  .pilari{ display:block; grid-row:auto; padding-block:var(--v6); }
  .pilari:first-child{ padding-top:0; }
  .pilari + .pilari{ border-top:1px solid var(--reuna-vahva); }
  .pilari + .pilari::before{ content:none; }
}

/* ---------- Hinnasto: taitettu kahteen sarakkeeseen kuin ruokalista ---------- */

.ruokalista{
  margin-top:clamp(2.25rem, 4.5vw, 3.25rem);
  columns:2;
  column-gap:clamp(2rem, 5vw, 4.5rem);
  column-rule:1px solid var(--reuna-vahva);
}
.ruoka{
  break-inside:avoid;
  padding-block:var(--v4);
  border-bottom:1px solid var(--reuna);
}
.ruoka__rivi{ display:flex; align-items:baseline; gap:.5rem; }
.ruoka__nimi{
  font-family:var(--otsikko); font-weight:700;
  font-size:1.0625rem; line-height:1.3;
  font-variation-settings:"opsz" 24;
  color:var(--muste);
}
.ruoka__viiva{
  flex:1 1 auto; min-width:1.25rem;
  border-bottom:1px dotted var(--reuna-vahva);
  transform:translateY(-.22em);
}
.ruoka__hinta{
  font-family:var(--leipa); font-weight:600; font-size:1rem;
  font-variant-numeric:tabular-nums;
  color:var(--brandi); white-space:nowrap;
}
.ruoka__kuvaus{
  margin:.3rem 0 0; font-size:.875rem; line-height:1.55; color:var(--hillitty);
  max-width:46ch;
}
.hinnasto__jalki{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--v4) var(--v6);
  margin-top:clamp(1.75rem, 3.5vw, 2.5rem);
}
.hinnasto__jalki .pikkuteksti{ max-width:60ch; margin:0; }
@media (max-width:48rem){
  .ruokalista{ columns:1; }
}

/* ---------- Tarina ---------- */

.tarina__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:center;
}
.tarina__kuva img{ aspect-ratio:16/9; }
.tarina__teksti .ingressi{ margin-bottom:var(--v5); }
@media (max-width:56rem){
  .tarina__ruudukko{ grid-template-columns:minmax(0,1fr); }
  .tarina__kuva{ margin-inline:calc(-1 * var(--vuoto)); }
  .tarina__kuva :is(.kuva__teksti, .wp-element-caption){ margin-inline-start:0; padding-inline:var(--vuoto); }
}

/* ---------- Askeleet ---------- */

.askeleet{ display:grid; gap:0; }
.askel{
  display:grid;
  grid-template-columns:clamp(3rem, 6vw, 4.5rem) minmax(0,1fr);
  gap:var(--v4) clamp(1rem, 2.5vw, 2rem);
  padding-block:clamp(1.5rem, 3vw, 2rem);
  border-top:1px solid var(--reuna-vahva);
}
.askel:last-child{ border-bottom:1px solid var(--reuna-vahva); }
.askel__nro{
  font-family:var(--otsikko); font-weight:700;
  font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  line-height:.95; letter-spacing:-.03em;
  font-variation-settings:"opsz" 96;
  font-variant-numeric:tabular-nums;
  color:var(--brandi);
}
.askel h3{ margin-bottom:var(--v2); }
.askel p{ color:var(--hillitty); max-width:56ch; }

/* ---------- Opas-CTA ---------- */

.opas{
  background:var(--nosto);
  border-block:1px solid var(--reuna-vahva);
}
.opas__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(2.5rem, 5vw, 5rem);
  align-items:start;
  padding-block:clamp(3rem, 6.5vw, 5.5rem);
}
.opas h2{ margin-bottom:var(--v5); }
.opas__teksti p{ color:var(--muste); font-size:var(--t-ingressi); line-height:1.75; }
.opas .osasto{ border-top-color:var(--muste); }

@media (max-width:56rem){
  .opas__ruudukko{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Lomake ---------- */

.lomakelaatikko{
  background:var(--pinta);
  border:1px solid var(--reuna-vahva);
  padding:clamp(1.5rem, 3.5vw, 2.5rem);
}
.lomakelaatikko h3{
  font-size:1.25rem; margin-bottom:var(--v5);
  padding-bottom:var(--v3); border-bottom:1px solid var(--reuna);
}
.kentta{ margin-bottom:var(--v5); }
.kentta > label{
  display:block;
  font-size:var(--t-mikro); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--hillitty);
  margin-bottom:var(--v2);
}
.kentta input[type="text"],
.kentta input[type="email"]{
  width:100%;
  min-height:3rem;
  padding:.65rem 0 .55rem;
  font-family:var(--otsikko); font-weight:500;
  font-size:1.125rem; color:var(--muste);
  font-variation-settings:"opsz" 24;
  background:transparent;
  border:0; border-bottom:1.5px solid var(--muste);
  border-radius:0;
  transition:border-color 180ms var(--helppo);
}
.kentta input::placeholder{ color:var(--hillitty); }
.kentta input:hover{ border-bottom-color:var(--brandi); }
.kentta input[aria-invalid="true"]{ border-bottom-color:var(--brandi-tumma); }
.virhe{
  margin:.4rem 0 0;
  font-size:.875rem; font-weight:600; color:var(--brandi-tumma);
}
.virhe--lupa{ margin:-1rem 0 1.5rem; }
.suostumus{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:.75rem; align-items:start; align-content:center;
  /* Yhdelle riville mahtuessaan teksti jäisi 39 px:n kosketuskohteeksi. */
  min-height:2.75rem;
  padding-block:.5rem;
  margin-bottom:var(--v5);
  cursor:pointer;
}
.suostumus input{
  width:1.25rem; height:1.25rem; margin:.2rem 0 0;
  accent-color:var(--brandi); flex:none;
}
.suostumus span{ font-size:.9375rem; line-height:1.55; color:var(--hillitty); }
.lomake .nappi{ width:100%; }
.lomake__alle{
  margin:var(--v3) 0 0;
  font-size:.875rem; color:var(--hillitty); text-align:center;
}
.kiitos{
  border:1px solid var(--korostus);
  background:var(--pinta);
  padding:clamp(1.5rem, 3.5vw, 2.5rem);
}
.kiitos p{
  font-family:var(--otsikko); font-weight:500;
  font-size:clamp(1.125rem, 1rem + .6vw, 1.5rem);
  line-height:1.4; color:var(--korostus);
  font-variation-settings:"opsz" 48;
  margin:0;
}

/* Lomake vihreällä kaistalla */
.lomake--vihrea .lomake__otsikko{
  font-family:var(--leipa); font-weight:600;
  font-size:var(--t-mikro); letter-spacing:.22em; text-transform:uppercase;
  color:var(--vaalea-teksti);
  margin:0 0 var(--v5);
  padding-bottom:var(--v3);
  border-bottom:1px solid var(--vaalea-hillitty);
  line-height:1.4;
}
.kenttaparit{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 var(--v5);
}
/* Etunimi ja sukunimi mahtuvat vierekkäin, mutta sähköposti on pitkä ja
   ansaitsee koko rivin. Yhden palstan näkymässä sääntö on tarpeeton mutta
   harmiton. */
.kenttaparit .kentta--levea{ grid-column:1 / -1; }

/* Tuore vai pakaste tuotekortissa. Kaksi vaihtoehtoa vierekkäin, ja
   yksittäinen tieto samalla rivillä silloin kun valinnanvaraa ei ole. */
.tuote__muoto{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem 1rem;
  margin-top:.35rem;
}
.tuote__muoto-valinta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  cursor:pointer;
  font-size:.9375rem;
  white-space:nowrap;
}
.tuote__muoto-valinta input{ cursor:pointer; }
.tuote__muoto-tieto{
  margin-top:.35rem;
  font-size:.9375rem;
  color:var(--muted, #5a7a5c);
}
@media (max-width:40rem){
  .kenttaparit{ grid-template-columns:minmax(0,1fr); }
}
.lomake--vihrea .kentta > label{ color:var(--vaalea-teksti); }
.lomake--vihrea .kentta input[type="text"],
.lomake--vihrea .kentta input[type="email"]{
  color:var(--kerma);
  border-bottom-color:var(--kerma);
}
.lomake--vihrea .kentta input::placeholder{ color:var(--vaalea-hillitty); }
.lomake--vihrea .kentta input:hover{ border-bottom-color:#FFFFFF; }
.lomake--vihrea .kentta input[aria-invalid="true"]{ border-bottom-color:var(--vaalea-virhe); }
.lomake--vihrea .virhe{ color:var(--vaalea-virhe); }
.lomake--vihrea .suostumus span{ color:var(--vaalea-teksti); }
.lomake--vihrea .suostumus input{ accent-color:var(--kerma); }
.lomake--vihrea .lomake__alle{ color:var(--vaalea-hillitty); }
.kiitos--vihrea{ background:transparent; border-color:var(--kerma); }
.kiitos--vihrea p{ color:var(--kerma); }

/* ---------- Usein kysyttyä ---------- */

.kysymykset{ display:grid; }
.kysymys{
  padding-block:clamp(1.25rem, 2.6vw, 1.75rem);
  border-top:1px solid var(--reuna-vahva);
}
.kysymys:last-child{ border-bottom:1px solid var(--reuna-vahva); }
.kysymys h3{ font-size:1.125rem; margin-bottom:var(--v2); }
.kysymys p{ color:var(--hillitty); max-width:60ch; }

/* ---------- Samassa pihassa ---------- */

.naapurit{ display:grid; }
.naapuri{
  padding-block:clamp(1.5rem, 3vw, 2rem);
  border-top:1px solid var(--reuna-vahva);
}
.naapuri:last-child{ border-bottom:1px solid var(--reuna-vahva); }
.naapuri h3{ margin-bottom:var(--v2); }
.naapuri p{ color:var(--hillitty); margin-bottom:var(--v2); }
.naapuri .linkki,
.naapuri__linkki a{ display:inline-flex; align-items:center; min-height:2.75rem; }
/* WP: linkki on omassa kappaleessaan (p.naapuri__linkki). */
.naapuri > .naapuri__linkki{ margin-bottom:0; }

/* ---------- Footer ---------- */

.jalki{
  background:var(--muste);
  color:var(--kerma);
  padding-block:clamp(3rem, 6vw, 4.5rem);
  margin-top:clamp(2rem, 5vw, 4rem);
}
.jalki__ruudukko{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--v7) clamp(2rem, 5vw, 4rem);
}
.jalki .logo{
  --logo-vari:var(--kerma);
  --logo-viiva:#6B5D4E;
  --logo-hillitty:var(--footer-hillitty);
  margin-bottom:var(--v4);
  padding-block:0;
}
.jalki .logo__nimi{
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-variation-settings:"opsz" 110;
}
.jalki__otsikko{
  font-size:var(--t-mikro); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--footer-hillitty);
  margin:0 0 var(--v3);
}
.jalki p{ color:var(--footer-hillitty); font-size:.9375rem; line-height:1.7; }
.jalki a{ color:var(--kerma); text-decoration:none; border-bottom:1px solid #6B5D4E; }
.jalki a:hover{ border-bottom-color:var(--kerma); }
.jalki__linkit{ display:grid; gap:var(--v2); }
.jalki__linkit a{ display:inline-flex; align-items:center; justify-self:start; min-height:2.75rem; font-size:.9375rem; }
@media (max-width:56rem){
  .jalki__ruudukko{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .jalki__tunnus{ grid-column:1 / -1; }
}
@media (max-width:30rem){
  .jalki__ruudukko{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Liike ---------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  .nuoli:hover span,
  .wp-block-button.nuoli > .wp-block-button__link:hover::after{ transform:none; }
}

/* ======================================================================
   Jaetut myyntitilan tyylit (jaettu/jaettu.css)
   ====================================================================== */
/* ---------- Tilan mukaan näkyvät kohdat ---------- */

/* .nappi on inline-flex ja ohittaisi muuten hidden-attribuutin. */
[data-tilassa][hidden],
[data-myynti-href][hidden],
[data-ilmoitus-linkki][hidden]{ display:none !important; }

/* Ennen kuin skripti ehtii poistaa hidden-attribuutit, piilotetaan jo
   CSS:llä kohdat, jotka eivät kuulu nykyiseen tilaan (html[data-myyntitila]
   asetetaan <head>issä). Ilman skriptiä attribuuttia ei ole, ja HTML:n
   oma hidden ratkaisee. */
html[data-myyntitila="a"] [data-tilassa]:not([data-tilassa~="a"]),
html[data-myyntitila="b"] [data-tilassa]:not([data-tilassa~="b"]):not([data-tilassa~="b0"]):not([data-tilassa~="btm"]),
html[data-myyntitila="c"] [data-tilassa]:not([data-tilassa~="c"]),
html[data-myyntitila="d"] [data-tilassa]:not([data-tilassa~="d"]){ display:none !important; }

/* ---------- Vain ruudunlukijalle ---------- */

/* Sama sääntö kuin myynti.html:n omissa tyyleissä. Tilaa-linkit ja
   avoimet-listan painikkeet kertovat piilotekstinä, mihin jakeluun ne vievät. */
.piiloteksti{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ---------- Ilmoituspalkin fokus ---------- */

/* Palkin pohja on vihreä (--korostus), jota vasten terrakotan fokusrengas
   ei erotu (1,0:1). Kerma vihreää vasten on 7,09:1. Rengas piirretään
   palkin sisäpuolelle, jottei palkin reuna leikkaa sitä. */
.ilmoitus :focus-visible{
  outline-color:var(--kerma);
  outline-offset:-2px;
}

/* ---------- Mobiilivalikon toissijainen painike (tilat C ja D) ---------- */

/* Tiloissa C ja D valikon pääpainike on Tilaa REKO-jakeluun. Postilistalle
   liittyminen jää sen alle toissijaisena painikkeena. */
.valikko__liity{ margin-top:var(--v3); }

/* ---------- Tilaa-laatikko (määräaika ja painike) ---------- */

.tilaa-laatikko{
  border-left:3px solid var(--brandi);
  padding:var(--v4) var(--v5);
  margin-top:var(--v5);
  max-width:44rem;
}
.tilaa-laatikko > *{ margin:0; }
.tilaa-laatikko > * + *{ margin-top:var(--v3); }
.tumma .tilaa-laatikko{
  border-left-color:var(--kerma);
  color:var(--kerma);
}

/* ---------- Avoimet jakelut -lista ---------- */

ul.avoimet{
  list-style:none;
  margin:0; padding:0;
}
ul.avoimet > li + li{
  margin-top:var(--v4);
  padding-top:var(--v4);
  border-top:1px solid var(--reuna);
}
.avoin p{ margin:0; }
.avoin__nimi{
  font-family:var(--otsikko);
  font-size:1.125rem; font-weight:600;
  line-height:1.3;
}
.avoin__aika,
.avoin__paikka{ font-size:var(--t-pieni, .875rem); }
.avoin__raja{ font-weight:600; margin-top:var(--v1); }
.avoin .nappi{ margin-top:var(--v3); }
.tumma ul.avoimet > li + li{ border-top-color:currentColor; }
.tumma .avoin{ color:inherit; }

/* ---------- Etusivun heron rajarivi ---------- */

.kansi__raja{
  margin-bottom:var(--v3);
  font-weight:600;
}

/* ---------- [TARKISTA]-merkintä ---------- */

/* Kopio tietosuoja.html:n säännöstä, jotta merkintä näkyy muillakin
   sivuilla. Kontrasti #241F1A / #FFE8A3 on 13,5:1. */
.tarkista{
  background:#FFE8A3;
  color:var(--muste);
  border:1px dashed var(--brandi);
  padding:.05em .35em;
  font-family:var(--leipa); font-weight:600;
  font-size:.9375em;
  overflow-wrap:anywhere;
}

/* ---------- Puhelin: vähemmän päällekkäisiä kehotuksia ---------- */

/* Alle 48rem mastheadin puhelinnumero ja osoite piilotetaan (Soita on
   pohjapalkissa), samoin tiiviin palkin painike (pohjapalkki hoitaa saman).
   Ilman skriptiä pohjapalkkia ei ole, joten numero jää näkyviin. */
@media (max-width:47.999rem){
  .js .masthead__yhteys{ display:none; }
  .tiivis__cta{ display:none !important; }
}

/* Tilauslomake ruudulla (myynti, tilat C ja D): pohjapalkki ja tiiviin
   palkin painike väistyvät, jotta kelluva yhteenveto saa alalaidan. */
@media (max-width:59.999rem){
  html.tilaus-nakyvissa .pohjapalkki{ display:none; }
  html.tilaus-nakyvissa body{ padding-bottom:0; }
}
html.tilaus-nakyvissa .tiivis__cta{ display:none !important; }

/* ======================================================================
   WordPress: apuluokat
   Korvaavat mockupin inline-tyylit ja lohkoista puuttuvat elementit.
   ====================================================================== */

/* Nämä korvaavat inline-tyylejä, joten ne voittavat osioiden omat säännöt. */
.vali-yla-2{ margin-top:var(--v2) !important; }
.vali-yla-3{ margin-top:var(--v3) !important; }
.vali-yla-4{ margin-top:var(--v4) !important; }
.vali-yla-5{ margin-top:var(--v5) !important; }
.napit--vali-6{ column-gap:var(--v6) !important; }
.mitta-66{ max-width:66ch !important; }
.osasto--muste{ border-top-color:var(--muste) !important; }
/* Ankkurikohde, joka ei ole section[id] (esim. #liity-lomake). */
.kk-ankkuri{ scroll-margin-top:calc(var(--palkki) + var(--tiivis-korkeus) + 1.25rem); }

/* ======================================================================
   WordPress: neutralointi
   Ytimen lohkotyylit ja oletukset, jotka poikkeavat mockupista.
   ====================================================================== */

:where(figure){ margin:0; }
.wp-block-image img{ height:auto; }
.wp-block-image > .wp-element-caption,
.wp-block-table > .wp-element-caption{ text-align:start; }

/* Painikeryhmät: ydin antaa flex-kääreelle keskityksen ja lapsille marginaalit. */
.wp-block-buttons.is-layout-flex{ align-items:stretch; }
.wp-block-buttons.is-layout-flex > *{ margin:0; }
.wp-block-buttons > .wp-block-button{ display:block; }
.wp-block-buttons.linkkirivi{ align-items:center; }
/* Ryhmä, jonka kaikki painikkeet ovat piilossa (tila ei täsmää), ei vie tilaa. */
.wp-block-buttons:not(:has(> .wp-block-button:not([hidden]) > a:not([hidden]))){ display:none; }

/* Erotin: mockupin <hr class="rajaus">. */
.wp-block-separator.rajaus{
  border:0; border-top:1px solid var(--muste);
  height:0; opacity:1; width:auto;
  background:none;
  margin:0 0 clamp(1.75rem, 4vw, 3rem);
}

/* Taulukko: ytimen reunat ja pehmusteet pois; taulukon omat säännöt osiot.css:ssä. */
.wp-block-table.taulukko__kaari{ margin:0 0 var(--v4); }
.wp-block-table.taulukko__kaari > table{ border:0; }
/* Vain rakenne-elementit nollataan: th/td saavat pehmusteensa ja alaviivansa
   osiot.css:n .taulukko__kaari-säännöistä (mockupin taulukko). */
.wp-block-table.taulukko__kaari > table :is(thead, tbody, tfoot, tr){ border:0; padding:0; }

/* Tavallinen lista ilman omaa luokkaa: luettelomerkit takaisin. */
ul[class="wp-block-list"]{ list-style:disc; padding-inline-start:1.25em; margin:0 0 var(--v4); }
ol[class="wp-block-list"]{ list-style:decimal; padding-inline-start:1.25em; margin:0 0 var(--v4); }
ol{ margin:0; padding:0; list-style:none; }

/* Kuvapaikan tekstit ovat kappaleita (mockupissa spaneja). */
.kuva__ala > p{ margin:0; }

/* Details (asiakkaan omaan käyttöön; mockup-sivuilla kysymykset ovat avoimia). */
details.kysymys > summary{
  cursor:pointer;
  font-family:var(--otsikko); font-weight:700; font-size:1.125rem; line-height:1.18;
  min-height:2.75rem; display:flex; align-items:center;
}
details.kysymys[open] > summary{ margin-bottom:var(--v2); }

/* Sarakkeet (asiakkaan omaan käyttöön). */
.wp-block-columns.kk-sarakkeet{ gap:var(--v6) clamp(2rem, 5vw, 4.5rem); margin:0; }

/* ======================================================================
   WordPress: tilat, opas ja [TARKISTA]
   ====================================================================== */

/* Jos kk-core ei ole käytössä (body-luokkaa kk-opas/kk-ei-opasta ei ole),
   silta ei merkitse tilaluokkia. Näytetään silloin tila A. */
body:not(.kk-opas):not(.kk-ei-opasta):not(.editor-styles-wrapper) [class*="kk-tilassa-"]:not(.kk-tilassa-a){ display:none !important; }

/* Oppaan kaksi versiota. Ilman kk-coren body-luokkaa näytetään versio ilman opasta. */
body:not(.kk-opas):not(.editor-styles-wrapper) .kk-vain-opas,
body.kk-opas:not(.editor-styles-wrapper) .kk-vain-ilman-opasta{ display:none !important; }

/* Piilossa oleva versio ei saa estää p:last-child-sääntöä: näkyvä kappale,
   jonka perässä on vain toisen version kappale, on käytännössä viimeinen. */
body.kk-opas p:has(+ .kk-vain-ilman-opasta:last-child),
body:not(.kk-opas):not(.editor-styles-wrapper) p:has(+ .kk-vain-opas:last-child){ margin-bottom:0; }

/* [TARKISTA] ja kuvapaikat: kk-core poistaa ne palvelimella kirjautumattomalta.
   Tämä on varmistus. */
body:not(.logged-in):not(.editor-styles-wrapper) :is(.kk-tarkista, .tarkista, .kk-kuvapaikka){ display:none !important; }

.logged-in .kk-tarkista{
  position:relative;
  background:#FFE8A3;
  color:var(--muste);
  outline:2px dashed var(--brandi);
  outline-offset:4px;
}
.logged-in .kk-tarkista::before{
  content:"Vain ylläpitäjä näkee tämän – [TARKISTA]";
  display:block;
  margin-bottom:var(--v2);
  font-family:var(--leipa); font-weight:600; font-style:normal;
  font-size:var(--t-mikro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--brandi-tumma);
}
.logged-in .kk-kuvapaikka{ outline:2px dashed var(--brandi); outline-offset:4px; }