/*
Theme Name: Liedon Kokoomus (FSE)
Theme URI: https://github.com/potential-future-nonsense/pfn-liedonkokoomus-wp
Author: Niko Peltoniemi (PFN)
Author URI: https://potentialfuturenonsense.fi
Description: Lohkoteema (Full Site Editing) Liedon Kokoomus ry:n sivustolle. Selkeä ja luotettava suunta: valkoinen pohja, tummansininen otsikointi, hiusviivarajatut kortit. Sisältö muokataan Ulkoasu → Editori. Sisältötyypit (tapahtumat, päättäjät) ja jäsenten omat tiedot tulevat Liedon Kokoomus Core -lisäosasta.
Version: 0.6.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: liedon-kokoomus
Tags: full-site-editing, block-patterns, two-columns, news, accessibility-ready
GitHub Theme URI: https://github.com/potential-future-nonsense/pfn-liedonkokoomus-wp
Primary Branch: main
*/

/* ==========================================================================
   Tokenien peilaus
   theme.json tuottaa --wp--preset--* -muuttujat, mutta ne elävät vain
   lohkokontekstissa. Lomakkeet, jäsensivu ja lisäosan blokit renderöidään
   osin sen ulkopuolella, joten paletti peilataan lyhyisiin --lk-* -nimiin.
   Arvot ovat SAMAT kuin theme.jsonissa — muuta molemmat tai ei kumpaakaan.
   ========================================================================== */
:root{
  --lk-navy:#0A2B5C;--lk-navy-dark:#071F45;--lk-blue:#0E5FC0;--lk-blue-dark:#0B4EA0;
  --lk-blue-tint:#EBF2FC;--lk-bg:#F7F7F5;--lk-white:#fff;--lk-line:#E3E5E1;
  --lk-line-strong:#C9CCC6;--lk-ink:#16181C;--lk-body:#22262B;--lk-body-soft:#3A4048;
  --lk-muted:#5C6370;--lk-muted-light:#9AA0A8;--lk-footer-head:#8A9099;
  --lk-footer-link:#D6D8DB;--lk-on-navy:#C9D8EE;--lk-on-navy-eyebrow:#7FAEEA;
  --lk-error:#B3261E;
  --lk-r-sm:4px;--lk-r-ctrl:6px;--lk-r-card:8px;--lk-r-block:10px;--lk-r-box:12px;--lk-r-pill:999px;
  --lk-placeholder:repeating-linear-gradient(135deg,#DCE6F4 0 9px,#EBF2FC 9px 18px);
  --lk-gutter:clamp(20px,5vw,44px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto}

/* ==========================================================================
   Saavutettavuuden perustaso
   Käyttäjäkunnassa on paljon ikäihmisiä, joten fokus on näkyvä KAIKKIALLA
   eikä vain siellä missä selain sattuu sen piirtämään. :focus-visible, ei
   :focus — muuten hiirikäyttäjä saa renkaan joka klikkauksesta.
   ========================================================================== */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--lk-blue);outline-offset:2px;border-radius:2px
}
/* Hyppylinkki tulee WordPressin ytimeltä lohkoteemoissa. Se on
   .screen-reader-text kunnes se saa fokuksen — teeman tehtävä on antaa
   sille näkyvä ulkoasu siinä hetkessä. */
.skip-link.screen-reader-text:focus{
  position:absolute!important;left:0;top:0;z-index:999;width:auto;height:auto;
  clip:auto;clip-path:none;margin:0;overflow:visible;
  background:var(--lk-navy);color:#fff;padding:12px 18px;font-weight:700;
  font-size:15px;text-decoration:none
}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   Lohkoteeman normalisointi
   Kaistat (navy-bändit, hiusviivarajat) ovat alignfull-ryhmiä, joten
   wp-site-blocks ei saa lisätä omia marginaaleja väliin.
   ========================================================================== */
.wp-site-blocks{padding:0!important}
.wp-site-blocks>*{margin-block:0}
.wp-site-blocks>*+*{margin-block-start:0}
.lk-band{padding-inline:var(--lk-gutter)}

/* ==========================================================================
   Alatunniste aina alareunaan
   Lyhyellä sivulla (404, tyhjä arkisto, kiitosviesti lomakkeen jälkeen)
   alatunniste jäisi muuten leijumaan keskelle ruutua ja sen alle jäisi
   valkoista. Sivu on pystysuuntainen flex-pino, jossa sisältö venyy.

   min-height on svh eikä vh: mobiilissa vh tarkoittaa selainpalkit
   piilotettuna, jolloin sivu olisi vieritettävissä juuri palkkien verran
   vaikka sisältöä ei ole. svh on pienin varma korkeus, joten alatunniste
   näkyy heti ilman vieritystä.
   ========================================================================== */
.wp-site-blocks{display:flex;flex-direction:column;min-height:100vh}

@supports (min-height:100svh){
  .wp-site-blocks{min-height:100svh}
}

/* Sisältö vie jäljelle jäävän tilan. flex-basis auto + kasvu, ei kutistusta:
   pitkä sisältö saa ylittää ruudun normaalisti. */
.wp-site-blocks>main{flex:1 0 auto}

/* Varmistus siltä varalta, ettei sivupohjassa ole main-elementtiä:
   viimeinen osa (alatunniste) työntyy joka tapauksessa alas. */
.wp-site-blocks>.wp-block-template-part:last-child{margin-top:auto}

/* Kirjautuneena WordPress varaa yläpalkille tilan html-elementin
   marginaalilla. Ilman vähennystä sivusta tulisi juuri palkin verran
   liian korkea ja ruutuun ilmestyisi turha vierityspalkki. */
.admin-bar .wp-site-blocks{min-height:calc(100vh - 32px)}

@supports (min-height:100svh){
  .admin-bar .wp-site-blocks{min-height:calc(100svh - 32px)}
}

@media screen and (max-width:782px){
  .admin-bar .wp-site-blocks{min-height:calc(100vh - 46px)}

  @supports (min-height:100svh){
    .admin-bar .wp-site-blocks{min-height:calc(100svh - 46px)}
  }
}

/* ==========================================================================
   Yläpalkki (utility strip)
   ========================================================================== */
