/*
 * blurFactor GEO FAQ: theme-friendly defaults for the Divi 5 module and the shortcode.
 * Selectors stay low-specificity (:where) so Divi design settings and theme styles win.
 *
 * Variables (set by the Divi module's design settings, or inline by the shortcode):
 *   --bfgeo-icon-size   toggle icon size (default 1rem)
 *   --bfgeo-icon-color  toggle icon color (default: the question's text color)
 *   --bfgeo-icon-gap    space between icon and question (default 0.6em)
 *   --bfgeo-columns     questions per row (default 1)
 *   --bfgeo-gap         gap between questions (default 1em)
 */

.bfgeo-faq__title,
.bfgeo-faq__intro { margin-bottom: 1em; }

/* Questions: a grid of up to --bfgeo-columns per row that drops to fewer columns on narrow screens. */
:where(.bfgeo-faq__set) {
	display: grid;
	gap: var(--bfgeo-gap, 1em);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(14em, calc((100% - (var(--bfgeo-columns, 1) - 1) * var(--bfgeo-gap, 1em)) / var(--bfgeo-columns, 1) - 0.1px))), 1fr));
	align-items: start;
}
:where(.bfgeo-faq__set + .bfgeo-faq__set) { margin-top: var(--bfgeo-gap, 1em); }
:where(.bfgeo-faq__item) { margin: 0; min-width: 0; }

/* Toggle row: icon on the margin, question text indented past it. */
:where(.bfgeo-faq__summary) {
	display: flex;
	align-items: baseline; /* icon lines up with the first line of a long question */
	gap: var(--bfgeo-icon-gap, 0.6em);
	cursor: pointer;
	list-style: none;
	/* Quick or double clicks on a toggle shouldn't select the question text (answers stay selectable). */
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.bfgeo-faq__summary::-webkit-details-marker { display: none; }
.bfgeo-faq__summary::marker { content: ""; }
.bfgeo-faq__summary > .bfgeo-faq__question { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; }
.bfgeo-faq__summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Default icon: a chevron drawn with a mask, so it takes the icon color. A Divi icon chosen
   in the module replaces it (content + font-family, mask and background removed). */
:where(.bfgeo-faq__summary)::before {
	content: "\200B"; /* invisible character: gives the icon a text baseline to line up with */
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	width: var(--bfgeo-icon-size, 1rem);
	height: var(--bfgeo-icon-size, 1rem);
	font-size: var(--bfgeo-icon-size, 1rem);
	line-height: 1;
	color: var(--bfgeo-icon-color, currentColor);
	background-color: var(--bfgeo-icon-color, currentColor);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 7.4 12 16.8l9.4-9.4-2-2L12 12.8 4.6 5.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 7.4 12 16.8l9.4-9.4-2-2L12 12.8 4.6 5.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}
/* Open: flip the icon (a chosen "Open icon" replaces this). */
:where(.bfgeo-faq__item[open]) > :where(.bfgeo-faq__summary)::before { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	:where(.bfgeo-faq__summary)::before { transition: none; }
}

:where(.bfgeo-faq--icon-right) .bfgeo-faq__summary::before { order: 2; }
:where(.bfgeo-faq--icon-none) .bfgeo-faq__summary::before { display: none; }

:where(.bfgeo-faq__answer) { margin-top: 0.5em; }
.bfgeo-faq__answer > :last-child { margin-bottom: 0; }
/* Answers line up with the question text when the icon is on the left. */
:where(.bfgeo-faq--collapsed.bfgeo-faq--icon-left) .bfgeo-faq__answer {
	padding-left: calc(var(--bfgeo-icon-size, 1rem) + var(--bfgeo-icon-gap, 0.6em));
}

/*
 * Divi's Text > Text Color. Divi adds et_pb_bg_layout_dark for light text and
 * et_pb_bg_layout_light for dark text to the module itself. A font color set in
 * Title/Intro/Question/Answer Text still wins (higher specificity).
 */
:where(.bfgeo_faq_module.et_pb_bg_layout_dark) .bfgeo-faq,
:where(.bfgeo_faq_module.et_pb_bg_layout_dark) .bfgeo-faq :where(h1, h2, h3, h4, h5, h6, p, li, summary, strong, a:not(.bfgeo-faq__builder-edit)) {
	color: #fff;
}
/* Dark text inside a section set to light text. */
:where(.et_pb_bg_layout_dark) :where(.bfgeo_faq_module.et_pb_bg_layout_light) .bfgeo-faq,
:where(.et_pb_bg_layout_dark) :where(.bfgeo_faq_module.et_pb_bg_layout_light) .bfgeo-faq :where(p, li, summary) {
	color: #666;
}
:where(.et_pb_bg_layout_dark) :where(.bfgeo_faq_module.et_pb_bg_layout_light) .bfgeo-faq :where(h1, h2, h3, h4, h5, h6, strong) {
	color: #333;
}