/*
 * Sitevari core: base styles for builder output. Token values come from the
 * inline :root block generated by Sitevari\Rendering\TokensCss.
 * Logical properties only (RTL by construction).
 */

/*
 * The page's own text colors, kept so light cards inside dark areas can restore them. A dark website
 * (ADR 0071) tells the browser, so its own parts (scroll bars, form fields) are dark too.
 */
:root {
	color-scheme: var(--sv-color-scheme, light);
	--sv-ink: var(--sv-color-text);
	--sv-ink-muted: var(--sv-color-muted);
	--sv-ink-border: var(--sv-color-border);
}

/*
 * Arabic-script languages (Persian, Arabic, Pashto, Urdu…), ADR 0021: letters
 * join, so no letter-spacing and no capitals; tall letters and dots need more
 * line height; no fake (synthesized) italics. Widgets read these variables:
 * letter-spacing: calc(<em> * var(--sv-tracking, 1)), text-transform:
 * var(--sv-uppercase, uppercase), line-height: calc(<n> * var(--sv-leading, 1)).
 */
:where(:lang(fa), :lang(ar), :lang(ps), :lang(ur), :lang(ckb), :lang(sd), :lang(ug), :lang(azb), :lang(haz), :lang(ary), :lang(arq)) {
	--sv-tracking: 0;
	--sv-uppercase: none;
	--sv-leading: 1.28;
	--sv-leading-body: 1.12;
	font-synthesis-style: none;
}

.sv-page {
	color: var(--sv-color-text);
	font-family: var(--sv-font-body);
	font-size: var(--sv-size-body);
	line-height: calc(1.6 * var(--sv-leading-body, 1));
}

/*
 * Lines that read well (ADR 0102): headings share their words evenly between their lines (no single word
 * left on the last one) and paragraphs avoid a lone last word. Not a heading with changing words, whose
 * width changes as they change. Zero specificity: a widget's own choice wins.
 */
:where(.sv-page :is(h1, h2, h3, h4, h5, h6):not(:has(.sv-mark--words))) {
	text-wrap: balance;
}

:where(.sv-page :is(p, li, blockquote, figcaption, dd)) {
	text-wrap: pretty;
}

/*
 * Keyboard focus (ADR 0102): a ring in the text color of the area it is in, which always reads on that
 * area's background (light pages, dark and colored sections, cards, custom colors). --sv-focus can set
 * another. Widgets use the same color for their own rings; whatever the theme, Sitevari content has one.
 */
:where(.sv-page :focus-visible) {
	outline: 2px solid var(--sv-focus, var(--sv-color-text));
	outline-offset: 2px;
}

/*
 * Icons that point along the line (arrows, chevrons, reply…) mirror on
 * right-to-left pages. Media controls (play) keep their direction.
 */
:where([dir="rtl"]) :where(
	.sv-glyph-arrow-right, .sv-glyph-arrow-left, .sv-glyph-arrow-up-right, .sv-glyph-arrow-up-left,
	.sv-glyph-arrow-down-right, .sv-glyph-arrow-down-left, .sv-glyph-arrow-big-right, .sv-glyph-arrow-big-left,
	.sv-glyph-arrow-right-to-line, .sv-glyph-arrow-left-to-line, .sv-glyph-arrow-right-from-line, .sv-glyph-arrow-left-from-line,
	.sv-glyph-circle-arrow-right, .sv-glyph-circle-arrow-left, .sv-glyph-square-arrow-right, .sv-glyph-square-arrow-left,
	.sv-glyph-move-right, .sv-glyph-move-left, .sv-glyph-chevron-right, .sv-glyph-chevron-left,
	.sv-glyph-chevrons-right, .sv-glyph-chevrons-left, .sv-glyph-circle-chevron-right, .sv-glyph-circle-chevron-left,
	.sv-glyph-square-chevron-right, .sv-glyph-square-chevron-left, .sv-glyph-corner-down-right, .sv-glyph-corner-down-left,
	.sv-glyph-corner-up-right, .sv-glyph-corner-up-left, .sv-glyph-undo, .sv-glyph-redo, .sv-glyph-undo-2, .sv-glyph-redo-2,
	.sv-glyph-reply, .sv-glyph-reply-all, .sv-glyph-forward, .sv-glyph-send, .sv-glyph-send-horizontal,
	.sv-glyph-log-in, .sv-glyph-log-out, .sv-glyph-external-link, .sv-glyph-trending-up, .sv-glyph-trending-down,
	.sv-glyph-list, .sv-glyph-quote, .sv-glyph-text-quote, .sv-glyph-list-indent-increase, .sv-glyph-list-indent-decrease
) {
	transform: scaleX(-1);
}

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

