.dg-yamm-sub-items > ul.dropdown-menu > li > a::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 15px;
    vertical-align: middle;
    background-image: url(../images/icon-arrow-right-black.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

@media (min-width: 992px) {
    .yamm .dropdown.yamm-fw .dropdown-menu, .yamm .dropup.yamm-fw .dropdown-menu {
        margin-top: 0 !important;
    }

    /* Rajoita lakanan sisältö wideSize-leveyteen (overridaa .alignwide .alignwide) */
    .yamm .dropdown-menu.p-lg-5 > .container.alignwide {
        width: calc(100% - 50px) !important;
        max-width: calc(var(--wp--style--global--wide-size)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .dg-yamm-sub-items ul.dropdown-menu {
        margin-top: 0 !important;
        display: block;
        position: static !important;
        border: 0;
    }

    .dg-yamm-sub-items ul.dropdown-menu .dropdown-toggle {
        display: none;
    }

    .dg-yamm-sub-items > ul.dropdown-menu {
        margin: 0 20px 0 0;
        display: flex;
        flex-wrap: wrap;
    }

    .dg-yamm-sub-items > ul.dropdown-menu > li {
        width: 50%;
        padding: 0 20px 20px 0;
    }

    .dg-yamm-sub-items > ul.dropdown-menu > li > a {
        font-weight: 800;
        color: var(--primary-color);
    }
}

@media (min-width: 1200px) {
    .dg-yamm-sub-items > ul.dropdown-menu > li {
        width: 33.3333%;
    }
}

@media (min-width: 1400px) {
    .dg-yamm-sub-items > ul.dropdown-menu > li {
        width: 25%;
    }
}

/* Mobiili: lakana accordion-tyyliin, 2. ja 3. taso näkyviin */
@media (max-width: 991px) {
    .yamm .main-menu {
        padding: 0;
    }

    .yamm .main-menu > li.dropdown.yamm-fw {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0;
    }

    /* Dropdown container: ei absoluuttinen, avautuu inline-tilaa viemässä */
    .yamm .dropdown.yamm-fw > .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        background: transparent !important;
        width: 100%;
        margin-top: 0;
    }

    /* dg-yamm-sub-items: pinon pystysuuntaan (ei rinnakkain kuten desktopissa) */
    .yamm .dg-yamm-sub-items {
        flex-direction: column;
        gap: 0;
    }

    .yamm .dg-yamm-sub-items > .dropdown-menu {
        background: transparent !important;
        display: flex !important;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    .yamm .dg-yamm-sub-items > .dropdown-menu > li {
        min-width: 0;
        width: 100%;
        padding: 0;
    }

    /* Ohut erotinviiva jokaisen alakohdan alle kuten leiskassa (11.8.2026;
       XD Mobiili_valikko: `Line 104–110 [stroke #BCC7D6 @1]` myös alakohtien
       väleissä, ei vain ylätason). Viimeiseltä pois, ettei tule tuplaviivaa
       ylätason oman alareunan kanssa.
       Väri #BCC7D6 24 % peittävyydellä (23.10.2026): alakohtien viiva
       vaaleampi kuin ylätason kohtien täysi viiva. */
    .yamm .dg-yamm-sub-items > .dropdown-menu > li > .dropdown-item {
        border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--light-gray) 24%, transparent);
    }

    .yamm .dg-yamm-sub-items > .dropdown-menu > li:last-child > .dropdown-item {
        border-bottom: 0;
    }

    /* 2. tason otsikot mobiililla */
    #main-navbar-container .dg-yamm-sub-items > .dropdown-menu > li > a.dropdown-item {
        padding: 0.75rem 0 !important;
        font-size: 1.05rem !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    /* 3. taso: pakota näkyviin kun vanhempi on auki, sisennä vasemmalta */
    .yamm .dg-yamm-sub-items .dropdown-menu .dropdown-menu {
        display: block !important;
        position: static !important;
        background: transparent !important;
        border: none;
        box-shadow: none;
        padding: 0 0 0.5rem 1rem;
        margin: 0;
    }

    #main-navbar-container .dg-yamm-sub-items .dropdown-menu .dropdown-menu li a.dropdown-item {
        padding: 0.5rem 0 !important;
        font-size: 0.95rem !important;
        font-weight: normal;
        border-bottom: none;
    }

    /* Lakanan container: pois paddingit mobiilissa */
    .yamm .dropdown.yamm-fw > .dropdown-menu .container {
        padding: 0;
    }
}

li.yamm-fw {
    position: relative !important;
}

li.yamm-fw > .dropdown-toggle:after {
    display: none;
}

li.yamm-fw > a.nav-link {
    display: inline-block;
}

