/*
 * core/navigation — the header's main menu, its mega dropdown and the mobile
 * overlay.
 *
 * All of it is behaviour core does not have an attribute for: an overlay that
 * starts below the header rather than covering it, top levels that behave as
 * accordions, and a full-width dropdown panel with a labelled sidebar. The
 * accordion needs no script — core binds aria-expanded to the open state, and
 * these rules read it.
 *
 * The mega menu's sidebar element comes from class-navigation.php, which adds
 * it at render time so the menu stays an ordinary menu in the editor.
 *
 * Loaded only on pages that contain a navigation block.
 */

/* Valikon luokka mukana tarkkuuden vuoksi: ytimen overlay-säännöt ovat
   muotoa .is-menu-open:not(.disable-default-overlay), eli (0,3,0). */
.vml-header .vml-nav--paavalikko .wp-block-navigation__responsive-container.is-menu-open {
	inset: 5rem 0 0 0;
	padding: 1.5rem;
	overflow-y: auto;

	/* The background has to be set here even though header.html already asks
	   for it with overlayBackgroundColor:"primary". Giving the navigation its
	   own overlay template part makes core mark the container
	   disable-default-overlay and drop the colour class entirely: it assumes
	   the part paints its own background. Without this the white menu text
	   renders straight over the page content, measured at 1.07:1 and 1.29:1
	   where the requirement is 4.5:1. */
	background-color: var(--wp--preset--color--primary);

	/* Ytimen fade-in-animaatio jättää elementille transformin, ja transform
	   tekee siitä sijoitusperustan position:fixed-lapsille — sulkunappi ei
	   siksi noussut ylätunnisteen palkkiin. Alkuperäinen valikko ilmestyy
	   ilman animaatiota. */
	animation: none;
	transform: none;
}

.wp-block-navigation__responsive-container.is-menu-open a {
	text-decoration: none;
}

/* Ydin varaa sisällön yläreunasta 2rem + 24px sulkunapille. Nappi on tässä
   nostettu ylätunnisteen palkkiin kiinteällä sijoituksella, joten varaus
   työntäisi valikon turhaan alas. */
.vml-header .vml-nav--paavalikko .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-block-start: 0;
}

/* Rivivali on alkuperaisessa 0.25rem; ytimen block-gap antaisi 1.5rem. */
.vml-header .vml-nav--paavalikko .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	inline-size: 100%;
	gap: 0.25rem;
}

/* Päätaso: nappi ja chevron ovat sisaruksia, joten rivi ladotaan li-tasolla
   ja alavalikko pakotetaan omalle rivilleen. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {

	/* Ydin latoo overlayn rivit sarakkeeksi ja keskittää ne. Silloin napin
	   flex-grow kasvattaa korkeutta eikä leveyttä, joten rivi jää kapeaksi ja
	   keskitetyksi. Suunta on pakotettava riviksi. */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	inline-size: 100%;
	border-block-end: 1px solid color-mix( in srgb, currentcolor 20%, transparent );
}

/* Ydin keskittää overlayn rivit automaattisilla marginaaleilla. Alkuperäinen
   valikko on vasempaan tasattu, joten marginaalit nollataan. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	flex: 1 1 auto;
	margin-inline: 0;
	padding-block: 1rem;
	padding-inline: 0;

	/* .header__mobile-btn on $font-size-md eli 1.125rem. */
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	text-align: start;
}

/* _header.scss: .header__nav-link on medium-painoinen (500). Ydin jättää
   ylätason avausnapin leipätekstin painoon, jolloin valikkorivi näyttää
   lähdettä kevyemmältä — alavalikon linkit ovat jo 500. */
.vml-nav--paavalikko .wp-block-navigation-submenu__toggle {
	font-weight: 500;
}

/* Ytimen chevron on 10x10 SVG viivanleveydellä 1,5; alkuperäisessä se on
   16x16 maski samalla piirroksella kuin sivutuksessa (stroke 3). Ero näkyy
   heti valikkorivin lopussa, joten merkki piirretään itse. */
