/*
Theme Name: SolarSiteIQ Child
Template: generatepress
Description: SolarSiteIQ presentation layer — layout, templates, and front-end interaction only. All business logic lives in the solarsiteiq-core plugin (see docs/DECISIONS.md D-002).
Version: 0.3.0
Text Domain: solarsiteiq-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   One SolarSiteIQ brand: navy/steel "intelligent platform" identity (Comp A)
   carries the primary color, type and structure everywhere — homeowner and
   installer surfaces alike. Comp B's homeowner-side UX lessons (larger
   touch targets, more air, softer cards, plainer copy) are borrowed as
   *spacing and tone*, not as a second color system. A small amber "solar"
   token exists only for sparing energy-motif accents (icons, kickers) —
   never for a primary action fill, so the product still reads as one brand.
   ========================================================================== */
:root {
	/* --- Brand core (navy / steel) --- */
	--ssiq-navy-900: #16222f;
	--ssiq-navy-800: #1d2d3d;
	--ssiq-navy-700: #26394d;
	--ssiq-navy-600: #416180;
	--ssiq-steel-100: #eef6ff;
	--ssiq-steel-200: #d6ebff;
	--ssiq-steel-300: #b5d9fd;
	--ssiq-steel-400: #94bce3;
	--ssiq-steel-500: #749dc4;
	--ssiq-steel-600: #5980a6;
	--ssiq-steel-700: #416180;

	/* --- Sparing energy accent (icons / kickers only, never a button fill) --- */
	--ssiq-solar: #b3600a;
	--ssiq-solar-tint: #fdf3e6;

	/* --- Solar Amber, the exact Concept B — Match brand hex (logo node +
	   the one primary nav CTA only — see docs/DECISIONS.md D-027/D-025) --- */
	--ssiq-amber: #E08C33;
	--ssiq-amber-dark: #c4761f;

	/* --- Neutrals --- */
	--ssiq-ink: #16222f;
	--ssiq-ink-soft: #3d4b59;
	--ssiq-muted: #5b6672;
	--ssiq-bg: #ffffff;
	--ssiq-bg-alt: #f5f7f9;
	--ssiq-bg-app: #eef2f5;
	--ssiq-border: #dde3e9;
	--ssiq-border-soft: #e8ecf0;

	/* --- Semantic status (never color-alone; always paired with icon/text) --- */
	--ssiq-success: #1e6b3f;
	--ssiq-success-bg: #eaf6ee;
	--ssiq-warning: #7a5c00;
	--ssiq-warning-bg: #fdf6df;
	--ssiq-error: #a3271d;
	--ssiq-error-bg: #fbeceb;
	--ssiq-info: #235d8a;
	--ssiq-info-bg: var(--ssiq-steel-100);
	--ssiq-focus: #1a73e8;

	/* --- Primary interactive color (same everywhere, homeowner + installer) --- */
	--ssiq-primary: var(--ssiq-steel-600);
	--ssiq-primary-dark: var(--ssiq-steel-700);
	--ssiq-primary-tint: var(--ssiq-steel-100);
	--ssiq-on-primary: #ffffff;

	/* --- Type scale --- */
	--ssiq-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ssiq-fs-h1: clamp(30px, 4vw, 44px);
	--ssiq-fs-h2: clamp(24px, 3vw, 32px);
	--ssiq-fs-h3: clamp(20px, 2.4vw, 24px);
	--ssiq-fs-h4: 19px;
	--ssiq-fs-lead: 18px;
	--ssiq-fs-body: 16px;
	--ssiq-fs-small: 14px;
	--ssiq-fs-micro: 12px;
	--ssiq-lh-tight: 1.15;
	--ssiq-lh-body: 1.6;

	/* --- Spacing scale --- */
	--ssiq-space-1: 4px;
	--ssiq-space-2: 8px;
	--ssiq-space-3: 12px;
	--ssiq-space-4: 16px;
	--ssiq-space-5: 24px;
	--ssiq-space-6: 32px;
	--ssiq-space-7: 48px;
	--ssiq-space-8: 64px;
	--ssiq-space-9: 88px;

	/* --- Radii / shadows --- */
	--ssiq-radius-sm: 6px;
	--ssiq-radius-md: 10px;
	--ssiq-radius-lg: 16px;
	--ssiq-radius-pill: 999px;
	--ssiq-shadow-sm: 0 1px 2px rgba(22, 34, 47, 0.08);
	--ssiq-shadow-md: 0 4px 16px rgba(22, 34, 47, 0.1);
	--ssiq-shadow-lg: 0 16px 40px rgba(22, 34, 47, 0.16);

	/* --- Container widths --- */
	--ssiq-width-narrow: 640px;   /* single-question funnel steps */
	--ssiq-width-form: 760px;     /* signup / login cards */
	--ssiq-width-content: 760px;  /* editorial / blog reading width */
	--ssiq-width-app: 1180px;     /* installer portal */
	--ssiq-width-wide: 1180px;    /* marketing sections */

	/* --- Touch targets --- */
	--ssiq-tap-min: 48px;
	--ssiq-tap-primary: 52px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
body.solarsiteiq-child,
body {
	font-family: var(--ssiq-font);
	color: var(--ssiq-ink);
	-webkit-font-smoothing: antialiased;
}

/* Restore the native [hidden] behavior. Several component classes below
   (.ssiq-btn, .ssiq-alert, etc.) set `display` unconditionally, which — in
   the cascade — always beats the browser's own default `[hidden]{display:
   none}` UA rule regardless of selector specificity. Confirmed defect: on
   the quote funnel this made the Submit button, Back button, and the
   static "request received" success message all visibly render from the
   very first page load, together with Next, on every step — despite their
   `hidden` attribute being set correctly by JS the whole time. This single
   rule is the root-cause fix; it also corrects the same latent issue in
   partner-signup.js and portal.js, which rely on the identical pattern. */
[hidden] {
	display: none !important;
}

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: var(--ssiq-lh-tight);
	letter-spacing: -0.01em;
	color: var(--ssiq-ink);
}

a {
	color: var(--ssiq-primary);
}
a:hover { color: var(--ssiq-primary-dark); }

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

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

/* ==========================================================================
   3. CONTAINERS
   ========================================================================== */
.ssiq-container {
	max-width: var(--ssiq-width-narrow);
	margin: 0 auto;
	padding: var(--ssiq-space-5) var(--ssiq-space-4) var(--ssiq-space-8);
}
.ssiq-container--form { max-width: var(--ssiq-width-form); }
.ssiq-container--content { max-width: var(--ssiq-width-content); }
.ssiq-container--app { max-width: var(--ssiq-width-app); }
.ssiq-container--wide { max-width: var(--ssiq-width-wide); }

