/**
 * Artclick FAQ Builder — frontend accordion styles.
 * Theme-agnostic; everything is driven by CSS custom properties.
 */

.afb-wrap {
	--afb-border: #e2e8f0;
	--afb-bg-q: transparent;
	--afb-bg-a: transparent;
	--afb-color-q: #1e293b;
	--afb-color-a: #334155;
	--afb-accent: #64748b;
	--afb-radius: 8px;
	--afb-border-width: 1px;
	--afb-speed: 300ms;
	--afb-font-size: inherit;
	--afb-item-gap: 14px;
	--afb-group-gap: 1.5em;

	/* Explicit width: without it, a theme whose content area lays out its children
	   with flex/grid (common) can shrink-wrap this whole block to its content's
	   natural size instead of stretching it — the accordion then renders as a
	   narrow, cramped box, which also makes .afb-q's own full-button background
	   look like it's hugging just the question text instead of a proper full-width
	   row, and the .afb-a border-top divider look like a short stray line instead
	   of a normal-width separator. */
	display: block;
	width: 100%;
	margin: 0 0 var(--afb-group-gap);
}

.afb-wrap *,
.afb-wrap *::before,
.afb-wrap *::after {
	box-sizing: border-box;
}

/* Renders as <div role="heading" aria-level="2"> rather than a real <h2> (see
   templates/accordion.php) — ARIA still gives it full heading semantics for
   screen-reader heading navigation, but it's invisible to anything that scans
   the DOM for literal h1–h6 tags, most importantly page "Table of Contents"
   plugins (Easy Table of Contents etc.), which used to list every single FAQ
   group title/question as its own TOC entry. Individual questions (.afb-q-text,
   inside each <details>'s <summary>) use the identical role="heading"-on-a-
   plain-element approach for the exact same reason. A prior version of this
   plugin used real <h2>/<h3> tags for both, which is also why this rule is
   still hardened against theme bleed-through below even though that specific
   h2/h3 vector is now closed: a theme selector like ".content h3" (0,1,1) can
   beat a bare ".afb-group-title" class selector (0,1,0), so the ".afb-wrap"
   prefix bumps this to two classes (0,2,0) — no !important needed, so the
   site's own custom CSS can still override these rules normally if ever
   wanted. */
.afb-wrap .afb-group-title {
	display: block;
	width: auto;
	max-width: none;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: left;
	list-style: none;
	font-size: var(--afb-group-title-size, 1.3em);
	font-weight: 700;
	color: var(--afb-group-title-color, var(--afb-color-q));
	line-height: 1.3;
	scroll-margin-top: 20px;
}

.afb-item {
	width: 100%;
	border: var(--afb-border-width) solid var(--afb-border);
	border-radius: var(--afb-radius);
	margin-bottom: var(--afb-item-gap);
	background: var(--afb-bg-a);
	overflow: hidden;
	scroll-margin-top: 20px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	transition: box-shadow var(--afb-speed) ease, border-color var(--afb-speed) ease;
}

/* Opt-in (Settings → Bottom divider) — a plain full-width separator line under
   each FAQ, independent of --afb-border-width above so it still works even
   with the card border turned off (0). */
.afb-wrap.afb-divider .afb-item {
	border-bottom: 1px solid var(--afb-border);
}

.afb-item:hover {
	box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}

/* open_all's non-collapsible items (see .afb-q-static below) shouldn't gain the
   hover shadow-bump above — it visually implies "clickable", but there's
   nothing to click. */
