/*
 * WordPress layer
 * ---------------
 * Loaded last. The design lives in deep-navy.css + field-light.css (unchanged from the
 * mockup); this file only covers the places where WordPress's own markup or CSS differs
 * from the mockup, plus the few elements WordPress renders itself (menu, news cards).
 */

/* =========================================================================
   1. Light canvas by default
   Direction A was dark everywhere, so its global colours are dark-canvas colours. On this
   site only the hero, the header over it and the footer are dark: the global colours flip
   to Field Light's, and the dark parts get Direction A's colours back.
   ========================================================================= */
body {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	--eyebrow-dot: var(--wp--preset--color--signal-deep);
	--hiw-accent: var(--wp--preset--color--signal-deep);
}
h1, h2, h3, h4, h5, h6 { color: var(--wp--preset--color--navy); }
h3 { color: var(--wp--preset--color--ink); }
a { color: var(--wp--preset--color--navy); }
:focus-visible { outline-color: var(--wp--preset--color--navy); }
.is-style-eyebrow { color: var(--wp--preset--color--ink); }
.wp-block-button__link,
.wp-element-button { border-color: var(--wp--preset--color--navy); background-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
.wp-block-button.is-style-outline > .wp-block-button__link { border-color: color-mix(in srgb, var(--wp--preset--color--navy) 45%, transparent); background: transparent; color: var(--wp--preset--color--navy); }
.wp-block-button.is-style-arrow > .wp-block-button__link { color: var(--wp--preset--color--navy); text-decoration-color: color-mix(in srgb, var(--wp--preset--color--navy) 35%, transparent); }
@media (hover: hover) {
	.wp-block-button__link:hover { border-color: var(--wp--preset--color--navy-800); background-color: var(--wp--preset--color--navy-800); color: var(--wp--preset--color--white); }
	.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--navy); background: color-mix(in srgb, var(--wp--preset--color--navy) 6%, transparent); color: var(--wp--preset--color--navy); }
	.wp-block-button.is-style-arrow > .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--navy); text-decoration-color: currentColor; }
}

/* the dark parts keep Direction A */
:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) {
	color: var(--wp--preset--color--frost);
	--eyebrow-dot: var(--wp--preset--color--signal-bright);
	--hiw-accent: var(--wp--preset--color--signal-bright);
}
:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--white); }
:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) a { color: var(--wp--preset--color--white); }
:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) :focus-visible { outline-color: var(--wp--preset--color--frost); }
:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) .is-style-eyebrow { color: var(--wp--preset--color--frost); }
:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) .wp-block-button__link { border-color: var(--wp--preset--color--white); background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); }
:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) .wp-block-button.is-style-outline > .wp-block-button__link { border-color: var(--wp--preset--color--frost); background: transparent; color: var(--wp--preset--color--frost); }
:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) .wp-block-button.is-style-arrow > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--white); text-decoration-color: var(--line-strong); }
@media (hover: hover) {
	:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) .wp-block-button__link:hover { border-color: var(--wp--preset--color--frost); background-color: var(--wp--preset--color--frost); color: var(--wp--preset--color--navy-950); }
	:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--white); background: var(--wp--custom--line--dark); color: var(--wp--preset--color--white); }
	:where(.is-style-hero-deep, .site-header, .site-footer, .is-style-section-deep, .is-style-section-night, .is-style-section-brand, .is-style-section-contours) .wp-block-button.is-style-arrow > .wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--white); text-decoration-color: currentColor; }
}

/* =========================================================================
   2. Page structure
   ========================================================================= */
/* header, main and footer sit flush (WordPress puts the block gap between them) */
.wp-site-blocks > * { margin-block: 0; }
/* homepage sections sit flush, like the mockup's direct children of <main> */
.wp-block-post-content.home-sections > * { margin-block: 0; }
/* inner pages (page, post, news, 404): clear the fixed header */
.page-body {
	min-height: 70vh;
	padding-top: calc(var(--wp--custom--header--height) + var(--wp--preset--spacing--70));
	padding-bottom: var(--wp--preset--spacing--80);
}
.page-body > .wp-block-post-featured-image { overflow: hidden; border-radius: var(--wp--custom--radius--medium); }
.page-body > .wp-block-post-title { max-width: 18em; }
.wp-block-post-date { color: var(--wp--preset--color--slate); }
.wp-block-post-title a { color: inherit; text-decoration: none; }
.wp-block-query-pagination { margin-top: var(--wp--preset--spacing--60); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: 0.06em; }

/* =========================================================================
   3. Header: WordPress's own Navigation block
   ========================================================================= */