.vml-nav--paavalikko .wp-block-navigation__submenu-icon {
	inline-size: 1rem;
	block-size: 1rem;
	background-color: currentcolor;
	-webkit-mask: var(--vml-chevron) center / contain no-repeat;
	mask: var(--vml-chevron) center / contain no-repeat;
	transition: transform 0.25s ease;
}

.vml-nav--paavalikko .wp-block-navigation__submenu-icon svg {
	display: none;
}

.vml-nav--paavalikko .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon,
.vml-nav--paavalikko .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon {
	transform: rotate( 180deg );
}

/* Ydin piilottaa chevronin overlayssä, koska se näyttää alavalikot valmiiksi
   auki. Haitarissa chevron on ainoa merkki siitä että rivin voi avata. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
	display: flex;
	align-items: center;
	margin-inline-start: auto;
	padding: 0;
	transition: transform 0.25s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
	inline-size: 1rem;
	block-size: 1rem;
}

/* Haitari: alavalikko piiloon kun nappi on kiinni, chevron kääntyy auki. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container {
	flex-basis: 100%;
	padding-block: 0 1rem;

	/* On desktop core's submenu is its own white panel. Inside the overlay it
	   is part of the green surface, so a white background would sit under the
	   white link text and hide 19 links. axe reports this as an incomplete
	   result ("1:1 contrast ratio") rather than a violation, which is why the
	   checker never caught it.

	   position and size are here for the same reason as the overlay's own
	   background: core sets them in a rule scoped
	   :where(:not(.disable-default-overlay)), so giving the navigation a custom
	   overlay part drops them along with everything else. Left absolute, every
	   submenu stacks on top of the top level items instead of pushing them
	   down, and the white panel was the only thing hiding the collision. */
	position: static;
	inline-size: auto;
	block-size: auto;
	overflow: visible;
	background-color: transparent;
	border: 0;

	/* Ei omaa sisennystä: alkuperäisessä alavalikon linkit alkavat samasta
	   reunasta kuin päätasot, ja sisennys tulee vain linkin omasta
	   pehmusteesta. Ytimen oma padding-inline (2rem) nollataan siksi. */
	padding-inline: 0;
	gap: 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open [aria-expanded="false"] ~ .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open [aria-expanded="true"] ~ .wp-block-navigation__submenu-icon {
	transform: rotate( 180deg );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--medium);
	color: color-mix( in srgb, var(--wp--preset--color--white) 80%, transparent );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Overlayn teksti on aina valkoinen. overlayTextColor-attribuutti ei yksin
   riitä: linkkiväri tulee theme.jsonin elements.link-määrittelystä, joka on
   brändinvihreä ja katoaa vihreälle pohjalle. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open button,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
	color: var(--wp--preset--color--white);
}

/* Avattuna hampurilainen ja rasti näkyisivät molemmat. Alkuperäisessä
   hampurilainen vaihtuu rastiksi, joten avausnappi piilotetaan — tila
   varataan yhä, jotta palkin taitto ei hyppää. */

/* Valikkonappi: alkuperäinen on 48x48 kosketuskohde ja ikoni 32x32 maskina
   (lucide "menu", stroke 2). Ytimen oma SVG on 24x24 ja ohuempi, joten se
   näytti puhelimessa selvästi pienemmältä kuin tuotannossa. */
.vml-header .wp-block-navigation__responsive-container-open {
	inline-size: 3rem;
	block-size: 3rem;
	align-items: center;
	justify-content: center;
}

/* Kapeimmalla puhelimella nappi kaventuu ikonin ympäriltä, jotta rivi mahtuu
   ruudulle (ks. ylätunnisteen sisennys 359 px:n kohdalla). */
@media (max-width: 359px) {

	.vml-header .wp-block-navigation__responsive-container-open {
		inline-size: 2.5rem;
	}
}