/* Resets have zero specificity so any widget style (e.g. a fixed-size avatar) wins. */
:where(.sv-page img) {
	max-inline-size: 100%;
	block-size: auto;
}

/*
 * Dark areas — a Dark section background or a photo with the dark layer —
 * switch the text colors and the accent (numbers, icons, small labels, links)
 * to light for everything inside, as dark columns do (zero specificity).
 * --sv-accent-dark is the theme color for elements that keep it on dark
 * backgrounds (Numbers, ADR 0030); main-color and accent-color areas never do.
 */
:where(.sv-bg-inverse, .sv-section:has(> .sv-section__bg--dark)) {
	--sv-color-text: var(--sv-color-on-inverse);
	--sv-color-muted: color-mix(in srgb, var(--sv-color-on-inverse) 76%, transparent);
	/* Lines and dividers stay soft on dark (ADR 0107). */
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-inverse) 12%, transparent);
	--sv-accent: var(--sv-color-on-inverse);
	--sv-accent-dark: var(--sv-color-primary);
	color: var(--sv-color-text);
}

/* Main-color and accent-color sections: text and accents in the color made for them. */
:where(.sv-section.sv-bg-primary) {
	--sv-color-text: var(--sv-color-on-primary);
	--sv-color-muted: var(--sv-color-on-primary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-primary) 25%, transparent);
	--sv-accent: var(--sv-color-on-primary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-primary);
	--sv-button-main-text: var(--sv-color-primary);
	color: var(--sv-color-text);
}

:where(.sv-section.sv-bg-secondary) {
	--sv-color-text: var(--sv-color-on-secondary);
	--sv-color-muted: var(--sv-color-on-secondary);
	--sv-color-border: color-mix(in srgb, var(--sv-color-on-secondary) 25%, transparent);
	--sv-accent: var(--sv-color-on-secondary);
	--sv-accent-dark: initial;
	--sv-button-main-bg: var(--sv-color-on-secondary);
	--sv-button-main-text: var(--sv-color-secondary);
	color: var(--sv-color-text);
}

/*
 * Light cards (Services "Soft"/"Light", FAQ and Testimonial cards…) restore the
 * page's text colors in their own CSS: --sv-color-text: var(--sv-ink), etc.
 */

/*
 * Heading and description above a ready-made section's items (Services,
 * Testimonials, FAQ — ADR 0025). The widgets are grids: the heading spans all
 * their columns. Aligned by its own choice, whatever the cards' alignment.
 */
/*
 * Inline text in headings (ADR 0083): words with a color or weight of their own, and small pictures at the
 * text's height — square, slightly rounded, a pill or a circle. Not text-transform or size: only looks.
 */
