/* FAQ page — scoped to .faq-page to avoid clashing with theme styles */

/* This stylesheet only loads on the FAQ template, so it's safe to reach up to
   common theme wrapper elements: an ancestor with overflow other than
   "visible" silently breaks position:sticky on the Jump To sidebar below. */
body.page-template-template-faq,
body[class*="page-template-template-faq"],
#page,
#content,
.site,
.site-content,
main,
main#main {
	overflow: visible !important;
}

.faq-page {
	background: #fff;
	--faq-orange: #f04e23;
	--faq-orange-dark: #c03e1c;
	--faq-orange-tint: #fff2ec;
	--faq-orange-border: #eddcd2;
	--faq-cta-bg: #fbf1ec;
	--faq-cta-border: #f1ddd2;
	--faq-text: #464648;
	--faq-text-light: #6b6b6d;
	--faq-border: #e5ded6;
	--faq-muted: #9a9a9c;
	--faq-container-max: 1004px;
	--faq-gutter: 20px;
	--faq-font: 'Montserrat', sans-serif;
	font-family: var(--faq-font);
	color: var(--faq-text);
}

.faq-page section {
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

.faq-page .faq-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--faq-container-max);
	margin: 0 auto;
	padding: 0 var(--faq-gutter);
}

/* Hero */
.faq-page .faq-hero {
	position: relative;
	min-height: 500px;
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.faq-page .faq-hero > .faq-container {
	position: relative;
	z-index: 1;
    background: unset;
}

.faq-page .faq-hero__heading {
	color: #fff;
	margin: 0;
	font-weight: 500;
	font-size: 56px;
	line-height: 1.15;
	max-width: 640px;
}

.faq-page .faq-hero__corner {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	transform: translateY(50%);
	background: #fff;
	clip-path: polygon(0 0, 31.3% 100%, 100% 0, 100% 100%, 0 100%);
	z-index: 2;
}

/* Content layout */
.faq-page .faq-content {
	background: #fff;
	padding-top: 96px;
	padding-bottom: 96px;
}

.faq-page .faq-container,
.faq-page .faq-content__layout {
	background: #fff;
}

.faq-page .faq-content__layout {
	display: flex;
	align-items: flex-start;
	gap: 48px;
}

/* Jump To sidebar */
.faq-page .faq-jumpto {
	flex: 0 0 264px;
	width: 264px;
	position: sticky;
	top: 130px;
}

.faq-page .faq-jumpto__box {
	background: #fff;
	border: 1px solid var(--faq-orange-border);
	border-radius: 12px;
	overflow: hidden;
	padding: 20px 16px;
}

.faq-page .faq-jumpto__label {
	margin: 0 0 4px;
	color: var(--faq-orange);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.5px;
}

.faq-page .faq-jumpto__link {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 -16px;
	padding: 14px 16px;
	text-decoration: none;
	color: #2c2d32;
	font-weight: 500;
	font-size: 14px;
	border-bottom: 1px solid var(--faq-border);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.faq-page .faq-jumpto__box > .faq-jumpto__link:last-child {
	border-bottom: none;
}

.faq-page .faq-jumpto__link span:first-child {
	flex: 1 0 0;
}

.faq-page .faq-jumpto__arrow {
	color: var(--faq-muted);
	font-size: 13px;
}

.faq-page .faq-jumpto__link:hover {
	background: var(--faq-orange-tint);
	color: var(--faq-orange);
}

.faq-page .faq-jumpto__link.is-active {
	background: var(--faq-orange-tint);
	color: var(--faq-orange);
	font-weight: 600;
}

.faq-page .faq-jumpto__link.is-active .faq-jumpto__arrow {
	color: var(--faq-orange);
}

/* Category cards */
.faq-page .faq-categories {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.faq-page .faq-category {
	scroll-margin-top: 24px;
	background: #fff;
	border: 1px solid var(--faq-orange-border);
	border-left: 4px solid var(--faq-orange);
	border-radius: 12px;
	box-shadow: 0 8px 12px rgba(40, 32, 26, 0.08);
	padding: 25px 25px 25px 28px;
}

.faq-page .faq-category__header {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 14px;
}

.faq-page .faq-category__icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	object-fit: contain;
}

.faq-page .faq-category__title {
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	color: var(--faq-text);
	margin: 0;
}

.faq-page .faq-accordion {
	display: flex;
	flex-direction: column;
}

.faq-page .faq-item {
	border-bottom: 1px solid var(--faq-orange-border);
}

.faq-page .faq-item:last-child {
	border-bottom: none;
}

.faq-page .faq-item__question {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--faq-font);
}

.faq-page .faq-item__question span:first-child {
	flex: 1 0 0;
	font-weight: 600;
	font-size: 17px;
	line-height: 24px;
	color: var(--faq-text);
}

.faq-page .faq-item__chevron {
	flex-shrink: 0;
	color: var(--faq-text);
	transition: transform 0.2s ease;
}

.faq-page .faq-item.is-open .faq-item__chevron {
	transform: rotate(180deg);
	color: var(--faq-orange);
}

.faq-page .faq-item__answer {
	height: 0;
	overflow: hidden;
	transition: height 0.25s ease;
}

.faq-page .faq-item__answer-inner {
	padding-bottom: 16px;
	font-size: 16px;
	line-height: 24px;
	color: var(--faq-text-light);
}

.faq-page .faq-item__answer-inner p {
	margin: 0 0 12px;
}

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

.faq-page .faq-item__answer-inner strong {
	color: var(--faq-text);
}

/* CTA */
.faq-page .faq-cta {
	background: var(--faq-cta-bg);
	border-top: 1px solid var(--faq-cta-border);
	border-bottom: 1px solid var(--faq-cta-border);
	padding: 80px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.faq-page .faq-cta__heading {
	color: var(--faq-orange);
	font-weight: 500;
	font-size: 40px;
	line-height: 1.2;
	margin: 0;
}

.faq-page .faq-cta__text {
	color: var(--faq-text);
	font-size: 18px;
	line-height: 28px;
	max-width: 640px;
	margin: 0;
}

.faq-page .faq-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--faq-orange);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	padding: 17px 34px;
	box-sizing: border-box;
	transition: background-color 0.2s ease;
}

.faq-page .faq-cta__button:hover {
	background: var(--faq-orange-dark);
}

/* Footer image — full-bleed */
.faq-page .faq-footer-image img {
	display: block;
	width: 100%;
	object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
	.faq-page .faq-hero__inner {
		padding-left: 56px;
	}

	.faq-page .faq-hero__heading {
		font-size: 44px;
	}

	.faq-page .faq-content,
	.faq-page .faq-cta {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}

@media (max-width: 900px) {
	.faq-page .faq-content__layout {
		flex-direction: column;
	}

	.faq-page .faq-jumpto {
		width: 100%;
		flex: 1 1 auto;
		position: static;
		top: auto;
	}
}

@media (max-width: 640px) {
	.faq-page .faq-hero {
		min-height: 360px;
	}

	.faq-page .faq-hero__inner {
		padding-left: 20px;
	}

	.faq-page .faq-hero__heading {
		font-size: 32px;
	}

	.faq-page .faq-category {
		padding: 20px;
	}

	.faq-page .faq-cta {
		padding: 56px 20px;
	}

	.faq-page .faq-cta__heading {
		font-size: 28px;
	}
}