/* AltaBrio FAQ page: search, category filters, animated answers, help card */
.abf { max-width: 1200px; margin-inline: auto; }

/* --- search + filters --- */
.abf-tools { display: grid; gap: 1.1rem; margin-bottom: 2rem; }
.abf-search { position: relative; max-width: 720px; margin-inline: auto; width: 100%; }
.abf-search svg { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ev-muted); pointer-events: none; }
.abf-search input {
	width: 100%; padding: 1.05rem 3.2rem 1.05rem 3.1rem; font: inherit; font-size: 1.05rem; color: var(--ev-fg);
	background: rgba(17, 21, 31, .75); border: 1px solid var(--ev-line); border-radius: 999px; outline: none;
	backdrop-filter: blur(10px); transition: border-color .2s, box-shadow .2s;
}
.abf-search input::placeholder { color: var(--ev-faint); }
.abf-search input:focus { border-color: var(--ev-primary); box-shadow: 0 0 0 4px rgba(63, 189, 240, .18); }
.abf-search kbd { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font: 600 .72rem/1 var(--wp--preset--font-family--sans); color: var(--ev-faint); border: 1px solid var(--ev-line); border-radius: 6px; padding: .3rem .45rem; }
.abf-search input:focus ~ kbd, .abf-search input:not(:placeholder-shown) ~ kbd { display: none; }
.abf-chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.abf-chip {
	display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.05rem; border-radius: 999px; cursor: pointer;
	font: 600 .9rem/1 var(--wp--preset--font-family--sans); color: var(--ev-muted);
	background: rgba(17, 21, 31, .6); border: 1px solid var(--ev-line); transition: all .2s;
}
.abf-chip:hover { color: var(--ev-fg); border-color: var(--ev-line-strong); }
.abf-chip.is-on { color: #04121c; background: linear-gradient(135deg, var(--ev-primary-soft), var(--ev-primary)); border-color: transparent; box-shadow: 0 8px 24px -8px rgba(63, 189, 240, .7); }
.abf-chip i { font-style: normal; font-size: .72rem; opacity: .75; }

/* --- popular topic cards --- */
.abf-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 3rem; }
.abf-topic {
	position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.3rem; border-radius: 18px; text-decoration: none !important; color: var(--ev-fg) !important;
	background: linear-gradient(160deg, rgba(22, 27, 39, .9), rgba(17, 21, 31, .7)); border: 1px solid var(--ev-line); overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.abf-topic::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 10rem; height: 10rem; background: radial-gradient(closest-side, var(--c, var(--ev-primary)), transparent); opacity: .18; transition: opacity .3s; }
.abf-topic:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c, var(--ev-primary)) 55%, var(--ev-line)); box-shadow: 0 24px 50px -28px var(--c, var(--ev-primary)); }
.abf-topic:hover::before { opacity: .38; }
.abf-topic .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--c, var(--ev-primary)); background: color-mix(in srgb, var(--c, var(--ev-primary)) 15%, transparent); margin-bottom: .5rem; }
.abf-topic .ic svg { width: 22px; height: 22px; }
.abf-topic b { font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; }
.abf-topic span.t { color: var(--ev-muted); font-size: .92rem; }
.abf-topic .go { margin-top: .6rem; font-size: .85rem; font-weight: 600; color: var(--c, var(--ev-primary)); }

/* --- layout --- */
.abf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; align-items: start; }
@media (max-width: 980px) { .abf-layout { grid-template-columns: 1fr; } }

