/* Moeen Q&A, public page. Colours come from the theme's tokens, so light, dark and follow-system just work. */
.moeen-qa {
	--qa-accent: var(--wp--preset--color--accent-1, #3a7f1d);
	--qa-on: var(--moeen-on-accent, #fff);
	--qa-line: var(--wp--preset--color--accent-5, #d6e5c3);
	--qa-surface: var(--wp--preset--color--surface, #fff);
	--qa-soft: var(--wp--preset--color--accent-5, #e5f0d3);
	--qa-muted: var(--wp--preset--color--accent-4, #51694f);
	--qa-warm: var(--wp--preset--color--coral-ink, #a8402f);
	--qa-warm-bg: var(--wp--preset--color--coral-bg, #fae0da);
	display: grid; gap: 3rem; max-width: 52rem; margin-inline: auto;
}
.moeen-qa h2 { font-size: 1.35rem; margin: 0 0 .25rem; }
.qa-note { color: var(--qa-muted); margin: 0 0 1.25rem; font-size: .9375rem; }
.qa-empty { padding: 1.5rem; border: 1px dashed var(--qa-line); border-radius: 6px 22px 6px 22px; color: var(--qa-muted); }
.qa-items { display: grid; gap: .75rem; }
.qa-item { background: var(--qa-surface); border: 1px solid var(--qa-line); border-radius: 6px 22px 6px 22px; transition: border-color .2s; }
.qa-item[open], .qa-item:hover { border-color: var(--qa-accent); }
.qa-item > summary { list-style: none; cursor: pointer; padding: 1rem 3.2rem 1rem 1.25rem; display: grid; gap: .15rem; position: relative; }
[dir="rtl"] .qa-item > summary { padding: 1rem 1.25rem 1rem 3.2rem; }
.qa-item > summary::-webkit-details-marker { display: none; }
.qa-item > summary::after { content: ""; position: absolute; inset-block-start: 1.35rem; inset-inline-end: 1.25rem; width: .6rem; height: .6rem; border-inline-end: 2px solid var(--qa-accent); border-block-end: 2px solid var(--qa-accent); transform: rotate(45deg); transition: transform .2s; }
.qa-item[open] > summary::after { transform: rotate(-135deg); inset-block-start: 1.6rem; }
.qa-q { font-weight: 600; line-height: 1.7; white-space: pre-line; }
.qa-meta { font-size: .8125rem; color: var(--qa-muted); }
.qa-a { padding: 0 1.25rem 1.1rem; border-top: 1px solid var(--qa-line); margin-inline: 1.25rem; padding-inline: 0; padding-block: .9rem .2rem; }
.qa-a p { margin: 0 0 .7rem; }
.qa-pages { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1.25rem; }
.qa-pages a, .qa-pages span { min-width: 2.4rem; min-height: 2.4rem; display: grid; place-items: center; border-radius: 4px 12px 4px 12px; border: 1px solid var(--qa-line); text-decoration: none; }
.qa-pages [aria-current] { background: var(--qa-accent); color: var(--qa-on); border-color: var(--qa-accent); }
.qa-ask { background: var(--qa-soft); border-radius: 6px 28px 6px 28px; padding: 1.5rem; }
.qa-form { display: grid; gap: .5rem; }
.qa-form input, .qa-form textarea { box-sizing: border-box; max-width: 100%; }
.qa-form label { font-weight: 600; }
.qa-form input[type="text"], .qa-form textarea { font: inherit; width: 100%; padding: .65rem .8rem; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 8px; background: var(--qa-surface); color: inherit; }
.qa-form textarea { resize: vertical; min-height: 8rem; }
.qa-form :is(input, textarea):focus-visible, .qa-send:focus-visible { outline: 3px solid var(--qa-accent); outline-offset: 2px; }
.qa-hint, .qa-count { font-size: .8125rem; color: var(--qa-muted); margin: 0; }
.qa-count { text-align: end; }
.qa-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qa-human { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .5rem; padding: .75rem 1rem; background: var(--qa-surface); border: 1px solid var(--qa-line); border-radius: 12px; }
.qa-check { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 600; }
.qa-check input { width: 1.35rem; height: 1.35rem; accent-color: var(--qa-accent); }
.qa-status { font-size: .875rem; color: var(--qa-muted); }
.qa-send { justify-self: start; font: inherit; font-weight: 700; padding: .65rem 1.6rem; margin-top: .5rem; border: 0; cursor: pointer; border-radius: 4px 14px 4px 14px; background: var(--qa-accent); color: var(--qa-on); }
.qa-send[disabled] { opacity: .45; cursor: not-allowed; }
.qa-msg { margin: .5rem 0 0; min-height: 1.4em; font-weight: 600; }
.qa-ok { color: var(--qa-accent); } .qa-error { color: var(--qa-warm); }
.qa-emergency { margin: 1.25rem 0 0; padding: .8rem 1rem; border-inline-start: 4px solid var(--wp--preset--color--coral, #e8846f); background: var(--qa-surface); border-radius: 4px 12px 12px 4px; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .qa-item, .qa-item > summary::after { transition: none; } }