/**
 * 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: #ffffff;
	--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. A prior version of this plugin
   used a real <h2>, 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"/".afb-q-heading" 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;
}

.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);
}

.afb-item.is-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.is-open {
	box-shadow: none;
}

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

/* Same ARIA-heading (not a real <h3>) + theme-bleed hardening as
   .afb-group-title above. This element carries no visible text of its own
   (it only wraps the .afb-q toggle button), so a theme's global h3 rule
   wouldn't show up as wrong text styling here anyway, it'd show up as the
   whole header box shrinking/misplacing itself around the button. */
.afb-wrap .afb-q-heading {
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: left;
	list-style: none;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.afb-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 18px 20px;
	border: 0;
	/* 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);
	/* <button> doesn't inherit the page's font-family by default (browsers give
	   form controls their own UI font instead) — without this, the question
	   visibly renders 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:focus-visible {
	outline: 2px solid var(--afb-accent);
	outline-offset: -2px;
}

/* open_all's non-collapsible question row (a <span>, not a <button> — see
   templates/accordion.php) — same layout/type styling as the button via the
   shared .afb-q class, just without the pointer cursor implying it's clickable. */
.afb-q-static {
	cursor: default;
}

.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.is-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.is-open .afb-icon::after {
	margin-top: -2px;
	transform: translateX(-50%) rotate(-135deg);
}

.afb-a {
	color: var(--afb-color-a);
	background: var(--afb-bg-a);
	border-top: var(--afb-border-width) solid var(--afb-border);
}

.afb-a[hidden] {
	display: none;
}

@keyframes afb-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Gated on .afb-a-anim (added by frontend.js only when JS itself opens the
   panel), not just :not([hidden]) alone — otherwise every answer that starts
   open via open_first/open_all also replayed this animation on page load. */
.afb-a.afb-a-anim:not([hidden]) {
	animation: afb-reveal var(--afb-speed) ease;
}

.afb-a-body {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px 20px;
}

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

.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-inner:only-child {
	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: 24px;
	height: 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-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.
   0.8x of the 18px default lands at 14.4px either way, but now it can't be
   dragged down further by an unrelated theme convention. */
.afb-helpful {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px 20px 18px;
	border-top: var(--afb-border-width) solid var(--afb-border);
	font-size: calc(var(--afb-font-size, 1rem) * 0.8);
}

.afb-helpful-label {
	color: var(--afb-color-a);
	margin-right: 4px;
}

.afb-vote {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border: 1px solid var(--afb-border);
	border-radius: 999px;
	background: #fff;
	color: var(--afb-color-a);
	font-family: inherit;
	font-size: calc(var(--afb-font-size, 1rem) * 0.78);
	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. */
.afb-vote-icon {
	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: var(--afb-accent);
	font-weight: 600;
}

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

	.afb-a-anim:not([hidden]) {
		animation: none;
	}
}