/* ==========================================================================
   SpielWechsel — Hub page templates (Zahlungsalternative / Spieleanbieter)
   Loaded ONLY on template-payment-alternative.php & template-provider-alternative.php
   (see inc/lovable-additions.php). Depends on global.css, casino-grid.css and
   alt.css — this file adds ONLY structures those do not already cover:

     1. The FAQ accordion (.sw-faq__*). alt.css styles a <details> FAQ; the
        accordion markup that main.js toggles is styled in homepage.css, which
        is enqueued on the front page only. These rules mirror homepage.css and
        are scoped under .sw-alt__faq so they never leak elsewhere.
     2. The hero icon badge (.sw-alt__hero-brand--icon svg). alt.css sizes an
        <img> brand logo; these hub pages use an inline SVG icon instead.
   ========================================================================== */

/* ---------------- FAQ accordion (mirrors homepage.css .sw-faq__*) ---------- */
.sw-alt__faq .sw-faq__title {
	margin-top: 0.5rem;
	font-size: 1.5rem;
}
@media (min-width: 1024px) {
	.sw-alt__faq .sw-faq__title { font-size: 1.875rem; }
}
.sw-alt__faq .sw-faq__list {
	margin-top: 1.5rem;
	border: 1px solid var(--sw-hairline);
	background: #fff;
}
.sw-alt__faq .sw-faq__item { border-top: 1px solid var(--sw-hairline); }
.sw-alt__faq .sw-faq__item:first-child { border-top: 0; }
.sw-alt__faq .sw-faq__trigger {
	display: flex;
	width: 100%;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--sw-font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.005em;
}
@media (min-width: 1024px) {
	.sw-alt__faq .sw-faq__trigger { padding: 1.25rem 2rem; font-size: 1.125rem; }
}
.sw-alt__faq .sw-faq__sign {
	color: var(--sw-primary);
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
	font-family: var(--sw-font-display);
}
.sw-alt__faq .sw-faq__sign-close { display: none; }
.sw-alt__faq .sw-faq__item.is-open .sw-faq__sign-open { display: none; }
.sw-alt__faq .sw-faq__item.is-open .sw-faq__sign-close { display: inline; }
.sw-alt__faq .sw-faq__answer {
	padding: 0 1.25rem 1.5rem 1.25rem;
	color: rgba(0,0,0,0.8);
	line-height: 1.7;
}
@media (min-width: 1024px) {
	.sw-alt__faq .sw-faq__answer { padding: 0 2rem 1.5rem 2rem; }
}

/* ---------------- Hub hero (mirrors Lovable Payment/Provider heroes) -------- */
.sw-hub-hero {
	position: relative;
	overflow: hidden;
}
.sw-hub-hero__pattern {
	position: absolute;
	inset: 0 0 0 auto;
	width: 50%;
	opacity: 0.07;
	pointer-events: none;
}
.sw-hub-hero__inner {
	position: relative;
	max-width: 72rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 2.5rem;
}
@media (min-width: 1024px) {
	.sw-hub-hero__inner { padding: 3rem 2rem 3.5rem; }
}
.sw-hub-hero__crumb {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	flex-wrap: wrap;
	font-size: 0.75rem;
	margin-bottom: 0.75rem;
}
.sw-hub-hero__crumb a { color: inherit; opacity: 0.7; text-decoration: none; }
.sw-hub-hero__crumb a:hover { opacity: 1; }
.sw-hub-hero__crumb .sep { opacity: 0.5; }
.sw-hub-hero__crumb .current { font-weight: 600; }
.sw-hub-hero__title {
	font-size: 1.875rem;
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-weight: 800;
}
@media (min-width: 640px) { .sw-hub-hero__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .sw-hub-hero__title { font-size: 2.75rem; } }
.sw-hub-hero__sub {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.6;
	max-width: 42rem;
}
@media (min-width: 1024px) { .sw-hub-hero__sub { font-size: 1.125rem; } }

.sw-hub-hero--light { color: var(--sw-foreground); border-bottom: 1px solid var(--sw-hairline); }
.sw-hub-hero--light .sw-hub-hero__sub { color: rgba(0,0,0,0.7); }
.sw-hub-hero--light .sw-hub-hero__crumb .current { color: var(--sw-foreground); }

