/* =============================================================================
 * D&E Proelectric — Precision Spec Grid Design System
 * -----------------------------------------------------------------------------
 * Global tokens, typography, and utility helpers used by every Elementor page
 * on the site. Anything visual that repeats across sections lives here rather
 * than in per-widget custom CSS, so a single edit rolls out everywhere.
 * ========================================================================== */

:root {
	/* ---------- Colour tokens -------------------------------------------- */
	--de-ink:              #0B0F17;   /* Deep Obsidian Void — footers, dark blocks */
	--de-ink-2:            #111827;   /* Technical slate — heavy body copy on light */
	--de-ink-3:            #0F172A;   /* Alternate slate — hairline dark surfaces */
	--de-ink-4:            #1E293B;   /* Dark structural border */

	--de-canvas:           #FFFFFF;   /* Primary field */
	--de-canvas-muted:     #F8FAFC;   /* Section alternation */
	--de-substrate:        #F1F5F9;   /* Card / spec panel background */
	--de-hairline:         #E2E8F0;   /* Light structural border */
	--de-hairline-strong:  #CBD5E1;   /* Field-control border */

	--de-blue:             #0066FF;   /* Electric conductor */
	--de-blue-active:      #0052CC;   /* Pressed / active */
	--de-blue-soft:        #DAE1FF;   /* Chip background */

	--de-yellow:           #FFB800;   /* Volt warning */
	--de-yellow-active:    #F59E0B;   /* Pressed */

	--de-text:             #111827;
	--de-text-muted:       #424656;
	--de-text-dim:         #64748B;

	/* ---------- Typography ----------------------------------------------- */
	--de-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--de-font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
	--de-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

	/* ---------- Layout --------------------------------------------------- */
	--de-container:      1408px;   /* 88rem — matches Stitch max-width-spec */
	--de-gutter-mobile:  1rem;
	--de-gutter-desktop: 2rem;

	--de-section-y:      6rem;     /* Default vertical rhythm on desktop */
	--de-section-y-sm:   3rem;     /* Mobile rhythm */
}

/* ---------- Astra shell ---------------------------------------------------
 * The "Elementor Full Width" template still wraps content in `.ast-container`,
 * which carries a 1240px max-width and 20px side padding. Our section bands
 * paint their own full-bleed backgrounds and manage their own 32px gutters, so
 * that wrapper has to be neutralised — otherwise every band stops 20px short of
 * the viewport edge and the alternating section colours look inset.
 * ----------------------------------------------------------------------- */
/* Target the Elementor full-width body class, not Astra's page-builder class —
 * Astra only sets `ast-page-builder-template` on some pages, so keying off it
 * left every inner page capped at 1240px with 20px side padding. */
.elementor-template-full-width .ast-container,
.elementor-page .ast-container,
.ast-page-builder-template .ast-container {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100%;
}
.elementor-template-full-width .site-content,
.elementor-page .site-content,
.elementor-template-full-width #content,
.elementor-page #content { padding: 0; }

/* ---------- Global type overrides ---------------------------------------- */
html, body {
	background: var(--de-canvas);
	color: var(--de-text);
	font-family: var(--de-font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body ::selection { background: var(--de-blue-soft); color: var(--de-ink); }

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--de-font-display);
	letter-spacing: -0.02em;
	color: var(--de-ink);
	text-transform: uppercase;
	font-weight: 600;
}

/* ---------- Reusable utility classes -------------------------------------
 * Applied via each widget's "CSS Classes" field inside Elementor.
 * ----------------------------------------------------------------------- */

/* Monospaced spec label — e.g. "01 // SECTOR CAPABILITIES" */
.de-spec-label {
	font-family: var(--de-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--de-blue);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.de-spec-label--muted { color: var(--de-text-dim); }
.de-spec-label--yellow { color: var(--de-yellow-active); }
.de-spec-label::before {
	content: '';
	display: inline-block;
	width: 6px; height: 6px;
	background: currentColor;
}
.de-spec-label--no-dot::before { display: none; }

/* Section index line — "03 //" then a 1px rule filling the row */
.de-section-index {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.de-section-index::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--de-hairline);
}
.de-section-index--dark::after { background: var(--de-ink-4); }