.ssiq-section {
	padding: var(--ssiq-space-8) var(--ssiq-space-4);
}
.ssiq-section--alt { background: var(--ssiq-bg-alt); }
.ssiq-section--dark {
	background: var(--ssiq-navy-800);
	color: #eef2f6;
}
.ssiq-section--dark h1,
.ssiq-section--dark h2,
.ssiq-section--dark h3 { color: #ffffff; }
.ssiq-section__inner {
	max-width: var(--ssiq-width-wide);
	margin: 0 auto;
}
.ssiq-section__head {
	max-width: 720px;
	margin: 0 auto var(--ssiq-space-6);
	text-align: center;
}
.ssiq-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ssiq-space-2);
	font-size: var(--ssiq-fs-micro);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ssiq-primary-dark);
	background: var(--ssiq-primary-tint);
	border-radius: var(--ssiq-radius-pill);
	padding: 6px 14px;
}
.ssiq-lead {
	font-size: var(--ssiq-fs-lead);
	line-height: var(--ssiq-lh-body);
	color: var(--ssiq-ink-soft);
}

/* "Already a partner?" secondary pathway — kept visible above the fold
   (before the eyebrow/heading) on For Installers, so an existing partner
   never has to scroll past the signup form to find login. Styled as a
   quiet secondary row, not competing with the primary partner-signup CTA
   below (only one amber action per view — that's the header's own
   Get My Solar Quote CTA, not this page's Submit Application button). */
.ssiq-already-partner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ssiq-space-3);
	background: var(--ssiq-bg-alt);
	border: 1px solid var(--ssiq-border-soft);
	border-radius: var(--ssiq-radius-md);
	padding: var(--ssiq-space-3) var(--ssiq-space-4);
	margin-bottom: var(--ssiq-space-5);
	font-size: var(--ssiq-fs-small);
	color: var(--ssiq-ink-soft);
}

/* ==========================================================================
   4. CARDS
   ========================================================================== */
.ssiq-card {
	background: var(--ssiq-bg);
	border: 1px solid var(--ssiq-border);
	border-radius: var(--ssiq-radius-lg);
	padding: var(--ssiq-space-6);
	box-shadow: var(--ssiq-shadow-sm);
}
.ssiq-card--flat {
	box-shadow: none;
}
.ssiq-tile {
	background: var(--ssiq-bg);
	border: 1px solid var(--ssiq-border-soft);
	border-radius: var(--ssiq-radius-md);
	padding: var(--ssiq-space-5);
	box-shadow: var(--ssiq-shadow-sm);
}
.ssiq-tile__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--ssiq-radius-md);
	background: var(--ssiq-primary-tint);
	color: var(--ssiq-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--ssiq-space-3);
}
.ssiq-tile h3, .ssiq-tile h4 {
	font-size: var(--ssiq-fs-h4);
	margin: 0 0 var(--ssiq-space-2);
}
.ssiq-tile p {
	margin: 0;
	color: var(--ssiq-ink-soft);
	font-size: var(--ssiq-fs-small);
}

.ssiq-grid {
	display: grid;
	gap: var(--ssiq-space-5);
}
.ssiq-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssiq-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssiq-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.ssiq-grid--3, .ssiq-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.ssiq-grid--2, .ssiq-grid--3, .ssiq-grid--4 { grid-template-columns: 1fr; }
}

/* Numbered step tiles (How It Works) */
.ssiq-step-tile__num {
	width: 40px;
	height: 40px;
	border-radius: var(--ssiq-radius-pill);
	background: var(--ssiq-primary-tint);
	color: var(--ssiq-primary-dark);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--ssiq-space-3);
}
.ssiq-step-tile--current .ssiq-step-tile__num {
	background: var(--ssiq-primary);
	color: var(--ssiq-on-primary);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.ssiq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ssiq-space-2);
	background: var(--ssiq-primary);
	color: var(--ssiq-on-primary);
	border: 1px solid var(--ssiq-primary);
	border-radius: var(--ssiq-radius-md);
	padding: 0 var(--ssiq-space-5);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	min-height: var(--ssiq-tap-min);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.ssiq-btn:hover { background: var(--ssiq-primary-dark); border-color: var(--ssiq-primary-dark); color: var(--ssiq-on-primary); }
.ssiq-btn:active { transform: translateY(1px); }
.ssiq-btn--secondary {
	background: transparent;
	border: 1px solid var(--ssiq-border);
	color: var(--ssiq-ink);
}
.ssiq-btn--secondary:hover { background: var(--ssiq-bg-alt); color: var(--ssiq-ink); border-color: var(--ssiq-border); }
.ssiq-btn--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--ssiq-primary-dark);
	padding: 0 var(--ssiq-space-2);
}
.ssiq-btn--ghost:hover { background: var(--ssiq-primary-tint); }
.ssiq-btn--on-dark {
	background: var(--ssiq-steel-400);
	border-color: var(--ssiq-steel-400);
	color: var(--ssiq-navy-900);
}
.ssiq-btn--on-dark:hover { background: var(--ssiq-steel-300); border-color: var(--ssiq-steel-300); }
.ssiq-btn--lg { min-height: var(--ssiq-tap-primary); padding: 0 var(--ssiq-space-6); font-size: 17px; }
.ssiq-btn--sm { min-height: 40px; padding: 0 var(--ssiq-space-4); font-size: var(--ssiq-fs-small); }
.ssiq-btn--block { display: flex; width: 100%; }
.ssiq-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ==========================================================================
   6. FORMS
   ========================================================================== */
.ssiq-field { margin-bottom: var(--ssiq-space-5); }
.ssiq-field label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--ssiq-space-2);
	color: var(--ssiq-ink);
	font-size: var(--ssiq-fs-small);
}
.ssiq-field input[type="text"],
.ssiq-field input[type="email"],
.ssiq-field input[type="tel"],
.ssiq-field input[type="password"],
.ssiq-field select,
.ssiq-field textarea {
	width: 100%;
	min-height: var(--ssiq-tap-min);
	padding: 12px 14px;
	border: 1px solid var(--ssiq-border);
	border-radius: var(--ssiq-radius-md);
	font-size: 16px;
	font-family: inherit;
	background: var(--ssiq-bg);
	color: var(--ssiq-ink);
	box-sizing: border-box;
}
.ssiq-field textarea { min-height: 110px; }
.ssiq-field input:hover, .ssiq-field select:hover, .ssiq-field textarea:hover {
	border-color: var(--ssiq-steel-500);
}
.ssiq-field input:focus,
.ssiq-field select:focus,
.ssiq-field textarea:focus,
.ssiq-btn:focus-visible,
a:focus-visible {
	outline: 3px solid var(--ssiq-focus);
	outline-offset: 1px;
}
.ssiq-field p small { color: var(--ssiq-muted); font-size: var(--ssiq-fs-micro); }

.ssiq-field__error {
	color: var(--ssiq-error);
	font-size: var(--ssiq-fs-small);
	margin-top: var(--ssiq-space-2);
	display: none;
}
.ssiq-field.has-error input,
.ssiq-field.has-error select,
.ssiq-field.has-error textarea {
	border-color: var(--ssiq-error);
}
.ssiq-field.has-error .ssiq-field__error { display: block; }

/* Two-up field row (used by signup/funnel contact steps) */
.ssiq-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ssiq-space-4);
}
@media (max-width: 640px) {
	.ssiq-field-row { grid-template-columns: 1fr; }
}

