/* ------------------------------------------------------------------
   elmur enmuTEC - 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 webfonts - weights 400 / 500 / 700

   Fonts are self-hosted (never loaded from a third-party CDN) so no
   visitor IP reaches an external server. Outfit ships with the theme
   and is the working default.

   To switch to the brand faces, drop the woff2 files into
   /assets/fonts/ and add the matching @font-face blocks below; the
   font stacks already name them first, so they take over automatically:
     display -> Unbounded, body -> Figtree, mono -> JetBrains Mono
   ------------------------------------------------------------------ */

@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;

	/* Atmosphere: two soft light sources behind the page (see body).
	   Overridden per color scheme. */
	--elmur-glow-primary: rgba(31, 184, 168, 0.18);
	--elmur-glow-secondary: rgba(47, 91, 219, 0.16);
	--elmur-section-tint: rgba(31, 184, 168, 0.05);
	--elmur-hairline: linear-gradient(90deg, transparent, var(--color-accent), transparent);

	/* Typography. The brand faces are named first and take over as soon
	   as their font files exist; Outfit ships with the theme. */
	--font-base: 'Figtree', 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-headings: 'Unbounded', 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace;

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

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

	/* Radius. The brand look is deliberately sharp - corners stay tight
	   instead of pill-shaped. */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 6px;

	/* 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%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* One-page navigation: anchor targets must not disappear behind the
   fixed header when the browser jumps to them. */
[id] {
	scroll-margin-top: calc(var(--header-height-scrolled) + var(--space-md));
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	color: var(--color-text);
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;

	/* Two soft light sources over the base colour give the page depth
	   without any image. The gradients are attached to the background so
	   they stay put while the content scrolls. */
	background-color: var(--color-bg);
	background-image:
		radial-gradient(56rem 32rem at 8% -8%, var(--elmur-glow-primary), transparent 58%),
		radial-gradient(44rem 30rem at 100% 4%, var(--elmur-glow-secondary), transparent 52%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	transition: background-color var(--transition-base), color var(--transition-base);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headings);
	font-weight: 600;
	margin-top: 0;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--color-text);
	overflow-wrap: break-word;
}

/* 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. Text/icons sit on top of
   the hero image itself, so this uses --elmur-on-overlay (the "text over
   media" token, white in every scheme/mode) - not --color-on-primary,
   which is a different token (text color for on top of the --color-primary
   accent, e.g. button labels, and near-black in the dark schemes). */
body.has-hero .site-header:not(.is-scrolled) {
	background: transparent;
	color: var(--elmur-on-overlay);
	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 is a link, so it would otherwise pick up the generic
   a:hover colour swap below and change hue on hover - the logo's colour
   must stay governed by the header state (hero/solid, light/dark) alone,
   in both the resting and the hover/focus state. */
.elmur-branding:hover,
.elmur-branding:focus-visible {
	color: inherit;
}

.elmur-branding__logo {
	width: 100%;
	max-height: var(--logo-max-height);
}

.elmur-branding__logo-img,
.elmur-branding__logo > svg {
	max-height: var(--logo-max-height);
	max-width: var(--logo-max-width);
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transition: max-height var(--transition-base), filter var(--transition-fast);
}

.elmur-branding__logo > svg {
	/* TEC follows the header's own text colour (white on the transparent
	   hero header, dark/light per active mode once the header is solid) -
	   the logo file reads --logo-text via CSS, so there is nothing else to
	   keep in sync when the header state changes. */
	--logo-text: currentColor;
}

/* Hover/focus: a soft accent glow on the mark itself, not a colour or
   visibility change - the resting state is already the fully legible one. */
.elmur-branding:hover .elmur-branding__logo-img,
.elmur-branding:focus-visible .elmur-branding__logo-img,
.elmur-branding:hover .elmur-branding__logo > svg,
.elmur-branding:focus-visible .elmur-branding__logo > svg {
	filter: brightness(1.5) drop-shadow(0 0 12px color-mix(in srgb, var(--color-accent) 70%, transparent));
}

.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,
.site-header.is-scrolled .elmur-branding__logo > svg {
	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.75rem);
	letter-spacing: 0.125em;
	max-width: 100%;
	transition: font-size var(--transition-base), letter-spacing var(--transition-base);
}

.site-header.is-scrolled .elmur-branding__city {
	font-size: clamp(0.5625rem, 0.45rem + 0.4vw, 0.6875rem);
	letter-spacing: 0.1em;
}

/* ------------------------------------------------------------------
   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,
.elmur-nav__list a.is-current {
	color: var(--color-accent);
}

/* One-page navigation: the entry of the section in view is underlined, so
   the current position stays visible while scrolling. */
.elmur-nav__list a.is-current::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: 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(--elmur-on-overlay);
	color: var(--elmur-on-overlay);
}

.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-md) 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);
	min-height: 3.125rem;
	padding: 0.85em 1.35em;
	border-radius: var(--radius-md);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

@media (prefers-reduced-motion: no-preference) {
	.elmur-button:hover {
		transform: translateY(-2px);
	}
}

