/**
 * Blog FAQ — Lifestyle_puttery-blog-post.html look.
 * Scoped to .blog-faq so location accordions are untouched.
 */

.blog-faq {
	--blog-faq-warm-gray: #e8e4de;
	--blog-faq-text-muted: #5c5a56;
	--blog-faq-black: #000000;
	--blog-faq-white: #ffffff;
	--blog-faq-pillar: #e63e62;
	--blog-faq-radius: 0.5rem;
	--blog-faq-space-3: 0.75rem;
	--blog-faq-space-4: 1rem;
	--blog-faq-space-5: 1.25rem;
	--blog-faq-space-6: 1.5rem;
	--blog-faq-space-8: 2rem;
	--blog-faq-space-14: 3.5rem;
	--blog-faq-font-display: "Fugaz One", "Fugaz 1", cursive;
	--blog-faq-font-body: Stolzl, "Helvetica Neue", Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	margin-top: var(--blog-faq-space-14);
	max-width: 65ch;
	width: 100%;
	color: var(--blog-faq-black);
}

.blog-faq *,
.blog-faq *::before,
.blog-faq *::after {
	box-sizing: border-box;
}

.blog-faq .faq__title {
	font-family: var(--blog-faq-font-display);
	font-weight: 400;
	line-height: 0.9;
	font-size: clamp(var(--blog-faq-space-6), 3.5vw, var(--blog-faq-space-8));
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 var(--blog-faq-space-6);
	color: var(--blog-faq-black);
}

.blog-faq .faq__item {
	border-radius: var(--blog-faq-radius);
	overflow: hidden;
	margin-bottom: var(--blog-faq-space-3);
	background: var(--blog-faq-warm-gray);
}

.blog-faq .faq__item:last-child {
	margin-bottom: 0;
}

.blog-faq .faq__question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--blog-faq-space-4);
	padding: var(--blog-faq-space-4) var(--blog-faq-space-5);
	background: var(--blog-faq-warm-gray);
	border: none;
	font-family: var(--blog-faq-font-body);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-align: left;
	cursor: pointer;
	color: var(--blog-faq-black);
	line-height: 1.35;
}

.blog-faq .faq__question:focus-visible {
	outline: 2px solid var(--blog-faq-pillar);
	outline-offset: 2px;
}

.blog-faq .faq__indicator {
	flex-shrink: 0;
	width: var(--blog-faq-space-6);
	height: var(--blog-faq-space-6);
	border-radius: 50%;
	background: var(--blog-faq-pillar);
	color: var(--blog-faq-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	transition: transform 0.2s ease;
}

/* Light pillar fills need dark + glyph */
.blog-faq--out-and-about .faq__indicator,
.blog-faq--food-and-drink .faq__indicator {
	color: var(--blog-faq-black);
}

.blog-faq .faq__item.is-open .faq__indicator {
	transform: rotate(45deg);
}

.blog-faq .faq__answer {
	display: none;
	padding: 0 var(--blog-faq-space-5) var(--blog-faq-space-5);
	font-family: var(--blog-faq-font-body);
	font-size: var(--blog-faq-space-4);
	font-weight: 400;
	line-height: 1.6;
	color: var(--blog-faq-text-muted);
}

.blog-faq .faq__item.is-open .faq__answer {
	display: block;
}

.blog-faq .faq__answer p {
	margin: 0 0 0.75em;
}

.blog-faq .faq__answer p:last-child {
	margin-bottom: 0;
}

.blog-faq .faq__answer a {
	color: inherit;
	text-decoration: underline;
}