.ssiq-choice-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ssiq-space-3);
}
.ssiq-choice-group label {
	position: relative;
	flex: 1 1 45%;
	border: 1px solid var(--ssiq-border);
	border-radius: var(--ssiq-radius-md);
	padding: var(--ssiq-space-4);
	min-height: var(--ssiq-tap-min);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: 500;
	text-align: center;
	transition: border-color .15s ease, background-color .15s ease;
}
.ssiq-choice-group input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.ssiq-choice-group label:hover { border-color: var(--ssiq-steel-500); }
.ssiq-choice-group input:checked + span,
.ssiq-choice-group label:has(input:checked) {
	background: var(--ssiq-primary-tint);
	color: var(--ssiq-primary-dark);
	border-color: var(--ssiq-primary);
	font-weight: 700;
}
.ssiq-choice-group input:focus-visible + span {
	outline: 3px solid var(--ssiq-focus);
	outline-offset: 2px;
}

.ssiq-consent {
	font-size: var(--ssiq-fs-small);
	color: var(--ssiq-ink-soft);
	background: var(--ssiq-bg-alt);
	border: 1px solid transparent;
	border-radius: var(--ssiq-radius-md);
	padding: var(--ssiq-space-4);
	line-height: 1.5;
}
.ssiq-consent label { display: flex; gap: var(--ssiq-space-2); align-items: flex-start; font-weight: 400; }
.ssiq-consent input { margin-top: 4px; flex: none; }
.ssiq-consent a { color: var(--ssiq-primary-dark); text-decoration: underline; }
.ssiq-consent.has-error { border-color: var(--ssiq-error); }
.ssiq-consent.has-error .ssiq-field__error { display: block; }

.ssiq-captcha-wrap { margin: var(--ssiq-space-4) 0; }
/* Undo GeneratePress's global `iframe{max-width:100%}` reset specifically
   for hCaptcha: its own "compact" data-size (set in form.php's inline
   script, before the hCaptcha script parses the div) already handles
   narrow viewports correctly, so the iframe should render at whatever
   fixed size hCaptcha itself chose rather than being squeezed further. */
.ssiq-captcha-wrap iframe { max-width: none; }

.ssiq-reassurance {
	display: flex;
	gap: var(--ssiq-space-2);
	align-items: center;
	font-size: var(--ssiq-fs-small);
	color: var(--ssiq-ink-soft);
	background: var(--ssiq-steel-100);
	border-radius: var(--ssiq-radius-md);
	padding: var(--ssiq-space-3) var(--ssiq-space-4);
}
.ssiq-reassurance svg { flex: none; color: var(--ssiq-steel-700); }

.ssiq-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ssiq-space-3);
	margin-top: var(--ssiq-space-5);
}

/* ==========================================================================
   7. PROGRESS
   ========================================================================== */
.ssiq-progress {
	display: flex;
	gap: var(--ssiq-space-2);
	margin-bottom: var(--ssiq-space-5);
}
.ssiq-progress__step {
	flex: 1;
	height: 8px;
	border-radius: var(--ssiq-radius-pill);
	background: var(--ssiq-border);
}
.ssiq-progress__step.is-complete,
.ssiq-progress__step.is-current {
	background: var(--ssiq-primary);
}
.ssiq-progress-label {
	display: flex;
	justify-content: space-between;
	font-size: var(--ssiq-fs-micro);
	color: var(--ssiq-muted);
	margin-bottom: var(--ssiq-space-2);
}

/* ==========================================================================
   8. BADGES & ALERTS
   ========================================================================== */
.ssiq-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--ssiq-fs-micro);
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 4px 10px;
	border-radius: var(--ssiq-radius-pill);
	background: var(--ssiq-bg-alt);
	color: var(--ssiq-muted);
}
.ssiq-badge--accent { background: var(--ssiq-primary-tint); color: var(--ssiq-primary-dark); }
.ssiq-badge--success { background: var(--ssiq-success-bg); color: var(--ssiq-success); }
.ssiq-badge--warning { background: var(--ssiq-warning-bg); color: var(--ssiq-warning); }
.ssiq-badge--outline { background: transparent; border: 1px solid var(--ssiq-border); }

.ssiq-lead-card__badge {
	display: inline-block;
	font-size: var(--ssiq-fs-micro);
	font-weight: 700;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: var(--ssiq-radius-pill);
	background: var(--ssiq-bg-alt);
	color: var(--ssiq-muted);
}

.ssiq-alert {
	display: flex;
	gap: var(--ssiq-space-2);
	align-items: flex-start;
	border-radius: var(--ssiq-radius-md);
	padding: var(--ssiq-space-3) var(--ssiq-space-4);
	margin-bottom: var(--ssiq-space-4);
	font-size: var(--ssiq-fs-small);
}
.ssiq-alert--error { background: var(--ssiq-error-bg); color: var(--ssiq-error); }
.ssiq-alert--success { background: var(--ssiq-success-bg); color: var(--ssiq-success); }
.ssiq-alert--warning { background: var(--ssiq-warning-bg); color: var(--ssiq-warning); }
.ssiq-alert--info { background: var(--ssiq-info-bg); color: var(--ssiq-info); }

.ssiq-purchase-report-status {
	font-size: var(--ssiq-fs-small);
	font-weight: 600;
	padding: 6px 12px;
	border-radius: var(--ssiq-radius-pill);
	display: inline-block;
	background: var(--ssiq-warning-bg);
	color: var(--ssiq-warning);
}

@media (max-width: 480px) {
	.ssiq-choice-group label { flex: 1 1 100%; }
}

/* ==========================================================================
   9. MODAL / DIALOG (Report a Problem)
   ========================================================================== */
.ssiq-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(22, 34, 47, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ssiq-space-4);
	z-index: 1000;
}
.ssiq-modal {
	background: var(--ssiq-bg);
	border-radius: var(--ssiq-radius-lg);
	padding: var(--ssiq-space-6);
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--ssiq-shadow-lg);
}
.ssiq-modal h2 { margin-top: 0; font-size: var(--ssiq-fs-h4); }
.ssiq-modal p { color: var(--ssiq-ink-soft); font-size: var(--ssiq-fs-small); }

/* ==========================================================================
   10. HEADER / NAVIGATION
   Built entirely on GeneratePress's own hooks/markup (no header.php
   override). One structural fix is required beyond CSS: this install's
   `generate_settings` option was persisted with GP's legacy-upgrade
   default `nav_position_setting => nav-below-header`, which hooks the
   primary nav to `generate_after_header` — a second row rendered after
   the whole <header>, entirely separate from the logo. The
   `generate_navigation_location` filter in functions.php corrects this to
   `nav-float-right` (GP's own current default), which hooks the nav to
   `generate_after_header_content` instead — inside `.inside-header`,
   the same flex row as the logo (GP's main.css already sets
   `.inside-header{display:flex;align-items:center}` unconditionally).
   Everything below restyles that single-row result: Paper background,
   transparent nav (removing GP's default dark nav-bar/current-item
   colors), compact link padding to hit a ~76px header, a brand-amber CTA,
   and a text/underline active-state indicator instead of GP's gray block.
   ========================================================================== */