.sw-hub-hero--dark { color: #fff; }
.sw-hub-hero--dark .sw-hub-hero__sub { color: rgba(255,255,255,0.75); }
.sw-hub-hero--dark .sw-hub-hero__crumb { color: rgba(255,255,255,0.65); }
.sw-hub-hero--dark .sw-hub-hero__crumb .current { color: #fff; }

/* ---------------- Casino grid eyebrow + side note -------------------------- */
.sw-hub-grid-note {
	font-size: 0.875rem;
	color: var(--sw-muted-foreground);
	max-width: 24rem;
}
@media (min-width: 1024px) { .sw-hub-grid-note { text-align: right; } }

/* ---------------- Context section header ("Hintergrund") ------------------- */
.sw-hub-content-head { margin-bottom: 1.5rem; }
.sw-hub-content-title {
	margin-top: 0.5rem;
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	font-weight: 800;
}
@media (min-width: 1024px) { .sw-hub-content-title { font-size: 1.875rem; } }

/* ---------------- Editable FAQ accordion (.sw-faq-q / .sw-faq-a) -----------
   Rendered from post_content via the_content(); toggled by alt-templates.js. */
.sw-info-prose .sw-faq-title { margin-top: 2.5rem; }
.sw-info-prose .sw-faq {
	margin-top: 1.25rem;
	border: 1px solid var(--sw-hairline);
	background: #fff;
}
.sw-info-prose .sw-faq .sw-faq-q {
	margin: 0;
	padding: 1.25rem;
	font-family: var(--sw-font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.4;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	border-top: 1px solid var(--sw-hairline);
}
@media (min-width: 1024px) {
	.sw-info-prose .sw-faq .sw-faq-q { padding: 1.25rem 1.75rem; font-size: 1.0625rem; }
}
.sw-info-prose .sw-faq > .sw-faq-q:first-child { border-top: 0; }
.sw-info-prose .sw-faq .sw-faq-q::after {
	content: '+';
	color: var(--sw-primary);
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}
.sw-info-prose .sw-faq .sw-faq-q.is-open::after { content: '−'; }
.sw-info-prose .sw-faq .sw-faq-a {
	display: none;
	padding: 0 1.25rem 1.5rem;
	color: rgba(0,0,0,0.8);
	line-height: 1.7;
}
@media (min-width: 1024px) {
	.sw-info-prose .sw-faq .sw-faq-a { padding: 0 1.75rem 1.5rem; }
}
.sw-info-prose .sw-faq .sw-faq-a.is-open { display: block; }
.sw-info-prose .sw-faq .sw-faq-a > p:first-child { margin-top: 0; }
.sw-info-prose .sw-faq .sw-faq-a > p:last-child { margin-bottom: 0; }

/* Lead/intro paragraph */
.sw-info-prose .sw-hub-intro { font-size: 1.05rem; color: rgba(0,0,0,0.8); }

/* ---------------- Body tables (match Lovable ContextSection prose) ---------
   page.css styles .sw-info-prose h2/h3/p/ul but NOT tables, so the body
   comparison tables render unstyled. These rules give them the Lovable look. */
.sw-info-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	background: #fff;
	border: 1px solid var(--sw-hairline);
	border-radius: 8px;
	overflow: hidden;
	font-size: 0.875rem;
}
.sw-info-prose thead { background: var(--sw-navy-deep); }
.sw-info-prose th {
	background: var(--sw-navy-deep);
	color: #fff;
	text-align: left;
	padding: 0.7rem 0.85rem;
	font-family: var(--sw-font-display);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	white-space: nowrap;
}
.sw-info-prose td {
	padding: 0.7rem 0.85rem;
	border-top: 1px solid var(--sw-hairline);
	vertical-align: top;
	color: rgba(0,0,0,0.82);
	line-height: 1.5;
}
.sw-info-prose tbody tr:nth-child(even) {
	background: color-mix(in oklab, var(--sw-secondary) 35%, transparent);
}
.sw-info-prose td strong { color: var(--sw-foreground); }

/* Wide tables stay readable on small screens (scroll instead of overflowing). */
.sw-info-prose .sw-table-scroll,
.sw-info-prose table {
	max-width: 100%;
}
@media (max-width: 680px) {
	.sw-info-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.sw-info-prose thead, .sw-info-prose tbody, .sw-info-prose tr { display: table; width: 100%; table-layout: fixed; }
}