/* FAQ — .db-faq   (about, catering-services, corporate-events, drinks-catering,
   equipment-rental, event-service, landing, faq = 10)

   Built on core/details, which is a native <details>/<summary> accordion — no
   custom block and no JavaScript. The prototype's own accordion was JS-driven;
   <details> gives the same behaviour for free and is keyboard accessible. */
/* FULL-BLEED, with the content pushed back onto the page column by
   padding-inline — the same arrangement as .db-service-cols__head and for the
   same reason (§9.23): core's constrained layout insets an unaligned child
   through a selector no single-class theme rule can beat.

   Reported by the client on /getraenke-catering-muenchen/, the one page where
   this section carries a surface [368:2210 fills #D9CEC2]: the sand painted only
   as far as the content column, so the band looked cut off at both edges instead
   of running the width of the page. Every FAQ frame is a full-width 1440 with
   40px inset padding, so this is right on all of them — and applying it to all
   seven means the next page that takes a surface here cannot reproduce the bug.
   The six transparent instances render identically before and after. */
.db-faq {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: 40px;
	padding-inline: var(--wp--style--root--padding-left);
}
.db-faq__title { font-size: clamp(1.5rem, 9vw, 5rem); line-height: 1.1; }
.db-faq .db-faq__list { display: flex; flex-direction: column; gap: 20px; }
.db-faq__item { padding-top: 20px; border-top: 1px solid var(--line); }
.db-faq__item:first-child { padding-top: 0; border-top: none; }
.db-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	cursor: pointer; list-style: none;
	font-family: var(--font-display); text-transform: uppercase;
	font-size: 1.125rem; line-height: 1.4; color: var(--ink);
}
.db-faq__item summary::-webkit-details-marker { display: none; }
.db-faq__item summary::after {
	content: "+"; flex: 0 0 auto; font-size: 1.5rem; line-height: 1; color: var(--gold);
}
.db-faq__item[open] summary::after { content: "–"; }
.db-faq__item p { font-size: 16px; line-height: 1.75; color: var(--muted); margin-top: 16px; }
@media (min-width: 861px) {
	.db-faq { flex-direction: row; gap: 120px; padding-block: 120px; align-items: flex-start; }
	.db-faq__title { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; font-size: 5rem; }
	.db-faq .db-faq__list { flex: 0 0 600px; max-width: 600px; gap: 24px; }
	.db-faq__item summary { font-size: 1.5rem; }
}
/* Keep the 600px list comfortable — stack rather than shrink below 1200. */
@media (min-width: 861px) and (max-width: 1199.98px) {
	.db-faq { flex-direction: column; gap: 40px; }
	.db-faq .db-faq__list { flex: 1 1 auto; max-width: none; }
}