/* Chat-style FAQ. Portable: no WordPress dependency. Theme it by overriding the --cfaq-* custom properties on .cfaq.
   Baseline (no JS) is a plain details/summary list; JS adds .is-chat. Min text 14px. */
.cfaq {
	--cfaq-ink: #0a0a0a;          /* text on bot bubbles and chips */
	--cfaq-muted: #3d4a52;        /* secondary text, 4.5:1+ on --cfaq-bot */
	--cfaq-panel: #faf7f2;        /* panel background */
	--cfaq-bot: #f3eee6;          /* answer bubble */
	--cfaq-you: #2c3e50;          /* visitor bubble */
	--cfaq-you-ink: #ffffff;      /* text on visitor bubble */
	--cfaq-chip: #ffffff;         /* chip background */
	--cfaq-line: #6b7b82;         /* chip and panel border */
	--cfaq-hair: #d9dede;         /* list rules */
	--cfaq-accent: #a45109;       /* links, focus, hover (4.5:1+ on panel and bot) */
	--cfaq-radius: 16px;
	--cfaq-font: inherit;
	--cfaq-log-h: 360px;
	font-family: var(--cfaq-font);
	color: var(--cfaq-ink);
	box-sizing: border-box;
	min-inline-size: 0;
}
.cfaq *, .cfaq *::before, .cfaq *::after { box-sizing: border-box; }
.cfaq__list { list-style: none; margin: 0; padding: 0; }
.cfaq__item { border-block-end: 1px solid var(--cfaq-hair); }
.cfaq__item:first-child { border-block-start: 1px solid var(--cfaq-hair); }
.cfaq summary { cursor: pointer; min-block-size: 56px; padding-block: 14px; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; display: flex; align-items: center; }
.cfaq__a { padding-block-end: 12px; font-size: 1rem; line-height: 1.6; }
.cfaq__a p { margin: 0 0 8px; }
.cfaq__cta, .cfaq__msg a { color: var(--cfaq-accent); font-weight: 600; text-underline-offset: 3px; }
.cfaq .draft-tag { display: inline-block; font-size: .875rem; font-weight: 700; margin-inline-end: 8px; }

