/*
 * CrowdStrike Campaign theme styles.
 *
 * Colours, type scale and spacing are NOT defined here. They come from
 * theme.json as CSS custom properties, so the editor and the front end agree.
 * Reference them as var(--wp--preset--color--brand-red) and so on.
 *
 * This file holds only what theme.json cannot express: component styles,
 * interaction states and responsive behaviour.
 */

/* ---------------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   2. Focus and skip link

   The mockup is flat and specifies no focus treatment, so this is a build
   decision recorded in BUILD-NOTES.md. A visible focus ring is not optional.
   --------------------------------------------------------------------------- */

:where(a, button, input, textarea, select, video, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

/*
 * The video element itself takes focus before its native controls do, and
 * without this it took focus silently. Caught by the keyboard pass in
 * qa/verify.js, which is exactly what that pass is for.
 */
.csc-video:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-red);
	outline-offset: 3px;
}

.csc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.csc-skip-link:focus {
	left: 0;
}

/* ---------------------------------------------------------------------------
   3. Masthead and co-brand lockup
   --------------------------------------------------------------------------- */

.csc-masthead {
	/*
	 * Measured from the current export, "CS Microsite Page Mockup.png", which is
	 * 1366px wide. That is the design's own canvas width, so one pixel there is
	 * one CSS pixel here and there is no scale factor to argue about.
	 *
	 * mimecast is the topmost ink at y121.
	 */
	padding-block: 121px 0;
	padding-inline: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
}

/*
 * Lockup alignment.
 *
 * DELIBERATELY NOT following Canva here. The design gives the rule a different
 * length on each page, 52px on the landing page and 129px on Thank You, and
 * sits it off centre against the wordmarks. Adi's call, and it is the right
 * one: one lockup, one rule, centred.
 *
 * The marks are centred on their WORDMARKS, not on their image boxes. The
 * CrowdStrike file's swoosh hangs below its wordmark, so its box centre sits
 * lower than what the eye reads as the centre. Measured from the file: the
 * wordmark occupies y11..76 of a 102px tall source, so its centre is 7.4% of
 * the height above the box centre. That is what the nudge corrects.
 */
.csc-lockup {
	/*
	 * Three columns with the outer two equal, so the rule lands on the exact
	 * horizontal centre of the page.
	 *
	 * A flex row centred as a group does NOT do this: the CrowdStrike mark is
	 * 437px wide against mimecast's 319px, so the group's centre, and with it
	 * the rule, sits about 60px right of the page centre. Adi spotted it.
	 */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(1rem, 2vw, 27px);
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

/* Each mark hugs the rule, so the gap either side of it stays equal. */
.csc-lockup__mark--crowdstrike {
	justify-self: end;
}

.csc-lockup__mark--mimecast {
	justify-self: start;
}

.csc-lockup__mark {
	display: block;
	width: auto;
}

.csc-lockup__mark--crowdstrike {
	height: clamp(2.25rem, 4.4vw, 60px);
	/* Brings the wordmark's centre onto the row centre, see above. */
	position: relative;
	top: 4px;
}

.csc-lockup__mark--mimecast {
	height: clamp(1.95rem, 3.8vw, 52px);
}

/*
 * One rule, the same on both pages, centred. 56px reads as a clean divider
 * beside a 52px wordmark without competing with it.
 */
.csc-lockup__rule {
	flex: 0 0 auto;
	align-self: center;
	width: 3px;
	height: clamp(2.25rem, 4.1vw, 56px);
	background: var(--wp--preset--color--ink);
}

/*
 * Below the width where the two marks sit side by side they stack and the rule
 * turns horizontal. The design covers one width only, so this is a build
 * decision. Issue #14.
 */
@media (max-width: 30rem) {
	.csc-lockup {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 1rem;
	}

	.csc-lockup__mark--crowdstrike,
	.csc-lockup__mark--mimecast {
		justify-self: center;
	}

	.csc-lockup__mark--crowdstrike {
		margin-bottom: 0;
	}

	.csc-lockup__rule {
		width: 4rem;
		height: 3px;
	}
}

/* ---------------------------------------------------------------------------
   4. Placeholders

   Anything marked as a placeholder must look unmistakably unfinished, so it can
   never be mistaken for approved content in a review.
   --------------------------------------------------------------------------- */

.csc-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	border: 2px dashed var(--wp--preset--color--muted);
	background: repeating-linear-gradient(
		45deg,
		#fff8f8,
		#fff8f8 8px,
		#ffeeee 8px,
		#ffeeee 16px
	);
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
}

