.main-content .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: var(--wp--style--global--content-size);
    width: calc(100% - 50px);
    margin-left: auto;
    margin-right: auto;
}

.alignwide .container {
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

.alignwide .alignwide {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;  
}

.alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.alignwide {
    width: calc(100% - 50px);
	max-width: calc(var(--wp--style--global--wide-size));
    margin-left: auto;
    margin-right: auto;
}

.alignwide > .iframe-container {
    width: 100%;
    max-width: none;
}
.alignwide .alignwide {
    width: 100%;
    max-width: 100%;
}
:where(.wp-block-group.has-background) {
    padding: 100px 0;
}

.is-style-dg-small-y-paddings {
    padding-top: 25px;
    padding-bottom: 25px;
}

@media (min-width: 782px) {
    .is-style-dg-small-y-paddings {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.is-style-dg-big-y-paddings {
    padding-top: 50px;
    padding-bottom: 50px;
}

@media (min-width: 782px) {
    .is-style-dg-big-y-paddings {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

.is-style-dg-small-bottom-margin {
    margin-bottom: 25px;
}

@media (min-width: 782px) {
    .is-style-dg-small-bottom-margin {
        margin-bottom: 50px;
    }
}

.is-style-dg-big-bottom-margin {
    margin-bottom: 50px;
}

@media (min-width: 782px) {
    .is-style-dg-big-bottom-margin {
        margin-bottom: 100px;
    }
}

@media (max-width: 799px) {
    .is-layout-constrained:not(.alignwide) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: calc(100% - 50px) !important;
    }
    /* Poikkeus: alignfull-osion sisällä (tai kun constrained-kontti on itse
       alignfull) ei kavenneta — sisältö täyteen 100% leveyteen. Alignfull-
       sektioilla on yleensä oma padding, joten 50px:n lisäkavennus olisi tupla. */
    .alignfull .is-layout-constrained:not(.alignwide) > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
    .is-layout-constrained.alignfull > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: 100% !important;
    }
}


h1, .h1 { font-size: 3.5rem; }
h2, .h2 { font-size: 2.5rem; }
h3, .h3 { font-size: 1.4rem; }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1.1rem; }
h6, .h6 { font-size: 1rem; }

@media (max-width: 991px) {
    h1, .h1 { font-size: 2.5rem; }
    h2, .h2 { font-size: 1.8rem; }
    h3, .h3 { font-size: 1.4rem; }
    h4, .h4 { font-size: 1.2rem; }
    h5, .h5 { font-size: 1rem; }
    h6, .h6 { font-size: 1rem; }
    /* has-xx-large/has-x-large -luokat (theme.jsonista) mobiilissa pienempänä —
       muuten venyy ulos kortista/sisällöstä. body-etuliite nostaa spesifisyyden
       (0,1,1) > WP:n generoima (0,1,0), joka latautuu common.css:n JÄLKEEN
       global-styles-inline-css:nä — muuten ydin voittaisi lähdejärjestyksessä. */
    body .has-xx-large-font-size { font-size: 2.5rem !important; }
    body .has-x-large-font-size  { font-size: 1.8rem !important; }
    body .has-large-font-size    { font-size: 1.3rem !important; }
}
@media (max-width: 600px) {
    body .has-xx-large-font-size { font-size: 1.8rem !important; }
    body .has-x-large-font-size  { font-size: 1.5rem !important; }
    body .has-large-font-size    { font-size: 1.2rem !important; }
}

@media (max-width: 500px) {
    h1, h2, h3, h4 {
        hyphens: auto;
    }
}

.wp-block-heading, 
p {
    margin-bottom: 25px !important;
}

p {
    line-height: 1.5;
}

/* h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-bottom: 15px;
} */

.dg-cards-grid {
    justify-content: center;
}
.dg-cards-grid > [class*="col-"] {
    padding: 30px !important;
    position: relative;
}

.dg-cards-grid .dg-card {
    width: 100%;
    height: 100%;
}

:where(.wp-block-group.has-background) {
    padding: 50px 0 !important;
}
:where(.alignwide.wp-block-group.has-background) {
    padding: 50px !important;
}
@media (min-width: 782px) {
    :where(.wp-block-group.has-background) {
        padding: 100px 0 !important;
    }
    :where(.alignwide.wp-block-group.has-background) {
        padding: 100px !important;
    }
}

.dg-card {
    position: relative;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

@media (min-width: 500px) {
    .dg-card {
        padding: 50px;
    }
}

.dg-grid > [class*='col-'] > .dg-card {
    height: 100%;
}

.dg-card >.gb-container,
.dg-card.gb-container >.gb-container {
    padding: 0;
}
.dg-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.dg-card .dg-card-icon figure {
    width: 80px;
    height: 45px;
    overflow: hidden;
    margin: 0 auto 20px auto;
}
.dg-card .dg-card-icon figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wp-block-columns.dg-cards .wp-block-column {
    position: relative;
}
.wp-block-columns.dg-cards .wp-block-column .dg-card {
    width: 100%;
    height: 100%;
}

.wp-block-columns.is-layout-flex.dg-cards {
    gap: 25px;
}

.wp-block-group.alignfull.is-layout-constrained {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

.wp-block-group.is-style-content-paddings,
.is-style-content-paddings-global {
    padding: 50px !important;
}

.is-style-tiny-content-paddings-global {
    padding: 50px 25px !important;
}

@media (min-width: 500px) {
    .is-style-tiny-content-paddings-global {
        padding: 50px !important;
    }
}

.wp-block-group.is-style-content-paddings-big,
.is-style-content-paddings-big-global {
    padding: 50px 25px !important;
}
@media (min-width: 500px) {
    .wp-block-group.is-style-content-paddings-big,
    .is-style-content-paddings-big-global {
        padding: 50px !important;
    }
}
@media (min-width: 1300px) {
    .wp-block-group.is-style-content-paddings-big,
    .is-style-content-paddings-big-global {
        padding: 100px !important;
    }
}

/* Card content paddings: 25px mobile, 50px desktop */
.is-style-card-content-paddings {
    padding: 25px;
}
@media (min-width: 992px) {
    .is-style-card-content-paddings {
        padding: 50px;
    }
}

.dg-rounded {
    border-radius: 50px;
}

.wp-block-embed__wrapper .embed-responsive {
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.dg-spacings-block:not(.has-background) + .dg-spacings-block:not(.has-background) {
    margin-top: -50px !important;
}
@media (min-width: 783px) {
    .dg-spacings-block:not(.has-background) + .dg-spacings-block:not(.has-background) {
        margin-top: -100px !important;
    }
}

/* Cover-sisältölaatikko: max-width rajaa laatikon leveyden,
   WP Coverin contentPosition hoitaa vaakasuuntaisen sijoituksen (center-right / center-left). */
.is-style-dg-content-cover {
    width: 100%;
    max-width: 560px;
}

/* Cover-blokki jonka sisällä dg-content-cover: padding ja aspect-ratio unset,
   jotta min-height toimii ilman WP:n default-aspect-ratiota */
.wp-block-cover:has(.is-style-dg-content-cover) {
    padding: 50px;
    aspect-ratio: unset;
}

/* Desktop ≥992px: iso korkeus overlay-näkymälle. !important voittaa inline min-heightin. */
@media (min-width: 992px) {
    .wp-block-cover:has(.is-style-dg-content-cover) {
        min-height: 800px !important;
    }
}

/* Mobiili/tabletti (<992px) cover muuttuu pystystäkattuun rakenteeseen:
   kuva ensin, sisältölaatikko alle */
@media (max-width: 991px) {
    .wp-block-cover:has(.is-style-dg-content-cover) {
        display: block;
        padding: 0;
        min-height: 0;
        height: auto;
    }

    .wp-block-cover:has(.is-style-dg-content-cover) .wp-block-cover__image-background {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }

    /* Cover-overlay pois (ei tarvita kun sisältölaatikko on erillään) */
    .wp-block-cover:has(.is-style-dg-content-cover) .wp-block-cover__background {
        display: none;
    }

    .wp-block-cover:has(.is-style-dg-content-cover) .wp-block-cover__inner-container {
        position: relative;
        width: 100%;
    }

    /* Sisältölaatikko täysleveäksi mobiilissa */
    .wp-block-cover:has(.is-style-dg-content-cover) .is-style-dg-content-cover {
        max-width: 100%;
    }
}

/* Estä horizontal scroll (negatiiviset marginit bleed-elementeissä).
   clip eikä hidden — clip ei riko position: sticky -toimintaa lapsielementeissä. */
body {
    overflow-x: clip;
}

/* Navbar */
#main-navbar {
    position: relative;
    width: 100%;
}
@media (max-width: 991px) {
    #main-navbar.menu-open {
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* Masthead sticky kaikilla näytöillä — sisältää vain navigaation (yläkuva on
   siirretty headerin ulkopuolelle), joten sticky toimii koko sivun matkan.
   Hide-on-scroll-down / show-on-scroll-up: js lisää luokan dg-masthead-hidden. */
#masthead {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    transition: transform 0.3s ease;
}
#masthead.dg-masthead-hidden {
    transform: translateY(-100%);
}

/* Article cards */
.article-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.article-card-footer {
    margin-top: auto;
}

/* ==============================================
   RESPONSIVE SPACING HELPERS
   ============================================== */

/* Responsive spacer: small on mobile, larger on desktop */
.dg-spacer-responsive {
    height: var(--wp--preset--spacing--5) !important;
    margin-block-start: 0 !important;
}
@media (min-width: 782px) {
    .dg-spacer-responsive {
        height: var(--wp--preset--spacing--50) !important;
    }
}

/* Responsive margin-bottom: spacing-50 mobile, spacing-100 desktop */
.dg-mb-responsive-100 {
    margin-bottom: var(--wp--preset--spacing--50) !important;
}
@media (min-width: 782px) {
    .dg-mb-responsive-100 {
        margin-bottom: var(--wp--preset--spacing--100) !important;
    }
}

/* Responsive margin-bottom: late breakpoint (992px) variant */
.dg-mb-responsive-100-992 {
    margin-bottom: var(--wp--preset--spacing--50) !important;
}
@media (min-width: 992px) {
    .dg-mb-responsive-100-992 {
        margin-bottom: var(--wp--preset--spacing--100) !important;
    }
}

/* Late collapse - columns stack at 992px instead of WP default 782px
   Uses double class selector to override WP core !important rules */
.wp-block-columns.dg-collapse-late {
    flex-wrap: nowrap !important;
}
.wp-block-columns.dg-collapse-late > .wp-block-column {
    flex-basis: 50% !important;
}
@media (max-width: 991px) {
    .wp-block-columns.dg-collapse-late {
        flex-wrap: wrap !important;
    }
    .wp-block-columns.dg-collapse-late > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Hero Slider (digitaali/hero-slider) */
.dg-hero-slider {
    position: relative;
    overflow: hidden;
}
.dg-hero-slider .hero-slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}
.dg-hero-slider .hero-slider-image.active {
    opacity: 1;
    z-index: 1;
}
.dg-hero-slider .wp-block-cover__background {
    z-index: 2;
}
.dg-hero-slider .wp-block-cover__inner-container {
    z-index: 3;
    position: relative;
}

/* Data List (digitaali/data-list) */
.dg-menu-row {
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
    align-items: center;
}
.dg-menu-row dd,
.dg-menu-row dt {
    margin: 0;
    padding: 15px 0;
}
.dg-menu-row .general-data-list-description {
    display: block;
    font-size: .8rem;
}

/* Kuvagalleria (digitaali/kuvagalleria) ja Kuvaslider (digitaali/kuvaslider) */
.dg-gallery-wrapper,
.dg-slider-wrapper {
    margin-bottom: 25px;
}

/* =====================================================
   FOOTER MENU (main_menu) — desktop-sarakkeet + mobiili-accordion
   Scripti footer.php:ssä vaihtaa .is-open-luokan mobiilissa.
   ===================================================== */

/* Desktop: sarakkeet vierekkäin */
.site-footer-menu-cols {
    gap: 2rem;
    flex-wrap: wrap;
}

.site-footer-menu-cols .site-footer-col {
    flex: 1 1 180px;
    min-width: 180px;
}

.site-footer-menu-section {
    position: relative;
}

.site-footer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1rem;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

.site-footer-heading a {
    text-decoration: none;
}

.site-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-footer-links li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.site-footer-menu-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    line-height: 0;
}

.site-footer-menu-toggle-icon {
    width: 13px;
    height: auto;
    transition: transform 0.3s ease;
    filter: brightness(0) invert(1);
}

.site-footer-menu-toggle[aria-expanded="true"] .site-footer-menu-toggle-icon {
    transform: rotate(180deg);
}

@media (max-width: 991px) {
    .site-footer-menu-cols-mobile .site-footer-menu-section {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding: 1rem 0;
    }
    .site-footer-menu-cols-mobile .site-footer-menu-section .site-footer-heading {
        margin-bottom: 0;
    }
    .site-footer-menu-cols-mobile .site-footer-menu-section .site-footer-links {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, margin 0.3s ease;
        margin: 0;
    }
    .site-footer-menu-cols-mobile .site-footer-menu-section.is-open .site-footer-links {
        max-height: 500px;
        margin-top: 1rem;
    }
    .site-footer-menu-cols-mobile .site-footer-menu-section .site-footer-links li {
        margin-bottom: 0;
    }
    .site-footer-menu-cols-mobile .site-footer-menu-section .site-footer-links a {
        display: block;
        padding: 0.5rem 0;
    }
}
/* ===========================================================================
   FAQ-osio (digitaali/usein-kysytyt-kysymykset -pattern)
   Käyttää WP:n natiivia core/details-blokkia (<details><summary>)
   =========================================================================== */
.dg-faq .wp-block-columns {
    gap: 25px;
}

.dg-faq .wp-block-details {
    margin-bottom: 15px !important;
    padding: 0 !important;
    background: transparent;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.dg-faq .wp-block-details > summary {
    display: block; /* poistaa list-item-default joka tuottaa markerin */
    list-style: none;
    cursor: pointer;
    padding: 15px 60px 15px 25px;
    font-weight: 700;
    color: var(--wp--preset--color--dark);
    position: relative;
    background: rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease;
    border-radius: 0 !important;
}

.dg-faq .wp-block-details > summary::-webkit-details-marker,
.dg-faq .wp-block-details > summary::marker {
    display: none !important;
    content: "" !important;
}

.dg-faq .wp-block-details > summary::before {
    display: none !important;
    content: none !important;
}

/* Nuoli oikealla — suljettu osoittaa oikealle, auki kääntyy alas (90°) */
.dg-faq .wp-block-details > summary::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    width: 16px;
    height: 16px;
    background: url('../../../images/icon-arrow-right.svg') no-repeat center;
    background-size: contain;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}

.dg-faq .wp-block-details[open] > summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.dg-faq .wp-block-details > summary:hover {
    background: var(--wp--preset--color--light-gray);
}

.dg-faq .wp-block-details[open] > summary {
    background: var(--wp--preset--color--light-gray);
}

/* Vastaus — paddingit jotta teksti ei kiinni reunoissa */
.dg-faq .wp-block-details > *:not(summary) {
    padding: 0 25px 20px 25px;
}

.dg-faq .wp-block-details > *:not(summary):first-of-type {
    padding-top: 5px;
}

.dg-faq .wp-block-details p {
    margin: 0 !important;
}

.dg-faq .wp-block-details > p:first-of-type {
    margin-top: 15px !important;
}

/* Mobiilissa stackataan sarakkeet — aiempi gap riittää erottamaan */
@media (max-width: 781px) {
    .dg-faq .wp-block-columns {
        gap: 0;
    }
}

/* Skip link (saavutettavuus) — piilossa kunnes saa fokuksen */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
    background-color: var(--wp--preset--color--primary-dark);
    color: var(--wp--preset--color--white);
    clip: auto !important;
    clip-path: none;
    display: block;
    font-size: 1rem;
    font-weight: 600;
    height: auto;
    width: auto;
    left: 10px;
    top: 10px;
    padding: 15px 25px;
    line-height: 1;
    text-decoration: underline;
    z-index: 100000;
}

/* ===================================================================
   Kehu naapuria — kampanjan visuaalinen ilme (Jyri Kiuru 5/2026)
   Brand: 3 yhdenarvoista väriparia (sininen / vihreä / punainen) +
   Pasta & Wine -typografia + kalakuvitus, savonkesä-fiilis.
   =================================================================== */

/* --- Body & typography ---------------------------------------------- */

body {
    background-color: #ffffff;
    color: var(--wp--preset--color--dark-text, #080605);
    font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* h3-h6 + leipätekstit Rubikilla, h1+h2 Pasta & Wine Big -brand-fontilla */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    color: var(--wp--preset--color--dark-text, #080605);
    line-height: 1.1;
}

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0;
}

h1, .h1,
h2, .h2,
.wp-block-heading.has-pasta-wine-big-font-family,
.wp-block-heading.has-xx-large-font-size,
.wp-block-heading.has-x-large-font-size {
    font-family: 'Pasta & Wine Big', 'Rubik', cursive;
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0;
}

/* Otsikot perivät tekstinvärin kun parent-section on has-text-color
   (esim. has-white-color tummalla taustalla) */
.has-text-color h1,
.has-text-color h2,
.has-text-color h3,
.has-text-color h4,
.has-text-color h5,
.has-text-color h6,
.has-text-color .wp-block-heading {
    color: inherit;
}

p {
    line-height: 1.6;
}

strong, b {
    font-weight: 700;
}

a {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--wp--preset--color--red-dark, #ED1E24);
}

/* =====================================================================
   Sivuvärimaailma — CSS-muuttuja jota focus-tilat ym. käyttävät.
   Default: sininen. Body-luokat overridaavat vihreäksi/punaiseksi sivun
   väriparin mukaan. Käytä var(--kn-focus-color) komponenteissa, niin
   focus pysyy automaattisesti synkassa sivun värin kanssa.
   ===================================================================== */
:root {
    --kn-focus-color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.post-type-archive-toimija,
body.archive,
body.single-toimija,
body.page-id-145 {
    --kn-focus-color: var(--wp--preset--color--green-dark, #0E4906);
}
body.page-id-144 {
    --kn-focus-color: var(--wp--preset--color--red-dark, #ED1E24);
}

/* Globaali :focus-visible -rengas — näkyy vain näppäimistö-fokukselle
   (ei häiritse hiirellä klikatessa). Sivun väripari välittyy automaattisesti. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--kn-focus-color);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Poista Bootstrap-buttonien punainen focus-box-shadow (lähtee $primary=red-dark
   -muuttujasta starter.scss:ssä). Klikkaamalla napit eivät enää saa punaista
   kehystä; näppäimistö-tab näyttää sivuvärisen renkaan yllä olevalla
   :focus-visible -säännöllä. Sama Bootstrap-aktiivitilan box-shadowlle. */
.btn:focus,
.btn:active,
.btn.active,
.btn-check:focus + .btn,
.btn-check:active + .btn,
.wp-block-button__link:focus,
.wp-block-button__link:active,
.wp-element-button:focus,
.wp-element-button:active {
    box-shadow: none !important;
}

/* --- Header & navigation -------------------------------------------- */

#main-navbar,
header.banner,
header.site-header,
.site-header,
.banner {
    background-color: #ffffff !important;
    border-bottom: 0;
    box-shadow: 0 2px 8px rgba(13, 40, 242, 0.06);
}

/* Navi-linkit seuraavat sivun väriparia (tausta pysyy valkoisena kaikilla
   sivuilla). Default = blue-dark (etusivu + muut siniset). */
.main-menu a {
    color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
}
.main-menu a:hover,
.main-menu .current-menu-item > a {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2);
    color: #ffffff !important;
}

/* Vihreä väripari: toimija-arkisto, single-toimija, page 145 */
body.post-type-archive-toimija .main-menu a,
body.archive .main-menu a,
body.single-toimija .main-menu a,
body.page-id-145 .main-menu a {
    color: var(--wp--preset--color--green-dark, #0E4906) !important;
}
body.post-type-archive-toimija .main-menu a:hover,
body.post-type-archive-toimija .main-menu .current-menu-item > a,
body.archive .main-menu a:hover,
body.archive .main-menu .current-menu-item > a,
body.single-toimija .main-menu a:hover,
body.single-toimija .main-menu .current-menu-item > a,
body.page-id-145 .main-menu a:hover,
body.page-id-145 .main-menu .current-menu-item > a {
    background-color: var(--wp--preset--color--green-dark, #0E4906) !important;
    color: #ffffff !important;
}

/* Punainen väripari: Anna oma kehu (144) */
body.page-id-144 .main-menu a {
    color: var(--wp--preset--color--red-dark, #ED1E24) !important;
}
body.page-id-144 .main-menu a:hover,
body.page-id-144 .main-menu .current-menu-item > a {
    background-color: var(--wp--preset--color--red-dark, #ED1E24) !important;
    color: #ffffff !important;
}

/* is-style-fill-primary -napit (theme.json:n "primary" = red-dark) sulautuvat
   sivuvärin tummaan väriin vihreillä sivuilla — muuten "Anna oma kehu" -CTA
   single-toimijassa olisi punainen vihreällä taustalla. */
body.single-toimija .wp-block-button.is-style-fill-primary .wp-block-button__link,
body.post-type-archive-toimija .wp-block-button.is-style-fill-primary .wp-block-button__link,
body.archive .wp-block-button.is-style-fill-primary .wp-block-button__link,
body.page-id-145 .wp-block-button.is-style-fill-primary .wp-block-button__link {
    background-color: var(--wp--preset--color--green-dark, #0E4906) !important;
    color: #ffffff !important;
}

/* Estetään flex-containerin kutistuminen logon kohdalla */
#main-navbar .d-none.d-lg-block,
#main-navbar .d-lg-none {
    flex-shrink: 0;
    min-width: max-content;
}

.navbar-brand,
header .navbar-brand {
    flex-shrink: 0;
    max-width: none !important;
    display: inline-block;
    overflow: visible;
}

.navbar-brand img,
.navbar-brand > img,
header .navbar-brand img {
    height: 88px !important;
    width: 376px !important;
    max-width: 376px !important;
    min-width: 376px !important;
    display: block;
    object-fit: contain;
    object-position: left center;
}

@media (max-width: 767px) {
    /* Logo ja toggler pysyvät samalla rivillä (navigation.php: flex-nowrap).
       Logo on 280px kun tilaa on, mutta saa kutistua kapealla näytöllä jottei
       toggler putoa toiselle riville. Toggler ei kutistu. */
    #main-navbar .d-lg-none {
        min-width: 0 !important;
        flex: 0 1 auto;
        overflow: hidden;
    }
    #main-navbar .d-lg-none .navbar-brand {
        flex-shrink: 1;
        min-width: 0;
        max-width: 100%;
    }
    #dg-navi-toggler {
        flex-shrink: 0;
    }
    .navbar-brand img,
    .navbar-brand > img,
    header .navbar-brand img {
        height: 68px !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

#colophon .site-footer-brand,
#colophon .navbar-brand {
    flex-shrink: 0;
    max-width: none !important;
}

#colophon .site-footer-brand img,
#colophon .navbar-brand img,
#colophon .navbar-brand > img {
    height: 70px !important;
    width: 280px !important;
    max-width: none !important;
    object-fit: contain;
    object-position: left center;
}

@media (min-width: 992px) {
    .main-menu {
        gap: 10px;
    }
    .main-menu .nav-item {
        margin: 0 5px;
    }
}

@media (max-width: 991px) {
    /* Vähän ilmaa mobiilivalikon listaelementtien väliin (pinottu pystyyn) */
    .main-menu .nav-item {
        margin-bottom: 10px;
    }
    .main-menu .nav-item:last-child {
        margin-bottom: 0;
    }
}

.main-menu .nav-link,
.main-menu a {
    color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
    font-weight: 700;
    text-decoration: none !important;
    padding: 10px 18px !important;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.main-menu .nav-link:hover,
.main-menu a:hover,
.main-menu .current-menu-item > a {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2);
    color: #ffffff !important;
}

/* --- Buttons (pill, brand-värit) ------------------------------------ */

.wp-block-button__link,
.wp-element-button,
.btn {
    border-radius: 999px !important;
    font-weight: 700;
    padding: 15px 30px !important;
    letter-spacing: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(8, 6, 5, 0.2);
}

/* Päänappi (punainen) — käytetään is-style-fill-primary */
.wp-block-button.is-style-fill-primary .wp-block-button__link,
.wp-block-button.is-style-fill-red .wp-block-button__link {
    background-color: var(--wp--preset--color--red-dark, #ED1E24) !important;
    color: #ffffff !important;
}
.wp-block-button.is-style-fill-primary .wp-block-button__link:hover,
.wp-block-button.is-style-fill-red .wp-block-button__link:hover {
    background-color: #A50F14 !important;
}

/* Sininen-nappi */
.wp-block-button.is-style-fill-blue .wp-block-button__link {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
    color: #ffffff !important;
}
.wp-block-button.is-style-fill-blue .wp-block-button__link:hover {
    background-color: #0A1FB8 !important;
}

/* Vihreä-nappi */
.wp-block-button.is-style-fill-green .wp-block-button__link {
    background-color: var(--wp--preset--color--green-dark, #0E4906) !important;
    color: #ffffff !important;
}
.wp-block-button.is-style-fill-green .wp-block-button__link:hover {
    background-color: #0a3604 !important;
}

/* Musta täyttö */
.wp-block-button.is-style-fill .wp-block-button__link {
    background-color: var(--wp--preset--color--dark-text, #080605) !important;
    color: #ffffff !important;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
    background-color: #000000 !important;
}

/* Tummassa väriparin sektiossa (green/red/blue-dark tausta) täyttönappi
   (is-style-fill) = parin VAALEA sävy + tumma teksti — ettei jää mustaa
   nappia, ja CTA pysyy puhtaassa väriparissa (Jyrin mainos-logiikka). */
.has-green-dark-background-color .wp-block-button.is-style-fill .wp-block-button__link {
    background-color: var(--wp--preset--color--green-light, #A2EFCE) !important;
    color: var(--wp--preset--color--green-dark, #0E4906) !important;
}
.has-green-dark-background-color .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background-color: #ffffff !important;
}
.has-red-dark-background-color .wp-block-button.is-style-fill .wp-block-button__link {
    background-color: var(--wp--preset--color--red-light, #F9BABC) !important;
    color: var(--wp--preset--color--red-dark, #ED1E24) !important;
}
.has-red-dark-background-color .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background-color: #ffffff !important;
}
.has-blue-dark-background-color .wp-block-button.is-style-fill .wp-block-button__link {
    background-color: var(--wp--preset--color--blue-light, #0DCAF2) !important;
    color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
}
.has-blue-dark-background-color .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background-color: #ffffff !important;
}

/* Outline tumma (oletus tumma teksti) */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid var(--wp--preset--color--dark-text, #080605) !important;
    color: var(--wp--preset--color--dark-text, #080605) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--dark-text, #080605) !important;
    color: #ffffff !important;
}

.wp-block-button.is-style-outline-white .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
}
.wp-block-button.is-style-outline-white .wp-block-button__link:hover {
    background-color: #ffffff !important;
    color: var(--wp--preset--color--dark-text, #080605) !important;
}

/* --- Footer (sivun väriparin tumma sävy) ---------------------------- */

#colophon,
footer#colophon {
    background-color: var(--wp--preset--color--footer-dark, #0D28F2);
    color: #ffffff;
    margin-top: 0;
}
/* Footer seuraa sivun väriparia: vihreät sivut = vihreä, anna oma kehu = punainen.
   Siniset sivut (etusivu) käyttävät oletus-sinistä. */
body.archive #colophon,
body.archive #colophon .site-footer,
body.post-type-archive-toimija #colophon,
body.post-type-archive-toimija #colophon .site-footer,
body.single-toimija #colophon,
body.single-toimija #colophon .site-footer,
body.page-id-145 #colophon,
body.page-id-145 #colophon .site-footer {
    background-color: var(--wp--preset--color--green-dark, #0E4906);
}
body.page-id-144 #colophon,
body.page-id-144 #colophon .site-footer {
    background-color: var(--wp--preset--color--red-dark, #ED1E24);
}
body.home #colophon,
body.home #colophon .site-footer {
    background-color: var(--wp--preset--color--blue-light, #0DCAF2) !important;
}
body.home #colophon,
body.home #colophon .site-footer-heading,
body.home #colophon .site-footer-heading a,
body.home #colophon .site-footer-links a,
body.home #colophon a,
body.home #colophon a:hover {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    text-decoration-color: rgba(13, 40, 242, 0.45);
}
body.home #colophon a:hover {
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--blue-dark, #0D28F2);
}

#colophon .site-footer {
    padding: 100px 0 50px !important;
}

#colophon a {
    color: var(--wp--preset--color--cream, #FBF7F0);
    text-decoration: none;
    text-underline-offset: 4px;
}

#colophon a:hover {
    color: var(--wp--preset--color--cream, #FBF7F0);
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--cream, #FBF7F0);
}

#colophon .site-footer-heading {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

#colophon .site-footer-heading a {
    text-decoration: none;
}

#colophon .site-footer-heading a:hover {
    text-decoration: underline;
}

#colophon .site-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

#colophon .site-footer-links li {
    margin: 7.5px 0;
}

#colophon .site-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 50px;
}

#colophon .site-footer-some {
    display: flex;
    align-items: center;
    gap: 15px;
}

#colophon .site-footer-some a {
    color: var(--wp--preset--color--cream, #FBF7F0);
    font-size: 1.5rem;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s ease, color 0.15s ease;
}

#colophon .site-footer-some a:hover {
    opacity: 1;
    color: var(--wp--preset--color--secondary, #F2C078);
}

@media (max-width: 575px) {
    #colophon .site-footer-top {
        justify-content: center;
        text-align: center;
    }
}

#colophon .site-footer-menu-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid rgba(251, 247, 240, 0.15);
}

#colophon .site-footer-col {
    flex: 1 1 200px;
}

