/*
Theme Name:     Style Guide — Fortera Insurance
Theme URI:      https://github.com/classiccity/ccc-wp-theme--forterains
Description:    Child theme for Fortera Insurance ("Built to Protect") — insurance for the construction trades. Dark canvas/panel/ink palette built on Fortera Navy; Montserrat throughout. Currently a splash-screen-only build.
Author:         Classic City Consulting
Author URI:     https://classiccity.com
Template:       classic-city-core
Version:        1.0.0
Text Domain:    sg-forterains
*/

/* ==================================================================
 * core/cover — video & image background sizing (defensive).
 *
 * WP core ships these positioning rules for
 * .wp-block-cover__video-background / __image-background in
 * wp-block-library. The current parent theme does NOT dequeue that
 * stylesheet, so they normally arrive on their own — but with
 * `should_load_separate_core_block_assets` in play, core's cover CSS
 * only loads when core decides the block is present, and the splash
 * depends completely on the video filling its cover. Restating them
 * here costs nine declarations and removes that dependency.
 *
 * Without them a <video> flows in normal layout at its intrinsic size
 * and the cover's overlay shows above and below it, reading as
 * letterbox bars. WallPro hit exactly this. Do not remove.
 * ================================================================== */
.wp-block-cover__video-background,
.wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: none;
	object-fit: cover;
}

/* ==================================================================
 * SPLASH SCREEN
 * ------------------------------------------------------------------
 * The whole site, for now: one full-viewport cover with a looping
 * background video and the Fortera logo centered on it. Everything
 * below is scoped to `.page-template-splash` (the body class WP stamps
 * when a page uses the "Splash (no chrome)" template) so none of it
 * leaks into the real site when that gets built on top.
 *
 * When the splash is retired, delete this whole block plus
 * templates/splash.html — nothing else references either.
 * ================================================================== */

/* Kill the theme's normal page rhythm. The parent gives every top-level
 * section a `--ccc-section-gap` of breathing room and the body a bit of
 * block padding; on a full-bleed splash both show up as slivers of navy
 * above and below the cover, and the page scrolls a few pixels. */
.page-template-splash .wp-site-blocks,
.page-template-splash main.wp-block-group {
	--ccc-section-gap: 0;
	margin: 0;
	padding: 0;
}
.page-template-splash .wp-site-blocks > * {
	margin-block: 0;
}
.page-template-splash {
	overflow-x: hidden;
}

/* The cover fills the viewport exactly. `100svh` (small viewport height)
 * rather than `100vh` so mobile Safari's collapsing address bar doesn't
 * push the bottom edge out of frame; `100vh` stays as the fallback for
 * browsers without svh support. `!important` because core's Cover block
 * emits its min-height as an inline style. */
.page-template-splash .wp-block-cover {
	min-height: 100vh !important;
	min-height: 100svh !important;
	margin: 0;
	padding: var(--wp--preset--spacing--40, 2rem);
	border-radius: 0;
	box-shadow: none;
}

/* The cover's inner container carries WP's `has-global-padding`, which on a
 * 375px phone eats 30px a side and leaves the logo's block only ~235px of
 * content width — narrower than the logo's own viewport-based cap, so the
 * image overflowed its block to the right and read as off-center. The cover
 * itself already supplies the edge padding, so the inner container needs
 * none; zeroing it lets the logo use the full padded width and center
 * honestly. */
.page-template-splash .wp-block-cover__inner-container {
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	max-width: none;
}

/* Logo sizing. Capped on BOTH axes so the lockup never collides with the
 * edges on a short laptop screen or a narrow phone. The lockup is about
 * 1.25:1 (it is a stacked shield-over-wordmark, not a wide horizontal
 * one), so height is usually the binding constraint on desktop.
 *
 * These are max-* only, with width/height auto: the <img> carries real
 * intrinsic dimensions, so the browser scales it down against whichever
 * cap bites first and keeps the aspect ratio itself. Setting an explicit
 * `width` alongside `max-height` instead makes the box 520px wide but
 * short, and object-fit letterboxes the artwork inside it — the logo
 * then renders visibly smaller than the box it occupies. */
.page-template-splash .wp-block-image,
.page-template-splash .wp-block-site-logo {
	margin: 0 auto;
}
.page-template-splash .wp-block-image img,
.page-template-splash .wp-block-site-logo img {
	width: auto;
	height: auto;
	max-width: min(520px, 72vw);
	max-height: 52vh;
	/* Sits on the <img> bitmap, so the glow follows the logo's transparent
	 * alpha edge rather than a rectangular bounding box. Subtle — it exists
	 * to keep the mark readable if a bright frame of video passes behind it,
	 * not to be seen as an effect. */
	filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.55));
}

