/**
 * Waterways custom snippets — styles for [wwsm_faq].
 *
 * Mirrors the rules already live on waterwayssheetmetal.com (theme global custom CSS).
 * Two changes from the original, both noted inline: the keyframes are namespaced, and
 * .faq-question carries button resets because the question is now a real <button>.
 */

.faq-container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 60px 20px;
}

.faq-header {
	margin-bottom: 50px;
	text-align: center;
}

.faq-header h2 {
	margin-bottom: 15px;
	font-size: 2.5rem;
	font-weight: 600;
	color: #1a2332;
}

.faq-header p {
	max-width: 600px;
	margin: 0 auto;
	font-size: 1.1rem;
	color: #666;
}

.faq-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
	gap: 15px;
}

.faq-item {
	overflow: hidden;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 4px rgb(0 0 0 / .05);
	transition: all 0.3s ease;
}

.faq-item:hover {
	border-color: #b8860b;
	box-shadow: 0 4px 12px rgb(0 0 0 / .1);
}

.faq-item.hidden {
	display: none;
}

.faq-item.hidden.visible {
	display: block;
	animation: wtwss-faq-fade-in 0.4s ease;
}

/*
 * The question is a <button> rather than a clickable <div>, so it needs the usual
 * button resets to keep the original appearance. Everything below the resets is
 * copied verbatim from the live rule.
 */
.faq-question {
	width: 100%;
	margin: 0;
	border: none;
	text-align: left;
	font-family: inherit;

	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: #fff;
	cursor: pointer;
	user-select: none;
	font-size: 1.1rem;
	font-weight: 500;
	color: #1a2332;
	transition: all 0.3s ease;
}

.faq-question:hover,
.faq-question.active {
	background: #faf9f7;
	color: #b8860b;
}

.faq-question:focus-visible {
	outline: 2px solid #b8860b;
	outline-offset: -2px;
}

.faq-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-left: 15px;
	font-weight: 700;
	color: #b8860b;
	transition: transform 0.3s ease;
}

/*
 * The original markup used a "▼" text character, which renders as a question mark
 * wherever the inherited font has no glyph for U+25BC. An inline SVG has no such
 * dependency. It inherits its colour from .faq-toggle above.
 */
.faq-toggle svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.faq-question.active .faq-toggle {
	transform: rotate(180deg);
}

.faq-answer {
	display: none;
	padding: 20px;
	border-top: 1px solid #e0e0e0;
	background: #faf9f7;
	font-size: 1rem;
	line-height: 1.8;
	color: #555;
}

.faq-answer.active {
	display: block;
	animation: wtwss-faq-slide-down 0.3s ease;
}

.faq-answer ul {
	margin-top: 10px;
	margin-left: 20px;
}

.faq-answer li {
	margin-bottom: 8px;
}

.faq-answer strong {
	color: #1a2332;
}

/*
 * Namespaced. The theme CSS calls these `fadeIn` and `slideDown`, and `fadeIn` is
 * declared twice in the bundle with different bodies — whichever lands last wins.
 */
@keyframes wtwss-faq-fade-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes wtwss-faq-slide-down {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.faq-answer.active,
	.faq-item.hidden.visible {
		animation: none;
	}
}

/* --------------------------------------------------------------- load more */

.load-more-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	padding: 20px;
}

.load-more-btn {
	padding: 14px 40px;
	border: none;
	border-radius: 6px;
	background-color: #b8860b;
	box-shadow: 0 2px 8px rgb(184 134 11 / .3);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	transition: all 0.3s ease;
}

.load-more-btn:hover {
	background-color: #9a7309;
	box-shadow: 0 4px 16px rgb(184 134 11 / .4);
	transform: translateY(-2px);
}

.load-more-btn:active {
	transform: translateY(0);
}

.load-more-btn.hidden {
	display: none;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 768px) {
	.faq-container {
		padding: 40px 15px;
	}

	.faq-header h2 {
		font-size: 1.8rem;
	}

	.faq-question {
		padding: 16px;
		font-size: 1rem;
	}

	.faq-answer {
		padding: 16px;
		font-size: .95rem;
	}

	.load-more-btn {
		padding: 12px 30px;
		font-size: .95rem;
	}
}