/**
 * Corevia — foundation stylesheet.
 *
 * Loaded on every request. Everything else is conditional.
 *
 * Two conventions make this file safe to sit underneath a page builder:
 *
 *   1. Element-level defaults are wrapped in `:where()`, which contributes ZERO
 *      specificity. A builder's own rule — even a single class — always wins,
 *      so nothing here ever has to be fought with `!important`.
 *   2. Theme components use the `corevia-` prefix and a single class selector.
 *      Nothing reaches into `.elementor-*`, `.brxe-*`, `.fl-*`, `.et_pb_*` or
 *      `.vc_*` namespaces.
 *
 * Authored with logical properties throughout so the whole sheet mirrors under
 * `dir="rtl"` without a parallel stylesheet.
 *
 * @package Corevia
 * @since   1.0.0
 */

/* corevia:tokens:start — generated by tools/build-css-vars.php, do not edit by hand */
:root {
	--theme-primary: #1e4fd8;
	--theme-primary-hover: #1a46be;
	--theme-primary-contrast: #ffffff;
	--theme-secondary: #0f172a;
	--theme-accent: #0e7490;
	--theme-accent-contrast: #ffffff;
	--theme-background: #ffffff;
	--theme-surface: #f5f7fa;
	--theme-text: #404750;
	--theme-heading: #0f172a;
	--theme-muted: #5c6473;
	--theme-border: #e3e6ec;
	--theme-success: #0f7b3f;
	--theme-warning: #9a5b06;
	--theme-error: #c02626;
	--theme-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", Arial, sans-serif;
	--theme-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans Arabic", Arial, sans-serif;
	--theme-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--theme-text-xs: clamp(0.78rem, 0.7638rem + 0.0722vw, 0.8288rem);
	--theme-text-sm: clamp(0.88rem, 0.8617rem + 0.0815vw, 0.935rem);
	--theme-text-base: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
	--theme-text-lg: clamp(1.12rem, 1.0896rem + 0.1352vw, 1.2113rem);
	--theme-text-xl: clamp(1.28rem, 1.2321rem + 0.213vw, 1.4238rem);
	--theme-h1: clamp(2.0555rem, 1.6598rem + 1.7586vw, 3.2425rem);
	--theme-h2: clamp(1.7796rem, 1.5082rem + 1.2065vw, 2.594rem);
	--theme-h3: clamp(1.5408rem, 1.3627rem + 0.7917vw, 2.0752rem);
	--theme-h4: clamp(1.334rem, 1.2253rem + 0.4832vw, 1.6602rem);
	--theme-h5: clamp(1.155rem, 1.0973rem + 0.2565vw, 1.3281rem);
	--theme-h6: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
	--theme-leading-body: 1.65;
	--theme-leading-heading: 1.2;
	--theme-leading-tight: 1.35;
	--theme-heading-weight: 700;
	--theme-tracking-heading: -0.011em;
	--theme-container: 75rem;
	--theme-content-width: 45rem;
	--theme-wide-width: 67.5rem;
	--theme-sidebar-width: 18.75rem;
	--theme-gutter: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);
	--theme-space-xs: clamp(0.5rem, 0.4167rem + 0.3704vw, 0.75rem);
	--theme-space-sm: clamp(0.75rem, 0.6667rem + 0.3704vw, 1rem);
	--theme-space-md: clamp(1.25rem, 1rem + 1.1111vw, 2rem);
	--theme-space-lg: clamp(2rem, 1.5rem + 2.2222vw, 3.5rem);
	--theme-space-xl: clamp(3rem, 2rem + 4.4444vw, 6rem);
	--theme-space-2xl: clamp(4.5rem, 3rem + 6.6667vw, 9rem);
	--theme-radius-sm: 0.25rem;
	--theme-radius-md: 0.5rem;
	--theme-radius-lg: 1rem;
	--theme-radius-full: 999px;
	--theme-border-width: 1px;
	--theme-shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.08);
	--theme-shadow-md: 0 4px 8px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.09);
	--theme-shadow-lg: 0 8px 20px rgba(15,23,42,0.08), 0 24px 48px rgba(15,23,42,0.12);
	--theme-transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
	--theme-focus-ring: 2px;
	--theme-focus-offset: 2px;
}
/* corevia:tokens:end */

/* ==========================================================================
   1. Reset
   ========================================================================== */

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