.site-header,
#masthead {
	background: #F2F2F3; /* Paper — Final Assets/IMPLEMENTATION.md brand color */
	border-bottom: 1px solid var(--ssiq-border-soft);
}
.site-header .inside-header {
	max-width: var(--ssiq-width-wide) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-top: 18px;
	padding-bottom: 18px;
	box-sizing: border-box;
}
.site-header .inside-navigation {
	max-width: none !important;
	padding: 0 !important;
}
.main-navigation,
.main-navigation ul ul {
	background: transparent !important;
}
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--ssiq-ink) !important;
	background: transparent !important;
	font-weight: 500;
	line-height: 1;
	padding-top: 10px;
	padding-bottom: 10px;
}
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a {
	color: var(--ssiq-primary-dark) !important;
	background: transparent !important;
}
/* Active state: a small underline indicator, not GP's default gray block. */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--ssiq-primary-dark) !important;
	background: transparent !important;
	box-shadow: inset 0 -2px 0 var(--ssiq-primary);
}
/* Concept B — Match logo: solarsiteiq-symbol-small-cut.svg + the wordmark
   as live HTML text (Final Assets/IMPLEMENTATION.md's recommended, font-
   independent composition — an <img>/inline-SVG of the full wordmark
   depends on Barlow having loaded to avoid clipping; this doesn't). One
   compact lockup is used at every width, so nothing needs to swap at
   mobile breakpoints and the wordmark is never squeezed illegibly. */
