/* ==========================================================================
   faq-grid.css — Shared "FAQ" accordion grid component
   Used by: page-services.php (and any future page)
   Markup: template-parts/faq-grid.php
   Prefix: col-faq- (historical, kept for stability — not collections-only)
   ========================================================================== */

.col-faq {
	background: #f8fafc;
	padding: 50px 0;
}

/* .col-faq's background is always light — the shared .lp-eyebrow /
   .lp-section-title em rules default to --nw-cyan, which is 2.51:1 on
   white (fails WCAG AA's 4.5:1). Scoped fix here so it's corrected on
   every page that uses this component, without touching those base
   rules (still correct on dark sections elsewhere). */
.col-faq .lp-eyebrow {
	color: var(--nw-cyan-text);
}

.col-faq .lp-section-title em {
	color: var(--nw-cyan-text) !important;
}

.col-faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 940px;
	margin: 0 auto;
}

.col-faq-col { display: flex; flex-direction: column; gap: 12px; }

.col-faq-item {
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--lp-radius-md, 12px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
}

.col-faq-item.is-open {
	border-color: rgba(0, 180, 216, .30);
	box-shadow: 0 4px 20px rgba(0, 180, 216, .08), 0 2px 8px rgba(0, 0, 0, .04);
}

/* !important: defeats Elementor's global kit button styles bleeding into these */
.col-faq-item__trigger {
	box-sizing: border-box !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	min-width: unset !important;
	width: 100% !important;
	padding: 24px 32px !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: inherit;
	font-size: var(--lp-text-base);
	font-weight: 700;
	line-height: 1.35 !important;
	color: var(--lp-text-dark);
	cursor: pointer;
	text-align: left;
	transition: color .25s;
}

/* Question keeps its normal color when open — only the card's
   border/shadow (.col-faq-item.is-open above) signals the open state. */

.col-faq-item__chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: #6b7280;
	flex-shrink: 0;
	transition: transform .3s;
}

.col-faq-item__chevron svg {
	width: 20px;
	height: 20px;
}

/* Diagonal arrow (↗ at rest) rotates 90° to point ↘ when open — no
   color change, no circle behind it, just the icon. */
.col-faq-item.is-open .col-faq-item__chevron {
	transform: rotate(90deg);
}

.col-faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease;
}

.col-faq-item.is-open .col-faq-item__answer { max-height: 400px; }

.col-faq-item__answer p {
	padding: 16px 32px 32px;
	border-top: 1px solid rgba(0, 0, 0, .06);
	font-size: var(--lp-text-sm);
	color: #4a5568;
	line-height: var(--lp-leading-body);
	margin: 0;
}

@media (max-width: 767px) {
	.col-faq-grid { grid-template-columns: 1fr; }
	.col-faq-item__trigger { padding: 18px 20px !important; }
	.col-faq-item__answer p { padding: 12px 20px 20px !important; }
}


/* ── Dark variant — for sections on a dark page background ─────────────────
   Usage: get_template_part( 'template-parts/faq-grid', null, [ 'variant' => 'dark', ... ] ) */
.col-faq--dark {
	background: transparent;
}

.col-faq--dark .col-faq-item {
	background: #0c1c30;
	border-color: rgba(255, 255, 255, .09);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.col-faq--dark .col-faq-item.is-open {
	border-color: rgba(0, 180, 216, .35);
	box-shadow: 0 4px 20px rgba(0, 180, 216, .12), 0 4px 16px rgba(0, 0, 0, .25);
}

.col-faq--dark .col-faq-item__trigger {
	color: #fff !important;
}

/* Question keeps its normal (white) color when open on dark backgrounds
   too — same reasoning as the light variant above. */

.col-faq--dark .col-faq-item__chevron {
	color: rgba(255, 255, 255, .65);
}

.col-faq--dark .col-faq-item__answer p {
	border-top-color: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .65);
}