/*
 * PCL Components — Progress bar, WhatsApp, shared bits
 */

/* === Scroll progress === */
#pcl-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 120;
	background: linear-gradient(90deg, var(--pcl-teal), var(--pcl-cyan), var(--pcl-mint));
	box-shadow: 0 0 12px rgba(140,235,239,.7);
}

/* === WhatsApp float === */
/* Defined in nav.css with teal/purple gradient to match brand */

/* === Quick Quote Form === */
.pcl-quick-quote {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.pcl-quick-quote .pcl-eyebrow { margin-bottom: 16px; }
.pcl-quick-quote h2 { margin-bottom: 12px; }
.pcl-quick-quote .pcl-sub { margin-bottom: 32px; }

.pcl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.pcl-form-field { margin-bottom: 0; }

.pcl-form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--pcl-mint);
  font-size: .85rem;
}

.pcl-form-field input,
.pcl-form-field select,
.pcl-form-field textarea {
  width: 100%;
  border: 1px solid var(--pcl-line-dark);
  border-radius: var(--pcl-r);
  padding: 12px 14px;
  background-color: rgba(255,255,255,.06);
  color: var(--pcl-text-inv);
  font-family: var(--pcl-body);
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}

.pcl-form-field input:focus,
.pcl-form-field select:focus,
.pcl-form-field textarea:focus {
  border-color: var(--pcl-cyan);
  outline: 2px solid rgba(140,235,239,.35);
  outline-offset: 1px;
}

.pcl-form-field input::placeholder {
  color: var(--pcl-text-inv-soft);
}

.pcl-form-note {
  margin-top: 16px;
  font-size: .8rem;
  color: var(--pcl-text-inv-soft);
  text-align: center;
}

@media (max-width: 640px) {
  .pcl-form-row { grid-template-columns: 1fr; }
}

/* === Motion system === */
@media (prefers-reduced-motion: no-preference) {
	.pcl-reveal {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
	}
	.pcl-reveal.pcl-in { opacity: 1; transform: none; }

	.pcl-stagger > * {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
	}
	.pcl-stagger.pcl-in > * { opacity: 1; transform: none; }
	.pcl-stagger.pcl-in > *:nth-child(1) { transition-delay: .05s; }
	.pcl-stagger.pcl-in > *:nth-child(2) { transition-delay: .14s; }
	.pcl-stagger.pcl-in > *:nth-child(3) { transition-delay: .23s; }
	.pcl-stagger.pcl-in > *:nth-child(4) { transition-delay: .32s; }
	.pcl-stagger.pcl-in > *:nth-child(5) { transition-delay: .41s; }
	.pcl-stagger.pcl-in > *:nth-child(6) { transition-delay: .50s; }
}

/* === Link distinguishability === */
.entry-content a,
.wp-block-column p a,
.wp-block-group p a,
.wp-block-quote a,
.wp-block-list a {
	color: #1a6d73;
	text-decoration: underline;
	text-decoration-color: rgba(26,109,115,.5);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry-content a:hover,
.wp-block-column p a:hover,
.wp-block-group p a:hover,
.wp-block-quote a:hover,
.wp-block-list a:hover {
	text-decoration-color: var(--pcl-teal);
}

/* === Forms (pcl-core) === */
.pcl-form label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--pcl-purple-ink); }

.pcl-form input[type="text"],
.pcl-form input[type="email"],
.pcl-form input[type="tel"],
.pcl-form input[type="number"],
.pcl-form textarea,
.pcl-form select {
	width: 100%;
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r);
	padding: 10px 14px;
	background-color: var(--pcl-white, #fff);
	color: var(--pcl-text);
	font-family: var(--pcl-body);
}

.pcl-form input:focus,
.pcl-form textarea:focus,
.pcl-form select:focus {
	border-color: var(--pcl-cyan);
	outline: 2px solid rgba(140,235,239,.35);
	outline-offset: 1px;
}

.pcl-form .pcl-field { margin-bottom: 20px; }
.pcl-form .pcl-required { color: var(--pcl-teal); }

