/**
 * Karisma: mobiilivalikon alavalikot kiinni oletuksena.
 *
 * JUURISYY
 * Emoteema (wardrobe/style.css) toteuttaa haitarin jo itse:
 *
 *   .is-menu-open ... .has-child .wp-block-navigation__submenu-container
 *     { opacity: 0; visibility: hidden }
 *   .is-menu-open ... .wp-block-navigation-submenu__toggle:where([aria-expanded=true])
 *     + .wp-block-navigation__submenu-container
 *     { position: static; opacity: 1; visibility: visible }
 *
 * WordPressin core kuitenkin sitoo nuolen aria-expandedin Interactivity
 * API:n tilaan, joka on mobiilipeitteen ollessa auki AINA true. Silloin
 * teeman [aria-expanded=true] -saanto osuu kaikkiin alavalikoihin ja ne
 * aukeavat yhta aikaa. Nuoli ei myoskaan muuta tilaa.
 *
 * KORJAUS
 * assets/js/mobile-menu.js pitaa aria-expandedin oikeassa arvossa, jolloin
 * teeman oma saanto alkaa toimia. Alla olevat display-saannot ovat lisaksi
 * varmistus, joka ei ole riippuvainen teeman saannon sailymisesta
 * paivityksissa. Molemmat ohjautuvat luokasta .karisma-submenu-open.
 *
 * Kaikki saannot on rajattu luokkaan .is-menu-open, joten tyopoydan
 * pudotusvalikot jaavat coren ja teeman omaan hallintaan.
 */

.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.has-child
	> .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.has-child.karisma-submenu-open
	> .wp-block-navigation__submenu-container {
	display: flex;
}

/* Nuoli kaantyy kun alavalikko on auki. */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.has-child
	> .wp-block-navigation-submenu__toggle svg {
	transition: transform 0.2s ease;
}

.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.has-child.karisma-submenu-open
	> .wp-block-navigation-submenu__toggle svg {
	transform: rotate(180deg);
}

/*
 * Nuoli on vain 12x13 px. Kasvatetaan kosketusalue n. 44x44 pikseliin
 * pseudoelementilla, jotta ikonin sijainti ja koko eivat muutu.
 */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.has-child
	> .wp-block-navigation-submenu__toggle::after {
	content: "";
	position: absolute;
	inset: -16px;
}

/*
 * Emoteema asettaa ensimmaisen valikkokohdan nuolelle top: 20px ja muille
 * 5px, jolloin Brands-nuoli valuu otsikkonsa alapuolelle. Yhtenaistetaan.
 * Teeman saanto on tarkkuudeltaan 0,6,0, joten tama on 0,7,0.
 */
.wp-block-navigation
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content
	.has-child:first-child
	.wp-block-navigation__submenu-icon {
	top: 5px;
}