.afb-item.afb-static:hover {
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

/* [open] (the native <details> attribute the browser itself toggles) rather
   than a JS-managed .is-open class — see templates/accordion.php, which
   switched .afb-item from a <div> to a real <details> element so the
   expand/collapse itself needs zero JS. */
.afb-item[open] {
	border-color: var(--afb-accent);
	box-shadow: 0 8px 20px rgba(15, 23, 42, .09);
}

/* Opt-out (Settings → Card shadow) — a completely flat look, e.g. paired with
   Border width 0 and/or the Bottom divider above. */
.afb-wrap.afb-no-shadow .afb-item,
.afb-wrap.afb-no-shadow .afb-item:hover,
.afb-wrap.afb-no-shadow .afb-item[open] {
	box-shadow: none;
}

body.admin-bar .afb-item,
body.admin-bar .afb-group-title {
	scroll-margin-top: 52px;
}

/* .afb-q is a <summary> now (templates/accordion.php) — <summary> must be
   the direct child of its <details>, so the old wrapping
   role="heading" div (.afb-q-heading) that wasn't possible to keep is gone.
   Its content is a plain <span role="heading" aria-level="3"> instead of a
   real <h3> (see .afb-q-text below) — same TOC-plugin-pollution reasoning as
   .afb-group-title above: a literal heading tag here would resurface exactly
   the problem that comment describes, just one level down (every question,
   not just every group, listed as its own TOC entry). */
.afb-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 18px 20px;
	border: 0;
	/* Browsers default <summary> to display:list-item with its own disclosure
	   triangle (::marker, or ::-webkit-details-marker in older WebKit/Blink) —
	   the flex layout above already overrides display:list-item, these two
	   remove the marker itself so only this plugin's own .afb-icon chevron
	   shows. */
	list-style: none;
	/* Driven by the same --afb-bg-q the "Question background" colour picker in
	   Settings controls (default is now white, matching the answer/card
	   background, so out of the box the question row shows no tint at all) —
	   one variable for every state (idle/hover/open) instead of a second,
	   non-configurable --afb-bg-q-hover that used to make the row change shade
	   on click regardless of what colour was picked for "Question background".
	   Hover/open feedback still comes through clearly via .afb-item's own
	   border-colour + box-shadow changes below. */
	background: var(--afb-bg-q);
	color: var(--afb-color-q);
	/* <summary> doesn't necessarily inherit the page's font-family by default
	   in every browser (same historical quirk as plain <button> elements) —
	   without this, the question could visibly render in a different typeface
	   than the answer text right below it, which sits in a plain <div> and
	   inherits normally. */
	font-family: inherit;
	font-size: var(--afb-font-size-q, var(--afb-font-size, 1rem));
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}

.afb-q::-webkit-details-marker {
	display: none;
}

.afb-q::marker {
	content: '';
	display: none;
}

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

/* open_all's non-collapsible question row — still a real <summary> (every
   .afb-q is, now), just locked from ever actually toggling: pointer-events
   blocks mouse/touch activation, tabindex="-1" (set in templates/accordion.php)
   drops it from the keyboard tab order so Enter/Space can't reach it either —
   together they fully reproduce the old plain-<span>-with-no-click-handler
   behaviour using only CSS, no JS condition needed to decide "is this one
   clickable" any more. */
.afb-q-static {
	cursor: default;
	pointer-events: none;
}

.afb-q-text {
	flex: 1 1 auto;
}

/* Chevron toggle — a plain rotating corner (the classic CSS border-arrow
   trick) reads as a much lighter, more contemporary "expand" affordance than
   a filled dot with a plus/minus glyph stamped on it. */
.afb-icon {
	flex: 0 0 auto;
	position: relative;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--afb-accent) 9%, transparent);
	transition: background var(--afb-speed) ease;
}

.afb-item[open] .afb-icon {
	background: color-mix(in srgb, var(--afb-accent) 16%, transparent);
}

.afb-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border-right: 2px solid var(--afb-accent);
	border-bottom: 2px solid var(--afb-accent);
	border-radius: 0 0 2px;
	transform: translateX(-50%) rotate(45deg);
	transition: transform var(--afb-speed) ease, margin var(--afb-speed) ease;
}

.afb-item[open] .afb-icon::after {
	margin-top: -2px;
	transform: translateX(-50%) rotate(-135deg);
}

/* Pure-CSS open/close animation (no JS at all) via the "grid-rows" technique:
   a browser's own UA stylesheet gives <details> content display:none while
   closed, which can't be transitioned (display isn't animatable) — so this
   author-level rule unconditionally overrides that to display:grid instead
   (author CSS always beats UA CSS regardless of selector specificity), and
   animates grid-template-rows between 0fr (closed) and 1fr (open) instead,
   which — unlike the old fixed/guessed max-height tricks this technique
   replaces — tracks the CONTENT's real height exactly, at any length.
   .afb-item[open] (the native <details> attribute, see templates/accordion.php)
   drives it, so this needs zero JS to trigger either direction. */
