/* ============================================================================
   PolarLabs — Contact (route-scoped)  ·  DR-CONTACT-001
   ----------------------------------------------------------------------------
   Loaded ONLY on page-templates/template-contact.php, after `polarlabs-main`
   (see the route-scoped enqueue in inc/contact.php). The global stylesheet is
   never touched by this page.

   PRESENTATION ONLY. This page does not send, store, queue, ticket, route, or
   process a support message. The message form is a progressive enhancement that
   composes a prefilled email in the visitor's own mail app (JS), and the
   always-visible routed addresses are the no-JS direct route. No support claim
   (response time, hours, staffing, tracking) is asserted anywhere.

   A calm communication directory + intake surface in the "Reticle" language:
   coordinate eyebrow, editorial routing directory, custom intake form, a
   "what to include" guide, a compact self-service strip, a navy close band.
   Accents use the LIVE Polar Blue #2878F5 / --pl-ring focus (NOT the apply
   page's route-scoped #004EFF — that stays confined to /affiliates/apply).

   Surface rhythm:
     hero (navy) → routing directory (white, lifted, overlaps) → intake form
     (frost + white card) → what-to-include (white) → self-service (frost) →
     close (navy) → newsletter (global).

   Base form primitives (.pl-form / .pl-field / .pl-req / .pl-field__help /
   .pl-field__error) and tokens live in main.css; this file adds the .pl-support
   layout + treatments.
   ============================================================================ */

.pl-support {
	--pls-maxread: 62ch;
	background: var(--pl-surface-2, #f6f9fd);
	color: var(--pl-navy);
}

/* A component `display` rule (e.g. the prepared box) has the same specificity as
   the UA `[hidden]{display:none}` and loads later, so it would win and reveal an
   element the markup intends to hide. Keep `hidden` authoritative within scope. */
.pl-support [hidden] { display: none !important; }

/* Shared eyebrow — short accent rule + letter-spaced mono label. */
.pl-support__eyebrow {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-family: var(--pl-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pl-muted);
}
.pl-support__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	margin-right: 12px;
	background: var(--pl-blue);
}

