/* Front-page glue for the approved homepage cascade.
 *
 * `approved-cascade.css` is the measured reference stylesheet and is left
 * untouched. This file only reconciles it with WordPress chrome: the fixed
 * admin bar (logged-in editors) and the theme's own document roots. Nothing
 * here changes the approved composition for a visitor.
 */

/* The reference document had no admin bar. Keep the sticky header parked just
 * below it instead of sliding underneath, and drop core's bump margin so the
 * two offsets cannot stack. */
html.admin-bar {
	margin-top: 0 !important;
	--udg-admin-bar: 32px;
}

html.admin-bar .site-header {
	top: var(--udg-admin-bar, 0);
}

html.admin-bar dialog#overlay {
	inset-block-start: var(--udg-admin-bar, 0);
}

@media (max-width: 782px) {
	html.admin-bar {
		--udg-admin-bar: 46px;
	}
}

/* `#top` is the scroll target the approved "back to top" link expects. */
#top {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
}

/* WordPress prints the theme's block stylesheet even when no block is used; a
 * stray `.alignwide` margin must never widen the measured page. */
.udgoon-home .entry-content > * {
	margin-inline: 0;
}

/* `homepage-motion.js` tags the hero slider controls with `.keyboard-controls`,
 * and `approved-cascade.css` hides that layer (`opacity:0; pointer-events:none`)
 * until `:focus-within` reveals it. That is the approved behaviour, not a
 * defect: measured on the approved frontend at 1440x900 and 390x844 the
 * controls compute `opacity:0 / pointer-events:none` and the hero photograph
 * takes the hit test (`output/probe-hero-media-1440.log`,
 * `output/probe-hero-media-390.log`). Do NOT force them visible here — the
 * slideshow advances itself and the arrows are the keyboard affordance. */

/* The homepage is served from `front-page.php`, so the reference's own page
 * background and type stack must win over the block library defaults. */
body.udgoon-home {
	background: var(--paper);
	color: var(--ink);
	font: 14px/1.5 var(--sans);
}

body.udgoon-home img {
	max-width: 100%;
}

/* Opening consent, small viewports.
 *
 * The approved card is pinned with `right:16px` and `width:calc(100vw - 32px)`.
 * `100vw` includes the classic scrollbar, so on a 390px phone with a 15px
 * scrollbar the card computed 358px wide inside a 375px layout viewport: its
 * right edge landed correctly at x=359 but its left edge fell to x=1, so it
 * hugged the left edge instead of the approved 16px inset. Pinning both edges
 * keeps the inset on both sides and lets the card narrow to fit.
 *
 * Nothing else about the approved treatment changes: same position, same
 * vertical cap, same internal scroll, all three choices, no auto-accept. */
@media (max-width: 760px) {
	.consent-card {
		left: 16px;
		right: 16px;
		width: auto;
		max-width: none;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* With the card inset on both sides there is no room outside its edge for
	 * the motif, so it is drawn inside the padding box rather than cut off. */
	.consent-thread {
		right: 6px;
		width: 56px;
	}
}

/* New-arrivals hover photograph.
 *
 * The approved card swaps in a second photograph on hover. It used to be a
 * second `<img>` in the DOM, so every phone downloaded the full-size alternate
 * across the whole rail even though a touch device can never hover. The URL now
 * travels in the card's `data-udg-alt` attribute and is only promoted to the
 * `--udg-alt` custom property — by home.js, on pointer intent — inside
 * `@media (hover:hover)`. Touch clients match neither, and a desktop page load
 * fetches nothing until the pointer reaches the shelf, so the whole rail is no
 * longer paid for on first paint.
 *
 * The desktop reveal is the approved one — same scaleX sweep, same right-centre
 * origin, same `--hover-duration`/`--ease-out`. The front photograph still
 * takes the approved `scale(1.035)` from `approved-cascade.css`. */
@media (hover: hover) {
	.arrivals-card__plate::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		background-image: var(--udg-alt, none);
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform var(--hover-duration) var(--ease-out);
		pointer-events: none;
	}

	.arrivals-card__plate:hover::after,
	.arrivals-card__plate:focus-visible::after {
		transform: scaleX(1);
	}
}

/* Match the approved reduced-motion rule that hides the hover layer entirely. */
@media (prefers-reduced-motion: reduce) {
	.arrivals-card__plate::after {
		content: none;
	}
}