/**
 * Virgo — base
 * Tokens, resets, typography defaults, focus, motion and small utilities.
 * Colour tokens themselves live in theme.json; this file only maps them to
 * semantic aliases and handles what theme.json cannot express.
 */

/* -------------------------------------------------------------------------
   1. Extra font faces (latin-ext subsets — latin is declared via theme.json)
   ---------------------------------------------------------------------- */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   2. Semantic aliases
   Every component below reads these, never raw hex. Light bands re-point
   them, which is how one class flips an entire section.
   ---------------------------------------------------------------------- */

:root {
	--virgo-bg: var(--wp--preset--color--base);
	--virgo-bg-raised: var(--wp--preset--color--surface);
	--virgo-bg-card: rgba(255, 255, 255, 0.028);
	--virgo-bg-card-hover: rgba(255, 255, 255, 0.055);
	--virgo-text: var(--wp--preset--color--contrast);
	--virgo-text-muted: var(--wp--preset--color--muted);
	--virgo-line: var(--wp--custom--line--dark);
	--virgo-line-strong: var(--wp--custom--line--dark-strong);
	--virgo-link: var(--wp--preset--color--violet-soft);
	--virgo-accent: var(--wp--preset--color--violet);
	--virgo-focus: var(--wp--preset--color--violet-soft);
	--virgo-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.85);

	--virgo-brand-gradient: linear-gradient(100deg, #8b5cf6 0%, #ec4899 55%, #fb923c 100%);
	--virgo-brand-gradient-soft: linear-gradient(100deg, rgba(139, 92, 246, 0.16) 0%, rgba(236, 72, 153, 0.14) 55%, rgba(251, 146, 60, 0.12) 100%);

	/*
	 * The decorative gradient above is for rules, eyebrow ticks and clipped
	 * text, where nothing sits on top of it. A filled button is different:
	 * white on #fb923c is 2.26:1, so every primary button failed AA across
	 * the right-hand third of its hover sweep. This is the same three-stop
	 * violet -> magenta -> orange progression at depths that clear AA:
	 * white on #7c3aed = 5.70, on #be185d = 6.04, on #c2410c = 5.18.
	 */
	--virgo-brand-gradient-fill: linear-gradient(100deg, #7c3aed 0%, #be185d 55%, #c2410c 100%);
	--virgo-brand-gradient-fill-hover: linear-gradient(100deg, #6d28d9 0%, #a21055 55%, #9a3412 100%);
	--virgo-link-hover: var(--wp--preset--color--violet-soft);

	--virgo-radius-sm: var(--wp--custom--radius--sm);
	--virgo-radius-md: var(--wp--custom--radius--md);
	--virgo-radius-lg: var(--wp--custom--radius--lg);
	--virgo-radius-xl: var(--wp--custom--radius--xl);
	--virgo-radius-pill: var(--wp--custom--radius--pill);

	--virgo-transition: var(--wp--custom--transition--base);
	--virgo-transition-slow: var(--wp--custom--transition--slow);

	/* ------------------------------------------------------------------
	   The single site grid.

	   One max-width and one gutter, shared by the utility bar, the header,
	   every band's inner container, every Elementor band and the footer, so
	   those elements line up on the same vertical edges.

	   --virgo-wide is 1400px and theme.json's wideSize is the same number, so
	   "wide" means one thing whether a section was built in the block editor,
	   in Elementor or in a PHP renderer. Before this pass CSS said 1520px and
	   theme.json said 1240px, and the two disagreed on every page.

	   The gutter is one fluid value rather than stepped breakpoints, so side
	   space grows smoothly. The gutter pads the band and the container is then
	   centred inside what is left, so the distance from the viewport edge to
	   the first pixel of content is:

	       gutter + max(0, (viewport - 2*gutter - 1400) / 2)

	   which lands on:

	     320px   ->  20px   (gutter floor)
	     390px   ->  ~21px
	     430px   ->  ~24px
	     768px   ->  ~42px
	     1024px  ->  ~56px
	     1440px  ->  ~79px
	     1600px  ->  ~100px (max-width has taken over)
	     1920px  ->  ~260px (max-width has taken over)

	   --virgo-prose governs long-form line length, so widening the grid never
	   stretches article text.
	   ------------------------------------------------------------------ */
	--virgo-gutter: clamp(20px, 5.5vw, 96px);
	--virgo-wide: 1280px;
	--virgo-prose: 760px;

	/*
	 * The content shell, as one expression.
	 *
	 * Previously the band supplied a horizontal padding and the inner
	 * container carried a max-width. That works, but the two interact: the
	 * padding only decides the side space until the max-width binds, after
	 * which the max-width decides it. Real screenshots showed the result
	 * still reading edge-to-edge on a large monitor.
	 *
	 * One expression instead. The shell is whichever is smaller: the viewport
	 * less a gutter each side, or 1280px. So the gutter governs while the
	 * screen is narrow and 1280px governs once it is wide, with no overlap
	 * and no double padding to reason about.
	 *
	 *   edge -> content  =  max(gutter, (viewport - 1280) / 2)
	 *
	 *     1920px  ->  320px      1280px  ->  ~70px
	 *     1600px  ->  160px      1024px  ->  ~56px
	 *     1440px  ->   80px       430px  ->  ~24px
	 *     1366px  ->  ~75px       320px  ->   20px
	 */
	--virgo-content-shell: min(100% - (2 * var(--virgo-gutter)), var(--virgo-wide));
	--virgo-content-shell-prose: min(100% - (2 * var(--virgo-gutter)), var(--virgo-prose));
	/* Retained alias: older rules and block templates still read --virgo-content. */
	--virgo-content: var(--virgo-prose);
	--virgo-measure: 68ch;

	/* ------------------------------------------------------------------
	   Section rhythm.

	   Three steps, not one value per section. Every band picks one of these
	   rather than inventing its own top/bottom padding, which is what let
	   sections drift apart from each other.
	   ------------------------------------------------------------------ */
	--section-space-sm: clamp(2.25rem, 5vw, 3.75rem);   /* 36 -> 60px  */
	--section-space: clamp(3rem, 7vw, 5.75rem);         /* 48 -> 92px  */
	--section-space-lg: clamp(3.75rem, 9vw, 7.25rem);   /* 60 -> 116px */

	/* ------------------------------------------------------------------
	   Icon system.

	   Optical sizes, so a chevron and a card icon are never chosen ad hoc at
	   the call site. The PHP helper still emits width/height attributes for a
	   no-CSS fallback; these properties decide the rendered size.
	   ------------------------------------------------------------------ */
	--icon-ui: 18px;      /* header links, footer links, social */
	--icon-action: 20px;  /* search, menu, icon-only controls   */
	--icon-card: 22px;    /* standard card icon                 */
	--icon-feature: 24px; /* large feature icon                 */
	--icon-chevron: 14px; /* carets and inline chevrons         */
	--icon-box: 2.75rem;  /* 44px — card icon / touch target    */
	--icon-box-lg: 3rem;  /* 48px — large feature container     */

	/*
	 * The tertiary action's arrow, as a mask rather than a typographic "→".
	 * Identical path data to virgo_icon('arrow'), so a text action and an
	 * inline SVG arrow are the same drawing at the same optical weight. Inline
	 * data URI: no extra request, no icon font, no dependency.
	 */
	--virgo-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4.5 12h15M14 6.5l5.5 5.5L14 17.5%27/%3E%3C/svg%3E");
	/* The document glyph, for the related-guide affordance on service pages. */
	--virgo-guide-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M13.5 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5L13.5 3Z%27/%3E%3Cpath d=%27M13.3 3.2v5.3H19%27/%3E%3Cpath d=%27M8.5 13h7M8.5 16.5h5%27/%3E%3C/svg%3E");

	/* ------------------------------------------------------------------
	   Elevation. Three levels only: flat, raised, overlay.
	   ------------------------------------------------------------------ */
	--elev-flat: none;
	--elev-raised: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px -24px rgba(0, 0, 0, 0.8);
	--elev-overlay: 0 28px 70px -30px rgba(0, 0, 0, 0.95);

	/* Stacking order lives in one place so no value is ever guessed. */
	--z-base: 1;
	--z-sticky: 40;
	--z-float: 90;
	--z-drawer: 95;
	--z-header: 100;
	--z-overlay: 120;
	--z-skip: 200;
}

/* Light bands: re-point the aliases rather than overriding each component. */
.virgo-band--light,
.virgo-band--tinted {
	--virgo-bg: var(--wp--preset--color--paper);
	--virgo-bg-raised: var(--wp--preset--color--paper-2);
	--virgo-bg-card: #ffffff;
	--virgo-bg-card-hover: #ffffff;
	--virgo-text: var(--wp--preset--color--ink);
	--virgo-text-muted: var(--wp--preset--color--ink-muted);
	--virgo-line: var(--wp--custom--line--light);
	--virgo-line-strong: var(--wp--custom--line--light-strong);
	--virgo-link: var(--wp--preset--color--violet-deep);
	--virgo-accent: var(--wp--preset--color--violet-deep);
	--virgo-focus: var(--wp--preset--color--violet-deep);
	/* #ec4899 on white is 3.53:1. #be185d keeps the magenta and clears AA at 6.04:1. */
	--virgo-link-hover: #be185d;
	--virgo-shadow: 0 2px 4px rgba(6, 6, 13, 0.05), 0 18px 44px -22px rgba(6, 6, 13, 0.18);
	--elev-raised: 0 1px 2px rgba(6, 6, 13, 0.05), 0 14px 34px -24px rgba(6, 6, 13, 0.22);
	--elev-overlay: 0 26px 64px -28px rgba(6, 6, 13, 0.32);
}

.virgo-band--tinted {
	--virgo-bg: var(--wp--preset--color--paper-2);
	--virgo-bg-raised: #ffffff;
}

/* -------------------------------------------------------------------------
   3. Reset / normalisation
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--virgo-shell-h) + 1.5rem);
	/* Never let a wide child scroll the whole document sideways. */
	overflow-x: clip;
}

body {
	margin: 0;
	min-height: 100vh;
	overflow-x: clip;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

svg {
	fill: currentColor;
}

/* Media inside the editor/content flow should not lose intrinsic ratio. */
.wp-block-image img,
.wp-block-post-featured-image img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

textarea {
	resize: vertical;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	border: 0;
	border-top: 1px solid var(--virgo-line);
	margin-block: var(--wp--preset--spacing--40);
}

:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

/* Long unbroken strings (URLs, IDs) must not force horizontal scroll. */
:where(p, li, h1, h2, h3, h4, h5, h6, dd, dt, figcaption, td, th) {
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
   4. Links and focus
   ---------------------------------------------------------------------- */

a {
	color: var(--virgo-link);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--virgo-transition), opacity var(--virgo-transition);
}

a:hover {
	color: var(--virgo-text);
}

/* Visible, consistent focus for every interactive element. */
:focus-visible {
	outline: 2px solid var(--virgo-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Remove the default outline only where :focus-visible is supported. */
:focus:not(:focus-visible) {
	outline: none;
}

.virgo-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	/* Above the header, which is the only thing it could ever land behind. */
	z-index: var(--z-skip);
	padding: 0.85rem 1.35rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 0 0 var(--virgo-radius-md) 0;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.virgo-skip-link:focus {
	left: 0;
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
   5. Selection, scrollbar, misc chrome
   ---------------------------------------------------------------------- */

::selection {
	background: rgba(139, 92, 246, 0.32);
	color: #fff;
}

.virgo-band--light ::selection,
.virgo-band--tinted ::selection {
	background: rgba(109, 40, 217, 0.18);
	color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------
   6. Utilities
   ---------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	margin: 0;
	white-space: normal;
}

/* Gradient text — used sparingly, on a single phrase within a heading. */
.virgo-gradient-text {
	background: var(--virgo-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Fallback for the rare engine that ignores background-clip:text. */
	-webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.virgo-gradient-text {
		color: var(--wp--preset--color--violet-soft);
		-webkit-text-fill-color: currentColor;
	}
}

.virgo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--virgo-text-muted);
	line-height: 1.4;
}

.virgo-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background: var(--virgo-brand-gradient);
	flex: none;
}

.virgo-lede {
	font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
	line-height: 1.65;
	color: var(--virgo-text-muted);
	max-width: 62ch;
}

.virgo-text-muted {
	color: var(--virgo-text-muted);
}

.virgo-center {
	margin-inline: auto;
	text-align: center;
}

.virgo-center .virgo-lede {
	margin-inline: auto;
}

.virgo-center .virgo-eyebrow::before {
	display: none;
}

/* -------------------------------------------------------------------------
   7. Motion
   ---------------------------------------------------------------------- */

.virgo-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 620ms cubic-bezier(0.2, 0.6, 0.3, 1), transform 620ms cubic-bezier(0.2, 0.6, 0.3, 1);
	will-change: opacity, transform;
}

.virgo-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Without JS, or before the observer runs, content must still be readable. */
.no-js .virgo-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.virgo-reveal {
		opacity: 1;
		transform: none;
	}
}