/* ------------------------------------------------------------------
   elmur Trades - public stylesheet (base + tokens)

   Color values defined in :root are neutral fallbacks. The real
   palettes live in /assets/css/colors/ and override these tokens
   per [data-theme="dark"] / [data-theme="light"].
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Self-hosted Outfit (Google Fonts) - weights 400 / 500 / 700
   Place font files in /assets/fonts/ with these exact names:
     outfit-400.woff2, outfit-500.woff2, outfit-700.woff2
   ------------------------------------------------------------------ */

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/outfit-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/outfit-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/outfit-700.woff2') format('woff2');
}

/* ------------------------------------------------------------------
   Design tokens (CSS custom properties)
   ------------------------------------------------------------------ */

:root {
	/* Colors (fallback values - overridden by color scheme files) */
	--color-primary: #2d2d2d;
	--color-primary-hover: #1a1a1a;
	--color-on-primary: #ffffff;
	--color-bg: #ffffff;
	--color-bg-alt: #f5f5f5;
	--color-bg-hover: #ececec;
	--color-text: #1a1a1a;
	--color-text-muted: #6b6b6b;
	--color-border: #e5e5e5;
	--color-accent: #b8860b;
	--color-accent-hover: #946c08;
	--color-focus: #b8860b;
	--color-link: #1e293b;
	--color-link-hover: #b8860b;

	/* Media overlay palette (fallbacks - overridden by color scheme files) */
	--elmur-overlay-scrim: rgba(0, 0, 0, 0.4);
	--elmur-overlay-scrim-soft: rgba(0, 0, 0, 0.1);
	--elmur-overlay-scrim-strong: rgba(0, 0, 0, 0.65);
	--elmur-overlay-scrim-max: rgba(0, 0, 0, 0.8);
	--elmur-on-overlay: #ffffff;
	--elmur-on-overlay-muted: rgba(255, 255, 255, 0.85);
	--elmur-on-overlay-faint: rgba(255, 255, 255, 0.6);

	/* Offer accent (fallbacks - overridden by color scheme files) */
	--elmur-offer-color: #c62828;
	--elmur-offer-color-hover: #a91d1d;
	--elmur-offer-on: #ffffff;

	/* Typography */
	--font-base: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-headings: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Layout */
	--container-max: 80rem;
	--header-height: 6rem;
	--header-height-scrolled: 4rem;
	--logo-max-height: 3.75rem;
	--logo-max-height-scrolled: 2.25rem;
	--logo-max-height-mobile: 3.5rem;
	--logo-max-height-scrolled-mobile: 2.5rem;

	/* Spacing scale */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;
	--space-xl: 4rem;

	/* Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 1rem;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* Z-index */
	--z-header: 100;
	--z-overlay: 200;
}

/* ------------------------------------------------------------------
   Base reset & typography
   ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	background: var(--color-bg);
	color: var(--color-text);
	line-height: 1.6;
	transition: background var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headings);
	font-weight: 700;
	margin-top: 0;
	line-height: 1.2;
	color: var(--color-text);
}

/* Page content vertical rhythm: a heading gets top spacing when it follows
   another block (e.g. a shortcode). The first element of the content and of
   each column stays flush, so columns still align at the top. */
.elmur-entry__content :is(h2, h3, h4, h5, h6) {
	margin-top: var(--space-lg);
}
.elmur-entry__content > :first-child,
.elmur-entry__content .wp-block-column > :first-child {
	margin-top: 0;
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--color-link-hover);
}

/* Universal keyboard focus ring (visible in both modes) */
:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Selection colour matches accent in both modes */
::selection {
	background: var(--color-accent);
	color: var(--color-on-primary);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ------------------------------------------------------------------
   Site layout
   ------------------------------------------------------------------ */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

/* ------------------------------------------------------------------
   Site header (sticky, transparent over hero, dark when scrolled)
   ------------------------------------------------------------------ */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	height: var(--header-height);
	display: flex;
	align-items: center;
	background: var(--color-bg);
	color: var(--color-text);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	/* Bottom hairline so the header stays separated from the page in
	   dark mode (the soft shadow is invisible on dark backgrounds).
	   Uses the theme border token, so it adapts to light/dark. */
	border-bottom: 1px solid var(--color-border);
	transition: height var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
}