.ssiq-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.ssiq-logo__icon { flex-shrink: 0; }
.ssiq-word {
	font-family: Barlow, system-ui, sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	letter-spacing: .002em;
	color: #1D2D3D;
	white-space: nowrap;
}
.ssiq-word .k-r { letter-spacing: .0143em; }
.ssiq-word .k-i { letter-spacing: .006em; }
.ssiq-logo--dark .ssiq-word { color: #F2F2F3; }

/* Mobile header: logo + Menu/Close control in one compact row.
   GP's own @media(max-width:768px){.inside-header{flex-direction:column}}
   (main.css) is what stacks the logo above the nav into two full-width
   rows — that's the structural cause, corrected here by putting the row
   back to flex-direction:row for our header specifically (nowrap, so the
   row itself never breaks); GP's own nav/menu-toggle JS, ARIA state,
   Escape-key handling, and the existing expand/collapse logic in
   #site-navigation are untouched. align-items:flex-start (not center) is
   deliberate: it keeps the logo pinned to this same top row when the menu
   expands, rather than re-centering it against the now-much-taller
   expanded nav box — logo and toggle are given matching heights below so
   the closed row still reads as vertically centered. */
@media (max-width: 768px) {
	/* GeneratePress's mobile stylesheet uses float layout for the header
	   (`.main-navigation{float:right}`), not flexbox — the site's
	   `structure` setting loads assets/css/style.css, not the flexbox
	   main.css some GP versions ship. The stack happened because
	   `button.menu-toggle{width:100%}` (GP's own mobile.css) resolves
	   against an ambiguous shrink-to-fit float, in practice claiming
	   enough width that the toggle doesn't fit beside the logo on one
	   line and drops to the next. display:flex here is the structural
	   fix — explicit, predictable sizing instead of float-fit guessing. */
	/* CSS Grid, not flex, is what makes this work cleanly: the toggle
	   button lives inside <nav>, nested below .site-logo's sibling
	   position, so nav's own box needs to span the FULL header width
	   (matching the logo's own left edge) for the expanded list to open
	   truly full-width and left-aligned — while the logo needs to stay
	   pinned at that same left edge too. Grid lets both share the same
	   row/column space (nav spans column 1/-1, logo sits in column 1)
	   without any position:absolute, negative margin, or magic-number
	   offset: they simply don't visually collide, because nav's own
	   children float right (the toggle) or clear below (the opened list)
	   rather than occupying the logo's own top-left corner. */
	.site-header .inside-header {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
		padding: 15px var(--ssiq-space-4) !important;
	}
	/* .inside-header also carries GP's `grid-container` class, whose
	   ::before/::after clearfix pseudo-elements (unsemantic-grid.css)
	   would otherwise become extra, unwanted grid items. */
	.site-header .inside-header::before,
	.site-header .inside-header::after {
		content: none;
		display: none;
	}
	.site-header .site-logo {
		grid-column: 1;
		grid-row: 1;
		height: 36px;
		display: flex;
		align-items: center;
		float: none;
		margin-bottom: 0 !important;
	}
	.site-header .main-navigation {
		grid-column: 1 / -1;
		grid-row: 1;
		float: none;
	}
	.site-header button.menu-toggle {
		float: right;
		width: auto;
		height: 36px;
		line-height: 1;
		padding: 0 var(--ssiq-space-2);
		display: flex;
		align-items: center;
	}
	/* The expanded menu list is a sibling of the toggle, floated below it
	   by clearing the toggle's float and spanning nav's full-width box —
	   GP's own clearfix pattern, not a new technique. */
	.site-header #primary-menu {
		float: none;
		clear: both;
		width: 100%;
	}
	.site-header .main-navigation .main-nav ul li a {
		text-align: left;
		justify-content: flex-start;
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.site-header .main-navigation .main-nav ul li.menu-item-ssiq-cta {
		width: 100%;
		margin-top: var(--ssiq-space-2);
		box-sizing: border-box;
	}
	.site-header .main-navigation .main-nav ul li.menu-item-ssiq-cta > a {
		display: flex;
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

/* CTA + secondary utility items, matched via a CSS class added through the
   nav_menu_css_class filter (functions.php) rather than by editing menu
   markup in the database. */
.main-navigation .main-nav ul li.menu-item-ssiq-cta > a,
.menu-item-ssiq-cta > a {
	background: var(--ssiq-amber) !important;
	color: #fff !important;
	border-radius: var(--ssiq-radius-pill);
	padding: 10px 20px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}
.main-navigation .main-nav ul li.menu-item-ssiq-cta > a:hover,
.menu-item-ssiq-cta > a:hover { background: var(--ssiq-amber-dark) !important; }
/* Installer Login is a standard nav link — no special treatment beyond
   the shared .main-navigation styling above (brand rule: amber is
   reserved for the logo node and the one primary CTA action only). */

/* ==========================================================================
   11. FOOTER
   Rendered via the generate_before_footer_content / generate_copyright
   hooks in functions.php — no footer.php override.
   ========================================================================== */
.ssiq-footer {
	background: var(--ssiq-navy-800);
	color: #cbd6e0;
	padding: var(--ssiq-space-8) var(--ssiq-space-4) var(--ssiq-space-6);
}
.ssiq-footer__inner {
	max-width: var(--ssiq-width-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--ssiq-space-6);
	padding-bottom: var(--ssiq-space-6);
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ssiq-footer__tagline { margin-top: var(--ssiq-space-3); font-size: var(--ssiq-fs-small); color: #a9b8c4; max-width: 300px; }
.ssiq-footer__col-title { color: #fff; font-weight: 700; font-size: var(--ssiq-fs-small); margin-bottom: var(--ssiq-space-3); }
.ssiq-footer__col a {
	display: block;
	color: #c3cfd9;
	text-decoration: none;
	font-size: var(--ssiq-fs-small);
	margin-bottom: var(--ssiq-space-2);
}
.ssiq-footer__col a:hover { color: #fff; }
.ssiq-footer .copyright-bar,
.ssiq-footer .site-info {
	max-width: var(--ssiq-width-wide);
	margin: var(--ssiq-space-4) auto 0;
	font-size: var(--ssiq-fs-micro);
	color: #8fa0ae;
}
@media (max-width: 900px) {
	.ssiq-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.ssiq-footer__inner { grid-template-columns: 1fr; }
}

/* GP's own footer container needs to be full-bleed behind our content */
.footer-widgets, footer.site-info, #colophon { background: var(--ssiq-navy-800); }
#colophon .copyright-bar { border-top: none; }

/* ==========================================================================
   12. HOMEPAGE / MARKETING
   ========================================================================== */
.ssiq-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--ssiq-space-7);
	align-items: center;
	max-width: var(--ssiq-width-wide);
	margin: 0 auto;
	padding: var(--ssiq-space-8) var(--ssiq-space-4);
}
.ssiq-hero h1 { margin-bottom: var(--ssiq-space-4); }
.ssiq-hero__reassure { display: flex; gap: var(--ssiq-space-5); flex-wrap: wrap; margin-top: var(--ssiq-space-4); font-size: var(--ssiq-fs-small); color: var(--ssiq-ink-soft); }
.ssiq-hero__reassure span { display: flex; align-items: center; gap: 6px; }
.ssiq-hero__secondary-link { margin: var(--ssiq-space-3) 0 0; font-size: var(--ssiq-fs-small); }
.ssiq-hero__secondary-link a { font-weight: 600; text-decoration: none; }
.ssiq-hero__panel {
	background: var(--ssiq-bg-alt);
	border: 1px solid var(--ssiq-border-soft);
	border-radius: var(--ssiq-radius-lg);
	padding: var(--ssiq-space-6);
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--ssiq-space-4);
}

/* Address-first hero input (Group 2, Workstream 2) — the hero's primary
   interaction. No overflow:hidden on any ancestor here (the hero, its
   grid columns, the field wrapper) so the Google Places (New) autocomplete
   dropdown is never clipped; a relative position + generous z-index keeps
   it layered above the panel/trust row/sections that follow rather than
   letting a later section's own stacking context intercept it. */
.ssiq-hero__address-form { margin-top: var(--ssiq-space-5); }
.ssiq-hero__address-field {
	position: relative;
	z-index: 5;
	margin-bottom: 0;
}
.ssiq-hero__address-row {
	display: flex;
	gap: var(--ssiq-space-3);
	align-items: flex-start;
}
.ssiq-hero__address-row input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
}
.ssiq-hero__address-row .ssiq-btn {
	flex: none;
	white-space: nowrap;
}
@media (max-width: 560px) {
	.ssiq-hero__address-row {
		flex-direction: column;
		align-items: stretch;
	}
	.ssiq-hero__address-row .ssiq-btn {
		width: 100%;
	}
}

@media (max-width: 900px) {
	.ssiq-hero { grid-template-columns: 1fr; padding-top: var(--ssiq-space-6); }
	/* The address input must stay above the fold on mobile — the "your
	   home, assessed" preview panel now follows it in source order
	   instead of being pulled ahead with order:-1 (its prior behavior,
	   which pushed the address field below the fold on narrow screens). */
	.ssiq-hero__panel { min-height: 220px; }
}

.ssiq-cta-band {
	background: var(--ssiq-navy-800);
	color: #eef2f6;
	border-radius: var(--ssiq-radius-lg);
	padding: var(--ssiq-space-6);
	display: flex;
	align-items: center;
	gap: var(--ssiq-space-5);
	flex-wrap: wrap;
}
.ssiq-cta-band h3 { color: #fff; margin: 0 0 var(--ssiq-space-2); }
.ssiq-cta-band p { margin: 0; color: #c3cfd9; max-width: 620px; }
.ssiq-cta-band__actions { margin-left: auto; display: flex; gap: var(--ssiq-space-3); flex-wrap: wrap; }

.ssiq-placeholder-panel {
	border: 2px dashed var(--ssiq-border);
	border-radius: var(--ssiq-radius-md);
	background: var(--ssiq-bg-alt);
	padding: var(--ssiq-space-5);
	color: var(--ssiq-muted);
	font-size: var(--ssiq-fs-small);
}

/* ==========================================================================
   13. INSTALLER PORTAL (app shell)
   ========================================================================== */
.ssiq-portal-topbar {
	display: flex;
	align-items: center;
	gap: var(--ssiq-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--ssiq-space-5);
	padding-bottom: var(--ssiq-space-4);
	border-bottom: 1px solid var(--ssiq-border);
}
.ssiq-portal-topbar h1 { font-size: var(--ssiq-fs-h3); margin: 0; }
.ssiq-portal-topbar__logout { margin-left: auto; font-size: var(--ssiq-fs-small); }

.ssiq-portal-tabs {
	display: flex;
	gap: var(--ssiq-space-2);
	margin-bottom: var(--ssiq-space-5);
	flex-wrap: wrap;
}
.ssiq-portal-tabs button[data-tab] {
	background: transparent;
	border: 1px solid var(--ssiq-border);
	border-radius: var(--ssiq-radius-pill);
	padding: 10px 18px;
	font-weight: 600;
	font-size: var(--ssiq-fs-small);
	color: var(--ssiq-ink-soft);
	cursor: pointer;
	min-height: var(--ssiq-tap-min);
}
.ssiq-portal-tabs button[data-tab].is-active,
.ssiq-portal-tabs button[data-tab]:hover {
	background: var(--ssiq-primary-tint);
	color: var(--ssiq-primary-dark);
	border-color: var(--ssiq-primary-tint);
}

/* Lead cards render into these two IDs (portal.js) as plain block content —
   turning the container into a grid needs no JS change. */
#ssiq-available-list,
#ssiq-purchased-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ssiq-space-4);
	align-items: start;
}
@media (max-width: 860px) {
	#ssiq-available-list,
	#ssiq-purchased-list { grid-template-columns: 1fr; }
}

.ssiq-lead-card {
	border: 1px solid var(--ssiq-border);
	border-radius: var(--ssiq-radius-md);
	padding: var(--ssiq-space-4);
	margin-bottom: 0;
	background: var(--ssiq-bg);
	box-shadow: var(--ssiq-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: var(--ssiq-space-2);
}
.ssiq-lead-card h3 { font-size: 17px; margin: var(--ssiq-space-1) 0; }
.ssiq-lead-card p { margin: 0; color: var(--ssiq-ink-soft); font-size: var(--ssiq-fs-small); }
.ssiq-lead-card .ssiq-btn,
.ssiq-lead-card button.ssiq-btn {
	margin-top: var(--ssiq-space-2);
	align-self: flex-start;
}

/* ==========================================================================
   14. EDITORIAL / CONTENT (blog, guides, geo & incentive pages)
   ========================================================================== */
.ssiq-content-page .entry-title,
.ssiq-content-page h1 { font-size: var(--ssiq-fs-h1); }
.ssiq-content-page__meta {
	font-size: var(--ssiq-fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ssiq-primary-dark);
	margin-bottom: var(--ssiq-space-2);
}
.ssiq-breadcrumb {
	font-size: var(--ssiq-fs-small);
	color: var(--ssiq-muted);
	margin-bottom: var(--ssiq-space-4);
}
.ssiq-breadcrumb a { color: var(--ssiq-muted); text-decoration: underline; }
.ssiq-content-page .entry-content,
.ssiq-content-page__body {
	font-size: var(--ssiq-fs-body);
	line-height: var(--ssiq-lh-body);
	color: var(--ssiq-ink-soft);
}
.ssiq-content-page__body h2 { margin-top: var(--ssiq-space-6); }
.ssiq-content-page__body ul,
.ssiq-content-page__body ol { padding-left: 1.3em; }

.ssiq-guide-card {
	border: 1px solid var(--ssiq-border-soft);
	border-radius: var(--ssiq-radius-md);
	overflow: hidden;
	background: var(--ssiq-bg);
	box-shadow: var(--ssiq-shadow-sm);
}
.ssiq-guide-card__thumb {
	aspect-ratio: 16 / 9;
	background: var(--ssiq-bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ssiq-muted);
	font-size: var(--ssiq-fs-micro);
}
.ssiq-guide-card__body { padding: var(--ssiq-space-4); }
.ssiq-guide-card h3 { font-size: 18px; margin: var(--ssiq-space-2) 0; }
.ssiq-guide-card p { margin: 0; font-size: var(--ssiq-fs-small); color: var(--ssiq-ink-soft); }
.ssiq-guide-card a { text-decoration: none; color: inherit; }

/* ==========================================================================
   15. QUOTE APP (get-quote two-column assessment layout)
   Concept B — Match "application-like" direction (docs/DECISIONS.md
   D-028): a Platform Navy sidebar (brand, 4-step list, trust statement)
   beside a Paper main workspace. Collapses to a single column on mobile,
   where the sidebar becomes a compact top bar and the existing compact
   progress bar (already in the main column) carries step context alone.
   ========================================================================== */
.ssiq-quote-app {
	display: grid;
	grid-template-columns: minmax(240px, 300px) 1fr;
	max-width: var(--ssiq-width-app);
	margin: var(--ssiq-space-6) auto var(--ssiq-space-8);
	box-shadow: var(--ssiq-shadow-md);
	border: 1px solid var(--ssiq-border);
	/* No overflow:hidden here (rounded corners come from each side's own
	   border-radius instead) — clipping this container would also clip
	   the Google Places autocomplete dropdown if it ever renders inside
	   this box rather than as a body-level overlay. */
}
.ssiq-quote-app__sidebar {
	background: var(--ssiq-navy-800);
	color: #cbd6e0;
	padding: var(--ssiq-space-6) var(--ssiq-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--ssiq-space-6);
	border-radius: var(--ssiq-radius-lg) 0 0 var(--ssiq-radius-lg);
}
.ssiq-quote-app__main { border-radius: 0 var(--ssiq-radius-lg) var(--ssiq-radius-lg) 0; }
.ssiq-quote-app__brand .ssiq-logo__icon { flex-shrink: 0; }
.ssiq-quote-app__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ssiq-space-4);
}
.ssiq-quote-app__step {
	display: flex;
	align-items: center;
	gap: var(--ssiq-space-3);
	color: #93a3b3;
	font-size: var(--ssiq-fs-small);
	font-weight: 500;
}
.ssiq-quote-app__step-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
	color: #cbd6e0;
}
.ssiq-quote-app__step.is-current { color: #fff; font-weight: 700; }
.ssiq-quote-app__step.is-current .ssiq-quote-app__step-num {
	background: var(--ssiq-amber);
	border-color: var(--ssiq-amber);
	color: #fff;
}
.ssiq-quote-app__step.is-complete { color: #cbd6e0; }
.ssiq-quote-app__step.is-complete .ssiq-quote-app__step-num {
	background: var(--ssiq-steel-400);
	border-color: var(--ssiq-steel-400);
	color: var(--ssiq-navy-900);
	font-size: 0;
}
.ssiq-quote-app__step.is-complete .ssiq-quote-app__step-num::after {
	content: "✓";
	font-size: 13px;
}
.ssiq-quote-app__trust {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--ssiq-space-2);
	font-size: var(--ssiq-fs-micro);
	color: #93a3b3;
	padding-top: var(--ssiq-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ssiq-quote-app__trust p { display: flex; align-items: center; gap: var(--ssiq-space-2); margin: 0; }
.ssiq-quote-app__trust svg { flex-shrink: 0; color: var(--ssiq-steel-400); }

.ssiq-quote-app__main {
	background: #F2F2F3;
	padding: var(--ssiq-space-6);
}
.ssiq-quote-app .ssiq-progress-label { justify-content: flex-start; gap: var(--ssiq-space-3); }
.ssiq-quote-app .ssiq-step__hint {
	margin: var(--ssiq-space-2) 0 0;
	font-size: var(--ssiq-fs-small);
	font-weight: 400;
	color: var(--ssiq-ink-soft);
}
.ssiq-quote-app legend { display: block; width: 100%; margin-bottom: var(--ssiq-space-5); }
.ssiq-quote-app .ssiq-field__help {
	margin: var(--ssiq-space-2) 0 0;
	font-size: var(--ssiq-fs-micro);
	color: var(--ssiq-muted);
}
.ssiq-checkbox-row { display: flex; align-items: flex-start; gap: var(--ssiq-space-2); font-weight: 400 !important; }
.ssiq-checkbox-row input { margin-top: 3px; flex: none; }

/* Selection communicated by more than color: a checkmark badge, not just
   a tint/border change (existing .ssiq-choice-group rule two rules up
   still does the tint/border/bold part). */
.ssiq-choice-group label { position: relative; }
.ssiq-choice-group label::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--ssiq-border);
	background: var(--ssiq-bg);
}
.ssiq-choice-group label:has(input:checked)::after {
	border-color: var(--ssiq-primary);
	background: var(--ssiq-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* CTA action gets the same brand-amber treatment as the header's one
   primary action, so "Get My Free Quote" reads as the single confirming
   action of the flow — Back/Continue stay neutral. */
.ssiq-btn--cta {
	background: var(--ssiq-amber);
	border-color: var(--ssiq-amber);
}
.ssiq-btn--cta:hover { background: var(--ssiq-amber-dark); border-color: var(--ssiq-amber-dark); }
.ssiq-btn--cta.is-loading { color: transparent; position: relative; }
.ssiq-btn--cta.is-loading::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	animation: ssiq-spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.ssiq-btn--cta.is-loading::after { animation-duration: 1.4s; }
}
@keyframes ssiq-spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
	.ssiq-quote-app {
		grid-template-columns: 1fr;
		margin: var(--ssiq-space-4) var(--ssiq-space-3) var(--ssiq-space-7);
	}
	.ssiq-quote-app__sidebar {
		flex-direction: row;
		align-items: center;
		gap: var(--ssiq-space-4);
		padding: var(--ssiq-space-4);
		border-radius: var(--ssiq-radius-md) var(--ssiq-radius-md) 0 0;
	}
	.ssiq-quote-app__steps,
	.ssiq-quote-app__trust {
		display: none;
	}
	.ssiq-quote-app__main {
		padding: var(--ssiq-space-5) var(--ssiq-space-4) var(--ssiq-space-6);
		border-radius: 0 0 var(--ssiq-radius-md) var(--ssiq-radius-md);
	}
}

/* Homeowner funnel confirmation state: reuses .ssiq-confirm-card/
   .ssiq-confirm-badge/.ssiq-confirm-actions (§17) rather than duplicating
   success-state styling — this instance stays inside the quote-app's own
   main workspace (sidebar/brand still visible) instead of navigating to
   the standalone centered .ssiq-container--confirm layout used post-
   Checkout. A max-width keeps the single "Return to homepage" action from
   stretching full-bleed on a wide desktop viewport. */
#ssiq-funnel-confirmation {
	max-width: 420px;
	margin: var(--ssiq-space-6) auto;
	padding: var(--ssiq-space-5) 0;
}
#ssiq-funnel-confirmation h1 {
	font-size: var(--ssiq-fs-h2);
}

/* ==========================================================================
   16. INSTALLER LOGIN (compact centered auth panel)
   ========================================================================== */
.ssiq-container--auth {
	max-width: 420px;
	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--ssiq-space-9) * 2);
}
.ssiq-auth-card {
	width: 100%;
	text-align: center;
}
.ssiq-auth-card .ssiq-logo {
	justify-content: center;
	margin-bottom: var(--ssiq-space-5);
}
.ssiq-auth-card__heading {
	font-size: var(--ssiq-fs-h3);
	margin: 0 0 var(--ssiq-space-2);
}
.ssiq-auth-card__lead {
	color: var(--ssiq-ink-soft);
	font-size: var(--ssiq-fs-small);
	margin: 0 0 var(--ssiq-space-5);
}
.ssiq-auth-card form,
.ssiq-auth-card .ssiq-alert {
	text-align: left;
}
.ssiq-auth-card__forgot {
	margin: var(--ssiq-space-2) 0 0;
	text-align: right;
	font-size: var(--ssiq-fs-small);
}
.ssiq-password-field {
	position: relative;
}
.ssiq-password-field input[type="password"],
.ssiq-password-field input[type="text"] {
	/* [type="password"] repeated here (matching the shared .ssiq-field
	   input[type="password"] rule's own specificity — one class + one
	   attribute selector each) so this override actually wins on its own
	   merits rather than relying on source order alone; a plain
	   `.ssiq-password-field input` selector was tried first and silently
	   lost to the shared rule's `padding: 12px 14px` shorthand, a real
	   defect found while building Group 2's regression test for this.
	   [type="text"] is included too since the toggle flips the input's
	   type attribute at runtime (revealed state). Reserves space for our
	   own toggle — previously 64px, sized only for a 56px-wide text button
	   flush against the right edge; see the Workstream 5 note below for
	   why that collided with Safari specifically. The icon toggle is
	   narrower and inset from the edge, so less padding is needed, with a
	   comfortable margin to spare at 200% zoom. */
	padding-right: 48px;
}
.ssiq-password-field__toggle {
	position: absolute;
	top: 0;
	right: 4px;
	bottom: 0;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	-webkit-appearance: none;
	appearance: none;
	color: var(--ssiq-muted);
	cursor: pointer;
}
.ssiq-password-field__toggle:hover,
.ssiq-password-field__toggle[aria-pressed="true"] {
	color: var(--ssiq-primary);
}
.ssiq-password-field__icon {
	width: 20px;
	height: 20px;
	pointer-events: none;
}

