/* ===================================================================
   Smart FAQ Schema Manager — Frontend Styles
   All rules use !important to override theme styles safely.
=================================================================== */

/* ---------- group wrapper ---------- */
html body .sfsm-faq-group {
	/* base color */
}

/* ---------- group title (h2) ---------- */
html body .sfsm-group-title {
	font-size: var(--sfsm-group-title-font-size) !important;
	font-weight: var(--sfsm-group-title-font-weight) !important;
	font-family: var(--sfsm-group-title-font-family) !important;
	color: var(--sfsm-group-title-color) !important;
	margin: var(--sfsm-group-title-margin) !important;
	line-height: var(--sfsm-group-title-line-height) !important;
	text-align: var(--sfsm-group-title-align) !important;
}

/* ---------- search box ---------- */
html body .sfsm-search {
	display: block !important;
	margin-bottom: 1rem !important;
}
html body .sfsm-search input {
	width: min(100%, 420px) !important;
	padding: .7rem .85rem !important;
	border: 1px solid #d9e1ec !important; /* Fallback static border */
	border-radius: 4px !important;
}

/* ---------- layout containers ---------- */
html body .sfsm-items,
html body .sfsm-column {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--sfsm-gap) !important;
}
html body .sfsm-two-columns {
	display: flex !important;
	align-items: flex-start !important;
	gap: 1rem !important;
}
html body .sfsm-two-columns .sfsm-column {
	flex: 1 1 0 !important;
	min-width: 0 !important;
}
html body .sfsm-layout-grid .sfsm-items {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	align-items: start !important;
}
html body .sfsm-layout-masonry .sfsm-items {
	column-count: 2 !important;
	column-gap: 1rem !important;
	display: block !important;
}
html body .sfsm-layout-masonry .sfsm-item {
	break-inside: avoid !important;
	margin-bottom: var(--sfsm-gap) !important;
}
html body .sfsm-layout-list .sfsm-question {
	cursor: default !important;
}
html body .sfsm-layout-compact .sfsm-question,
html body .sfsm-layout-compact .sfsm-answer {
	padding: .65rem .75rem !important;
}

/* ---------- FAQ item card (Wrapper) ---------- */
html body .sfsm-item {
	border: var(--sfsm-q-border) !important;
	border-radius: var(--sfsm-q-border-radius) !important;
	overflow: hidden !important;
	background: var(--sfsm-a-bg) !important; /* The content bg lives behind the question */
	transition: border var(--sfsm-speed) var(--sfsm-easing) !important;
}

/* Hover state on item container */
html body .sfsm-item:hover {
	border: var(--sfsm-qh-border) !important;
	border-radius: var(--sfsm-qh-border-radius) !important;
}

/* Active card border when expanded */
html body .sfsm-item:has(.sfsm-question[aria-expanded="true"]) {
	border: var(--sfsm-qa-border) !important;
	border-radius: var(--sfsm-qa-border-radius) !important;
}

/* ---------- question heading ---------- */
html body .sfsm-question-heading {
	margin: 0 !important;
	font-size: var(--sfsm-q-font-size) !important; /* Fallback for semantics */
}

/* ---------- question button ---------- */
html body .sfsm-question {
	align-items: center !important;
	/* NORMAL STATE STYLES */
	background: var(--sfsm-q-bg) !important;
	color: var(--sfsm-q-color) !important;
	font-family: var(--sfsm-q-font-family) !important;
	font-size: var(--sfsm-q-font-size) !important;
	font-weight: var(--sfsm-q-font-weight) !important;
	line-height: var(--sfsm-q-line-height) !important;
	padding: var(--sfsm-q-padding) !important;
	
	border: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	flex-direction: var(--sfsm-icon-position) !important;
	justify-content: space-between !important;
	text-align: left !important;
	width: 100% !important;
	transition: background var(--sfsm-speed) var(--sfsm-easing), color var(--sfsm-speed) var(--sfsm-easing), font-size var(--sfsm-speed) var(--sfsm-easing), padding var(--sfsm-speed) var(--sfsm-easing) !important;
}

/* HOVER STATE */
html body .sfsm-question:hover {
	background: var(--sfsm-qh-bg) !important;
	color: var(--sfsm-qh-color) !important;
	font-family: var(--sfsm-qh-font-family) !important;
	font-size: var(--sfsm-qh-font-size) !important;
	font-weight: var(--sfsm-qh-font-weight) !important;
	line-height: var(--sfsm-qh-line-height) !important;
	padding: var(--sfsm-qh-padding) !important;
}

/* ACTIVE STATE */
html body .sfsm-question[aria-expanded="true"] {
	background: var(--sfsm-qa-bg) !important;
	color: var(--sfsm-qa-color) !important;
	font-family: var(--sfsm-qa-font-family) !important;
	font-size: var(--sfsm-qa-font-size) !important;
	font-weight: var(--sfsm-qa-font-weight) !important;
	line-height: var(--sfsm-qa-line-height) !important;
	padding: var(--sfsm-qa-padding) !important;
}

/* Focus */
html body .sfsm-question:focus-visible,
html body .sfsm-copy-link:focus-visible,
html body .sfsm-search input:focus-visible {
	outline: 3px solid #2271b1 !important;
	outline-offset: -3px !important;
}