/* "Coming soon" status line.
 *
 * Uses the parent's `is-style-eyebrow` core-paragraph style, which already
 * supplies uppercase + the 0.22em eyebrow tracking, so nothing here restates
 * typography that the token system owns.
 *
 * Two decisions worth keeping:
 *
 * 1. It is GOLD. The logo lockup ends in its own small white "BUILT TO
 *    PROTECT" line, and a second small white line directly beneath reads as a
 *    fourth tier of the logo rather than as site copy. Gold separates the
 *    status line from the mark, and it echoes the gold "INSURANCE" inside the
 *    lockup, so the screen gains rhythm instead of noise. This is a
 *    sanctioned use — the client's direction lists fine rules and accents,
 *    and gold stays at two small incidents on the page (this and the bottom
 *    hairline).
 *
 * 2. The space above it is deliberate and large. The eyebrow style sets
 *    `margin: 0`, so without this the line would crowd the lockup. A full
 *    spacing--40 gap is what makes it read as separate from the logo.
 *
 * The text shadow is for the video, not for decoration: gold on the scrim
 * measures ~5:1, but the footage moves underneath it, and a bright frame can
 * pass behind this line. The shadow holds the floor on the worst frame.
 */
.page-template-splash .is-style-eyebrow {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------
 * NO-VIDEO FALLBACK.
 *
 * There is no background video yet. Rather than show a flat navy
 * rectangle, the cover's overlay gets a two-stop brand gradient — Navy
 * into Steel Blue, lifted off-center — so the splash reads as finished
 * on its own.
 *
 * WHEN THE VIDEO ARRIVES: add it as the Cover block's background media
 * in the editor. Core then renders a <video class="wp-block-cover__
 * video-background"> INSIDE the cover, and the `:has()` rule below
 * automatically swaps this decorative gradient for a plain darkening
 * scrim (so the footage reads through and the logo stays legible).
 * No CSS edit required — that is the point of the `:has()` split.
 * ------------------------------------------------------------------ */
.page-template-splash .wp-block-cover__background {
	background-image:
		radial-gradient(
			ellipse 120% 90% at 50% 18%,
			color-mix(in srgb, var(--wp--preset--color--secondary) 55%, transparent) 0%,
			transparent 68%
		),
		linear-gradient(
			160deg,
			var(--wp--preset--color--primary-alt) 0%,
			var(--wp--preset--color--primary) 55%,
			var(--wp--custom--gray--100) 100%
		);
	opacity: 1;
}

/* Video present → drop the decorative gradient, keep a legibility scrim. */
.page-template-splash .wp-block-cover:has(.wp-block-cover__video-background) .wp-block-cover__background,
.page-template-splash .wp-block-cover:has(.wp-block-cover__image-background) .wp-block-cover__background {
	/* !important beats the `has-primary-background-color` utility, which WP
	 * core emits with !important. Without this the overlay stays a solid
	 * navy fill at dimRatio 100 and the video never shows through — the
	 * scrim below is doing the darkening now, so the flat color must go. */
	background-color: transparent !important;
	/* Tuned for THIS footage: a sunrise drone shot whose brightest area — the
	 * sun and blown-out sky — sits in the upper-middle third, directly behind
	 * the logo. A flat scrim either crushes the darker foreground or leaves
	 * the sun too hot for white type, so the darkest stop is placed at 45%
	 * (over the sun) rather than at an edge, and the bottom stays lighter to
	 * keep the concrete detail readable. Re-tune if the footage changes. */
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 62%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--primary) 78%, transparent) 45%,
		color-mix(in srgb, var(--wp--preset--color--primary) 68%, transparent) 72%,
		color-mix(in srgb, var(--wp--custom--gray--100) 78%, transparent) 100%
	);
	opacity: 1;
}

/* A hairline of Fortera Gold along the bottom edge — the one place the
 * brand's 10% accent shows up on an otherwise navy screen. Pseudo-element
 * on the cover so it sits above both the media and the overlay. */
.page-template-splash .wp-block-cover::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--wp--preset--color--cta) 25%,
		var(--wp--preset--color--cta-alt) 50%,
		var(--wp--preset--color--cta) 75%,
		transparent 100%
	);
	pointer-events: none;
}

/* Respect a reduced-motion preference: freeze the looping background so
 * the splash is a still image for anyone who has asked for less movement.
 * Pausing via JS would be more thorough, but this site ships no JS and a
 * frozen first frame is the honest minimum. */
@media (prefers-reduced-motion: reduce) {
	.page-template-splash .wp-block-cover__video-background {
		animation-play-state: paused;
	}
}