/* core sets menu links to `color: inherit`; the colour comes from the menu container */
.site-header .site-nav { color: var(--wp--preset--color--frost); }
@media (min-width: 600px) and (max-width: 1023px) {
	/* core shows the inline menu from 600px; this design switches to the menu button below 1024px */
	.site-header .site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1023px) {
	/* the two-line menu icon in front of "Menu" (the mockup's SVG, drawn in CSS) */
	.site-header .site-nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		flex: none;
		width: 14px;
		height: 6px;
		border-block: 1.5px solid currentColor;
		border-radius: 1px;
	}
	/* the open menu covers the whole screen, above the header; core's Close button sits top right */
	.site-header .site-nav .wp-block-navigation__responsive-container.is-menu-open { z-index: 100000; }
	.site-header .site-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: var(--wp--preset--color--paper); }
	/* full-width rows, like the mockup's overlay */
	.site-header .site-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch; }
	.site-header .site-nav .is-menu-open .wp-block-navigation__container,
	.site-header .site-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
	/* Close sits where the Menu button was: top right, in the header row */
	.site-header .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: calc(var(--wp--preset--spacing--30) + var(--wp--preset--spacing--20));
		right: var(--wp--style--root--padding-right);
		width: auto;
		padding: 0 var(--wp--preset--spacing--40);
		border-color: var(--wp--custom--line--light);
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--navy);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 500;
	}
	.site-header.is-scrolled .site-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--ink); }
}

/* =========================================================================
   4. Cover blocks: WordPress's stacking and positioning
   ========================================================================= */
/* WordPress puts the site gutter on a Cover's (constrained) inner container, so the Cover
   itself needs none; the mockup had it on the Cover. Tiles keep their own padding. */
body .wp-block-cover { padding-left: 0; padding-right: 0; }
.wp-block-cover.is-style-app-tile { color: var(--wp--preset--color--ink); }
/* core stacks the video at z-index 0 and the overlay at 1: the brand tint goes between them */
.wp-block-cover.is-style-hero-deep::before { z-index: 1; }
.wp-block-cover.is-style-hero-deep > .wp-block-cover__inner-container { z-index: 2; }
.wp-block-cover.is-style-hero-deep > .video-toggle { z-index: 3; }

/* Seismic trace along the bottom of the hero (the mockup's inline SVG, as a CSS mask) */
.wp-block-cover.is-style-hero-deep::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--wp--preset--spacing--20);
	z-index: 2;
	height: var(--wp--preset--spacing--60);
	pointer-events: none;
	background-color: var(--wp--preset--color--signal-bright);
	-webkit-mask: url('../svg/seismic-trace.svg') center / 100% 100% no-repeat, linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask: url('../svg/seismic-trace.svg') center / 100% 100% no-repeat, linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
	mask-composite: intersect;
	animation: innoseis-trace-draw 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s both;
}
@keyframes innoseis-trace-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 600px) { .wp-block-cover.is-style-hero-deep::after { height: var(--wp--preset--spacing--50); } }
@media (prefers-reduced-motion: reduce) { .wp-block-cover.is-style-hero-deep::after { animation: none; } }
/* The hero is always on screen, so its entrance plays as soon as the page paints (CSS only),
   instead of waiting for theme.js: on a slow phone that would hold back the largest text. */
@keyframes innoseis-rise { from { opacity: 0; transform: translateY(24px); } }
.js .is-style-hero-deep .reveal { opacity: 1; transform: none; transition: none; animation: innoseis-rise var(--wp--custom--motion--duration) var(--wp--custom--motion--ease) both; }
.js .is-style-hero-deep .hero__title { animation-delay: 120ms; }
.js .is-style-hero-deep .hero__lead { animation-delay: 240ms; }
.js .is-style-hero-deep .hero__buttons { animation-delay: 360ms; }
.js .is-style-hero-deep .is-style-glass-card { animation-delay: 480ms; }
@media (prefers-reduced-motion: reduce) { .js .is-style-hero-deep .reveal { animation: none; } }
/* The same trace drawn like a seismograph by theme.js ("Hero trace"): the ink is revealed behind a pen.
   Until the script takes over, the CSS draw above is held back; if it never runs, that starts after 2.5 s. */
.js:not(.traces-static) .wp-block-cover.is-style-hero-deep::after { animation-delay: 2.5s; }
.wp-block-cover.is-style-hero-deep.has-live-trace::after { content: none; }

.hero-trace {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--wp--preset--spacing--20);
	z-index: 2;
	height: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--signal-bright);
	pointer-events: none;
}
.hero-trace__ink {
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: url('../svg/seismic-trace.svg') center / 100% 100% no-repeat, linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask: url('../svg/seismic-trace.svg') center / 100% 100% no-repeat, linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
	mask-composite: intersect;
	clip-path: inset(0 calc((1 - var(--trace-p, 1)) * 100%) 0 0);
}
.hero-trace__pen {
	position: absolute;
	top: calc(var(--pen-y, 0.5) * 100%);
	left: calc(var(--pen-x, 0) * 100%);
	width: 7px;
	height: 7px;
	margin: -3.5px 0 0 -3.5px;
	border-radius: 50%;
	background-color: currentColor;
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 24%, transparent), 0 0 18px 4px color-mix(in srgb, currentColor 55%, transparent);
	opacity: var(--pen-o, 0);
}
.hero-trace.is-done .hero-trace__pen { opacity: 0; transition: opacity 0.6s ease-out; }
@media (max-width: 600px) { .hero-trace { height: var(--wp--preset--spacing--50); } }

