/* -----------------------------------------
   FAQ – Dark Mode Overrides
   Mirrors FAQ.css but uses dark tokens
----------------------------------------- */

@media (prefers-color-scheme: dark) {

	/* FAQ Container */
	.faq-container {
		background: var(--surface-1);
		color: var(--text-1);
	}

	/* Title */
	.faq-title {
		color: var(--text-1);
	}

	/* Accordion Item */
	.faq-item {
		background: var(--surface-2);
		border: 1px solid var(--border-medium) !important;
		box-shadow: 0 2px 6px rgba(0,0,0,0.25);
	}

		/* Accordion Button */
		.faq-item .accordion-button {
			background: var(--surface-2);
			color: var(--text-1);
		}

			/* Expanded State */
			.faq-item .accordion-button:not(.collapsed) {
				background: var(--surface-3);
				color: var(--brand-secondary);
			}

			/* Remove Bootstrap focus ring */
			.faq-item .accordion-button:focus {
				box-shadow: none;
			}

	/* FAQ Answer */
	.faq-answer {
		background: var(--surface-1);
		color: var(--text-2);
	}

		/* Icons inside Q/A */
		.faq-question i,
		.faq-answer i {
			color: var(--brand-secondary);
		}

	/* Hover effect */
	.faq-item:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.35);
		color: var(--brand-secondary);
	}


	.container .accordion-item {
		background: var(--surface-2);
		border: 1px solid var(--border-medium);
		box-shadow: 0 2px 6px rgba(0,0,0,0.25);
	}

	.container .accordion-button {
		background: var(--surface-2);
		color: var(--text-1);
	}

		.container .accordion-button:not(.collapsed) {
			background: var(--surface-3);
			color: var(--brand-secondary);
		}

	.container .accordion-body {
		background: var(--surface-1);
		color: var(--text-2);
	}

	/* Hover */
	.container .accordion-item:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.35);
	}

	/* Chevron recolour */
	.container .accordion-button::after {
		filter: invert(85%) brightness(140%);
		opacity: 0.9;
	}

	.container .accordion-button:not(.collapsed)::after {
		filter: invert(60%) sepia(80%) saturate(300%) hue-rotate(110deg);
		opacity: 1;
	}
}


}