/* KW Atelier – Hülle: Info-Leiste (PreNav). Bedingt geladen (prenav_enabled). Gescoped .kwat-*. Doku: assets/css/frontend/CLAUDE.md */

/* ── Info-Leiste (PreNav): rahmenlose Inline-Zeile, sticky über der Navigation ── */
.kwat-prenav {
	position: sticky;
	top: var(--kwat-adminbar, 0px);
	z-index: 101;
	width: 100%;
	background: var(--kwat-prenav-bg);
	border-bottom: 1px solid color-mix(in srgb, var(--kwat-color-accent) 22%, transparent);
	font-family: var(--kwat-font-body);
	transition: transform var(--kwat-transition), opacity var(--kwat-transition);
}

/* Beim Scrollen ausblenden – nur die schlanke Navigation bleibt. */
body.kwat-scrolled .kwat-prenav {
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
}

.kwat-prenav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kwat-space-4);
	width: 100%;
	max-width: var(--kwat-shell-max);
	margin-inline: auto;
	padding-block: var(--kwat-space-2);
	padding-inline: var(--kwat-shell-pad);
}

.kwat-prenav__info {
	display: flex;
	align-items: center;
	gap: var(--kwat-space-3);
	min-width: 0;
	font-size: var(--kwat-text-sm);
	color: var(--kwat-prenav-fg);
}

.kwat-prenav__item {
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
	color: var(--kwat-prenav-fg);
	text-decoration: none;
	white-space: nowrap;
}

.kwat-prenav__item--address {
	min-width: 0;
}

.kwat-prenav__item--address .kwat-prenav__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (hover: hover) {
	a.kwat-prenav__item:hover {
		color: var(--kwat-color-accent-hover);
	}
}

/* Gold-Icons: stroke/fill = currentColor → color hier auf Akzent setzen. */
.kwat-prenav__icon {
	width: 0.95rem;
	height: 0.95rem;
	flex: 0 0 auto;
	color: var(--kwat-color-accent);
}

.kwat-prenav__sep {
	width: 1px;
	height: 0.9rem;
	flex: 0 0 auto;
	background: color-mix(in srgb, var(--kwat-color-accent) 30%, transparent);
}

/* Live-Öffnungsstatus = Anker des aufklappbaren Wochenplans (Disclosure). */
.kwat-prenav__hours {
	position: relative;
	display: inline-flex;
}

/* Status (Punkt + Text; prenav.js füllt/enthüllt ihn) – als Span ODER als Knopf. */
.kwat-prenav__status-wrap {
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
	min-width: 0;
}

/* Der Status als Aufklapp-Knopf: Button-Eigenheiten zurücksetzen, Inline-Optik halten. */
.kwat-prenav__status-toggle {
	padding: var(--kwat-space-1) var(--kwat-space-2);
	margin-inline: calc(-1 * var(--kwat-space-2));
	color: inherit;
	font: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--kwat-radius-sm);
	cursor: pointer;
}

.kwat-prenav__status-caret {
	width: 0.8em;
	height: 0.8em;
	flex: 0 0 auto;
	color: var(--kwat-color-accent);
	transition: transform var(--kwat-transition);
}

.kwat-prenav__status-toggle[aria-expanded="true"] .kwat-prenav__status-caret {
	transform: rotate(180deg);
}

/* Panel: dieselbe Karteikarte wie die Navigation (Papier am Messingreiter). Sonst
   stünden 40 Pixel voneinander entfernt zwei verschiedene Panel-Sprachen. Kante und
   Linien sind `border`, damit die Karte im Windows-Kontrastmodus ein Objekt bleibt. */
.kwat-prenav__hours-panel {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: 30;
	min-width: 15rem;
	margin-top: var(--kwat-space-2);
	padding: var(--kwat-space-3) var(--kwat-space-4) var(--kwat-space-4);
	color: var(--kwat-paper-ink);
	background: linear-gradient(160deg, var(--kwat-paper), var(--kwat-paper-2));
	border: 1px solid var(--kwat-paper-rule);
	border-radius: 3px 3px 10px 10px;
	box-shadow:
		0 2px 0 color-mix(in srgb, #000 30%, transparent),
		0 18px 42px color-mix(in srgb, #000 62%, transparent);
}

.kwat-prenav__hours-panel::before {
	content: "";
	position: absolute;
	top: -7px;
	inset-inline-start: 22px;
	width: 74px;
	height: 9px;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--kwat-color-accent-hi) 60%, #fff),
		var(--kwat-color-accent) 55%,
		color-mix(in srgb, var(--kwat-color-accent) 60%, #000));
}

/* Maus öffnet per Hover (`display` schlägt das UA-`[hidden]{display:none}`); Touch/
   Tastatur über den Knopf (JS toggelt `hidden`/`aria-expanded`). */
@media (hover: hover) {
	.kwat-prenav__hours:hover .kwat-prenav__hours-panel {
		display: block;
	}
}

/* Abschnitts-Überschrift wie auf der Navigations-Karte – Marineblau, weil Gold auf
   diesem Papier nur 1,8:1 hätte. */
.kwat-prenav__hours-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--kwat-space-2);
	font-size: var(--kwat-text-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kwat-color-secondary);
}