/* ---- Workstream 5: desktop Safari password show/hide defect ----
   Root cause (confirmed via CSS/markup analysis against WebKit's own
   documented behavior for this exact scenario — see docs/DECISIONS.md
   for the full investigation, including the environment limitation that
   prevented a live visual confirmation in this pass, and a precise manual
   Safari test case): desktop Safari draws its own AutoFill/"strong
   password" credentials icon INSIDE a password input's own padding box,
   flush to the right edge, whenever it has (or offers to save)
   credentials for that field. Chrome does not render an equivalent
   in-field icon the same way, which is why this was reported as
   Safari-only. That native icon occupied the same right-edge region our
   own absolutely-positioned toggle button did, so the two visually
   collided. `::-webkit-credentials-auto-fill-button` is WebKit's own
   documented, standards-adjacent (not a UA-sniffing hack — it simply does
   nothing in browsers that don't implement it) pseudo-element for exactly
   this control. Hiding it does NOT disable AutoFill or the password
   manager itself: Safari's own keychain-driven fill/save/suggest-password
   behavior is untouched, `autocomplete="current-password"` is unchanged,
   and no user-agent sniffing is used anywhere in this fix — only the one
   redundant duplicate icon that collided with our own, purpose-built,
   more accessible toggle is suppressed. */
