/*
 * Kanava Starter – täydentävät tyylit.
 * Käytä aina theme.json-muuttujia (--wp--preset--*, --wp--custom--*), ei kovakoodattuja arvoja.
 */

/* Saavutettavuus: näkyvä fokus kaikkialla */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Skip link (WP lisää sen automaattisesti lohkoteemoissa) */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* Kiinteä header: lisää headerin ulompaan Group-lohkoon luokka "is-sticky" */
.is-sticky {
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .is-sticky {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Lohkotyyli: Kortti (core/group) */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--custom--shadow--card);
	padding: var(--wp--preset--spacing--50);
	height: 100%;
}

/* Lohkotyyli: Pyöristetty kuva */
.wp-block-image.is-style-rounded-soft img {
	border-radius: var(--wp--custom--radius--medium);
}

/* Lohkotyyli: Väkäslista */
.wp-block-list.is-style-checks {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-checks li {
	position: relative;
	padding-left: 1.75em;
	margin-block: 0.4em;
}
.wp-block-list.is-style-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.1em;
	height: 1.1em;
	background: var(--wp--preset--color--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Liikeherkkyys */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Case-faktat (lukittu osio case-tietotyypissä) */
.kanava-case-facts p:first-child {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}
.kanava-case-facts p:last-child {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	margin-top: var(--wp--preset--spacing--10);
}

/* Lohkotyyli: Pillerit (core/tag-cloud) – case-suodatus */
.wp-block-tag-cloud.is-style-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}
.wp-block-tag-cloud.is-style-pills a {
	margin: 0 !important;
	padding: 0.35em 0.9em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.wp-block-tag-cloud.is-style-pills a:hover,
.wp-block-tag-cloud.is-style-pills a[aria-current] {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* Tyhjä sidottu kenttä (esim. tulos puuttuu) ei jätä väliä */
.wp-block-group.is-style-card > p:empty {
	display: none;
}

/* Asiakaslogot */
.kanava-logos__grid.wp-block-gallery {
	align-items: center;
	gap: var(--wp--preset--spacing--50) !important;
}
.kanava-logos__grid.wp-block-gallery img {
	max-height: 48px;
	width: auto !important;
	margin-inline: auto;
	object-fit: contain !important;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter var(--wp--custom--transition), opacity var(--wp--custom--transition);
}
.kanava-logos__grid.wp-block-gallery img:hover {
	filter: none;
	opacity: 1;
}

/* Lohkotyyli: Lasi (core/group) – läpikuultava paneeli kuvan tai videon päällä */
.wp-block-group.is-style-frosted {
	background: rgba(255, 255, 255, 0.75);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--contrast);
}

/* Taustavideon pysäytyspainike (assets/js/cover-video.js) */
.kanava-video-toggle {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	cursor: pointer;
}
.kanava-video-toggle::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 12px;
	height: 14px;
	border-left: 4px solid var(--wp--preset--color--contrast);
	border-right: 4px solid var(--wp--preset--color--contrast);
	box-sizing: border-box;
}
.kanava-video-toggle[data-state="paused"]::before {
	width: 0;
	height: 0;
	border-right: 0;
	border-left: 12px solid var(--wp--preset--color--contrast);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	margin-left: 15px;
}