/* Pages with a hero (body.has-hero) get a transparent header
   that turns solid as soon as the user scrolls. */
body.has-hero .site-header:not(.is-scrolled) {
	background: transparent;
	color: var(--color-on-primary);
	box-shadow: none;
	border-bottom-color: transparent;
}

.site-header.is-scrolled {
	height: var(--header-height-scrolled);
	background: var(--color-bg);
	color: var(--color-text);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.elmur-header__inner {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--space-lg);
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

/* ------------------------------------------------------------------
   Branding (logo + city)
   ------------------------------------------------------------------ */

.elmur-branding {
	display: inline-flex;
	flex-direction: column;
	/* Align the subtitle to the logo's right edge — logo-independent,
	   no per-logo offset tuning. */
	align-items: flex-end;
	/* Gap scales with the viewport so the logo-to-subtitle distance keeps
	   the same proportion on mobile and desktop (and never overlaps). */
	gap: clamp(0.375rem, 0.3rem + 0.3vw, 0.5rem);
	text-decoration: none;
	color: inherit;
	line-height: 1;
}

.elmur-branding__logo {
	display: block;
}

.elmur-branding__logo-img {
	max-height: var(--logo-max-height);
	width: auto;
	height: auto;
	display: block;
	transition: max-height var(--transition-base);
}

.elmur-branding__logo-text {
	font-family: var(--font-headings);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	color: currentColor;
	white-space: nowrap;
}

.site-header.is-scrolled .elmur-branding__logo-img {
	max-height: var(--logo-max-height-scrolled);
}

.elmur-branding__city {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	/* Scales with the viewport so the ratio to the logo holds on
	   mobile and desktop instead of one fixed size. */
	font-size: clamp(0.625rem, 0.5rem + 0.5vw, 0.78rem);
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: right;
	max-width: 100%;
}

/* Logo: subtle white glow so dark logo text stays readable on any background */
.elmur-branding__logo-img {
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

/* ------------------------------------------------------------------
   Primary navigation
   ------------------------------------------------------------------ */

.elmur-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.elmur-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-lg);
}

.elmur-nav__list a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
	padding: var(--space-sm) 0;
	position: relative;
	transition: color var(--transition-fast);
}

.elmur-nav__list a:hover,
.elmur-nav__list a:focus-visible,
.elmur-nav__list .current-menu-item > a {
	color: var(--color-accent);
}

/* Dropdown / sub-menu */
.elmur-nav__list li {
	position: relative;
}

.elmur-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12.5rem;
	/* Frosted-glass surface, kept very subtle: mostly translucent so it only
	   barely lifts off the background; blur keeps the labels legible. */
	background: color-mix(in srgb, var(--color-bg-hover) 50%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	border: 1px solid color-mix(in srgb, var(--color-border) 35%, transparent);
	border-radius: var(--radius-md, 0.5rem);
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
	list-style: none;
	margin: 0;
	padding: var(--space-xs, 0.25rem) 0;
	z-index: 200;
	flex-direction: column;
	gap: 0;
}

/* Desktop pointer devices only: reveal on hover/focus.
   On touch/mobile, hover/focus-within must NOT reveal the submenu,
   otherwise focus stays inside the item and a second tap on the
   parent cannot close it again. */
@media (hover: hover) and (pointer: fine) {
	.elmur-nav__list li.elmur-has-children:hover > .sub-menu,
	.elmur-nav__list li.elmur-has-children:focus-within > .sub-menu {
		display: flex;
	}
}

/* All devices: explicit JS toggle state (mobile open/close). */
.elmur-nav__list li.elmur-has-children.is-open > .sub-menu {
	display: flex;
}

.elmur-nav__list .sub-menu a {
	display: block;
	padding: var(--space-xs, 0.25rem) var(--space-md, 1rem);
	white-space: nowrap;
	color: var(--color-text);
}

.elmur-nav__list .sub-menu a:hover {
	background: transparent;
	color: var(--color-accent);
}

.elmur-nav__burger:hover,
.elmur-nav__burger:focus-visible {
	color: var(--color-accent);
}

.elmur-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 0.3125rem;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.5rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: inherit;
}