/* ---------------------------------------------------------------------------
   5. Eyebrow heading

   "SEE THE INTEGRATION IN ACTION". Written in sentence case in the content and
   uppercased here, so assistive technology reads real words rather than a
   string of capitals.

   Size is a compromise and is documented in BUILD-NOTES.md: the mockup's cap
   height implies about 26px, its line width implies about 23px. Outfit's
   uppercase proportions differ from the mockup typeface, so both cannot be
   satisfied. 24px sits within a few per cent of each.
   --------------------------------------------------------------------------- */

.csc-eyebrow {
	font-size: 1.575rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   5B. Optional line break

   The mockup breaks "Unified Protection Across / the Modern Attack Surface"
   onto two lines. That break only makes sense while the heading is wide enough
   to hold each half on one line. Below that it produces four ragged lines, so
   the break is dropped and the heading wraps naturally.

   The mockup is flat and does not cover small widths, so this is a build
   decision. Issue #14.
   --------------------------------------------------------------------------- */

@media (max-width: 48rem) {
	.csc-break-wide {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   6. Integration video, issue #19

   The asset finally arrived on 12 August 2026: "CS Microsite Video - NEW Next
   Gen SIEM Video", 1920x1080, 29 seconds, with an audio track.

   NOTE ON THE ASPECT RATIO. This was built at 16:9, then "corrected" to square
   after the Canva editor reported the embed element as 553 x 551 units, then
   put back to 16:9 when the real file turned out to be 1920x1080. The square
   was Canva's own placeholder box for a design it could not load, not the
   frame. Trust the asset over the placeholder.

   It is NOT autoplayed. It carries sound, so browsers would block it anyway,
   and a campaign page that starts talking at you is hostile. It is also
   preload="metadata" rather than "auto", because 5.3MB downloaded on every page
   view would undo the entire performance budget. Only the poster loads up
   front.
   --------------------------------------------------------------------------- */

.csc-video {
	/*
	 * The video's own aspect ratio wins, 16:9, matching the 1920x1080 file.
	 *
	 * The design draws a 550px square frame, but that is the Canva embed
	 * placeholder rather than the footage. Forcing the video into it means
	 * either cropping the sides or letterboxing, and both look wrong. Adi's
	 * call, and the right one.
	 *
	 * Full content column width was chosen over the design's 550px because it
	 * lands at 506px tall against the 549px the design allots the section, so
	 * the page rhythm is preserved as well. At 550px wide it would have been
	 * 309px tall and left a large hole.
	 */
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
   7. Benefit list

   In the mockup the list is centred as a block while its items stay left
   aligned, so the bullets form a single vertical line. Measured: every item
   starts at the same x, and the block's centre sits on the page centre.
   --------------------------------------------------------------------------- */

.csc-benefits {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	text-align: left;
	/*
	 * The design runs a uniform 58px line rhythm through the list, the same step
	 * inside a wrapped item as between items. Measured from the current 1366px
	 * export.
	 *
	 * It has to be line-height rather than margins, because the step is the same
	 * INSIDE a wrapped item as between items, and a margin cannot do that.
	 *
	 * Trade-off, and it is a real one: a 2.18 line-height leaves half of that
	 * leading hanging below the final line, which CSS counts and Canva does not.
	 * The five bullet lines land within 1px of the design; the gap to "Request a
	 * Demo" below them ends up about 25px larger. Absorbed as far as the section
	 * padding allows. Better than five wrong lines and one right gap.
	 */
	line-height: 2.18;
}

/* ---------------------------------------------------------------------------
   9. Request a Demo form

   Gravity Forms' own CSS is disabled in functions.php, so everything here is
   written from scratch against the approved mockup.

   Every value below was measured from designs/Landing page.png at the 1920px
   export and divided by the 1.5 assumed scale. The form column is 896px, which
   is slightly wider than the 880px text column. That is what the artwork draws,
   so it is kept rather than rounded to match.
   --------------------------------------------------------------------------- */

.csc-form-band {
	/* Band top to sub line 40px, button to band bottom about 108px. */
	padding-block: 1.125rem 4.5rem;
}

.csc-form-band > * {
	max-width: 56rem; /* 896px */
	margin-inline: auto;
}

.csc-form-wrap {
	/* Sub line to first label, measured 72px at the export. */
	margin-top: 2.375rem;
}

/*
 * Things Gravity Forms hides in its own stylesheet.
 *
 * Because that stylesheet is disabled, these MUST be hidden here or they render
 * as ordinary fields. The honeypot is the dangerous one: Gravity Forms rejects
 * any submission where it is filled in, so leaving it visible means a real
 * person can fill it and have their enquiry silently discarded as spam.
 *
 * Found by rendering the page, not by reading the markup.
 */
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield_visibility_hidden {
	display: none !important;
}

.gform_wrapper .gform_fields .gform_validation_container {
	display: none !important;
}

/* Layout ------------------------------------------------------------------ */

.gform_wrapper form {
	margin: 0;
}

.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	/* Input bottom to next label top, measured 58px at the export. */
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gform_wrapper .gfield {
	margin: 0;
	padding: 0;
}

/* Labels ------------------------------------------------------------------ */

.gform_wrapper .gfield_label {
	display: block;
	/* Label bottom to input top, measured 25px at the export. */
	margin-bottom: 0.6875rem;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.2;
}

/*
 * Every field on this form is required, and the mockup shows no asterisks and
 * no "required fields" legend. They are hidden visually only. Inputs still
 * carry aria-required, so assistive technology is told. Build decision, #14.
 */
.gform_wrapper .gfield_required,
.gform_wrapper .gform_required_legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Inputs ------------------------------------------------------------------ */

.gform_wrapper .ginput_container input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	/* Measured input height 76px. */
	height: 3.1875rem;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
	appearance: none;
	transition: border-color 0.15s ease;
}

.gform_wrapper .ginput_container input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

/*
 * Hover, focus and error treatments are not in the mockup. Build decisions,
 * recorded in BUILD-NOTES.md.
 */
.gform_wrapper .ginput_container input:hover {
	border-color: var(--wp--preset--color--muted);
}

.gform_wrapper .ginput_container input:focus-visible {
	border-color: var(--wp--preset--color--brand-red);
	outline: 3px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

/* Validation -------------------------------------------------------------- */

.gform_wrapper .gfield_error .ginput_container input {
	border-color: var(--wp--preset--color--brand-red);
	border-width: 2px;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--brand-red);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.gform_wrapper .gform_validation_errors {
	margin-bottom: 2rem;
	padding: 1rem 1.25rem;
	border: 2px solid var(--wp--preset--color--brand-red);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body);
	font-size: 1rem;
}

.gform_wrapper .gform_validation_errors h2 {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	line-height: 1.3;
}

/* Submit ------------------------------------------------------------------ */

.gform_wrapper .gform_footer {
	/* Last input bottom to button top, 43px. */
	margin: 1.8125rem 0 0;
	padding: 0;
}

/*
 * Gravity Forms 3.0 renders the submit control as `<button type="submit">`.
 * Earlier versions rendered `<input type="submit">`, which is what this file
 * originally targeted, so the button lost every one of these styles the moment
 * the plugin was updated.
 *
 * Both elements are matched, deliberately. It means a plugin rollback does not
 * break the design a second time, and it costs nothing.
 */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button[type="submit"] {
	/* iOS Safari puts its own rounding and gradient on both of these. */
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: block;
	width: 100%;
	/* Measured button height 96px, label 40px. */
	min-height: 4rem;
	padding: 0.4rem 1rem;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: clamp(1.5rem, 4.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer button[type="submit"]:hover {
	background: #c00b11;
}

.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_footer button[type="submit"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

/* Stops a second submission while the first is still in flight. */
.gform_wrapper .gform_footer input[type="submit"][disabled],
.gform_wrapper .gform_footer button[type="submit"][disabled] {
	opacity: 0.65;
	cursor: progress;
}

/* Disclaimer -------------------------------------------------------------- */

.csc-disclaimer {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

/* The disclaimer wording has not been supplied, so it must look unfinished. */
.csc-placeholder-text {
	padding: 0.75rem 1rem;
	border: 2px dashed var(--wp--preset--color--muted);
	background: repeating-linear-gradient(
		45deg,
		#fff8f8,
		#fff8f8 8px,
		#ffeeee 8px,
		#ffeeee 16px
	);
	color: var(--wp--preset--color--muted);
	font-weight: 700;
}

.gform_wrapper .gfield--type-html {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   10. Thank You page, issue #9

   The whole page sits on the surface grey. Values measured from
   designs/Thank You page.png at the 1920px export, divided by the 1.5 scale.
   --------------------------------------------------------------------------- */

.page-thank-you {
	background: var(--wp--preset--color--surface);
}

/*
 * The Thank You page draws a DIFFERENT lockup from the landing page, measured
 * from the current 1366px exports:
 *
 *            CrowdStrike   mimecast   rule      band top
 *   landing  437 x 60      319 x 52   3 x 52    y121
 *   thankyou 437 x 61      342 x 56   3 x 129   y84
 *
 * CrowdStrike is the same on both. mimecast is larger here and the rule is
 * more than twice as tall. The three are centred on each other rather than
 * baseline aligned, which is how this page draws them.
 */
.page-thank-you .csc-masthead {
	padding-block-start: 84px;
	background: transparent;
}

.page-thank-you .csc-lockup__mark--crowdstrike {
	height: clamp(2.25rem, 4.45vw, 61px);
}

.page-thank-you .csc-lockup__mark--mimecast {
	height: clamp(2.1rem, 4.1vw, 56px);
}

/*
 * The rule is deliberately NOT overridden here. The design makes it 129px on
 * this page against 52px on the landing page; one consistent rule is better.
 */

/* Confirmation tick ------------------------------------------------------- */

.csc-tick {
	display: block;
	width: 213px;
	height: 213px;
	margin-inline: auto;
	color: var(--wp--preset--color--brand-red-deep);
}

.csc-tick circle,
.csc-tick path {
	fill: none;
	stroke: currentColor;
	/*
	 * Measured: 10px stroke on a 199px circle, so 5% of the diameter. The
	 * viewBox is 100 units wide, so that is 5, not 10. It was 10, which drew
	 * the mark at double weight.
	 */
	stroke-width: 5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Top block --------------------------------------------------------------- */

/*
 * The gap below the lockup is padding on the section, not margin on the tick.
 *
 * WordPress emits `.wp-block-group.is-layout-constrained > :first-child
 * { margin-block-start: 0 }` with real class specificity, which beat
 * `.csc-tick`. The tick ended up flush against the rule, which is what Adi
 * spotted. Padding on the section cannot be overridden that way.
 *
 * Measured: mockup lockup ends at y298, tick starts at y347, so 33px.
 */
.csc-ty-head {
	padding-top: 2.0625rem;
	text-align: center;
}

.csc-ty-head h1 {
	/* Measured 96px, against the landing page h1 at 93px. */
	margin-block: 3.5625rem 0;
	/* Ink height matched to the mockup: 97px at the 1280px design width. */
	font-size: clamp(2.875rem, 8.1vw, 103.7px);
}

.csc-ty-lead {
	margin-block: 0.375rem 0;
	font-size: clamp(1.25rem, 2.13vw, 27px);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.csc-ty-body {
	margin-block: 1.875rem 0;
	font-size: clamp(1.3125rem, 2.82vw, 35.8px);
	line-height: 1.5;
}

/* What happens next ------------------------------------------------------- */

.csc-steps {
	margin-block: 6.5625rem 0;
	padding-bottom: 6rem;
}

.csc-steps__title {
	margin: 0;
	font-size: clamp(1.5rem, 3.39vw, 42.7px);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
}

.csc-steps__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/*
	 * Measured from the current 1366px export: the icon circles span x152..1172
	 * and the column pitch is 433px, so the block is about 1299px wide. That is
	 * far wider than the 900px text column, which is what the artwork draws.
	 *
	 * It has to break out of the constrained parent to get there. Left at the
	 * parent's width the columns came out 220px and column 3 wrapped onto four
	 * lines instead of three.
	 */
	width: 1299px;
	max-width: 100%;
	margin: 60px auto 0;
	padding: 0;
	list-style: none;
}

.csc-steps__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: 1.5rem;
	text-align: center;
}

/*
 * The rules sit between the columns, not after the last one, and they are a
 * fixed height rather than the full column height.
 *
 * Measured: 4px wide and 343px tall, starting 11px below the top of the icon
 * circle. This was 1px until the section by section comparison caught it, the
 * same mistake as the lockup rule.
 */
.csc-steps__item {
	position: relative;
}

.csc-steps__item + .csc-steps__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6875rem;
	width: 4px;
	height: 21.4375rem;
	background: var(--wp--preset--color--rule);
}

.csc-steps__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 154px;
	height: 154px;
	border-radius: 50%;
	background: var(--wp--preset--color--body);
	color: var(--wp--preset--color--base);
}

.csc-steps__icon svg {
	width: 55%;
	height: 55%;
	fill: currentColor;
}

.csc-steps__number {
	margin-block: 33px 0;
	/* Width implies 83px, glyph height implies 93px. Outfit's digits are
	   narrower relative to their height than the mockup typeface, so 88px is
	   the midpoint. Same substitution effect as elsewhere, see issue #18. */
	/* Ink height matched to the mockup: 89.5px at the 1280px design width. */
	font-size: clamp(3rem, 7.53vw, 96.2px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}

.csc-steps__text {
	margin-block: 17px 0;
	font-size: clamp(1.1875rem, 2.36vw, 30.2px);
	line-height: 1.43;
	/*
	 * The measure is narrower than the column. Without it the copy wraps a word
	 * later than the mockup does, which was only visible once the text was
	 * corrected to its real size. Mockup's widest column line is 290px.
	 */
	/* Widest line the design draws in a column is 333px. */
	max-width: 340px;
	margin-inline: auto;
}

/*
 * The mockup covers one width only. Below the point where three columns stop
 * working the steps stack, and the vertical rules become horizontal ones so the
 * separation is not lost. Build decision, issue #14.
 */
@media (max-width: 56rem) {
	.csc-steps__list {
		grid-template-columns: 1fr;
		gap: 3rem;
		/* The explicit desktop width has to be released here, or it overflows
		   the viewport on a phone. Caught by the verification pass. */
		width: 100%;
		max-width: 30rem;
	}

	.csc-steps__item + .csc-steps__item {
		padding-top: 3rem;
	}

	.csc-steps__item + .csc-steps__item::before {
		position: static;
		display: block;
		width: 8rem;
		height: 4px;
		margin: 0 auto 3rem;
	}
}

/* ---------------------------------------------------------------------------
   11. Main
   --------------------------------------------------------------------------- */

.csc-main {
	display: block;
}

.csc-notfound {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: var(--wp--preset--spacing--40);
	text-align: center;
}

/* ---------------------------------------------------------------------------
   6. Reduced motion
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}