/**
 * BRO Electrical — FAQ page (page-faq.php).
 *
 * The hero below is live today. The .bro-faq-list / .bro-faq-category /
 * .bro-faq-accordion / .bro-faq-item component styling exists ready for
 * when real FAQ content (from the "faq" custom post type) is published
 * -- see page-faq.php and functions.php for the query/render logic.
 * Nothing in this file renders fake or placeholder content; it simply
 * has nothing to style until FAQs exist.
 */

.bro-faq-page section {
	padding: var(--bro-section-spacing) 0;
}

.bro-faq-page h1,
.bro-faq-page h2 {
	overflow-wrap: break-word;
}

/* ---- Hero / introduction ---- */

.bro-faq-hero {
	background: var(--bro-white);
}

.bro-faq-hero__inner {
	max-width: 46rem;
}

.bro-faq-hero__inner h1 {
	font-size: var(--bro-text-hero);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--bro-text-on-light);
	margin: 1rem 0 1.5rem;
}

.bro-faq-hero__lead {
	font-size: var(--bro-text-lg);
	line-height: 1.6;
	color: var(--bro-text-muted-on-light);
	max-width: 60ch;
	margin: 0;
}

/* ---- FAQ list: categories + accordion ---- */

.bro-faq-list {
	background: var(--bro-offwhite);
}

.bro-faq-list__inner {
	max-width: 52rem;
}

.bro-faq-category + .bro-faq-category {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.bro-faq-category__heading {
	font-size: var(--bro-text-h3);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--bro-text-on-light);
	margin: 0 0 1.25rem;
}

.bro-faq-accordion {
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-faq-item {
	border-bottom: 1px solid var(--bro-border-on-light);
}

.bro-faq-item__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-base);
	font-weight: 700;
	color: var(--bro-text-on-light);
	cursor: pointer;
	list-style: none;
}

.bro-faq-item__question::-webkit-details-marker {
	display: none;
}

.bro-faq-item__question::after {
	content: '+';
	flex: 0 0 auto;
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--bro-orange);
	line-height: 1;
	transition: transform var(--bro-transition-base);
}

.bro-faq-item[open] .bro-faq-item__question::after {
	transform: rotate(45deg);
}

.bro-faq-item__question:focus-visible {
	outline: 2px solid var(--bro-orange);
	outline-offset: 3px;
}

.bro-faq-item__answer {
	margin: 0 0 1.75rem;
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-light);
	max-width: 62ch;
}

.bro-faq-item__answer p {
	margin: 0 0 1rem;
}

.bro-faq-item__answer p:last-child {
	margin-bottom: 0;
}

.bro-faq-item__answer a {
	color: var(--bro-text-on-light);
	text-decoration: underline;
	text-decoration-color: var(--bro-border-on-light);
	text-underline-offset: 3px;
}

.bro-faq-item__answer a:hover,
.bro-faq-item__answer a:focus-visible {
	color: var(--bro-orange);
	text-decoration-color: var(--bro-orange);
}

@media (prefers-reduced-motion: reduce) {
	.bro-faq-item__question::after {
		transition: none;
	}
}