/* ==========================================================
   Blog FAQ Repeater - global styles
   Loaded only on pages where [blog_conclusion] / [blog_faq] is used.
   Tweak the variables below to match your brand.
   ========================================================== */

.bfr-wrap {
	--bfr-text: #111111;
	--bfr-muted: #4b5563;
	--bfr-bg: #ffffff;
	--bfr-accent: #AB0000;
	--bfr-on-accent: #ffffff;
	--bfr-radius: 10px;
	--bfr-shadow: 0px 2px 22px 0px #00000012;
	--bfr-gap: 16px;
	--bfr-speed: 0.35s;
	--bfr-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Icons: minus when open, plus when closed */
	--bfr-icon-open: url("http://kostpainting.thedotcloud.com/wp-content/uploads/2026/10/Line-6.svg");
	--bfr-icon-closed: url("http://kostpainting.thedotcloud.com/wp-content/uploads/2026/10/Open-Icon.svg");

	color: var(--bfr-text);
}

/* ---------- Conclusion ---------- */
.bfr-conclusion {
	margin: 0 0 24px;
}

.bfr-wrap .bfr-conclusion__title {
	margin: 0 0 16px;
	padding: 0 0 10px;            /* 10px gap between text and border */
	border-bottom: 3px solid #AB0000;
	font-weight: 700;
	font-size: 30px;
	line-height: 40px;
	color: #111111;
}

.bfr-conclusion__desc > :first-child { margin-top: 0; }
.bfr-conclusion__desc > :last-child  { margin-bottom: 0; }

.bfr-conclusion__desc a,
.bfr-answer a {
	color: var(--bfr-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bfr-conclusion__desc a:hover,
.bfr-answer a:hover {
	text-decoration: none;
}

/* ---------- FAQ list ---------- */
.bfr-faq {
	display: flex;
	flex-direction: column;
	gap: var(--bfr-gap);
}

.bfr-item {
	background: var(--bfr-bg);
	border-radius: var(--bfr-radius);
	box-shadow: var(--bfr-shadow);          /* default (closed) state */
	overflow: hidden;
	transition: box-shadow var(--bfr-speed) var(--bfr-ease);
}

.bfr-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	cursor: pointer;
	list-style: none;
	color: var(--bfr-text);
	background: var(--bfr-bg);
	transition: background-color var(--bfr-speed) var(--bfr-ease),
	            color var(--bfr-speed) var(--bfr-ease);
}

.bfr-summary::-webkit-details-marker { display: none; }
.bfr-summary::marker { content: ""; }

/* Hover + active (open) header */
.bfr-summary:hover,
.bfr-item.is-active .bfr-summary,
.bfr-faq:not(.is-enhanced) .bfr-item[open] .bfr-summary {
	background: var(--bfr-accent);
	color: var(--bfr-on-accent);
}

.bfr-summary:focus-visible {
	outline: 2px solid var(--bfr-accent);
	outline-offset: 2px;
}

/* Question heading (h2-h6): neutralise theme heading styles so every tag looks the same */
.bfr-wrap .bfr-question {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
	flex: 1;
}

/* Icon: two stacked images that cross-fade */
.bfr-icon {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.bfr-icon::before,
.bfr-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: opacity var(--bfr-speed) var(--bfr-ease),
	            filter var(--bfr-speed) var(--bfr-ease);
}

/* Icons are red by default; turn them white on hover and when open */
.bfr-summary:hover .bfr-icon::before,
.bfr-summary:hover .bfr-icon::after,
.bfr-item.is-active .bfr-icon::before,
.bfr-item.is-active .bfr-icon::after,
.bfr-faq:not(.is-enhanced) .bfr-item[open] .bfr-icon::before,
.bfr-faq:not(.is-enhanced) .bfr-item[open] .bfr-icon::after {
	filter: brightness(0) invert(1);
}

/* closed = plus */
.bfr-icon::before {
	background-image: var(--bfr-icon-closed);
	opacity: 1;
}

/* open = minus */
.bfr-icon::after {
	background-image: var(--bfr-icon-open);
	opacity: 0;
}

.bfr-item.is-active .bfr-icon::before,
.bfr-faq:not(.is-enhanced) .bfr-item[open] .bfr-icon::before { opacity: 0; }

.bfr-item.is-active .bfr-icon::after,
.bfr-faq:not(.is-enhanced) .bfr-item[open] .bfr-icon::after { opacity: 1; }

/* ---------- Answer ---------- */
.bfr-answer {
	padding: 20px 24px 24px;
	color: var(--bfr-muted);
	line-height: 1.7;
}

.bfr-answer > :first-child { margin-top: 0; }
.bfr-answer > :last-child  { margin-bottom: 0; }

.bfr-answer ul,
.bfr-answer ol {
	margin: 0 0 1em 1.25em;
	padding: 0;
}

.bfr-answer blockquote {
	margin: 1em 0;
	padding: 0.5em 1em;
	border-left: 3px solid #e5e7eb;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.bfr-wrap .bfr-conclusion__title {
		font-size: 24px;
		line-height: 32px;
	}
	.bfr-summary { padding: 14px 16px; }
	.bfr-answer  { padding: 16px 16px 20px; }
	.bfr-wrap .bfr-question { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.bfr-item,
	.bfr-summary,
	.bfr-icon::before,
	.bfr-icon::after { transition: none; }
}