.afb-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--afb-speed) ease;
	color: var(--afb-color-a);
	background: var(--afb-bg-a);
}

.afb-item[open] > .afb-a {
	grid-template-rows: 1fr;
}

/* border-top lives here, gated on [open], rather than as an unconditional
   rule on .afb-a-body itself — a border is painted at a box's edges
   regardless of how small the box has been squeezed to (overflow:hidden on
   that same box only clips its overflowing CONTENT/padding, never its own
   border), so an unconditional border-top on the thing being 0fr-collapsed
   above would still draw as a persistent hairline across the closed question
   row instead of fully disappearing with the rest of the answer. */
.afb-item[open] > .afb-a > .afb-a-body {
	border-top: var(--afb-border-width) solid var(--afb-border);
}

.afb-a-body {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px 20px;
	/* Both required by the grid-rows trick above, not just tidiness: overflow
	   clips this row's content to its animated (possibly 0px) height instead
	   of spilling out past it, and min-height:0 lets it actually reach that
	   0px — a flex child's default min-height is its content's own natural
	   minimum size otherwise (the same "won't actually shrink" quirk
	   .afb-a-content's own min-width:0 below already works around on its
	   own axis), which would silently cap how far closed this can ever get. */
	overflow: hidden;
	min-height: 0;
}

/* Wraps the answer text and the "Was this helpful?" row together in one
   column, so the helpful row's left edge always lines up with the answer
   text's own left edge — whatever width the marker badge next to them
   happens to be (letter, image, or none at all) — instead of a fixed
   px offset that only happened to match one marker size. The gap here (not a
   margin/border on .afb-helpful itself) only ever appears BETWEEN the two,
   so it's a no-op whenever helpful votes are off and .afb-a-inner is alone. */
.afb-a-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 20px;
	/* A flex item's default min-width is its content's min-content size, so a
	   wide image/table inside the answer would stretch this column (and the
	   whole card) past its container instead of letting it shrink. */
	min-width: 0;
}

.afb-a-inner {
	line-height: 1.7;
	font-size: var(--afb-font-size-a, var(--afb-font-size, 1rem));
	overflow-wrap: anywhere;
}

/* Media typed/inserted into an answer must never be wider than the answer
   column — WordPress writes width/height attributes on inserted images, which
   would otherwise pin them at their original pixel size. */
.afb-a-inner img,
.afb-a-inner video,
.afb-a-inner iframe,
.afb-a-inner embed,
.afb-a-inner object,
.afb-a-inner svg {
	max-width: 100%;
	height: auto;
}

.afb-a-inner iframe {
	aspect-ratio: 16 / 9;
}

/* Answers pasted in from another site often arrive wrapped in <pre>, which is
   white-space:pre by default — one long line that never wraps and stretches the
   whole card. Keep the preformatted look/line breaks but let it wrap. */