/* Caret on 26.8.2026 lähtien <button> eikä <a href="#"> (saavutettavuus,
   ks. inc/wp_megamenu_navwalker.php). Napin oletustyylit on siksi nollattava:
   selain antaisi sille buttonface-taustan, oman pehmusteen ja fonttinsa, ja
   nuoli on pelkkä background-image. */
li.yamm-fw > a.nav-link + .dg-caret {
    display: inline-block;
    position: absolute;
    top: 16px;
    right: 20px;
    width: 25px;
    height: 25px;
    background-size: 14px;
    background-position: center;
    vertical-align: middle;
    background-image: url(../images/icon-dropdown-toggle.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    border: 0;
    transform: rotate(0);
}

li.yamm-fw > a.nav-link + .dg-caret[aria-expanded="true"],
li.yamm-fw.show > a.nav-link + .dg-caret {
    transform: rotate(180deg) !important;
    transition: transform 0.25s ease;
}

@media (min-width: 992px) {
    li.yamm-fw > a.nav-link + .dg-caret {
        display: inline-block;
        top: 20px;
        right: 10px;
        width: 15px;
        height: 15px;
        margin-top: -4px;
        transform: inherit;
        position: static;
        margin-right: 1rem;
        background-size: 12px;
    }

    li.yamm-fw {
        position: static !important;
    }

    .yamm-fw.show > .dropdown-menu {
        display: flex;
    }

    .main-menu li.dropdown.yamm-fw > a.nav-link {
        padding-right: 12px;
    }
}
/* ==========================================================================
   FARIZON: lakanan ilme Tiksin 6.8.2026 visuaalien mukaan (7.8.2026)
   --------------------------------------------------------------------------
   Desktop-lakanalle EI ole omaa näkymää visuaaleissa: hover-tilat eivät tule
   XD-exportissa mukaan (sama rajoite kuin nappien hover-tiloilla, ks.
   tiksin-visuaalit-6-8-2026.md kohta 8). Lakana on siksi tyylitelty visuaalin
   OMALLA kielellä: valkoinen kaista valkoisen valikkorivin jatkeena, kulmikas,
   17px-linkit, korosteet evolution-bluella. Lakanan sisältö rajautuu
   sisältöleveyteen (1640px) samalla säännöllä kuin muu header.
   ========================================================================== */
@media (min-width: 992px) {

    /* Avaus hoverilla. Teeman oma hover-sääntö (scss/starter.scss) kohdistuu
       luokkiin .menu-item-has-children.nav-item, mutta Yamm-walker antaa
       ylimmälle tasolle vain `dropdown yamm-fw` → sääntö ei osunut lainkaan.
       :focus-within pitää lakanan käytettävänä myös näppäimistöllä. */
    .yamm .dropdown.yamm-fw:hover > .dropdown-menu,
    .yamm .dropdown.yamm-fw:focus-within > .dropdown-menu {
        display: flex !important;
    }

    /* Esc sulkee lakanan vaikka hover/fokus olisi yhä päällä (WCAG 1.4.13,
       22.10.2026). Luokan asettaa ja poistaa `dg_lakana_aria_expanded()`
       (js/javascripts.js). Sama tarkkuus kuin yllä → järjestys ratkaisee. */
    .yamm .dropdown.yamm-fw.dg-lakana-suljettu > .dropdown-menu {
        display: none !important;
    }

    /* Lakanan kaista: valkoinen, kulmikas, ohut yläviiva erottamaan
       valikkorivistä + pehmeä varjo. */
    .yamm .dropdown.yamm-fw > .dropdown-menu {
        border: 0;
        border-block-start: 1px solid var(--wp--preset--color--light-gray);
        border-radius: 0;
        background-color: #fff;
        box-shadow: 0 15px 25px rgb(18 22 29 / 0.10);
        padding-block: var(--wp--preset--spacing--50) !important;
    }

    /* Kategoriaotsikko (2. taso, jos valikossa on kolme tasoa) */
    .yamm .yamm-heading {
        font-size: var(--wp--preset--font-size--medium-large);
        font-weight: 800;
        color: var(--wp--preset--color--soft-gray);
        margin-block-end: var(--wp--preset--spacing--25);
    }

    /* Linkit: 17px, musta, hover evolution-blue. Nuoli tulee tiedoston
       alussa olevasta ::after-säännöstä. */
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li > a {
        font-size: var(--wp--preset--font-size--medium);
        font-weight: 600;
        color: var(--wp--preset--color--black);
        padding-inline: 0;
    }

    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li > a:hover,
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li > a:focus-visible {
        color: var(--wp--preset--color--evolution-blue);
        background: transparent;
    }

    /* Päävalikon kohta: aktiivisella/avatulla liukuväri-alleviivaus kuten
       osionavipalkissa → sama kieli koko sivustolla.

       ⚠️ Valitsin EI saa vaatia `.dropdown.yamm-fw`:tä (korjattu 14.8.2026):
       Yamm-walker antaa sen vain kohdille joilla on alasivuja, joten lapsettomat
       kohdat (esim. "Kampanjat", "Ota yhteyttä") eivät saaneet alareunusta
       hoverilla lainkaan. `> li` kattaa molemmat. */
    .yamm .main-menu > li > a.nav-link {
        position: relative;
    }

    /* Sama 3px alareunus kolmessa tilassa: hover, näppäimistöfokus ja VALITTU
       SIVU. Valittu sivu tunnistetaan WP:n omista tilaluokista — walker säilyttää
       ne nyt myös ensimmäisellä tasolla (inc/wp_megamenu_navwalker.php).
       `*-ancestor` ja `*-parent` mukana, jotta ylätason kohta korostuu myös
       alasivulla (Mallisto korostuu kun ollaan Farizon SV -sivulla). */
    .yamm .main-menu > li:hover > a.nav-link::after,
    .yamm .main-menu > li:focus-within > a.nav-link::after,
    .yamm .main-menu > li.current-menu-item > a.nav-link::after,
    .yamm .main-menu > li.current-menu-parent > a.nav-link::after,
    .yamm .main-menu > li.current-menu-ancestor > a.nav-link::after,
    .yamm .main-menu > li.current-page-item > a.nav-link::after,
    .yamm .main-menu > li.current-page-parent > a.nav-link::after,
    .yamm .main-menu > li.current-page-ancestor > a.nav-link::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        /* Linkin omaan alareunaan: -10px jäi lakanan paneelin alle piiloon. */
        inset-block-end: 0;
        block-size: 3px;
        background: var(--wp--preset--gradient--farizon-cta);
    }
}