.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 block integration
   The hero's own styling lives in the elmur-blocks plugin
   (assets/css/frontend.css), so the same block works across themes.
   The theme only drops the top padding of the front page main so the
   full-bleed hero sits flush beneath the transparent header.
   ------------------------------------------------------------------ */

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

/* ------------------------------------------------------------------
   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-md) 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-md);
	padding-top: var(--space-md);
	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-md);
	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-md);
	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-md);
	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-md) 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-md);
	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-md);
	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-md);
}

.elmur-footer__inner {
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--space-md) 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-md);
}

.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);
}

/* ------------------------------------------------------------------
   Back to top

   Long one-pager: the button appears once the visitor is a screen down.
   Visibility is driven by the [hidden] attribute from the header script.
   ------------------------------------------------------------------ */

.elmur-back-to-top {
	position: fixed;
	right: var(--space-lg);
	bottom: var(--space-lg);
	z-index: var(--z-header);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
	color: var(--color-text);
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.elmur-back-to-top[hidden] {
	display: none;
}

.elmur-back-to-top:hover,
.elmur-back-to-top:focus-visible {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
	.elmur-back-to-top:hover {
		transform: translateY(-2px);
	}
}

/* ------------------------------------------------------------------
   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 {
		max-height: var(--logo-max-height-mobile);
	}

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

	.site-header.is-scrolled .elmur-branding__logo-img,
	.site-header.is-scrolled .elmur-branding__logo > svg {
		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);
	}
}

/* ------------------------------------------------------------------
   Brand identity

   The blocks (elmur Blocks plugin) bring their own layout; this section
   only carries what makes the pages read as ENMUTEC: the monospace
   accent voice, the vertical rhythm of a long one-pager and the code
   surfaces.
   ------------------------------------------------------------------ */

/* Eyebrow lines, meta lines and hint lines speak monospace. The blocks
   define size, spacing and colour - only the face is set here. */
.elmur-eyebrow,
.elmur-info-row__status,
.elmur-tag-grid__subtitle,
.elmur-tag-grid__hint,
.elmur-team__skills li,
.elmur-plan__badge,
.elmur-plans__note,
.elmur-marquee__item,
.elmur-definitions__chip {
	font-family: var(--font-mono);
}

/* Vertical rhythm of a page built from stacked blocks. Full-bleed
   blocks bring their own spacing, so they are exempt. */
.elmur-entry__content > * {
	margin-block: var(--space-md);
}

.elmur-entry__content > .alignfull {
	margin-block: 0;
}

.elmur-entry__content > *:first-child {
	margin-block-start: 0;
}

.elmur-entry__content > *:last-child {
	margin-block-end: 0;
}

/* A section intro sits close to the content it introduces: the anchor
   group and the block that follows it drop their own spacing, so only the
   section head's own bottom margin separates them. */
.elmur-entry__content > .elmur-anchor {
	margin-block-end: 0;
}

.elmur-entry__content > .elmur-anchor + * {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------
   Block adjustments

   Theme-level corrections to blocks from the elmur Blocks plugin. The
   plugin stays untouched; everything specific to this site lives here.
   ------------------------------------------------------------------ */

/* A hero without image or video ("background type: none") has no media
   layer to sit on, so it gets the brand surface. Without this the light
   hero text would stand on the page background in light mode. */
.site .elmur-hero {
	background: var(--color-primary);
}

/* Reference entries and team cards are two-column with an image. Without
   one the copy would sit in the narrow column and leave a gap, so these
   cards fall back to a single column. */
.elmur-case:not(:has(.elmur-case__visual)),
.elmur-team__card:not(:has(.elmur-team__photo)) {
	grid-template-columns: 1fr;
}

/* Same for a media row that has no image yet. */
.elmur-media-row:not(:has(.elmur-media-row__visual)) {
	grid-template-columns: 1fr;
}

/* Code surfaces */
code,
kbd,
pre,
samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
	color: var(--color-accent);
}

pre {
	overflow-x: auto;
	max-width: 100%;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}

pre code {
	padding: 0;
	background: none;
	color: inherit;
}

kbd {
	padding: 0.15em 0.45em;
	border: 1px solid var(--color-border);
	border-bottom-width: 2px;
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
	color: var(--color-text);
	font-size: 0.85em;
}

/* ------------------------------------------------------------------
   Quick Check (theme block)

   Two columns: benefits and the result on the left, the questions on
   the right. Below the tablet breakpoint they stack.
   ------------------------------------------------------------------ */

.elmur-check {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: start;
	margin: var(--space-lg) 0;
}

.elmur-check__benefits {
	list-style: none;
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
}

.elmur-check__benefits li {
	position: relative;
	padding-left: 1.15rem;
	font-weight: 600;
}

.elmur-check__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.55rem;
	height: 2px;
	background: var(--color-accent);
}

/* Image between the benefits and the result. It carries the section
   visually while the form is still untouched. */
.elmur-check__visual {
	margin: var(--space-md) 0 0;
	overflow: hidden;
	border-radius: var(--radius-md);
}

.elmur-check__visual img {
	width: 100%;
	height: auto;
	display: block;
}

/* ---- Result ---- */

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