/* Editorial display heading */
.de-display {
	font-family: var(--de-font-display);
	font-weight: 700;
	font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--de-ink);
	margin: 0;
}
.de-display .accent {
	background: linear-gradient(90deg, var(--de-blue) 0%, var(--de-blue-active) 60%, var(--de-yellow) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.de-headline {
	font-family: var(--de-font-display);
	font-weight: 600;
	font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--de-ink);
	margin: 0;
}

.de-eyebrow {
	font-family: var(--de-font-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--de-text-muted);
	font-weight: 500;
}

/* Body large — the paragraph size used in the hero + section leads */
.de-lede {
	font-family: var(--de-font-body);
	font-size: 1.125rem;
	line-height: 1.6;
	letter-spacing: -0.01em;
	color: var(--de-text-muted);
}

/* ---------- Buttons ------------------------------------------------------
 * Button skins now live in homepage.css and target the Elementor Button
 * widget specifically (`.elementor-widget-button.de-btn .elementor-button`).
 *
 * The bare `.de-btn` selectors that used to live here also matched the widget
 * WRAPPER, which painted a full-bleed dark block behind every CTA. Buttons are
 * Elementor widgets after the refactor, so the wrapper must stay transparent
 * and only the inner <a> is skinned.
 * ----------------------------------------------------------------------- */

/* ---------- Cards, panels, images --------------------------------------- */

/* Spec panel — 1px border, zero radius, subtle inset on hover */
.de-panel {
	background: var(--de-canvas);
	border: 1px solid var(--de-hairline);
	border-radius: 0 !important;
	transition: border-color 150ms linear;
}
.de-panel:hover { border-color: var(--de-ink); }
.de-panel--dark {
	background: var(--de-ink);
	color: #FFFFFF;
	border-color: var(--de-ink-4);
}
.de-panel--muted { background: var(--de-substrate); border-color: var(--de-hairline); }

/* Force sharp corners on Elementor images inside cards */
.de-panel img,
.de-image-sharp img { border-radius: 0 !important; }

/* Precision zoom on featured imagery */
.de-hover-zoom { overflow: hidden; }
.de-hover-zoom img { transition: transform 400ms ease-out; }
.de-hover-zoom:hover img { transform: scale(1.03); }

/* Architectural crosshairs — corner tick decoration */
.de-cross {
	position: relative;
}
.de-cross::before,
.de-cross::after {
	content: '';
	position: absolute;
	width: 10px; height: 10px;
	border-color: var(--de-ink);
	border-style: solid;
	border-width: 0;
}
.de-cross::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.de-cross::after  { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- Dark section polish -----------------------------------------
 * Elementor's global kit emits `.elementor-kit-N h2 { color: #0B0F17; }` with
 * higher specificity than a plain class rule, so we mark the dark-section
 * overrides !important to force the light foreground.
 */
.de-dark,
.de-dark p,
.de-dark h1, .de-dark h2, .de-dark h3, .de-dark h4, .de-dark h5, .de-dark h6,
.de-dark .de-headline,
.de-dark .de-display,
.de-dark .elementor-heading-title,
.de-dark strong {
	color: #F8FAFC !important;
}
.de-dark .de-lede            { color: #CBD5E1 !important; }
.de-dark .de-eyebrow         { color: #94A3B8 !important; }
.de-dark .de-spec-label      { color: #B3C5FF !important; }
.de-dark .de-section-index::after { background: var(--de-ink-4); }
.de-dark a { color: #FFFFFF; }

/* ---------- Form styling (used by the estimate popup) ------------------- */
.de-form input[type="text"],
.de-form input[type="email"],
.de-form input[type="tel"],
.de-form input[type="url"],
.de-form input[type="number"],
.de-form select,
.de-form textarea,
.elementskit-contact-form .de-form input,
.elementskit-contact-form .de-form textarea,
.elementskit-contact-form .de-form select {
	border-radius: 0 !important;
	border: 1px solid var(--de-hairline-strong);
	background: var(--de-canvas);
	padding: 0.85rem 1rem;
	font-family: var(--de-font-body);
	font-size: 0.9375rem;
	color: var(--de-ink);
	box-shadow: none;
	width: 100%;
}
.de-form input:focus,
.de-form select:focus,
.de-form textarea:focus {
	outline: 1px solid var(--de-blue);
	border-color: var(--de-blue);
}
.de-form label {
	font-family: var(--de-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--de-text-muted);
	display: block;
	margin-bottom: 0.4rem;
}

/* ---------- Header / footer nav polish ---------------------------------- */
.de-nav a {
	font-family: var(--de-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--de-text-muted);
	padding: 0.5rem 0.75rem;
	transition: color 100ms linear, background 100ms linear;
}
.de-nav a:hover, .de-nav a.current { color: var(--de-blue); background: var(--de-substrate); }

/* Dark footer nav */
.de-dark .de-nav a { color: #CBD5E1; }
.de-dark .de-nav a:hover { color: var(--de-blue-soft); background: var(--de-ink-4); }

/* ---------- Elementor tweaks that keep us on the grid ------------------- */
.elementor-widget-image img { border-radius: 0; }
.elementor-section.de-section { padding-top: var(--de-section-y); padding-bottom: var(--de-section-y); }
@media (max-width: 767px) {
	.elementor-section.de-section { padding-top: var(--de-section-y-sm); padding-bottom: var(--de-section-y-sm); }
}

/* Constrain long lines inside editorial columns */
.de-measure { max-width: 42rem; }

/* Coordinate watermark (top-right hero decoration) */
.de-coordinate-watermark {
	position: absolute;
	top: 1.25rem; right: 1.25rem;
	font-family: var(--de-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	color: rgba(66, 70, 86, 0.45);
	text-transform: uppercase;
	pointer-events: none;
}

/* Live circuit indicator — pulsing 8px square */
.de-pulse {
	display: inline-block;
	width: 8px; height: 8px;
	background: var(--de-blue);
	position: relative;
}
.de-pulse::after {
	content: '';
	position: absolute; inset: 0;
	background: var(--de-blue);
	animation: dePulse 1.8s ease-out infinite;
}
@keyframes dePulse {
	0%   { opacity: .8; transform: scale(1); }
	80%  { opacity: 0;  transform: scale(2.6); }
	100% { opacity: 0;  transform: scale(2.6); }
}

/* Prevent horizontal overflow on mobile.
 *
 * NOT `overflow-x: hidden` on html/body: that turns the root into a scroll
 * container, which silently breaks CSS scroll-driven animations
 * (`animation-timeline: view()`) and can break `position: sticky` too.
 * `overflow-x: clip` clips the same overflow without creating a scroll
 * container, so the motion layer and the sticky header both keep working. */
html, body { overflow-x: clip; }