.lk-utility{background:var(--lk-navy);color:#fff;font-size:12.5px;font-weight:500;padding:8px var(--lk-gutter)}
.lk-utility a,.lk-utility p{color:#fff;opacity:.8;text-decoration:none}
.lk-utility a:hover,.lk-utility a:focus-visible{opacity:1;color:#fff;text-decoration:underline}
.lk-utility p{margin:0}

/* ==========================================================================
   Ylätunniste
   ========================================================================== */
.lk-header{background:var(--lk-white);border-bottom:1px solid var(--lk-line);padding:20px var(--lk-gutter)}
.lk-logo{width:44px;height:44px;flex:0 0 44px;background:var(--lk-blue);border-radius:2px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;letter-spacing:.02em}
.lk-wordmark{line-height:1;text-decoration:none;display:block}
.lk-wordmark-top{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--lk-muted);display:block}
.lk-wordmark-main{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--lk-navy);display:block;margin-top:3px}

.lk-header .wp-block-navigation{font-size:14.5px;font-weight:600}
.lk-header .wp-block-navigation a{color:var(--lk-ink);text-decoration:none}
.lk-header .wp-block-navigation a:hover{color:var(--lk-blue)}
/* Nykyinen sivu sinisellä. WP merkitsee sen näillä luokilla, ei aria-currentilla
   kaikissa tapauksissa, joten molemmat kattaen. */
.lk-header .wp-block-navigation .current-menu-item>a,
.lk-header .wp-block-navigation [aria-current="page"]{color:var(--lk-blue)}

.lk-search-toggle{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--lk-line);border-radius:var(--lk-r-ctrl);background:var(--lk-white);color:var(--lk-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.lk-search-toggle:hover{border-color:var(--lk-line-strong);color:var(--lk-navy)}
.lk-search-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.lk-search-panel{display:none;background:var(--lk-bg);border-bottom:1px solid var(--lk-line);padding:18px var(--lk-gutter)}
.lk-search-panel.is-open{display:block}

/* Mobiiliveto. Alle 900px valikko menee laatikkoon, mutta "Liity jäseneksi"
   jää AINA näkyviin — se on sivuston ainoa konversio. */
.lk-nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--lk-line);border-radius:var(--lk-r-ctrl);background:var(--lk-white);color:var(--lk-navy);align-items:center;justify-content:center;cursor:pointer;padding:0}
.lk-nav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
@media (max-width:900px){
  .lk-nav-toggle{display:flex}
  .lk-header .lk-primary-nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--lk-white);border-bottom:1px solid var(--lk-line);padding:10px var(--lk-gutter) 22px;box-shadow:0 12px 24px rgba(10,43,92,.08)}
  .lk-header .lk-primary-nav.is-open{display:block}
  .lk-header .lk-primary-nav .wp-block-navigation__container{flex-direction:column;align-items:flex-start;gap:0}
  .lk-header .lk-primary-nav .wp-block-navigation-item{width:100%;border-bottom:1px solid var(--lk-line)}
  .lk-header .lk-primary-nav .wp-block-navigation-item a{display:block;padding:14px 0;font-size:16px}
  .lk-header{position:relative;padding-inline:20px}
  .lk-search-toggle{display:none}
  /* Kolme elementtiä (tunnus + CTA + valikkonappi) ei mahdu 375px:n riville
     täysikokoisena, ja suunnittelun sääntö on ettei CTA:ta pudoteta. Se siis
     kapenee: teksti pysyy, mitat pienenevät. Kosketusalue säilyy 44px:ssä
     pystysuunnassa, joten saavutettavuusraja ei rikkoudu. */
  /* WP tulostaa lohkovälin omalla .wp-container-* -säännöllä (spesifisyys 0,1,0),
     joten kaventaminen vaatii 0,2,0 — muuten järjestys ratkaisee ja tulos on
     asennuskohtainen. */
  .lk-header.wp-block-group{gap:12px}
  .lk-brand{min-width:0;flex:0 1 auto}
  .lk-header-tools{gap:8px}
  .lk-header-tools .lk-btn{padding:12px 14px;font-size:13.5px}
  .lk-brand{gap:10px}
  .lk-logo{width:38px;height:38px;flex-basis:38px}
  .lk-wordmark-main{font-size:17px}
}

/* ==========================================================================
   Painikkeet
   Neljä muunnelmaa. Varjoja ei ole missään — kohoaminen tehdään reunan
   värillä, mikä on 1a-suunnan koko visuaalinen logiikka.
   ========================================================================== */
