/* Custom FAQ — minimal, self-contained structural CSS.
 *
 * Defaults inherit fonts/colours from the active theme. When a user fills in
 * any of the Settings → Display fields, CFAQ_Assets prints an inline
 * <style> block with `!important` rules scoped to `.cfaq-topic`, which lets
 * the plugin reliably win over heavy theme rules like `.entry-content p`.
 *
 * The plugin's own structural rules below NEVER use `!important` — only
 * user-configured values do.
 */

.cfaq-topic {
	/* Defaults; overridden inline from Settings when set. */
	--cfaq-qa-gap: 0.75em;

	margin: 0 0 2em;

	/* Theme defence: kill any padding/background a theme may apply to
	   <section> so the FAQ never looks like a card and never inherits
	   a left offset. */
	padding: 0 !important;
	background: none !important;
}

.cfaq-items {
	/* Same idea for the inner <div>: no padding, no background. The
	   nested layout setting uses margin-left (set inline from Settings)
	   so resetting padding here doesn't fight it. */
	padding: 0 !important;
	background: none !important;
	list-style: none;
}

.cfaq-topic-title {
	/* Theme defence: many themes add floats, decorative pseudo-elements,
	   left padding, or unusual display rules to heading tags. When the FAQ
	   title is visible those styles can make only the first question sit to
	   the right of the title. Force this heading to behave as a plain block
	   and clear it before the FAQ list begins. */
	display: block !important;
	float: none !important;
	clear: both !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 0 0.5em !important;
	padding: 0 !important;
	text-indent: 0 !important;
	background: none !important;
	background-image: none !important;
}

.cfaq-topic-title::before,
.cfaq-topic-title::after {
	content: none !important;
	display: none !important;
}

.cfaq-has-title .cfaq-toggle,
.cfaq-has-title .cfaq-items {
	clear: both !important;
}

/* ----------------------------------------------------------------------
   Topic group expand
   ----------------------------------------------------------------------
   When a shortcode opts in with `group_expand="1"` the entire topic
   becomes one <details>. The topic title sits inside a <summary> and
   carries the same +/- icon used for individual questions. The
   questions inside render as plain static blocks (no per-item
   <details>) so a single click on the title reveals everything in the
   group at once.
*/

/* Theme defence: themes often target `details` with `display: flex`,
   `padding-left`, or `details > *:not(summary)` selectors for fancy
   accordion styling. When `details` itself is `display: flex`, the
   browser lays its <summary> and the question list out side-by-side
   — which is exactly the "questions pushed off-screen right" bug.
   Pin the outer container, its [open] state, and the inner items
   wrapper to a plain block layout with zero horizontal indent.

   Specificity boost via `html body .cfaq-topic.cfaq-topic-group`
   (0,2,2) so common theme selectors like `body.page-template-…
   details` (0,1,2) and `.entry-content details` (0,1,1) can't win.
   `.cfaq-topic-group` always carries the `cfaq-topic` class too, so
   the compound selector is safe. */
html body .cfaq-topic.cfaq-topic-group,
html body .cfaq-topic.cfaq-topic-group[open] {
	display: block !important;
	float: none !important;
	clear: both !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-indent: 0 !important;
	transform: none !important;
}

/* Collapsed group-expand topics should read like a stacked list, not
   like separated cards. Override `.cfaq-topic`'s 2em block gap and
   instead apply a tight 0.4em gap between consecutive collapsed
   groups. Any topic that's actually open keeps a comfortable
   margin-bottom so its revealed content doesn't crash into the next
   title.

   Two shortcodes back-to-back render as sibling <details> elements
   in the same parent, so `+` sibling selectors work as expected. */
