/*
Theme Name: Golazo
Theme URI: https://themeshaper.com/golazo/
Author: Automattic
Author URI: https://automattic.com/
Description: Golazo is a blog theme with the energy of the beautiful game. Its unique 50:50 split layout pairs a floodlit pitch with your stories—one half stadium, one half page.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: golazo
Tags: blog, two-columns, style-variations, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   GOLAZO — front-end styles
     1 · Base / Gutenberg fixes
     2 · Utilities
     3 · Block treatments
     4 · Motion & effects
   ========================================================================== */


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

/* Crossfade page transition */
@view-transition {
	navigation: auto;
}

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

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * 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 */
}

/*
 * Button Block — outline hover (until configurable via theme.json)
 * https://github.com/WordPress/gutenberg/issues/42794
 */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/*
 * 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 the "more" block a block-level element.
 * https://github.com/WordPress/gutenberg/issues/65934
 */
.more-link {
	display: block;
}

/*
 * Prevent unnecessary scrollbars on long preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/*
 * 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: rounded outline + hard offset shadow.
 * inline-block so the hover shake (§4) applies — links are inline by default.
 */
.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
   All motion gated behind prefers-reduced-motion; keyframes grouped at the end.
   -------------------------------------------------------------------------- */

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

	/* Left-column pitch — stadium "floodlight" glow that breathes.
	   ::after on the header cover (no markup); two light pools behind the logo/nav.
	   Opacity-only => composited, gradient painted once. */
	.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 — shared by featured images and the 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;
	}

	/* 404 jerseys — quick scattered celebration burst on load, then done.
	   Each pops + enlarges once, lifted via z-index to overflow neighbours;
	   tight, non-ordered delays. */
	.jersey {
		position: relative;
		z-index: 1;
		animation: golazo-jersey-pop 0.6s ease-out;
	}
	.jersey-d1 { animation-delay: 0.18s; }
	.jersey-d2 { animation-delay: 0s; }
	.jersey-d3 { animation-delay: 0.34s; }
	.jersey-d4 { animation-delay: 0.08s; }
	.jersey-d5 { animation-delay: 0.25s; }
	.jersey-d6 { animation-delay: 0.12s; }
}

@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-jersey-pop {
	0%   { transform: scale(1)    rotate(0deg);  z-index: 5; }
	20%  { transform: scale(1.3)  rotate(-8deg); z-index: 5; }
	40%  { transform: scale(1.28) rotate(7deg);  z-index: 5; }
	60%  { transform: scale(1.2)  rotate(-5deg); z-index: 5; }
	80%  { transform: scale(1.12) rotate(3deg);  z-index: 5; }
	100% { transform: scale(1)    rotate(0deg);  z-index: 5; }
}

@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); }
}