/*
 * TebDesign Core frontend base layer
 * Shared visual fallback for breadcrumbs and FAQ components in all installed
 * page modules. Module-specific CSS may still extend these rules.
 */

body.tebdesign-module-page .tebdesign-breadcrumbs {
	display: block;
	max-width: 100%;
	margin: 0;
	color: var(--ink, #17352b) !important;
	font-size: clamp(.78rem, 2.8vw, .9rem);
	font-weight: 650;
	line-height: 1.8;
}

body.tebdesign-module-page .tebdesign-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .32rem .52rem;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.tebdesign-module-page .tebdesign-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
}

body.tebdesign-module-page .tebdesign-breadcrumbs li + li::before {
	content: "‹";
	display: inline-block;
	margin-inline-end: .48rem;
	color: var(--muted, #66756e);
	font-size: .92em;
	font-weight: 800;
}

body.tebdesign-module-page .tebdesign-breadcrumbs a,
body.tebdesign-module-page .tebdesign-breadcrumbs span {
	display: inline-block;
	max-width: min(62vw, 390px);
	overflow: hidden;
	color: inherit !important;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.tebdesign-module-page .tebdesign-breadcrumbs a:hover,
body.tebdesign-module-page .tebdesign-breadcrumbs a:focus-visible {
	color: var(--brand, #2e6652) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.tebdesign-module-page .tebdesign-breadcrumbs [aria-current="page"] {
	color: var(--muted, #66756e) !important;
	font-weight: 550;
}

/* Generic module FAQ fallback. The selectors intentionally require an FAQ
 * ancestor, so unrelated details elements and footer accordions are untouched. */
body.tebdesign-module-page :is(article, main, section)[class*="page"] [class*="faq"] details {
	overflow: clip;
	border: 1px solid var(--line, rgba(23, 53, 43, .14));
	border-radius: 16px;
	background: var(--surface, #fff);
	color: var(--ink, #17352b) !important;
	box-shadow: 0 8px 24px rgba(23, 53, 43, .045);
}

body.tebdesign-module-page :is(article, main, section)[class*="page"] [class*="faq"] details + details {
	margin-top: .72rem;
}

body.tebdesign-module-page :is(article, main, section)[class*="page"] [class*="faq"] summary {
	color: var(--ink, #17352b) !important;
	font-weight: 800;
	line-height: 1.75;
}

body.tebdesign-module-page :is(article, main, section)[class*="page"] [class*="faq"] details p,
body.tebdesign-module-page :is(article, main, section)[class*="page"] [class*="faq"] details > div {
	color: var(--muted, #56675f) !important;
	line-height: 2;
}

[data-theme="dark"] body.tebdesign-module-page .tebdesign-breadcrumbs,
body.tebdesign-module-page[data-theme="dark"] .tebdesign-breadcrumbs {
	color: var(--ink, #ecf6f1) !important;
}

[data-theme="dark"] body.tebdesign-module-page .tebdesign-breadcrumbs [aria-current="page"],
[data-theme="dark"] body.tebdesign-module-page :is(article, main, section)[class*="page"] [class*="faq"] details p,
[data-theme="dark"] body.tebdesign-module-page :is(article, main, section)[class*="page"] [class*="faq"] details > div {
	color: var(--muted, #b7c9c0) !important;
}

@media (min-width: 768px) {
	body.tebdesign-module-page .tebdesign-breadcrumbs a,
	body.tebdesign-module-page .tebdesign-breadcrumbs span {
		max-width: 520px;
	}
}