/**
 * S+W Wochen — Reiter für mehrere Wochen (Tagesessen / Angebote).
 *
 * Farben kommen aus dem jeweiligen Widget: `--sw-wochen-fg` ist die Textfarbe
 * des Widgets (weiß auf der Tafel, Textfarbe auf der Preisliste),
 * `--sw-wochen-fg-inverse` die Gegenfarbe für den gewählten Reiter.
 * `:root:root` wegen der Kit-Regel `.elementor-kit-5 button` (Pill mit
 * Padding 15/52 und Schatten) — dieselbe Falle wie bei der Filialkarte, §5d.
 * `.sw-wochen__tabs` wird beim Bild-Export aus der Kopie entfernt.
 */

.sw-tagesessen {
	--sw-wochen-fg: var(--sw-tagesessen-color, #fff);
	--sw-wochen-fg-inverse: var(--sw-color-text, #1D1D1B);
}

.sw-angebote {
	--sw-wochen-fg: var(--sw-angebote-color, #1D1D1B);
	--sw-wochen-fg-inverse: var(--sw-color-white, #fff);
}

.sw-wochen__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.625rem;
	margin: 0 0 2.25rem;
}

:root:root .sw-wochen__tab {
	appearance: none;
	background: transparent;
	color: var(--sw-wochen-fg);
	border: 1px solid var(--sw-wochen-fg);
	border-radius: 60px;
	box-shadow: none;
	padding: 0.5rem 1.125rem;
	margin: 0;
	font-family: var(--sw-font-sans, 'Meta Pro', 'Fira Sans', sans-serif);
	font-size: var(--sw-fs-small, 1.0625rem);
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.2;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
	font-variant-numeric: tabular-nums;
}

:root:root .sw-wochen__tab:hover,
:root:root .sw-wochen__tab:focus-visible {
	opacity: 1;
	background: transparent;
	color: var(--sw-wochen-fg);
}

:root:root .sw-wochen__tab:focus-visible {
	outline: 2px solid var(--sw-wochen-fg);
	outline-offset: 3px;
}

:root:root .sw-wochen__tab[aria-selected="true"] {
	background: var(--sw-wochen-fg);
	color: var(--sw-wochen-fg-inverse);
	opacity: 1;
}

/* Laufende Woche: kleiner Punkt vor dem Datum */
.sw-wochen__tab--aktuell::before {
	content: '';
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: currentColor;
	margin-right: 0.5em;
	vertical-align: 0.1em;
}

/* Ohne JS (oder bei nur einer Woche): versteckte Panels sind schlicht weg. */
.sw-wochen__panel[hidden] {
	display: none;
}

/*
 * Mit JS stapelt sw-wochen.js die Panels in derselben Grid-Zelle
 * (`sw-wochen--stapel`): die Sektion behält die Höhe der längsten Woche,
 * der Tafel-Hintergrund (`background-size: cover` auf dem Container) skaliert
 * beim Wechsel also nicht neu und springt nicht mehr; die Wochen blenden
 * stattdessen weich über. Versteckte Panels bleiben im Layout (visibility),
 * sind aber unsichtbar und nicht bedienbar. Im Bild-Export werden sie aus
 * der Kopie entfernt (sw-export.js), damit die Grafik nicht unten Luft hat.
 */
.sw-wochen--stapel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.sw-wochen--stapel > .sw-wochen__tabs {
	grid-row: 1;
	grid-column: 1;
}

.sw-wochen--stapel > .sw-wochen__panel {
	grid-row: 2;
	grid-column: 1;
	transition: opacity var(--sw-anim-duration-normal, 0.6s) var(--sw-anim-easing, ease-out);
}

.sw-wochen--stapel > .sw-wochen__panel[hidden] {
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--sw-anim-duration-fast, 0.3s) ease-out,
		visibility 0s var(--sw-anim-duration-fast, 0.3s);
}

@media (prefers-reduced-motion: reduce) {
	.sw-wochen--stapel > .sw-wochen__panel,
	.sw-wochen--stapel > .sw-wochen__panel[hidden] {
		transition: none;
	}
}

/* Zeitraum innerhalb eines Reiters (bei mehreren Wochen) */
.sw-tagesessen__zeitraum--woche {
	margin-bottom: 2rem;
}

.sw-angebote__zeitraum {
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.875rem);
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: 2rem;
}

/* Mehrere Download-Buttons nebeneinander (Tafel-Bild + Druckversion) */
.sw-export__inline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1rem;
}

@media print {
	.sw-wochen__tabs { display: none !important; }
}