/**
 * Seyleniya Cinnamon - base layer.
 *
 * Reset, typography, layout primitives and accessibility defaults.
 * Mobile-first: any media query here is min-width only.
 */

/* ------------------------------------------------------------------
 * 1. Reset
 * --------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;

	/*
	 * A net against sideways panning, not a fix - anything that overflows is a
	 * bug to be found, and one was: the header row did not fit a 320px phone,
	 * which put the menu toggle off the right edge.
	 *
	 * `clip`, not `hidden`. `overflow-x: hidden` makes the element a scroll
	 * container, and that breaks `position: sticky` on descendants - which
	 * silently disabled the sticky header for as long as it was on `body`.
	 */
	overflow-x: clip;
	/* Anchor targets must clear the sticky header, and the admin bar with it. */
	scroll-padding-top: calc(var(--sy-header-height) + var(--sy-sticky-top, 0px) + var(--sy-space-md));
}

body {
	margin: 0;
	background-color: var(--sy-ground-base);
	color: var(--sy-text);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-base);
	line-height: var(--sy-leading-body);
	font-weight: var(--sy-weight-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

img {
	height: auto;
}

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

button {
	cursor: pointer;
}

/* ------------------------------------------------------------------
 * 2. Typography (blueprint §6)
 *
 * Cormorant Garamond carries the editorial voice. Inter carries anything
 * the reader has to operate.
 * --------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.sy-display {
	margin: 0 0 var(--sy-space-md);
	font-family: var(--sy-font-display);
	font-weight: var(--sy-weight-regular);
	line-height: var(--sy-leading-display);
	letter-spacing: var(--sy-tracking-display);
	color: var(--sy-text);
	text-wrap: balance;
}

h1 {
	font-size: var(--sy-display-lg);
	line-height: var(--sy-leading-tight);
}

h2 {
	font-size: var(--sy-display-md);
}

h3 {
	font-size: var(--sy-display-sm);
}

h4 {
	font-size: var(--sy-text-xl);
}

h5,
h6 {
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-sm);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
}

p {
	margin: 0 0 var(--sy-space-md);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

/* Editorial lead paragraph - the supporting line under a hero or section title. */
.sy-lead {
	max-width: 46ch;
	font-size: var(--sy-text-lg);
	line-height: var(--sy-leading-snug);
	color: var(--sy-ink-80);
}

.sy-measure {
	max-width: 62ch;
}

/* The small uppercase label above a heading. Deliberately a <p>, not a
 * heading - it must not enter the document outline (§45). */
.sy-eyebrow {
	margin: 0 0 var(--sy-space-sm);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-accent-strong);
}

a {
	color: inherit;
	text-decoration-color: var(--sy-rule-strong);
	text-underline-offset: 0.22em;
	transition: color var(--sy-duration-fast) var(--sy-ease),
		text-decoration-color var(--sy-duration-fast) var(--sy-ease);
}

a:hover {
	color: var(--sy-accent-strong);
	text-decoration-color: currentColor;
}

strong,
b {
	font-weight: var(--sy-weight-semibold);
}

blockquote {
	margin: var(--sy-space-lg) 0;
	padding-left: var(--sy-space-md);
	border-left: 2px solid var(--sy-accent);
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-xl);
	line-height: var(--sy-leading-snug);
}

hr {
	height: 0;
	margin: var(--sy-space-xl) 0;
	border: 0;
	border-top: var(--sy-border);
}

ul,
ol {
	margin: 0 0 var(--sy-space-md);
	padding-left: 1.25em;
}

li + li {
	margin-top: var(--sy-space-2xs);
}

/* ------------------------------------------------------------------
 * 3. Layout primitives
 * --------------------------------------------------------------- */

.sy-container {
	width: 100%;
	max-width: var(--sy-container);
	margin-inline: auto;
	padding-inline: var(--sy-gutter);
}

.sy-container--narrow {
	max-width: var(--sy-container-narrow);
}

.sy-container--wide {
	max-width: var(--sy-container-wide);
}

.sy-container--flush {
	padding-inline: 0;
}

/*
 * The fallbacks are the design system's spacing, so a section with nothing set
 * is unchanged. --sy-section-pt / --sy-section-pb arrive as an inline style
 * from sy_section_spacing_style() when somebody sets a value.
 */
.sy-section {
	position: relative;
	padding-block: var(--sy-section-pt, var(--sy-section-y))
		var(--sy-section-pb, var(--sy-section-y));
}

/*
 * The tight variant has to consume them too. Left as a bare
 * `padding-block: var(--sy-section-y-tight)` it would simply beat the inline
 * properties, and an explicit setting would be ignored on exactly the sections
 * somebody is most likely to be adjusting.
 */
