/* ============================================================
   Smart FAQ Schema — Frontend Styles
   All colours / fonts that depend on settings are in dynamic CSS
   (output via wp_head) so these are structural only.
   ============================================================ */

/* ---- Wrapper ---- */
.sfaq-wrap {
	width: 100%;
	max-width: 100%;
	margin: 36px 0;
	box-sizing: border-box;
}

/* ---- Section Title (h2) ---- */
.sfaq-section-title {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0 0 20px;
	line-height: 1.25;
}

/* ---- Accordion container ---- */
.sfaq-accordion { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }

/* ---- Each item ---- */
.sfaq-item { margin: 0; }

/* ---- Question button (shared base — NO colour here, all colour via dynamic CSS) ---- */
.sfaq-question-wrap { margin: 0; padding: 0; }
/* Reset any theme button styles that could override our dynamic colours */
.sfaq-wrap button.sfaq-question,
.sfaq-wrap .sfaq-question {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	text-align: left !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	padding: 14px 18px !important;
	gap: 12px !important;
	line-height: 1.4 !important;
	transition: background-color .22s ease, color .22s ease !important;
	border-radius: 0 !important; /* individual styles set their own radius */
	margin: 0 !important;
}
.sfaq-wrap .sfaq-question:focus-visible { outline: 3px solid #d8222b; outline-offset: 2px; }
.sfaq-question-text { flex: 1; }

/* ---- Answer panel ---- */
/*
 * [hidden] = display:none  →  zero height, zero space, no visible outline.
 * JS removes [hidden] only when opening, re-adds it after the close transition.
 * We do NOT override [hidden] with display:block here — that's what caused
 * the empty black-bordered box to appear below every closed question.
 */
.sfaq-answer { overflow: hidden; border: none !important; outline: none !important; }
.sfaq-answer-inner { padding: 14px 18px 18px; line-height: 1.7; border: none !important; outline: none !important; }
.sfaq-answer-inner p { margin: 0 0 10px; }
.sfaq-answer-inner p:last-child { margin-bottom: 0; }

/* ==============================================================
   STYLE 1 — Classic Accordion
   Box with 1px grey border, radius from settings, + / - icon left
   ============================================================== */
.sfaq-style1 .sfaq-accordion { gap: 10px; }
.sfaq-style1 .sfaq-item {
	border: 1px solid #cccccc; /* fallback — overridden by dynamic CSS */
	border-radius: 10px;       /* fallback — overridden by dynamic CSS */
	overflow: hidden;
}
/* No border-radius on the button itself; the parent overflow:hidden clips it */
.sfaq-style1 .sfaq-answer-inner {
	border-top: 1px solid rgba(0,0,0,.06);
}

/* + / - icon style 1 */
.sfaq-style1 .sfaq-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	min-width: 22px;
	border-radius: 50%;
	border: 2px solid currentColor;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	transition: transform .25s, background .2s;
}
.sfaq-style1 .sfaq-icon::before { content: '+'; }
.sfaq-style1 .sfaq-question[aria-expanded='true'] .sfaq-icon::before { content: '−'; }

/* ==============================================================
   STYLE 2 — Minimal Line
   No box, bottom border only, arrow on the right
   ============================================================== */
.sfaq-style2 .sfaq-accordion { gap: 0; }
.sfaq-style2 .sfaq-item { border-bottom: 1px solid #cccccc; }
.sfaq-style2 .sfaq-item:first-child { border-top: 1px solid #cccccc; }
.sfaq-style2 .sfaq-question { padding: 15px 4px; justify-content: space-between; }
.sfaq-style2 .sfaq-question:hover { background: transparent !important; opacity: .75; }
.sfaq-style2 .sfaq-question[aria-expanded='true'] { background: transparent !important; color: inherit; }
.sfaq-style2 .sfaq-answer-inner { padding: 0 4px 16px; }

/* Arrow icon style 2 */
.sfaq-style2 .sfaq-icon {
	order: 2;
	width: 20px;
	height: 20px;
	min-width: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s;
}
.sfaq-style2 .sfaq-icon::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform .25s;
}
.sfaq-style2 .sfaq-question[aria-expanded='true'] .sfaq-icon::before {
	transform: rotate(-135deg) translate(-3px, -3px);
}

/* ==============================================================
   STYLE 3 — Card / Shadow
   White card with drop shadow, chevron right
   ============================================================== */
.sfaq-style3 .sfaq-accordion { gap: 12px; }
.sfaq-style3 .sfaq-item {
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
	overflow: hidden;
	transition: box-shadow .2s;
}
.sfaq-style3 .sfaq-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.sfaq-style3 .sfaq-item--open { box-shadow: 0 4px 20px rgba(192,57,43,.15); }
.sfaq-style3 .sfaq-question { padding: 16px 20px; justify-content: space-between; }
.sfaq-style3 .sfaq-answer-inner { padding: 0 20px 18px; }

/* Chevron icon style 3 */
.sfaq-style3 .sfaq-icon {
	order: 2;
	width: 24px;
	height: 24px;
	min-width: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0,0,0,.06);
	transition: background .2s, transform .3s;
}
.sfaq-style3 .sfaq-icon::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .25s;
}
.sfaq-style3 .sfaq-question[aria-expanded='true'] .sfaq-icon::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}
.sfaq-style3 .sfaq-question[aria-expanded='true'] .sfaq-icon { background: rgba(255,255,255,.2); }