.afb-a-inner pre {
	white-space: pre-wrap;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.afb-a-inner table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.afb-a-inner p {
	margin: 0 0 1em;
}

/* When markers are off, keep original answer padding via the body wrapper. */
.afb-a-body > .afb-a-content:only-child .afb-a-inner {
	padding: 0;
}

/* Q & A markers — a tinted outline badge (accent-coloured text + border, on a
   faint accent-tinted fill) rather than a solid filled dot. A solid dot at
   this size reads as a flat, heavy "sticker"; the lighter tint+outline still
   stands out clearly against the card without looking as blunt. */
.afb-marker {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--afb-marker-bg, color-mix(in srgb, var(--afb-accent) 10%, #fff));
	border: 1.5px solid color-mix(in srgb, var(--afb-marker-color, var(--afb-accent)) 45%, transparent);
	color: var(--afb-marker-color, var(--afb-accent));
	font-weight: var(--afb-marker-weight, 700);
	font-size: var(--afb-marker-font-size, calc(var(--afb-font-size, 1rem) * 0.8));
	line-height: 1;
}

/* "Badge background" turned off in Settings — plain colored letter, no pill
   shape/background/border behind it, just the text itself at its own size. */
.afb-marker-plain {
	min-width: 0;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	border: 0;
}

/* Image markers keep a fixed badge size — only text (letter) markers follow the font-size setting. */
.afb-marker-img {
	font-size: 0;
}

/* Flexbox aligns the marker and the adjacent text by BOX edges (centered for
   the question row via .afb-q's align-items, top-aligned for the answer row
   via .afb-a-body's), which is correct per the CSS box model — but the badge
   holds a Latin "Q"/"A" glyph while the text next to it is Japanese, and the
   two scripts sit at different vertical positions within an identical-height
   line box (font/script vertical metrics, not something flexbox accounts
   for). Both markers get nudged up slightly so the badge lines up with the
   optical center of the Japanese text next to it instead of just its box. */
.afb-marker-q {
	margin-top: -2px;
}

.afb-marker-a {
	margin-top: 0;
}

.afb-marker-img {
	background: transparent;
	border: 0;
	padding: 0;
	min-width: 0;
}

.afb-marker-img img {
	display: block;
	width: var(--afb-marker-img-size, 24px);
	height: var(--afb-marker-img-size, 24px);
	object-fit: contain;
	border-radius: 4px;
}

.afb-a-inner > :first-child {
	margin-top: 0;
}

.afb-a-inner > :last-child {
	margin-bottom: 0;
}

.afb-a-inner a {
	color: var(--afb-link-color, var(--afb-accent));
}

/* Helpful vote row — sized off --afb-font-size (the same var driving the
   question/answer text, default 18px) rather than rem: rem is relative to the
   theme's own <html> font-size, which some themes shrink site-wide (e.g. a
   62.5% trick for easy `1rem = 10px` math elsewhere on the page) — that
   silently shrank this row down to an unreadably tiny size on a real site.
   Whole row (label, buttons, the "thanks" message below) shares this one
   size/colour pair via inheritance so it reads as one quiet, secondary row —
   shrinking only the label here once left the buttons/message at their own
   larger defaults, which just looked as loud as before. */
.afb-helpful {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	/* Sits inside .afb-a-content (not .afb-a-body directly), so this line only
	   ever spans that column's own width — i.e. it starts exactly where the
	   answer text starts, not the full card width under the marker too. */
	border-top: var(--afb-border-width) solid var(--afb-border);
	font-size: var(--afb-helpful-label-size, calc(var(--afb-font-size, 1rem) * 0.7));
	color: var(--afb-helpful-label-color, #94a3b8);
}

.afb-helpful-label {
	margin-right: 4px;
}

/* Yes/No stay together as one unit that never wraps internally: the row's own
   flex-wrap then moves the whole pair below the label when it doesn't fit
   beside it, instead of "Yes" staying next to the label and only "No"
   dropping to a second line. */
.afb-vote-group {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 8px;
}

.afb-vote {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	/* currentColor, not --afb-border — keeps the pill's outline the exact same
	   muted tone as the row's own text (inherited via `color: inherit` above)
	   instead of the card's separate, more visible border colour. */
	border: 1px solid currentColor;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	transition: border-color var(--afb-speed) ease, background var(--afb-speed) ease, color var(--afb-speed) ease;
}

/* No colour of its own — inherits the button's `color` via currentColor, so
   the hover/selected accent tint below recolours the icon and label as one.
   Sized in `em` (not the markup's own hardcoded 14x14 attributes) so it scales
   down with the pill's own now-smaller text instead of staying visually
   oversized next to it, and scales back up too if a larger row font-size is
   ever set in Settings. */
.afb-vote-icon {
	width: 0.75em;
	height: 0.75em;
	flex: 0 0 auto;
}

.afb-vote:hover,
.afb-vote.is-selected {
	color: var(--afb-accent);
	border-color: var(--afb-accent);
	box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
}

.afb-vote:focus-visible {
	outline: 2px solid var(--afb-accent);
	outline-offset: 1px;
}

.afb-vote[disabled] {
	opacity: 0.55;
	cursor: default;
}

.afb-vote.is-selected {
	background: color-mix(in srgb, var(--afb-accent) 12%, #fff);
}

.afb-vote-msg {
	color: inherit;
	font-weight: 500;
}

/* Items beyond the "show at first" count (see .afb-loadmore-btn below) — kept
   fully in the DOM (not stripped out) so the FAQPage JSON-LD schema, which is
   built from every item regardless of visibility, and direct #faq-id links to
   a not-yet-revealed item both keep working exactly as if load-more were off. */
.afb-item[hidden] {
	display: none;
}

.afb-loadmore-wrap {
	display: flex;
	justify-content: center;
	margin-top: var(--afb-item-gap);
}

/* The JS sets the native `hidden` attribute once every remaining item has been
   revealed (see onLoadMore() in frontend.js) — without this rule the wrap's
   own `display: flex` above wins the cascade over the browser's default
   `[hidden] { display: none }` (same specificity, but author styles beat the
   user-agent stylesheet), so the button silently stayed visible after doing
   nothing on a further click. */
.afb-loadmore-wrap[hidden] {
	display: none;
}

.afb-loadmore-btn {
	appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 10px 22px;
	border-radius: var(--afb-loadmore-radius, var(--afb-radius));
	border: 1.5px solid var(--afb-loadmore-border, var(--afb-border));
	background: var(--afb-loadmore-bg, color-mix(in srgb, var(--afb-accent) 8%, #fff));
	color: var(--afb-loadmore-color, var(--afb-accent));
	transition: background .15s ease;
}

.afb-loadmore-btn:hover {
	background: var(--afb-loadmore-bg, color-mix(in srgb, var(--afb-accent) 16%, #fff));
}

.afb-loadmore-btn:focus-visible {
	outline: 2px solid var(--afb-accent);
	outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.afb-item,
	.afb-q,
	.afb-a,
	.afb-icon,
	.afb-icon::after,
	.afb-vote {
		transition: none;
	}
}

/* Jump navigation — optional bar of group-name buttons above a multi-section
   render (see ARTCFABU_Shortcode::render_nav_menu()), one per group that has
   a visible heading; clicking smooth-scrolls to it (assets/frontend.js's
   onNavMenuClick()). Deliberately self-contained (its own fallback colors,
   not --afb-wrap's --afb-accent/--afb-border) since this bar sits BEFORE the
   first .afb-wrap it scrolls to, not inside/after it, so it can't rely on
   inheriting any custom property declared there. --afb-nav-columns is set via
   a uniquely-id-scoped <style> tag rather than inline (see render_nav_menu()'s
   own comment) specifically so a @media rule in that same tag can still
   collapse it back down to auto-fit under the mobile breakpoint. */
.afb-nav-menu {
	display: grid;
	grid-template-columns: repeat(var(--afb-nav-columns, auto-fit), minmax(var(--afb-nav-min-width, 140px), 1fr));
	gap: var(--afb-nav-gap, 10px);
	margin: 0 0 var(--afb-nav-margin-bottom, 24px);
	padding: 0;
}

/* display:grid (not block, and deliberately not flex either) + align-content
   is what actually centers the text vertically regardless of how tall this
   row got stretched to match its tallest sibling (a longer group name can
   wrap to 2-3 lines, and same-row buttons all stretch to match it by CSS
   Grid's own default align-items:stretch — expected, not itself a bug) —
   without this the text sat pinned to the top of that extra height, which is
   what actually read as "ajeeb" (the reported complaint). grid was chosen
   over flex here specifically because a flex item's default sizing can
   shrink text to its own max-content width before it ever reaches the
   button's full (grid-stretched) width, breaking text-align in the process;
   grid's default justify-items:stretch keeps the full width intact so
   text-align below keeps working exactly as expected for multi-line text. */
.afb-nav-menu-item {
	display: grid;
	align-content: center;
	box-sizing: border-box;
	min-height: var(--afb-nav-min-height, 0);
	padding: 10px 16px;
	background: var(--afb-nav-bg, transparent);
	color: var(--afb-nav-text, #334155);
	border: 1.5px solid var(--afb-nav-border, #e2e8f0);
	border-radius: var(--afb-nav-radius, 8px);
	text-align: var(--afb-nav-text-align, center);
	text-decoration: none;
	font-size: 0.95em;
	line-height: 1.3;
	transition: background .15s ease, border-color .15s ease;
}

.afb-nav-menu-item:hover,
.afb-nav-menu-item:focus-visible {
	border-color: var(--afb-nav-text, #334155);
	background: color-mix(in srgb, var(--afb-nav-text, #334155) 8%, var(--afb-nav-bg, transparent));
}

.afb-nav-menu-item:focus-visible {
	outline: 2px solid var(--afb-nav-text, #334155);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.afb-nav-menu-item {
		transition: none;
	}
}