/**
 * Front-end styles: breadcrumb trail + Q&A block (spec §6.3, §6.5).
 *
 * Inherits the theme's fonts and colours on purpose — no font stacks, no
 * hard-coded palette, and resets scoped to what would otherwise break layout.
 * Every knob is a custom property so a theme can override it without touching
 * this file.
 *
 * @package wmsnova-aiseo
 */

/* ---------------- Breadcrumbs ---------------- */

nav.nova-breadcrumb {
	--nova-bc-gap: 0.5em;
	--nova-bc-size: 0.875em;
	--nova-bc-margin: 0 0 1em;
	--nova-bc-padding: 0;
	--nova-bc-sep-opacity: 0.55;
	--nova-bc-current-opacity: 0.7;
	--nova-bc-radius: 0;
	--nova-bc-bg: transparent;
	display: block;
	margin: var(--nova-bc-margin);
	padding: var(--nova-bc-padding);
	background: var(--nova-bc-bg);
	border-radius: var(--nova-bc-radius);
	font-size: var(--nova-bc-size);
	line-height: 1.5;
}

nav.nova-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--nova-bc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Themes routinely give every `a` block display and a bottom margin; that
   spacing must not leak into a one-line trail. */
nav.nova-breadcrumb a,
nav.nova-breadcrumb span {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: inherit;
}

nav.nova-breadcrumb li {
	display: inline-flex;
	align-items: baseline;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

nav.nova-breadcrumb li::before,
nav.nova-breadcrumb li::marker {
	content: none;
}

nav.nova-breadcrumb li + li::before {
	content: var(--nova-bc-sep, '\203A');
	flex: 0 0 auto;
	margin-right: var(--nova-bc-gap);
	opacity: var(--nova-bc-sep-opacity);
}

nav.nova-breadcrumb a {
	color: var(--nova-bc-link, inherit);
	text-decoration: var(--nova-bc-link-decoration, none);
	overflow-wrap: anywhere;
}

nav.nova-breadcrumb a:hover,
nav.nova-breadcrumb a:focus-visible {
	text-decoration: underline;
}

nav.nova-breadcrumb a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

nav.nova-breadcrumb [aria-current='page'] {
	opacity: var(--nova-bc-current-opacity);
	font-weight: var(--nova-bc-current-weight, inherit);
	overflow-wrap: anywhere;
}

/* Optional modifiers: [nova_breadcrumb class="nova-breadcrumb--boxed"] */

nav.nova-breadcrumb.nova-breadcrumb--boxed {
	--nova-bc-padding: 0.6em 0.9em;
	--nova-bc-radius: 4px;
	--nova-bc-bg: color-mix( in srgb, currentColor 6%, transparent );
}

nav.nova-breadcrumb.nova-breadcrumb--compact {
	--nova-bc-size: 0.8125em;
	--nova-bc-gap: 0.35em;
}

/* Single-line trail that scrolls instead of wrapping on narrow screens. */

nav.nova-breadcrumb.nova-breadcrumb--scroll ol {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}

nav.nova-breadcrumb.nova-breadcrumb--scroll ol::-webkit-scrollbar {
	display: none;
}

nav.nova-breadcrumb.nova-breadcrumb--scroll li {
	white-space: nowrap;
}

@media print {
	nav.nova-breadcrumb {
		display: none;
	}
}

/* ---------------- Q&A ---------------- */

.nova-faq {
	--nova-faq-line: currentColor;
	--nova-faq-gap: 0.75em;
	margin: 2em 0;
}

.nova-faq-heading {
	margin: 0 0 var(--nova-faq-gap);
}

.nova-faq-item {
	padding: var(--nova-faq-gap) 0;
	border-bottom: 1px solid var(--nova-faq-line);
	border-color: color-mix( in srgb, currentColor 18%, transparent );
}

.nova-faq-item:last-child {
	border-bottom: 0;
}

.nova-faq-q {
	margin: 0;
	font-size: 1.05em;
	line-height: 1.4;
}

.nova-faq-a {
	margin: 0.5em 0 0;
}

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

/* Accordion variant */

details.nova-faq-item > summary.nova-faq-q {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 600;
}

details.nova-faq-item > summary.nova-faq-q::-webkit-details-marker {
	display: none;
}

details.nova-faq-item > summary.nova-faq-q::before {
	content: '+';
	flex: 0 0 auto;
	line-height: 1.4;
	opacity: 0.6;
}

details.nova-faq-item[open] > summary.nova-faq-q::before {
	content: '−';
}

details.nova-faq-item > summary.nova-faq-q:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}