/*
 * core/button.
 *
 * Loaded only on pages that contain a button block. The shape shared with the
 * search button and the file block is in theme.css.
 */

/* Core's is-style-outline puts its own em padding on top of theme.json, which
   left an outlined button 5px shorter than a filled one. In the source both
   are the same size whatever the style.
 *
 * The outlined button fills on hover (_button.scss: .btn--outline). Without it
   "Katso kaikki" did not react to the pointer at all. */
:root .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.75rem 1.5rem;
	transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}

:root .wp-block-button.is-style-outline > .wp-block-button__link:hover,
:root .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

/* On a dark section the button is larger, as in the source. */
:root .is-style-section-hero .wp-block-button.is-style-outline > .wp-block-button__link,
:root .is-style-section-cta .wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 1rem 2rem;
}

/* Vastaa alkuperäistä CtaBanner.astro / sections/_cta-banner.scss -osiota,
   kuvatonta varianttia (.cta-banner--no-image): tumma pohja, keskitetty
   teksti ja 42rem levyinen sisältöpylväs. */

/* Painike on limetti tummalla tekstillä (variant="accent"). */
:root .is-style-section-cta .wp-block-button__link,
:root .is-style-section-cta-plain .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
}

/* Bannerin napin hover riippuu taustasta, kuten lähteessäkin: valokuvan
   päällä nappi on .btn--accent ja himmenee opacityllä, väripohjaisessa
   bannerissa se on .btn--primary ja tummenee 85 %:iin (mitattu tuotannosta:
   rgb(135 217 155) = accent × 0,85). */
:root .is-style-section-cta .wp-block-button__link:hover,
:root .is-style-section-cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
	opacity: 0.9;
}

:root .is-style-section-cta-plain .wp-block-button__link:hover,
:root .is-style-section-cta-plain .wp-block-button__link:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 85%, #000);
	color: var(--wp--preset--color--primary-dark);
}

.is-style-section-hero .wp-block-button__link,
:root .is-style-section-cta .wp-block-button__link,
:root .is-style-section-cta-plain .wp-block-button__link {
	padding: 1rem 2rem;
	font-size: var(--wp--preset--font-size--medium);
}