/* ==========================================================================
   FARIZON: lakanan lopullinen ilme (layoutkuva 7.8.2026)
   Kolme saraketta (≥1600px neljä). Jokainen kohta = otsikko + kuvausteksti + ohut erotinviiva.
   Ei nuoli-ikoneita eikä toistettua osion otsikkoa.
   ========================================================================== */
@media (min-width: 992px) {

    /* Osion otsikko lakanan sisällä pois: se toistaa juuri klikatun
       päävalikon kohdan, eikä sitä ole layoutissa.
       `!important` on pakko: walker antaa otsikolle Bootstrapin
       `d-lg-block`-luokan, jonka `display: block !important` voittaisi. */
    .yamm .yamm-heading {
        display: none !important;
    }

    /* Yläpehmuste 50px, alapehmuste 25px (23.10.2026): layoutin 100px
       yläpehmuste teki lakanasta niin korkean, että se peitti suuren osan
       sivusta (asiakkaan palaute). Alhaalla on lisäksi viimeisen rivin 25px
       riviväli (`margin-block-end`), joten 25px tekee tyhjästä tilasta yhtä
       korkean ylä- ja alapuolella (mitattu 60 / 60px). */
    .yamm .dropdown.yamm-fw > .dropdown-menu {
        padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--25) !important;
    }

    /* Kolme saraketta 992–1599px, neljä ≥1600px (23.10.2026): neljän
       kohdan lakanat mahtuvat yhdelle riville ja lakana madaltuu.
       1400–1599px:ssä neljä saraketta rivitti kuvaukset kahdelle riville.
       Sarakeväli 50 → 25px, jotta kuvaukset mahtuvat yhdelle riville. */
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li,
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li:only-child {
        width: 33.3333%;
        padding: 0 var(--wp--preset--spacing--25) 0 0;
    }
}

@media (min-width: 1600px) {
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li,
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li:only-child {
        width: 25%;
    }
}

