/**
 * 360 Broadway - Nova Child: FAQs layout.
 * Loaded only on pages that use it (see bw_css_components() in inc/enqueue.php).
 * Loads after style.css; rules keep their original order.
 */

.faqs-section {
	padding: 40px 0;
}
.faqs-section h1 {
	text-align: center;
	margin-bottom: 50px;
	font-size: 44px;
}

@media (max-width: 768px) {
	.faqs-section h1 {
			font-size: 28px;
	        line-height: 34px;
		}
}

@media (min-width: 768px) {
	.faqs-section {
			padding: 80px 0;
		}
}

.faqs-section .faqs {
	margin: 60px 0 10px;
}
.faqs-section .faq {
	margin-bottom: 25px;
	border-bottom: 1px solid var(--bw-border);
}
.faqs-section .faq-question {
	font-size: 18px;
	padding-bottom: 20px;
	cursor: pointer;
	position: relative;
	padding-right: 45px;
}
.faqs-section .faq-question .toggle-arrow {
	position: absolute;
	top: 3px;
	width: 24px;
	height: 24px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.faqs-section .faq-question i {
	transition: all 0.2s;
}
.faqs-section .faq-question.open .toggle-arrow i {
	transform: rotate(180deg);
}
.faqs-section .faq-answer {
	padding: 0 0 20px;
	display: none;
}
.faqs-section .faq-group-nav {
	margin-bottom: 48px;
}
.faqs-section .faq-group-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.faqs-section .faq-group-nav li {
	display: inline-flex;
}
.faqs-section .faq-group-nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 5px 20px;
	box-sizing: border-box;
	border: 1px solid var(--bw-gold);
	background: var(--bw-white);
	color: var(--bw-gold-dark);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.faqs-section .faq-group-nav a:hover {
	background: var(--bw-gold);
	border-color: var(--bw-gold);
	color: var(--bw-white);
	text-decoration: none;
}
.faqs-section .faq-answer a,
.faqs-section .faq-intro-text a {
	color: var(--bw-gold-light);
	transition: color 0.2s;
}
.faqs-section .faq-answer a:hover,
.faqs-section .faq-intro-text a:hover {
	color: var(--bw-c-b89968);
}
.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	text-align: left;
}
.toggle-arrow {
	transition: transform .3s;
}
.faqs-section .container {
	max-width: 960px;
}
.faqs-section--intro {
	text-align: center;
}
.faqs-section--intro .faq-intro {
	margin-bottom: 40px;
}
.faqs-section--intro h1 {
	text-align: center;
}
.faqs-section--intro h2 {
	margin-bottom: 20px;
}
.faqs-section--intro {
	padding-bottom: 0;
}
.faqs-section--group {
	padding-top: 0;
	padding-bottom: 0;
	scroll-margin-top: 160px;
}
.faqs-section--group:last-child,
.faqs-section--group:not(:has(+ .faqs-section--group)) {
	padding-bottom: 90px;
}
.faqs-section--group .faqs {
	margin: 0;
}
.faqs-section--intro .faq-group-nav {
	margin-bottom: 60px;
}
.faqs-section--group .faq-group {
	margin-bottom: 56px;
}
.faqs-section .faq-group-title {
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid currentColor;
}
.faqs-section .faq-subgroup-title {
	margin: 28px 0 12px;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .08em;
}