/**
 * Oogle — base stylesheet (front end).
 *
 * The ONLY global stylesheet, loaded on the front end and in the editor
 * canvas (see inc/setup.php; editor.css undoes the three document-level
 * rules there). Everything that can live in theme.json does; everything
 * block-specific lives in blocks/*.css and loads per block; the reveal and
 * rotator modules carry their own stylesheets (reveal.css, rotator.css),
 * enqueued with the module.
 * Rules here: document, focus, targets, media, header, sticky aside,
 * reduced motion, CSS-only image motion.
 * Specificity: single class or element + pseudo-class. No IDs. One !important
 * (reduced motion), documented.
 */

/* ---- Document ---------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%; /* Still prefix-only in Safari. */
	scroll-behavior: smooth;
}

/* Full-height flex column so a short 404 still pushes the footer down. */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
	min-block-size: 100dvh;
	display: flex;
	flex-direction: column;
}

/* Headings balance their lines (no one-word last line); body copy avoids
   orphans where the engine supports it. Both are progressive, no fallback needed. */
:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li, figcaption) {
	text-wrap: pretty;
}


.wp-site-blocks {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

main {
	flex: 1 0 auto;
}

/* ---- Focus --------------------------------------------------------------- */

/* One ring for everything. Never remove; only override the color per surface. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-deep);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

/* Dark surfaces: the parent's two dark section styles, the Cover block, and any
   element a child marks with "oogle-dark" (e.g. a dark header or footer Group).
   The same list recolours outline/text buttons, lead and eyebrow copy in
   blocks/core-button.css and blocks/core-paragraph.css. */
:where(.is-style-section-reversed, .is-style-section-primary, .wp-block-cover, .oogle-dark) :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* ---- Full-width sections --------------------------------------------------- */

/* A full-width section (Group or Cover with align "full") carries its own
   vertical padding, so two of them in a row butt together instead of showing
   a strip of page background between two tinted bands. Sections that want
   air between them keep it by adding padding, not by relying on the gap. */
:where(.wp-block-post-content) > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Header, main and footer butt together; templates pad their own tops, so a
   dark header over a dark hero (or a dark footer under a dark band) shows no
   strip of page background. Core puts the root block gap between them. */
.wp-site-blocks > header + main,
.wp-site-blocks > main + footer {
	margin-block-start: 0;
}

/* ---- Skip link ------------------------------------------------------------ */
/* Core injects and styles the skip link for block themes (printed in the
   footer, so it also wins the cascade). Nothing to add. */

/* ---- Selection ------------------------------------------------------------ */

::selection {
	background: var(--wp--preset--color--primary-tint);
	color: var(--wp--preset--color--contrast);
}

/* ---- Touch targets (WCAG 2.5.8) ---------------------------------------- */

.wp-element-button,
.wp-block-button__link,
.wp-block-search__button {
	min-block-size: var(--wp--custom--target--min);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}

/* ---- Media ------------------------------------------------------------------ */

img,
video {
	block-size: auto;
	max-inline-size: 100%;
}

/* ---- Header --------------------------------------------------------------- */

.oogle-header {
	z-index: var(--wp--custom--z--header);
	/* Hairline that works on a light or a dark header: 12% of the text colour. */
	border-block-end: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

/* ---- Sticky aside ----------------------------------------------------------- */
/* An element that stays in view while its taller sibling column scrolls past
   (a photo beside a long list, a heading beside its stages). Offset clears the
   sticky header. Needs a containing block taller than itself; harmless otherwise. */
.oogle-sticky {
	position: sticky;
	top: calc(var(--wp--preset--spacing--60) + 4rem);
}

/* ---- Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	/* The one permitted !important: nothing may animate for these users. */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---- Image motion (CSS only) ------------------------------------------- */

/* Hover: a restrained zoom on linked or gallery images. */
.oogle-zoom-hover img {
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.oogle-zoom-hover:hover img,
.oogle-zoom-hover:focus-within img {
	transform: scale(1.04);
}

/* Scroll-driven depth: a full-bleed image drifts slightly while it crosses
   the viewport. Progressive: browsers without scroll-driven animations show
   a static image. */
@supports (animation-timeline: view()) {
	.oogle-drift img {
		animation: oogle-drift linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
		scale: 1.12;
	}

	@keyframes oogle-drift {
		from { translate: 0 -5%; }
		to   { translate: 0 5%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.oogle-zoom-hover:hover img,
	.oogle-zoom-hover:focus-within img,
	.oogle-drift img {
		transform: none;
		animation: none;
		scale: 1;
		translate: 0;
	}
}