/*
 * Support/FAQ page (inc/faq.php, content from settings/faq.php). Loaded only on /support/, after bestofsoft.css,
 * so every colour is a token from there and dark mode follows by itself.
 * Structure as on macriumshop.de: topic headings, one bordered row per question, one open at a time, contact at the end.
 */

/* ---------- Page frame ---------- */
body.bos-faq-page .entry-content.is-layout-constrained > .bos-faq { /* beats the 74ch page-text cap in bestofsoft.css and Blocksy's 740px */
	max-width: none;
	width: 100%;
	margin-inline: auto;
}
.bos-faq__lead {
	max-width: 62ch;
	margin: 0 0 28px;
	font-size: 1.0625rem;
	color: var(--bos-text);
}

/* ---------- Manufacturer filter ---------- */
.bos-faq__filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 40px;
	padding: 16px 0;
	border-block: 1px solid var(--bos-rule);
}
.bos-faq__label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bos-mute);
}
.bos-faq__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bos-faq__chips li { margin: 0; }
.bos-faq-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--bos-rule-strong);
	border-radius: var(--bos-r-sm);
	background: var(--bos-paper);
	color: var(--bos-ink);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s var(--bos-ease), border-color .15s var(--bos-ease), color .15s var(--bos-ease);
}
.bos-faq-chip:hover { border-color: var(--bos-ink); color: var(--bos-ink); }
.bos-faq-chip:focus-visible { outline: 3px solid var(--bos-accent); outline-offset: 2px; }
.bos-faq-chip__n { color: var(--bos-mute); font-weight: 500; font-size: 13px; }
.bos-faq-chip[aria-current="true"] {
	background: var(--bos-ink);
	border-color: var(--bos-ink);
	color: var(--bos-paper);
}
.bos-faq-chip[aria-current="true"] .bos-faq-chip__n { color: var(--bos-paper); opacity: .8; }
.bos-faq__count {
	margin: 0 0 0 auto;
	font-size: 13px;
	color: var(--bos-mute);
}

/* ---------- Layout: questions left, topics and contact right ---------- */
.bos-faq__grid { display: grid; gap: 48px; }
.bos-faq__main { min-width: 0; }
@media (min-width: 1000px) {
	.bos-faq__grid { grid-template-columns: minmax(0, 820px) 300px; justify-content: space-between; gap: 64px; align-items: start; }
	.bos-faq__aside { position: sticky; top: 112px; }
}

/* ---------- Topics ---------- */
.bos-faq .bos-faq-sec { margin: 0 0 44px; }
.bos-faq .bos-faq-sec:last-child { margin-bottom: 0; }
body.bos-faq-page.page .entry-content .bos-faq h2.bos-faq-h {
	position: relative;
	margin: 0 0 16px;
	padding-bottom: 12px;
	font-family: var(--bos-display);
	font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
	font-weight: 750;
	font-stretch: 112%;
	line-height: 1.2;
	color: var(--bos-ink);
	border-bottom: 1px solid var(--bos-rule);
	scroll-margin-top: 110px;
}
.bos-faq h2.bos-faq-h::after { /* partition segment, the site's disk-bar motif */
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 56px;
	height: 3px;
	background: var(--bos-ink);
}

/* ---------- Questions ---------- */
.bos-faq details.bos-faq-q {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	background: var(--bos-paper);
	border: 1px solid var(--bos-rule);
	border-radius: var(--bos-r);
	overflow: hidden;
	transition: border-color .15s var(--bos-ease), background-color .15s var(--bos-ease);
}
.bos-faq details.bos-faq-q[open] { border-color: var(--bos-rule-strong); background: var(--bos-tint); }
.bos-faq details.bos-faq-q > summary {
	display: flex;
	align-items: center;
	gap: 8px 14px;
	box-sizing: border-box;
	min-height: 56px;
	margin: 0;
	padding: 14px 18px;
	list-style: none;
	cursor: pointer;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bos-ink);
	transition: background-color .15s var(--bos-ease);
}
.bos-faq details.bos-faq-q > summary::-webkit-details-marker { display: none; }
.bos-faq details.bos-faq-q > summary::marker { content: ""; }
.bos-faq details.bos-faq-q > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin: -4px 4px 0 auto;
	border-right: 2px solid var(--bos-ink);
	border-bottom: 2px solid var(--bos-ink);
	transform: rotate(45deg);
	transition: transform .2s var(--bos-ease), margin .2s var(--bos-ease);
}
.bos-faq details.bos-faq-q[open] > summary::after { margin-top: 4px; transform: rotate(225deg); }
.bos-faq details.bos-faq-q > summary:hover { background: var(--bos-tint); }
.bos-faq details.bos-faq-q > summary:focus { outline: none; }
.bos-faq details.bos-faq-q > summary:focus-visible { outline: 3px solid var(--bos-accent); outline-offset: -3px; border-radius: var(--bos-r); }
.bos-faq-qt { flex: 1 1 auto; min-width: 0; }
.bos-faq-tag {
	flex: 0 0 auto;
	padding: 3px 8px;
	border: 1px solid var(--bos-rule);
	border-radius: 4px;
	background: var(--bos-tint-2);
	color: var(--bos-mute);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}
.bos-faq details.bos-faq-q > :not(summary) {
	margin: 0 18px;
	color: var(--bos-text);
	font-size: 1rem;
	line-height: 1.65;
}
.bos-faq details.bos-faq-q > summary + * { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--bos-rule); }
.bos-faq details.bos-faq-q > :not(summary):last-child { margin-bottom: 0; padding-bottom: 18px; }
.bos-faq details.bos-faq-q > :not(summary) + :not(summary) { margin-top: .8em; }
.bos-faq details.bos-faq-q ul { padding-left: 1.3em; }
.bos-faq details.bos-faq-q li + li { margin-top: .35em; }
.bos-faq details.bos-faq-q a { overflow-wrap: anywhere; }

