/**
 * CookieYes banner and preferences popup, matched to the site.
 *
 * Colours are set in the plugin's own banner settings so they stay editable.
 * This file covers what those settings can't: fonts, shapes and button motion.
 * The plugin adds its styles after this file, so selectors here are scoped to win.
 */
.cky-consent-container.cky-consent-container .cky-consent-bar,
.cky-modal .cky-preference-center {
	border-radius: 1rem;
	border-style: solid;
	border-width: 3px;
	font-family: var(--wp--preset--font-family--lato);
}

.cky-consent-container.cky-consent-container .cky-consent-bar {
	box-shadow: 0 0.5rem 1.5rem rgb(31 22 64 / 25%);
	padding: 1.5rem;
}

.cky-modal.cky-modal {
	background: transparent;
	border-radius: 1rem;
	box-shadow: 0 1.5rem 3.5rem rgb(31 22 64 / 35%);
}

.cky-consent-container .cky-notice .cky-title,
.cky-modal .cky-preference-header .cky-preference-title {
	font-family: var(--wp--preset--font-family--just-another-hand);
	font-size: 2.25rem;
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: 0.5rem;
}

.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des *,
.cky-modal .cky-preference-content-wrapper,
.cky-modal .cky-preference-content-wrapper *,
.cky-modal .cky-accordion-header-des,
.cky-modal .cky-accordion-header-des * {
	font-family: var(--wp--preset--font-family--lato);
	font-size: 1rem;
	line-height: 1.5;
}

.cky-modal .cky-accordion-header .cky-accordion-btn {
	font-family: var(--wp--preset--font-family--just-another-hand);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.2;
}

.cky-modal .cky-accordion-header .cky-always-active {
	color: var(--wp--preset--color--purple);
	font-family: var(--wp--preset--font-family--lato);
	font-size: 1rem;
	font-weight: 700;
}

.cky-consent-container .cky-btn,
.cky-modal .cky-btn {
	border-radius: 0.875rem;
	border-style: solid;
	border-width: 3px;
	font-family: var(--wp--preset--font-family--just-another-hand);
	font-size: 1.625rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.1;
	padding: 0.5rem 0.75rem;
}

/* The same lift and tilt as the site's own buttons. */
.cky-consent-container .cky-btn:hover,
.cky-modal .cky-btn:hover {
	box-shadow: 0 0.35rem 0.85rem rgb(31 22 64 / 28%);
	opacity: 1;
	transform: translateY(-2px) rotate(-1deg);
}

.cky-consent-container .cky-btn:active,
.cky-modal .cky-btn:active {
	box-shadow: 0 0.1rem 0.3rem rgb(31 22 64 / 28%);
	transform: translateY(1px);
}

.cky-consent-container .cky-btn:focus-visible,
.cky-modal .cky-btn:focus-visible,
.cky-modal .cky-accordion-header .cky-accordion-btn:focus-visible,
.cky-modal .cky-btn-close:focus-visible,
.cky-btn-revisit-wrapper .cky-btn-revisit:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.cky-consent-container .cky-btn,
	.cky-modal .cky-btn {
		transition: box-shadow 0.18s ease, transform 0.18s ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cky-consent-container .cky-btn:hover,
	.cky-consent-container .cky-btn:active,
	.cky-modal .cky-btn:hover,
	.cky-modal .cky-btn:active {
		transform: none;
	}
}

@media (max-width: 576px) {
	.cky-consent-container.cky-consent-container .cky-consent-bar {
		border-radius: 1rem 1rem 0 0;
		border-width: 3px 0 0;
		padding: 1.25rem 1rem;
	}

	.cky-consent-container.cky-consent-container .cky-notice-des {
		max-height: 30vh;
	}

	.cky-modal .cky-preference-center {
		border-radius: 0;
		border-width: 0;
	}

	.cky-modal.cky-modal {
		border-radius: 0;
	}
}

/* Links and small controls the plugin's settings don't reach. */
.cky-consent-container .cky-notice-des a.cky-policy,
.cky-consent-container .cky-notice-des button.cky-policy,
.cky-modal .cky-preference-content-wrapper .cky-show-desc-btn,
.cky-modal .cky-accordion-header-des a,
.cky-modal .cky-preference-content-wrapper a {
	color: var(--wp--preset--color--pink);
}

.cky-modal .cky-switch input[type="checkbox"]:checked {
	background: var(--wp--preset--color--pink);
}