.sv-mark--c-text { color: var(--sv-color-text); }
.sv-mark--c-soft { color: var(--sv-color-muted); }
.sv-mark--c-accent { color: var(--sv-accent, var(--sv-color-link)); }
.sv-mark--c-white { color: #fff; }
.sv-mark--c-custom { color: var(--sv-mark-color); }

/*
 * Gradient words (ADR 0105): one of the site's gradients through the letters, always across the words in the
 * reading direction (each line its own, so a wrapped phrase keeps every color). Where clipping to text isn't
 * supported, the words keep the heading's color.
 */
:where(:root) { --sv-text-angle: 90deg; }
:where(:root[dir="rtl"]) { --sv-text-angle: 270deg; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.sv-mark--c-gradient {
		/* Leaning letters (italic, display fonts) reach past the words' box: the gradient covers them too. */
		margin-inline: -0.2em;
		padding-inline: 0.2em;
		padding-block: 0.1em;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
		background-image: var(--sv-mark-gradient);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}
.sv-mark--w-light { font-weight: 300; }
.sv-mark--w-normal { font-weight: 400; }
.sv-mark--w-medium { font-weight: 500; }
.sv-mark--w-semibold { font-weight: 600; }
.sv-mark--w-bold { font-weight: 700; }
/*
 * The Emphasis font (ADR 0090): the site's chosen one (Site settings → Fonts), italic unless chosen upright.
 * Italic, and a font of its own (ADR 0089): the site's two here; an older collection font gets its rule on
 * pages that use it.
 */
.sv-mark--f-emphasis { font-family: var(--sv-font-emphasis, Georgia, serif); font-style: var(--sv-font-emphasis-style, italic); }
.sv-mark--i { font-style: italic; }
.sv-mark--f-heading { font-family: var(--sv-font-heading); }
.sv-mark--f-body { font-family: var(--sv-font-body); }

/*
 * Changing words (ADR 0100), as words.js builds them on visitors' pages: the words lie on each other in a box as
 * wide as the shown ones (its width eases); the next slides up from below (or fades in) as the shown ones leave
 * upwards. Typing: a blinking caret after the typed letters. The first words stay for screen readers.
 */
.sv-words__box {
	display: inline-grid;
	justify-items: start;
	vertical-align: bottom;
	overflow-x: clip;
	transition: inline-size 0.45s ease;
}

.sv-words__word {
	grid-area: 1 / 1;
	white-space: nowrap;
	opacity: 0;
	translate: 0 0.45em;
	transition: opacity 0.45s ease, translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sv-words__word.is-on { opacity: 1; translate: 0 0; }
.sv-words__word.is-off { opacity: 0; translate: 0 -0.45em; }
.sv-mark--words-fade .sv-words__word { translate: none; }

.sv-words__typed::after {
	display: inline-block;
	inline-size: 0.06em;
	block-size: 0.9em;
	margin-inline-start: 0.05em;
	background: currentcolor;
	vertical-align: -0.08em;
	content: "";
	animation: sv-words-caret 1s steps(1) infinite;
}

@keyframes sv-words-caret {
	50% { opacity: 0; }
}

.sv-words__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Linked words keep their color (the heading's, or the one chosen) with a quiet underline that thickens when pointed at. */
a.sv-mark:not([class*="sv-mark--c-"]) { color: inherit; }

a.sv-mark {
	text-decoration-line: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.14em;
	transition: text-decoration-thickness 0.2s ease;
}

a.sv-mark:hover { text-decoration-thickness: 0.1em; }

.sv-inline-img {
	display: inline-block;
	block-size: 0.82em;
	inline-size: auto;
	max-inline-size: 3em;
	margin-inline: 0.12em;
	vertical-align: -0.06em;
	object-fit: cover;
}

.sv-inline-img--rounded { border-radius: 0.18em; }
.sv-inline-img--pill { inline-size: 1.8em; border-radius: 999px; }
.sv-inline-img--circle { inline-size: 0.82em; border-radius: 50%; }

.sv-sectionhead {
	display: grid;
	grid-column: 1 / -1;
	gap: 0.6rem;
	inline-size: 100%;
	max-inline-size: 46rem;
	margin-block-end: var(--sv-space-sm);
}

.sv-sectionhead--start {
	justify-self: start;
	text-align: start;
}

.sv-sectionhead--center {
	justify-self: center;
	text-align: center;
}

.sv-sectionhead--end {
	justify-self: end;
	text-align: end;
}

/*
 * Titles in the heading font follow the site's heading weight and letter spacing (ADR 0036). A font
 * without that weight shows its own nearest one: never a faked (synthesized) bold, which smears a
 * single-weight font such as DM Serif Display.
 */
.sv-sectionhead__title {
	margin: 0;
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	font-size: var(--sv-size-h2);
	line-height: calc(1.15 * var(--sv-leading, 1));
}

/* Heading size of a ready-made section's heading (ADR 0052): Medium is a Heading 2's size. */
.sv-sectionhead--size-sm .sv-sectionhead__title {
	font-size: var(--sv-size-h3);
	line-height: calc(1.2 * var(--sv-leading, 1));
}

.sv-sectionhead--size-lg .sv-sectionhead__title {
	font-size: var(--sv-size-h1);
	line-height: calc(1.1 * var(--sv-leading, 1));
}

.sv-sectionhead--size-xl .sv-sectionhead__title {
	font-size: var(--sv-size-display);
	line-height: calc(1.05 * var(--sv-leading, 1));
}

.sv-sectionhead__text {
	margin: 0;
	color: var(--sv-color-muted);
	font-size: calc(var(--sv-size-body) * 1.08);
}