.sy-section--tight {
	padding-block: var(--sy-section-pt, var(--sy-section-y-tight))
		var(--sy-section-pb, var(--sy-section-y-tight));
}

/* Section grounds. Alternating these is what stops the page reading as one
 * long uniform column (§63). */
.sy-section--ground-cream {
	background-color: var(--sy-ground-base);
}

.sy-section--ground-white {
	background-color: var(--sy-ground-raised);
}

.sy-section--ground-black {
	background-color: var(--sy-ground-inverse);
	color: var(--sy-ground-inverse-text);
}

.sy-section--ground-black h1,
.sy-section--ground-black h2,
.sy-section--ground-black h3,
.sy-section--ground-black h4 {
	color: var(--sy-ground-inverse-text);
}

.sy-section--ground-black .sy-lead {
	color: var(--sy-cream-56);
}

.sy-section__header {
	max-width: var(--sy-container-narrow);
	margin-bottom: var(--sy-space-xl);
}

.sy-section__header--centred {
	margin-inline: auto;
	text-align: center;
}

/* Simple auto-fitting grid used by feature, product and journal sections. */
.sy-grid {
	display: grid;
	gap: var(--sy-grid-gap);
	grid-template-columns: minmax(0, 1fr);
}

/* Editorial split - image one side, copy the other. Stacks on mobile. */
.sy-split {
	display: grid;
	gap: var(--sy-grid-gap);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------------
 * 4. Accessibility (blueprint §45)
 * --------------------------------------------------------------- */

.sy-skip-link {
	position: absolute;
	top: var(--sy-space-2xs);
	left: var(--sy-space-2xs);
	z-index: var(--sy-z-skip);
	padding: var(--sy-space-2xs) var(--sy-space-sm);
	background: var(--sy-ground-inverse);
	color: var(--sy-text-inverse);
	font-size: var(--sy-text-sm);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--sy-duration-fast) var(--sy-ease);
}

.sy-skip-link:focus {
	transform: translateY(0);
	color: var(--sy-text-inverse);
}

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

/*
 * A single visible focus treatment for the whole site. Two rings - a dark
 * inner and a light outer - so it stays visible on cream, white, taupe and
 * black grounds alike.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sy-focus);
	outline-offset: 2px;
	border-radius: var(--sy-radius-sm);
	box-shadow: 0 0 0 4px var(--sy-white-80);
}

.sy-section--ground-black :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--sy-ground-inverse-text);
	box-shadow: 0 0 0 4px var(--sy-ink-80);
}

/* ------------------------------------------------------------------
 * 5. Motion (blueprint §34)
 *
 * Scroll reveal is opt-in per element via [data-sy-reveal]. It starts
 * hidden ONLY once JS confirms it can run - so with JS disabled, or before
 * the script loads, all content is visible. Progressive enhancement (§45).
 * --------------------------------------------------------------- */

.sy-js [data-sy-reveal] {
	opacity: 0;
	transform: translateY(var(--sy-reveal-distance));
	transition: opacity var(--sy-duration-slow) var(--sy-ease-out),
		transform var(--sy-duration-slow) var(--sy-ease-out);
	will-change: opacity, transform;
}

.sy-js [data-sy-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/*
 * Inside the Elementor editor, never hide anything.
 *
 * Elementor re-renders a widget after every settings change. The reveal
 * observer only watches elements that existed at load, so a section you had
 * just edited faded to zero and stayed there - the code was correct and the
 * editing experience looked broken. site.js re-runs the reveal for inserted
 * content, and this makes sure nothing is invisible even for the moment
 * before that happens.
 */
.elementor-editor-active .sy-js [data-sy-reveal],
.sy-js .elementor-editor-active [data-sy-reveal],
body.elementor-editor-active [data-sy-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

/*
 * The one global motion opt-out. Zeroing the duration tokens switches off
 * every transition in the theme, and the reveal state is forced visible so
 * nothing can be left hidden.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--sy-duration-fast: 0.01ms;
		--sy-duration: 0.01ms;
		--sy-duration-slow: 0.01ms;
		--sy-reveal-distance: 0;
	}

	html {
		scroll-behavior: auto;
	}

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

	.sy-js [data-sy-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * 6. Print
 * --------------------------------------------------------------- */

@media print {
	.sy-header,
	.sy-announcement,
	.sy-footer,
	.sy-skip-link {
		display: none;
	}

	body {
		background: var(--sy-ground-raised);
		color: var(--sy-text);
	}

	/* Placeholders must stay obvious on a printed proof - that is the one
	 * document where the business reviews what is still missing. */
	.sy-placeholder {
		border: 1px solid var(--sy-black);
	}
}