/* HVACB — faq section.

   Block-safe rewrite. The 19 accordion items are now core/details blocks
   (<details>/<summary>) instead of <button class="faq__trigger"> driven by JS.

     .faq__bg           ->  .faq:before
     .faq__mesh         ->  .faq:after
     .faq__eyebrow i    ->  .faq__eyebrow:before
     .faq__trigger      ->  .faq__item > summary
     .faq__icon + <svg> ->  summary:after  (mask, rotates when [open])
     .faq__item.open    ->  .faq__item[open]
     arrow <svg> x2     ->  :after masks on the two CTA links

   Native <details> means the accordion works with JavaScript disabled and is
   keyboard-accessible for free. assets/js/faq.js still drives the category
   tabs; its accordion half finds no .faq__trigger and no-ops safely.

   Trade-off: <details> has no single-open-at-a-time behaviour, so more than one
   answer can be open within a group. That was previously enforced in JS.
*/

/* Neutralise theme + block-layout margins inside the section. */
.faq p,
.faq h2 { margin: 0; }
.faq > *,
.faq .wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }

.faq {
	position: relative;
	overflow: hidden;
	padding: clamp(4rem, 8vw, 7rem) clamp(18px, 4vw, 48px);

	--ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 1v12M1 7h12'/%3E%3C/svg%3E");
	--ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M10 4l6 6-6 6'/%3E%3C/svg%3E");
}

.faq * { box-sizing: border-box; }

/* Was .faq__bg. */
.faq:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(ellipse 65% 55% at -5% 0%, rgba(138, 92, 196, .22), transparent 55%),
		radial-gradient(ellipse 55% 45% at 105% 5%, rgba(217, 106, 43, .16), transparent 55%),
		radial-gradient(ellipse 60% 60% at 50% 100%, rgba(95, 211, 160, .1), transparent 60%),
		#FFFFFF;
}

/* Was .faq__mesh. */
.faq:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(75, 59, 143, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(75, 59, 143, .03) 1px, transparent 1px);
	background-size: 76px 76px;
}

.faq .faq__in { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }

/* ---------- Head ---------- */

.faq .faq__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 60px);
	align-items: end;
	margin-bottom: clamp(3rem, 5vw, 4rem);
}

.faq .faq__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #FFFFFF;
	margin: 0 0 20px;
	padding: 9px 20px;
	border-radius: 999px;
	background: linear-gradient(105deg, #3A2C7A 0%, #6B4FB8 42%, #D96A2B 100%);
	box-shadow: 0 14px 30px -10px rgba(75, 59, 143, .5);
}

.faq .faq__eyebrow:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	flex: none;
	animation: faqPing 2.4s ease-out infinite;
}

@keyframes faqPing {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
	70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.faq .faq__h2 {
	font-size: clamp(32px, 4.5vw, 58px);
	font-weight: 800;
	letter-spacing: -.045em;
	line-height: .98;
	margin: 0;
	color: #14121F;
}

.faq .faq__h2 em {
	font-style: normal;
	background: linear-gradient(104deg, #4B3B8F, #8A5CC4 50%, #D96A2B);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.faq .faq__right {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 14px;
}

.faq .faq__sub {
	font-size: clamp(15px, 1.45vw, 18px);
	line-height: 1.65;
	color: #4A4658;
	margin: 0;
	font-weight: 500;
}

.faq .faq__cta-link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #4B3B8F;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: -.01em;
}

.faq .faq__cta-link a:hover { color: #D96A2B; }

.faq .faq__cta-link a:after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var(--ico-arrow) no-repeat center / 14px 14px;
	mask: var(--ico-arrow) no-repeat center / 14px 14px;
}

/* ---------- Category tabs (still a core/html block — JS controls) ---------- */

.faq .faq__cats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 3.5vw, 3rem);
}

.faq .faq__cat {
	padding: 9px 20px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	border: 1.5px solid rgba(75, 59, 143, .2);
	background: rgba(255, 255, 255, .7);
	color: #4B3B8F;
	transition: all .22s;
	backdrop-filter: blur(8px);
	font-family: inherit;
}