/* ---- 1 · Hero (instrument-framed navy) ---- */
.pl-support__hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #0a1e38 0%, var(--pl-navy) 70%, var(--pl-navy-900) 100%);
	color: var(--pl-icy);
	/* DR-PDP-CONTACT-001: the routing directory no longer overlaps the hero, so the
	   oversized bottom pad (sized for that overlap) drops to a normal band. */
	padding-block: clamp(28px, 5vw, 48px) clamp(44px, 7vw, 76px);
}
.pl-support__reg {
	position: absolute;
	top: clamp(24px, 5vw, 52px);
	right: clamp(20px, 5vw, 64px);
	width: 46px;
	height: 46px;
	opacity: .5;
	pointer-events: none;
}
.pl-support__reg::before,
.pl-support__reg::after { content: ""; position: absolute; background: rgba(75, 150, 255, .55); }
.pl-support__reg::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-.5px); }
.pl-support__reg::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-.5px); }
.pl-support__crumb { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: var(--pl-icy-200); }
.pl-support__crumb a { color: var(--pl-icy-200); }
.pl-support__crumb a:hover { color: #fff; }
.pl-support__crumb .sep { opacity: .5; }
.pl-support__crumb [aria-current] { color: #fff; font-weight: 600; }
.pl-support__hero .pl-support__eyebrow { margin-top: clamp(20px, 4vw, 36px); color: var(--pl-icy-200); }
.pl-support__hero .pl-support__eyebrow::before { background: var(--pl-electric); }
.pl-support__eyebrow--coord { letter-spacing: .2em; }
.pl-support__title {
	font-family: var(--pl-font-heading);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.03em;
	font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem);
	line-height: 1.02;
	margin: 14px 0 0;
	max-width: 16ch;
}
.pl-support__lede { color: var(--pl-icy-200); font-size: 1.1rem; line-height: 1.55; max-width: 54ch; margin: 18px 0 0; }
.pl-support__ruo { color: var(--pl-icy-200); font-size: .86rem; opacity: .78; margin: 14px 0 0; }

/* ---- Shared centred stage width for the light sections ---- */
.pl-support__routes .pl-container,
.pl-support__form .pl-container,
.pl-support__guide .pl-container,
.pl-support__self .pl-container { max-width: 940px; }

/* ---- 2 · Routing directory (elevated white panel on the light surface) ---- */
/* DR-PDP-CONTACT-001 contrast fix: the section previously used a negative
   margin-top to lift the whole container (heading + card) up INTO the navy hero,
   which rendered the navy "Where to write / Choose the right contact" heading over
   the navy background (severe contrast loss). The overlap is removed: the heading
   now sits on the light frost surface (--pl-surface-2), navy-on-frost ~=15:1 AA,
   and the white routelist keeps its shadow so it still reads as an elevated panel. */
.pl-support__routes { position: relative; z-index: var(--pl-z-base); padding-block: clamp(40px, 6vw, 72px) 0; }
.pl-support__routes-head { margin-bottom: clamp(16px, 2.4vw, 22px); }
.pl-support__routes-title {
	font-family: var(--pl-font-heading);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--pl-navy);
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
	line-height: 1.05;
	margin: 12px 0 0;
}
.pl-support__routelist {
	list-style: none;
	margin: 0;
	padding: clamp(6px, 1vw, 12px) clamp(18px, 3vw, 34px);
	background: #fff;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-lg);
	box-shadow: 0 24px 54px rgba(2, 11, 22, .14);
}
.pl-support__route {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(16px, 2.6vw, 28px);
	padding: clamp(18px, 2.6vw, 24px) 0;
	border-top: 1px solid var(--pl-line);
}
.pl-support__route:first-child { border-top: 0; }
.pl-support__route-n { font-family: var(--pl-mono); font-size: .8rem; font-weight: 600; letter-spacing: .1em; color: var(--pl-blue-600, #1e63d8); }
.pl-support__route-body { display: block; min-width: 0; }
.pl-support__route-label { display: block; font-family: var(--pl-font-heading); font-weight: 700; font-size: 1.12rem; color: var(--pl-navy); letter-spacing: -.01em; }
.pl-support__route-desc { display: block; color: var(--pl-muted); font-size: .95rem; line-height: 1.45; margin-top: 3px; }
.pl-support__route-mail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-family: var(--pl-mono);
	font-size: .92rem;
	font-weight: 600;
	color: var(--pl-link);
}
.pl-support__route-mail:hover { color: var(--pl-blue-600, #1e63d8); }
.pl-support__arrow { flex: none; transition: transform var(--pl-dur) var(--pl-ease); }
.pl-support__route-mail:hover .pl-support__arrow { transform: translateX(3px); }

/* ---- 3 · Intake form (white card on frost) ---- */
.pl-support__form { padding-block: clamp(40px, 6vw, 72px) 0; }
.pl-support__card {
	background: #fff;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-lg);
	padding: clamp(24px, 4vw, 48px);
	box-shadow: 0 12px 34px rgba(2, 11, 22, .06);
}
.pl-support__cardhead { margin-bottom: clamp(22px, 3vw, 30px); padding-bottom: clamp(18px, 2.4vw, 24px); border-bottom: 1px solid var(--pl-line); }
.pl-support__cardtitle {
	font-family: var(--pl-font-heading);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--pl-navy);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
	line-height: 1.05;
	margin: 10px 0 0;
}
.pl-support__cardnote { color: var(--pl-muted); font-size: .95rem; line-height: 1.55; margin: 10px 0 0; max-width: var(--pls-maxread); }

.pl-support .pl-support__formel { display: grid; gap: clamp(18px, 2.4vw, 22px); }
.pl-support__formrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 22px); }

.pl-support .pl-field label { display: block; font-family: var(--pl-font-heading); font-weight: 700; color: var(--pl-navy); font-size: 1rem; margin-bottom: 9px; }
/* Required asterisk is meaningful visual text (the only sighted required cue), so
   it must clear WCAG 1.4.3 AA: --pl-blue #2878F5 is 4.12:1 on white (fails) →
   --pl-blue-600 #1E63D8 (5.5:1) keeps the blue accent and passes. */