/* ---------- icon ---------- */
html body .sfsm-icon {
	align-items: center !important;
	background: var(--sfsm-icon-bg) !important;
	border-radius: var(--sfsm-icon-radius) !important;
	display: inline-flex !important;
	flex: 0 0 auto !important;
	justify-content: center !important;
	color: var(--sfsm-icon-color) !important;
	font-size: var(--sfsm-icon-size) !important; /* Scales svg em's */
	padding: var(--sfsm-icon-padding) !important;
	transition: color var(--sfsm-speed) var(--sfsm-easing), background var(--sfsm-speed) var(--sfsm-easing), transform var(--sfsm-speed) var(--sfsm-easing) !important;
}
html body .sfsm-question:hover .sfsm-icon {
	background: var(--sfsm-icon-hover-bg) !important;
	color: var(--sfsm-icon-hover-color) !important;
}
html body .sfsm-question[aria-expanded="true"] .sfsm-icon {
	background: var(--sfsm-icon-active-bg) !important;
	color: var(--sfsm-icon-active-color) !important;
}
html body .sfsm-icon-svg {
	display: block !important;
	height: 1em !important;
	width: 1em !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	stroke-width: 2 !important;
	transition: transform var(--sfsm-speed) var(--sfsm-easing), opacity var(--sfsm-speed) var(--sfsm-easing) !important;
}
html body .sfsm-icon-svg path {
	vector-effect: non-scaling-stroke !important;
}
html body .sfsm-icon-caret .sfsm-icon-svg {
	fill: currentColor !important;
	stroke: none !important;
}
html body .sfsm-icon-circle_plus .sfsm-icon-svg {
	height: 1.1em !important;
	width: 1.1em !important;
}

/* Icon Animations (based on sfsm-anim-* class on the container) */
html body .sfsm-anim-rotate_180 .sfsm-question[aria-expanded="true"] .sfsm-icon-svg {
	transform: rotate(180deg) !important;
}
html body .sfsm-anim-rotate_90 .sfsm-question[aria-expanded="true"] .sfsm-icon-svg {
	transform: rotate(90deg) !important;
}
html body .sfsm-anim-rotate_45 .sfsm-question[aria-expanded="true"] .sfsm-icon-svg {
	transform: rotate(45deg) !important;
}
html body .sfsm-anim-none .sfsm-question[aria-expanded="true"] .sfsm-icon-svg {
	transform: none !important;
}

/* Special plus/minus SVG animation handling */
html body .sfsm-question[aria-expanded="true"] .sfsm-icon-svg-plus .sfsm-icon-vertical {
	opacity: 0 !important;
}

/* ---------- answer panel — smooth max-height animation ---------- */
html body .sfsm-answer {
	background: var(--sfsm-a-bg) !important;
	color: var(--sfsm-a-color) !important;
	font-family: var(--sfsm-a-font-family) !important;
	font-size: var(--sfsm-a-font-size) !important;
	font-weight: var(--sfsm-a-font-weight) !important;
	line-height: var(--sfsm-a-line-height) !important;
	
	padding: 0 var(--sfsm-a-padding) !important; /* Horizontal padding, vertical starts at 0 */
	
	/* max-height animation for smooth open/close */
	max-height: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition:
		max-height var(--sfsm-speed) var(--sfsm-easing),
		opacity    var(--sfsm-speed) var(--sfsm-easing),
		padding    var(--sfsm-speed) var(--sfsm-easing),
		visibility 0ms linear var(--sfsm-speed) !important;
}
html body .sfsm-answer.sfsm-answer-open {
	max-height: 2000px !important;
	opacity: 1 !important;
	padding: var(--sfsm-a-padding) !important; /* Full padding when open */
	visibility: visible !important;
	transition:
		max-height var(--sfsm-speed) var(--sfsm-easing),
		opacity    var(--sfsm-speed) var(--sfsm-easing),
		padding    var(--sfsm-speed) var(--sfsm-easing),
		visibility 0ms linear 0ms !important;
}

/* Fix <p> margin inside answers — consistent spacing */
html body .sfsm-answer p {
	margin-bottom: 1em !important;
}
html body .sfsm-answer p:last-child {
	margin-bottom: 0 !important;
}

/* ---------- copy-link button ---------- */
html body .sfsm-copy-link {
	background: transparent !important;
	border: 1px solid currentColor !important;
	border-radius: 4px !important;
	color: inherit !important;
	cursor: pointer !important;
	margin-top: .75rem !important;
	padding: .35rem .6rem !important;
	font-size: 0.85em !important;
}

/* ---------- search hide ---------- */
html body .sfsm-hidden-by-search {
	display: none !important;
}

/* ---------- responsive ---------- */
@media (max-width: 700px) {
	html body .sfsm-device-desktop {
		display: none !important;
	}
	html body .sfsm-two-columns {
		display: block !important;
	}
	html body .sfsm-two-columns .sfsm-column + .sfsm-column {
		margin-top: var(--sfsm-gap) !important;
	}
	html body .sfsm-layout-masonry .sfsm-items {
		column-count: 1 !important;
	}
}
@media (min-width: 701px) {
	html body .sfsm-device-mobile {
		display: none !important;
	}
}
@media print {
	html body .sfsm-search,
	html body .sfsm-copy-link {
		display: none !important;
	}
	html body .sfsm-answer {
		max-height: none !important;
		opacity: 1 !important;
		padding: var(--sfsm-a-padding) !important;
		visibility: visible !important;
	}
}