:where(html) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	tab-size: 4;

	/*
	 * Tells the browser which palette its own UI should use — form controls,
	 * scrollbars, spellcheck underlines, the canvas behind the page. Without
	 * it, a visitor whose OS is in dark mode gets light-on-light native
	 * widgets that the stylesheet cannot reach.
	 *
	 * `light` is the default because the shipped palette is light. When the
	 * Customizer's colour scheme is set to Dark or Follow system,
	 * corevia_color_scheme_css() overrides this inline along with the dark
	 * tokens, so the default path still costs nothing.
	 */
	color-scheme: light;
}

:where(body) {
	margin: 0;
	background-color: var(--theme-background);
	color: var(--theme-text);
	font-family: var(--theme-font-body);
	font-size: var(--theme-text-base);
	line-height: var(--theme-leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/*
	 * A pasted URL, a long slug or a German compound noun is a single
	 * unbreakable word to the line-breaker, and one of them is enough to push
	 * a whole page into horizontal scrolling on a phone. `break-word` only
	 * acts when the word would otherwise overflow, so ordinary prose is
	 * untouched. Inherited, so it also covers comments and widgets.
	 */
	overflow-wrap: break-word;
}

/* Media is block-level and never overflows its column. */
:where(img, picture, video, canvas, svg, iframe, embed, object) {
	display: block;
	max-width: 100%;
}

/*
 * Intrinsic sizing. WordPress emits width/height on every generated <img>, so
 * `height: auto` keeps the aspect ratio while the browser reserves the correct
 * box before the bytes arrive — which is what actually prevents CLS.
 */
:where(img, video) {
	height: auto;
}

:where(iframe, embed, object) {
	max-inline-size: 100%;
}

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

:where(textarea) {
	resize: vertical;
}

:where(hr) {
	border: 0;
	border-block-start: var(--theme-border-width) solid var(--theme-border);
	margin-block: var(--theme-space-lg);
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

:where(h1, h2, h3, h4, h5, h6) {
	margin-block: 0 var(--theme-space-sm);
	color: var(--theme-heading);
	font-family: var(--theme-font-heading);
	font-weight: var(--theme-heading-weight);
	line-height: var(--theme-leading-heading);
	letter-spacing: var(--theme-tracking-heading);
	text-wrap: balance;
}

:where(h1) { font-size: var(--theme-h1); }
:where(h2) { font-size: var(--theme-h2); }
:where(h3) { font-size: var(--theme-h3); }
:where(h4) { font-size: var(--theme-h4); }
:where(h5) { font-size: var(--theme-h5); }
:where(h6) { font-size: var(--theme-h6); }

:where(p, ul, ol, dl, table, pre, blockquote, figure, address) {
	margin-block: 0 var(--theme-space-md);
}

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

:where(a) {
	color: var(--theme-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

:where(a:hover) {
	color: var(--theme-primary-hover);
}

:where(strong, b) {
	font-weight: 600;
}

:where(small) {
	font-size: var(--theme-text-sm);
}

:where(code, kbd, samp, pre) {
	font-family: var(--theme-font-mono);
	font-size: 0.9em;
}

:where(code) {
	padding: 0.15em 0.4em;
	border-radius: var(--theme-radius-sm);
	background-color: var(--theme-surface);
	word-break: break-word;
}

:where(pre) {
	padding: var(--theme-space-md);
	border-radius: var(--theme-radius-md);
	background-color: var(--theme-surface);
	overflow-x: auto;
}

:where(pre code) {
	padding: 0;
	background: none;
}

:where(blockquote) {
	padding-inline-start: var(--theme-space-md);
	border-inline-start: 3px solid var(--theme-primary);
	color: var(--theme-heading);
	font-size: var(--theme-text-lg);
}

:where(ul, ol) {
	padding-inline-start: 1.35em;
}

:where(li) {
	margin-block-end: 0.35em;
}

:where(figcaption) {
	margin-block-start: var(--theme-space-xs);
	color: var(--theme-muted);
	font-size: var(--theme-text-sm);
}

:where(table) {
	inline-size: 100%;
	border-collapse: collapse;
}

:where(th, td) {
	padding: var(--theme-space-sm);
	border-block-end: var(--theme-border-width) solid var(--theme-border);
	text-align: start;
}

:where(th) {
	color: var(--theme-heading);
	font-weight: 600;
}

/* ==========================================================================
   3. Forms and buttons
   ========================================================================== */

:where(
	input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"]),
	textarea,
	select
) {
	inline-size: 100%;
	max-inline-size: 100%;
	padding: 0.6em 0.85em;
	border: var(--theme-border-width) solid var(--theme-border);
	border-radius: var(--theme-radius-sm);
	background-color: var(--theme-background);
	color: var(--theme-text);
	transition: border-color var(--theme-transition), box-shadow var(--theme-transition);
}

:where(input, textarea, select):focus {
	border-color: var(--theme-primary);
	outline: none;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 22%, transparent);
}

:where(label) {
	display: inline-block;
	margin-block-end: 0.35em;
	color: var(--theme-heading);
	font-size: var(--theme-text-sm);
	font-weight: 600;
}

:where(::placeholder) {
	color: var(--theme-muted);
	opacity: 1;
}

/*
 * Button styling is applied only to unstyled controls.
 *
 * Both halves of the selector are wrapped in `:where()`. That matters more than
 * it looks: `:where()` contributes zero specificity, but a bare `:not(.a):not(.b)`
 * chain contributes one class each. Written unwrapped, these five exclusions
 * would give the rule a specificity of (0,5,0) — higher than any single class —
 * and the theme's own components could no longer override it without a
 * specificity war. Wrapping the chain keeps the whole selector at (0,0,0).
 */
:where(
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	.wp-block-button__link,
	.corevia-button
):where(:not(.elementor-button, .brxe-button, .fl-button, .et_pb_button, .vc_btn3)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7em 1.5em;
	border: var(--theme-border-width) solid transparent;
	border-radius: var(--theme-radius-sm);
	background-color: var(--theme-primary);
	color: var(--theme-primary-contrast);
	font-size: var(--theme-text-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--theme-transition), color var(--theme-transition);
}

:where(
	button,
	input[type="submit"],
	.wp-block-button__link,
	.corevia-button
):where(:not(.elementor-button, .brxe-button, .fl-button, .et_pb_button, .vc_btn3)):hover {
	background-color: var(--theme-primary-hover);
	color: var(--theme-primary-contrast);
}

.corevia-button--ghost {
	border-color: var(--theme-border);
	background-color: transparent;
	color: var(--theme-heading);
}

.corevia-button--ghost:hover {
	border-color: var(--theme-primary);
	background-color: transparent;
	color: var(--theme-primary);
}

/*
 * Inline icons.
 *
 * Every glyph in the library is drawn with <line>, <polyline> and <circle> —
 * strokes, not filled shapes — so without `fill: none; stroke: currentColor`
 * they render as invisible black fills. And an <svg> carrying only a viewBox
 * has no intrinsic size, so it would otherwise fall back to the CSS default of
 * 300x150 or collapse to nothing depending on its container's display.
 *
 * Sizing in `em` ties each icon to the text it sits beside, so it scales with
 * the fluid type ramp without a second set of tokens. Components that need a
 * different size (the header toggle, the submenu caret) set their own.
 */
:where(.corevia-icon) {
	inline-size: 1em;
	block-size: 1em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.corevia-site {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	min-block-size: 100svh;
}

.corevia-site__main {
	flex: 1 0 auto;
}

.corevia-container {
	inline-size: 100%;
	max-inline-size: var(--corevia-container, var(--theme-container));
	margin-inline: auto;
	padding-inline: var(--theme-gutter);
}

.corevia-container--narrow {
	--corevia-container: var(--theme-content-width);
}

.corevia-container--wide {
	--corevia-container: var(--theme-wide-width);
}

/*
 * The content/sidebar split. Single column until there is room for both, at
 * which point it becomes a two-track grid. `min-inline-size: 0` stops long
 * words and wide tables from blowing the content track open.
 */
.corevia-layout {
	display: grid;
	gap: var(--theme-space-lg);
	padding-block: var(--theme-space-lg);
}

.corevia-layout__content {
	min-inline-size: 0;
}

@media (min-width: 62em) {
	.corevia-layout--sidebar-right,
	.corevia-layout--sidebar-left {
		grid-template-columns: minmax(0, 1fr) var(--theme-sidebar-width);
		gap: var(--theme-space-xl);
	}

	.corevia-layout--sidebar-left {
		grid-template-columns: var(--theme-sidebar-width) minmax(0, 1fr);
	}

	.corevia-layout--sidebar-left .corevia-layout__content {
		order: 2;
	}

	.corevia-layout--sidebar-left .corevia-sidebar {
		order: 1;
	}
}

/* ==========================================================================
   5. Content flow and block alignments
   ========================================================================== */

/*
 * `corevia-flow` is applied only to content the theme itself lays out. It is
 * deliberately absent when a page builder owns the document, so that a builder
 * section is never turned into a layout child of the theme.
 *
 * The alignment model is max-width plus auto margins, not a grid. A grid is the
 * tidier way to express the wide/full tracks, but `float` has no effect on a
 * grid item — so `alignleft` and `alignright`, which are still what the classic
 * editor emits and what most existing content contains, would stack instead of
 * letting text wrap around them. `flow-root` keeps floats working and contains
 * them without a clearfix.
 */
.corevia-flow {
	display: flow-root;
}

/* Everything sits at the reading measure and is centred in the column. */
.corevia-flow > * {
	margin-inline: auto;
	max-inline-size: var(--theme-content-width);
}

/* The alignments are the exceptions: they fill the column, or exceed it. */
.corevia-flow > .alignwide,
.corevia-flow > .alignfull {
	max-inline-size: none;
}

.corevia-layout--no-sidebar .corevia-flow > .alignwide {
	max-inline-size: var(--theme-wide-width);
}

/*
 * Float alignments still ship in classic editor content and in plenty of
 * migrated posts, so they have to actually work.
 */
.corevia-flow > .alignleft {
	float: inline-start;
	margin-inline: 0 var(--theme-space-md);
	margin-block-end: var(--theme-space-sm);
	max-inline-size: min(50%, 22rem);
}

.corevia-flow > .alignright {
	float: inline-end;
	margin-inline: var(--theme-space-md) 0;
	margin-block-end: var(--theme-space-sm);
	max-inline-size: min(50%, 22rem);
}

/* `float: inline-start` is recent; the physical values are the fallback. */
@supports not (float: inline-start) {
	.corevia-flow > .alignleft {
		float: left;
	}

	.corevia-flow > .alignright {
		float: right;
	}
}

.aligncenter {
	margin-inline: auto;
}

.corevia-flow > :last-child {
	margin-block-end: 0;
}

/* ==========================================================================
   6. Accessibility
   ========================================================================== */

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

/*
 * The skip link is the one component that must escape its stacking context and
 * outrank anything a builder places at the top of the page, so it is also the
 * only place in the theme where `!important` is justified.
 */
.corevia-skip-link {
	position: absolute;
	inset-block-start: -100%;
	inset-inline-start: var(--theme-space-sm);
	z-index: 100000;
	padding: 0.75em 1.25em;
	border-radius: 0 0 var(--theme-radius-sm) var(--theme-radius-sm);
	background-color: var(--theme-primary);
	color: var(--theme-primary-contrast);
	font-size: var(--theme-text-sm);
	font-weight: 600;
	text-decoration: none;
}

.corevia-skip-link:focus {
	inset-block-start: 0;
	color: var(--theme-primary-contrast);
	outline: var(--theme-focus-ring) solid var(--theme-primary-contrast);
	outline-offset: calc(var(--theme-focus-offset) * -1);
}

/*
 * A single, consistent focus indicator. `:focus-visible` means it appears for
 * keyboard and assistive-technology users without decorating mouse clicks.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--theme-focus-ring) solid var(--theme-primary);
	outline-offset: var(--theme-focus-offset);
	border-radius: var(--theme-radius-sm);
}

/* Never leave a keyboard user without any indicator at all. */
@supports not selector(:focus-visible) {
	:where(a, button, input, select, textarea, summary, [tabindex]):focus {
		outline: var(--theme-focus-ring) solid var(--theme-primary);
		outline-offset: var(--theme-focus-offset);
	}
}

@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;
	}
}

@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

/* Anchored headings clear a builder's sticky header without JavaScript. */
:where(:target) {
	scroll-margin-block-start: var(--theme-space-xl);
}

/* ==========================================================================
   7. Utilities
   ========================================================================== */

.corevia-stack > * + * {
	margin-block-start: var(--theme-space-md);
}

.corevia-surface {
	background-color: var(--theme-surface);
}

[hidden] {
	display: none;
}