/*
Theme Name: Hautmedizin Design 2.0
Theme URI: https://hautmedizin.de/
Author: Oleg Balaschov
Description: Modular aufgebaute WordPress-Theme fuer die Hautarztpraxis.
Version: 2.0.0
Text Domain: hautmedizin
*/

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

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

@font-face {
	font-family: 'Urbanist';
	src: url('assets/fonts/Urbanist-SemiBold.woff2') format('woff2');
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}

:root {
	/* Shared geometry for every content block. */
	--hm-layout-gutter: clamp(20px, 3.4vw, 64px);
	--hm-layout-section-top: clamp(56px, 6vw, 96px);
	--hm-layout-section-bottom: clamp(64px, 7vw, 112px);
	--hm-layout-block-gap: clamp(32px, 3.5vw, 52px);
	--hm-layout-landscape-card-height: clamp(17rem, 70dvh, 23rem);

	/* Shared desktop geometry for medical provider logos in navigation and CTA blocks. */
	--hm-provider-logo-width: 7.4rem;
	--hm-provider-logo-height: calc(clamp(3rem, 3.25vw, 3.4rem) - 1rem);
}

html {
	box-sizing: border-box;
}

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

body {
	min-width: 320px;
	margin: 0;
	background: var(--hm-color-background);
	color: var(--hm-color-text);
	font-family: 'Urbanist', Arial, sans-serif;
}

.site-main {
	display: block;
}

/*
 * Kritischer Mobile-Zustand der Navigation vor der JavaScript-Initialisierung.
 *
 * CSS ist die einzige Quelle fuer den Desktop-/Mobile-Breakpoint. JavaScript
 * liest --site-menu-mobile-mode aus und schaltet danach nur das Verhalten frei.
 * Dadurch startet das Menue bereits beim ersten Paint an seiner finalen
 * Position und verursacht beim Initialisieren keinen Layout Shift.
 */
.site-menu {
	--site-menu-mobile-mode: 0;
}

@media (max-width: 1170px) {
	.site-menu {
		--site-menu-mobile-mode: 1;
	}

	.site-menu:not(.is-mobile-mode) {
		--site-menu-mobile-logo-width: clamp(6.75rem, 18vw, 11.5rem);
		--site-menu-mobile-logo-height: clamp(2.45rem, 5vw, 3.4rem);
		--site-menu-mobile-toggle-size: clamp(2.65rem, 5vw, 3.25rem);
		--site-menu-mobile-icon-width: clamp(1.3rem, 2.4vw, 1.6rem);
		position: fixed;
		top: var(--site-menu-edge);
		right: var(--hm-layout-gutter);
		bottom: auto;
		left: auto;
		width: fit-content;
		max-width: calc(100vw - (2 * var(--hm-layout-gutter)));
		transform: none;
	}

	.site-menu:not(.is-mobile-mode) .site-menu__surface {
		grid-template-columns: max-content var(--site-menu-mobile-toggle-size);
		gap: clamp(0.1rem, 0.35vw, 0.25rem);
		height: auto;
		min-height: calc(var(--site-menu-mobile-toggle-size) + 0.5rem);
		padding: clamp(0.25rem, 0.55vw, 0.4rem) clamp(0.3rem, 0.65vw, 0.5rem);
		border: 0;
		border-radius: clamp(0.65rem, 1vw, 0.8rem);
	}

	.site-menu:not(.is-mobile-mode) .site-menu__brand {
		width: var(--site-menu-mobile-logo-width);
		height: var(--site-menu-mobile-logo-height);
	}

	.site-menu:not(.is-mobile-mode) .site-menu__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		justify-self: end;
		width: var(--site-menu-mobile-toggle-size);
		height: var(--site-menu-mobile-toggle-size);
		min-height: 0;
		padding: clamp(0.5rem, 1vw, 0.65rem);
		border: 0;
		border-radius: 0.45rem;
		background: transparent;
		color: var(--hm-color-text);
		font: inherit;
		cursor: pointer;
	}

	.site-menu:not(.is-mobile-mode) .site-menu__toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.site-menu:not(.is-mobile-mode) .site-menu__drawer {
		display: none;
	}
}