.elmur-nav__burger-bar {
	display: block;
	height: 2px;
	background: currentColor;
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* ------------------------------------------------------------------
   Theme toggle (sun / moon swap by data-theme)
   ------------------------------------------------------------------ */

.elmur-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.elmur-theme-toggle:hover,
.elmur-theme-toggle:focus-visible {
	background: var(--color-bg-hover);
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* When the header is transparent over a hero, the toggle border
   stays visible on top of imagery. */
body.has-hero .site-header:not(.is-scrolled) .elmur-theme-toggle {
	border-color: rgba(255, 255, 255, 0.4);
}

body.has-hero .site-header:not(.is-scrolled) .elmur-theme-toggle:hover,
body.has-hero .site-header:not(.is-scrolled) .elmur-theme-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--color-on-primary);
	color: var(--color-on-primary);
}

.elmur-theme-toggle__icon {
	display: none;
	line-height: 0;
}

[data-theme="light"] .elmur-theme-toggle__icon--moon,
[data-theme="dark"] .elmur-theme-toggle__icon--sun {
	display: inline-flex;
}

/* ------------------------------------------------------------------
   Push the first section below the fixed header.
   Pages without a hero use --header-height as natural offset.
   Pages with a hero start at 0 - the hero sits beneath the header.
   ------------------------------------------------------------------ */

.site-content {
	padding-top: var(--header-height);
}

body.has-hero .site-content {
	padding-top: 0;
}

/* ------------------------------------------------------------------
   Containers
   ------------------------------------------------------------------ */

.elmur-container {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg);
}

.elmur-container--narrow {
	max-width: 55rem;
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

.elmur-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: 0.75em 1.5em;
	border-radius: var(--radius-md);
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.elmur-button:focus-visible {
	outline-offset: 3px;
}

.elmur-button--primary {
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-color: var(--color-primary);
}

.elmur-button--primary:hover,
.elmur-button--primary:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-on-primary);
}

.elmur-button--ghost {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

.elmur-button--ghost:hover,
.elmur-button--ghost:focus-visible {
	background: var(--color-bg-hover);
	color: var(--color-accent);
	border-color: var(--color-accent);
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */

.elmur-hero {
	position: relative;
	/* Match the panorama's aspect ratio so the full skyline shows edge to
	   edge and the section stays flat; min-height keeps room for the text on
	   narrow screens (there the image is cropped to a centered slice). */
	aspect-ratio: 1952 / 544;
	min-height: 22rem;
	display: flex;
	align-items: center;
	color: #ffffff;
	overflow: hidden;
	isolation: isolate;
}

.elmur-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Skyline photo with two scrims: a top one so the transparent header
	   stays readable, and a left one so the white hero text stays legible.
	   The skyline shows through on the right / lower area. */
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 16%, transparent 36%),
		linear-gradient(95deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 45%, transparent 78%),
		url(../images/hero-ffm-skyline.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.elmur-hero__inner {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: calc(var(--header-height) + var(--space-xl)) var(--space-lg) var(--space-xl);
}

.elmur-hero__title {
	font-size: clamp(2rem, 5vw, 4rem);
	margin: 0 0 var(--space-md);
	color: inherit;
}

.elmur-hero__lead {
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	max-width: 60ch;
	margin: 0 0 var(--space-lg);
	color: rgba(255, 255, 255, 0.9);
}

.elmur-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin: 0;
}

.elmur-hero .elmur-button--primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}

.elmur-hero .elmur-button--primary:hover,
.elmur-hero .elmur-button--primary:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

/* ------------------------------------------------------------------
   Cards (general purpose)
   ------------------------------------------------------------------ */