.vml-header .wp-block-navigation__responsive-container-open svg {
	inline-size: 2rem;
	block-size: 2rem;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* The open button is hidden while the menu is open because the close button
   takes the same spot. It must not be hidden with visibility: hidden, though.
   Core restores focus on close by calling previousFocus.focus(), and a browser
   will not focus a visibility: hidden element, so focus fell to the body and a
   keyboard user was returned to the top of the page every time (WCAG 2.4.3).

   opacity keeps the element focusable, so the restore works. The dialog's
   aria-modal still keeps it away from screen readers. */
.wp-block-navigation:has( .wp-block-navigation__responsive-container.is-menu-open ) .wp-block-navigation__responsive-container-open {
	opacity: 0;
	pointer-events: none;
}

/* Sulkunappi nostetaan ylätunnisteen palkkiin samaan kohtaan mihin
   hampurilainen jää, kuten alkuperäisessä. Palkki on vaalea, joten ikoni on
   tummanvihreä eikä valkoinen. */
.vml-header .vml-nav--paavalikko .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: fixed;
	inset-block-start: 1rem;
	inset-inline-end: 1.5rem;
	z-index: 51;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	padding: 0;
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	inline-size: 2rem;
	block-size: 2rem;
}


@media (min-width: 1024px) {

	/* Napin alareunan (94 px) ja paneelin (120 px) välissä on ylätunnisteen
	   pehmustetta. Ilman siltaa osoitin poistuu kohteesta kesken liikkeen ja
	   valikko sulkeutuu juuri kun sitä ollaan lähestymässä — eikä avaudu
	   uudelleen, koska suljettu paneeli ei ota vastaan osoitinta. Silta on
	   läpinäkyvä, napin levyinen ja olemassa vain avatussa tilassa, joten se
	   ei vaikuta taittoon eikä muiden linkkien klikkaamiseen. */
	.vml-nav--paavalikko .wp-block-navigation-item.has-child {
		position: relative;
	}

	.vml-nav--paavalikko .wp-block-navigation-item.has-child:hover::after,
	.vml-nav--paavalikko .wp-block-navigation-item.has-child:focus-within::after {
		content: '';
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		block-size: 2rem;
	}

	/* Ydin sulkee hover-avauksen pois (.has-child:not(.open-on-click):hover),
	   koska päätaso on nappi. Alkuperäisessä valikko avautuu osoittimella ja
	   nappi on vain näppäimistöä varten, joten näkyvyys palautetaan tässä.

	   :not([data-submenu-dismissed]) is there for Escape. WCAG 1.4.13 requires
	   that content opened on hover or focus can be dismissed without moving
	   the pointer or the focus. Because the panel opens purely in CSS, core's
	   own Escape handling cannot close it: it only flips aria-expanded to
	   false, which tells a screen reader the menu has closed while it still
	   covers the top of the page. The flag is set by assets/navigation.js. */
	.vml-nav--paavalikko:not( [data-submenu-dismissed] ) .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
	.vml-nav--paavalikko:not( [data-submenu-dismissed] ) .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
		height: auto;
		opacity: 1;
		overflow: visible;
		visibility: visible;
	}

	.vml-nav--paavalikko .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
	.vml-nav--paavalikko .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
	.vml-nav--paavalikko .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {

		/* Paneeli on säiliön levyinen (.container-wide 79rem) eikä koko ruudun,
		   ja se kiinnittyy ylätunnisteen alareunaan: 2.5rem + 5rem. */
		position: fixed;
		inset-inline: auto;

		/* Kiinteä sijoitus mittaa näkymän yläreunasta, joten kirjautuneella
		   käyttäjällä adminpalkki (32 px) siirtää ylätunnistetta alaspäin
		   mutta ei paneelia: paneeli nousi ylätunnisteen päälle ja peitti
		   valikkonapit. Adminpalkin korkeus on WordPressin oma muuttuja. */
		inset-block-start: calc( 7.5rem + var( --wp-admin--admin-bar--height, 0px ) );
		inset-inline-start: 50%;
		transform: translateX( -50% );

		/* Paneelin leveys omaan muuttujaan: paddingin prosentti laskisi
		   näkymän leveydestä (kiinteä sijoitus), ei paneelin, jolloin
		   sivupalstalle varattu tila olisi väärä. */
		--vml-mega-width: min( calc( 100vw - 6rem ), 79rem );
		inline-size: var( --vml-mega-width );
		min-inline-size: 0;
		max-inline-size: none;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.25rem 2rem;

		/* Vasen kolmannes on varattu sivupalstalle. */
		padding: 2rem 2rem 2rem calc( var( --vml-mega-width ) / 3 + 2rem );
		border: 0;
		background-color: var(--wp--preset--color--primary);
		box-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ), 0 4px 6px -4px rgb( 0 0 0 / 0.1 );
	}

	/* Topografinen kuvio soft-light-sekoituksella kuten alkuperäisessä.
	   Lähteessä kuvio on vain linkkipuoliskolla (.header__mega-content >
	   :last-child), joten cover skaalaa sen kahden kolmasosan levyiseen
	   laatikkoon. Koko paneelille annettuna sama kuvio venyi puolitoista
	   kertaa suuremmaksi ja näytti aivan toiselta.

	   Oma kerros pseudoelementissä, koska sivupalsta on absoluuttinen eikä
	   taustaa voi rajata pelkällä background-positionilla. */
	.vml-nav--paavalikko .wp-block-navigation-item.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container::before,
	.vml-nav--paavalikko .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container::before,
	.vml-nav--paavalikko .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container::before {
		content: '';
		position: absolute;
		inset-block: 0;
		inset-inline: 33.333% 0;
		background: url( ../../img/topographic.svg ) center / cover no-repeat;
		mix-blend-mode: soft-light;
		pointer-events: none;
	}

	/* Linkit kuvion päälle: pseudoelementti on niitä ennen dokumentissa.

	   Tausta nollataan, koska ydin antaa alivalikon kohteille
	   background-color: inherit — jolloin jokainen linkkirivi maalaa
	   umpivihreän palkin maastokuvion päälle ja kuvio näkyy vain riviväleissä.
	   Alkuperäisellä sivustolla käyrät jatkuvat yhtenäisinä tekstin alta. */
	.vml-nav--paavalikko .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		position: relative;
		z-index: 1;
		background-color: transparent;
	}

	/* Sivupalsta täyttää ensimmäisen sarakkeen reunasta reunaan: negatiivinen
	   marginaali kumoaa säiliön paddingin, oma padding tuo sen takaisin. */

	/* Sivupalsta irrotetaan ruudukosta: gridissä se joutuisi varaamaan rivit
	   etukäteen, ja implisiittisten rivien kanssa se venyttäisi paneelin.
	   Absoluuttisena se täyttää vasemman kolmanneksen linkkien korkeudelta. */
	.vml-nav--paavalikko .vml-mega__sidebar {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: 33.333%;
		box-sizing: border-box;
		padding: 2rem;
		background-color: var(--wp--preset--color--primary-light);
	}

	/* Lähteessä paneelin sivuotsikko on <h2>, joten se perii otsikoiden
	   kirjasimen ja kireämmän kirjainvälin — vain koko ja paino tulevat
	   omasta säännöstä. Meillä se on aria-hidden-span (koriste, joka toistaa
	   valikon oman nimen), joten typografia annetaan tässä. Ilman sitä
	   otsikko on leipätekstin kirjasimella ja 14 pikseliä liian leveä. */
	.vml-nav--paavalikko .vml-mega__title {
		font-family: var(--wp--preset--font-family--display);
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.15;
		letter-spacing: -0.02em;
		color: var(--wp--preset--color--primary-dark);
	}

	/* Ytimen oma linkkisääntö on tarkkuudella (0,4,0), joten sama pituus. */
	.vml-nav--paavalikko .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		margin-inline: -0.75rem;
		padding: 0.5rem 0.75rem;
		font-weight: 500;
		color: var(--wp--preset--color--white);
		transition: color 150ms ease-out;
	}

	/* Hover värittää tekstin eikä maalaa laatikkoa. Tuotannossa linkin taakse
	   tulee valkoinen palkki, joka peittää maastokuvion juuri siitä kohtaa
	   mihin katse osuu; limetti erottuu vihreältä yhtä hyvin ja jättää
	   taustan näkyviin. */
	.vml-nav--paavalikko .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.vml-nav--paavalikko .wp-block-navigation-item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: transparent;
		color: var(--wp--preset--color--accent);
	}
}

/* Mobiilissa sivupalsta on turha: overlayssä kategorian nimi on jo haitarin
   otsikkona. */
@media (max-width: 1023px) {

	.vml-mega__sidebar {
		display: none;
	}
}