.faq .faq__cat:hover { border-color: rgba(75, 59, 143, .5); background: #FFFFFF; }

.faq .faq__cat.active {
	background: #4B3B8F;
	color: #FFFFFF;
	border-color: #4B3B8F;
	box-shadow: 0 8px 22px -8px rgba(75, 59, 143, .5);
}

/* ---------- Groups ---------- */

.faq .faq__group { display: none; }
.faq .faq__group.active { display: block; }

/* ---------- Items: native <details> ---------- */

.faq .faq__item {
	border-bottom: 1px solid rgba(20, 18, 31, .1);
	margin: 0;
}

.faq .faq__group > .faq__item:first-child { border-top: 1px solid rgba(20, 18, 31, .1); }

.faq .faq__item > summary {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: clamp(18px, 2.2vw, 26px) 0;
	cursor: pointer;
	text-align: left;
	list-style: none;
	font-size: clamp(16px, 1.7vw, 20px);
	font-weight: 700;
	color: #14121F;
	letter-spacing: -.02em;
	line-height: 1.3;
	transition: color .25s;
}

/* Hide the native disclosure triangle. */
.faq .faq__item > summary::-webkit-details-marker { display: none; }
.faq .faq__item > summary::marker { content: ""; }

.faq .faq__item > summary:hover { color: #4B3B8F; }

/* Was span.faq__icon wrapping a plus <svg>. */
.faq .faq__item > summary:after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1.5px solid rgba(75, 59, 143, .25);
	background-color: rgba(75, 59, 143, .06);
	background-image: var(--ico-plus);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	transition: transform .3s, border-color .3s, background-color .3s;
}

.faq .faq__item[open] > summary:after {
	background-color: #D96A2B;
	border-color: #D96A2B;
	transform: rotate(45deg);
}

.faq .faq__a {
	padding: 0 clamp(20px, 3vw, 48px) clamp(16px, 2vw, 22px) 0;
	font-size: clamp(14.5px, 1.4vw, 17px);
	line-height: 1.7;
	color: #4A4658;
	font-weight: 500;
}

/* ---------- Bottom strip ---------- */

.faq .faq__strip {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	padding: clamp(22px, 2.5vw, 32px);
	border-radius: 20px;
	background: rgba(255, 255, 255, .8);
	border: 1.5px solid rgba(255, 255, 255, .9);
	box-shadow: 0 16px 48px -20px rgba(75, 59, 143, .18);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 32px);
	flex-wrap: wrap;
	backdrop-filter: blur(12px);
}

.faq .faq__strip-text {
	margin: 0;
	font-size: clamp(15px, 1.5vw, 19px);
	font-weight: 800;
	color: #14121F;
	letter-spacing: -.02em;
}

.faq .faq__strip-text .faq__strip-sub {
	color: #4A4658;
	font-weight: 500;
	display: block;
	font-size: 14px;
	margin-top: 5px;
	letter-spacing: 0;
}

.faq .faq__strip-btn { flex: none; }

.faq .faq__strip-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: linear-gradient(105deg, #4B3B8F, #D96A2B);
	color: #FFFFFF;
	font-size: 14.5px;
	font-weight: 800;
	padding: 13px 28px;
	border-radius: 12px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 12px 28px -10px rgba(75, 59, 143, .5);
	transition: box-shadow .3s, transform .3s;
	min-height: 0;
}

.faq .faq__strip-btn .wp-block-button__link:hover {
	background: linear-gradient(105deg, #4B3B8F, #D96A2B);
	transform: translateY(-2px);
	box-shadow: 0 18px 38px -10px rgba(75, 59, 143, .7);
}

.faq .faq__strip-btn .wp-block-button__link:after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: #fff;
	-webkit-mask: var(--ico-arrow) no-repeat center / 14px 14px;
	mask: var(--ico-arrow) no-repeat center / 14px 14px;
}

@media (max-width: 760px) {
	.faq .faq__top { grid-template-columns: minmax(0, 1fr); }
	.faq .faq__strip { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.faq .faq__item > summary:after { transition: none; }
	.faq .faq__eyebrow:before { animation: none; }
}