/*
 * wp-rei: the little CSS theme.json cannot express. Loaded after the parent's
 * theme.css on the front end and as an editor style. Design tokens stay in
 * theme.json; this file only reads them as custom properties.
 */

/*
 * Menu call to action. The menu item that carries the class "rei-menu-cta"
 * (set under Design → Menüs → CSS-Klassen) renders as a button. The class is
 * kept by the parent's menu filters alongside its own BEM classes.
 */
.dtb-menu__item.rei-menu-cta > .dtb-menu__link {
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	padding: 0.5rem 1rem;
	text-decoration: none;
	transition: background-color var(--wp--custom--dtb--transition--duration, 150ms) ease;
}

.dtb-menu__item.rei-menu-cta > .dtb-menu__link:hover,
.dtb-menu__item.rei-menu-cta > .dtb-menu__link:focus-visible {
	background: var(--wp--preset--color--accent-3);
	text-decoration: none;
}

/* The current page: dark text, red underline, the same on wide screens and in the overlay. */
.dtb-menu__link[aria-current="page"],
.current-menu-ancestor > .dtb-menu__link {
	color: var(--wp--preset--color--contrast-3);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* The current-page underline of the parent makes no sense on a button. */
.dtb-menu__item.rei-menu-cta > .dtb-menu__link[aria-current="page"] {
	text-decoration: none;
}

/*
 * Overlay menu on narrow screens: a calm list in heading type with hairlines
 * between the entries and the call to action as a full-width button at the end.
 */
.dtb-menu--overlay-mobile .dtb-menu__panel-inner {
	gap: var(--wp--preset--spacing--40, 1.5rem);
	padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--preset--spacing--50, 2rem);
}

.dtb-menu--overlay-mobile .dtb-menu__close {
	color: var(--wp--preset--color--contrast-2);
	font-size: 1.75rem;
}

@media (max-width: 47.99em) {

	.dtb-menu--overlay-mobile .dtb-menu__list {
		border-top: 1px solid var(--wp--preset--color--line);
		gap: 0;
	}

	.dtb-menu--overlay-mobile .dtb-menu__item {
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	.dtb-menu--overlay-mobile .dtb-menu__item > .dtb-menu__link {
		color: var(--wp--preset--color--contrast-3);
		display: block;
		flex: 1 1 auto;
		font-family: var(--wp--preset--font-family--heading);
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
		padding: 0.85em 0;
	}


	/* The call to action leaves the list and becomes the closing button. */
	.dtb-menu--overlay-mobile .dtb-menu__item.rei-menu-cta {
		border-bottom: 0;
		margin-top: var(--wp--preset--spacing--40, 1.5rem);
	}

	.dtb-menu--overlay-mobile .dtb-menu__item.rei-menu-cta > .dtb-menu__link {
		color: var(--wp--preset--color--base);
		display: block;
		font-family: var(--wp--preset--font-family--body);
		font-size: var(--wp--preset--font-size--medium);
		padding: 0.75rem 1rem;
		text-align: center;
		width: 100%;
	}

	.dtb-menu--overlay-mobile .dtb-menu__item.rei-menu-cta > .dtb-menu__link[aria-current="page"] {
		color: var(--wp--preset--color--base);
	}
}

/* "Startseite" exists for the overlay only; on wide screens the logo leads home. */
@media (min-width: 48em) {

	.dtb-menu__item.rei-menu-home {
		display: none;
	}
}

/*
 * The header sticks to the top. The sticky element has to be the template
 * part wrapper: a sticky group inside it would only stick within the wrapper's
 * own height. A soft shadow separates it from the content underneath.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: var(--wp--custom--dtb--z-index--header, 100);
}

/* Logged in: the WordPress admin bar sits above everything, so stick below it. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Below 783 pixels the admin bar is not fixed, it scrolls away with the page.
 * Keeping the offset would leave a strip of background above the header for
 * the rest of the visit, so on small screens the header sticks to the very top.
 */
@media screen and (max-width: 782px) {

	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.rei-header {
	box-shadow: var(--wp--preset--shadow--soft);
	transition:
		padding var(--wp--custom--dtb--transition--duration, 150ms) ease;
}

/* Scrolled: the header gives back some height, the logo follows (assets/js/rei.js). */
.rei-header .wp-block-site-logo img {
	transition: width var(--wp--custom--dtb--transition--duration, 150ms) ease;
}

.is-scrolled .rei-header {
	padding-block: var(--wp--preset--spacing--10, 0.25rem) !important;
}

.is-scrolled .rei-header .wp-block-site-logo img {
	width: 120px;
}

@media (prefers-reduced-motion: reduce) {

	.rei-header,
	.rei-header .wp-block-site-logo img {
		transition: none;
	}
}

/* Jump targets stop below the sticky header. */
.entry-content [id] {
	scroll-margin-top: calc(var(--rei-header-height, 6rem) + var(--wp--preset--spacing--40));
}

/* The jump navigation of Kompetenzen glides instead of cutting to the section. */
@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

/* The logo keeps its box on narrow screens; the burger button needs the rest. */
.wp-block-site-logo img {
	height: auto;
	max-width: 100%;
}

/* The logo file is cut tight to the lettering; this is the white margin the old JPG had. */
.rei-header .wp-block-site-logo {
	padding-block: 0.375rem;
}

/* Footer: on narrow screens copyright and legal menu stack centred, as in the mockup. */
@media (max-width: 47.99em) {

	.rei-footer .wp-block-group.alignwide {
		justify-content: center;
		text-align: center;
	}

	.rei-footer .dtb-menu__list {
		justify-content: center;
	}
}

/*
 * Hero and banner: backgrounds run edge to edge, the content inside keeps the
 * theme.json widths. The height follows the viewport, but not without limit;
 * the cover block writes its min-height inline, hence the !important.
 */
.rei-hero {
	min-height: clamp(22rem, 70vh, 40rem) !important;
}

/* Sub pages use a lower picture. */
.rei-hero--low {
	min-height: clamp(16rem, 50vh, 28rem) !important;
}

/*
 * Hero and banner: the white box over the image. theme.json has no
 * translucent colour, so the mix lives here; the text inside stays contrast.
 */
.rei-hero__box {
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	color: var(--wp--preset--color--contrast);
}

/* The logo of the office signs fills the hero box; it carries no text of its own. */
.rei-hero__logo,
.rei-hero__logo img {
	width: 100%;
	height: auto;
	margin: 0;
}

/*
 * Read by search engines and screen readers, not shown: the hero's H1, whose
 * words the logo already shows. In the editor it stays visible (and dashed)
 * so it can still be edited.
 */
.rei-visually-hidden:not(.block-editor-block-list__block) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.editor-styles-wrapper .rei-visually-hidden {
	outline: 1px dashed var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
}

/* Full-width sections of the start page touch each other: no block gap. */
.entry-content > .rei-section + .rei-section,
.is-root-container > .rei-section + .rei-section,
.is-root-container > [data-block] + [data-block] > .rei-section {
	margin-block-start: 0 !important;
}

/*
 * The main template adds a top and a bottom margin. On the start page the hero
 * sits flush under the header and the dark contact block flush above the
 * footer, so both cancel the margin on their side.
 */
.wp-site-blocks main > .entry-content > .rei-kontakt:last-child {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--70)) !important;
}

