/*
 * OYB FAQ — styles for [oyb_faq]
 * Version: 1.0.0
 *
 * Two layouts:
 *   .oyb-faq--open       all answers visible (8 or fewer questions)
 *   .oyb-faq--accordion  click-to-open (longer lists), same look as the
 *                        old [business_faq] boxes
 *
 * Brand colours come from the Divi 5 global colour variables, with fallbacks:
 *   --gcid-primary-color   #89023e  Crimson
 *   --gcid-body-color      #333333  Body text
 *   --gcid-y43rzvjcdl      #ffffff  White
 */

.oyb-faq {
	--oyb-faq-accent: var( --gcid-primary-color, #89023e );
	--oyb-faq-text: var( --gcid-body-color, #333333 );
	--oyb-faq-bg: var( --gcid-y43rzvjcdl, #ffffff );
	--oyb-faq-tint: #fdf6ec;
	--oyb-faq-line: #e0e0e0;

	margin-block: 1em;
	color: var( --oyb-faq-text );
}

/* Divi adds padding under headings; reset it inside the FAQ. */
.oyb-faq :is( h2, h3, h4, h5, h6 ) {
	padding-bottom: 0;
}

.oyb-faq__title {
	margin: 0 0 0.75em;
}

.oyb-faq__group + .oyb-faq__group {
	margin-top: 1.75em;
}

.oyb-faq__topic {
	margin: 0 0 0.6em;
	color: var( --oyb-faq-accent );
}

.oyb-faq__question {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.4;
}

/* The answer wrapper must keep no padding or border of its own: when closed
   it uses hidden="until-found", which hides the content but not the box. */
.oyb-faq__answer-inner {
	line-height: 1.7;
}

.oyb-faq__answer-inner > :first-child {
	margin-top: 0;
}

.oyb-faq__answer-inner > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.oyb-faq__answer-inner a {
	color: var( --oyb-faq-accent );
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Open layout
------------------------------------------------------------------------- */

.oyb-faq--open .oyb-faq__item {
	padding-block: 1em;
	border-top: 1px solid var( --oyb-faq-line );
}

.oyb-faq--open .oyb-faq__item:last-child {
	border-bottom: 1px solid var( --oyb-faq-line );
}

.oyb-faq--open .oyb-faq__question {
	margin-bottom: 0.4em;
	color: var( --oyb-faq-accent );
}

/* -------------------------------------------------------------------------
   Accordion layout
------------------------------------------------------------------------- */

.oyb-faq--accordion .oyb-faq__item {
	margin-bottom: 0.5em;
	border: 1px solid var( --oyb-faq-line );
	border-radius: 6px;
	background: var( --oyb-faq-bg );
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.oyb-faq--accordion .oyb-faq__item:has( [aria-expanded="true"] ) {
	border-color: var( --oyb-faq-accent );
	box-shadow: 0 2px 8px rgb( 0 0 0 / 0.08 );
}

.oyb-faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	margin: 0;
	padding: 1em 1.25em;
	border: 0;
	background: transparent;
	color: var( --oyb-faq-text );
	font: inherit;
	font-weight: 600;
	text-align: start;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.oyb-faq__toggle:hover,
.oyb-faq__toggle[aria-expanded="true"] {
	background-color: var( --oyb-faq-tint );
	color: var( --oyb-faq-accent );
}

.oyb-faq__toggle:focus-visible {
	outline: 2px solid var( --oyb-faq-accent );
	outline-offset: -2px;
}

/* + / − indicator. Only shown once the script has taken over. */
.oyb-faq__icon {
	display: none;
	flex-shrink: 0;
	font-size: 1.4em;
	font-weight: 400;
	line-height: 1;
	color: var( --oyb-faq-accent );
}

.oyb-faq--accordion.is-enhanced .oyb-faq__icon {
	display: inline;
}

.oyb-faq__icon::before {
	content: "+";
}

.oyb-faq__toggle[aria-expanded="true"] .oyb-faq__icon::before {
	content: "\2212";
}

.oyb-faq--accordion .oyb-faq__answer:not( [hidden] ) {
	border-top: 1px solid var( --oyb-faq-line );
}

.oyb-faq--accordion .oyb-faq__answer-inner {
	padding: 1em 1.25em;
	font-size: 0.95em;
}

/* -------------------------------------------------------------------------
   Small screens
------------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.oyb-faq__toggle {
		padding: 0.9em 1em;
		font-size: 0.95em;
	}

	.oyb-faq--accordion .oyb-faq__answer-inner {
		padding: 0.9em 1em;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.oyb-faq__item,
	.oyb-faq__toggle {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Print: show every answer
------------------------------------------------------------------------- */

@media print {
	.oyb-faq__answer[hidden] {
		display: block !important;
		content-visibility: visible !important;
	}

	.oyb-faq__icon {
		display: none !important;
	}
}