/*
 * Blue Sky Plumbing: base and typography
 *
 * Global rules that apply everywhere. Archetype-specific CSS belongs in its own
 * file, not here. Everything references tokens.css; no raw hex.
 */

/* ---------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------ */

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
	color: var(--slate);
	background-color: var(--paper);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	color: var(--ink);
	text-wrap: balance;
}

h1 {
	font-weight: 900;
	font-size: var(--fs-h1);
	line-height: 0.95;
	letter-spacing: -0.035em;
}

h2 {
	font-weight: 800;
	font-size: var(--fs-h2);
	line-height: 1.02;
	letter-spacing: -0.03em;
}

h3 {
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: 1.15;
	letter-spacing: -0.015em;
}

/* Body copy stays readable. Applied to prose containers, not to layout wrappers. */
.bs-prose p {
	max-width: var(--measure);
}

/* Section eyebrow: small, wide-tracked, sky. */
.bs-eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--sky);
}

/* Oversized index numeral used by the split bands. */
.bs-numeral {
	font-family: var(--font-display);
	font-weight: 900;
	font-size: var(--fs-numeral);
	line-height: 0.8;
	color: var(--sky);
	opacity: 0.11;
	pointer-events: none;
	user-select: none;
}

.bs-numeral--on-dark {
	color: var(--paper);
	opacity: 0.08;
}

/* ---------------------------------------------------------------------------
 * Inverted sections
 *
 * Any container on a dark ground gets this class so descendants flip without
 * each widget needing its own color override in Elementor.
 * ------------------------------------------------------------------------ */

.bs-invert,
.bs-invert h1,
.bs-invert h2,
.bs-invert h3,
.bs-invert h4 {
	color: var(--paper);
}

.bs-invert p,
.bs-invert li {
	color: rgba(255, 255, 255, 0.78);
}

/* ---------------------------------------------------------------------------
 * Corners
 *
 * Sharp is a deliberate part of the look. Hello Elementor and Elementor's own
 * defaults round several things; this resets them. Radius survives only on
 * buttons and pills.
 * ------------------------------------------------------------------------ */

img,
figure,
.e-con,
.elementor-widget-image img,
.elementor-widget-container {
	border-radius: 0;
}

.bs-pill {
	border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------------------------
 * Buttons
 *
 * Per the rendered Lovable mockup, which wins over the written brief here:
 * primary is sky with white text, secondary is midnight with white text.
 * Sunbeam is NOT a button color.
 * ------------------------------------------------------------------------ */

.bs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem; /* 15px */
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: var(--radius-button);
	padding: 0.875rem 1.5rem;
	border: 1.5px solid transparent;
	transition:
		background-color var(--dur-hover) ease-out,
		transform var(--dur-hover) ease-out,
		color var(--dur-hover) ease-out;
}

.bs-btn:hover {
	transform: translateY(-2px);
}

.bs-btn--primary {
	background-color: var(--sky);
	color: var(--paper);
}

.bs-btn--primary:hover {
	background-color: var(--sky-deep);
	color: var(--paper);
}

.bs-btn--secondary {
	background-color: var(--midnight);
	color: var(--paper);
}

.bs-btn--secondary:hover {
	background-color: var(--sky-deep);
}

/* Ghost sits on dark grounds, so its border is white rather than midnight. */
.bs-btn--ghost {
	background-color: transparent;
	color: var(--paper);
	border-color: rgba(255, 255, 255, 0.5);
}

.bs-btn--ghost:hover {
	border-color: var(--paper);
	background-color: rgba(255, 255, 255, 0.08);
}

/* Emergency only. Never use for a non-emergency action. */
.bs-btn--emergency {
	background-color: var(--siren);
	color: var(--paper);
}

/* ---------------------------------------------------------------------------
 * Full-bleed bands
 *
 * Bands span the viewport; only the text inside them is constrained. Elementor
 * containers inherit padding that creates a hairline gutter at the edge, which
 * this clears.
 * ------------------------------------------------------------------------ */

.bs-band {
	width: 100%;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.bs-band__copy {
	max-width: var(--copy-max);
	padding: var(--space-gutter);
}

/* ---------------------------------------------------------------------------
 * Motion
 *
 * Reveal once on scroll, never repeating. The .is-visible class is added by the
 * intersection observer shipped in milestone 3.
 * ------------------------------------------------------------------------ */

.bs-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--dur-reveal) var(--ease-reveal),
		transform var(--dur-reveal) var(--ease-reveal);
}

.bs-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.bs-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.bs-btn:hover {
		transform: none;
	}

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

/* ---------------------------------------------------------------------------
 * Elementor button overrides
 *
 * Elementor's own .elementor-button rules and the kit's accent color both beat
 * a plain .bs-btn class. These selectors reassert the mockup's button spec:
 * primary is sky with white text, never the kit accent (sunbeam), which is
 * reserved for review stars.
 * ------------------------------------------------------------------------ */

.bs-btn--primary .elementor-button,
.elementor-widget-button.bs-btn--primary .elementor-button {
	background-color: var(--sky);
	color: var(--paper);
	border-radius: var(--radius-button);
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background-color var(--dur-hover) ease-out, transform var(--dur-hover) ease-out;
}

.bs-btn--primary .elementor-button:hover {
	background-color: var(--sky-deep);
	color: var(--paper);
	transform: translateY(-2px);
}

.bs-btn--ghost .elementor-button,
.elementor-widget-button.bs-btn--ghost .elementor-button {
	background-color: transparent;
	color: var(--paper);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--radius-button);
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bs-btn--ghost .elementor-button:hover {
	border-color: var(--paper);
	background-color: rgba(255, 255, 255, 0.08);
	transform: translateY(-2px);
}

/* Headings inside an inverted band must not inherit the kit's ink color. */
.bs-invert .elementor-heading-title,
.bs-invert .elementor-widget-text-editor,
.bs-invert .elementor-widget-text-editor p {
	color: var(--paper);
}

.bs-invert .bs-eyebrow p,
.bs-invert .bs-eyebrow {
	color: var(--sky);
}

.bs-invert .bs-hero__lead p {
	color: rgba(255, 255, 255, 0.82);
}

/* Elementor's kit stylesheet (uploads/elementor/css/post-7.css) enqueues after
   the theme, so at equal specificity it wins. These need !important to hold the
   mockup's spec; without it buttons revert to the kit accent (sunbeam) and the
   eyebrow inherits the inverted-band white. */
.bs-btn--primary .elementor-button {
	background-color: var(--sky) !important;
	color: var(--paper) !important;
}

.bs-btn--primary .elementor-button:hover {
	background-color: var(--sky-deep) !important;
}

.bs-btn--ghost .elementor-button {
	background-color: transparent !important;
	color: var(--paper) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
}

.bs-btn--ghost .elementor-button:hover {
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-color: var(--paper) !important;
}

.bs-eyebrow p,
.bs-invert .bs-eyebrow p {
	color: var(--sky) !important;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	margin: 0;
}