.lk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--lk-r-ctrl);font-weight:700;font-size:14.5px;line-height:1.2;padding:13px 20px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.lk-btn--blue{background:var(--lk-blue);color:#fff}
.lk-btn--blue:hover,.lk-btn--blue:focus-visible{background:var(--lk-blue-dark);color:#fff}
.lk-btn--navy{background:var(--lk-navy);color:#fff}
.lk-btn--navy:hover,.lk-btn--navy:focus-visible{background:var(--lk-navy-dark);color:#fff}
.lk-btn--outline{border-color:var(--lk-navy);color:var(--lk-navy);background:transparent}
.lk-btn--outline:hover,.lk-btn--outline:focus-visible{background:var(--lk-navy);color:#fff}
.lk-btn--ghost{border-color:var(--lk-line);color:var(--lk-navy);background:var(--lk-white);font-size:13px;padding:9px 14px}
.lk-btn--ghost:hover{border-color:var(--lk-line-strong)}
.lk-btn--white{background:#fff;color:var(--lk-navy)}
.lk-btn--white:hover,.lk-btn--white:focus-visible{background:var(--lk-blue-tint)}
.lk-btn--lg{font-size:16px;padding:16px 26px}
.lk-btn--block{width:100%}
.lk-btn[disabled],.lk-btn--disabled{background:var(--lk-line);color:var(--lk-muted);border-color:transparent;cursor:not-allowed;pointer-events:none}

/* Ydinlohkon painike saa saman ulkoasun kuin .lk-btn, jotta editorissa
   lisätty painike ei näytä toiselta kuin kuvion mukana tullut. */
.wp-block-button__link{border:1.5px solid transparent;transition:background-color .15s ease}
.is-style-outline .wp-block-button__link,.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background){border-color:var(--lk-navy);color:var(--lk-navy);background:transparent}
.is-style-outline .wp-block-button__link:hover{background:var(--lk-navy);color:#fff}

/* ==========================================================================
   Lomakekentät
   Yksi määrittely, käytössä sekä teeman lomakkeilla että lisäosan blokeilla.
   16px minimi estää iOS:n automaattisen zoomin kenttään tarttuessa.
   ========================================================================== */
.lk-field{margin-bottom:14px}
.lk-label{display:block;font-size:13px;font-weight:600;color:var(--lk-ink);margin-bottom:6px}
.lk-input,.lk-select,.lk-textarea{width:100%;border:1px solid var(--lk-line);border-radius:var(--lk-r-ctrl);padding:14px;font:400 16px/1.4 inherit;font-family:inherit;color:var(--lk-body);background:var(--lk-white)}
.lk-input::placeholder,.lk-textarea::placeholder{color:var(--lk-muted-light)}
.lk-input:focus,.lk-select:focus,.lk-textarea:focus{border-color:var(--lk-blue)}
.lk-textarea{min-height:88px;resize:vertical}
.lk-field--invalid .lk-input,.lk-field--invalid .lk-textarea,.lk-field--invalid .lk-select{border-color:var(--lk-error);border-width:1.5px}
.lk-error{display:block;color:var(--lk-error);font-size:13.5px;font-weight:600;margin-top:5px}
.lk-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--lk-body)}
.lk-check input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;margin:1px 0 0;accent-color:var(--lk-blue)}
.lk-honeypot{position:absolute;left:-9999px}
.lk-notice{border-radius:var(--lk-r-card);padding:14px 16px;font-size:15px;line-height:1.55;margin-bottom:18px}
.lk-notice--ok{background:var(--lk-blue-tint);color:var(--lk-navy);border-left:4px solid var(--lk-blue)}
.lk-notice--error{background:#FDECEA;color:#7A1A14;border-left:4px solid var(--lk-error)}

/* ==========================================================================
   Toistuvat pinnat
   ========================================================================== */
.lk-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--lk-blue);margin:0 0 18px}
.lk-eyebrow--muted{color:var(--lk-muted)}
.lk-eyebrow--on-navy{color:var(--lk-on-navy-eyebrow)}

.lk-card{background:var(--lk-white);border:1px solid var(--lk-line);border-radius:var(--lk-r-block);transition:border-color .15s ease}
a.lk-card:hover,.lk-card--link:hover{border-color:var(--lk-line-strong)}
.lk-card--soft{background:var(--lk-bg);border-color:transparent;border-radius:var(--lk-r-box)}
.lk-card--navy{background:var(--lk-navy);color:#fff;border-color:transparent}
.lk-card--accent{border:2px solid var(--lk-blue);border-radius:var(--lk-r-box)}

.lk-chip{display:inline-flex;align-items:center;background:var(--lk-blue-tint);color:var(--lk-blue);border-radius:var(--lk-r-sm);padding:5px 9px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.lk-pill{display:inline-flex;align-items:center;border-radius:var(--lk-r-pill);padding:9px 16px;font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid var(--lk-line);color:var(--lk-ink);background:var(--lk-white)}
.lk-pill:hover{border-color:var(--lk-line-strong);color:var(--lk-ink)}
.lk-pill[aria-current],.lk-pill--active{background:var(--lk-navy);border-color:var(--lk-navy);color:#fff}
.lk-pill--tint{background:var(--lk-blue-tint);border-color:transparent;color:var(--lk-navy);font-size:14px}
.lk-tag{display:inline-flex;border-radius:var(--lk-r-pill);padding:6px 13px;font-size:13px;font-weight:600;background:var(--lk-bg);border:1px solid var(--lk-line);color:var(--lk-muted);text-decoration:none}

.lk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--lk-blue);margin:14px 0 8px}
.lk-meta__sep{color:var(--lk-line-strong)}
.lk-meta__muted{color:var(--lk-muted)}

.lk-datebox{text-align:center;background:var(--lk-blue-tint);border-radius:var(--lk-r-card);padding:10px 0}
.lk-datebox__day{font-size:26px;font-weight:800;line-height:1;color:var(--lk-navy)}
.lk-datebox__month{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--lk-blue);text-transform:uppercase;margin-top:3px}

.lk-hairline{border:0;border-top:1px solid var(--lk-line);margin:0}

/* Kuvapaikat. Oikeat kuvat puuttuvat vielä; nämä pitävät sommittelun kasassa
   ja kertovat toimitukselle mitä kohtaan kuuluu. Kun kuva lisätään,
   .lk-ph korvautuu tavallisella kuvalohkolla. */
.lk-ph{background-image:var(--lk-placeholder);border-radius:var(--lk-r-card);display:flex;align-items:flex-end;padding:12px}
.lk-ph__label{background:rgba(10,43,92,.85);color:#fff;font:600 10.5px/1 ui-monospace,Menlo,monospace;padding:5px 8px;border-radius:3px}
.lk-ph--16x9{aspect-ratio:16/9}
.lk-ph--4x3{aspect-ratio:4/3}
.lk-ph--3x4{aspect-ratio:3/4}
.lk-ph--21x9{aspect-ratio:21/9}

/* ==========================================================================
   Alatunniste
   ========================================================================== */
.lk-footer{background:var(--lk-ink);color:#fff;padding:46px var(--lk-gutter) 26px}
.lk-footer h2,.lk-footer h3{color:#fff}
.lk-footer-wordmark{font-size:18px;font-weight:800;line-height:1;margin:0 0 12px;color:#fff}
.lk-footer-blurb{font-size:14px;line-height:1.7;color:var(--lk-muted-light);margin:0}
.lk-footer-head{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lk-footer-head);margin:0 0 12px}
.lk-footer .wp-block-navigation,.lk-footer-list{font-size:14px;font-weight:400}
.lk-footer a,.lk-footer .wp-block-navigation a,.lk-footer-list a{color:var(--lk-footer-link);text-decoration:none}
.lk-footer a:hover,.lk-footer .wp-block-navigation a:hover{color:#fff;text-decoration:underline}
.lk-footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;color:var(--lk-footer-link)}

/* ==========================================================================
   Pitkä teksti
   Artikkelin leipäteksti on 18px/1.75 — selvästi yli saavutettavuuden
   17px-rajan, koska lukijakunta on ikääntyvä.
   ========================================================================== */
.lk-prose{font-size:18px;line-height:1.75;color:var(--lk-body)}
.lk-prose>*+*{margin-top:22px}
.lk-prose h2{font-size:27px;line-height:1.25;margin-top:40px}
.lk-prose h3{font-size:21px;margin-top:30px}
.lk-prose ul,.lk-prose ol{padding-left:22px}
.lk-prose li+li{margin-top:8px}
.lk-lead{font-size:19px;line-height:1.6;color:var(--lk-body-soft)}

.lk-prose blockquote,.wp-block-quote{background:var(--lk-blue-tint);border-left:5px solid var(--lk-blue);border-radius:0 var(--lk-r-card) var(--lk-r-card) 0;padding:26px 30px;margin:30px 0}
.wp-block-quote p{font-size:22px;font-weight:600;line-height:1.5;color:var(--lk-navy);margin:0}
.wp-block-quote cite{display:block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--lk-blue);font-style:normal}

mark,.lk-prose mark{background:#FFF2B8;color:var(--lk-ink);padding:0 2px}

/* ==========================================================================
   Haitari (FAQ) — core/details
   ========================================================================== */
.wp-block-details{border-top:1px solid var(--lk-line);padding:0}
.wp-block-details:last-of-type{border-bottom:1px solid var(--lk-line)}
.wp-block-details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;font-size:17px;font-weight:600;color:var(--lk-navy)}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary::after{content:"+";font-size:24px;font-weight:400;color:var(--lk-blue);line-height:1;transition:transform .18s ease}
.wp-block-details[open] summary::after{content:"\00d7";transform:rotate(180deg)}
.wp-block-details>*:not(summary){margin:0 0 18px;font-size:16px;line-height:1.7;color:var(--lk-body);max-width:68ch}

/* ==========================================================================
   Sivutus
   ========================================================================== */
.wp-block-query-pagination{justify-content:center;gap:8px;margin-top:40px}
.wp-block-query-pagination-numbers .page-numbers{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--lk-line);border-radius:7px;font-size:14px;font-weight:600;color:var(--lk-ink);text-decoration:none}
.wp-block-query-pagination-numbers .page-numbers.current{background:var(--lk-navy);border-color:var(--lk-navy);color:#fff}
.wp-block-query-pagination-next,.wp-block-query-pagination-previous{border:1px solid var(--lk-line);border-radius:var(--lk-r-pill);padding:10px 18px;font-size:14px;font-weight:600;color:var(--lk-ink);text-decoration:none}

/* ==========================================================================
   Ristikot
   Suunnittelun sommittelut ovat CSS-ristikoita, ei lohkosarakkeita.
   Syy: core/columns tuottaa prosenttileveydet ja flexin, jolloin
   "1fr 520px" tai "96px 1fr auto" ei ole ilmaistavissa — ja juuri ne
   kiinteät mitat tekevät tästä suunnasta ryhdikkään. Ryhmälohko saa
   siis luokan ja ristikko tulee täältä.
   ========================================================================== */
.lk-brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto}

/* Tunnus kuvalohkona.
   Kun yhdistys korvaa tekstitunnuksen oikealla logolla, se on tavallinen
   kuvalohko — ja kuvalohkolla on oletusmarginaali, joka nostaa logon
   ylätunnisteen pystykeskityksestä ylöspäin. Nollataan se, ja rajataan
   korkeus niin ettei iso logotiedosto kasvata palkkia. */
.lk-header figure,
.lk-header .wp-block-image{margin:0;flex:0 0 auto;line-height:0}
.lk-header .wp-block-image img{display:block;width:auto;max-height:52px;height:auto}
.lk-brand:hover .lk-wordmark-main{color:var(--lk-blue)}
.lk-header-tools{display:flex;align-items:center;gap:10px;flex:0 0 auto}

.lk-hero{display:grid;grid-template-columns:1fr 520px;gap:48px;align-items:center;background:var(--lk-bg);padding:60px var(--lk-gutter)}
.lk-hero__media{height:400px;border-radius:var(--lk-r-block)}

.lk-values{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--lk-line);border-bottom:1px solid var(--lk-line);background:var(--lk-white)}
.lk-values>*{padding:30px 32px;border-right:1px solid var(--lk-line)}
.lk-values>*:last-child{border-right:0}
.lk-values h2,.lk-values h3,.lk-values p:first-child{font-size:15px;font-weight:800;color:var(--lk-navy);margin:0 0 7px}
.lk-values p:last-child{font-size:14px;line-height:1.55;color:var(--lk-muted);margin:0}

.lk-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.lk-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.lk-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* Sisältö + sivupalkki. 1d käyttää 320px, 1e/1f 340px — ero on niin pieni
   ettei sitä erota, joten yksi mitta riittää ja sivupalkki pysyy samana
   kaikilla sivupohjilla. */
.lk-content-sidebar{display:grid;grid-template-columns:1fr 340px;gap:48px;padding:44px var(--lk-gutter)}

.lk-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px}
.lk-section-head h2{margin:0}
.lk-section-head a{font-size:14.5px;font-weight:700;color:var(--lk-blue);text-decoration:none;white-space:nowrap}
.lk-section-head a:hover{text-decoration:underline}

.lk-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}

