/*
 * Ruppert brand tokens — the CSS mirror of the Elementor kit seeded by inc/elementor-globals.php.
 * Change a value in BOTH places (or only the kit, for Elementor-only styling).
 */
:root {
	/* Colour — kit system slots */
	--ruppert-navy: #071540;        /* primary */
	--ruppert-gold: #BFA145;        /* secondary — decorative only: fails contrast as small text on light */
	--ruppert-body: #45464F;        /* text */
	--ruppert-gold-text: #735C00;   /* accent — gold that passes AA as text on light surfaces */

	/* Colour — kit custom slots */
	--ruppert-ink: #161C23;
	--ruppert-parchment: #FBFBF9;
	--ruppert-cream: #F7F5F0;
	--ruppert-stone: #F3F1EC;
	--ruppert-slate: #5F646A;       /* muted text: 5.5:1 on cream (#70757A failed AA at 4.3:1) */
	--ruppert-mist: #DDE3EC;
	--ruppert-white: #FFFFFF;

	/* Type */
	--ruppert-font-head: "Playfair Display", Georgia, "Times New Roman", serif;
	--ruppert-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Space (the Stitch design's scale) */
	--ruppert-space-xxs: .25rem;
	--ruppert-space-xs: .5rem;
	--ruppert-space-sm: .75rem;
	--ruppert-space-md: 1rem;
	--ruppert-space-lg: 1.5rem;
	--ruppert-space-xl: 2rem;
	--ruppert-space-2xl: 3rem;
	--ruppert-space-3xl: 4.5rem;
	--ruppert-space-4xl: 6.5rem;

	--ruppert-container: 1280px;
}

/*
 * Low-specificity base so non-Elementor output (blog posts, archives, plugin markup)
 * is on-brand too — Elementor's kit only styles Elementor widgets.
 */
body {
	background: var(--ruppert-parchment);
	color: var(--ruppert-body);
	font-family: var(--ruppert-font-body);
	font-size: 1rem;
	line-height: 1.625;
	-webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) {
	color: var(--ruppert-navy);
	font-family: var(--ruppert-font-head);
	font-weight: 400;
	line-height: 1.1;
	text-wrap: balance;
}

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

:where(a) {
	color: var(--ruppert-navy);
	text-underline-offset: .2em;
}

:where(a:focus-visible) {
	color: var(--ruppert-gold-text);
}

/* X3: hover lives in its own rule, gated to real pointer-hover devices — a tap simulates :hover on plenty of
   touch browsers with no pointer-leave event ever clearing it, so an ungated rule "sticks" until the next tap
   elsewhere. :focus-visible above stays ungated; keyboard focus is not a hover-capability question. */
@media (hover: hover) {
	:where(a:hover) {
		color: var(--ruppert-gold-text);
	}
}

/* Focus: navy ring on light surfaces, gold ring on navy ones — both ≥ 3:1 (gold on parchment is 2.4:1). */
:where(:focus-visible) {
	outline: 2px solid var(--ruppert-navy);
	outline-offset: 3px;
}

:where(.ruppert-dark, footer) :where(:focus-visible) {
	outline-color: var(--ruppert-gold);
}

::selection {
	background: var(--ruppert-gold);
	color: var(--ruppert-navy);
}

/*
 * The kit's global link colour would swallow inline tel:/mailto: links on navy sections
 * (E-Lego seed-first lesson; Optimized Markup has no .elementor-widget-container). Add class "ruppert-dark" to any dark container.
 */
.ruppert-dark .elementor-widget-text-editor a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(191, 161, 69, .6);
	text-underline-offset: .2em;
}

/* Square corners are part of the brand. */
.elementor-button,
.elementor-field-group .elementor-field,
.elementor-field-group .elementor-select-wrapper select {
	border-radius: 0;
}

/* Text widgets: paragraphs space each other, never their container — container gaps own that spacing.
   (Browser-default 1em top+bottom margins added ~32px to every block; design-critic parity finding.) */
.elementor-widget-text-editor > :first-child {
	margin-top: 0;
}

.elementor-widget-text-editor > :last-child {
	margin-bottom: 0;
}

.elementor-widget-text-editor p {
	margin-block: 0 1em;
}

/* Entrance motion: a 16px rise in .6s on the design's ease. Elementor's fadeInUp slides by the element's own height
   (100%) over 1.25s; a class-scoped animation-name wins regardless of which stylesheet loads last. */
@keyframes ruppert-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.elementor-element.animated.fadeInUp {
	animation-name: ruppert-rise;
	animation-duration: .6s;
	animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* F1: Elementor holds a not-yet-animated element with `.elementor-invisible{visibility:hidden}` until it
   scrolls into view — `visibility:hidden` also drops it from the Tab order, so every control in a below-the-
   fold section (the whole form on /contact; 38 controls on home) was unreachable by keyboard until a sighted
   scroll triggered the reveal. Hold it with opacity instead — invisible to the eye, still tabbable — and
   reveal instantly the moment focus lands inside, rather than waiting on the scroll-triggered animation.
   `!important` on visibility: this stylesheet already enqueues after Elementor's (functions.php, priority 20),
   so plain specificity should already win here; kept as a belt-and-braces override on an accessibility-critical
   rule. `animation: none` on the second rule stops `ruppert-rise` re-running (and flashing back to opacity 0)
   if Elementor's own scroll-triggered reveal fires while focus is still inside. */
.elementor-invisible {
	visibility: visible !important;
	opacity: 0;
}

.elementor-invisible:focus-within {
	opacity: 1;
}

.animated.fadeInUp:focus-within {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		opacity: 1;
	}

	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}