/* FAQ public styles. Colours/radii inherit the marketplace theme tokens
   (--mp-*) where present and fall back to WP-admin greys elsewhere. */

.faq-container {
	max-width: 100%;
	margin: 0 auto;
}

/* Footer auto-display wrapper: align to the theme's content column (centered,
   with the same max width and horizontal padding) instead of running full-bleed. */
.faq-footer-auto {
	max-width: var(--content-max-width, 1200px);
	margin: 0 auto;
	padding: var(--space-8, 40px) var(--space-6, 24px);
}

.faq-section {
	margin-bottom: 40px;
}

/* Named element and parent class so a centred theme heading rule (h2 alone
   scores (0,0,1)) cannot pull the title away from the questions below it.
   Colour stays with the theme, including its dark-mode override. */
.faq-section h2.faq-section-title {
	text-align: left;
}

.faq-questions {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* No overflow clipping here. It used to be set so the toggle's hover background
   could not square off the rounded corners, but it also cut away the permalink
   sitting in the left gutter, which is outside the box. The toggle now rounds
   its own corners (below), so the card keeps its shape without clipping. */
.faq-item {
	background: var(--mp-surface, #fff);
	border: 1px solid var(--mp-border, #dcdcde);
	border-radius: var(--mp-radius, 8px);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
	border-color: var(--mp-border-strong, #8c8f94);
	box-shadow: var(--mp-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
}

.faq-question-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
}

.faq-collapsible .faq-question-header {
	padding: 0;
}

.faq-question-toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: transparent;
	border: none;
	/* Reset the theme's global <button> skin so it can't leak onto the row.
	   .faq-item already supplies the border, radius and shadow. */
	box-shadow: none;
	/* Follows the card: rounded at the top always, and at the bottom too while
	   the answer is closed and the toggle is the whole card. This replaces the
	   clipping that used to be done with overflow on .faq-item. */
	border-radius: var(--mp-radius, 8px) var(--mp-radius, 8px) 0 0;
	cursor: pointer;
	text-align: left;
	font-size: 16px;
	font-weight: 500;
	color: var(--mp-text, #1d2327);
	transition: background-color 0.2s ease;
}

.faq-question-toggle[aria-expanded="false"] {
	border-radius: var(--mp-radius, 8px);
}

.faq-question-toggle:hover {
	background-color: var(--mp-surface-alt, #f6f7f7);
}

.faq-question-toggle:focus {
	outline: 2px solid var(--mp-primary, #2271b1);
	outline-offset: -2px;
}

.faq-question {
	font-size: 18px;
	font-weight: 500;
	color: var(--mp-text, #1d2327);
	line-height: 1.4;
}

.faq-toggle-icon {
	font-size: 24px;
	font-weight: 300;
	color: var(--mp-primary, #2271b1);
	flex-shrink: 0;
	transition: transform 0.3s ease;
	width: 24px;
	text-align: center;
}

.faq-question-toggle[aria-expanded="true"] .faq-toggle-icon {
	transform: rotate(45deg);
}

.faq-answer {
	padding: 20px;
	color: var(--mp-text, #2c3338);
	line-height: 1.6;
}

/* Collapse is driven by the [hidden] attribute (set in JS), so the class
   carries no display rule — only the reveal animation when shown. */
.faq-collapsible-content {
	animation: faqFadeIn 0.3s ease;
}

@keyframes faqFadeIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.faq-answer p {
	margin-bottom: 15px;
}

.faq-answer p:last-child {
	margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
	margin: 15px 0;
	padding-left: 25px;
}

.faq-answer li {
	margin-bottom: 8px;
}

.faq-answer a {
	color: var(--mp-primary, #2271b1);
	text-decoration: underline;
}

.faq-answer a:hover {
	color: var(--mp-link-hover, #135e96);
}

.faq-answer strong {
	font-weight: 600;
}

.faq-answer em {
	font-style: italic;
}

.faq-item:target {
	border-color: var(--mp-primary, #2271b1);
	box-shadow: 0 0 0 3px var(--mp-primary-soft, rgba(34, 113, 177, 0.1));
}

@media screen and (max-width: 782px) {
	.faq-question {
		font-size: 16px;
	}

	.faq-question-toggle {
		padding: 15px;
	}

	.faq-answer {
		padding: 15px;
	}

	.faq-toggle-icon {
		font-size: 20px;
	}
}

@media screen and (max-width: 480px) {
	.faq-container {
		padding: 0 10px;
	}

	.faq-section {
		margin-bottom: 30px;
	}

	.faq-questions {
		gap: 10px;
	}
}

/* --- Per-question permalink (full-page / linkable layout only) --- */

.faq-item {
	position: relative;
}

.faq-permalink {
	position: absolute;
	top: 22px;
	left: -1.1em;
	color: var(--mp-primary, #2271b1);
	font-weight: 600;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.faq-item:hover .faq-permalink,
.faq-permalink:focus {
	opacity: 1;
}

/* The gutter runs out on small screens, where the container keeps only 10px of
   side padding. The permalink is a hover affordance anyway, and there is no
   hover on a touch screen, so it steps aside rather than hanging off the edge. */
@media screen and (max-width: 782px) {
	.faq-permalink {
		display: none;
	}
}

/* --- Plain layout family: static, no card chrome, no accordion ---
   'plain' arranges questions in a multi-column grid (below); 'stacked' skips the
   grid modifier so the same static Q&A rows stack full width in one column
   instead. Both share the chrome-removal and typography rules in this block. */

.faq-questions--grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem 2.5rem;
	align-items: start;
}

@media (max-width: 1040px) {
	.faq-questions--grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.faq-questions--grid {
		grid-template-columns: 1fr;
	}
}

.faq-section--plain .faq-questions:not(.faq-questions--grid) {
	gap: 2rem;
}

.faq-section--plain .faq-item,
.faq-section--plain .faq-item:hover {
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
	transition: none;
}

.faq-section--plain .faq-question-header {
	display: block;
	padding: 0;
}

/* The question is an <h3> here, so a theme heading rule such as
   h3:not(.widget-title):not(.extract-title) scores (0,2,1) and beats a plain
   two-class selector. Naming the element and the parent class puts this at
   (0,3,1), which wins without !important. Alignment is restated because a
   theme that centres its headings would centre the question above its own
   left-aligned answer. Colour is deliberately left to the theme: claiming it
   here would also outrank the theme's prefers-color-scheme override and pin
   the question to a light-mode colour in dark mode.

   Colour is claimed after all, because a theme that paints every h3 in an
   accent gives a FAQ of eight questions eight accent-coloured banners, and the
   accent stops meaning anything. Weight carries the hierarchy instead. Since
   claiming it here also outranks a theme's prefers-color-scheme rule, the
   dark-mode value is restated below rather than left broken. */
.faq-section.faq-section--plain h3.faq-question {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 0.5rem;
	text-align: left;
	color: var(--text-color, var(--mp-text, #1d2327));
}

@media (prefers-color-scheme: dark) {
	.faq-section.faq-section--plain h3.faq-question {
		color: var(--darkmode-text-color, var(--mp-text, #e6e6e6));
	}

}

.faq-section--plain .faq-answer {
	padding: 0;
	color: var(--mp-text-muted, #525252);
	line-height: 1.65;
}

/* --- Editor shortcut to the admin form ---
   Only rendered for users who can manage the FAQs, so none of this reaches a
   visitor's page. It shares the question's own line and the empty space to its
   right, never the space between the question and its answer: those two belong
   together, and anything pushed in between reads as part of the answer.

   Quiet by default, solid as soon as the question is hovered. No border, no
   button chrome: it is a working tool on a page that is meant to be read.

   Quiet through colour, never through opacity. The muted grey at 45% opacity
   composited to #b9bcbf, which is 1.91:1 on white: visible text far under the
   4.5:1 it needs. The same grey at full strength measures 5.53:1 and still
   reads as secondary beside the question's near-black. 0.875rem is the smallest
   front-end size the readability standard allows for supporting text; 0.8rem
   (12.8px) was under it. */

.faq-edit-link {
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1;
	color: var(--mp-text-muted, #646970);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.faq-item:hover .faq-edit-link,
.faq-edit-link:hover,
.faq-edit-link:focus {
	color: var(--mp-primary, #2271b1);
	text-decoration: underline;
}

/* The collapsible header carries no padding of its own, the toggle button
   supplies it, so the shortcut needs that same 20px to sit clear of the card
   edge, and centring keeps it on the toggle's axis. */
.faq-collapsible .faq-edit-link {
	align-self: center;
	margin-right: 20px;
}

/* The static layouts stack their header, so a row has to be made for the
   shortcut to share with the question. Only headers that actually carry one
   become a row: a visitor's header keeps the block layout it always had.
   Baseline alignment sets the small text on the question's own baseline
   instead of floating it against the cap height of a large heading. */
.faq-section--plain .faq-question-header--with-edit {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
}

/* The heading owns the gap down to the answer, so the shortcut must not add a
   second one of its own. */
.faq-section--plain .faq-edit-link {
	margin-bottom: 0.5rem;
}

/* --- Reduced motion ---
   The answer's reveal animation moves the block 10px as it fades, and the
   toggle icon rotates. Someone who has asked their system for less motion gets
   the same states without the movement: the answer still appears, the icon
   still turns into a minus, neither travels. */
@media (prefers-reduced-motion: reduce) {
	.faq-collapsible-content {
		animation: none;
	}

	.faq-item,
	.faq-toggle-icon,
	.faq-question-toggle,
	.faq-permalink,
	.faq-edit-link {
		transition: none;
	}
}