.elmur-check__result[hidden] {
	display: none;
}

.elmur-check__result-label {
	margin-bottom: 0.35rem;
}

.elmur-check__score {
	display: flex;
	align-items: baseline;
	gap: 0.15rem;
	margin: 0 0 0.5rem;
	font-family: var(--font-headings);
	font-size: clamp(2.5rem, 7vw, 4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--color-accent);
}

.elmur-check__score-unit {
	font-size: 0.35em;
	font-weight: 500;
	color: var(--color-text-muted);
}

.elmur-check__verdict {
	margin: 0;
	max-width: 34rem;
	color: var(--color-text-muted);
}

/* ---- Form ---- */

.elmur-check__form {
	display: grid;
	gap: var(--space-md);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-alt);
}

.elmur-check__question {
	margin: 0;
	padding: 0;
	border: 0;
}

.elmur-check__question legend {
	padding: 0;
	margin-bottom: 0.6rem;
	font-weight: 700;
	color: var(--color-text);
}

.elmur-check__answer {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.5rem 0.65rem;
	margin-bottom: 0.35rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	cursor: pointer;
	transition: border-color var(--transition-fast), background var(--transition-fast);
}

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

.elmur-check__answer:hover {
	border-color: var(--color-accent);
}

.elmur-check__answer:has(input:checked) {
	border-color: var(--color-accent);
	background: var(--color-bg-hover);
}

.elmur-check__answer:has(input:focus-visible) {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.elmur-check__answer input {
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--color-accent);
	transform: translateY(0.25em);
}

.elmur-check__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.elmur-check__actions [hidden] {
	display: none;
}

.elmur-check__note {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.elmur-check__note[hidden] {
	display: none;
}

@media (max-width: 48rem) {
	.elmur-check {
		grid-template-columns: 1fr;
	}

	.elmur-check__result {
		margin-top: var(--space-md);
	}
}

/* ------------------------------------------------------------------
   Scroll reveal

   assets/js/reveal.js tags elements by selector and flips .is-revealed
   once they enter the viewport. The movement differs per kind of
   element: text rises, media eases in, cards arrive one after another.

   Everything sits behind (scripting: enabled), so the content stays
   visible if the script never runs, and behind a reduced-motion guard.
   ------------------------------------------------------------------ */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {

	[data-elmur-reveal] {
		opacity: 0;
		transition:
			opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--elmur-reveal-delay, 0s),
			transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--elmur-reveal-delay, 0s);
		will-change: opacity, transform;
	}

	[data-elmur-reveal].is-revealed {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	/* Text rises a little. */
	[data-elmur-reveal="text"] {
		transform: translateY(1.25rem);
	}

	/* Cards come from slightly further down and a touch smaller. */
	[data-elmur-reveal="card"] {
		transform: translateY(2rem) scale(0.985);
	}

	/* Media eases out of a gentle zoom instead of moving. */
	[data-elmur-reveal="media"] {
		transform: scale(1.04);
	}

	/* ---- Richer direction for the blocks from the plugin ----------------
	   The plugin gives every .js-elmur-animate element the same upward
	   fade. These rules keep its mechanism but vary the direction, so a
	   long page does not repeat one motion over and over. */

	/* Alternating rows come in from the side their image sits on. */
	.elmur-media-row.js-elmur-animate {
		transform: translateX(-2rem);
	}

	.elmur-media-row--flipped.js-elmur-animate {
		transform: translateX(2rem);
	}

	.elmur-media-row.js-elmur-animate.is-visible {
		transform: none;
	}

	/* Reference entries and team cards arrive from below with a scale. */
	.elmur-case.js-elmur-animate,
	.elmur-team__card.js-elmur-animate,
	.elmur-plan.js-elmur-animate {
		transform: translateY(2rem) scale(0.985);
	}

	.elmur-case.js-elmur-animate.is-visible,
	.elmur-team__card.js-elmur-animate.is-visible,
	.elmur-plan.js-elmur-animate.is-visible {
		transform: none;
	}

	/* Process steps tip in from the left, following the reading order. */
	.elmur-process__step.js-elmur-animate {
		transform: translateX(-1.25rem);
	}

	.elmur-process__step.js-elmur-animate.is-visible {
		transform: none;
	}

	/* The closing band scales up from the page rather than sliding. */
	.elmur-cta-band__inner.js-elmur-animate {
		transform: scale(0.97);
	}

	.elmur-cta-band__inner.js-elmur-animate.is-visible {
		transform: none;
	}

	/* Images inside a revealed card ease out of a zoom while the card
	   moves - the two motions together read as depth. */
	.js-elmur-animate img,
	[data-elmur-reveal] img {
		transform: scale(1.06);
		transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.js-elmur-animate.is-visible img,
	[data-elmur-reveal].is-revealed img {
		transform: none;
	}

	/* Hover zoom stays in charge once the reveal has finished. */
	.elmur-media-row:hover .elmur-media-row__visual img,
	.elmur-case:hover .elmur-case__visual img,
	.elmur-team__card:hover .elmur-team__photo img {
		transform: scale(1.04);
	}
}