/* ---------- Aside: topic list and contact card ---------- */
.bos-faq__toc { margin: 0 0 28px; }
.bos-faq__toc .bos-faq__label { margin-bottom: 8px; }
.bos-faq__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: bos-toc; }
.bos-faq__toc li { margin: 0; border-bottom: 1px solid var(--bos-rule); counter-increment: bos-toc; }
.bos-faq__toc a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: var(--bos-ink);
	font-weight: 500;
	text-decoration: none;
}
.bos-faq__toc a::before {
	content: counter(bos-toc, decimal-leading-zero);
	font-family: var(--bos-mono);
	font-size: 12px;
	color: var(--bos-mute);
}
.bos-faq__toc a:hover { color: var(--bos-accent); }
.bos-faq__toc a:focus-visible { outline: 3px solid var(--bos-accent); outline-offset: 2px; }
@media (max-width: 999px) {
	.bos-faq__toc { display: none; } /* on narrow screens the topics follow one another directly */
}

.bos-faq-contact {
	padding: 24px;
	border: 1px solid var(--bos-rule);
	border-radius: var(--bos-r);
	background: var(--bos-tint);
}
body.bos-faq-page.page .entry-content .bos-faq .bos-faq-contact h2 {
	margin: 0 0 8px;
	font-family: var(--bos-display);
	font-size: 1.25rem;
	font-weight: 750;
	font-stretch: 112%;
	color: var(--bos-ink);
}
.bos-faq-contact p { margin: 0 0 16px; color: var(--bos-text); }
.bos-faq-contact .bos-btn { width: 100%; justify-content: center; }
.bos-faq-contact__k {
	margin: 24px 0 6px !important;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bos-mute) !important;
}
.bos-faq-contact__list { margin: 0; padding: 0; list-style: none; }
.bos-faq-contact__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	min-height: 44px;
	margin: 0;
	border-top: 1px solid var(--bos-rule);
}
.bos-faq-contact__brand { min-width: 64px; font-weight: 600; color: var(--bos-ink); }
.bos-faq-contact__list a { color: var(--bos-accent); overflow-wrap: anywhere; }

/* ---------- Filter: hide what does not apply (CSS, so ?hersteller= works before and without JS) ---------- */
.bos-faq[data-hersteller="aomei"] :is(.bos-faq-q, .bos-faq__toc li, .bos-faq-contact__list li):not(.bos-faq--all, .bos-faq--aomei),
.bos-faq[data-hersteller="macrium"] :is(.bos-faq-q, .bos-faq__toc li, .bos-faq-contact__list li):not(.bos-faq--all, .bos-faq--macrium),
.bos-faq[data-hersteller="easeus"] :is(.bos-faq-q, .bos-faq__toc li, .bos-faq-contact__list li):not(.bos-faq--all, .bos-faq--easeus) {
	display: none;
}
.bos-faq[data-hersteller="aomei"] .bos-faq-sec:not(:has(.bos-faq--all, .bos-faq--aomei)),
.bos-faq[data-hersteller="macrium"] .bos-faq-sec:not(:has(.bos-faq--all, .bos-faq--macrium)),
.bos-faq[data-hersteller="easeus"] .bos-faq-sec:not(:has(.bos-faq--all, .bos-faq--easeus)) {
	display: none;
}

/* ---------- Undo the generic page-text rules of bestofsoft.css (body.page … .entry-content p/li/ul/ol) inside the FAQ chrome ---------- */
body.bos-faq-page.page .entry-content .bos-faq :is(ul.bos-faq__chips, .bos-faq__toc ol, ul.bos-faq-contact__list) { padding-left: 0; }
body.bos-faq-page.page .entry-content .bos-faq .bos-faq-contact :is(p, li) { font-size: 15px; }
body.bos-faq-page.page .entry-content .bos-faq :is(p.bos-faq__label, p.bos-faq-contact__k) { font-size: 12px; line-height: 1.4; }
body.bos-faq-page.page .entry-content .bos-faq p.bos-faq__count { font-size: 13px; line-height: 1.4; }
body.bos-faq-page.page .entry-content .bos-faq p.bos-faq__lead { font-size: 1.0625rem; }
body.bos-faq-page.page .entry-content .bos-faq .bos-faq__toc li { font-size: 15px; line-height: 1.35; }
body.bos-faq-page.page .entry-content .bos-faq details.bos-faq-q :is(p, li) { font-size: 1rem; }

/* ---------- Narrow screens ---------- */
@media (max-width: 600px) {
	.bos-faq__filter { margin-bottom: 28px; }
	.bos-faq__count { flex-basis: 100%; margin-left: 0; }
	.bos-faq__chips { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
	.bos-faq-chip { width: 100%; justify-content: center; padding: 0 12px; }
	.bos-faq details.bos-faq-q > summary { flex-wrap: wrap; padding: 12px 14px; font-size: 1rem; }
	.bos-faq-qt { flex-basis: calc(100% - 40px); }
	.bos-faq-tag { order: 3; }
	.bos-faq details.bos-faq-q > summary::after { order: 2; }
	.bos-faq details.bos-faq-q > :not(summary) { margin-inline: 14px; }
	.bos-faq-contact { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.bos-faq-chip,
	.bos-faq details.bos-faq-q,
	.bos-faq details.bos-faq-q > summary,
	.bos-faq details.bos-faq-q > summary::after { transition: none; }
}