/*
Theme Name: Lance
Theme URI: https://example.com/lance
Author: Lance
Description: Consulting and advisory theme with a serif editorial voice, LANCE red accents and warm neutral section cards. Ships a fully composed front page.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lance
Tags: business, consulting, one-column, custom-menu, custom-logo, editor-style, featured-images, translation-ready
*/

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/manrope-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/manrope-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/manrope-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("assets/fonts/librebaskerville-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("assets/fonts/librebaskerville-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("assets/fonts/librebaskerville-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Sans";
	src: url("assets/fonts/ibmplexsans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Handwritten accents (OFL). */
@font-face {
	font-family: "Nothing You Could Do";
	src: url("assets/fonts/nothingyoucoulddo-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	/* Brand reds: primary for marks and details, deep for buttons (white text passes AA) */
	--lance-red: #f51622;
	--lance-red-deep: #d90f19;

	/* Light surface tones */
	--lance-blush: #ffd1ce;
	--lance-beige: #efe7d5;
	--lance-mist: #d9d8d2;
	/* The same three tints as RGB triples. The buying-guide step cards lighten
	   them with alpha, which keeps every card on a palette colour instead of
	   introducing six new shades. */
	--lance-blush-rgb: 255, 209, 206;
	--lance-beige-rgb: 239, 231, 213;
	--lance-mist-rgb: 217, 216, 210;

	/* Quiet cards: warm white with a hairline border */
	--lance-card: #fffefb;
	--lance-card-line: #e7e3dc;
	--lance-card-text: #65665f;

	/* Plate under the multi-colour illustrations in assets/img/service-icons and
	   assets/img/services. Those are drawn for a light ground with #252821 ink,
	   so this one token deliberately does NOT flip in dark mode — the plate stays
	   light and the artwork reads as designed. Same value as --lance-card, so it
	   is invisible on the light theme. */
	--lance-plate: #fffefb;

	/* Neutral surfaces */
	--lance-bg: #faf9f5;
	--lance-surface: #efe7d5;
	--lance-dark: #11120f;
	--lance-hero: #202219;
	--lance-forest: #222a21;
	/* Hero ground, and the card gradient that runs across it from the
	   bottom-left corner to the top-right */
	--lance-ivory: #fefaf6;
	--lance-hero-tint-a: #f2eedf;
	--lance-hero-tint-b: #fdfaf3;

	/* Text */
	--lance-text: #11120f;
	--lance-muted: #5a5a5a;
	--lance-muted-warm: #6b6b5a;
	--lance-on-dark: #ffffff;
	--lance-on-accent: #ffffff;

	/* Hairlines and quiet fills drawn over the page. Held as an RGB triple so
	   each use can set its own alpha; flips to light ink in dark mode. */
	--lance-line-rgb: 17, 18, 15;

	/* Status green, the one semantic colour outside the brand palette */
	--lance-success: #1f6b35;
	--lance-success-bg: #dcefe0;

	/* Type families */
	--lance-sans: "Manrope", "Manrope Placeholder", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--lance-serif: "Libre Baskerville", "Libre Baskerville Placeholder", Georgia, serif;
	--lance-label: "IBM Plex Sans", "IBM Plex Sans Placeholder", var(--lance-sans);
	--lance-hand: "Nothing You Could Do", "Bradley Hand", "Segoe Print", cursive;

	/* Layout */
	--lance-container: 1280px;
	--lance-container-wide: 1280px;
	--lance-container-nav: 1280px;
	--lance-section-y: 84px;
	--lance-section-x: 30px;
	--lance-header-h: 72px;

	/* Motion */
	--lance-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

	color-scheme: light;
}

/* ==========================================================================
   Dark mode

   Follows the reader's system setting, or the header toggle once they pick one.
   Almost nothing but token values changes, so the dark theme costs under a
   kilobyte and no extra request.

   The scale is warm, matching the existing #11120f / #202219 / #222a21 family:
   the page becomes the darkest surface and everything that was a dark block on
   the light theme (footer, fee bar, CTA bars, statement, video cards) lifts
   slightly above it, so it still reads as a distinct block carrying light text.
   Brand reds are deliberately unchanged: #d90f19 keeps white text at 5.2:1,
   while the brighter #f51622 would drop to 4.2:1 and fail AA.
   ========================================================================== */

/* The dark values live in two selectors so the theme answers to both the system
   setting and an explicit choice from the header toggle:
     - no data-theme              -> follow the operating system
     - data-theme="dark"/"light"  -> the reader's choice wins either way
   Duplicated rather than resolved in JavaScript, so dark mode still works with
   JS off. gzip collapses the repeat to well under 200 bytes. */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		/* Grounds, darkest first */
		--lance-bg: #12130f;
		--lance-card: #1b1d17;
		--lance-surface: #23261f;
		--lance-card-line: #32352c;

		/* Blocks that were dark on light: lifted so they stay legible as blocks */
		--lance-dark: #1b1d17;
		--lance-hero: #20231b;
		--lance-forest: #232a21;

		/* Tinted surfaces, same roles as blush / beige / mist */
		--lance-blush: #33211f;
		--lance-beige: #23261f;
		--lance-mist: #2a2d25;
		--lance-blush-rgb: 51, 33, 31;
		--lance-beige-rgb: 35, 38, 31;
		--lance-mist-rgb: 42, 45, 37;

		/* Text */
		--lance-text: #f2efe6;
		--lance-muted: #a8a49a;
		--lance-muted-warm: #a8a49a;
		--lance-card-text: #a8a49a;
		--lance-on-dark: #f2efe6;

		/* Hero card ground and its ivory base */
		--lance-ivory: #12130f;
		--lance-hero-tint-a: #1c1e17;
		--lance-hero-tint-b: #15160f;

		/* Hairlines flip from ink to light */
		--lance-line-rgb: 242, 239, 230;

		/* Status green, lifted to hold on a dark ground */
		--lance-success: #7fd39b;
		--lance-success-bg: #1c2a20;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	/* Grounds, darkest first */
	--lance-bg: #12130f;
	--lance-card: #1b1d17;
	--lance-surface: #23261f;
	--lance-card-line: #32352c;

	/* Blocks that were dark on light: lifted so they stay legible as blocks */
	--lance-dark: #1b1d17;
	--lance-hero: #20231b;
	--lance-forest: #232a21;

	/* Tinted surfaces, same roles as blush / beige / mist */
	--lance-blush: #33211f;
	--lance-beige: #23261f;
	--lance-mist: #2a2d25;
	--lance-blush-rgb: 51, 33, 31;
	--lance-beige-rgb: 35, 38, 31;
	--lance-mist-rgb: 42, 45, 37;

	/* Text */
	--lance-text: #f2efe6;
	--lance-muted: #a8a49a;
	--lance-muted-warm: #a8a49a;
	--lance-card-text: #a8a49a;
	--lance-on-dark: #f2efe6;

	/* Hero card ground and its ivory base */
	--lance-ivory: #12130f;
	--lance-hero-tint-a: #1c1e17;
	--lance-hero-tint-b: #15160f;

	/* Hairlines flip from ink to light */
	--lance-line-rgb: 242, 239, 230;

	/* Status green, lifted to hold on a dark ground */
	--lance-success: #7fd39b;
	--lance-success-bg: #1c2a20;
}

/* ==========================================================================
   Reset and base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--lance-bg);
	color: var(--lance-text);
	font-family: var(--lance-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--lance-serif);
	font-weight: 400;
	color: var(--lance-text);
}

p {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--lance-text);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--lance-red-deep);
	color: var(--lance-on-accent);
	border-radius: 999px;
}

.skip-link:focus {
	top: 16px;
}

/* ==========================================================================
   Shared primitives
   ========================================================================== */

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

.lance-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: var(--lance-section-y) var(--lance-section-x);
}

/* Eyebrow label + serif heading + supporting copy */
.lance-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: 672px;
	margin-inline: auto;
	text-align: center;
}

.lance-eyebrow {
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--lance-surface);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	color: var(--lance-text);
}

