/**
 * Companion to heismic-landing.scoped.css, enqueued by page-heismic.php only.
 *
 * heismic-landing.css is the delivered stylesheet, kept byte for byte so a
 * re-export from the design build can replace it wholesale; the scoped copy is
 * generated from it by tools/heismic-scope-css.js. This file holds what cannot
 * come from either: the theme element styles that have to be held off the
 * landing markup now that the page renders the theme header and footer, the
 * logo marquee seam fix, and this template's footer trimming.
 */

/*
 * The design assumed a bare document, but the theme styles bare elements
 * (ul, p, blockquote, h2 …) and sets body{font-size:1rem} on a 10px root.
 * Restoring inheritance for everything inside the wrapper keeps those rules
 * out. Utility classes match with a class selector, so anything the design set
 * explicitly still wins over this.
 */
#root {
	font-size: 16px;
}

#root * {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	margin: 0;
	max-width: none;
	padding: 0;
	text-align: inherit;
	text-transform: none;
}

/*
 * Line height is reset only on the elements the theme gives one, and to 1.5
 * rather than "inherit": the design inherits the unitless 1.5 from its root and
 * scales it per element. Leaving everything else alone matters, because spans
 * inside a heading have to keep inheriting that heading's leading.
 */
#root h1,
#root h2,
#root h3,
#root h4,
#root h5,
#root h6,
#root p,
#root li,
#root blockquote {
	line-height: 1.5;
}

/*
 * Logo marquee seam. The keyframes move the track by translateX(-50%) and the
 * track holds two copies of the logo list, but gap-20 only sits between items,
 * never after the last one: half the track is one copy plus half a gap, landing
 * 40px short of where the second copy starts, which reads as a jump on every
 * loop. A trailing gap of the same width puts the halfway point exactly on the
 * seam. (The design build has the same gap, so this is worth feeding back.)
 */
#root .animate-marquee,
#root .animate-marquee-fast {
	/* Must stay equal to the track's gap-20 (80px). */
	padding-right: 80px;
}

/*
 * Logo colour. The design's filter chain (grayscale invert brightness-150)
 * assumes dark artwork on transparency, so uploaded logos — SVGs especially —
 * can come through black on the navy strip. brightness(0) flattens any artwork
 * to black and invert(1) then lifts it to white, which lands every logo on the
 * same chrome tone whatever colours it ships with. Hover goes to pure white.
 * Overrides the design's classes on specificity, so the markup stays as
 * delivered and a re-export cannot undo this.
 */
#root [data-testid="logo-wall"] img {
	filter: brightness(0) invert(1);
	mix-blend-mode: normal;
	opacity: 0.7;
	transition: opacity 200ms ease;
}

#root [data-testid="logo-wall"] img:hover {
	opacity: 1;
}

/* Scroll 20% slower than the design's 20s, and tighten the rules by 10px each
   side (the design's py-7 is 28px). Both beat the design's utilities on
   specificity so the delivered markup stays untouched. */
#root [data-testid="logo-wall"] .animate-marquee-fast {
	animation-duration: 24s;
}

#root [data-testid="logo-wall"] .border-y {
	padding-bottom: 18px;
	padding-top: 18px;
}

/*
 * Hero on phone and tablet, below the design's lg breakpoint. Two fixes, both as
 * a media query because the build shipped no responsive variants for either
 * utility (no sm:pt-*, no sm:-left-*).
 *
 * The theme's .primary-nav is position:absolute, so it takes no space in the
 * flow and hangs over the top of the page: roughly 78px of it on a phone, which
 * swallows most of the design's py-24 and left the eyebrow sitting just under
 * the logo. The extra top padding is what the nav costs, put back.
 *
 * The stat circle is offset -left-6, i.e. 24px, which is exactly the container's
 * px-6: at one column that pins it flush to the screen edge. A smaller offset
 * keeps it hanging off the image corner with room to breathe. The design's -24px
 * is right from lg up, where the image sits in its own column.
 */
@media (max-width: 1023px) {
	#root [data-testid="hero-section"] > div {
		padding-top: 144px;
	}

	#root .animate-floaty {
		left: -8px;
	}
}

/*
 * Video tile hover. The design dimmed the photo and laid a navy tint over it,
 * lifting the tint on hover; both layers are gone, so a slow zoom is the whole
 * affordance. It is written out here rather than as utilities because the
 * compiled build only ships group-hover:scale-[1.02] (too small to read) and
 * group-hover:scale-110 (far too big), and because the tile is the hover target
 * while the image is what moves. Keyboard focus gets it too, since the tile is
 * a focusable role="button".
 */
#root [data-testid="video-feature"] img {
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

#root [data-testid="video-feature"]:hover img,
#root [data-testid="video-feature"]:focus-visible img {
	transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
	#root [data-testid="video-feature"] img {
		transition: none;
	}

	#root [data-testid="video-feature"]:hover img,
	#root [data-testid="video-feature"]:focus-visible img {
		transform: none;
	}
}

/*
 * Bottom scrim, so the caption reads over a light thumbnail while the photo
 * itself stays untouched: the fade is out by 46% and the top half is clear. It
 * is a real element in the markup because the paint order has to fall between
 * the image and the caption, which a pseudo-element on the tile cannot do — an
 * ::after covers the caption, a ::before goes under the image. The gradient is
 * written here because the design build shipped no gradient utilities. Extra
 * stops keep the falloff from banding, and it sits outside the zoom, which
 * targets the image alone.
 */
#root [data-testid="video-feature"] [data-heismic-video-scrim] {
	background-image: linear-gradient(
		to top,
		rgba(0, 8, 35, 0.82) 0%,
		rgba(0, 8, 35, 0.6) 12%,
		rgba(0, 8, 35, 0.28) 28%,
		rgba(0, 8, 35, 0) 46%
	);
}

/*
 * The scrim only covers the bottom, so the white caption and the translucent
 * hover pill still need their own contrast — the pill especially, sitting in the
 * clear top-right corner. A shadow does it without another layer over the photo.
 * The play button and the badge are solid fills and need nothing.
 */
#root [data-testid="video-feature"] p,
#root [data-testid="video-feature"] span[aria-hidden="true"] {
	text-shadow: 0 1px 10px rgba(0, 8, 35, 0.8);
}

/*
 * Every route to a demo on this page goes through the booking form it closes
 * with, so the theme's own demo CTAs are dropped: the header button, and the
 * footer's CTA section. The footer's grey link/recognition block goes with it,
 * leaving just the red utility bar. Same approach the theme already uses for
 * page-single-column-lp.
 */
.page-template-page-heismic #header-demo,
.page-template-page-heismic .a7x9k_cta-section,
.page-template-page-heismic section.u3gm-footer .main-footer {
	display: none;
}