/* Kapea sivupohja (900px kanvaasi suunnittelussa = 836px sisältö). */
/* Yksi kehysleveys koko sivustolle. Aiemmin arkistot olivat 836px ja
   yhteyssivu 620px, jolloin niiden sisältö ei osunut ylätunnisteen eikä
   alatunnisteen kanssa samaan sarakkeeseen — sivu näytti siirtyvän
   sivusuunnassa kun linkkiä klikkasi. Kehys EI saa olla sekä max-widthillä
   rajattu että sisäänpäin padattu: silloin sisältö jää kahden kourun verran
   kapeammaksi kuin kehys, ja ero näkyy juuri ylä- ja alatunnisteeseen
   verrattuna. Rajaus jätetään lohkon constrained-asettelulle.
   Lukukelpoinen rivinpituus hoidetaan
   sisältä päin (.lk-form-width ja lomakkeet), ei kehystä kaventamalla. */
.lk-narrow{padding-inline:var(--lk-gutter)}
.lk-form-width{max-width:620px;margin-inline:auto}

/* ==========================================================================
   Sivupohjakohtaiset
   ========================================================================== */
/* post-terms renderöi kääreen ja linkit sen sisään, joten chip-tyyli
   annetaan kääreelle ja linkit perivät värin. */
.lk-chip a,.lk-tag a,.lk-pill a{color:inherit;text-decoration:none}
.lk-meta a{color:inherit;text-decoration:none}
.lk-meta a:hover{text-decoration:underline}
.lk-meta .wp-block-post-terms{color:var(--lk-muted)}

/* Haku */
.wp-block-search__inside-wrapper{gap:10px}
.wp-block-search .wp-block-search__input{border:1px solid var(--lk-line);border-radius:var(--lk-r-ctrl);padding:13px 14px;font-size:16px;color:var(--lk-body)}
.wp-block-search .wp-block-search__input:focus{border-color:var(--lk-blue)}
.wp-block-search .wp-block-search__button{background:var(--lk-blue);color:#fff;border:0;border-radius:var(--lk-r-ctrl);padding:13px 22px;font-size:15px;font-weight:700;cursor:pointer}
.wp-block-search .wp-block-search__button:hover{background:var(--lk-blue-dark)}
.lk-search-main .wp-block-search__input{border-width:1.5px;border-color:var(--lk-blue);font-size:17px;font-weight:500}

/* Hakutulokset — 1i. Rivit erotellaan hiusviivalla, ei kortilla. */
.lk-result{border-bottom:1px solid var(--lk-line)}
.lk-results>li:last-child .lk-result{border-bottom:0}

/* 404 — 1n */
.lk-404__number{font-size:82px;font-weight:800;letter-spacing:-.04em;line-height:1;color:#D8E4F5;margin:0}
.lk-404__text{font-size:16px;line-height:1.6;color:var(--lk-muted);max-width:40ch;margin-inline:auto}
.lk-404__search{max-width:400px;margin-inline:auto;margin-block:26px}
/* Pilleririvi tulee PHP-kuviosta eikä ryhmälohkosta, joten flex on
   annettava tässä — WP:n layout-luokkia ei ole. */
.lk-404__links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}

/* Arkistokortti — kuva on kortin yläreunassa, joten kortin oma ylätäyte on 0
   ja sisältö saa sivutäytteet erikseen. */
.lk-card .wp-block-post-featured-image{margin:0}
.lk-card .wp-block-post-featured-image img{width:100%;object-fit:cover;display:block}
.lk-card .wp-block-post-title{margin:0 0 8px}
.lk-card .wp-block-post-excerpt__excerpt{margin:0}
.lk-card .wp-block-post-excerpt{margin:0}

/* Sivupalkin lista-otsikot eivät ole navy-otsikoita vaan tavallista tekstiä. */
.lk-card--soft .wp-block-post-title a{color:var(--lk-ink);text-decoration:none}
.lk-card--soft .wp-block-post-title a:hover{color:var(--lk-blue)}
/* ==========================================================================
   Responsiivisuus
   Murtokohdat suunnittelun mukaan: kaksipalstaiset ristikot romahtavat
   ~900px:ssä, uutisruudukko 3 → 2 → 1, sankari pinoaa kuva ensin ≤700px.
   ========================================================================== */
@media (max-width:900px){
  .lk-two-col,.lk-content-sidebar{grid-template-columns:1fr!important;gap:36px!important}
  .lk-grid-3{grid-template-columns:repeat(2,1fr)!important}
  .lk-values{grid-template-columns:repeat(2,1fr)!important}
  .lk-values>*{border-right:0!important;border-bottom:1px solid var(--lk-line)}
  .lk-footer-grid{grid-template-columns:repeat(2,1fr)!important;gap:30px!important}
  .lk-utility{font-size:12px}
  .lk-utility .lk-utility__left{display:none}
}
@media (max-width:700px){
  .lk-grid-3,.lk-grid-2{grid-template-columns:1fr!important}
  .lk-hero{grid-template-columns:1fr!important;gap:28px!important}
  .lk-hero__media{order:-1}
  .lk-values{grid-template-columns:1fr!important}
  .lk-footer-grid{grid-template-columns:1fr!important}
  .lk-prose{font-size:17px}
}

/* ==========================================================================
   Lisäosan lohkot
   Merkkaus tulee liedon-kokoomus-core -lisäosasta, tyylit tästä. Jako on
   tarkoituksellinen: lohkot ovat sisältöä (säilyvät teeman vaihtuessa),
   ulkoasu on teemaa. Siksi lohkojen merkkaus on semanttista listaa ja
   taulukkoa — ilman näitä tyylejä se on ruma mutta luettava.
   ========================================================================== */

/* Tapahtumalista — 1a §5 */
.lk-event-list{list-style:none;margin:0;padding:0;border:1px solid var(--lk-line);border-radius:var(--lk-r-block);overflow:hidden}
.lk-event-row{display:grid;grid-template-columns:96px 1fr auto;gap:24px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--lk-line)}
.lk-event-row:last-child{border-bottom:0}
.lk-event-row__title{font-size:19px;font-weight:700;line-height:1.3;color:var(--lk-ink);margin:0 0 5px}
.lk-event-row__title a{color:inherit;text-decoration:none}
.lk-event-row__title a:hover{color:var(--lk-blue)}
.lk-event-row__details{font-size:14.5px;color:var(--lk-muted);margin:0}
.lk-datebox--empty{background:var(--lk-bg);min-height:56px}

/* Ohjelma-aikajana — 1e */
.lk-programme__list{list-style:none;margin:0;padding:0 0 0 22px;border-left:2px solid var(--lk-line)}
.lk-programme__item{display:block;padding-bottom:18px}
.lk-programme__item:last-child{padding-bottom:0}
.lk-programme__time{display:block;font-size:15px;font-weight:700;color:var(--lk-blue);margin-bottom:2px}
.lk-programme__text{display:block;font-size:17px;line-height:1.5;color:var(--lk-body)}

/* Ilmoittautuminen — 1e */
.lk-signup{padding:24px}
.lk-signup__title{font-size:19px;font-weight:800;margin:0 0 6px}
.lk-signup__meta{font-size:14px;line-height:1.5;color:var(--lk-muted);margin:0 0 14px}
.lk-capacity{height:7px;border-radius:var(--lk-r-pill);background:var(--lk-line);overflow:hidden;margin-bottom:16px}
.lk-capacity__fill{display:block;height:100%;background:var(--lk-blue);border-radius:var(--lk-r-pill)}
.lk-signup__closed{font-size:15px;font-weight:600;color:var(--lk-muted);margin:0}
.lk-signup__todo{font-size:14px;color:var(--lk-muted-light);font-style:italic;margin:0}