html body .cfaq-topic.cfaq-topic-group {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

html body .cfaq-topic.cfaq-topic-group + .cfaq-topic.cfaq-topic-group {
	margin-top: 0.4em !important;
}

html body .cfaq-topic.cfaq-topic-group[open] {
	margin-bottom: 1.5em !important;
}

html body .cfaq-topic.cfaq-topic-group[open] + .cfaq-topic.cfaq-topic-group {
	margin-top: 0 !important;
}

/* The summary's `margin-bottom: 0.5em` was designed for the gap
   between the title row and the revealed content underneath — when
   the group is closed there is no content, so the margin just bloats
   the stack. Suppress it for the closed state only. */
html body .cfaq-topic.cfaq-topic-group:not([open]) > .cfaq-topic-summary {
	margin-bottom: 0 !important;
}

html body .cfaq-topic.cfaq-topic-group > .cfaq-items {
	display: block !important;
	float: none !important;
	clear: both !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
}

/* Extra belt-and-braces for the static items, in case a theme targets
   `details > div` or `details[open] > div` to indent panel content. */
html body .cfaq-topic.cfaq-topic-group .cfaq-item-static {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	float: none !important;
	clear: both !important;
	text-indent: 0 !important;
	transform: none !important;
}

.cfaq-topic-group > .cfaq-topic-summary {
	display: block !important;
	cursor: pointer;
	list-style: none;

	margin: 0 0 0.5em !important;
	padding: 0 !important;
	background: none !important;
	background-image: none !important;
	text-indent: 0 !important;
}

.cfaq-topic-group > .cfaq-topic-summary::-webkit-details-marker { display: none; }
.cfaq-topic-group > .cfaq-topic-summary::marker                 { content: ''; }

.cfaq-topic-group > .cfaq-topic-summary::before,
.cfaq-topic-group > .cfaq-topic-summary::after {
	content: none !important;
	display: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
}

/* Title row: heading on the left, +/- icon on the right. Lives inside
   the summary so the whole row stays one click target. */
.cfaq-topic-group > .cfaq-topic-summary > .cfaq-summary-head {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start;
	gap: 0.75em;
}

.cfaq-topic-group > .cfaq-topic-summary > .cfaq-summary-head > .cfaq-topic-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
}

.cfaq-topic-group > .cfaq-topic-summary > .cfaq-summary-head > .cfaq-q-icon {
	flex: 0 0 auto;
}

/* Hide the icon while the group is open so it stops reading as "click
   to reveal". `visibility: hidden` keeps its width so the title doesn't
   reflow on toggle. */
.cfaq-topic-group[open] > .cfaq-topic-summary > .cfaq-summary-head > .cfaq-q-icon {
	visibility: hidden;
}

/* Question preview list (only rendered when the "Show question list
   when collapsed" setting is on). Sits inside the <summary> so it stays
   visible while the topic is collapsed and stays part of the same
   click target; CSS hides it the moment the topic is opened, since the
   full Q+A list below makes it redundant. */
