/* Header (inc/header.php)
 * Body-luokat: luotsi3-header--autohide | --sticky | --static ja
 * luotsi3-header--overlay (navigaatio läpinäkyvänä yläkuvan päällä).
 * Headerin luokat (assets/js/header.js): is-scrolled, is-hidden.
--------------------------------------------- */

:root {
	--luotsi3-logo-height: var(--wp--custom--header--logo-height, 2.5rem);
	--luotsi3-header-padding: var(--wp--custom--header--padding-block, var(--wp--preset--spacing--medium));
	/* Headerin korkeus (tarkentuu skriptissä mitatuksi): logo + reunukset + reunaviiva. */
	--luotsi3-header-height: calc(max(var(--luotsi3-logo-height), 2.5rem) + 2 * var(--luotsi3-header-padding) + 1px);
	--luotsi3-header-top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 781px) {
	:root {
		--luotsi3-logo-height: var(--wp--custom--header--logo-height-mobile, 2rem);
	}
}

/* Mobiilissa hallintapalkki vierii sivun mukana. */
@media (max-width: 600px) {
	:root {
		--luotsi3-header-top: 0px;
	}
}

/* Logo
 * Koko määräytyy korkeuden mukaan, joten vaaka-, neliö- ja pystylogot pysyvät
 * siisteinä. Ilman logoa näytetään sivuston nimi.
--------------------------------------------- */

.luotsi3-brand {
	flex-shrink: 0;
}

.luotsi3-brand :is(.wp-block-site-logo, .luotsi3-logo-light) img {
	width: auto !important;
	height: var(--luotsi3-logo-height);
	max-width: min(55vw, 18rem);
	object-fit: contain;
	object-position: left center;
}

.luotsi3-brand :is(.wp-block-site-logo, .luotsi3-logo-light) {
	margin: 0;
	line-height: 0;
}

.luotsi3-brand:has(.wp-block-site-logo img) .wp-block-site-title,
.luotsi3-logo-light {
	display: none;
}

/* Kiinteä ja piiloutuva header
--------------------------------------------- */

.site-header {
	z-index: 100;
	transition: top 0.3s ease;
}

.site-header > .wp-block-group {
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body:is(.luotsi3-header--sticky, .luotsi3-header--autohide) .site-header {
	position: sticky;
	top: var(--luotsi3-header-top);
}

body:is(.luotsi3-header--sticky, .luotsi3-header--autohide) .site-header.is-scrolled > .wp-block-group {
	box-shadow: 0 2px 16px rgb(0 0 0 / 0.08);
}

/* Piiloutuminen alaspäin vieritettäessä (top eikä transform, jotta mobiilivalikko toimii). */
.luotsi3-header--autohide .site-header.is-hidden {
	top: calc(-1 * var(--luotsi3-header-height) - 1rem);
}

/* Ankkurilinkit (#osio) eivät jää kiinteän headerin alle. */
html:has(body:is(.luotsi3-header--sticky, .luotsi3-header--autohide)) {
	scroll-padding-top: calc(var(--luotsi3-header-top) + var(--luotsi3-header-height) + 1rem);
}

/* Läpinäkyvä navigaatio yläkuvan päällä
--------------------------------------------- */

.luotsi3-header--overlay .site-header {
	position: absolute;
	top: var(--luotsi3-header-top);
	right: 0;
	left: 0;
}

body.luotsi3-header--overlay:is(.luotsi3-header--sticky, .luotsi3-header--autohide) .site-header {
	position: fixed;
}

/* Yläkuvan sisältö headerin alapuolelle. */
.luotsi3-header--overlay :is(
	.wp-block-cover.luotsi3-hero,
	.site-content--no-title > .wp-block-post-content > .wp-block-cover.alignfull:first-child,
	.site-content--no-title > .wp-block-post-content > .wp-block-luotsi-slider.alignfull:first-child .wp-block-cover
) {
	padding-top: calc(var(--luotsi3-header-height) + var(--wp--preset--spacing--large)) !important;
}

/* Tyhjä kappale ennen yläkuvaa ei saa jättää valkoista raitaa headerin alle. */
.luotsi3-header--overlay .site-content--no-title > .wp-block-post-content > p:empty:first-child {
	display: none;
}

/* Kuvan päällä (ei vieritetty): läpinäkyvä tausta, varjostus ylhäällä, vaaleat tekstit. */
/* Läpinäkyvässä navigaatiossa ei alareunaviivaa (myös vieritettynä: varjo riittää). */
.luotsi3-header--overlay .site-header > .wp-block-group {
	border-bottom-width: 0 !important;
}

.luotsi3-header--overlay .site-header:not(.is-scrolled) > .wp-block-group {
	background-color: transparent !important;
	background-image: linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0));
}

.luotsi3-header--overlay .site-header:not(.is-scrolled) :is(
	.wp-block-site-title a,
	.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__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon
) {
	color: var(--wp--preset--color--base);
}

/* Vaalea logo: oma kuva (Kuva-lohko, luokka luotsi3-logo-light) tai logo valkoiseksi. */
.luotsi3-header--overlay .site-header:not(.is-scrolled) .luotsi3-logo-light {
	display: block;
}

.luotsi3-header--overlay .site-header:not(.is-scrolled) .luotsi3-brand:has(.luotsi3-logo-light img) .wp-block-site-logo {
	display: none;
}

.luotsi3-header--overlay .site-header:not(.is-scrolled) .luotsi3-brand:not(:has(.luotsi3-logo-light img)) .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header > .wp-block-group {
		transition: none;
	}
}