/* =====================================================================
   KTM Solar N Electrical — global.css
   Design tokens + base styles. Loaded on every page (after Bootstrap).
   Reusable components shared by more than one template live here; page
   specific rules belong in css/pages/*.css and breakpoint overrides in
   css/media.css.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Design Tokens — sampled from the KTM homepage design
   --------------------------------------------------------------- */
:root {
	/* Brand */
	--primary-color: #FF9E45;
	/* orange accent (headline highlight, stars) */
	--primary-hover: #F1913E;
	--secondary-color: #16303C;
	/* dark teal — service cards */
	--accent-color: #C7613C;
	/* terracotta — section eyebrows */
	--accent-gold: #FFC06A;
	/* amber/gold — icons, footer headings */

	/* Ink / surfaces */
	--heading-color: #14242D;
	--ink-900: #1B2A33;
	--ink-800: #24323B;
	--panel-dark: #1C2C35;
	--black-bar: #0C0C0C;
	--near-black: #151515;
	--background-color: #FBFAF6;
	--background-alt: #F1EFE9;
	--surface: #FFFFFF;

	/* Text */
	--text-color: #5A6B72;
	--text-muted: #8FA1A8;
	--text-on-dark: #A9B8BF;
	--border-color: #E4DFD4;
	--border-dark: rgba(255, 255, 255, .08);

	/* Gradients */
	--gradient-gold: linear-gradient(135deg, #FFC06A 0%, #F59343 100%);
	--gradient-orange: linear-gradient(90deg, #FFB65C 0%, #D2542A 100%);
	--gradient-orange-cta: linear-gradient(100deg, #FFBA61 0%, #D36E3E 100%);
	--gradient-quote-btn: linear-gradient(135deg, #1F3B49 0%, #14252F 100%);
	--gradient-panel: linear-gradient(135deg, #1C2C35 0%, #16303C 55%, #2A2118 100%);

	/* Typography */
	--font-primary: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
	--font-secondary: 'Satoshi', 'Poppins', 'Jost', system-ui, sans-serif;

	--h1-size: clamp(1.9rem, 1rem + 2.73vw, 3.3rem);
	/* 68px */
	--h2-size: clamp(1.7rem, 1rem + 1.95vw, 2.5rem);
	/* 52px */
	--h3-size: clamp(1.4rem, 1rem + 0.39vw, 1.7rem);
	/* 28px */
	--h4-size: clamp(1.1875rem, 1.12rem + 0.29vw, 1.375rem);
	/* 22px */
	--h5-size: 1.1875rem;
	/* 19px */
	--h6-size: 1rem;
	/* 16px */
	--body-size: 1rem;
	--body-line: 1.8;
	--eyebrow-size: .9375rem;
	/* 15px */

	/* Rhythm */
	--section-spacing: 5.5rem;
	/* 120px */
	--container-spacing: 1.25rem;
	--card-spacing: 1.75rem;

	--radius-sm: .5rem;
	--radius-md: .875rem;
	--radius-lg: 1.25rem;
	--radius-xl: 1.75rem;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 10px rgba(20, 36, 45, .06);
	--shadow-md: 0 10px 30px rgba(20, 36, 45, .08);
	--shadow-lg: 0 28px 70px rgba(20, 36, 45, .12);
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
body {
	font-family: var(--font-primary);
	font-size: var(--body-size);
	line-height: var(--body-line);
	color: var(--text-color);
	background-color: var(--background-color);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: var(--font-secondary);
	color: var(--heading-color);
	font-weight: 700;
	letter-spacing: -.01em;
}

h1 {
	font-size: var(--h1-size);
	line-height: 1.08;
}

h2 {
	font-size: var(--h2-size);
	line-height: 1.08;
}

h3 {
	font-size: var(--h3-size);
	line-height: 1.2;
}

h4 {
	font-size: var(--h4-size);
	line-height: 1.3;
}

h5 {
	font-size: var(--h5-size);
	line-height: 1.35;
}

h6 {
	font-size: var(--h6-size);
	line-height: 1.4;
}

a {
	color: var(--accent-color);
	text-decoration: none;
	transition: color .25s ease, opacity .25s ease;
}

a:hover,
a:focus-visible {
	color: var(--primary-color);
}

img {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 3px;
}

/* `hidden` must beat component display values (flex/grid) set below. */
[hidden] {
	display: none !important;
}

/* Decorative overhangs (the "100%" badge, section glows) may sit outside the
   container by design; they must never produce a horizontal scrollbar. */
#site-container,
#site-footer {
	overflow-x: clip;
}

/*
 * The design lays content out on a 1654px measure. Every export agrees: the
 * card grids, detail photos, pill rows and hero copy all start at x 125.5 and
 * the right-hand edge lands on 1780, in a 1905px frame. Bootstrap adds 12px of
 * gutter each side, so the box is 1678px.
 */
@media (min-width: 1400px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1678px;
	}
}

/* ---------------------------------------------------------------
   3. Reusable components
   --------------------------------------------------------------- */

/* -- Section heading block (eyebrow + title + intro) -- */
.section {
	padding-block: var(--section-spacing);
}

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.25rem;
	font-family: var(--font-secondary);
	font-size: var(--eyebrow-size);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent-color);
}

.section-eyebrow--rule::before {
	content: "";
	width: 30px;
	height: 2px;
	background: currentColor;
}

.section-title {
	margin-bottom: 1.5rem;
}

.section-intro {
	max-width: 48rem;
	margin-bottom: 0;
	color: var(--text-color);
}

.section-head--center {
	text-align: center;
}

.section-head--center .section-intro {
	margin-inline: auto;
}

/* Dark variants */
.section--dark {
	background-color: var(--ink-900);
}

.section--dark .section-title,
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
	color: #fff;
}

.section--dark .section-intro,
.section--dark p {
	color: var(--text-on-dark);
}

/* -- Buttons -- */
/*
 * 21px of padding gives the 67px button height every export draws — measured on
 * the hero pills in About, Contact and both service inner pages, and on the
 * sunrise CTA in both service listings, all of which land on 67–67.5px. The old
 * 1rem produced 58px.
 */
.btn {
	--bs-btn-padding-y: 1.3125rem;
	--bs-btn-padding-x: 2rem;
	--bs-btn-border-radius: var(--radius-pill);
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

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

.btn:active {
	transform: translateY(0);
}

.btn svg {
	flex: 0 0 auto;
}

.btn-light-pill {
	background: #fff;
	color: var(--heading-color);
	border: 1px solid #fff;
	box-shadow: 0 0 60px rgba(255, 158, 69, .35);
}

.btn-light-pill:hover,
.btn-light-pill:focus-visible {
	background: var(--background-color);
	color: var(--heading-color);
}

.btn-outline-light-pill {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .75);
}

.btn-outline-light-pill:hover,
.btn-outline-light-pill:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border-color: #fff;
}