/* --- groups + items --- */
.abf-group { margin-bottom: 2.2rem; scroll-margin-top: calc(var(--ev-header-h) + 1.5rem); }
.abf-group[hidden], .abf-item[hidden] { display: none !important; }
.abf-group > h2 { display: flex; align-items: center; gap: .75rem; font-size: 1.15rem !important; letter-spacing: -.01em; margin: 0 0 1rem !important; }
.abf-group > h2 .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.abf-group > h2 .ic svg { width: 18px; height: 18px; }
.abf-list { display: grid; gap: .7rem; }
.abf-item { border: 1px solid var(--ev-line); border-radius: 16px; background: rgba(17, 21, 31, .62); transition: border-color .25s, background .25s, box-shadow .25s; }
.abf-item:hover { border-color: var(--ev-line-strong); }
.abf-item.is-open { border-color: color-mix(in srgb, var(--ev-primary) 55%, var(--ev-line)); background: linear-gradient(160deg, rgba(22, 27, 39, .95), rgba(17, 21, 31, .8)); box-shadow: 0 24px 60px -34px rgba(63, 189, 240, .55); }
.abf-q {
	all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
	padding: 1.15rem 1.3rem; font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; font-weight: 600; color: var(--ev-fg); line-height: 1.35;
}
.abf-q:focus-visible { outline: 2px solid var(--ev-primary); outline-offset: 2px; border-radius: 16px; }
.abf-plus { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--ev-line-strong); color: var(--ev-primary-soft); transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .25s, color .25s; }
.abf-plus svg { width: 14px; height: 14px; }
.abf-item.is-open .abf-plus { transform: rotate(135deg); background: var(--ev-primary); color: #04121c; border-color: transparent; }
.abf-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2, .7, .2, 1); }
.abf-item.is-open .abf-a { grid-template-rows: 1fr; }
.abf-a > div { overflow: hidden; }
.abf-a-in { padding: 0 1.3rem 1.3rem; color: var(--ev-muted); font-size: 1rem; line-height: 1.7; }
.abf-a-in p { margin: 0 0 .8rem; }
.abf-a-in ul { margin: 0 0 .8rem; padding-left: 1.2rem; display: grid; gap: .35rem; }
.abf-a-in b, .abf-a-in strong { color: var(--ev-fg); }
.abf-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.abf-links a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600; text-decoration: none !important; color: var(--ev-fg) !important; background: rgba(63, 189, 240, .12); border: 1px solid rgba(63, 189, 240, .35); transition: background .2s, transform .2s; }
.abf-links a:hover { background: rgba(63, 189, 240, .24); transform: translateX(2px); }
.abf-links a::after { content: "→"; }

/* --- sticky help card --- */
.abf-aside { position: sticky; top: calc(var(--ev-header-h) + 1.5rem); display: grid; gap: 1rem; }
@media (max-width: 980px) { .abf-aside { position: static; } }
.abf-help { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--ev-line); background: #0b0e16; isolation: isolate; }
.abf-help-bg { position: absolute; inset: 0; z-index: -1; }
.abf-help-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.abf-help-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 14, 22, .35), rgba(11, 14, 22, .92) 70%); }
.abf-help-in { padding: 8rem 1.5rem 1.6rem; }
.abf-help h3 { font-size: 1.4rem !important; margin: 0 0 .4rem !important; }
.abf-help p { color: #cdd3e1; margin: 0 0 1.1rem; font-size: .96rem; }
.abf-help .wp-block-button__link, .abf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .8rem 1.2rem; border-radius: 999px; font-weight: 700; text-decoration: none !important; background: linear-gradient(135deg, var(--ev-primary-soft), var(--ev-primary)); color: #04121c !important; transition: transform .2s, box-shadow .2s; }
.abf-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(63, 189, 240, .8); }
.abf-btn--ghost { background: rgba(255, 255, 255, .06); color: var(--ev-fg) !important; border: 1px solid var(--ev-line-strong); margin-top: .6rem; }
.abf-btn--ghost:hover { box-shadow: none; background: rgba(255, 255, 255, .1); }
.abf-mini { border: 1px solid var(--ev-line); border-radius: 18px; padding: 1.1rem 1.25rem; background: rgba(17, 21, 31, .62); }
.abf-mini b { display: block; font-family: var(--wp--preset--font-family--display); margin-bottom: .2rem; }
.abf-mini span { color: var(--ev-muted); font-size: .92rem; }

/* --- empty state --- */
.abf-empty { display: none; text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--ev-line-strong); border-radius: 20px; background: rgba(17, 21, 31, .5); }
.abf-empty.is-on { display: block; }
.abf-empty b { display: block; font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; margin-bottom: .4rem; }
.abf-empty p { color: var(--ev-muted); margin: 0 0 1.2rem; }
.abf-empty .abf-btn { width: auto; display: inline-flex; }

.abf-count { text-align: center; color: var(--ev-faint); font-size: .85rem; min-height: 1.2em; }

@media (prefers-reduced-motion: reduce) { .abf-a, .abf-plus, .abf-topic { transition: none; } }