.pcl-form-status { border-radius: var(--pcl-r); padding: 12px 16px; margin-bottom: 20px; font-weight: 600; }
.pcl-form-status.is-success { background-color: #e7f5ee; color: #1a6b42; border: 1px solid #bfe5cf; }
.pcl-form-status.is-error { background-color: #fdecec; color: #a33a3a; border: 1px solid #f5c6c6; }
.pcl-form-status:empty { display: none; }
.pcl-form [aria-invalid="true"] { border-color: #c0392b; }

/* === Spotlight hover system === */
/* Pointer-tracked glow. spotlight.js injects <i class="pcl-spot"> into
   [data-spotlight] elements and sets --sp-x / --sp-y as percentages.
   Fine pointers + no reduced motion only. Paint-only, no filters. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
	[data-spotlight] { position: relative; overflow: hidden; }
	.pcl-spot {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 1;
		opacity: 0;
		transition: opacity .45s var(--pcl-ease);
		background: radial-gradient(340px circle at var(--sp-x, 50%) var(--sp-y, 50%), rgba(140,235,239,.16), transparent 62%);
	}
	[data-spotlight]:hover .pcl-spot { opacity: 1; }
	[data-spotlight]:hover .pcl-spot.hot { opacity: .9; }
}

/* === CTA band === */
.pcl-cta {
	background: linear-gradient(120deg, var(--pcl-purple-ink) 0%, var(--pcl-purple-deep) 100%);
	color: var(--pcl-text-inv);
	border-radius: var(--pcl-r);
	padding: clamp(32px, 5vw, 64px);
	position: relative;
	overflow: hidden;
}

.pcl-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(600px circle at 50% 0%, rgba(255,255,255,0.15), transparent 70%);
	pointer-events: none;
	z-index: 0;
	opacity: 0.3;
}

.pcl-cta::before {
	content: "";
	position: absolute;
	inset: -40%;
	pointer-events: none;
	background:
		radial-gradient(34% 40% at 22% 20%, rgba(106,64,141,.5) 0%, transparent 70%),
		radial-gradient(28% 36% at 80% 85%, rgba(140,235,239,.14) 0%, transparent 70%);
	z-index: 1;
}

.pcl-cta > * { position: relative; z-index: 2; }

.pcl-cta h2 { color: var(--pcl-mint); }

.pcl-cta .wp-block-button__link {
	background: linear-gradient(120deg, var(--pcl-cyan), var(--pcl-teal));
	color: var(--pcl-purple-ink);
}

.pcl-cta .wp-block-button__link:hover {
	background: linear-gradient(120deg, var(--pcl-teal), var(--pcl-cyan));
	color: var(--pcl-purple-ink);
	box-shadow: 0 10px 32px rgba(140,235,239,.4);
	transform: translateY(-2px);
}

/* === Contact strip === */
.pcl-contact-item {
	background-color: var(--pcl-white, #fff);
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r);
	padding: 20px 24px;
	box-shadow: 0 4px 16px rgba(106,64,141,.08);
	height: 100%;
}

.pcl-contact-item .pcl-icon { color: var(--pcl-cyan); }
.pcl-contact-item h3 { font-family: var(--pcl-display); margin: 8px 0 4px; font-size: 1rem; }

/* === Stats === */
.pcl-stat { text-align: center; }
.pcl-stat .pcl-stat-number { color: var(--pcl-purple-ink); font-family: var(--pcl-display); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 400; line-height: 1.1; }
.pcl-band-navy .pcl-stat-number { color: var(--pcl-mint); }
.pcl-stat .pcl-stat-label { color: var(--pcl-text-soft); margin-top: 4px; }
.pcl-band-navy .pcl-stat-label { color: var(--pcl-text-inv-soft); }

/* === Testimonials === */
.pcl-quote { background-color: var(--pcl-white, #fff); border-left: 4px solid var(--pcl-teal); border-radius: var(--pcl-r); padding: 24px; box-shadow: 0 4px 16px rgba(106,64,141,.08); }
.pcl-quote blockquote { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.6; }
.pcl-quote cite { color: var(--pcl-text-soft); font-style: normal; font-weight: 600; font-size: 0.875rem; }

/* === Dividers === */
.pcl-divider { width: 36px; height: 1px; background: linear-gradient(90deg, var(--pcl-cyan), var(--pcl-teal)); }
.pcl-divider-wide { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--pcl-line), transparent); }

/* === Band helpers === */
.pcl-band { background-color: var(--pcl-paper); }
.pcl-band-navy { background: linear-gradient(180deg, var(--pcl-purple-ink), var(--pcl-purple-deep) 130%); color: var(--pcl-text-inv); }
.pcl-band-navy h1, .pcl-band-navy h2, .pcl-band-navy h3, .pcl-band-navy h4, .pcl-band-navy .wp-block-heading { color: var(--pcl-mint); }
.pcl-band-navy a:not(.wp-block-button__link) { color: var(--pcl-cyan); }
.pcl-eyebrow { color: var(--pcl-teal-text); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; }
.pcl-eyebrow::before { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, var(--pcl-cyan), var(--pcl-teal)); }
.pcl-band-navy .pcl-eyebrow { color: var(--pcl-cyan); }