/* Desktop Navigation
--------------------------------------------- */

/* Menu item hover */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .has-child button:hover {
	text-decoration: none;
}

/* Nykyisen sivun korostus (theme.json custom.header.currentItem ja
 * currentItemWeight, inc/navigation.php). Body-luokka luotsi3-nav-current--
 * underline | --color | --none ja luotsi3-nav-current-weight. Korostus koskee
 * nykyistä sivua ja sen yläkohtaa (current-menu-ancestor). */
:root {
	--luotsi3-nav-current-color: var(--wp--preset--color--primary);
	--luotsi3-nav-current-line: 2px;
}

/* Alleviivaus headerin alareunassa (ylätason kohdat: nykyinen sivu ja hover).
 * Paikka lasketaan kohdan keskeltä: puolet rivin korkeudesta (logo tai valikko,
 * kumpi on korkeampi) ja headerin alareunus. Viiva on headerin reunaviivan
 * päällä, joten asettelu ei muutu. */
.luotsi3-nav-current--underline .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item {
	position: relative;
}

.luotsi3-nav-current--underline .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	top: calc(50% + max(var(--luotsi3-logo-height), 100%) / 2 + var(--luotsi3-header-padding) + 1px - var(--luotsi3-nav-current-line));
	height: var(--luotsi3-nav-current-line);
	background-color: var(--luotsi3-nav-current-color);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.luotsi3-nav-current--underline .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:hover::after,
.luotsi3-nav-current--underline .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor)::after {
	opacity: 1;
}

/* Paksumpi fontti nykyiselle sivulle ja yläkohdalle (currentItemWeight). */
.luotsi3-nav-current-weight .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
	font-weight: var(--wp--custom--header--current-item-weight);
}

/* Väri: nykyinen sivu ja yläkohta päävärillä. */
.luotsi3-nav-current--color .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > :is(.current-menu-item, .current-menu-ancestor) > .wp-block-navigation-item__content {
	color: var(--luotsi3-nav-current-color);
}

/* Pudotusvalikossa nykyinen sivu päävärillä (alleviivaus olisi raskas). */
:is(.luotsi3-nav-current--underline, .luotsi3-nav-current--color) .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--luotsi3-nav-current-color);
}

/* Leveys varataan lihavoidulle tekstille (data-text, inc/navigation.php), jottei
 * valikko siirry sivua vaihdettaessa. Teksti keskitetään varattuun tilaan. */
.luotsi3-nav-current-weight .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
}

.luotsi3-nav-current-weight .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label::after {
	content: attr(data-text);
	content: attr(data-text) / "";
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: var(--wp--custom--header--current-item-weight);
	pointer-events: none;
	user-select: none;
}

/* Ylätason kohtien klikattava alue: täyttää välit kohtien välissä ja ulottuu
 * tekstin ylä- ja alapuolelle. Negatiiviset marginaalit pitävät asettelun
 * ennallaan. Alavalikon nuoli saa oman, isomman alueen linkin oikealta puolelta. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	--luotsi3-nav-hit-x: calc(var(--wp--preset--spacing--medium) / 2);
	--luotsi3-nav-hit-y: 0.75rem;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: var(--luotsi3-nav-hit-y) var(--luotsi3-nav-hit-x);
	margin: calc(var(--luotsi3-nav-hit-y) * -1) calc(var(--luotsi3-nav-hit-x) * -1);
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:has(+ button.wp-block-navigation__submenu-icon) {
	padding-right: 0;
	margin-right: 0;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > button.wp-block-navigation__submenu-icon {
	width: auto;
	height: auto;
	padding: var(--luotsi3-nav-hit-y) var(--luotsi3-nav-hit-x) var(--luotsi3-nav-hit-y) 0.35em;
	margin: calc(var(--luotsi3-nav-hit-y) * -1) calc(var(--luotsi3-nav-hit-x) * -1) calc(var(--luotsi3-nav-hit-y) * -1) 0;
	cursor: pointer;
}

/* Isompi nuoli (oletus 0.6em on pieni kosketusnäytöllä). */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > span.wp-block-navigation__submenu-icon {
	width: auto;
	height: auto;
	margin-left: 0.35em;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon svg {
	width: 0.8em;
	height: 0.8em;
}

/* Drop nav */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	border: none !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--snug);
	border-radius: 5px;
	/* Leveys tekstin mukaan: pitkät sivunimet mahtuvat yhdelle tai kahdelle riville. */
	width: max-content !important;
	min-width: 14rem !important;
	max-width: min(22rem, calc(100vw - 2rem));
	margin-left: calc(var(--wp--preset--spacing--medium) * -1);
	padding: 0;
	z-index: 20 !important;
	border-radius: 5px;
	box-shadow: var(--wp--preset--shadow--small-light);
}

