/* Sivustokohtaiset tyylit
 * Tähän tiedostoon lisätään sivustokohtaiset tyylit. Se ladataan teeman
 * tyylien jälkeen sivustolla ja editorissa (functions.php). Käytä arvoina
 * teeman muuttujia (var(--wp--preset--color--primary) jne.).
 *
 * Tee ensin lohkotyyli (styles/blocks/) tai lohkon asetus, jos se on
 * mahdollista: silloin tyyli näkyy ja on muokattavissa hallinnassa. Tänne
 * vain tilat (hover), mediakyselyt ja muu, mihin hallinnassa ei ole asetusta.
 *
 * KoneSomero: header ja muutama sivun yksityiskohta. Värit, fontit ja
 * korttien tyylit tulevat theme.json:sta ja styles/blocks/-tyyleistä.
---------------------------------------------------------------------------- */

/* Header
--------------------------------------------- */

/* Teeman header.css piilottaa sivuston nimen logon vierestä, mutta tässä nimi
 * on osa logoa. Typografia on lohkon asetuksissa (parts/header.html). */
.luotsi3-brand .konesomero-brand-text .wp-block-site-title.konesomero-brand-name {
	display: block;
	margin: 0;
}

/* Nykyinen sivu keltaisena (hover tulee theme.json:sta, core/navigation). */
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Nykyisen sivun korostus: alleviivauksen (core-navigation.css) tilalle
 * ylöspäin osoittava keltainen kolmio, jonka kanta on headerin keltaisen
 * alareunan (4px) päällä. */
.luotsi3-nav-current--underline .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item::after {
	--konesomero-nav-arrow: 0.7rem;
	right: auto;
	left: 50%;
	top: calc(50% + max(var(--luotsi3-logo-height), 100%) / 2 + var(--luotsi3-header-padding) - var(--konesomero-nav-arrow) + 1px);
	width: calc(var(--konesomero-nav-arrow) * 2);
	height: var(--konesomero-nav-arrow);
	transform: translateX(-50%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Kolmio vain nykyiselle sivulle, ei hoverissa (hover näkyy jo keltaisena tekstinä). */
.luotsi3-nav-current--underline .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:not(.current-menu-item, .current-menu-ancestor):hover::after {
	opacity: 0;
}

.konesomero-header-phone .wp-block-button__link {
	white-space: nowrap;
}

/* Headerin keltainen painike muuttuu hoverissa valkoiseksi (musta tausta ei erottuisi). */
.site-header .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
}

/* Mobiilivalikko (alle theme.json:n mobileMenuBreakpoint 1024px):
 * puhelinpainike ensin, valikkopainike oikeaan reunaan. */
@media (width < 1024px) {
	.konesomero-brand-tagline {
		display: none;
	}

	.wp-block-group.konesomero-header-actions.konesomero-header-actions {
		gap: var(--wp--preset--spacing--small);
	}

	.konesomero-header-actions > .wp-block-navigation {
		order: 2;
	}
}

/* Sama, kun teeman skripti kutistaa valikon, koska se ei mahdu riville
 * (assets/js/navigation.js, luokka luotsi3-nav-collapsed). */
.konesomero-header-actions > .wp-block-navigation.luotsi3-nav-collapsed {
	order: 2;
}

/* Mobiilissa pelkkä puhelinkuvake, teksti ruudunlukijalle. */
@media (max-width: 600px) {
	.konesomero-header-phone .wp-block-button__link {
		width: 2.75rem;
		height: 2.75rem;
		padding: 0 !important;
		font-size: 0 !important;
	}

	.konesomero-header-phone .wp-block-button__icon {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* Painikkeet
--------------------------------------------- */

/* Ääriviivapainike tummalla pohjalla: hoverissa keltainen tausta ja musta teksti.
 * !important, koska painikkeen tekstivärin luokka (has-*-color) on myös !important. */
.wp-block-button.is-style-outline .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--main) !important;
	outline-color: var(--wp--preset--color--primary);
}

/* Linkkikortin painike vaihtuu valkoiseksi, kun koko kortti on hoverissa. */
.is-style-link-card:hover .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
}

/* Etusivun hero: mobiilissa painikkeet allekkain ja yhtä leveinä.
--------------------------------------------- */

@media (max-width: 600px) {
	.ks-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.ks-hero .wp-block-buttons > .wp-block-button,
	.ks-hero .wp-block-buttons .wp-block-button__link {
		width: 100%;
	}
}

/* Numeroitu accordion: keltainen numero ei erotu vaalealla pohjalla. */
.wp-block-accordion.is-style-accordion-numbered {
	--luotsi3-accordion-accent: var(--wp--preset--color--main);
}