/* =========================================================================
   5. Hero news card: a Query Loop showing the post marked "Sticky"
   ========================================================================= */
.hero__news .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.is-style-glass-card > .glass-card__meta { display: inline-flex; gap: 0.6em; }
.glass-card__meta > * { margin: 0; }
.glass-card__meta .wp-block-post-date { color: inherit; font: inherit; letter-spacing: inherit; }
.glass-card__title a { color: var(--wp--preset--color--white); text-decoration: none; }
.is-style-glass-card .wp-block-read-more {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	text-underline-offset: 0.45em;
}
.is-style-glass-card .wp-block-read-more::after { content: "\2192"; content: "\2192" / ""; margin-left: 0.45em; }
/* the whole card is the link */
.is-style-glass-card .wp-block-read-more::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (max-width: 600px) {
	.hero__aside .is-style-glass-card > .glass-card__meta,
	.hero__aside .is-style-glass-card > .wp-block-post-title { grid-column: 1; }
	.hero__aside .is-style-glass-card > .wp-block-read-more {
		grid-column: 2;
		grid-row: 1 / span 2;
		justify-content: center;
		width: var(--tap);
		height: var(--tap);
		border: 1px solid var(--line-strong);
		border-radius: var(--wp--custom--radius--pill);
		font-size: 0;
		text-decoration: none;
	}
	.hero__aside .is-style-glass-card > .wp-block-read-more::after { margin: 0; font-size: var(--wp--preset--font-size--medium); }
}

/* =========================================================================
   6. Grid layouts: the mockup's column counts win over WordPress's generated grid CSS
   ========================================================================= */
.wp-block-group.is-style-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wp-block-group.is-style-app-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wp-block-group.quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .wp-block-group.is-style-app-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .wp-block-group.is-style-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 781px) { .wp-block-group.quotes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .wp-block-group.is-style-app-tiles { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   7. Elements that are images or separators in WordPress (inline SVG in the mockup)
   ========================================================================= */
/* comparison icons */
.wp-block-image.compare__glyph { width: 8.5rem; max-width: 100%; }
/* how-it-works diagrams */
.wp-block-group.is-style-diagram > .wp-block-image { margin: 0; }
.wp-block-group.is-style-diagram img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .wp-block-group.is-style-diagram img { max-height: 9.5rem; margin-inline: auto; object-fit: contain; } }

/* Separator style "Seismic trace": the section divider */
.wp-block-separator.is-style-trace {
	height: 2.5rem;
	border: 0;
	opacity: 1;
	background-color: var(--wp--preset--color--signal);
	-webkit-mask: url('../svg/seismic-trace.svg') center / 100% 100% no-repeat, linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask: url('../svg/seismic-trace.svg') center / 100% 100% no-repeat, linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	mask-composite: intersect;
}
.wp-block-separator.is-style-trace.is-flipped { transform: scaleX(-1); }
[class*="is-style-section-"].is-layout-constrained > .is-style-trace + * { margin-block-start: var(--wp--preset--spacing--60); }
@media (max-width: 781px) { .wp-block-separator.is-style-trace { height: 2rem; } }

/* "overlap" columns are a grid below 1101px: the panel takes its width from the grid, not 100% */
@media (max-width: 1100px) { .wp-block-columns.is-style-overlap > .wp-block-column { width: auto; } }

/* core gives captions a bottom margin that leaks out of the figure */
.wp-block-image .wp-element-caption { margin-bottom: 0; }

/* columns the design spaces with flex gap: no extra flow-layout margins from WordPress */
.is-style-comparison > .wp-block-column > * { margin-block-start: 0; }

/* the timeline list sits in a wide Group (lists have no wide alignment) */
.timeline-wrap > .wp-block-list.is-style-timeline { margin-block-start: 0; }

/* datasheet link under the stats: mono label (was a font preset on the button link) */
.stat__footnote .wp-block-button__link { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); font-weight: 400; letter-spacing: 0.04em; }

/* =========================================================================
   8. Footer: social links as text links
   ========================================================================= */
.wp-block-social-links.is-style-text-links .wp-social-link { background: none; color: inherit; border-radius: 0; }
.wp-block-social-links.is-style-text-links .wp-social-link svg { display: none; }
.wp-block-social-links.is-style-text-links .wp-social-link { padding: 0; }
.wp-block-social-links.is-style-text-links .wp-block-social-link-anchor { padding: 0; line-height: 1.6; color: var(--wp--preset--color--frost); }
/* core shrinks visible labels to 0.65em; here the label is the whole link */
.wp-block-social-links.is-style-text-links .wp-social-link.wp-social-link span:not(.screen-reader-text) { margin: 0; font-size: inherit; line-height: inherit; }