.lance-head__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.lance-head__title {
	font-size: 45px;
	line-height: 49.5px;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.lance-head__sub {
	max-width: 550px;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.01em;
	text-wrap: pretty;
}

/* Deep-red pill button with arrow glyph */
.lance-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--lance-red-deep);
	color: var(--lance-on-accent);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0.01em;
	overflow: hidden;
	transition: transform 0.3s var(--lance-ease-out-expo), filter 0.3s var(--lance-ease-out-expo);
}

.lance-btn:hover {
	transform: translateY(-2px);
	filter: brightness(0.9);
}

/* Raised above the .lance-icon fill-your-wrapper default below. */
.lance-btn > .lance-btn__icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* Text-only second action. It sits on the page ground rather than on a filled
   pill, so it takes the page ink instead of inheriting the button white above. */
.lance-btn--ghost {
	background: transparent;
	padding: 0;
	gap: 8px;
	color: var(--lance-text);
}

.lance-btn--ghost:hover {
	transform: none;
	filter: none;
	opacity: 0.6;
}

.lance-btn--ghost > .lance-btn__icon {
	transition: transform 0.3s var(--lance-ease-out-expo);
}

.lance-btn--ghost:hover > .lance-btn__icon {
	transform: translateX(4px);
}

/* Icon glyphs inherit stroke colour from the surrounding text colour */
/* Icons ship their own per-path stroke/fill attributes so that decorative
   hit-area paths stay invisible — don't blanket-stroke them from here. */
.lance-icon {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.lance-reveal {
	opacity: 0.001;
	transform: translateY(16px);
	will-change: opacity, transform;
}

.lance-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 1.6s var(--lance-ease-out-expo), transform 1.6s var(--lance-ease-out-expo);
}

.lance-reveal--scale {
	transform: translateY(16px) scale(0.9);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.lance-reveal,
	.lance-reveal--scale {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Tablet: 810px - 1199px
   ========================================================================== */

@media (max-width: 1199px) {
	:root {
		--lance-section-y: 72px;
		--lance-section-x: 24px;
	}

	.lance-head__title {
		font-size: 42px;
		line-height: 46.2px;
	}
}

/* ==========================================================================
   Phone: up to 809px
   ========================================================================== */

@media (max-width: 809px) {
	:root {
		--lance-section-y: 56px;
		--lance-section-x: 16px;
		--lance-header-h: 64px;
	}

	.lance-head {
		gap: 20px;
	}

	.lance-head__title {
		font-size: 31px;
		line-height: 34.1px;
		letter-spacing: -0.03em;
	}

	.lance-head__sub {
		max-width: none;
	}
}