input[type="password"]::-webkit-credentials-auto-fill-button {
	visibility: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
}
.ssiq-auth-divider {
	display: flex;
	align-items: center;
	gap: var(--ssiq-space-3);
	margin: var(--ssiq-space-5) 0;
	color: var(--ssiq-muted);
	font-size: var(--ssiq-fs-small);
}
.ssiq-auth-divider::before,
.ssiq-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--ssiq-border);
}
.ssiq-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ssiq-space-3);
	width: 100%;
	min-height: var(--ssiq-tap-primary, 48px);
	border: 1px solid var(--ssiq-border);
	border-radius: var(--ssiq-radius-md);
	background: var(--ssiq-bg);
	color: var(--ssiq-ink);
	font-size: var(--ssiq-fs-body);
	font-weight: 600;
	text-decoration: none;
}
.ssiq-google-btn:hover { background: var(--ssiq-bg-alt); }
.ssiq-google-btn__icon { flex-shrink: 0; width: 18px; height: 18px; }
.ssiq-auth-card__apply {
	margin: var(--ssiq-space-5) 0 0;
	font-size: var(--ssiq-fs-small);
	text-align: center;
}

/* ==========================================================================
   17. PURCHASE CONFIRMATION (post-Checkout return view)
   ========================================================================== */
