/*
Theme Name: Spiel – HollywoodCGFX
Theme URI: https://hollywoodcgfx.com
Author: HollywoodCGFX
Author URI: https://hollywoodcgfx.com
Description: Child theme of Spiel, customized for HollywoodCGFX.com. Adds a dynamic hero header that shows the current post's featured image (falling back to black when there isn't one), plus a randomly-rotating hero image on the homepage. Both behaviors are editable from the Site Editor.
Template: spiel
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: spiel-hollywoodcgfx
*/

/* ==========================================================================
   Header hero (post featured image, or black fallback)
   ==========================================================================
   The .site-header-hero class lives on the header's outer group block.
   A PHP filter (see functions.php) injects a background-image inline style
   when the current post/page has a featured image. No image -> the block's
   own background color (Contrast / #000000, editable in the Site Editor)
   shows through untouched, i.e. black.

   To turn this off entirely: select the header block in the Site Editor,
   open Advanced > Additional CSS class(es), and add: no-hero-image
   ========================================================================== */

.site-header-hero {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-image 0.3s ease;
}

.site-header-hero.has-hero-image {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* Keep the logo/site title crisp over a busy photo. */
.site-header-hero.has-hero-image .wp-block-site-title,
.site-header-hero.has-hero-image .wp-block-site-title a {
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Homepage hero rotation (random image, editable in the Site Editor)
   ==========================================================================
   In templates/front-page.html there is a group block classed
   "hero-random-pool" containing one Image block per candidate photo. A PHP
   filter (see functions.php) swaps that whole group for a single randomly
   chosen image on every render. Add or remove Image blocks inside that
   group in the Site Editor to change the pool.
   ========================================================================== */

.hero-random-pool {
	margin: 0;
}

.hero-random-pool__figure {
	margin: 0;
	width: 100%;
	aspect-ratio: 21 / 9;
	overflow: hidden;
}

.hero-random-pool__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 600px) {
	.hero-random-pool__figure {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Site title — greenscreen-green outline
   ==========================================================================
   Keeps the existing white fill and Orbitron face; adds a chroma-key-green
   stroke around the letterforms, like a keyed-out title card. #00B140 is
   the true broadcast chroma-key green (closer to real greenscreen fabric
   than a neon #00FF00), so it reads as an accent rather than a glow.
   ========================================================================== */

.wp-block-site-title a {
	-webkit-text-stroke: 1.5px #00B140;
	text-shadow:
		-1px -1px 0 #00B140,
		 1px -1px 0 #00B140,
		-1px  1px 0 #00B140,
		 1px  1px 0 #00B140;
}

@supports (-webkit-text-stroke: 1px black) {
	.wp-block-site-title a {
		text-shadow: none;
	}
}

/* Layer the stroke on top of the existing hover/hero-image treatments
   instead of replacing them. */
.site-header-hero.has-hero-image .wp-block-site-title a {
	-webkit-text-stroke: 1.5px #00B140;
}

/* ==========================================================================
   Link hover — sitewide greenscreen-green (#00B140)
   ==========================================================================
   Matches the site title's chroma-key-green outline above. WordPress's
   global styles set link hover per block instance rather than once --
   most of the site falls back to gray (theme.json styles.elements.link),
   post titles/author names/terms are hard-set to the blue "Primary"
   preset, and the header's own links (site title, social icons) are set
   to white -- so no single selector in the compiled global stylesheet is
   specific enough to unify them. The !important here is deliberate and
   scoped to exactly one property so it reliably wins over all of those
   per-block ".wp-elements-N a:hover" rules without having to hunt down
   and edit each block's color setting individually.
   ========================================================================== */

a:where(:not(.wp-element-button)):hover {
	color: #00B140 !important;
}