.pl-support .pl-req { color: var(--pl-blue-600, #1e63d8); }
.pl-support .pl-optional { font-family: var(--pl-mono); font-weight: 600; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-muted); }
.pl-support .pl-field__help { display: block; font-size: .84rem; color: var(--pl-muted); margin: -2px 0 9px; line-height: 1.45; }
.pl-support .pl-field input,
.pl-support .pl-field textarea,
.pl-support .pl-field select {
	width: 100%;
	font: inherit;
	color: var(--pl-ink);
	background: #fff;
	border: 1.5px solid var(--pl-field-border);
	border-radius: var(--pl-radius-sm);
	padding: 15px 17px;
	min-height: 56px;
	font-size: 1.02rem;
	transition: border-color var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease);
}
.pl-support .pl-field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.pl-support .pl-field input:hover,
.pl-support .pl-field textarea:hover,
.pl-support .pl-field select:hover { border-color: var(--pl-navy); }
.pl-support .pl-field input:focus,
.pl-support .pl-field textarea:focus,
.pl-support .pl-field select:focus { border-color: var(--pl-blue); outline: none; box-shadow: var(--pl-ring); }
.pl-support .pl-field [aria-invalid="true"] { border-color: var(--pl-danger); }
.pl-support .pl-field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(184, 50, 50, .2); }
.pl-support .pl-field__error { margin: 8px 0 0; font-size: .84rem; font-weight: 600; color: var(--pl-danger); }

/* Custom select (native control, drawn chevron). */
.pl-support__select-wrap { position: relative; }
.pl-support__select-wrap select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 46px; cursor: pointer; }
.pl-support__select-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--pl-muted); pointer-events: none; }

.pl-support__submit { justify-self: start; }
.pl-support .pl-btn--lg { min-height: 54px; }
/* Primary-CTA keyboard focus (WCAG 2.4.7): the global :focus-visible box-shadow is
   hidden by .pl-btn--primary's own shadow — a clearly-visible offset outline instead. */
.pl-support__submit:focus-visible { outline: 3px solid var(--pl-navy); outline-offset: 2px; }
/* "Send message" disabled-until-valid: a clearly-muted slate with legible white text
   (5.4:1 AA); aria-disabled keeps it keyboard-focusable so an attempt still surfaces
   the inline errors, so the 1.4.3 inactive-control exception does not apply. */
.pl-support__submit[aria-disabled="true"],
.pl-support__submit[aria-disabled="true"]:hover { --btn-bg: #5a6b82; box-shadow: none; transform: none; cursor: not-allowed; }

.pl-support__nojs { padding: 18px; border: 1px solid var(--pl-line); border-left: 3px solid var(--pl-blue); border-radius: var(--pl-radius-sm); background: var(--pl-surface-2); }
.pl-support__nojs p { margin: 0 0 10px; color: var(--pl-navy); font-size: .95rem; line-height: 1.55; }
.pl-support__nojs p:last-child { margin-bottom: 0; }
.pl-support__nojs a { color: var(--pl-link); font-weight: 600; }

.pl-support__prepared { display: flex; align-items: flex-start; gap: 10px; padding: 16px; border: 1px solid var(--pl-line); border-left: 3px solid var(--pl-blue); border-radius: var(--pl-radius-sm); background: var(--pl-blue-050); }
.pl-support__prepared p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--pl-navy); }
.pl-support__prepared .pl-icon { flex: none; color: var(--pl-blue); margin-top: 2px; }

.pl-support__fine { color: var(--pl-muted); font-size: .9rem; line-height: 1.55; margin: 0; }
.pl-support__fine a { color: var(--pl-link); font-weight: 600; }