/* Teemani — 1f */
.lk-theme-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--lk-theme-cols,2),1fr);gap:18px}
.lk-theme-card{padding:20px}
.lk-theme-card__title{font-size:17.5px;font-weight:700;color:var(--lk-ink);margin:0 0 7px;line-height:1.3}
.lk-theme-card__body{font-size:15px;line-height:1.6;color:var(--lk-muted);margin:0}

/* Luottamustehtävät — 1f.
   Aikaväli on nimen alla haaleana toisena rivinä, ei omana sarakkeenaan:
   mockupissa rivi on 1fr/auto (nimi vasemmalle, rooli oikealle), ja kolmas
   sarake ahtaisi sen 900px:n sivupohjassa. */
.lk-positions{list-style:none;margin:0;padding:0;border:1px solid var(--lk-line);border-radius:var(--lk-r-block);overflow:hidden}
.lk-position{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;padding:15px 18px;border-bottom:1px solid var(--lk-line)}
.lk-position:last-child{border-bottom:0}
.lk-position__name{display:block;font-size:16px;color:var(--lk-ink)}
.lk-position__range{display:block;font-size:13px;color:var(--lk-muted);margin-top:2px;font-variant-numeric:tabular-nums}
.lk-position__role{font-size:15px;color:var(--lk-muted);text-align:right}
/* Päättynyt tehtävä on historiaa, ei nykytilaa — se saa vähemmän painoa. */
.lk-position--past .lk-position__name{color:var(--lk-muted)}

/* Luottamushenkilöhakemisto — 1j */
.lk-directory__group+.lk-directory__group{margin-top:40px}
.lk-directory__heading{font-size:24px;font-weight:800;margin:0 0 18px}
.lk-person-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lk-person{display:flex;align-items:center;gap:14px;padding:16px}
.lk-person__avatar{width:52px;height:52px;flex:0 0 52px;border-radius:var(--lk-r-pill);object-fit:cover}
.lk-person__avatar--empty{background:var(--lk-blue-tint);display:block}
.lk-person__name{font-size:15.5px;font-weight:700;margin:0;line-height:1.3}
.lk-person__name a{color:var(--lk-ink);text-decoration:none}
.lk-person__name a:hover{color:var(--lk-blue)}
.lk-person__role{font-size:12.5px;color:var(--lk-muted);margin:2px 0 0}
.lk-person__phone{font-size:12.5px;font-weight:600;margin:2px 0 0}
.lk-person__phone a{color:var(--lk-blue);text-decoration:none}

.lk-table-scroll{overflow-x:auto}
.lk-table{width:100%;border-collapse:collapse;border:1px solid var(--lk-line);border-radius:var(--lk-r-block);overflow:hidden}
.lk-table th,.lk-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--lk-line);font-size:15px}
.lk-table thead th{background:var(--lk-bg);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lk-muted)}
.lk-table tbody th{font-weight:600;color:var(--lk-ink)}
.lk-table tbody td{color:var(--lk-muted)}
.lk-table tbody tr:last-child th,.lk-table tbody tr:last-child td{border-bottom:0}
.lk-table a{color:var(--lk-blue);text-decoration:none}
.lk-table a:hover{text-decoration:underline}

/* Ehdokasruudukko — 1k */
.lk-filters,.lk-sort{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}
.lk-filter__field{display:block}
.lk-filter__field--search{flex:1 1 220px;min-width:0}
.lk-filters .lk-input,.lk-filters .lk-select,.lk-sort .lk-select{padding:11px 13px;font-size:15px;width:auto;min-width:130px}
.lk-filters .lk-input{width:100%}
.lk-candidate-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lk-candidate{overflow:hidden}
.lk-candidate__link{display:block;text-decoration:none;color:inherit}
.lk-candidate__media{position:relative;display:block}
.lk-candidate__media img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.lk-candidate__media .lk-ph{display:block;width:100%}
.lk-candidate__number{position:absolute;left:10px;bottom:10px;background:var(--lk-navy);color:#fff;font-size:15px;font-weight:800;padding:4px 9px;border-radius:5px;line-height:1.2}
.lk-candidate__body{display:block;padding:14px}
.lk-candidate__name{display:block;font-size:15px;font-weight:700;color:var(--lk-ink);line-height:1.3}
.lk-candidate__occupation{display:block;font-size:12.5px;color:var(--lk-muted);margin-top:3px}

/* Vaalilaskuri — 1k. Sijaitsee navy-bändissä, joten reuna on valkoista läpi. */
.lk-countdown{display:inline-flex;flex-direction:column;align-items:center;border:1px solid rgba(255,255,255,.3);border-radius:var(--lk-r-block);padding:16px 22px}
.lk-countdown__number{font-size:40px;font-weight:800;line-height:1}
.lk-countdown__label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:6px;opacity:.85}

/* Suodatinpillerit — 1h */
.lk-filter-chips{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:26px}
.lk-filter-chips__list{display:flex;flex-wrap:wrap;gap:8px}
.lk-sort{margin:0}
.lk-sort .lk-select{padding:9px 12px;font-size:13.5px}

/* Sisällysluettelo — 1d */
.lk-toc{padding:20px}
.lk-toc__title{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lk-muted);margin:0 0 12px}
.lk-toc__list{list-style:none;margin:0;padding:0}
.lk-toc__item{margin-bottom:9px;font-size:14.5px;line-height:1.45}
.lk-toc__item:last-child{margin-bottom:0}
.lk-toc__item a{color:var(--lk-body);text-decoration:none}
.lk-toc__item a:hover{color:var(--lk-blue);text-decoration:underline}

.lk-empty{color:var(--lk-muted);font-size:16px}

@media (max-width:900px){
  .lk-person-grid{grid-template-columns:repeat(2,1fr)}
  .lk-candidate-grid{grid-template-columns:repeat(3,1fr)}
  .lk-theme-grid{grid-template-columns:1fr}
  .lk-filter-chips{flex-direction:column;align-items:stretch}
}
@media (max-width:700px){
  /* Tapahtumarivi pinoutuu: päivälaatikko otsikon päälle, painike alle. */
  .lk-event-row{grid-template-columns:1fr;gap:12px;justify-items:start}
  .lk-datebox{display:inline-flex;flex-direction:column;padding:8px 14px}
  .lk-person-grid{grid-template-columns:1fr}
  .lk-candidate-grid{grid-template-columns:repeat(2,1fr)}
  .lk-position{grid-template-columns:1fr;gap:4px}
  .lk-position__role{text-align:left}
}

/* Liity jäseneksi -kaista — 1a §6.
   Mockupin minilomake on korvattu kortilla joka vie puolueen keskitettyyn
   lomakkeeseen; mitat ja rytmi ovat samat kuin lomakekortissa oli. */
.lk-join{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center;padding:54px var(--lk-gutter)}
.lk-join__lead{font-size:17.5px;line-height:1.6;max-width:52ch;margin:0 0 22px}
.lk-join__benefits{list-style:none;display:flex;flex-wrap:wrap;gap:26px;margin:0;padding:0;font-size:14.5px;font-weight:600;color:#fff}
.lk-join__benefits li::before{content:"✓";margin-right:7px}
.lk-join__card{background:var(--lk-white);border-radius:var(--lk-r-block);padding:26px}
.lk-join__card-label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lk-blue);margin:0 0 12px}
.lk-join__card-text{font-size:15px;line-height:1.6;color:var(--lk-muted);margin:0 0 18px}

/* Etusivun uutisruudukon kortit ovat ilman reunaa (1a), toisin kuin
   arkistossa (1h) — siksi kuva saa oman pyöristyksensä eikä kortin. */
.lk-band .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}

@media (max-width:900px){
  .lk-join{grid-template-columns:1fr;gap:32px}
  .lk-join__benefits{gap:14px}
}
@media (max-width:700px){
  .lk-hero{padding-block:40px}
  .lk-hero__media{height:auto;aspect-ratio:4/3}
  .lk-join__benefits{flex-direction:column;gap:10px}
}

/* ==========================================================================
   Sisältötyyppien sivupohjat
   ========================================================================== */