.wp-site-blocks main > .rei-hero:first-child,
.wp-site-blocks main > .entry-content > .rei-hero:first-child {
	margin-top: calc(-1 * var(--wp--preset--spacing--60));
}

/* Competence tiles: the whole card is the click target of its one link. */
.rei-tile {
	position: relative;
	transition:
		box-shadow var(--wp--custom--dtb--transition--duration, 150ms) ease,
		transform var(--wp--custom--dtb--transition--duration, 150ms) ease;
}

.rei-tile a {
	color: var(--wp--preset--color--contrast-3);
	text-decoration: none;
}

.rei-tile a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.rei-tile:hover,
.rei-tile:focus-within {
	box-shadow: var(--wp--preset--shadow--strong);
	transform: translateY(-2px);
}

.rei-tile a:hover,
.rei-tile a:focus-visible {
	color: var(--wp--preset--color--accent-1);
}

/*
 * Buttons answer the pointer in the same tempo as the tiles, but stay where
 * they are: a lift says "the whole card is the target", a button only changes
 * colour. The outline button had no hover state at all; it now fills, dark on
 * light sections and light on the dark one.
 */
.wp-element-button {
	transition:
		background-color var(--wp--custom--dtb--transition--duration, 150ms) ease,
		border-color var(--wp--custom--dtb--transition--duration, 150ms) ease,
		color var(--wp--custom--dtb--transition--duration, 150ms) ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.is-style-rei-section-dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.is-style-rei-section-dark .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

@media (prefers-reduced-motion: reduce) {

	.rei-tile,
	.wp-element-button {
		transition: none;
	}

	.rei-tile:hover,
	.rei-tile:focus-within {
		transform: none;
	}
}

/*
 * Portrait: always upright, 3:4. The customer's photo replaces the
 * placeholder group with an image block that carries the same class.
 */
.rei-portrait {
	aspect-ratio: 3 / 4;
}

.rei-portrait img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Stacked columns (core breakpoint 781px): the portrait comes first. */
@media (max-width: 781px) {

	.rei-portrait-col {
		order: -1;
	}
}

/* Long German words (Berufshaftpflichtversicherung) must not push headings
   past a phone screen: hyphenate, break as a last resort. */
h1,
h2,
h3,
h4,
.is-style-dtb-card :where(p, li) {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Sub pages ------------------------------------------------------------- */

/* Long keyword lists of a competence run in two columns on wide screens. */
@media (min-width: 48em) {

	.rei-kompetenz__list {
		column-gap: var(--wp--preset--spacing--50);
		columns: 2;
	}

	.rei-kompetenz__list li {
		break-inside: avoid;
	}
}

/* Vita: narrow year column, hairlines between the rows, no outer frame. */
.rei-vita table {
	border-collapse: collapse;
}

.rei-vita td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.6em 0.75em 0.6em 0;
	vertical-align: top;
}

.rei-vita td:first-child {
	color: var(--wp--preset--color--contrast-2);
	white-space: nowrap;
	width: 8rem;
}

/* Reveal on scroll (assets/js/rei.js adds the class; reduced motion never gets it). */
.rei-reveal {
	opacity: 0;
	transform: translateY(1.5rem);
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The hero box slides in once on load; reduced motion shows it at once. */
@media (prefers-reduced-motion: no-preference) {

	.rei-hero .rei-hero__box {
		animation: rei-hero-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@keyframes rei-hero-in {

	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.rei-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* The tile hover transform must not fight the reveal. */
.rei-tile.is-revealed:hover,
.rei-tile.is-revealed:focus-within {
	transform: translateY(-2px);
}

/* Mandate steps: the big number and the heading belong together. */
.rei-step__number {
	line-height: 1;
	margin: 0;
}

/* Parallax of the covers: block style "dtb-parallax" of the parent theme. */