/* ---- 4 · What to include (checklist columns) ---- */
.pl-support__guide { padding-block: clamp(48px, 7vw, 84px) 0; }
.pl-support__guide-head { margin-bottom: clamp(22px, 3vw, 32px); }
.pl-support__guide-title {
	font-family: var(--pl-font-heading);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--pl-navy);
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem);
	line-height: 1.05;
	margin: 12px 0 0;
}
.pl-support__guide-intro { color: var(--pl-muted); font-size: 1rem; line-height: 1.6; margin: 12px 0 0; max-width: var(--pls-maxread); }
.pl-support__guidegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.pl-support__guidecol { border-top: 2px solid var(--pl-navy); padding-top: 16px; }
.pl-support__guidecol-h { font-family: var(--pl-font-heading); font-weight: 700; font-size: 1.02rem; color: var(--pl-navy); margin: 0 0 12px; letter-spacing: -.01em; }
.pl-support__guidelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-support__guidelist li { position: relative; padding-left: 22px; color: var(--pl-muted); font-size: .95rem; line-height: 1.5; }
.pl-support__guidelist li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border: 1.5px solid var(--pl-blue); border-radius: 2px; }

/* ---- 5 · Self-service strip (compact directional links) ---- */
.pl-support__self { padding-block: clamp(48px, 7vw, 84px) clamp(56px, 8vw, 96px); }
.pl-support__self-head { margin-bottom: clamp(18px, 2.4vw, 24px); }
.pl-support__self-title {
	font-family: var(--pl-font-heading);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--pl-navy);
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem);
	line-height: 1.05;
	margin: 12px 0 0;
}
/* Single-column full-width ledger, mirroring the routing directory idiom (one
   list pattern on the page); a bottom rule on the last row closes the ledger. */
.pl-support__selflist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.pl-support__selflink {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: clamp(15px, 2vw, 19px) 0;
	border-top: 1px solid var(--pl-line);
	color: var(--pl-navy);
}
.pl-support__selflist li:last-child .pl-support__selflink { border-bottom: 1px solid var(--pl-line); }
.pl-support__selflink-text { flex: 1 1 auto; min-width: 0; }
.pl-support__selflink-label { display: block; font-family: var(--pl-font-heading); font-weight: 700; font-size: 1.04rem; letter-spacing: -.01em; }
.pl-support__selflink-desc { display: block; color: var(--pl-muted); font-size: .9rem; margin-top: 2px; }
.pl-support__selflink .pl-support__arrow { color: var(--pl-blue); }
.pl-support__selflink:hover .pl-support__selflink-label { color: var(--pl-blue-600, #1e63d8); }
.pl-support__selflink:hover .pl-support__arrow { transform: translateX(3px); }

/* ---- 6 · Close band (navy) ---- */
.pl-support__close { background: linear-gradient(150deg, #0a1e38 0%, var(--pl-navy) 65%, var(--pl-navy-900) 100%); color: var(--pl-icy); padding-block: clamp(48px, 7vw, 84px); }
.pl-support__close-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 5vw, 56px); flex-wrap: wrap; }
.pl-support__close .pl-support__eyebrow { color: var(--pl-icy-200); }
.pl-support__close .pl-support__eyebrow::before { background: var(--pl-electric); }
.pl-support__close-title { font-family: var(--pl-font-heading); font-weight: 800; color: #fff; letter-spacing: -.025em; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.04; margin: 12px 0 0; }
.pl-support__close-copy { color: var(--pl-icy-200); font-size: 1.02rem; line-height: 1.55; margin: 14px 0 0; max-width: 46ch; }
.pl-support__close-actions { display: flex; align-items: center; gap: clamp(16px, 3vw, 26px); flex-wrap: wrap; }
.pl-support__close-actions .pl-btn--ghost-light:focus-visible { outline: 3px solid var(--pl-icy); outline-offset: 2px; }
.pl-support__close-link { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 2px; }
.pl-support__close-link:hover { border-color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
	.pl-support__formrow { grid-template-columns: 1fr; }
	.pl-support__guidegrid { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 30px); }
	/* Routing rows stack: index + label on a line, description under, address full-width. */
	.pl-support__route { grid-template-columns: auto 1fr; gap: 4px 14px; }
	.pl-support__route-body { grid-column: 2; }
	/* Let the mono address reflow in the stacked 1fr track so its nowrap min-content
	   can never floor the track wider than the card at 320-360px. */
	.pl-support__route-mail { grid-column: 2; justify-self: start; margin-top: 8px; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
	.pl-support__close-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
	.pl-support__submit { justify-self: stretch; width: 100%; }
	.pl-support__close-actions .pl-btn--ghost-light { width: 100%; text-align: center; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.pl-support__arrow { transition: none; }
}