/* ------------------------------------------------------------------------- *
 * Cyber Readiness Check, base. Loaded only on the page, before every unit
 * file, see vallem_crc_assets() in inc/crc.php.
 *
 * The prototype's <style id="crc-page"> rules that more than one section
 * uses, verbatim from docs/readiness-review/prototype/index-v2.html, then the
 * base rule of parts/v2/v2.css. Dead prototype rules are not ported. The
 * crc-page rules of one section only are in that section's unit file.
 *
 * Frozen after the scaffold. A unit that finds a defect here ships a scoped
 * override in its own file, marked "base override", and reports it.
 * ------------------------------------------------------------------------- */

/* Cyber Readiness Check prototype. Tokens from theme.json. */
.crc{
	--navy:#071A3A; --navy-2:#121F54; --window:#183CDD; --blue:#183CDD; --accent:#6A9FFF;
	--muted:#AEBBD8; --line:#1E3160; --guide:rgba(106,159,255,.16);
	--ink:#18181B; --ink-muted:#52525B; --surface:#F4F5FA; --border:#D4D4D8;
	--on-blue:#D4EAFF; --blue-line:#5C78F0;
	--cw:18px; --ch:46px;
	--grid:rgba(106,159,255,.13);
	--gutter:clamp(1.5rem,4vw,2rem);
	--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
	/* Vallem WP: margin-block, not the prototype's margin:0. The root is an
	   alignfull group, and its inline margins are core's negative root padding. */
	background:var(--navy); color:#fff; margin-block:0 !important; padding:0 !important; max-width:none !important;
	font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-feature-settings:"cv11","ss01";
	-webkit-font-smoothing:antialiased;
}
.crc *,.crc *::before,.crc *::after{box-sizing:border-box}
.crc p{margin:0}
.crc h1,.crc h2,.crc h3{margin:0}

/* Type */
.crc-h1{font-size:clamp(2.5rem,1.2rem + 3.6vw,4.25rem); font-weight:420; line-height:1.04; letter-spacing:-.0223em; text-wrap:balance; max-width:15.5em; margin-inline:auto !important}
.crc-h1--end{font-size:clamp(2.25rem,1.3rem + 2.6vw,3.5rem); max-width:14em}
.crc-h2{font-size:clamp(1.75rem,1.2rem + 1.4vw,2.5rem); font-weight:420; line-height:1.08; letter-spacing:-.0223em; text-wrap:balance}
.crc-lede{font-size:1.125rem; line-height:1.55; letter-spacing:-.0143em; color:var(--muted); max-width:33em; margin:1.5rem auto 0 !important; text-wrap:balance}
.crc-lede a{color:#fff; text-underline-offset:3px}

/* Intake CTA: the theme's own button. Look, hover colour, press and letter roll all come from the
   theme (style.min.css, text-roll.js); this adds only a calendar after the label, masked so it
   takes the label's colour, hover included. */
.crc-cta{--crc-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='4.5' width='14' height='12.5' rx='1.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M3 8.5h14M7 2.5v4M13 2.5v4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.crc-cta > .wp-block-button__link{display:inline-flex; align-items:center; gap:.625em}
.crc-cta > .wp-block-button__link::after{content:""; flex:none; width:1.125em; height:1.125em; background-color:currentcolor;
	-webkit-mask:var(--crc-cal) center/contain no-repeat; mask:var(--crc-cal) center/contain no-repeat}
/* On the blue bands: the theme's Omgekeerd style. In WordPress its colours come from the variation;
   the hover is the theme's own rule. */
.crc-cta.is-style-inverted > .wp-block-button__link{background-color:var(--wp--preset--color--base); color:var(--wp--preset--color--contrast)}
.crc-link{display:inline-flex; align-items:center; gap:10px; color:#fff !important; text-decoration:none !important; font-weight:500; font-size:1rem}
.crc-link::before{content:""; width:0; height:0; border-left:6px solid var(--accent); border-top:4px solid transparent; border-bottom:4px solid transparent}
.crc-link:hover{text-decoration:underline !important; text-underline-offset:4px}
.crc-actions{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 32px; margin-top:2.25rem}

/* Framed rows */
.wrap{max-width:calc(1280px + 2px); margin-inline:auto}
@media (max-width:1360px){.wrap{margin-inline:var(--gutter)}}
.split{display:grid; grid-template-columns:448px 1fr; min-height:500px}
.split__text{padding:56px 48px; display:flex; flex-direction:column; gap:20px}
.split__text p{font-size:1.0625rem; line-height:1.6; letter-spacing:-.012em; color:var(--muted); max-width:30em}
.canvas{position:relative; display:grid; place-items:center; padding:48px; background-color:#0A1E45;
}

/* Tablet and phone */
@media (max-width:1100px){
	.split{grid-template-columns:1fr}
}
@media (max-width:820px){
	.split__text{padding:40px 24px}
	.canvas{padding:32px 20px}
	.split{min-height:0}
	.crc-lede{font-size:1.0625rem}
}

/* parts/v2/v2.css. Next-step line under every intake button. */
.v2-next{margin:.875rem 0 0; font-size:.875rem; line-height:1.5}

/* Editor only. The editor keeps core's flow classes, which inc/crc.php strips
   on the front end, so their 24px gaps are taken out here. The second selector
   is the root's own children: the root carries the flow class itself. */
.editor-styles-wrapper .crc :where(.is-layout-flow) > *,
.editor-styles-wrapper .crc:where(.is-layout-flow) > *{margin-block-start:0}