/*
Theme Name: Twenty Twenty-Five Child
Author: Me
Description: Child theme of Twenty Twenty-Five. Carries the brand palette (#2C3EDD to #9335F1), Platypi display headings over Manrope body text, and a branded WordPress login screen.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-child
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, rtl-language-support, wide-blocks
*/

/*
 * Most branding for this theme lives in theme.json (palette, gradients, fonts,
 * block styles), because Twenty Twenty-Five is a block theme. Only the things
 * theme.json cannot express belong in this file.
 */

:root {
	--ttfc-brand-gradient: linear-gradient(135deg, #2C3EDD 0%, #9335F1 100%);
}

/* Keep the parent's link underline treatment, tighten it to the brand. */
a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 45%, transparent);
	transition: text-decoration-color 120ms ease-in-out;
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-color: var(--wp--preset--color--accent-1);
}

/* Visible keyboard focus in brand blue, everywhere. */
:where(a, button, input, select, textarea, .wp-block-button__link, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 22%, transparent);
	color: var(--wp--preset--color--contrast);
}

/* Gradient buttons need a gradient hover that CSS can cross-fade. */
.wp-element-button,
.wp-block-button__link {
	background-image: var(--ttfc-brand-gradient);
	background-size: 130% 130%;
	background-position: 0% 50%;
	transition: background-position 220ms ease-in-out, transform 120ms ease-in-out;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	background-position: 100% 50%;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-image: none;
}

/* Underline-style outline buttons keep brand colour on the border. */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--accent-1);
	border-color: currentColor;
}

/* Site title: the one place the gradient is allowed to appear as type. */
.wp-block-site-title a {
	background-image: var(--ttfc-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-decoration: none;
}

/* The brand mark ships as white artwork, so it needs a dark plate on light headers. */
.ttfc-logo-plate {
	background-image: var(--ttfc-brand-gradient);
	border-radius: 6px;
	padding: 0.5rem 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link,
	a:where(:not(.wp-element-button)) {
		transition: none;
	}
}