/* ==============================================================
   STYLE 4 — Left Accent Border
   Coloured left border, no outer box
   ============================================================== */
.sfaq-style4 .sfaq-accordion { gap: 8px; }
.sfaq-style4 .sfaq-item {
	border-left: 4px solid #d8222b;
	border-radius: 0 8px 8px 0;
	background: #f9fafb;
	overflow: hidden;
	transition: border-left-color .2s;
}
.sfaq-style4 .sfaq-question { padding: 14px 18px; justify-content: space-between; }
.sfaq-style4 .sfaq-question:hover { background: #f3f4f6; }
.sfaq-style4 .sfaq-question[aria-expanded='true'] { background: #fdf2f2; border-radius: 0; }
.sfaq-style4 .sfaq-answer-inner { padding: 0 18px 16px; border-top: 1px solid rgba(0,0,0,.06); }

/* Plus icon style 4 */
.sfaq-style4 .sfaq-icon {
	order: 2;
	font-size: 20px;
	font-weight: 700;
	width: 24px;
	min-width: 24px;
	text-align: center;
	transition: transform .25s;
}
.sfaq-style4 .sfaq-icon::before { content: '+'; }
.sfaq-style4 .sfaq-question[aria-expanded='true'] .sfaq-icon::before { content: '−'; }

/* ==============================================================
   STYLE 5 — Modern Pill
   Fully rounded pill, flat colour
   ============================================================== */
.sfaq-style5 .sfaq-accordion { gap: 10px; }
.sfaq-style5 .sfaq-item { overflow: hidden; }
.sfaq-style5 .sfaq-question {
	border-radius: 50px;
	padding: 13px 22px;
	border: 1px solid #d1d5db;
	justify-content: space-between;
	transition: border-radius .3s, background .2s, color .2s;
}
.sfaq-style5 .sfaq-question[aria-expanded='true'] { border-radius: 16px 16px 0 0; border-color: transparent; }
.sfaq-style5 .sfaq-answer {
	background: #f9fafb;
	border: 1px solid #d1d5db;
	border-top: none;
	border-radius: 0 0 16px 16px;
}
.sfaq-style5 .sfaq-answer-inner { padding: 14px 22px 18px; }

/* Arrow icon style 5 */
.sfaq-style5 .sfaq-icon {
	order: 2;
	width: 26px;
	height: 26px;
	min-width: 26px;
	border-radius: 50%;
	background: rgba(0,0,0,.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s, background .2s;
}
.sfaq-style5 .sfaq-icon::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .3s;
}
.sfaq-style5 .sfaq-question[aria-expanded='true'] .sfaq-icon::before {
	transform: rotate(-135deg) translate(-2px, -2px);
}
.sfaq-style5 .sfaq-question[aria-expanded='true'] .sfaq-icon { background: rgba(255,255,255,.25); }

/* ==============================================================
   Slide animation — DUAL PROTECTION
   Layer 1: [hidden] attr → display:none  (zero space, zero outline)
   Layer 2: max-height:0 on ALL .sfaq-answer  (fallback if anything
            strips [hidden]'s display:none — e.g. Elementor CSS reset)
   Both layers together mean a closed panel is ALWAYS invisible.
   JS lifecycle: remove [hidden] → reflow → add .sfaq-item--open (open)
                 remove .sfaq-item--open → transitionend → re-add [hidden] (close)
   ============================================================== */
.sfaq-wrap .sfaq-answer {
	overflow: hidden !important;
	max-height: 0 !important;
	transition: max-height .38s cubic-bezier(.4,0,.2,1);
}
/* Force display:none regardless of any theme/plugin that unsets [hidden] */
.sfaq-wrap .sfaq-answer[hidden] {
	display: none !important;
	max-height: 0 !important;
}
/* Open: let it grow — higher specificity beats the !important above */
.sfaq-wrap .sfaq-item--open .sfaq-answer {
	max-height: 2000px !important;
	display: block !important;
}

/* ==============================================================
   Responsive
   ============================================================== */
@media (max-width: 768px) {
	.sfaq-wrap { margin: 24px 0; }
	.sfaq-section-title { font-size: 1.3em; }
	.sfaq-question { padding: 12px 14px; gap: 10px; }
	.sfaq-answer-inner { padding: 12px 14px 16px; }
	.sfaq-style3 .sfaq-question { padding: 14px 16px; }
	.sfaq-style3 .sfaq-answer-inner { padding: 0 16px 16px; }
	.sfaq-style5 .sfaq-question { padding: 12px 18px; border-radius: 40px; }
}
@media (max-width: 480px) {
	.sfaq-section-title { font-size: 1.15em; }
	.sfaq-question { padding: 11px 12px; font-size: 14px; }
}