#colophon .site-footer-brand img {
    height: 44px;
    width: auto;
}

#colophon .site-footer-footer {
    background-color: #ffffff;
    color: var(--wp--preset--color--dark-text, #080605);
    font-size: 0.9rem;
}
#colophon .site-footer-footer a {
    color: var(--wp--preset--color--dark-text, #080605);
}
#colophon .site-footer-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    text-align: center;
}
#colophon .site-footer-footer__inner > * {
    margin: 0;
}
#colophon .site-footer-footer__menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
}
#colophon .site-footer-footer__menu-list a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}
#colophon .site-footer-footer__menu-list a:hover {
    color: var(--wp--preset--color--secondary, #F2C078);
    text-decoration: underline;
}

#colophon .site-footer-footer .design-by a {
    color: var(--wp--preset--color--dark-text, #080605);
    text-decoration: underline;
}

@media (max-width: 600px) {
    #colophon .site-footer-footer__inner {
        flex-direction: column;
        gap: 10px;
    }
    #colophon .site-footer-footer__menu-list {
        justify-content: center;
    }
}

/* --- Kampanjan tarina: vaihenumerot --------------------------------- */

.kn-tarina__step {
    margin: 0 0 var(--wp--preset--spacing--10);
    font-family: 'Pasta & Wine Big', 'Rubik', cursive;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.45;
}