.elmur-card {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.elmur-card:hover {
	transform: translateY(-2px);
	border-color: var(--color-accent);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.elmur-card__title {
	margin: 0 0 var(--space-sm);
	font-size: 1.25rem;
}

/* ------------------------------------------------------------------
   Service cards (category overview)
   ------------------------------------------------------------------ */

.elmur-klassen-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
	gap: var(--space-lg);
	margin: var(--space-xl) 0;
}

.elmur-klassen-card {
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	position: relative;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	cursor: default;
}

.elmur-klassen-card::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.elmur-klassen-card:hover {
	transform: translateY(-6px);
	border-color: var(--color-accent);
	box-shadow: 0 12px 32px rgba(255, 193, 7, 0.18);
}

.elmur-klassen-card:hover::before {
	transform: scaleX(1);
}

.elmur-klassen-card__badge {
	display: inline-block;
	font-size: 2.5rem;
	font-weight: 900;
	color: var(--color-accent);
	line-height: 1;
	margin-bottom: var(--space-sm);
	letter-spacing: -0.025em;
}

.elmur-klassen-card__title {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 var(--space-md);
	color: var(--color-text);
}

.elmur-klassen-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.elmur-klassen-card__list li {
	font-size: 0.875rem;
	color: var(--color-text-muted);
	padding-left: 1.1em;
	position: relative;
}

.elmur-klassen-card__list li::before {
	content: '›';
	position: absolute;
	left: 0;
	color: var(--color-accent);
	font-weight: 700;
}

.elmur-klassen-card__list strong {
	color: var(--color-text);
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Post / page entry
   ------------------------------------------------------------------ */

.elmur-entry + .elmur-entry {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.elmur-entry__header {
	margin-bottom: var(--space-md);
}

.elmur-entry__title {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0 0 var(--space-sm);
}

.elmur-entry__title a {
	color: inherit;
	text-decoration: none;
}

.elmur-entry__title a:hover,
.elmur-entry__title a:focus-visible {
	color: var(--color-accent);
}

.elmur-post__meta {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin: 0;
}

.elmur-post__meta-sep {
	margin: 0 0.5em;
}

.elmur-entry__thumb {
	margin: 0 0 var(--space-lg);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.elmur-entry__content > * + * {
	margin-top: var(--space-md);
}

/* ------------------------------------------------------------------
   Archive header
   ------------------------------------------------------------------ */

.elmur-archive__header {
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
}

.elmur-archive__title {
	margin: 0 0 var(--space-sm);
}

.elmur-archive__description {
	color: var(--color-text-muted);
}

/* ------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------ */

.elmur-pagination {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.elmur-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	justify-content: center;
}

.elmur-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: inherit;
	text-decoration: none;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.elmur-pagination .page-numbers:hover,
.elmur-pagination .page-numbers:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.elmur-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}

/* ------------------------------------------------------------------
   Post navigation (single)
   ------------------------------------------------------------------ */

.post-navigation {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

.elmur-post-nav__label {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.elmur-post-nav__title {
	display: block;
	font-weight: 500;
}

@media (max-width: 37.5em) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------ */

.elmur-empty {
	text-align: center;
	padding: var(--space-xl) 0;
}

.elmur-empty__title {
	margin: var(--space-md) 0;
}

.elmur-empty__code {
	font-size: clamp(4rem, 12vw, 8rem);
	font-weight: 700;
	margin: 0;
	color: var(--color-accent);
	line-height: 1;
}

.elmur-empty__actions {
	margin: var(--space-lg) 0;
}

/* ------------------------------------------------------------------
   Search form
   ------------------------------------------------------------------ */

.elmur-search {
	display: flex;
	gap: var(--space-sm);
	max-width: 30rem;
	margin: var(--space-md) auto;
}

.elmur-search__input {
	flex: 1;
	padding: 0.75em 1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg);
	color: var(--color-text);
	font: inherit;
}

.elmur-search__input:focus {
	border-color: var(--color-accent);
}

.elmur-search__submit {
	padding: 0.75em 1.25em;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font: inherit;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.elmur-search__submit:hover,
.elmur-search__submit:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ------------------------------------------------------------------
   Comments
   ------------------------------------------------------------------ */

.elmur-comments {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.elmur-comments__title {
	margin: 0 0 var(--space-lg);
}

.elmur-comments__list {
	list-style: none;
	margin: 0 0 var(--space-xl);
	padding: 0;
}

.elmur-comments__list .comment {
	margin: 0 0 var(--space-lg);
	padding: var(--space-md);
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
}

.elmur-comments__list .children {
	list-style: none;
	margin: var(--space-md) 0 0 var(--space-lg);
	padding: 0;
}

/* ------------------------------------------------------------------
   Widgets (footer)
   ------------------------------------------------------------------ */

.elmur-widget {
	margin-bottom: var(--space-md);
}

.elmur-widget:last-child {
	margin-bottom: 0;
}

/* A widget that only contains a heading acts as the column title:
   pull the following content widget close to it. */
.elmur-widget:has(> .wp-block-heading:only-child) {
	margin-bottom: var(--space-sm);
}

/* Headings inside footer widgets (block editor "Heading" blocks).
   Accent color for clear column structure (footer only). */
.elmur-widget .wp-block-heading {
	margin: 0;
	font-size: 1.05rem;
	color: var(--color-accent);
}

/* Footer only: tone down the bold day labels of the opening-hours
   shortcode so the column heading remains the visual anchor. */
.elmur-widget .elmur-bh-display__day {
	font-weight: 400;
}

/* Footer only: keep the opening-hours table two-column (day | time)
   on every screen size. Overrides the plugin's small-screen stacking
   so the footer never breaks the day and its time onto separate lines. */
.elmur-widget .elmur-bh-display__table {
	display: table;
	width: auto;
}

.elmur-widget .elmur-bh-display__table tbody {
	display: table-row-group;
}

.elmur-widget .elmur-bh-display__table tr {
	display: table-row;
}

.elmur-widget .elmur-bh-display__day,
.elmur-widget .elmur-bh-display__times {
	display: table-cell;
	white-space: nowrap;
	vertical-align: top;
	padding-bottom: 0.4em;
}

/* Shrink the day column to its longest label; the table's default cell
   spacing provides the gap to the time column (no extra padding needed). */
.elmur-widget .elmur-bh-display__day {
	width: 1%;
}

.elmur-widget__title {
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.elmur-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.elmur-widget li + li {
	margin-top: var(--space-xs);
}

/* ------------------------------------------------------------------
   Site footer
   ------------------------------------------------------------------ */

.site-footer {
	background: var(--color-bg-alt);
	color: var(--color-text);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-xl);
}

.elmur-footer__inner {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-xl) var(--space-lg);
}

.elmur-footer__widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.elmur-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.elmur-footer__copy {
	margin: 0;
}

.elmur-footer__nav-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin: 0;
	padding: 0;
}

.elmur-footer__nav-list a {
	color: inherit;
	text-decoration: none;
}

.elmur-footer__nav-list a:hover,
.elmur-footer__nav-list a:focus-visible {
	color: var(--color-accent);
}

/* ------------------------------------------------------------------
   Scroll-in fade animation (toggled by JS via .is-visible)
   ------------------------------------------------------------------ */

[data-elmur-fade-in] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease, transform 600ms ease;
}

[data-elmur-fade-in].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-elmur-fade-in] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------------
   WordPress block alignments
   ------------------------------------------------------------------ */

.alignwide {
	margin-left: calc(50% - 50vw + var(--space-md));
	margin-right: calc(50% - 50vw + var(--space-md));
	width: auto;
	max-width: 100vw;
}

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.alignleft {
	float: left;
	margin: 0 var(--space-md) var(--space-md) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--space-md) var(--space-md);
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

/* ------------------------------------------------------------------
   Mobile (<= 48em / ~768px)
   ------------------------------------------------------------------ */

@media (max-width: 48em) {
	.elmur-header__inner {
		padding: 0 var(--space-md);
		gap: var(--space-sm);
	}

	.elmur-branding__logo-img {
		max-height: var(--logo-max-height-mobile);
	}

	.site-header.is-scrolled .elmur-branding__logo-img {
		max-height: var(--logo-max-height-scrolled-mobile);
	}

	.elmur-nav {
		margin-left: auto;
	}

	.elmur-nav__burger {
		display: inline-flex;
	}

	.elmur-nav__panel {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		background: var(--color-bg);
		color: var(--color-text);
		padding: var(--space-lg);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
		z-index: var(--z-overlay);
		max-height: calc(100vh - var(--header-height));
		overflow-y: auto;
		/* Hidden by default; revealed via .elmur-nav--open. Using
		   visibility + opacity (instead of translateY(-100%)) guarantees
		   the opaque panel never paints over the header when closed. */
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	}

	.site-header.is-scrolled .elmur-nav__panel {
		top: var(--header-height-scrolled);
		max-height: calc(100vh - var(--header-height-scrolled));
	}

	.elmur-nav--open .elmur-nav__panel {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.elmur-nav__list {
		flex-direction: column;
		gap: var(--space-md);
	}
}