.kwat-prenav__hours-title::after {
	content: "";
	flex: 1;
	height: 0;
	border-top: 1px solid var(--kwat-paper-rule);
}

.kwat-prenav__week {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--kwat-space-1) var(--kwat-space-4);
	margin: 0;
	white-space: nowrap;
}

/* Zeilen-Wrapper trägt die Tag-Schlüssel (data-kwat-days) für die „heute"-Markierung,
   bleibt aber layout-neutral → dt/dd liegen im 2-Spalten-Raster des <dl>. */
.kwat-prenav__week-row {
	display: contents;
}

.kwat-prenav__week-day {
	color: var(--kwat-paper-ink-soft);
}

.kwat-prenav__week-time {
	margin: 0;
	text-align: right;
	color: var(--kwat-paper-ink);
}

.kwat-prenav__week-row--rest .kwat-prenav__week-time {
	color: var(--kwat-paper-ink-soft);
	font-style: italic;
}

/* Heutiger Bereich (prenav.js setzt `is-today`) in Marineblau hervorgehoben. */
.kwat-prenav__week-row.is-today .kwat-prenav__week-day,
.kwat-prenav__week-row.is-today .kwat-prenav__week-time {
	color: var(--kwat-color-secondary);
	font-weight: 700;
}

/* „Heute"-Marker nur für Screenreader (visuell ersetzt durch die Gold-Hervorhebung). */
.kwat-prenav__week-today {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kwat-prenav__status {
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
	white-space: nowrap;
	color: var(--kwat-prenav-fg);
}

.kwat-prenav__dot {
	--kwat-dot: var(--kwat-color-text-muted);
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--kwat-dot);
}

.kwat-prenav__status--open {
	color: color-mix(in srgb, var(--kwat-color-success) 55%, var(--kwat-color-text));
}

.kwat-prenav__status--open .kwat-prenav__dot,
.kwat-prenav__status--happy_hour .kwat-prenav__dot {
	--kwat-dot: var(--kwat-color-success);
	animation: kwat-prenav-pulse 2.4s infinite;
}

.kwat-prenav__status--happy_hour {
	color: color-mix(in srgb, var(--kwat-color-accent) 70%, var(--kwat-color-text));
}

.kwat-prenav__status--happy_hour .kwat-prenav__dot {
	--kwat-dot: var(--kwat-color-accent);
}

.kwat-prenav__status--closing {
	color: color-mix(in srgb, var(--kwat-prenav-warning) 70%, var(--kwat-color-text));
}

.kwat-prenav__status--closing .kwat-prenav__dot {
	--kwat-dot: var(--kwat-prenav-warning);
	animation: kwat-prenav-pulse 1.4s infinite;
}

.kwat-prenav__status--closed,
.kwat-prenav__status--vacation,
.kwat-prenav__status--closed_event {
	color: var(--kwat-prenav-fg);
}

.kwat-prenav__status--closed .kwat-prenav__dot,
.kwat-prenav__status--vacation .kwat-prenav__dot,
.kwat-prenav__status--closed_event .kwat-prenav__dot {
	--kwat-dot: var(--kwat-color-danger);
}

@keyframes kwat-prenav-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--kwat-dot) 70%, transparent);
	}

	70% {
		box-shadow: 0 0 0 7px transparent;
	}

	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

/* Social-Icons (gefüllt, Gold). */
.kwat-prenav__social {
	display: flex;
	align-items: center;
	gap: var(--kwat-space-2);
	flex: 0 0 auto;
}

.kwat-prenav__social-link {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	color: var(--kwat-color-accent);
	opacity: 0.85;
	transition: opacity var(--kwat-transition);
}

/* Trefferfläche auf ~44px Höhe vergrößern, ohne die schlanke Info-Leiste höher zu
   machen (überlagert nicht die Nachbar-Icons – horizontal nur bis zur Lücke). */
.kwat-prenav__social-link::after {
	content: "";
	position: absolute;
	inset-block: -6px;
	inset-inline: -3px;
}

.kwat-prenav__social-link svg {
	width: 1.05rem;
	height: 1.05rem;
}

@media (hover: hover) {
	.kwat-prenav__social-link:hover {
		opacity: 1;
	}
}


/* ── PreNav nur ab Tablet (≥ 768px) ──────────────────────────────────── */
/* Mobil ausgeblendet: die untere Aktionsleiste deckt Anrufen/Reservieren ab,
   Adresse/Social folgen später im Footer. So bleibt die Zeile einzeilig (Mockup). */
@media (max-width: 767px) {
	.kwat-prenav {
		display: none;
	}

	body.kwat-has-prenav .kwat-nav {
		top: var(--kwat-adminbar, 0px);
	}
}