/* --- Single toimija ------------------------------------------------- */

.kn-toimija__thumb {
    margin: 25px 0;
    text-align: center;
}

.kn-toimija__thumb img {
    max-width: 200px;
    height: auto;
    border-radius: 24px;
}

.kn-toimija__intro {
    max-width: var(--wp--style--global--content-size);
    margin: 25px auto 0;
    text-align: center;
    font-size: 1.2rem;
}

/* Some-linkit toimijan yläosassa */
.kn-toimija__some {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 25px 0 0;
    flex-wrap: wrap;
}
.kn-toimija__some-link {
    display: inline-flex;
    align-items: center;
    gap: 7.5px;
    padding: 10px 20px;
    background: #ffffff;
    color: var(--wp--preset--color--green-dark);
    border: 2px solid var(--wp--preset--color--green-dark);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.kn-toimija__some-link:hover {
    background: #ffffff;
    color: var(--wp--preset--color--green-dark);
}
.kn-toimija__some-link::before {
    content: "";
    width: 22px;
    height: 22px;
    background-color: currentColor;
    flex-shrink: 0;
}
.kn-toimija__some-link--fb::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z'/></svg>") no-repeat center/contain;
}
.kn-toimija__some-link--ig::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>") no-repeat center/contain;
}
.kn-toimija__some-link--www::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>") no-repeat center/contain;
}

