/* FeG München-Ost — small supplemental stylesheet.
   Everything theme.json/block supports can express lives there instead;
   this file only covers the handful of things they can't. */

/* Sticky header: solid-cream glass so content scrolling underneath
   doesn't show through the gap beneath the nav. */
.site-header {
	background: rgba(247, 241, 230, 0.85);
	backdrop-filter: blur(12px) saturate(1.1);
	-webkit-backdrop-filter: blur(12px) saturate(1.1);
	border-bottom: 1px solid var(--wp--preset--color--sand-200);
	z-index: 20;
}

/* Photo frame: aspect-ratio isn't safe to hand-write as a Group block
   style attribute (WordPress deliberately renders it at request time
   rather than serializing it into saved content, so a hand-authored
   inline value trips block-validation "invalid content" warnings) —
   so it lives entirely here instead, keyed by a per-context modifier
   class. overflow/object-fit have no block support either way. */
.photo-frame {
	overflow: hidden;
}
.photo-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.photo-frame:hover img {
	transform: scale(1.02);
}
.photo-frame--hero {
	aspect-ratio: 4 / 3;
}
.photo-frame--card {
	aspect-ratio: 3 / 2;
}
.photo-frame--portrait {
	aspect-ratio: 4 / 5;
}

/* Pill-shaped button (header "Neu hier?" CTA) — kept out of the
   button block's own style attribute for the same reason as above. */
.wp-block-button.nav-cta .wp-block-button__link {
	border-radius: 999px;
}

/* Card look for group blocks used as content cards (event grid, etc.). */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--cream-50);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(44, 38, 32, 0.08), 0 1px 2px rgba(44, 38, 32, 0.04);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-group.is-style-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(44, 38, 32, 0.08), 0 2px 4px rgba(44, 38, 32, 0.04);
}

/* Eyebrow label: uppercase + wide tracking isn't a core block support. */
.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
}

/* Focus ring — README's documented "sage ring, cream offset" treatment,
   applied everywhere at once. :focus-visible (not :focus) so it only
   shows for keyboard navigation, not every mouse click. theme.json's
   button :focus outline covers a baseline even where this can't reach
   (e.g. print styles); box-shadow itself isn't a theme.json style
   property, so it has to live here. */
:where(a, button, .wp-block-button__link, input, textarea, select):focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--wp--preset--color--cream-100), 0 0 0 4px var(--wp--preset--color--sage-500);
}