/* ==========================================================================
   GOLAZO — Site Editor canvas styles
   Mirrors the front-end rules that must also render inside the editor.
   Keep in sync with style.css.

   NOTE: no theme header here, and do NOT add a ".editor-styles-wrapper"
   prefix — WordPress scopes editor styles to the canvas automatically;
   prefixing it yourself double-scopes and the rule never matches.

     1 · Base / Gutenberg fixes
     2 · Utilities
     3 · Block treatments
     4 · Motion & effects
   ========================================================================== */


/* 1 · Base / Gutenberg fixes
   -------------------------------------------------------------------------- */

/* Font smoothing */
body {
	text-rendering: geometricprecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.1em;
}

/*
 * Form field styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
::placeholder {
	color: var(--wp--preset--color--contrast);
	opacity: 1; /* Firefox */
}

/*
 * Pull quote Block — reset default blockquote margins
 * https://github.com/WordPress/gutenberg/issues/44129
 */
.wp-block-pullquote blockquote,
.wp-block-pullquote p {
	margin: 0;
}

/*
 * Navigation Block — reset list padding
 * https://github.com/WordPress/gutenberg/issues/50486
 */
.wp-block-navigation ul {
	padding: unset;
}

/*
 * Make sure footers have no margin.
 * https://github.com/WordPress/gutenberg/issues/47637
 */
footer.wp-block-template-part {
	margin-block-start: 0 !important;
}


/* 2 · Utilities
   -------------------------------------------------------------------------- */

/* Remove text decoration from links. */
.no-underline a {
	text-decoration: none;
}

/* Ordering / flex-grow helpers (+ md: variants from 600px). */
.order-0 {
	order: 0;
}

.order-1 {
	order: 1;
}

.grow-0 {
	flex-grow: 0;
}

.grow {
	flex-grow: 1;
}

@media (min-width: 600px) {
	.md\:order-0 {
		order: 0;
	}

	.md\:order-1 {
		order: 1;
	}

	.md\:grow-0 {
		flex-grow: 0;
	}

	.md\:grow {
		flex-grow: 1;
	}
}

/*
 * Invert base/contrast on hover — add the class "invert-on-hover" to a block
 * coloured base (background) + contrast (text / links / fill); on hover they swap.
 * Links carry their own colour, so they're flipped explicitly (without taking the
 * contrast background themselves). Uses palette presets, so it tracks the active
 * style variation. !important overrides WordPress's preset colour classes.
 */
.invert-on-hover,
.invert-on-hover a {
	transition: background-color 0.25s ease, color 0.25s ease, fill 0.25s ease;
}

.invert-on-hover:hover {
	background-color: var(--wp--preset--color--contrast) !important;
}

.invert-on-hover:hover,
.invert-on-hover:hover a {
	color: var(--wp--preset--color--base) !important;
	fill: var(--wp--preset--color--base) !important;
}

/*
 * Table — when "first-column-half" is added to a Table block: the first column
 * is 50% wide, and the header cells (th) are left-aligned at the Small preset size.
 */
.first-column-half :where(td, th):first-child {
	width: 50%;
}

.first-column-half th {
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
}


/* 3 · Block treatments
   -------------------------------------------------------------------------- */

/*
 * Site Title — logo treatment (mirrors style.css). inline-block so the hover
 * shake (§4) applies. (No ".editor-styles-wrapper" prefix — see note above.)
 */
.wp-block-site-title a {
	display: inline-block;
	filter:
		drop-shadow(-3px -3px 0 var(--wp--preset--color--primary))
		drop-shadow(-2px -2px 0 var(--wp--preset--color--primary))
		drop-shadow(-1px -1px 0 var(--wp--preset--color--primary))
		drop-shadow(8px 0 0 var(--wp--preset--color--primary))
		drop-shadow(0 9px 0 var(--wp--preset--color--primary))
		drop-shadow(4px 0 0 var(--wp--preset--color--primary))
		drop-shadow(1px 1px 0 var(--wp--preset--color--primary))
		drop-shadow(2px 2px 0 var(--wp--preset--color--primary))
		drop-shadow(3px 3px 0 var(--wp--preset--color--primary))
		drop-shadow(4px 4px 0 var(--wp--preset--color--primary));
}

/*
 * Bring an element (and its stacking context) above its siblings.
 * Add the class "is-overlapping" via Block > Advanced > Additional CSS class(es).
 */
.is-overlapping {
	position: relative;
	z-index: 10;
}


/* 4 · Motion & effects
   The floodlight glow and the hover "goal!" shake are mirrored here; the
   404 jersey burst stays front-end only (not previewed in the editor canvas).
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	/* Left-column pitch — stadium "floodlight" glow that breathes (mirrors style.css). */
	.wp-block-template-part > .wp-block-cover::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background:
			radial-gradient(50% 42% at 25% 15%, rgba(255, 255, 255, 0.47), transparent 70%),
			radial-gradient(50% 42% at 75% 15%, rgba(255, 255, 255, 0.47), transparent 70%);
		will-change: opacity;
		animation: golazo-floodlight 7s ease-in-out infinite;
	}

	/* "Goal!" shake on hover — featured images + site title. */
	.wp-block-post-featured-image:hover,
	.wp-block-site-title a:hover {
		animation: golazo-celebrate 0.6s ease-in-out;
	}

	/* Quote Pattern portrait — a gentle rotation "sway" on hover: a calmer,
	   simpler echo of the goal celebration, just enough to feel alive. Add the
	   class "portrait-photo" to the Image block. */
	.portrait-photo:hover img {
		animation: golazo-portrait-sway 0.6s ease-in-out;
	}
}

@keyframes golazo-floodlight {
	0%, 100% { opacity: 0.38; }
	50%      { opacity: 0.85; }
}

@keyframes golazo-celebrate {
	0%   { transform: scale(1) rotate(0deg); }
	15%  { transform: scale(1.08) rotate(-3deg); }
	30%  { transform: scale(1.08) rotate(3deg); }
	45%  { transform: scale(1.05) rotate(-2deg); }
	60%  { transform: scale(1.05) rotate(2deg); }
	75%  { transform: scale(1.02) rotate(-1deg); }
	100% { transform: scale(1) rotate(0deg); }
}

@keyframes golazo-portrait-sway {
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(-2.5deg); }
	50%  { transform: rotate(1.5deg); }
	75%  { transform: rotate(-1deg); }
	100% { transform: rotate(0deg); }
}