/* Banneri-lataus kunnan käyttöön */
.kn-toimija__banneri {
    margin: 50px auto 0;
    max-width: 720px;
    padding: var(--wp--preset--spacing--25);
    background: var(--wp--preset--color--green-light);
    border-radius: 8px;
    text-align: center;
}
.kn-toimija__banneri-otsikko {
    margin: 0 0 5px !important;
    font-weight: 700;
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 1.2rem;
}
.kn-toimija__banneri-lead {
    margin: 0 0 var(--wp--preset--spacing--15) !important;
    color: rgba(8, 6, 5, 0.7);
    font-size: 0.95rem;
}
.kn-toimija__banneri-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease;
}
.kn-toimija__banneri-link:hover {
    transform: translateY(-2px);
    color: inherit;
}
.kn-toimija__banneri-link img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 0 auto var(--wp--preset--spacing--15);
}
.kn-toimija__banneri-cta {
    display: inline-block;
    padding: 7.5px 20px;
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- Kehukortit (puhekupla-tyyli) ----------------------------------- */

.kn-kehut {
    list-style: none;
    margin: 50px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 50px 25px;
    /* Kortit sisällön korkuisiksi — ei venytetä rivin korkeimman mukaan
       (gridin oletus align-items: stretch). Vaikuttaa vain single-toimijan
       grid-layoutiin; etusivun masonry (#kn-seina-list) on display:block. */
    align-items: start;
}

.kn-kehu {
    margin: 0;
    padding: 90px 30px 30px;
    background: #ffffff;
    border-radius: 8px;
    border: 2px solid var(--wp--preset--color--green-dark, #0E4906);
    position: relative;
    box-shadow: none;
    overflow: hidden; /* kunta-ribbon ei vuoda ulos */
}

/* Käyttäjän lähettämä kuva kehukortilla — quoten ja tekstin VÄLISSÄ
   (ei enää banner-tyyli — quote pysyy yläreunassa näkyvänä) */
.kn-kehu__kuva {
    margin: 0 0 25px;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 5; /* 1080 x 1350 -kuvasuhde (pysty, IG-tyyli) */
    background: var(--wp--preset--color--green-light, #A2EFCE);
}
.kn-kehu__kuva img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Kehukortin video (kunta-kehut) — oma komponentti: thumbnail + keskellä play-nappi.
   Sama 4:5-slotti kuin kuvalla → yhtenäiset kortit (kn-kehu-video.js hoitaa toiston). */
.kn-kehu__video {
    position: relative;
    margin: 0 0 25px;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--wp--preset--color--green-dark, #0E4906);
}
.kn-kehu__video--embed { aspect-ratio: 16 / 9; } /* suora oembed (esim. Vimeo) */
.kn-kehu__video-el,
.kn-kehu__video-poster,
.kn-kehu__video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}
.kn-kehu__video-poster { object-fit: cover; }
.kn-kehu__video-el { object-fit: cover; background: #000; }
/* Toiston aikana koko video näkyviin (ei rajausta) */
.kn-kehu__video.is-playing .kn-kehu__video-el,
.kn-kehu__video-iframe { object-fit: contain; background: #000; }

/* Keskitetty play-nappi posterin päällä */
.kn-kehu__video-play {
    position: absolute;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.kn-kehu__video-play:hover,
.kn-kehu__video-play:focus-visible {
    background: rgba(0, 0, 0, 0.68);
    transform: translateZ(0) scale(1.06);
}
.kn-kehu__video-play-icon {
    width: 0;
    height: 0;
    margin-left: 4px; /* kolmion optinen keskitys */
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #ffffff;
}
/* Koko thumbnail klikattava idle-tilassa (kn-kehu-video.js) */
.kn-kehu__video.is-idle { cursor: pointer; }
.kn-kehu__video.is-idle:hover .kn-kehu__video-play {
    background: rgba(0, 0, 0, 0.68);
    transform: translateZ(0) scale(1.06);
}

/* Iso lainausmerkki vasempaan yläkulmaan — SVG (Font Awesome quote-left) */
.kn-kehu::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 30px;
    width: 44px;
    height: 44px;
    background-color: var(--wp--preset--color--green-dark, #0E4906);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z'/></svg>") no-repeat center/contain;
    pointer-events: none;
}

/* Puhekuplan "häntä" — kohti alavasenta. Sopii seinän vihreälle taustalle. */
.kn-kehu::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 30px;
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    border-right: 2px solid var(--wp--preset--color--green-dark, #0E4906);
    border-bottom: 2px solid var(--wp--preset--color--green-dark, #0E4906);
    transform: rotate(45deg);
}


/* Kohdekunnat tekstin jälkeen, ennen metaa — jakaa dashed-viivan metan kanssa */
.kn-kehu__heading {
    margin: var(--wp--preset--spacing--15) 0 0;
    padding-top: var(--wp--preset--spacing--15);
    border-top: 1px dashed rgba(8, 6, 5, 0.18);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* Kun heading on metan edellä, meta liimaa heading:n alle ilman omaa borderia */
.kn-kehu__heading + .kn-kehu__meta {
    margin-top: var(--wp--preset--spacing--10);
    padding-top: 0;
    border-top: 0;
}
.kn-kehu__heading-label,
.kn-kehu__target-label {
    font-size: 0.8rem;
    color: rgba(8, 6, 5, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.kn-kehu__heading-targets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 7.5px;
}
/* Single-toimijassa nykyinen kunta erottuu tummempana täytettynä */
.kn-kehu__badge.is-current {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    cursor: default;
}

.kn-kehu__body {
    margin-bottom: 20px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.kn-kehu__body p {
    margin: 0 0 10px;
}
.kn-kehu__body p:last-child {
    margin-bottom: 0;
}

.kn-kehu__meta {
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(8, 6, 5, 0.18);
}

/* Kehujan nimi heti bodyn alla, ei erillistä viivaa */
.kn-kehu__author {
    margin: var(--wp--preset--spacing--15) 0 0 !important;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wp--preset--color--green-dark, #0E4906);
}
.kn-kehu__author a {
    color: inherit;
}

.kn-kehu__target {
    color: rgba(8, 6, 5, 0.7);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 7.5px;
    margin-top: 5px;
}

.kn-kehu__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background-color: var(--wp--preset--color--green-light, #A2EFCE);
    color: var(--wp--preset--color--green-dark, #0E4906);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color 0.15s ease, color 0.15s ease;
}

a.kn-kehu__badge:hover {
    background-color: var(--wp--preset--color--green-dark, #0E4906);
    color: #ffffff;
}

.kn-kehu__badge.is-current {
    background-color: var(--wp--preset--color--green-dark, #0E4906) !important;
    color: #ffffff !important;
    cursor: default;
}

/* --- Single-toimija: kehulista-sektiot (kunta vs kuntalaiset) --- */

.kn-kehulista {
    margin-block-start: var(--wp--preset--spacing--50);
    /* Ankkurilinkin kohde-offset: sticky-header ei peitä osion otsikkoa. */
    scroll-margin-top: 100px;
}
.kn-kehulista:first-of-type {
    margin-block-start: var(--wp--preset--spacing--25);
}

/* Single-toimija: ankkurinapit kehu-osioihin (kuntalaiset / naapurikunnat).
   Näkyvät vain kun molempia tyyppejä on. Seuraavat sivun väriparia
   (--kn-focus-color): toimija-sivuilla vihreä. */
.kn-kehut-ankkurit {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--10, .75rem);
    justify-content: center;
    margin: var(--wp--preset--spacing--30, 1.5rem) 0 0;
}
.kn-kehut-ankkurit__link {
    display: inline-block;
    padding: .55rem 1.4rem;
    border: 2px solid var(--kn-focus-color, #0D28F2);
    border-radius: 999px;
    color: var(--kn-focus-color, #0D28F2);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.kn-kehut-ankkurit__link:hover,
.kn-kehut-ankkurit__link:focus {
    background-color: var(--kn-focus-color, #0D28F2);
    color: #fff !important; /* ohittaa teeman yleisen a:hover-värin */
}

.kn-kehulista__title {
    margin: 0 0 var(--wp--preset--spacing--15);
    font-family: 'Pasta & Wine Big', 'Rubik', cursive;
    font-weight: 400;
    font-size: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wp--preset--spacing--10);
}

.kn-kehulista__count {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: var(--kn-focus-color, #0E4906);
    padding: 5px 14px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(8, 6, 5, 0.18);
}

/* Kunnan kehu — erotetaan kuntalaisten kehuista 45°-ribbonilla
   kortin oikeassa yläkulmassa (PHP-render lisää span:n kuntien kehuihin). */
.kn-kehu__kunta-leima {
    position: absolute;
    top: 23px;
    right: -40px;
    width: 160px;
    text-align: center;
    padding: 5px 0;
    background: var(--wp--preset--color--green-dark, #0E4906);
    color: #ffffff;
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(45deg);
    transform-origin: center;
    box-shadow: 0 2px 5px rgba(8, 6, 5, 0.15);
    z-index: 2;
    pointer-events: none;
    line-height: 1.4;
}
/* Mobiilissa ribbonin teksti pienempi — kortti kapeampi, ei saa hallita */
@media (max-width: 782px) {
    .kn-kehu__kunta-leima {
        top: 22px;
        right: -40px;
        width: 150px;
        font-size: 8px;
        padding: 4px 0;
        letter-spacing: 0.06em;
    }
}

/* Kuntalaisen kehu pysyy oletustyylissä (white) */

/* "Katso alkuperäinen julkaisu" -linkki kunnan kehuissa */
.kn-kehu__some-link {
    display: inline-block;
    margin-top: var(--wp--preset--spacing--10);
    font-size: 0.85rem;
    color: var(--wp--preset--color--primary-dark);
    text-decoration: underline;
}
.kn-kehu__some-link:hover {
    color: var(--wp--preset--color--primary);
}

/* --- Etusivun komponentit ------------------------------------------- */

.kn-hero {
    background-color: var(--wp--preset--color--blue-light, #0DCAF2);
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    padding: 130px 25px 130px !important;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Hero-taustan kalakuvitus tulee /images/kn-hero-fish-pattern.svg -tiedostosta
   (Jyrin virallinen kala-pattern 01-01, 800x500, läpinäkyvä tausta).
   Sijoitetaan tile-tyylillä, peittämättä tekstisisältöä. */
.kn-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../../../images/kn-hero-fish-pattern.svg');
    background-repeat: repeat;
    background-size: 700px auto;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

.kn-hero > * {
    position: relative;
    z-index: 1;
}

/* !important kumoaa globaalin .wp-block-heading,p { margin-bottom:25px !important } */
.kn-hero__eyebrow {
    display: inline-block;
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 50px !important;
}

.kn-hero h1 .kn-hero__accent {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    font-style: normal;
    font-weight: 400;
}

/* Hero pitäytyy sinisessä väriparissa — kaikki napit blue-dark,
   ei punaista (Jyrin mainos-logiikka: yksi sektio = yksi väripari) */
.kn-hero .wp-block-button:not(.is-style-outline):not(.is-style-outline-white) .wp-block-button__link {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
    color: #ffffff !important;
}
.kn-hero .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid var(--wp--preset--color--blue-dark, #0D28F2) !important;
    color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
}
.kn-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
    color: #ffffff !important;
}

.kn-hero__lead {
    font-family: 'Rubik', sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    max-width: 640px;
    margin: 0 auto 50px !important;
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    font-weight: 500;
}

/* Hero-elementtien välit kasvavat desktopilla — mobiilissa 50px, ≥782px 75px */
@media (min-width: 782px) {
    .kn-hero__eyebrow,
    .kn-hero h1,
    .kn-hero__lead {
        margin-bottom: 75px !important;
    }
}

.kn-hero__buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* CTA-nappien flat-ikonit. Kohdistetaan href-attribuutilla — ikonit ilmestyvät
   automaattisesti aina kun nappi linkittää /toimijat tai /anna-kehu -osoitteeseen
   (hero, konsepti-osio, kehut-osion CTA, single-toimija jne). */
.wp-block-button__link[href*="/toimijat"],
.wp-block-button__link[href*="/anna-kehu"],
.wp-block-button__link[href$="#kn-seina"] {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}

.wp-block-button__link[href*="/toimijat"]::before,
.wp-block-button__link[href*="/anna-kehu"]::before,
.wp-block-button__link[href$="#kn-seina"]::before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: currentColor;
    flex-shrink: 0;
}

/* Selaa kehuja → puhekupla outline (kuuntele/lue ääniä) */
.wp-block-button__link[href*="/toimijat"]::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5c0 4.142-4.03 7.5-9 7.5a10.4 10.4 0 0 1-3.7-.66L3 21l1.66-4.84A7.05 7.05 0 0 1 3 11.5C3 7.358 7.03 4 12 4s9 3.358 9 7.5z'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5c0 4.142-4.03 7.5-9 7.5a10.4 10.4 0 0 1-3.7-.66L3 21l1.66-4.84A7.05 7.05 0 0 1 3 11.5C3 7.358 7.03 4 12 4s9 3.358 9 7.5z'/></svg>") no-repeat center/contain;
}

/* Anna oma kehu → thumbs up (peukku ylös) */
.wp-block-button__link[href*="/anna-kehu"]::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10v12'/><path d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10v12'/><path d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z'/></svg>") no-repeat center/contain;
}

/* Selaa kehuseinää → layout-grid (4 neliötä, kuvaa kortti-seinää) */
.wp-block-button__link[href$="#kn-seina"]::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='7' x='3' y='3' rx='1'/><rect width='7' height='7' x='14' y='3' rx='1'/><rect width='7' height='7' x='14' y='14' rx='1'/><rect width='7' height='7' x='3' y='14' rx='1'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect width='7' height='7' x='3' y='3' rx='1'/><rect width='7' height='7' x='14' y='3' rx='1'/><rect width='7' height='7' x='14' y='14' rx='1'/><rect width='7' height='7' x='3' y='14' rx='1'/></svg>") no-repeat center/contain;
}

/* Scroll-reveal- ja hero-fade-animaatiot poistettu käytöstä — elementit
   näkyvät heti (kn-reveal.js + kn-hero-animations.js ei enää ladata). */

/* =====================================================================
   Kehuseinä (etusivu) — kaikki kehut, suodatus, pagination
   ===================================================================== */
.kn-seina {
    background-color: #ffffff;
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    padding: 100px 0 !important;
}

/* Kehuseinä pitäytyy sinisessä väriparissa — napit blue-dark */
.kn-seina .wp-block-button:not(.is-style-outline):not(.is-style-outline-white) .wp-block-button__link {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
    color: #ffffff !important;
}
.kn-seina .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent !important;
    border: 2px solid var(--wp--preset--color--blue-dark, #0D28F2) !important;
    color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
}
.kn-seina .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
    color: #ffffff !important;
}
.kn-seina__head {
    max-width: 800px;
    margin: 0 auto var(--wp--preset--spacing--50);
    text-align: center;
}
.kn-seina__title {
    font-family: 'Pasta & Wine Big', 'Rubik', cursive;
    font-weight: 400;
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin: 0 0 var(--wp--preset--spacing--15) !important;
    color: var(--wp--preset--color--blue-dark, #0D28F2);
}
.kn-seina__lead {
    font-size: 1.1rem;
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    margin: 0 !important;
}
.kn-seina__lead strong {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    font-weight: 700;
}

/* Etusivun kehukortit sinisessä väriparissa.
   (.kn-kehu* on jaettu single-toimija-sivun kanssa, jossa pidetään vihreänä,
   joten käytetään body.home-prefiksiä ylikirjoittamaan vihreät säännöt.)
   Tyyli: sama puhekupla-tyyli kuin single-toimija-sivuilla (2px reuna +
   iso lainausmerkki + häntä alavasemmalla), mutta blue-dark väreillä. */
body.home .kn-kehu {
    border: 0;
    /* Pikkuvarjo nostaa valkoisen kortin valkoisesta seinästä irti */
    box-shadow:
        0 1px 2px rgba(13, 40, 242, 0.06),
        0 8px 24px rgba(13, 40, 242, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.home .kn-kehu:hover {
    box-shadow:
        0 2px 4px rgba(13, 40, 242, 0.08),
        0 14px 32px rgba(13, 40, 242, 0.12);
    transform: translateY(-2px);
}
body.home .kn-kehu::before {
    background-color: rgba(13, 40, 242, 0.4);
}
body.home .kn-kehu::after {
    border-right: 0;
    border-bottom: 0;
}
body.home .kn-kehu__kuva {
    background: var(--wp--preset--color--blue-light, #0DCAF2);
}
body.home .kn-kehu,
body.home .kn-kehu__body,
body.home .kn-kehu__author {
    color: #080605;
}
body.home .kn-kehu__badge {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2);
    color: #ffffff;
}
body.home a.kn-kehu__badge:hover {
    background-color: var(--wp--preset--color--blue-light, #0DCAF2) !important;
    color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
}
body.home .kn-kehu__badge.is-current {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
    color: #ffffff !important;
}
/* Etusivulla kunta-ribbon blue-dark (väripari sininen) */
body.home .kn-kehu__kunta-leima {
    background: var(--wp--preset--color--blue-dark, #0D28F2);
}

/* Etusivun kommentti-kortit + lomake + tykkäys + modaali sinisessä väriparissa */
body.home .kn-kommentti {
    background: var(--wp--preset--color--blue-light, #0DCAF2);
}
body.home .kn-kommentti__author {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kommentti__date {
    color: rgba(13, 40, 242, 0.6);
}
body.home .kn-kommentti-form__suostumus input[type="checkbox"] {
    accent-color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kommentti-form__suostumus a {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kommentti-form__submit {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2) !important;
}
body.home .kn-kommentti-form__submit:hover {
    background-color: #0820c7 !important;
}
body.home .kn-kommentti-form__status.is-success {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kehu__like {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    border-color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kehu__like:hover:not(:disabled) {
    background: var(--wp--preset--color--blue-dark, #0D28F2);
    color: #ffffff;
}
body.home .kn-kehu__like.is-liked {
    background: var(--wp--preset--color--blue-dark, #0D28F2);
    color: #ffffff;
    border-color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kehu__like.is-liked:hover:not(:disabled) {
    background: var(--wp--preset--color--blue-light, #0DCAF2);
    color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kehu__like-count {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kommentit-modal .modal-header {
    background: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kommentit-modal__kehu a:not(.kn-kehu__badge) {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
}
/* Modaalin kommentit puhekuplina — valkoinen laatikko, cyan-tinted reuna,
   häntä alavasemmalla osoittaa "puheen". */
body.home .kn-kommentit-modal .kn-kommentti {
    background: #ffffff;
    padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--20);
    border: 1px solid rgba(13, 40, 242, 0.18);
    border-radius: 12px;
    margin-bottom: var(--wp--preset--spacing--25);
    position: relative;
}
body.home .kn-kommentit-modal .kn-kommentti:last-of-type {
    margin-bottom: 0;
}
body.home .kn-kommentit-modal .kn-kommentti::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 24px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-right: 1px solid rgba(13, 40, 242, 0.18);
    border-bottom: 1px solid rgba(13, 40, 242, 0.18);
    transform: rotate(45deg);
}
body.home .kn-kehu__kommentit-toggle {
    color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kehu__kommentit-toggle:hover {
    background: var(--wp--preset--color--blue-light, #0DCAF2);
    color: var(--wp--preset--color--blue-dark, #0D28F2);
}
body.home .kn-kehu__footer {
    border-top-color: rgba(8, 6, 5, 0.08);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

/* Filtterien toggle-nappi mobiilissa (d-lg-none hoitaa näkyvyyden — vain alle 992px).
   Avaa offcanvas-paneelin alhaalta. */
.kn-seina__filters-toggle {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--10);
    width: 100%;
    padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--25);
    background: var(--wp--preset--color--white);
    border: 1px solid rgba(8, 6, 5, 0.18);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wp--preset--color--dark-text);
    cursor: pointer;
    margin: 0 0 var(--wp--preset--spacing--25);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kn-seina__filters-toggle:hover {
    border-color: var(--kn-focus-color);
}
.kn-seina__filters-toggle-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>") no-repeat center/contain;
}
.kn-seina__filters-toggle-label {
    font-weight: 700;
}
.kn-seina__filters-toggle-active {
    margin-left: auto;
    color: rgba(8, 6, 5, 0.65);
    font-weight: 500;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Offcanvas mobiilissa: header näkyy, paneelin korkeus auto/max-height.
   Desktopilla (lg+) offcanvas-luokat häviävät ja sisältö näkyy normaalisti —
   piilotetaan header ja nollataan body-padding jotta layout pysyy entisellään. */
@media (min-width: 992px) {
    .kn-seina__filters-wrap .offcanvas-header {
        display: none;
    }
    .kn-seina__filters-wrap .offcanvas-body {
        padding: 0;
    }
}
@media (max-width: 991.98px) {
    .kn-seina__filters-wrap.offcanvas-bottom {
        height: auto;
        max-height: 80vh;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }
    .kn-seina__filters-wrap .offcanvas-body {
        padding: var(--wp--preset--spacing--25);
    }
}

.kn-seina__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--wp--preset--spacing--15) var(--wp--preset--spacing--25);
    margin: 0 0 var(--wp--preset--spacing--50);
}
/* Mobiilissa filtterit pinotaan pystyyn drawerissa */
@media (max-width: 991.98px) {
    .kn-seina__filters {
        flex-direction: column;
        align-items: stretch;
        gap: var(--wp--preset--spacing--25);
        margin: 0;
    }
    .kn-seina__filter-group {
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--10);
    }
    .kn-seina__filter-group--select {
        flex-direction: column;
        align-items: stretch;
    }
    .kn-seina__filter-group--select label {
        margin: 0 0 5px;
    }
    .kn-seina__filter-group select {
        width: 100%;
    }
}
.kn-seina__filter-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 7.5px;
    align-items: center;
}
.kn-seina__filter-group--select label {
    font-size: 0.9rem;
    color: rgba(8, 6, 5, 0.7);
    margin-right: 5px;
}
.kn-seina__filter-group select {
    padding: 7.5px 15px;
    border: 1px solid rgba(8, 6, 5, 0.18);
    background: var(--wp--preset--color--white);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}
.kn-seina__chip {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--blue-dark);
    border: 0;
    padding: 8.5px 16px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.kn-seina__chip:hover {
    background: var(--wp--preset--color--blue-dark);
    color: #ffffff;
}
.kn-seina__chip.is-active {
    background: var(--wp--preset--color--blue-dark);
    color: #ffffff;
}

.kn-seina__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 50px 25px;
    transition: opacity 0.2s ease;
}
.kn-seina.is-loading .kn-seina__list {
    opacity: 0;
    pointer-events: none;
}

/* --- Etusivun masonry-layout (Pinterest-tyyli) ---------------------------
   Vain etusivulla (#kn-seina-list). Single-toimija käyttää CSS Grid -layoutia
   joka tulee .kn-kehut-säännöstä.

   Tärkeä yksityiskohta: kortit ovat float:left jotta ennen kuin Masonry on
   asettanut position:absolute, ne ovat luonnollisesti vierekkäin (eivätkä
   block-flow:ssa allekkain). Dokumentaation suositus, ks.
   https://masonry.desandro.com/layout — Item sizing.

   .kn-seina-sizer = stabiili mittauspiste sarakkeen leveydelle (Masonry
   columnWidth käyttää sitä, ei eka korttia → laskenta on aina luotettava).

   ID-spesifisyys (1,0,0) voittaa .kn-kehut:n display: grid (0,1,0). */
#kn-seina-list {
    display: block;
    margin-left: -12.5px;
    margin-right: -12.5px;
}
#kn-seina-list::after {
    content: '';
    display: block;
    clear: both;
}
#kn-seina-list .kn-seina-sizer,
#kn-seina-list .kn-kehu {
    width: calc(33.333% - 25px);
    margin: 0 12.5px 50px 12.5px;
}
#kn-seina-list .kn-kehu {
    float: left;
}
/* Sizer on Masonry-mittauspiste, ei näy käyttäjälle */
#kn-seina-list .kn-seina-sizer {
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
}

@media (max-width: 991px) {
    #kn-seina-list .kn-seina-sizer,
    #kn-seina-list .kn-kehu {
        width: calc(50% - 25px);
    }
}
@media (max-width: 599px) {
    #kn-seina-list {
        margin-left: 0;
        margin-right: 0;
    }
    #kn-seina-list .kn-seina-sizer,
    #kn-seina-list .kn-kehu {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    #kn-seina-list .kn-kehu {
        float: none;
    }
}

/* Fade-in uusille korteille kun infinite scroll / "Lataa lisää" tuo niitä.
   Luokka lisätään JS:llä uusiin <li>:eihin ja poistetaan ~800ms kuluttua.
   Käyttäjälle visuaalinen vahvistus että uutta sisältöä saapui. */
@keyframes kn-kehu-fade-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kn-kehu.is-new {
    animation: kn-kehu-fade-in 0.6s ease both;
}
@media (prefers-reduced-motion: reduce) {
    .kn-kehu.is-new { animation: none; }
}

.kn-seina__empty {
    text-align: center;
    padding: var(--wp--preset--spacing--50) 0;
    color: rgba(8, 6, 5, 0.6);
    font-size: 1.1rem;
}

.kn-seina__more-wrap {
    text-align: center;
    margin: var(--wp--preset--spacing--50) 0 0;
}
/* body-etuliite nostaa spesifisyyden (0,1,1) yli WP:n core-säännön
   :root :where(.wp-element-button,.wp-block-button__link){font-weight:inherit} (0,1,0),
   joka latautuu common.css:n jälkeen ja muuten voittaisi tasapelin → nappi jäisi
   bodyn painoon 400. Sama temppu kuin has-*-font-size-luokissa. */
body .kn-seina__more {
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    background-color: #ffffff;
    color: var(--wp--preset--color--blue-dark, #0D28F2);
    border: 2px solid var(--wp--preset--color--blue-dark, #0D28F2);
}
body .kn-seina__more:hover {
    background-color: var(--wp--preset--color--blue-dark, #0D28F2);
    color: #ffffff;
}
.kn-seina__more:disabled {
    opacity: 0.6;
    cursor: progress;
}

.kn-seina__cta {
    text-align: center;
    margin: calc(var(--wp--preset--spacing--50) + 2rem) 0 0;
}
.kn-seina__cta p {
    margin: 0 0 var(--wp--preset--spacing--15) !important;
    font-family: 'Pasta & Wine Big', 'Rubik', cursive;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1;
}

/* Yleinen kehu (ei kohdekuntaa) — pieni accent jotta erottuu */
.kn-kehu--yleinen .kn-kehu__heading {
    color: rgba(8, 6, 5, 0.6);
}

/* Kortin alaosa: kommentit-toggle ja tykkäys vierekkäin yhdellä rivillä,
   sisältö (lista+lomake) avautuu sen alle.
   Negatiiviset marginit venyttävät footerin kortin reunoihin asti
   (kortin oma padding 90/30/30 → footer ulottuu ohi). */
.kn-kehu__footer {
    margin: var(--wp--preset--spacing--25) -30px -30px;
    padding: var(--wp--preset--spacing--15) 30px;
    background: #ffffff;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 2px solid var(--wp--preset--color--green-dark, #0E4906);
}
.kn-kehu__footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--10);
}

.kn-kehu__kommentit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7.5px;
    padding: 5px 12px;
    background: transparent;
    color: var(--wp--preset--color--green-dark, #0E4906);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.kn-kehu__kommentit-toggle:hover {
    background: var(--wp--preset--color--green-light, #A2EFCE);
    color: var(--wp--preset--color--green-dark, #0E4906);
}
.kn-kehu__kommentit-icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>") no-repeat center/contain;
}

.kn-kehu__kommentit-list {
    list-style: none;
    margin: 0 0 var(--wp--preset--spacing--15);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--10);
}
.kn-kehu__kommentit-empty {
    color: rgba(8, 6, 5, 0.5);
    font-size: 0.9rem;
    font-style: italic;
}

.kn-kommentti {
    background: var(--wp--preset--color--green-light, #A2EFCE);
    border-radius: 0;
    padding: var(--wp--preset--spacing--15);
}
.kn-kommentti__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}
.kn-kommentti__author {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--wp--preset--color--green-dark, #0E4906);
}
.kn-kommentti__date {
    font-size: 0.8rem;
    color: rgba(14, 73, 6, 0.6);
}
.kn-kommentti__body {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--wp--preset--color--dark-text);
}
.kn-kommentti__body p {
    margin: 0 !important;
}
.kn-kommentti__body p + p {
    margin-top: 5px !important;
}

.kn-kehu__kommentti-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 !important;
}
.kn-kehu__kommentti-form input[type="text"],
.kn-kehu__kommentti-form input[type="email"],
.kn-kehu__kommentti-form textarea {
    padding: 10px 12px;
    border: 2px solid rgba(8, 6, 5, 0.18);
    background: var(--wp--preset--color--white);
    border-radius: 0;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
}
.kn-kehu__kommentti-form input:focus,
.kn-kehu__kommentti-form textarea:focus {
    outline: none;
    border-color: var(--kn-focus-color);
}
.kn-kehu__kommentti-form textarea {
    resize: vertical;
    min-height: 80px;
}
.kn-kommentti-form__row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kn-kommentti-form__honeypot {
    position: absolute !important;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.kn-kommentti-form__suostumus {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(8, 6, 5, 0.75);
    line-height: 1.4;
    cursor: pointer;
}
.kn-kommentti-form__suostumus input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--wp--preset--color--green-dark);
    cursor: pointer;
}
.kn-kommentti-form__suostumus a {
    color: var(--wp--preset--color--green-dark);
    text-decoration: underline;
}
.kn-kommentti-form__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kn-kommentti-form__submit {
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 22px;
    background-color: var(--wp--preset--color--green-dark, #0E4906) !important;
    color: #ffffff !important;
}
.kn-kommentti-form__submit:hover {
    background-color: #0a3604 !important;
}
.kn-kommentti-form__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}
.kn-kommentti-form__status {
    font-size: 0.85rem;
    color: rgba(8, 6, 5, 0.7);
}
.kn-kommentti-form__status.is-success {
    color: var(--wp--preset--color--green-dark);
    font-weight: 600;
}
.kn-kommentti-form__status.is-error {
    color: #b54708;
    font-weight: 600;
}

/* Tykkäys-blokki footer-rivin oikealla puolella: nappi + count.
   Border-top tulee .kn-kehu__footer:lle, ei tähän blokkiin. */
.kn-kehu__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--wp--preset--spacing--10);
}

.kn-kehu__like {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    color: var(--wp--preset--color--green-dark, #0E4906);
    border: 2px solid var(--wp--preset--color--green-dark, #0E4906);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.kn-kehu__like:hover:not(:disabled) {
    background: var(--wp--preset--color--green-dark, #0E4906);
    color: #ffffff;
    transform: translateY(-1px);
}
.kn-kehu__like:disabled {
    cursor: progress;
    opacity: 0.6;
}
.kn-kehu__like.is-liked {
    background: var(--wp--preset--color--green-dark, #0E4906);
    color: #ffffff;
    border-color: var(--wp--preset--color--green-dark, #0E4906);
}
/* Hoveroitaessa jo tykättyä → tausta vaalenee, selkeä "peruuta tykkäys" -vihje */
.kn-kehu__like.is-liked:hover:not(:disabled) {
    background: var(--wp--preset--color--green-light, #A2EFCE);
    color: var(--wp--preset--color--green-dark, #0E4906);
}

.kn-kehu__like-count {
    color: var(--wp--preset--color--green-dark, #0E4906);
    font-size: 0.85rem;
    font-weight: 600;
}

.kn-kehu__like-icon {
    width: 20px;
    height: 20px;
    background-color: currentColor;
    /* Outline thumbs up — sama lucide-tyylinen ikoni kuin "Anna oma kehu" -napissa */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10v12'/><path d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10v12'/><path d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z'/></svg>") no-repeat center/contain;
    transition: transform 0.18s ease;
}
/* Liked-tilassa peukku pysyy samana, vain napin tausta täyttyy oranssiksi (FB-tyyli) */
.kn-kehu__like.is-pulsing .kn-kehu__like-icon {
    animation: kn-like-pulse 0.45s ease-out;
}
@keyframes kn-like-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .kn-kehu__like.is-pulsing .kn-kehu__like-icon { animation: none; }
}

/* Section: viimeisimmät kehut */
.kn-kehut-section {
    background-color: var(--wp--preset--color--light-cream, #F4EBDB);
    padding: 100px 25px !important;
    position: relative;
}

.kn-kehut-section h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin-bottom: 15px;
}

.kn-kehut-section .kn-kehut-section__lead {
    text-align: center;
    font-size: 1.1rem;
    color: rgba(8, 6, 5, 0.7);
    max-width: 600px;
    margin: 0 auto 50px;
}

.kn-kehut-section .kn-kehut-cta {
    text-align: center;
    margin-top: 50px;
}

/* Section: kunnat-grid */
.kn-kunnat-section {
    background-color: var(--wp--preset--color--cream, #FBF7F0);
    padding: 100px 25px !important;
}

.kn-kunnat-section h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin-bottom: 15px;
}

.kn-kunnat-section .kn-kunnat-section__lead {
    text-align: center;
    font-size: 1.1rem;
    color: rgba(8, 6, 5, 0.7);
    max-width: 600px;
    margin: 0 auto 50px;
}

/* Section: konsepti */
.kn-konsepti {
    background-color: var(--wp--preset--color--primary, #E26D5C);
    color: var(--wp--preset--color--cream, #FBF7F0);
    padding: 100px 25px !important;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.kn-konsepti::before {
    content: "";
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
    pointer-events: none;
}

.kn-konsepti h2,
.kn-konsepti p {
    color: var(--wp--preset--color--cream, #FBF7F0);
    position: relative;
}

.kn-konsepti h2 {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    margin: 0 auto 25px;
    max-width: 800px;
    font-style: italic;
}

.kn-konsepti p {
    max-width: 600px;
    margin: 0 auto 50px;
    font-size: 1.15rem;
    opacity: 0.95;
}

/* CTA-osio kunnan single-sivulla */
.kn-cta {
    background-color: var(--wp--preset--color--secondary, #F2C078);
    padding: 100px 25px !important;
    text-align: center;
}

.kn-cta h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 15px;
}

.kn-cta p {
    max-width: 500px;
    margin: 0 auto 25px;
    font-size: 1.1rem;
}

/* --- Sydän-ikoni helper --------------------------------------------- */

.kn-heart-icon {
    display: inline-block;
    width: 1em;
    height: 0.9em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'><path d='M8 14s-7-4.5-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 15 5c0 4.5-7 9-7 9z'/></svg>") no-repeat center/contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'><path d='M8 14s-7-4.5-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 15 5c0 4.5-7 9-7 9z'/></svg>") no-repeat center/contain;
    vertical-align: -1px;
}

/* --- Mobile tweaks -------------------------------------------------- */

@media (max-width: 991px) {
    .kn-hero {
        padding: 75px 25px !important;
    }
    .kn-konsepti, .kn-kunnat-section, .kn-kehut-section, .kn-cta {
        padding: 75px 25px !important;
    }
    #colophon .site-footer {
        padding: 75px 0 25px !important;
    }
}

/* =====================================================================
   Kuntalomake — intro ja virhetila (käyttää muuten samoja .kn-kehulomake-tyylejä)
   ===================================================================== */
.kn-kuntalomake-intro {
    max-width: 720px;
    margin: 0 auto var(--wp--preset--spacing--25);
    text-align: center;
}
.kn-kuntalomake-intro__eyebrow {
    display: inline-block;
    background: var(--wp--preset--color--green-light);
    color: var(--wp--preset--color--green-dark);
    padding: 5px 15px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 var(--wp--preset--spacing--15) !important;
}
.kn-kuntalomake-intro__title {
    margin: 0 0 var(--wp--preset--spacing--15) !important;
    font-family: 'Pasta & Wine Big', 'Rubik', cursive;
}
.kn-kuntalomake-intro__lead {
    margin: 0 !important;
    color: rgba(8, 6, 5, 0.78);
}
.kn-kuntalomake-error {
    max-width: 640px;
    margin: var(--wp--preset--spacing--50) auto;
    padding: var(--wp--preset--spacing--25);
    background: #FCE8E5;
    color: var(--wp--preset--color--primary-dark);
    border-radius: 15px;
    text-align: center;
}
.kn-kuntalomake-error h3 {
    margin: 0 0 var(--wp--preset--spacing--15);
}

/* =====================================================================
   Kehulomake (digitaali/kehulomake)
   ===================================================================== */

/* !important kumoaa WP:n inlinena ladatun .is-layout-constrained > .alignwide -säännön. */
.kn-kehulomake-wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    margin-inline: auto;
    background: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--50);
    border-radius: 0;
    box-shadow: 0 6px 25px rgba(8, 6, 5, 0.08);
    position: relative;
    overflow: hidden;
}
/* Corner ribbon "Anna oma kehu" lomakkeen oikeaan yläkulmaan
   (sama tekniikka kuin kehukortin KUNNAN KEHU -ribbonilla). */
.kn-kehulomake-wrapper::before {
    content: "Anna oma kehu";
    position: absolute;
    top: 40px;
    right: -65px;
    width: 240px;
    text-align: center;
    padding: 8px 0;
    background: var(--wp--preset--color--red-dark, #ED1E24);
    color: #ffffff;
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: rotate(45deg);
    transform-origin: center;
    box-shadow: 0 2px 5px rgba(8, 6, 5, 0.18);
    z-index: 2;
    pointer-events: none;
}
/* Lomakkeen sisäiset elementit perivät section-tekstin värin (esim. 144 = red-dark).
   Pakotetaan kaikki labelit + checkbox-tekstit + hint-tekstit dark-text. */
.kn-kehulomake__field > label,
.kn-kehulomake__fieldset > legend,
.kn-kehulomake__cb,
.kn-kehulomake__field--checkbox > label {
    color: var(--wp--preset--color--dark-text, #080605) !important;
}
/* Anna oma kehu (144): lähetä-nappi sivun väriparin mukaan (red-dark) */
body.page-id-144 .kn-kehulomake__submit {
    background-color: var(--wp--preset--color--red-dark, #ED1E24) !important;
    color: #ffffff !important;
}
body.page-id-144 .kn-kehulomake__submit:hover {
    background-color: #A50F14 !important;
}

.kn-kehulomake__field {
    margin-block-start: var(--wp--preset--spacing--25);
}
/* :first-of-type olisi bugi (matchaisi fieldsetille koska se on ainoa fieldset-tagi)
   → käytetään vain :first-child joka koskee oikeasti vain todellista ekaa lasta */
.kn-kehulomake__field:first-child {
    margin-block-start: 0;
}

.kn-kehulomake__field > label,
.kn-kehulomake__fieldset > legend {
    display: block;
    font-weight: 600;
    color: var(--wp--preset--color--dark-text);
    margin-block-end: var(--wp--preset--spacing--10);
}

.kn-kehulomake__req {
    color: var(--wp--preset--color--primary);
    margin-inline-start: 2px;
}

.kn-kehulomake__hint {
    display: inline;
    font-weight: 400;
    font-size: 0.85em;
    color: var(--wp--preset--color--dark-text);
    opacity: 0.7;
    margin-inline-start: 5px;
}
.kn-kehulomake__help {
    display: block;
    font-size: 0.85em;
    line-height: 1.45;
    color: var(--wp--preset--color--dark-text);
    opacity: 0.7;
    margin: 0 0 var(--wp--preset--spacing--10);
}
.kn-kehulomake__hint--block {
    display: block;
    margin: 0 0 var(--wp--preset--spacing--10);
    opacity: 0.75;
}

.kn-kehulomake input[type="text"],
.kn-kehulomake input[type="email"],
.kn-kehulomake textarea {
    width: 100%;
    padding: var(--wp--preset--spacing--15);
    font-size: 1rem;
    font-family: inherit;
    color: var(--wp--preset--color--dark-text);
    background: #ffffff;
    border: 2px solid rgba(8, 6, 5, 0.18);
    border-radius: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kn-kehulomake input[type="text"]:focus,
.kn-kehulomake input[type="email"]:focus,
.kn-kehulomake textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--kn-focus-color);
}
.kn-kehulomake textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.5;
}

.kn-kehulomake__counter {
    margin-block-start: 5px;
    font-size: 0.85rem;
    text-align: right;
    color: var(--wp--preset--color--dark-text);
    opacity: 0.6;
}
.kn-kehulomake__counter.is-warn {
    color: var(--wp--preset--color--primary-dark);
    opacity: 1;
}

.kn-kehulomake__field--checkbox > label {
    display: flex;
    gap: var(--wp--preset--spacing--10);
    align-items: flex-start;
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}
.kn-kehulomake__field--checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: 4px;
    width: 18px;
    height: 18px;
    accent-color: var(--wp--preset--color--blue-dark);
    cursor: pointer;
}

.kn-kehulomake__fieldset {
    border: 0;
    padding: 0;
}

.kn-kehulomake__checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--wp--preset--spacing--10);
}
.kn-kehulomake__cb {
    display: flex;
    gap: var(--wp--preset--spacing--10);
    align-items: center;
    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--15);
    background: #ffffff;
    border: 2px solid rgba(8, 6, 5, 0.18);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kn-kehulomake__cb:hover {
    border-color: var(--wp--preset--color--blue-dark);
}
.kn-kehulomake__cb input[type="checkbox"] {
    flex: 0 0 auto;
    accent-color: var(--wp--preset--color--blue-dark);
    cursor: pointer;
}
.kn-kehulomake__cb:has(input:checked) {
    background: var(--wp--preset--color--blue-light);
    border-color: var(--wp--preset--color--blue-dark);
}

.kn-kehulomake__honeypot {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Kuvalataus */
/* Natiivi file-input piilotettu saavutettavasti (ei display:none, jotta
   tabilla pääsee siihen ja label-klikki avaa dialogin). Selaimen oma
   "Choose file" -teksti korvataan custom-label-napilla alla. */
.kn-kehulomake__file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.kn-kehulomake__file-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.kn-kehulomake__file-btn {
    display: inline-block;
    padding: 8px 18px;
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--dark-text);
    border: 1px solid rgba(8, 6, 5, 0.18);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.kn-kehulomake__file-btn:hover {
    background: var(--wp--preset--color--red-dark, #ED1E24);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--red-dark, #ED1E24);
}
/* Näppäimistöfokus näkyy napissa vaikka itse input on piilossa */
.kn-kehulomake__file:focus-visible + .kn-kehulomake__file-btn {
    outline: 2px solid var(--wp--preset--color--green-dark);
    outline-offset: 2px;
}
.kn-kehulomake__file-name {
    font-size: 0.85rem;
    color: var(--wp--preset--color--dark-text);
    opacity: 0.75;
}
.kn-kehulomake__file-preview {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
.kn-kehulomake__file-preview-img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 10px;
    object-fit: cover;
}
.kn-kehulomake__file-remove {
    background: transparent;
    border: 0;
    color: var(--wp--preset--color--green-dark);
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0;
}

.kn-kehulomake__actions {
    margin-block-start: var(--wp--preset--spacing--25);
    text-align: center;
}
/* Sama spesifisyysnosto kuin .kn-seina__more — ks. selitys siellä. */
body .kn-kehulomake__submit {
    cursor: pointer;
    border: 0;
    font-family: inherit;
    font-weight: 700;
}
.kn-kehulomake__submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

.kn-kehulomake__status {
    margin-block-start: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--15);
    border-radius: 10px;
    line-height: 1.5;
}
.kn-kehulomake__status:empty {
    display: none;
}
.kn-kehulomake__status.is-success {
    background: #ffffff;
    color: var(--wp--preset--color--dark-text);
    text-align: center;
    font-weight: 600;
}
.kn-kehulomake__status.is-error {
    background: #FCE8E5;
    color: var(--wp--preset--color--green-dark);
}
.kn-kehulomake__status.is-error ul {
    margin: 0;
    padding-inline-start: var(--wp--preset--spacing--20);
}

@media (max-width: 600px) {
    .kn-kehulomake-wrapper {
        padding: var(--wp--preset--spacing--25);
        border-radius: 10px;
    }
    .kn-kehulomake-wrapper::before {
        /* "Anna oma kehusi!" -ribbon mobiilissa pienempi */
        top: 28px;
        right: -55px;
        width: 180px;
        padding: 5px 0;
        font-size: 0.6rem;
        letter-spacing: 0.06em;
    }
    .kn-kehulomake__checkboxes {
        /* 2 saraketta ≥380px, 1 sarake hyvin pienillä näytöillä */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .kn-kehulomake__cb {
        padding: 8px 12px;
        font-size: 0.95rem;
    }
    .kn-kehulomake__field > label,
    .kn-kehulomake__fieldset > legend {
        font-size: 1rem;
    }
    .kn-kehulomake textarea {
        min-height: 120px; /* hieman matalampi mobiilissa, ei syö koko ruutua */
    }
    .kn-kehulomake__submit {
        width: 100%; /* helpompi tap-target mobiilissa */
    }
}

/* =====================================================================
   Toimija-arkiston kartta (archive-toimija.php)
   - Desktop: SVG-pohjainen kuntakartta oikeilla maantieteellisillä rajoilla
   - Mobiili: lista (rajat tulisivat liian pieniksi)
   ===================================================================== */

/* Sivukohtaiset väriparit — KOKO sivun pohja brand-väriin (ei valkoisia/
   läpinäkyviä taustaosioita). Body-tausta kattaa myös taustattomat
   otsikko-/kn-reveal-sektiot. Vain kartta-laatikko jää vaaleaksi.
   Toimijat + single-toimija = vihreä, Anna oma kehu (144) = sininen,
   Kampanjan tarina (145) = vihreä. */
body.archive,
body.post-type-archive-toimija,
body.single-toimija,
body.page-id-145 {
    background-color: var(--wp--preset--color--green-light, #A2EFCE);
}
body.page-id-144 {
    background-color: var(--wp--preset--color--red-light, #F9BABC);
}
/* Anna oma kehu — lomake-elementit punaisella aksentilla
   (input:focus hoituu yleisellä --kn-focus-color-muuttujalla) */
body.page-id-144 .kn-kehulomake__field--checkbox input[type="checkbox"],
body.page-id-144 .kn-kehulomake__cb input[type="checkbox"] {
    accent-color: var(--wp--preset--color--red-dark, #ED1E24);
}
body.page-id-144 .kn-kehulomake__cb:has(input:checked) {
    background: var(--wp--preset--color--red-light, #F9BABC) !important;
    border-color: var(--wp--preset--color--red-dark, #ED1E24) !important;
}

/* Teksti väriparin tummalla sävyllä — ei mustaa (Jyrin mainos-logiikka).
   Vihreät sivut = green-dark, punainen sivu (144) = red-dark.
   144/145:n sisältösektiot kantavat värin natiivisti lohkoissa; nämä
   body-tason säännöt jäävät varalle template-/sisällön ulkopuoliselle tekstille. */
body.archive, body.post-type-archive-toimija, body.single-toimija, body.page-id-145,
body.archive h1, body.archive h2, body.archive h3, body.archive .wp-block-heading,
body.post-type-archive-toimija h1, body.post-type-archive-toimija h2, body.post-type-archive-toimija h3, body.post-type-archive-toimija .wp-block-heading,
body.single-toimija h1, body.single-toimija h2, body.single-toimija h3, body.single-toimija .wp-block-heading,
body.page-id-145 h1, body.page-id-145 h2, body.page-id-145 h3, body.page-id-145 .wp-block-heading {
    color: var(--wp--preset--color--green-dark, #0E4906);
}
body.page-id-144,
body.page-id-144 h1, body.page-id-144 h2, body.page-id-144 h3, body.page-id-144 .wp-block-heading {
    color: var(--wp--preset--color--red-dark, #ED1E24);
}

/* Toimijat-templaten (archive-toimija.php) beige-sektio brand-vihreäksi.
   Sivut 144/145 kantavat tausta- ja tekstivärinsä natiivisti lohkojen
   omissa attribuuteissa, joten niille ei tarvita content-overridea. */
body.archive .wp-block-group.has-light-gray-background-color,
body.post-type-archive-toimija .wp-block-group.has-light-gray-background-color,
body.single-toimija .wp-block-group.has-light-gray-background-color {
    background-color: var(--wp--preset--color--green-light, #A2EFCE) !important;
}

/* Sisältölinkit sivun väriparin mukaan template-renderöidyillä sivuilla
   (toimijat = vihreä). Etusivu (sininen) käyttää globaalia blue-dark-linkkiä,
   144/145 kantavat linkkivärinsä natiivisti lohkoissa. */
body.archive .main-content a:not(.wp-block-button__link),
body.post-type-archive-toimija .main-content a:not(.wp-block-button__link),
body.single-toimija .main-content a:not(.wp-block-button__link) {
    color: var(--wp--preset--color--green-dark, #0E4906);
}
body.archive .main-content a:not(.wp-block-button__link):hover,
body.post-type-archive-toimija .main-content a:not(.wp-block-button__link):hover,
body.single-toimija .main-content a:not(.wp-block-button__link):hover {
    color: var(--wp--preset--color--green-dark, #0E4906);
    opacity: .75;
}

/* Navi-toggler (hampuri-ikoni) seuraa sivun väriparia --kn-focus-color-
   muuttujalla — sama lähde kuin focus-renkailla, joten toggler ja focus
   pysyvät aina synkassa. Default (:root) = blue-dark, toimija-sivut green-dark,
   page-144 red-dark. #main-navbar-etuliite nostaa spesifisyyden starter.scss:n
   $primary (red-dark) -oletuksen yli. */
#main-navbar #dg-nav-icon span {
    background: var(--kn-focus-color);
}

/* dg-nav-icon on <span> (HTML5: <div> ei sallittu <button>-elementin sisällä).
   span on oletuksena inline → width/height eivät päde; pakotetaan inline-block
   jotta 35×30px hampurilaisikoni säilyy ennallaan. */
#main-navbar #dg-nav-icon {
    display: inline-block;
}

/* Hero-kuvitus (kala, lintu) sivun otsikon yläpuolelle WP-image-blokkina.
   Editorin näkyvyyden takia ei CSS::before-pseudoelementtiä, vaan
   image-blokille lisätään lisäluokka .kn-kuvitus joka antaa koon. */
.kn-kuvitus {
    max-width: 85vw;
    width: 380px;
    margin: 0 auto var(--wp--preset--spacing--25) !important;
}
.kn-kuvitus img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 600px) {
    .kn-kuvitus {
        width: 260px;
    }
}

/* Tuo kartta lähemmäs otsikkoa (vähemmän tyhjää väliä) */
.kn-header-lintu {
    padding-bottom: var(--wp--preset--spacing--25) !important;
}
body.post-type-archive-toimija .wp-block-group.has-light-gray-background-color {
    padding-top: var(--wp--preset--spacing--25) !important;
}

.kn-kartta {
    margin-block-start: var(--wp--preset--spacing--50);
}

/* Yhtenäinen cream-laatikko: SVG-kartta vasemmalla, alueelliset oikealla */
.kn-kartta__board {
    display: flex;
    gap: var(--wp--preset--spacing--25);
    align-items: flex-start;
    padding: var(--wp--preset--spacing--25);
    background: #ffffff;
    border-radius: 24px;
}

/* --- SVG-kartta (desktop) --- */
.kn-kartta__svg-wrap {
    flex: 1 1 0;
    min-width: 0;
}
.kn-kartta-svg {
    display: block;
    width: 100%;
    height: auto;
}
.kn-kartta-svg a,
.kn-kartta-svg text {
    text-decoration: none !important;
}

.kn-kartta-svg__path {
    fill: var(--wp--preset--color--white);
    stroke: var(--wp--preset--color--green-dark);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: fill 0.18s ease, stroke 0.18s ease;
}
.kn-kartta-svg__a.has-kehuja .kn-kartta-svg__path {
    fill: var(--wp--preset--color--green-light);
}
.kn-kartta-svg__a:hover .kn-kartta-svg__path,
.kn-kartta-svg__a:focus-visible .kn-kartta-svg__path {
    fill: var(--kn-focus-color);
    stroke: var(--kn-focus-color);
    cursor: pointer;
}
/* Tekstit ovat erillisessä <g>-ryhmässä (aina päällimmäisinä, ei <a>:n sisällä).
   Eivät reagoi hoveriin, mutta dark-text + valkoinen stroke pysyy luettavana
   kaikilla taustaväreillä (white / light-cream / primary). */
.kn-kartta-svg__name {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    fill: var(--wp--preset--color--dark-text);
    text-anchor: middle;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 3px;
}
.kn-kartta-svg__count {
    font-size: 12px;
    fill: var(--wp--preset--color--green-dark);
    text-anchor: middle;
    font-weight: 600;
    pointer-events: none;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 3px;
}
/* Pallura + numero kunnan päällä kun kehuja on vähintään yksi */
.kn-kartta-svg__count-badge {
    fill: var(--wp--preset--color--green-dark);
}
.kn-kartta-svg__count-num {
    font-size: 13px;
    font-weight: 700;
    fill: var(--wp--preset--color--white);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.kn-kartta__attribuutio {
    margin: var(--wp--preset--spacing--15) 0 0;
    text-align: center;
    color: var(--wp--preset--color--dark-text);
    opacity: 0.6;
}
.kn-kartta__attribuutio a {
    color: inherit;
    text-decoration: underline;
}

/* --- Mobiilifallback: lista (desktopilla piilotettu) --- */
.kn-kartta__list {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
}
.kn-kartta__list-item {
    margin: 0;
    border-block-end: 1px solid rgba(255, 255, 255, 0.7);
}
.kn-kartta__list-item:last-child {
    border-block-end: 0;
}
.kn-kartta__list-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--20);
    background: var(--wp--preset--color--white);
    text-decoration: none !important;
    color: var(--wp--preset--color--dark-text);
}
.kn-kartta__list-link.has-kehuja {
    background: var(--wp--preset--color--green-light);
}
.kn-kartta__list-link:hover {
    background: var(--wp--preset--color--green-dark);
    color: var(--wp--preset--color--white);
}
.kn-kartta__list-name {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
}
.kn-kartta__list-count {
    font-size: 0.9rem;
    color: var(--wp--preset--color--green-dark);
    font-weight: 600;
}
.kn-kartta__list-link:hover .kn-kartta__list-count {
    color: var(--wp--preset--color--white);
}

/* --- Alueelliset (Maakuntaliitto + Eloisa) --- */
/* Desktop: oikea sarake board-laatikossa (ei omaa taustaa). */
.kn-kartta__alueelliset {
    flex: 0 0 200px;
}
.kn-kartta__alueelliset-otsikko {
    margin: 0 0 var(--wp--preset--spacing--15);
    font-weight: 600;
    color: var(--wp--preset--color--green-dark);
    text-align: center;
}
.kn-kartta__alueelliset-list {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--10);
}
.kn-kartta__node--wide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5px;
    padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--20);
    background: var(--wp--preset--color--cream, #FBF7F0);
    color: var(--wp--preset--color--dark-text);
    text-decoration: none !important;
    border-radius: 15px;
    border: 1px solid var(--wp--preset--color--green-light, #A2EFCE);
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.kn-kartta__node--wide:hover {
    transform: translateY(-2px);
    background: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--green-dark);
    color: var(--wp--preset--color--dark-text);
}
.kn-kartta__node--wide .kn-kartta__node-title {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.3;
}
.kn-kartta__node--wide .kn-kartta__node-count {
    font-size: 0.85rem;
    color: var(--wp--preset--color--green-dark);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7.5px;
}
.kn-kartta__node-count-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7.5px;
    background: var(--wp--preset--color--green-dark);
    color: var(--wp--preset--color--white);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

/* --- Vaihto SVG ↔ lista mobiilirajalla --- */
@media (max-width: 781px) {
    /* Mobiilissa board on pelkkä passthrough — taustat hoitaa lista ja alueelliset itse */
    .kn-kartta__board {
        display: block;
        background: transparent;
        padding: 0;
        border-radius: 0;
    }
    .kn-kartta__svg-wrap {
        display: none;
    }
    .kn-kartta__list {
        display: block;
    }
    .kn-kartta__alueelliset {
        flex: none;
        margin-block-start: var(--wp--preset--spacing--25);
        padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--25);
        background: var(--wp--preset--color--white);
        border-radius: 18px;
        border: 1px dashed rgba(14, 73, 6, 0.35);
    }
    .kn-kartta__node--wide {
        flex-direction: row;
        align-items: baseline;
        gap: var(--wp--preset--spacing--10);
        padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--25);
        background: #ffffff;
        justify-content: center;
    }
}

/* === Kommentit-modaali =====================================================
   Yksi globaali Bootstrap-modaali (wp_footer kautta), sisältö ladataan
   AJAX:lla kun käyttäjä klikkaa kortin "💬 N kommenttia" -nappia. */

.kn-kommentit-modal .modal-content {
    border-radius: 0;
    border: 0;
}
.kn-kommentit-modal .modal-header {
    background: var(--wp--preset--color--green-dark, #0E4906);
    border-bottom: 0;
    border-radius: 0;
}
.kn-kommentit-modal .modal-header .modal-title {
    color: #ffffff;
    font-weight: 700;
}
.kn-kommentit-modal .modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}
.kn-kommentit-modal .modal-body {
    padding: var(--wp--preset--spacing--25);
}

.kn-kommentit-modal__loading {
    text-align: center;
    padding: var(--wp--preset--spacing--50) 0;
    color: rgba(8, 6, 5, 0.6);
    font-size: 1.05rem;
}

.kn-kommentit-modal__error {
    padding: var(--wp--preset--spacing--15) var(--wp--preset--spacing--25);
    background: rgba(237, 30, 36, 0.08);
    border-radius: 0;
    color: var(--wp--preset--color--red-dark);
    font-size: 0.95rem;
}

/* Kehun yhteenveto modaalin yläosassa — käyttäjä näkee mihin kehuun kommentoi */
.kn-kommentit-modal__kehu {
    margin-bottom: var(--wp--preset--spacing--25);
    padding-bottom: var(--wp--preset--spacing--25);
    border-bottom: 1px dashed rgba(8, 6, 5, 0.18);
}
.kn-kommentit-modal__kehu a {
    color: var(--wp--preset--color--green-dark, #0E4906);
}
.kn-kommentit-modal__kehu-kuva {
    margin-bottom: var(--wp--preset--spacing--15);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 5; /* 1080 x 1350 -kuvasuhde (pysty, IG-tyyli) */
    background: #ffffff;
}
.kn-kommentit-modal__kehu-kuva img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kn-kommentit-modal__kehu-body {
    font-family: 'Rubik', system-ui, sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--wp--preset--color--dark, #2A2220);
}
.kn-kommentit-modal__kehu-body p {
    margin: 0 0 var(--wp--preset--spacing--10);
}
.kn-kommentit-modal__kehu-body p:last-child {
    margin-bottom: 0;
}
.kn-kommentit-modal__kehu-author {
    margin: var(--wp--preset--spacing--10) 0 0 !important;
    font-size: 0.9rem;
    color: rgba(8, 6, 5, 0.65);
}
.kn-kommentit-modal__kehu-targets {
    margin-top: var(--wp--preset--spacing--10);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--7);
}
.kn-kommentit-modal__kehu-targets-label {
    font-size: 0.85rem;
    color: rgba(8, 6, 5, 0.6);
    margin-right: 5px;
}

/* Modaalin sisäinen kommenttilista — uudelleenkäyttää .kn-kehu__kommentit-list
   tyylit (sama markup kuin kortin sisällä), mutta lisätään väliotsikko */
.kn-kommentit-modal__content .kn-kehu__kommentit-list {
    margin: 0 0 var(--wp--preset--spacing--25);
    padding: 0;
    list-style: none;
}

/* Lomake modaalin alaosassa */
.kn-kommentit-modal__content .kn-kehu__kommentti-form {
    margin-top: var(--wp--preset--spacing--25);
    padding-top: var(--wp--preset--spacing--25);
    border-top: 1px dashed rgba(8, 6, 5, 0.18);
}

/* Hätäkytkin: "lähetykset suljettu" -ilmoitus lomakkeen/kommenttikentän tilalla.
   currentColor + neutraali tyyli → toimii sekä vaalealla (lomakesivut) että
   tummalla (kommenttimodaali) taustalla. */
.kn-submissions-closed {
    text-align: center;
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--25);
    border: 2px dashed currentColor;
    opacity: 0.8;
}
.kn-submissions-closed__text {
    margin: 0;
    font-weight: 600;
}