/* Tapahtuman sankari — 1e. Navy-kaista, valkoinen päivälaatta vasemmalla. */
.lk-event-hero{display:grid;grid-template-columns:120px 1fr;gap:30px;align-items:center;padding:40px var(--lk-gutter) 36px}
.lk-event-hero h1{color:#fff}
.lk-event-hero__meta{gap:28px;font-size:16px;font-weight:500;color:var(--lk-on-navy)}
.lk-event-hero__meta p{margin:0}
.lk-datetile{background:var(--lk-white);border-radius:var(--lk-r-box);padding:14px 10px;text-align:center}
.lk-datetile p{margin:0}
.lk-datetile__month{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--lk-blue)}
.lk-datetile__day{font-size:52px;font-weight:800;line-height:1;color:var(--lk-navy);margin:2px 0}
.lk-datetile__year{font-size:13px;font-weight:600;color:var(--lk-muted)}
.lk-details p{margin:0 0 6px;font-size:15px;line-height:1.6;color:var(--lk-muted)}
.lk-details p:last-child{margin-bottom:0}

/* Päättäjän sankari — 1f. 3:4-kuva vasemmalla, tiedot oikealla. */
.lk-person-hero{display:grid;grid-template-columns:420px 1fr;align-items:stretch;background:var(--lk-bg)}
.lk-person-hero__media{position:relative;min-height:470px}
.lk-person-hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.lk-person-hero__media .wp-block-post-featured-image{margin:0;height:100%}
/* Ehdokasnumero pyöreässä navy-ympyrässä vasemmassa yläkulmassa. */
.lk-person-hero__number{position:absolute;top:22px;left:22px;width:74px;height:74px;border-radius:var(--lk-r-pill);background:var(--lk-navy);color:#fff;font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0}
.lk-person-hero__body{padding:44px var(--lk-gutter);display:flex;flex-direction:column;justify-content:center}
.lk-person-hero__name{font-size:clamp(34px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--lk-navy)}
.lk-person-hero__role{font-size:20px;font-weight:500;color:var(--lk-body-soft);margin:0 0 18px}
.lk-person-hero__quote{font-size:20px;line-height:1.6;color:var(--lk-body);max-width:52ch;margin:0 0 20px}
.lk-person-hero__quote::before{content:"”"}
.lk-person-hero__quote::after{content:"”"}
.lk-theme-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.lk-theme-pills a{background:var(--lk-blue-tint);color:var(--lk-navy);border-radius:var(--lk-r-pill);padding:8px 16px;font-size:14px;font-weight:600;text-decoration:none}
.lk-theme-pills a:hover{background:#DCE6F4}
.lk-others .lk-btn{margin-top:4px}

/* Vaalisivun banneri — 1k */
.lk-election-banner{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between;padding:40px var(--lk-gutter)}
.lk-election-banner h1{color:#fff}

/* Sivu + sivuvalikko — 1g */
/* Yhden sivun osiossa lk/section-nav ei tulosta mitään, jolloin kiinteä
   250px jäisi tyhjäksi sarakkeeksi ja teksti kapenisi ilman syytä.
   Sarake syntyy siis vasta kun valikko on olemassa. */
.lk-page-sidebar{display:grid;grid-template-columns:1fr;gap:44px;padding:44px var(--lk-gutter) 56px}
.lk-page-sidebar:has(.lk-subnav){grid-template-columns:250px 1fr}
.lk-subnav{position:sticky;top:24px;align-self:start}
.lk-subnav__title{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--lk-muted);margin:0 0 10px;padding:0 14px}
.lk-subnav ul{list-style:none;margin:0;padding:0}
.lk-subnav li{margin:0}
.lk-subnav a{display:block;padding:11px 14px;border-radius:7px;font-size:15px;color:var(--lk-body);text-decoration:none}
.lk-subnav a:hover{background:var(--lk-bg)}
.lk-subnav .is-current>a,.lk-subnav [aria-current="page"]{background:var(--lk-blue-tint);color:var(--lk-navy);font-weight:700}
.lk-subnav .is-ancestor>a{color:var(--lk-navy);font-weight:600}

@media (max-width:900px){
  .lk-event-hero{grid-template-columns:1fr;gap:20px;justify-items:start}
  .lk-datetile{display:inline-block;padding:10px 18px}
  .lk-datetile__day{font-size:38px}
  .lk-person-hero{grid-template-columns:1fr}
  .lk-person-hero__media{min-height:0;aspect-ratio:3/4;max-height:520px}
  .lk-person-hero__body{padding-block:32px}
  .lk-page-sidebar{grid-template-columns:1fr;gap:28px}
  .lk-page-sidebar:has(.lk-subnav){grid-template-columns:1fr}
  .lk-subnav{position:static;border-bottom:1px solid var(--lk-line);padding-bottom:12px}
  .lk-election-banner{flex-direction:column;align-items:flex-start}
}
@media (max-width:700px){
  .lk-event-hero__meta{flex-direction:column;gap:6px}
}

/* ==========================================================================
   Lomakkeet
   Merkkaus tulee lisäosasta (inc/forms.php). Kenttien perustyylit ovat jo
   ylempänä (.lk-input, .lk-label, .lk-error); tässä vain kokoonpano.
   ========================================================================== */
.lk-form{display:block}
.lk-form .lk-field:last-of-type{margin-bottom:18px}
.lk-req{color:var(--lk-error);font-weight:700}
.lk-form__privacy{font-size:12.5px;line-height:1.5;color:var(--lk-muted);margin:12px 0 0}

/* Virheilmoitus lomakkeen yläpuolella. role="status" lukee sen ääneen,
   joten se on löydettävissä myös ilman että kenttiä selataan läpi. */
.lk-notice{display:block}

/* Yhteydenottolomake — 1m. Kapea palsta, kuten suunnittelussa. */


/* Jäsenkirjekortti — 1d sivupalkki */
.lk-newsletter{padding:24px}
.lk-newsletter__title{font-size:19px;font-weight:800;color:#fff;margin:0 0 6px}
.lk-newsletter__body{font-size:14.5px;line-height:1.6;color:var(--lk-on-navy);margin:0 0 16px}
.lk-newsletter .lk-label{color:#fff}
.lk-newsletter .lk-form__privacy{color:var(--lk-on-navy)}
/* Tummalla pohjalla virheteksti tarvitsee vaaleamman sävyn pysyäkseen
   luettavana; --lk-error on mitoitettu vaaleaa taustaa varten. */
.lk-newsletter .lk-error{color:#FFB4AB}
.lk-newsletter .lk-notice--error{background:rgba(255,255,255,.12);color:#fff;border-left-color:#FFB4AB}
.lk-newsletter .lk-notice--ok{background:rgba(255,255,255,.12);color:#fff;border-left-color:var(--lk-on-navy-eyebrow)}

/* Ilmoittautumiskortti — 1e. Lomake istuu sinireunaisen kortin sisään. */
.lk-signup .lk-form-wrap{margin-top:4px}
.lk-signup .lk-label{font-size:12.5px}
.lk-signup .lk-input,.lk-signup .lk-textarea{padding:11px 12px;font-size:16px}
.lk-signup .lk-field{margin-bottom:10px}
.lk-signup .lk-form__privacy{margin-top:10px}

/* ==========================================================================
   Omat tiedot (jäsenportaali)
   Käyttäjäkunta on sama kuin lukijakunta: moni on ikäihminen eikä tunne
   wp-adminia. Siksi kentät ovat isompia kuin hallintapaneelissa ja jokainen
   ryhmä on selvästi erotettu.
   ========================================================================== */
.lk-portal{max-width:740px}
.lk-portal__title{font-size:27px;font-weight:800;color:var(--lk-navy);margin:0 0 8px}
.lk-portal__lead{font-size:16px;line-height:1.6;color:var(--lk-muted);margin:0 0 24px}
.lk-portal__help{font-size:14px;margin-top:18px}
.lk-help{font-size:13px;line-height:1.5;color:var(--lk-muted);margin:5px 0 0}
.lk-help--warn{color:var(--lk-body);background:var(--lk-blue-tint);border-left:4px solid var(--lk-blue);padding:12px 14px;border-radius:0 var(--lk-r-card) var(--lk-r-card) 0;font-size:14px}

/* Lukittu osa: nimi ja ehdokasnumero ovat yhdistyksen päätöksiä. */
.lk-portal__locked{background:var(--lk-bg);border-radius:var(--lk-r-box);padding:18px 20px;margin-bottom:24px}
.lk-portal__locked-name{font-size:21px;font-weight:800;color:var(--lk-navy);margin:0;display:flex;align-items:center;gap:10px}
.lk-portal__number{background:var(--lk-navy);color:#fff;font-size:14px;font-weight:800;border-radius:var(--lk-r-sm);padding:3px 9px}
.lk-portal__locked-note{font-size:13px;line-height:1.5;color:var(--lk-muted);margin:6px 0 0}

.lk-portal__portrait-row{display:flex;gap:16px;align-items:flex-start}
.lk-portal__portrait{width:96px;height:128px;flex:0 0 96px;object-fit:cover;border-radius:var(--lk-r-card);display:block}
.lk-portal__portrait--empty{background:var(--lk-placeholder)}
.lk-portal__portrait-row>div{flex:1;min-width:0}
.lk-portal input[type=file]{padding:10px;font-size:14px}

/* Ryhmät (teemat, luottamustehtävät, some) */
.lk-portal__group{border:1px solid var(--lk-line);border-radius:var(--lk-r-box);padding:18px;margin:0 0 20px}
.lk-portal__group legend{padding:0 8px;font-size:15px;font-weight:700;color:var(--lk-navy)}
.lk-portal__group.lk-field--invalid{border-color:var(--lk-error);border-width:1.5px}

.lk-repeat__rows{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.lk-repeat__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) 36px;gap:12px;align-items:end;background:var(--lk-bg);border-radius:var(--lk-r-card);padding:14px}
.lk-repeat__field{display:flex;flex-direction:column;gap:4px;min-width:0}
.lk-repeat__label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--lk-muted)}
.lk-repeat__field--year{max-width:150px}
.lk-repeat__remove{width:36px;height:36px;border:1px solid var(--lk-line);border-radius:var(--lk-r-ctrl);background:var(--lk-white);color:var(--lk-error);font-size:20px;line-height:1;cursor:pointer;justify-self:center}
.lk-repeat__remove:hover{border-color:var(--lk-error)}
.lk-repeat__add{margin-top:14px}

/* "Tehtävä jatkuu edelleen" vie oman rivinsä, jotta se ei jää
   vuosikenttien väliin huomaamattomaksi. */
.lk-repeat__row--position .lk-repeat__ongoing{grid-column:1/-1;font-size:14px;padding-top:2px}
.lk-portal input:disabled{background:var(--lk-line);color:var(--lk-muted);cursor:not-allowed}

/* Kirjautumislomake — WordPressin oma merkkaus teeman tyyleillä. */
.lk-portal .login-username,.lk-portal .login-password{margin-bottom:14px}
.lk-portal .login-username label,.lk-portal .login-password label{display:block;font-size:13px;font-weight:600;color:var(--lk-ink);margin-bottom:6px}
.lk-portal .login-username input,.lk-portal .login-password input{width:100%;border:1px solid var(--lk-line);border-radius:var(--lk-r-ctrl);padding:14px;font:400 16px/1.4 inherit;color:var(--lk-body);background:var(--lk-white)}
.lk-portal .login-username input:focus,.lk-portal .login-password input:focus{border-color:var(--lk-blue)}
.lk-portal .login-remember{font-size:14px;margin-bottom:16px}
.lk-portal .login-remember input{margin-right:8px;accent-color:var(--lk-blue)}
.lk-portal .login-submit input{background:var(--lk-blue);color:#fff;border:0;border-radius:var(--lk-r-ctrl);padding:15px 22px;font-size:16px;font-weight:700;cursor:pointer;width:100%}
.lk-portal .login-submit input:hover{background:var(--lk-blue-dark)}

@media (max-width:700px){
  .lk-repeat__row{grid-template-columns:1fr;gap:10px}
  .lk-repeat__remove{justify-self:start}
  .lk-repeat__field--year{max-width:none}
  .lk-portal__portrait-row{flex-direction:column}
}

/* ==========================================================================
   Ehdokasnumerot
   Taustaväri tulee vaalien termiltä inline-tyylinä, koska se on sisältöä
   eikä teeman päätös: kunta- ja aluevaalit pidetään samana päivänä, ja
   kaksi samanväristä ympyrää ei kertoisi kumpi numero on kummasta.
   Tekstiväri lasketaan taustan luminanssista (ks. lkc_readable_text_color).
   ========================================================================== */
.lk-numbers{list-style:none;margin:0;padding:0;position:absolute;top:22px;left:22px;display:flex;flex-direction:column;gap:10px;z-index:2}
.lk-number{display:flex;align-items:center;gap:10px}
.lk-number__badge{width:74px;height:74px;flex:0 0 74px;border-radius:var(--lk-r-pill);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;line-height:1}
.lk-number__label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--lk-ink);padding:5px 10px;border-radius:var(--lk-r-sm);white-space:nowrap}

/* Useampi numero: pienennetään hieman, jotta pino mahtuu kuvan päälle. */
.lk-numbers--multi .lk-number__badge{width:58px;height:58px;flex-basis:58px;font-size:23px}

/* Ruudukon pieni numerorasia saa värinsä samalta funktiolta. */
.lk-candidate__number{background:var(--lk-navy);color:#fff}

@media (max-width:700px){
  .lk-numbers{top:14px;left:14px;gap:8px}
  .lk-number__badge{width:52px;height:52px;flex-basis:52px;font-size:21px}
  .lk-numbers--multi .lk-number__badge{width:46px;height:46px;flex-basis:46px;font-size:18px}
}

/* ==========================================================================
   Sisällön enimmäisleveys
   Suunnittelu on 1240px leveä kanvaasi, jonka sisältöpalsta on 1152px.
   Täysleveät osiot venyivät kuitenkin näytön levyisiksi, joten isolla
   näytöllä rivit kasvoivat lukukelvottoman pitkiksi ja sommittelu hajosi.

   Rajaus tehdään SISÄPEHMUSTEELLA eikä max-widthillä: silloin tausta
   (navy-kaistat, alatunniste, hiusviivat) jatkuu reunasta reunaan kuten
   kuuluukin, mutta teksti pysyy keskitettynä ja mitallisena. max-width
   kaventaisi myös taustan, jolloin navy-kaistasta tulisi kelluva laatikko.

   Tämän lohkon on oltava tiedostossa osioiden MÄÄRITTELYJEN JÄLKEEN, koska
   se ylikirjoittaa niiden padding-arvot samalla spesifisyydellä.
   ========================================================================== */
:root{--lk-wmax:1180px}

.lk-hero,
.lk-values,
.lk-content-sidebar,
.lk-page-sidebar,
.lk-event-hero,
.lk-person-hero,
.lk-election-banner,
.lk-join,
.lk-footer{
  padding-inline:max(var(--lk-gutter), (100% - var(--lk-wmax)) / 2)
}

/* Päättäjän sankari on kuva + teksti reunasta reunaan, joten siinä
   rajataan vain tekstipuoli — kuvan kuuluu jatkua ulos asti. */
.lk-person-hero{padding-inline:0}
.lk-person-hero__body{
  padding-inline:var(--lk-gutter);
  max-width:calc(var(--lk-wmax) / 2 + var(--lk-gutter));
  width:100%
}

@media (max-width:900px){
  .lk-person-hero__body{max-width:none}
}

/* ==========================================================================
   Rivinpituus

   Kehys on koko sivustolla sama (--lk-wmax), jotta jokaisen sivun sisältö
   osuu ylätunnisteen ja alatunnisteen kanssa samaan sarakkeeseen. Kehys on
   kuitenkin liian leveä luettavaksi: 1180px 18px:n tekstiä on noin 130
   merkkiä rivillä, ja silmä kadottaa paikkansa rivin vaihtuessa.

   Rajaus EI kuulu kehyselementille. Ydin keskittää constrained-asettelun
   lapset (margin:auto !important), joten kapeaksi rajattu kehys keskittyisi
   — ja leipäteksti alkaisi eri kohdasta kuin otsikko. Vasemmalle pakottaminen
   taas veisi tekstin kehyksen ULKOPUOLELLE, kourun reunaan asti, koska
   kehyksen vasen reuna syntyy nimenomaan keskityksestä.

   Siksi kehys jätetään täyteen leveyteensä ja mitta annetaan sen SISÄLLÄ
   oleville tekstielementeille. Ne ovat lohkoelementtejä, joten ne alkavat
   kehyksen vasemmasta reunasta itsestään.

   Mitta on pikseleinä eikä ch-yksikkönä, jotta otsikot ja kappaleet päättyvät
   samaan kohtaan: ch skaalautuu elementin omaan fonttikokoon, jolloin h2
   olisi selvästi leveämpi kuin sen alla oleva kappale.
   ========================================================================== */
:root{--lk-measure:660px}
.lk-prose :is(p,ul,ol,blockquote,h2,h3,h4,h5,figcaption){max-width:var(--lk-measure);margin-inline:0 auto!important}

/* Lomake on aina kapea riippumatta kehyksestä: leveä tekstikenttä näyttää
   siltä että siihen odotetaan pitkää vastausta, vaikka kysytään nimeä.
   Lomake ei ole asettelun lapsi vaan lohkokääreen sisällä, joten tavallinen
   margin-inline riittää — !important ei ole tarpeen. */
.lk-form{max-width:620px;margin-inline:0}
.lk-newsletter .lk-form{max-width:none}

/* 404 on keskitetty, joten sille oma kapeampi mitta — keskitetty teksti on
   raskaampaa lukea kuin vasemmalle tasattu. */
.lk-404{max-width:52ch;margin-inline:auto;text-align:center}

/* ==========================================================================
   Kartta
   OpenStreetMap + Leaflet. Laattoja ei voi tyylitellä palvelun päässä ilman
   maksullista tarjoajaa, joten puolueen ilme tehdään kehyksestä, merkistä ja
   laattojen kevyestä sävytyksestä.
   ========================================================================== */
.lk-map{margin-top:40px}
.lk-map__title{font-size:27px;line-height:1.25;color:var(--lk-navy);margin:0 0 14px}
.lk-map__address{font-size:16px;line-height:1.6;color:var(--lk-body);margin:0 0 14px}
.lk-map__address strong{color:var(--lk-navy)}

.lk-map__frame{position:relative;border:1px solid var(--lk-line);border-radius:var(--lk-r-block);overflow:hidden;background:var(--lk-bg)}
.lk-map__canvas{aspect-ratio:16/9;width:100%}
@media (max-width:600px){ .lk-map__canvas{aspect-ratio:4/3} }

/* Laatat sävytetään hieman sinsempään ja rauhallisemmaksi, jotta kartta
   istuu muuhun ilmeeseen. Suodatus kohdistuu VAIN laattatasoon: Leafletin
   tekijätieto on lisenssiehto ja sen on pysyttävä luettavana. */
.lk-map__canvas .leaflet-tile-pane{filter:saturate(.72) contrast(1.04) hue-rotate(-8deg)}

.lk-map__canvas .leaflet-control-attribution{background:rgba(255,255,255,.92);font-size:11px;color:var(--lk-muted)}
.lk-map__canvas .leaflet-control-attribution a{color:var(--lk-blue)}
.lk-map__canvas .leaflet-bar a{color:var(--lk-navy);border-bottom-color:var(--lk-line)}
.lk-map__canvas .leaflet-bar a:hover{background:var(--lk-blue-tint)}
.lk-map__canvas .leaflet-popup-content-wrapper{border-radius:var(--lk-r-input);font-weight:600;color:var(--lk-navy)}

/* Merkki on CSS:llä piirretty, ei kuvatiedosto: saa puolueen sinisen eikä
   lisäosan tarvitse toimittaa Leafletin omia kuvia. */
.lk-map__pin{background:none;border:0}
.lk-map__pin-dot{display:block;width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--lk-blue);border:3px solid #fff;box-shadow:0 1px 4px rgba(10,43,92,.45);transform:rotate(-45deg);margin:0 auto}

/* Suostumuspeite. Näkyy laattojen tilalla kunnes kävijä pyytää kartan. */
.lk-map__consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:var(--lk-bg)}
.lk-map__consent-text{max-width:42ch;margin:0;font-size:14.5px;line-height:1.6;color:var(--lk-muted)}

.lk-map__link{display:inline-block;margin-top:12px;font-size:15px;font-weight:600;color:var(--lk-blue)}
.lk-map--no-coords .lk-map__link{margin-top:0}

/* Ohjelman otsikko tulee nyt lohkolta, jotta tyhjä ohjelma vie otsikonkin. */
.lk-programme__title{font-size:27px;line-height:1.25;color:var(--lk-navy);margin:0 0 18px}
.lk-programme{margin-top:40px}


/* ==========================================================================
   Kapein näkymä (320px)

   320 pikseliä on kapein yleisesti tuettu leveys. Siinä ylätunnisteen sisältö
   vaati 343px tilaa 280 pikselin sisällä, jolloin valikkopainike jäi 43px
   oikean reunan ULKOPUOLELLE. Painike oli olemassa mutta sitä ei voinut
   painaa — koko valikko oli saavuttamattomissa kapeimmalla puhelimella.
   ========================================================================== */
@media (max-width:400px){
  .lk-header{padding-inline:14px}
  .lk-header.wp-block-group{gap:8px}

  /* Sanamerkki piilotetaan NÄKYVISTÄ mutta ei saavutettavuuspuusta:
     display:none veisi linkiltä nimen, ja tunnuslinkki jäisi nimettömäksi
     juuri siinä näkymässä jossa se on ainoa tapa palata etusivulle. */
  .lk-wordmark{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

  .lk-logo{width:34px;height:34px;flex-basis:34px}
  .lk-header .wp-block-image img{max-height:34px}

  .lk-header-tools{gap:6px}
  .lk-header-tools .lk-btn{padding:11px 10px;font-size:12.5px}

  /* Painikkeet eivät saa kutistua tekstin tieltä: 44px on kosketusalueen
     vähimmäismitta, ja juuri valikkopainike oli se joka jäi reunan taakse. */
  .lk-nav-toggle,.lk-search-toggle{flex:0 0 44px}

  /* Osio-otsikko on rivi: otsikko vasemmalla, "Kaikki uutiset →" oikealla.
     Linkissä on white-space:nowrap, jotta nuoli ei katkea omalle rivilleen —
     mutta 320 pikselissä rivi ei mahdu, ja nowrap työnsi linkin 10px yli
     oikean reunan. Rivi katkaistaan siis kahdelle riville sen sijaan että
     sisältö valuisi ulos. */
  .lk-section-head{flex-wrap:wrap;gap:6px}
  .lk-section-head a{white-space:normal}
}

/* Lue myös — lohko piirtää korttinsa itse, jotta tyhjänä myös laatikko
   jää pois eikä sivulle jää tyhjää kehystä otsikoineen. */
.lk-related{padding:22px}
.lk-related__list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.lk-related__item{display:flex;flex-direction:column;gap:2px}
.lk-related__item a{font-size:15px;font-weight:700;line-height:1.35;color:var(--lk-navy);text-decoration:none}
.lk-related__item a:hover{color:var(--lk-blue)}
.lk-related__date{font-size:13px;color:var(--lk-muted)}