.btn-ink {
	background: var(--ink-900);
	color: #fff;
	border: 1px solid var(--ink-900);
}

.btn-ink:hover,
.btn-ink:focus-visible {
	background: var(--panel-dark);
	color: #fff;
}

/* Rounded-rectangle pair used by the inner-page "work with us" band — the
   design deliberately drops the pill radius here. */
.btn-sunrise {
	--bs-btn-border-radius: var(--radius-md);
	background-image: var(--gradient-orange-cta);
	color: var(--heading-color);
	border: 1px solid transparent;
	box-shadow: 0 12px 40px rgba(226, 126, 62, .38);
}

.btn-sunrise:hover,
.btn-sunrise:focus-visible {
	color: var(--heading-color);
	box-shadow: 0 16px 48px rgba(226, 126, 62, .52);
}

.btn-slate {
	--bs-btn-border-radius: var(--radius-md);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .22);
}

.btn-slate:hover,
.btn-slate:focus-visible {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
}

.btn-quote {
	background-image: var(--gradient-quote-btn);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .12);
}

.btn-quote:hover,
.btn-quote:focus-visible {
	color: #fff;
	border-color: rgba(255, 192, 106, .5);
}

/* -- Icon tiles -- */
.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-md);
	background: #FFEAD2;
	color: var(--accent-color);
}

