/* ============================================================
   WordPress-specific additions — loaded AFTER styles.css/extra.css.
   Only environment fixes live here; design styles stay 1:1 upstream.
   ============================================================ */

/* [hidden] must always win (modals, tab panels, gallery frames). */
[hidden] { display: none !important; }

/* Admin bar: keep the fixed header below it. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Language switcher renders as links in WP (buttons in the prototype). */
.lang-switch__btn { text-decoration: none; }

/* Burger/close icon wrappers must not affect layout. */
.nav-toggle__open, .nav-toggle__close { display: contents; }

/* --- Mobile overflow fixes (bugs inherited from the design prototype) --- */

/* Hero lead carries an inline width:640px from the design; keep the design's
   540px cap on wide screens but never exceed the container on small ones. */
.hero .lead { max-width: min(540px, 100%); }

/* Street View embed: the base .map-frame min-height:280px combined with
   aspect-ratio:16/9 inflates the width to ~498px on narrow screens.
   Let the width rule and the aspect ratio derive the height instead. */
.raeume-streetview .map-frame { width: 100%; min-height: 0; }

/* Jobs grid: allow the columns to shrink below their min-content width
   (long role/type labels otherwise push the section past tiny viewports). */
.jobs-wrap > * { min-width: 0; }

/* Belt and braces: nothing on the page may create sideways page scroll. */
html, body { overflow-x: clip; }

/* --- Mobile layout polish (client feedback) --- */

/* Speisekarte band: center the stacked column on small screens. */
@media (max-width: 820px) {
	.speisekarte-inner { justify-items: center; }
	.speisekarte-text { text-align: center; }
}

/* Reviews: the track keeps the design height as a minimum; main.js grows it
   to fit the active card so long (editable) quotes are never clipped. */
.reviews-track { min-height: 360px; }
@media (max-width: 760px) { .reviews-track { min-height: 460px; } }

/* Social handles: keep Instagram + Facebook side by side on phones. */
@media (max-width: 640px) {
	.social-head__left { min-width: 0; }
	.social-handles { flex-wrap: nowrap; gap: 10px; }
	.social-handle { flex: 1 1 0; min-width: 0; padding: 10px 12px; gap: 10px; }
	.social-handle > div { min-width: 0; }
	.social-handle strong { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
	.social-handle span { font-size: 10px; }
}

/* --- Mobile horizontal swipers (client UX request) ---
   On phones the Aktuelles / Heimat-Eckle / Räume card grids become a
   horizontal scroll-snap carousel: the first card shows full, the next
   peeks to hint the swipe, and JS adds dot indicators. Desktop keeps the
   grid untouched. */
@media (max-width: 720px) {
	.aktuelles-grid,
	.heimat-corners,
	.raeume-grid,
	.social-grid {
		display: flex;
		grid-template-columns: none;      /* neutralise the base grid */
		gap: 14px;
		max-width: none;
		margin: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;            /* Firefox */
		/* full-bleed to the screen edges, content stays padded by the container */
		margin-inline: calc(-1 * clamp(20px, 4vw, 56px));
		padding-inline: clamp(20px, 4vw, 56px);
		scroll-padding-inline: clamp(20px, 4vw, 56px);
	}
	.aktuelles-grid::-webkit-scrollbar,
	.heimat-corners::-webkit-scrollbar,
	.raeume-grid::-webkit-scrollbar,
	.social-grid::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

	.aktuelles-grid > *,
	.heimat-corners > *,
	.raeume-grid > * {
		flex: 0 0 85%;                    /* next card peeks ~15% */
		scroll-snap-align: start;
	}
	/* Social photos read best as a tighter ribbon of ~2 tiles + a peek. */
	.social-grid { gap: 10px; }
	.social-grid > * {
		flex: 0 0 46%;
		scroll-snap-align: start;
	}
}

/* Compacter mobile footer (client request): the badge logo already appears
   at the top of every page, so drop the repeated name and the sub-tagline. */
@media (max-width: 720px) {
	.footer-brand .logo { display: none; }
	.footer-tagline-sub { display: none; }
}

/* Angebote-Explorer tab rail on mobile (client request): the design scrolls
   the tabs horizontally, which hides that more offers exist. Show all tabs
   at once as a 2-column grid — no horizontal scroll, every offer visible. */
@media (max-width: 860px) {
	.ang-rail {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		padding: 6px;
		overflow: visible;                /* was overflow-x: auto */
	}
	.ang-tab {
		flex: initial;
		min-width: 0;                     /* was 150px — let cells share the row */
		border: 1px solid rgba(240, 232, 216, 0.12);
		border-radius: 8px;
		padding: 11px 13px;
	}
	.ang-tab + .ang-tab { border-top: 1px solid rgba(240, 232, 216, 0.12); border-left: 0; }
	.ang-tab.is-active {
		background: rgba(212, 167, 79, 0.16);
		border-color: var(--brand-gold-600);
		border-bottom-color: var(--brand-gold-600);
	}
	.ang-tab__label { font-size: 16px; }
	.ang-tab__hint {
		white-space: normal;              /* was nowrap+ellipsis — let it wrap */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Dot indicators for the mobile swipers (built by main.js). */
.go-swipe-dots {
	display: none;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}
@media (max-width: 720px) {
	.go-swipe-dots { display: flex; }
}
.go-swipe-dots__dot {
	width: 8px; height: 8px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(20, 47, 33, 0.22);
	cursor: pointer;
	transition: background 0.2s, width 0.2s;
}
.go-swipe-dots__dot.is-active {
	width: 22px; border-radius: 5px;
	background: var(--brand-gold-600, #b08d5c);
}
/* On the dark reviews-like sections the dots would sit on cream, so these
   three sections are all light — no dark-mode variant needed. */

/* --- Announcement popup (Ankündigung) --- */
.go-popup {
	position: fixed;
	inset: 0;
	z-index: 2000;                 /* above header (50), float-cta (40), modals (1200) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.go-popup[hidden] { display: none; }
.go-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(14, 34, 24, 0.72);
	cursor: pointer;
}
.go-popup__panel {
	position: relative;
	z-index: 1;
	width: min(560px, 92vw);
	max-height: 92vh;
	overflow-y: auto;
	background: var(--cream-50, #fbf7ef);
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	animation: goPopupIn 0.3s var(--ease-out, ease);
}
@keyframes goPopupIn {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}
.go-popup__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;           /* image-only: all corners rounded */
}
.go-popup__panel--text .go-popup__img { border-radius: 14px 14px 0 0; }
.go-popup__text {
	padding: 16px 20px 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-2, #3a4a40);
}
.go-popup__close {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 2;
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--brand-forest-900, #273526);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	transition: background 0.2s, transform 0.2s;
}
.go-popup__close:hover { background: #fff; transform: scale(1.05); }

/* No-JS fallbacks: with JS, panels start correctly; without it,
   keep the page fully readable. */
html:not(.js) .go-popup { display: none !important; }   /* needs JS to gate first-visit */
html:not(.js) [data-job-detail] { display: block !important; }
html:not(.js) .reviews-nav, html:not(.js) .reviews-dots { display: none; }
html:not(.js) .float-cta { display: none; }
html:not(.js) .go-swipe-dots { display: none !important; }