@media (min-width: 992px) {

    /* Kohta: otsikko ja kuvaus allekkain, erotinviiva alla.
       Alapehmuste 25px (7.8.2026): 50px oli liikaa. Arvot teeman
       spacing-asteikolta (README).

       ⚠️ Selektorissa on `#main-navbar`, koska `scss/starter.scss` asettaa
       `#main-navbar .dropdown-menu .dropdown-item { padding: 2.5px 15px }`.
       ID-selektori (1,2,0) voittaa minkä tahansa määrän luokkia, joten
       pelkällä luokkaselektorilla pehmuste EI purkanut lainkaan — mitattu
       2.5px, vaikka sääntö luki 25px. */
    #main-navbar.yamm .dg-yamm-sub-items > ul.dropdown-menu > li > a.dropdown-item {
        display: flex;
        flex-direction: column;
        gap: var(--wp--preset--spacing--10);
        padding: 0 0 var(--wp--preset--spacing--25);
        margin-block-end: var(--wp--preset--spacing--25);
        border-block-end: 1px solid var(--wp--preset--color--light-gray);
        white-space: normal;
    }

    /* Rivin kohdat yhtä korkeiksi (23.10.2026): kahdelle riville rivittyvä
       kuvaus nosti muuten vain oman kohtansa erotinviivan alemmas. Rivin
       li:t venyvät flex-wrapissa jo samaan korkeuteen, linkki täyttää li:n. */
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li {
        display: flex;
        flex-direction: column;
    }

    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li > a.dropdown-item {
        flex-grow: 1;
    }

    /* Nuoli pois — layoutissa kohdissa ei ole ikonia.
       Sääntö on tiedoston alussa ilman media queryä, joten se kumotaan tässä. */
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li > a::after {
        content: none;
    }

    /* Sääntö on tarkoituksella tässä >=992px-lohkossa: mobiilivalikossa
       otsikot ovat accordion-rivejä eivätkä saa lakanan typografiaa.
       Koko 1rem (= `regular`-preset), linjaus 7.8.2026. */
    .yamm .dg-yamm-title {
        font-size: var(--wp--preset--font-size--regular);
        font-weight: 600;
        line-height: 1.3;
        color: var(--wp--preset--color--black);
    }

    /* Kuvaus 16 → 15px (23.10.2026), jotta se mahtuu yhdelle riville. */
    .yamm .dg-yamm-desc {
        font-size: var(--wp--preset--font-size--small);
        font-weight: 400;
        line-height: 1.4;
        color: var(--wp--preset--color--neutral-gray);
    }

    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li > a.dropdown-item:hover .dg-yamm-title,
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li > a.dropdown-item:focus-visible .dg-yamm-title {
        color: var(--wp--preset--color--evolution-blue);
    }
}

/* Mobiilivalikossa on layoutin mukaan pelkät otsikot ilman kuvauksia. */
@media (max-width: 991px) {
    .yamm .dg-yamm-desc {
        display: none;
    }
}

/* Mobiilivalikon alakohdissa ei ole nuolta (layoutkuva 7.8.2026) —
   pelkkä teksti ja ohut erotinviiva. Tiedoston alussa oleva ::after-nuoli on
   ilman media queryä, joten se kumotaan myös täällä (desktopilla kumottu jo
   lakanan omassa lohkossa). */
@media (max-width: 991px) {
    .yamm .dg-yamm-sub-items > ul.dropdown-menu > li > a::after {
        content: none;
    }
}

/* Nykyisen sivun kohta lakanassa ILMAN alleviivausta (24.9.2026, Antin linjaus).
   Alleviivaus tulee Bootstrapin käännöksestä (scss/starter.scss:
   `ul.dropdown-menu li.current_page_item a.dropdown-item { text-decoration:
   underline }`, 0,2,3). `.yamm`-etuliite nostaa tämän sen yli, eikä
   Bootstrapia tarvitse kääntää uudelleen. Ylätason kohdan liukuväriviiva
   (yllä) kertoo jo missä osiossa ollaan. Koskee myös mobiilivalikkoa. */
.yamm ul.dropdown-menu li.current_page_item a.dropdown-item {
    text-decoration: none;
}

/* Nykyisen sivun otsikko lakanassa evolution-bluella (24.9.2026) — sama väri
   kuin hover/fokus-tilassa. EI oranssia: #FF6432 valkoisella = 2,95:1, alle
   WCAG AA:n 4,5:1 (17px:n lihavointi ei ole "suurta tekstiä"). #000F9F ≈ 14:1. */
.yamm ul.dropdown-menu li.current_page_item .dg-yamm-title {
    color: var(--wp--preset--color--evolution-blue);
}

/* Painallustila mobiilivalikossa (26.10.2026). iPhonessa hover ei toimi eikä
   painalluksesta jäänyt näkyvää palautetta → painettu kohta evolution-bluella,
   samalla värillä kuin desktopin hover ja nykyinen sivu. Safari näyttää
   :activen vasta kun sivulla on touchstart-kuuntelija (js/javascripts.js alku).
   Bootstrapin .dropdown-item:active antaisi sinisen taustan → tausta pois. */
@media (max-width: 991px) {
    /* Ylätason linkin väri tulee common.css:stä valitsimella
       `#main-navbar .dg-header__bar ul.main-menu > li > a.nav-link` (1,3,3) →
       sama ketju + :active, muuten musta voittaisi. */
    #main-navbar .dg-header__bar ul.main-menu > li > a.nav-link:active,
    #main-navbar .nav-link:active,
    #main-navbar .dropdown-item:active,
    #main-navbar .dropdown-item:active .dg-yamm-title {
        color: var(--wp--preset--color--evolution-blue);
    }

    #main-navbar .dropdown-item:active {
        background-color: transparent;
    }
}