.icon-tile svg {
	width: 1.25rem;
	height: 1.25rem;
}

.icon-tile--lg {
	width: 3.25rem;
	height: 3.25rem;
}

.icon-tile--lg svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* 60px — the tile size the service pages' option and benefit cards use. */
.icon-tile--xl {
	width: 3.75rem;
	height: 3.75rem;
}

.icon-tile--xl svg {
	width: 1.5rem;
	height: 1.5rem;
}

.icon-tile--dark {
	background: #141414;
	color: var(--accent-gold);
}

/*
 * The glyph on the gradient tile is ink, not white. Sampled at #1B2A33 in all
 * three exports and in every construction that uses this tile — the service
 * detail badges, the quote panel's contact rows and the electrical service
 * cards — so it belongs on the tile itself rather than as a per-page override.
 */
.icon-tile--gold {
	background-image: var(--gradient-gold);
	color: var(--heading-color);
}

.icon-tile--ink {
	background: rgba(255, 255, 255, .06);
	color: var(--accent-gold);
}

/* -- Star rating -- */
.star-rating {
	display: inline-flex;
	gap: .1875rem;
	color: var(--primary-color);
	line-height: 1;
}

.star-rating svg {
	width: 1rem;
	height: 1rem;
}

/* -- Form controls (shared by the quote form and any inner-page form) -- */
.ktm-field {
	margin-bottom: .875rem;
}

.ktm-label {
	display: block;
	margin-bottom: .375rem;
	line-height: 1.3;
	font-family: var(--font-secondary);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--heading-color);
}

.ktm-control {
	width: 100%;
	padding: .875rem 1.25rem;
	font-family: var(--font-primary);
	font-size: 1.0625rem;
	color: var(--heading-color);
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: border-color .25s ease, box-shadow .25s ease;
	appearance: none;
}

.ktm-control::placeholder {
	color: #9AA6AC;
}

.ktm-control:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(255, 158, 69, .18);
}

.ktm-control[aria-invalid="true"] {
	border-color: #C0392B;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

textarea.ktm-control {
	min-height: 5.375rem;
	resize: vertical;
}

/* Native select gets the design's chevron. */
select.ktm-control {
	padding-right: 3.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2314242D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.25rem center;
}

.ktm-form-status {
	margin-top: 1rem;
	font-size: .9375rem;
}

.ktm-form-status[data-state="error"] {
	color: #C0392B;
}

/* ---------------------------------------------------------------
   4. Collapsed navigation ([data-ktm-toggle] toggles `.is-open`)

   The bar collapses below xl, not lg: with the design's six nav items, the
   390px brand lockup and both header buttons, a horizontal bar needs ~1200px.
   --------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.primary-nav:not(.is-open) {
		display: none;
	}

	.primary-nav.is-open {
		display: block;
	}
}

/* ---------------------------------------------------------------
   5. Scroll-reveal animations ([data-animate])
   --------------------------------------------------------------- */
.aos-ready [data-animate] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}

.aos-ready [data-animate="fade-left"] {
	transform: translateX(-24px);
}

.aos-ready [data-animate="fade-right"] {
	transform: translateX(24px);
}

.aos-ready [data-animate="zoom"] {
	transform: scale(.94);
}

.aos-ready [data-animate="fade"] {
	transform: none;
}

.aos-ready [data-animate].is-visible {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------------------
   6. Header live-search overlay (rendered by SearchService)
   --------------------------------------------------------------- */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 1080;
	background: rgba(20, 36, 45, .6);
	opacity: 0;
	transition: opacity .25s ease;
}

.search-overlay.is-open {
	opacity: 1;
}

.search-overlay[hidden] {
	display: none;
}

.search-panel {
	background: #fff;
	padding: 2rem 0;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

.search-form {
	display: flex;
	gap: .5rem;
}

.search-results {
	margin-top: 1rem;
}

.search-result {
	padding: .5rem 0;
	border-bottom: 1px solid var(--border-color);
	text-decoration: none;
}

.search-result__type {
	font-size: .8rem;
	color: var(--text-color);
}

body.search-open {
	overflow: hidden;
}