/* ---- chat mode (JS adds .is-chat) ---- */
.cfaq__panel { display: none; }
.cfaq.is-chat .cfaq__list { display: none; }
.cfaq.is-chat .cfaq__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; background: var(--cfaq-panel); border: 1px solid var(--cfaq-line); border-radius: var(--cfaq-radius); padding: 12px; }
.cfaq__main { min-inline-size: 0; display: flex; flex-direction: column; }
.cfaq__side { min-inline-size: 0; }
.cfaq__log { flex: 1 1 auto; min-block-size: 0; block-size: var(--cfaq-log-h); overflow-y: auto; overscroll-behavior: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 4px; }
.cfaq__log:focus-visible, .cfaq__chip:focus-visible, .cfaq__reset:focus-visible, .cfaq__msg a:focus-visible { outline: 3px solid var(--cfaq-accent); outline-offset: 2px; }
.cfaq__hint { margin: auto; text-align: center; color: var(--cfaq-muted); font-size: 1rem; max-inline-size: 28ch; }
.cfaq__msg { max-inline-size: 88%; padding: 12px 16px; border-radius: var(--cfaq-radius); font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.cfaq__msg p { margin: 0 0 8px; }
.cfaq__msg p:last-child { margin-block-end: 0; }
.cfaq__msg--you { align-self: flex-end; background: var(--cfaq-you); color: var(--cfaq-you-ink); border-end-end-radius: 4px; }
.cfaq__msg--bot { align-self: flex-start; background: var(--cfaq-bot); color: var(--cfaq-ink); border-end-start-radius: 4px; }
.cfaq__who { display: block; font-size: .875rem; font-weight: 700; color: var(--cfaq-muted); margin-block-end: 4px; }
.cfaq__sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cfaq__dots { display: inline-flex; gap: 5px; padding-block: 6px; }
.cfaq__dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cfaq-muted); opacity: .6; }
.cfaq__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; margin: 0; border: 0; }
.cfaq__chip { font: inherit; font-size: .9375rem; line-height: 1.3; text-align: start; min-block-size: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--cfaq-line); background: var(--cfaq-chip); color: var(--cfaq-ink); cursor: pointer; }
.cfaq__chip:hover { border-color: var(--cfaq-accent); color: var(--cfaq-accent); }
.cfaq__bar { display: flex; justify-content: flex-end; }
.cfaq__cap { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--cfaq-muted); }
.cfaq__reset { font: inherit; font-size: .875rem; min-block-size: 44px; padding: 4px 12px; background: none; border: 0; color: var(--cfaq-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cfaq__reset[hidden] { display: inline-block; visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
	.cfaq__msg.is-new { animation: cfaq-in 380ms cubic-bezier(.16, 1, .3, 1) both; }
	.cfaq__dots i { animation: cfaq-dot 1s ease-in-out infinite; }
	.cfaq__dots i:nth-child(2) { animation-delay: .15s; }
	.cfaq__dots i:nth-child(3) { animation-delay: .3s; }
}
@keyframes cfaq-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cfaq-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
/* ---- wide layout (>= 900px): questions as a column on the left (~34%), a tall conversation pane on the right (~66%) ---- */
@media (min-width: 900px) {
	.cfaq.is-chat .cfaq__panel { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: 24px; padding: 20px; align-items: stretch; block-size: clamp(540px, 76vh, 700px); }
	.cfaq__side { padding-inline-end: 24px; border-inline-end: 1px solid var(--cfaq-hair); overflow-y: auto; min-block-size: 0; }
	.cfaq__main { min-block-size: 0; }
	.cfaq__log { block-size: auto; }
	.cfaq__chips { flex-direction: column; flex-wrap: nowrap; gap: 8px; padding: 8px 0 0; }
	.cfaq__chip { border-radius: 12px; inline-size: 100%; padding: 12px 16px; font-size: 1rem; }
	.cfaq__log { padding: 8px 8px 8px 4px; }
	.cfaq__msg { max-inline-size: 82%; padding: 14px 20px; }
	.cfaq__hint { max-inline-size: 36ch; }
}
@media (min-width: 1200px) { .cfaq__msg { max-inline-size: 78%; } }
/* narrow (< 900px): one column in chat-app order: question chips, log, composer */
@media (max-width: 480px) { .cfaq .faq-ask input[name="q"] { font-size: .9375rem; } .cfaq__msg { max-inline-size: 94%; } .cfaq__log { --cfaq-log-h: 320px; } }

/* ---- ask form = the composer, pinned at the bottom of the conversation pane (shown by JS only when the chat upgrades) ---- */
.cfaq .faq-ask { flex: 0 0 auto; margin: 0; padding-block-start: 12px; border-block-start: 1px solid var(--cfaq-hair); }
.cfaq .faq-ask[hidden] { display: none; }
.cfaq .faq-ask__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cfaq .faq-ask__row { display: flex; gap: 8px; align-items: center; padding: 4px 4px 4px 16px; background: var(--cfaq-chip); border: 1px solid var(--cfaq-line); border-radius: 28px; }
.cfaq .faq-ask__row:focus-within { outline: 3px solid var(--cfaq-accent); outline-offset: 2px; }
.cfaq .faq-ask input[name="q"] { flex: 1 1 auto; min-inline-size: 0; min-block-size: 44px; padding: 0; margin: 0; font: inherit; font-size: 1rem; color: var(--cfaq-ink); background: none; border: 0; outline: 0; box-shadow: none; }
.cfaq .faq-ask input[name="q"]::placeholder { color: var(--cfaq-muted); opacity: 1; }
.cfaq .faq-ask__send { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; min-block-size: 48px; padding: 0; color: var(--cfaq-you-ink); background: var(--cfaq-you); border: 0; border-radius: 50%; cursor: pointer; }
.cfaq .faq-ask__send svg { inline-size: 22px; block-size: 22px; }
.cfaq .faq-ask__send:disabled { opacity: .6; cursor: progress; }
.cfaq .faq-ask__send:focus-visible { outline: 3px solid var(--cfaq-accent); outline-offset: 2px; }
.cfaq .faq-ask__count { display: block; text-align: end; font-size: .875rem; line-height: 1.4; color: var(--cfaq-muted); padding: 4px 8px 0; }
.cfaq .faq-ask__count:empty { display: none; }
.cfaq .faq-ask__note { margin: 8px 4px 0; font-size: .875rem; line-height: 1.45; color: var(--cfaq-muted); }
.cfaq .faq-ask__hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; }
.cfaq__msg .cfaq__chip { display: block; margin-block-start: 8px; }
.cfaq__msg .cfaq__chip:focus-visible { outline: 3px solid var(--cfaq-accent); outline-offset: 2px; }

/* ---- progressive contact flow (faq-contact.js): inline ask inside a bot bubble ---- */
.cfaq__ask { margin-block-start: 8px; }
.cfaq__ask-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cfaq__ask-in { flex: 1 1 160px; min-inline-size: 0; min-block-size: 44px; padding: 8px 14px; font: inherit; font-size: 1rem; color: var(--cfaq-ink); background: var(--cfaq-chip); border: 1px solid var(--cfaq-line); border-radius: 12px; }
.cfaq__ask-in:focus-visible, .cfaq__consent input:focus-visible, .cfaq__ask .cfaq__chip:focus-visible { outline: 3px solid var(--cfaq-accent); outline-offset: 2px; }
.cfaq__msg .cfaq__ask .cfaq__chip { display: inline-block; inline-size: auto; margin: 0; }
.cfaq__ask-go { background: var(--cfaq-you); color: var(--cfaq-you-ink); border-color: var(--cfaq-you); }
.cfaq__ask-go:disabled { opacity: .55; cursor: not-allowed; }
.cfaq__consent { display: flex; gap: 8px; align-items: flex-start; margin-block-start: 10px; font-size: .9375rem; line-height: 1.45; min-block-size: 44px; }
.cfaq__consent input { inline-size: 24px; block-size: 24px; flex: 0 0 auto; margin: 0; accent-color: var(--cfaq-you); }
.cfaq__ask-err { margin: 6px 0 0; font-size: .9375rem; color: #8a1c1c; }
.cfaq__ask-err:empty { display: none; }

/* v2 (28 Oct 2026): section headings on the left side (top questions per section, then "Related to your question" and "Most asked") */
.cfaq__sec { margin: 16px 0 2px; font: 700 .75rem/1.3 var(--cfaq-font); letter-spacing: .08em; text-transform: uppercase; color: var(--cfaq-muted); flex-basis: 100%; }
.cfaq__sec:first-child { margin-top: 4px; }

/* v2.1 (28 Oct 2026): the Send button shows the A of the LeapCode logo, which is taller than wide */
.cfaq .faq-ask__send svg { inline-size: 20px; block-size: 24px; }

/* v2.2 (28 Oct 2026): a little life in the Send button. The A bobs when there is something to send, tilts on hover, and lifts off when sent. No motion if the visitor asked for less. */
.cfaq .faq-ask__send { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.cfaq .faq-ask__send svg { transition: transform .35s cubic-bezier(.3, .8, .3, 1); }
.cfaq .faq-ask__send:hover:not(:disabled), .cfaq .faq-ask__send:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(168, 46, 46, .8); }
.cfaq .faq-ask__send:hover:not(:disabled) svg, .cfaq .faq-ask__send:focus-visible svg { transform: translateY(-2px) rotate(-8deg) scale(1.1); }
.cfaq .faq-ask__send:active:not(:disabled) { transform: translateY(0) scale(.96); }
.cfaq .faq-ask__send.is-ready svg { animation: cfaq-bob 1.6s ease-in-out infinite; }
.cfaq .faq-ask__send.is-launch svg { animation: cfaq-launch .75s cubic-bezier(.5, 0, .3, 1); }
@keyframes cfaq-bob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px) rotate(-4deg); } }
@keyframes cfaq-launch { 0% { transform: translateY(0) scale(1); opacity: 1; } 40% { transform: translateY(-36px) scale(.7); opacity: 0; } 41% { transform: translateY(36px) scale(.7); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cfaq .faq-ask__send, .cfaq .faq-ask__send svg { transition: none; } .cfaq .faq-ask__send.is-ready svg, .cfaq .faq-ask__send.is-launch svg { animation: none; } .cfaq .faq-ask__send:hover:not(:disabled) svg, .cfaq .faq-ask__send:focus-visible svg { transform: none; } }

/* W2f L-07: group headings in the chat are bold small caps with a rule above, so they read as headings and the questions stay plain */
.cfaq__sec { font-weight: 800; font-variant-caps: all-small-caps; letter-spacing: .1em; font-size: .85rem; color: var(--cfaq-fg, #1A1A1A); padding-top: 10px; border-top: 1px solid var(--cfaq-line, #CBD5DA); margin-top: 14px; }
.cfaq__sec:first-child { border-top: 0; padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .cfaq * { scroll-behavior: auto !important; } }

/* X-12 (Set X): the send button (the rocket-A "Ask your own question" push button) is a New Leap Red circle with a white glyph, same everywhere */
.cfaq .faq-ask__send { background: #D44040; color: #fff; }
.cfaq .faq-ask__send:hover:not(:disabled), .cfaq .faq-ask__send:focus-visible { background: #E35252; }
.cfaq .faq-ask__send:focus-visible { outline-color: #A12A2A; }