.ssiq-container--confirm {
	max-width: 560px;
	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--ssiq-space-9) * 2);
}
.ssiq-confirm-card {
	width: 100%;
	text-align: center;
}
.ssiq-confirm-card h1 {
	font-size: var(--ssiq-fs-h3);
	margin: 0 0 var(--ssiq-space-3);
}
.ssiq-confirm-card p {
	color: var(--ssiq-ink-soft);
	margin: 0 0 var(--ssiq-space-5);
}
.ssiq-confirm-spinner {
	width: 40px;
	height: 40px;
	margin: 0 auto var(--ssiq-space-5);
	border: 3px solid var(--ssiq-border);
	border-top-color: var(--ssiq-primary);
	border-radius: 50%;
	animation: ssiq-spin 0.8s linear infinite;
}
@keyframes ssiq-spin {
	to { transform: rotate(360deg); }
}
.ssiq-confirm-badge {
	width: 56px;
	height: 56px;
	margin: 0 auto var(--ssiq-space-5);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ssiq-success-bg);
	color: var(--ssiq-success);
	font-size: 28px;
}
.ssiq-confirm-actions {
	flex-direction: column;
	align-items: stretch;
	gap: var(--ssiq-space-3);
}
.ssiq-confirm-actions .ssiq-btn {
	width: 100%;
}

/* ==========================================================================
   18. RESPONSIVE / MOBILE SAFETY NET
   ========================================================================== */
@media (max-width: 480px) {
	.ssiq-container { padding: var(--ssiq-space-4) var(--ssiq-space-3) var(--ssiq-space-7); }
	.ssiq-actions { flex-wrap: wrap; }
	.ssiq-btn--lg { width: 100%; }
	.ssiq-container--auth { min-height: 0; padding-top: var(--ssiq-space-6); }
	.ssiq-container--confirm { min-height: 0; padding-top: var(--ssiq-space-6); }
}

/* ==========================================================================
   19. COMP A INDUSTRIAL — INSTALLER AUTH PAGES (Apply, Login)
   Phase 0 UI/UX Group 2, Workstream 3/4. Scoped entirely to
   .ssiq-partner-masthead / .ssiq-partner-page (added only by
   partner-signup.php and portal/login.php) so none of this can affect any
   homeowner-facing page. Blue primary actions and Paper/light work
   surfaces are already the sitewide default (D-025's steel-blue primary,
   --ssiq-bg-alt) — this section adds what's specific to the installer
   surface: a dark-navy "SolarSiteIQ PARTNER" masthead, condensed
   industrial type for headings/labels/operational data (Barlow Condensed
   — the logo wordmark's own Barlow family, not a new one), tighter/denser
   spacing, square-ish controls, and structured section dividers. Orange
   appears exactly once here (.ssiq-partner-badge) — a narrow, documented
   extension of D-025's "amber only for the logo node + primary nav CTA"
   rule, still never a button fill.
   ========================================================================== */
.ssiq-partner-masthead {
	background: var(--ssiq-navy-900);
	color: #cbd6e0;
	padding: var(--ssiq-space-5) var(--ssiq-space-4);
}
.ssiq-partner-masthead__brand {
	max-width: var(--ssiq-width-wide);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: var(--ssiq-space-3);
}
.ssiq-partner-badge {
	display: inline-flex;
	align-items: center;
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--ssiq-amber);
	border-radius: 4px;
	padding: 3px 10px;
}
.ssiq-partner-masthead__tagline {
	max-width: var(--ssiq-width-wide);
	margin: var(--ssiq-space-2) auto 0;
	font-size: var(--ssiq-fs-small);
	color: #93a3b3;
}

/* Section wrapper applied by partner-signup.php / login.php around their
   existing .ssiq-container/.ssiq-card markup — narrows radius, tightens
   spacing, and swaps in the condensed industrial type for headings/
   labels/badges/operational data (form values, status text) without
   touching the shared .ssiq-card/.ssiq-field/.ssiq-btn component classes
   used everywhere else on the site. */
.ssiq-partner-page {
	background: var(--ssiq-bg-alt);
	padding-bottom: var(--ssiq-space-7);
}
.ssiq-partner-page .ssiq-eyebrow,
.ssiq-partner-page h1,
.ssiq-partner-page h2,
.ssiq-partner-page .ssiq-auth-card__heading,
.ssiq-partner-page .ssiq-partner-section__title,
.ssiq-partner-page .ssiq-badge,
.ssiq-partner-page label,
.ssiq-partner-page .ssiq-field__help,
.ssiq-partner-page .ssiq-purchase-report-status {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
}
.ssiq-partner-page h1,
.ssiq-partner-page h2,
.ssiq-partner-page .ssiq-auth-card__heading {
	font-weight: 700;
	letter-spacing: -0.005em;
}
.ssiq-partner-page label {
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	font-size: 13px;
}
.ssiq-partner-page .ssiq-card,
.ssiq-partner-page .ssiq-tile,
.ssiq-partner-page .ssiq-already-partner,
.ssiq-partner-page .ssiq-alert {
	border-radius: 4px;
}
.ssiq-partner-page .ssiq-card {
	background: var(--ssiq-bg);
	border-color: var(--ssiq-border);
}
.ssiq-partner-page .ssiq-field input[type="text"],
.ssiq-partner-page .ssiq-field input[type="email"],
.ssiq-partner-page .ssiq-field input[type="tel"],
.ssiq-partner-page .ssiq-field input[type="password"],
.ssiq-partner-page .ssiq-field select,
.ssiq-partner-page .ssiq-field textarea,
.ssiq-partner-page .ssiq-btn,
.ssiq-partner-page .ssiq-google-btn {
	border-radius: 4px;
}
.ssiq-partner-page .ssiq-field { margin-bottom: var(--ssiq-space-4); }

/* Structured information areas: a labeled divider ahead of each logical
   field group, standing in for the fieldset/legend boundaries the brief
   asks for ("strong divider lines and structured information areas")
   without changing the underlying <fieldset>/name attributes REST
   validation depends on. */
.ssiq-partner-section__title {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ssiq-ink-soft);
	margin: var(--ssiq-space-6) 0 var(--ssiq-space-4);
	padding-top: var(--ssiq-space-5);
	border-top: 2px solid var(--ssiq-border);
}
.ssiq-partner-page form > .ssiq-partner-section__title:first-child,
.ssiq-partner-page .ssiq-partner-section__title:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.ssiq-partner-field__optional {
	text-transform: none;
	font-weight: 400;
	color: var(--ssiq-muted);
	letter-spacing: normal;
}
.ssiq-partner-field__required-mark {
	color: var(--ssiq-error);
	margin-left: 2px;
}
.ssiq-partner-required-note {
	font-size: var(--ssiq-fs-micro);
	color: var(--ssiq-muted);
	margin: 0 0 var(--ssiq-space-5);
}

/* "What happens next?" — dense, structured strip rather than large tiles,
   consistent with "avoid large empty spaces" + "denser than the homeowner
   experience". */
.ssiq-partner-next-steps {
	max-width: var(--ssiq-width-form);
	margin: var(--ssiq-space-5) auto 0;
	background: var(--ssiq-bg);
	border: 1px solid var(--ssiq-border);
	border-radius: 4px;
	padding: var(--ssiq-space-4) var(--ssiq-space-5);
}
.ssiq-partner-next-steps__title {
	font-family: 'Barlow Condensed', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0 0 var(--ssiq-space-2);
	color: var(--ssiq-ink);
}
.ssiq-partner-next-steps p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
	.ssiq-partner-masthead { padding: var(--ssiq-space-4) var(--ssiq-space-3); }
}