/* Viimeisen yläkohdan pudotusvalikko avautuu vasemmalle, jottei se mene ruudun yli. */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child:last-child > .wp-block-navigation__submenu-container {
	right: 0;
	left: auto !important;
	margin-left: 0;
	margin-right: calc(var(--wp--preset--spacing--medium) * -1);
}

/* Drop nav submenu */
.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-left: 0;
	top: 0 !important;
	left: 100%;
}

.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) li:first-child {
	padding-top: var(--wp--preset--spacing--small);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/* Add padding to bottom of drop menu */
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) li:last-child {
	padding-bottom: var(--wp--preset--spacing--small);
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* Add margin to sub menu icon */
.wp-block-navigation__responsive-container:not(.is-menu-open) .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	margin-right: var(--wp--preset--spacing--small);
}

/* Drop nav link padding */
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) a,
.wp-block-navigation__responsive-container:not(.is-menu-open) :where(.wp-block-navigation__submenu-container) .wp-block-navigation-submenu__toggle {
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium) !important;
}

/* Hampurilaisvalikko myös leveämmällä näytöllä, kun linkit eivät mahdu yhdelle
 * riville (luokka luotsi3-nav-collapsed, assets/js/navigation.js). */
@media (min-width: 600px) {
	.wp-block-navigation.luotsi3-nav-collapsed .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation.luotsi3-nav-collapsed .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Mobile Navigation
--------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
	padding: var(--wp--preset--spacing--medium);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--medium);
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}

/* Ylätason kohdat: ohut erotinviiva ja painokkaampi teksti. */
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--border-light) 50%, transparent);
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-weight: 500;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-page-list {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
	border-radius: 0;
	margin: 0 0 var(--wp--preset--spacing--small) 15px;
	padding: 0 0 0 5px;
	border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--border-light) 50%, transparent);
	align-items: flex-start;
	flex-direction: column;
	gap: 0;
	width: calc(100% - 15px);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: 10px;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	display: block;
	position: absolute;
	right: 0;
	top: 5px;
	height: auto;
	width: 60px;
	padding: 15px 0;
	margin: 0;
	z-index: 10;
}

body.rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
	left: 0;
	right: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg {
	height: 16px;
	margin: 0;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	display: none;
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"]~.wp-block-navigation-submenu,
.wp-block-navigation-submenu__toggle[aria-expanded="true"]~.wp-block-navigation__submenu-container {
	display: flex;
}

/* Mobiilivalikon alavalikot: kiinni oletuksena, nuoli avaa ja sulkee (assets/js/navigation.js). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:not(.is-submenu-open) > .wp-block-navigation__submenu-container {
	display: none !important;
}

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon svg,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle svg {
	transform: none;
	transition: transform 0.2s ease;
}

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-icon {
	cursor: pointer;
}

.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container li:not(.wp-social-link) {
	width: 100%;
	padding: 0 0;
	position: relative;
}

/* Mobile menu links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	width: 100%;
	font-size: var(--wp--preset--font-size--base);
	padding: 15px 60px 15px 15px;
	border-radius: 5px;
}

body.rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding: 15px 15px 15px 60px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .current-menu-item>.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container .wp-block-navigation-item:hover>.wp-block-navigation-item__content {
	transition: .3s ease;
	text-decoration: none;
	background: color-mix(in srgb, currentColor, transparent 97%);
	-webkit-tap-highlight-color: transparent;
}

.wp-block-navigation__container .wp-block-navigation-item:has(.wp-block-navigation__submenu-container:hover)>.wp-block-navigation-item__content {
	background: transparent;
}

/* Mobile menu open button
 * Kosketusalue 44 × 44 px (kuvake 28 px + reunus 8 px). */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	padding: 8px;
	border-radius: 3px;
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--main);
}

.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
}

/* Painike ei kasvata headeria: logoa korkeampi osa negatiivisilla marginaaleilla. */
.wp-block-navigation .wp-block-navigation__responsive-container-open {
	margin-block: min(0px, (var(--luotsi3-logo-height) - 44px) / 2);
}

/* Mobile menu close button */
.wp-block-navigation__responsive-container-close {
	background: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--main);
}