.cfaq-questions-preview {
	margin: 0.5em 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.cfaq-questions-preview-item {
	position: relative;
	margin: 0 !important;
	padding: 0.2em 0 0.2em 1.1em !important;
	list-style: none !important;
	line-height: 1.4;
}

.cfaq-questions-preview-item::before {
	content: '•';
	position: absolute;
	left: 0;
	top: 0.2em;
	opacity: 0.6;
}

.cfaq-topic-group[open] > .cfaq-topic-summary > .cfaq-questions-preview {
	display: none !important;
}

/* Expand/collapse-all controls (only rendered when toggle="1"). */
.cfaq-toggle {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 1em;
}

.cfaq-toggle-btn {
	cursor: pointer;
}

/* ----------------------------------------------------------------------
   Items list
   ---------------------------------------------------------------------- */

.cfaq-items > .cfaq-item + .cfaq-item {
	margin-top: 0;
}

.cfaq-item {
	border-top: 1px solid;
	border-color: currentColor;
	border-color: color-mix(in srgb, currentColor 18%, transparent);

	/* Theme defence: pin horizontal padding/margin to zero so the question
	   never starts indented even when the active theme styles <details>.
	   Vertical padding stays so items breathe; vertical margin stays at 0
	   because consecutive items already separate via border-top. */
	padding: 0.6em 0 !important;
	margin: 0 !important;
	background: none !important;

	/* Each item is its own block. Force `display:block` so a theme can't
	   make <details> behave as inline-block / flex / grid (some themes do
	   this for fancy accordion styling, which causes the next sibling to
	   wrap to the right of the open one). `clear:both` guarantees any
	   float left over from the previous item's answer body doesn't bleed
	   into this item and push its question to the right. */
	display: block !important;
	clear: both !important;
	width: auto !important;
	float: none !important;
	position: static !important;
}

/* The open state must inherit the same locked layout. Some themes target
   `details[open]` specifically to add padding / float / transform, all of
   which can cause the *next* item to shift sideways when the user clicks
   the first one to expand it. */
.cfaq-item[open] {
	display: block !important;
	clear: both !important;
	float: none !important;
	margin: 0 !important;
	padding: 0.6em 0 !important;
	transform: none !important;
}

/* Group-expand mode: items render as plain blocks (no per-item
   <details>). Match the regular .cfaq-item border + spacing AND apply
   the same horizontal-reset shield so a theme can't push them off to
   the right via `.entry-content div { padding-left: …}` or similar.
   Vertical padding stays so each Q+A breathes. */
.cfaq-item-static {
	display: block !important;
	clear: both !important;
	float: none !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0.6em 0 !important;
	text-indent: 0 !important;
	transform: none !important;
}

.cfaq-item-static .cfaq-question-static {
	display: block !important;
	cursor: default;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
	text-align: left !important;
	background: none !important;
	background-image: none !important;
	float: none !important;
	clear: both !important;
	width: auto !important;
}

.cfaq-items > .cfaq-item:last-child {
	border-bottom: 1px solid;
	border-bottom-color: currentColor;
	border-bottom-color: color-mix(in srgb, currentColor 18%, transparent);
}

/* ----------------------------------------------------------------------
   Question (the native <summary>)
   ----------------------------------------------------------------------
   Layout: text on the left taking all the spare room, a fixed-size "+" icon
   on the right. Using flex (rather than absolute positioning on a ::after)
   means long questions wrap naturally without ever colliding with the
   icon — and the icon can sit aligned to the FIRST line of a multi-line
   question (`align-items: flex-start`).
*/

.cfaq-question {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: flex-start;
	gap: 0.75em;
	cursor: pointer;
	list-style: none;

	/* Theme defence: lots of themes attach `padding-left`, `text-indent`,
	   `background-image` arrows, or `text-align: center` to <summary>. The
	   following resets force our flex layout to be the single source of
	   truth for question chrome and alignment. !important is intentional
	   because theme selectors targeting <summary> are commonly more
	   specific than ours. */
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
	text-align: left !important;
	background: none !important;
	background-image: none !important;
}

.cfaq-q-text {
	flex: 1 1 auto;
	min-width: 0;       /* let long words wrap inside the flex item */
	text-align: left;   /* theme-proof: keep the text left-aligned */
}

.cfaq-q-icon {
	flex: 0 0 auto;
	font-size: 1.15em;
	line-height: 1.1;
	opacity: 0.6;
	transition: opacity 0.15s ease, transform 0.15s ease;
	user-select: none;
}

/* Hide every disclosure marker — native AND theme-injected.
 *
 * Order matters here:
 *   1. ::marker / ::-webkit-details-marker  — the OS-supplied triangle.
 *   2. .cfaq-question::before / ::after     — symbols themes commonly
 *      attach to <summary> for chevrons, plus signs, etc.
 *   3. .cfaq-q-text::before / ::after       — themes sometimes target
 *      the first inline child of <summary> instead of <summary> itself.
 *
 * `content: none` removes the box entirely; `display: none` is a belt-
 * and-braces for themes that still apply layout to the pseudo-element. */
.cfaq-question::-webkit-details-marker { display: none; }
.cfaq-question::marker                 { content: ''; }

.cfaq-question::before,
.cfaq-question::after,
.cfaq-q-text::before,
.cfaq-q-text::after,
.cfaq-item > summary::before,
.cfaq-item > summary::after {
	content: none !important;
	display: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
}

.cfaq-question:hover .cfaq-q-icon,
.cfaq-question:focus-visible .cfaq-q-icon {
	opacity: 1;
}

/* When the answer is open we hide the icon entirely. `visibility: hidden`
   reserves its space so the question text doesn't reflow on toggle. */
.cfaq-item[open] > .cfaq-question .cfaq-q-icon {
	visibility: hidden;
}

/* ----------------------------------------------------------------------
   Answer
   ----------------------------------------------------------------------
   Use margin-top (not padding-top) so the gap below the question is
   genuine vertical space and isn't eaten by collapsing margins from a
   leading <p>.
*/

.cfaq-answer {
	margin-top: var(--cfaq-qa-gap);
	padding-bottom: 0.25em;

	/* Establish a new block formatting context so floats inside the
	   answer body (theme-styled images, pull-quotes, etc.) are contained
	   within this answer and can't push the next FAQ item to the right
	   when this one is expanded. */
	display: flow-root;
	margin-left: 0 !important;
	padding-left: 0 !important;
	float: none !important;
	clear: both !important;
}

/* `<p>` wrappers inside an answer are rewritten to
   `<div class="cfaq-answer-p">` so theme rules like
   `.entry-content p::after { content: "..." }` (decorative icons,
   chevrons, etc.) don't leak into FAQ answers. Mirror the default
   paragraph block spacing and belt-and-braces hide any pseudo-element
   a theme might still try to attach to this wrapper. */
.cfaq-answer-p {
	display: block;
	margin: 0 0 1em;
}

.cfaq-answer-p:last-child {
	margin-bottom: 0;
}

.cfaq-answer .cfaq-answer-p::before,
.cfaq-answer .cfaq-answer-p::after {
	content: none !important;
	display: none !important;
	background: none !important;
	background-image: none !important;
}

/* Knock leading/trailing margin off the first/last block inside the answer
   so the body sits flush against the question gap. */
.cfaq-answer > :first-child { margin-top: 0; }
.cfaq-answer > :last-child  { margin-bottom: 0; }

.cfaq-empty {
	opacity: 0.7;
	font-style: italic;
}

/* ----------------------------------------------------------------------
   Nest
   ----------------------------------------------------------------------
   A nest is a STATIC top-level heading that groups several FAQ groups
   visually. The heading itself does not collapse — the expand toggles
   live on the individual FAQ group titles underneath (which are
   rendered in `group_expand="1"` mode).

   Markup (rendered by CFAQ_Shortcode::render_nest):

       <section class="cfaq-nest">
         <h1 class="cfaq-nest-title">…</h1>
         <div class="cfaq-nest-items">
           <details class="cfaq-topic cfaq-topic-group">…</details>
           …
         </div>
       </section>
*/

.cfaq-nest {
	margin: 0 0 2em;
	padding: 0 !important;
	background: none !important;
}

/* Theme defence: stop themes pinning <section> to flex/float/etc. */
html body .cfaq-nest {
	display: block !important;
	float: none !important;
	clear: both !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-indent: 0 !important;
	transform: none !important;
}

.cfaq-nest > .cfaq-nest-title {
	margin: 0 0 0.75em !important;
	/* Theme defence: kill backgrounds/decorations a theme may pin to H1. */
	background: none !important;
	background-image: none !important;
	text-indent: 0 !important;
}

.cfaq-nest > .cfaq-nest-title::before,
.cfaq-nest > .cfaq-nest-title::after {
	content: none !important;
	display: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
}

.cfaq-nest-items {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
}

/* Tighten consecutive group titles inside a nest the same way we tighten
   stacked group-expand topics — they read as one menu rather than
   widely-spaced cards. */
html body .cfaq-nest .cfaq-topic.cfaq-topic-group {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

html body .cfaq-nest .cfaq-topic.cfaq-topic-group + .cfaq-topic.cfaq-topic-group {
	margin-top: 0.4em !important;
}

html body .cfaq-nest .cfaq-topic.cfaq-topic-group[open] {
	margin-bottom: 1.25em !important;
}