/* ========== FAQ PAGE ==========
   Dedicated styles for faq.php */

/* Breadcrumb */
.faq-breadcrumb {
	font-size: 14px;
	color: var(--color-gray-400);
	margin-bottom: 4px;
}

.faq-breadcrumb a {
	color: var(--color-gray-400);
	text-decoration: none;
}

.faq-breadcrumb a:hover {
	text-decoration: underline;
}

/* Banner – sits inside .container, overlaps 50% into the columns below */
.faq-banner {
	position: relative;
	z-index: 2;
	border-radius: 24px;
	overflow: hidden;
	margin-bottom: -120px; /* pull columns section up so banner overlaps into it */
}

.faq-banner img {
	width: 100%;
	display: block;
	object-fit: cover;
	max-height: 280px;
}

/* ---------- Two-column split ---------- */
.faq-columns {
	display: flex;
	position: relative;
}

.faq-col {
	flex: 1;
	min-width: 0;
	position: relative;
}

/* Left column: dark green, bleeds to left screen edge */
.faq-col--left {
	background: var(--color-dark);
	color: #fff;
}

/* Right column: white bg, bleeds to right screen edge */
.faq-col--right {
	background: var(--color-white);
	color: var(--color-text);
}

/*
 * Content area inside each column.
 * We replicate the container's gutter on the OUTER edge of each column
 * (left padding on left col, right padding on right col) and use a
 * fixed inner gap between the two columns.
 */
.faq-col__content {
	padding-top: 160px; /* room for the overlapping banner */
	padding-bottom: 60px;
}

.faq-col--left .faq-col__content {
	padding-left: clamp(var(--container-gutter-min), 6vw, var(--container-gutter-max));
	padding-right: clamp(24px, 3vw, 48px);
}

.faq-col--right .faq-col__content {
	padding-right: clamp(var(--container-gutter-min), 6vw, var(--container-gutter-max));
	padding-left: clamp(24px, 3vw, 48px);
}

/* Labels & titles */
.faq-col__label {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.faq-col--left .faq-col__label {
	color: #9CFFA5;
}

.faq-col--right .faq-col__label {
	color: var(--color-green);
}

.faq-col__title {
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 32px;
}

/* ---------- Accordion ---------- */
.faq-accordion {
	display: flex;
	flex-direction: column;
}

.faq-acc-item {
	padding: 16px 0;
}

.faq-acc-header {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	cursor: pointer;
	user-select: none;
}

.faq-acc-toggle {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	position: relative;
	margin-top: 2px;
}

/* Plus / minus lines */
.faq-acc-toggle::before,
.faq-acc-toggle::after {
	content: "";
	position: absolute;
	background: #9CFFA5;
	border-radius: 2px;
	transition: transform 0.25s ease;
}

/* Horizontal bar (always visible) */
.faq-acc-toggle::before {
	width: 18px;
	height: 3px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Vertical bar (rotates to 0 when open) */
.faq-acc-toggle::after {
	width: 3px;
	height: 18px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* When open, rotate vertical bar to horizontal (effectively hides it) */
.faq-acc-item.open .faq-acc-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Right column: dark toggle lines */
.faq-col--right .faq-acc-toggle::before,
.faq-col--right .faq-acc-toggle::after {
	background: var(--color-green);
}

.faq-acc-question {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	flex: 1;
}

.faq-acc-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, padding 0.25s ease;
	padding-left: 38px;
	font-size: 15px;
	line-height: 24px;
}

.faq-acc-item.open .faq-acc-answer {
	max-height: 600px; /* generous max to allow smooth animation */
	padding-top: 12px;
	padding-bottom: 4px;
}

.faq-col--left .faq-acc-answer {
	color: rgba(255, 255, 255, 0.85);
}

.faq-col--right .faq-acc-answer {
	color: var(--color-gray-600);
}

.faq-acc-answer strong {
	font-weight: 700;
}

/* Answer embedded image */
.faq-acc-answer img {
	max-width: 100%;
	border-radius: 12px;
	margin-top: 12px;
	display: block;
}

/* ---------- Decorative image (bottom of left column) ---------- */
.faq-col__deco {
	position: relative;
	pointer-events: none;
	overflow: hidden;
	max-height: 320px;
}

.faq-col__deco img {
	width: 100%;
	display: block;
	object-fit: cover;
	object-position: top center;
}

/* Mobile: hide deco in left col, show separate deco element */
.faq-deco-mobile {
	display: none;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 992px) {
    .faq-banner {
        margin-bottom: 3rem;
    }
	/* Stack columns vertically */
	.faq-columns {
		flex-direction: column;
	}

	.faq-col__content {
		padding-top: 32px;
		padding-bottom: 40px;
	}

	/* Both columns get same horizontal padding */
	.faq-col--left .faq-col__content,
	.faq-col--right .faq-col__content {
		padding-left: clamp(var(--container-gutter-min), 6vw, var(--container-gutter-max));
		padding-right: clamp(var(--container-gutter-min), 6vw, var(--container-gutter-max));
	}

	/* Hide deco image inside left column */
	.faq-col__deco {
		display: none;
	}

	/* Show mobile deco image below both sections */
	.faq-deco-mobile {
		display: block;
		overflow: hidden;
	}

	.faq-deco-mobile img {
		width: 100%;
		display: block;
		object-fit: cover;
		max-height: 280px;
		object-position: top center;
	}
}