/*
 * The 20 FAQ Manager — front-end styles.
 * Self-contained: every color/size value below is read via
 * var(--t20faq-xxx, <fallback>) — never redeclared with a hardcoded value on
 * .t20faq-wrap or any other selector, which is exactly the bug that made
 * Settings colors silently do nothing on The 20 Event Calendar's first
 * release. The fallback is what's used if the shortcode's inline :root
 * block (see class-shortcode.php wrap_vars()) is ever missing for some
 * reason.
 */

.t20faq-wrap {
	font-family: inherit;
	color: #1f2933;
	max-width: 800px;
	margin: 0 auto;
}

.t20faq-wrap,
.t20faq-wrap * {
	box-sizing: border-box;
}

/* Category filter bar — links down to each category heading. Deliberately
   not sticky (unlike The 20 Resource Directory's jump-nav): this plugin's
   FAQ sections are shorter and sequential by design, so a fixed bar isn't
   needed here. --t20faq-nav-bg defaults to transparent so the bar blends
   into whatever page background it sits over — each filter button still has
   its own solid background (below), so legibility never depends on what's
   behind the bar. */
.t20faq-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 32px;
	background: var(--t20faq-nav-bg, transparent);
	padding: 8px;
	border-radius: 8px;
}
.t20faq-nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--t20faq-nav-button-text, #1f2933);
	background: var(--t20faq-nav-button-bg, #f4f6f8);
	border: 2px solid var(--t20faq-nav-button-border, #e2e8f0);
	padding: 10px 20px;
	border-radius: 100px;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.t20faq-nav a:hover {
	border-color: var(--t20faq-toggle-open-bg, #2c3e50);
	transform: translateY(-2px);
}

.t20faq-group {
	margin-bottom: 48px;
}
.t20faq-group:last-child {
	margin-bottom: 0;
}

.t20faq-back-to-top {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: 0.85rem;
	color: #475569;
	text-decoration: none;
}
.t20faq-back-to-top:hover {
	color: var(--t20faq-toggle-open-bg, #2c3e50);
}

/* Category heading with a short underline rule beneath it, matching the
   reference design: a heading in the surrounding page's own font (this
   plugin doesn't force a specific typeface, so it inherits whatever serif
   or sans-serif font the theme/page already uses), with a short colored
   rule — not a full-width divider — positioned just under the text. */
.t20faq-group-heading {
	position: relative;
	color: var(--t20faq-group-heading-color, #1f2933);
	font-size: var(--t20faq-group-heading-size, 1.75rem);
	font-weight: 500;
	margin: 0 0 28px;
	padding-bottom: 18px;
}
.t20faq-group-heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 3px;
	background: var(--t20faq-heading-rule-color, #d4a24c);
}

.t20faq-item {
	background: var(--t20faq-item-bg, #ffffff);
	border-radius: var(--t20faq-item-radius, 14px);
	box-shadow: var(--t20faq-item-shadow, 0 4px 14px rgba(0, 0, 0, 0.08));
	margin-bottom: 18px;
	overflow: hidden;
}
.t20faq-item:last-child {
	margin-bottom: 0;
}

.t20faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 28px;
	cursor: pointer;
	font-weight: 500;
	color: var(--t20faq-item-title, #1f2933);
	font-size: 1.1rem;
	list-style: none;
}

/* Removes the default browser marker (triangle in Firefox, nothing visible
   but still present in Chromium) so only the toggle circle below shows —
   without this, some browsers would show two toggle indicators. */
.t20faq-item summary::-webkit-details-marker {
	display: none;
}
.t20faq-item summary::marker {
	content: '';
}

/* The expand/collapse control: a filled circle whose background swaps
   color on open/close, containing a single "+" glyph that rotates 45° when
   open — a 45°-rotated "+" reads visually as an "×", so this is one glyph
   animating, not two glyphs being swapped. Both the circle's background
   and the glyph's color are independently configurable (Settings), so an
   admin can match any site's brand for both states. */
.t20faq-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--t20faq-toggle-closed-bg, #eceeef);
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}

.t20faq-toggle .material-icons {
	color: var(--t20faq-toggle-closed-icon, #3d3a36);
	font-size: 20px;
	transition: transform 0.25s ease, color 0.2s ease;
}

.t20faq-item[open] .t20faq-toggle {
	background: var(--t20faq-toggle-open-bg, #2c3e50);
}

.t20faq-item[open] .t20faq-toggle .material-icons {
	color: var(--t20faq-toggle-open-icon, #ffffff);
	transform: rotate(45deg);
}

/* A native <summary> is already keyboard-focusable and operable with
   Enter/Space, and browsers announce its expanded/collapsed state to
   screen readers automatically — no ARIA or JavaScript needed for any of
   that. This focus ring is the one thing browsers don't reliably supply a
   strong version of by default. */
.t20faq-item summary:focus-visible {
	outline: 3px solid var(--t20faq-toggle-open-bg, #2c3e50);
	outline-offset: -3px;
}

.t20faq-nav a:focus-visible,
.t20faq-back-to-top:focus-visible {
	outline: 3px solid var(--t20faq-toggle-open-bg, #2c3e50);
	outline-offset: 2px;
}

.t20faq-item .t20faq-answer {
	padding: 0 28px 26px;
	color: var(--t20faq-item-answer, #6b6560);
	font-size: 1rem;
	line-height: 1.7;
}

/* wpautop() wraps plain answer text in <p> tags, which carry the browser's
   default ~1em top+bottom margin — reset explicitly (a bug caught and fixed
   the hard way on The 20 Resource Directory, applied here from the start)
   so the answer doesn't visibly float away from the question above it. */
.t20faq-answer p {
	margin: 0 0 14px;
}
.t20faq-answer p:last-child {
	margin-bottom: 0;
}
.t20faq-answer a {
	color: inherit;
	text-decoration: underline;
}