/*
Theme Name: Ihr Doktor
Template: twentytwentyfive
Description: Child-Theme für ihr-doktor.at (Nachbau der Squarespace-Seite 2026-10). Seitenleiste mit schräger Kante, Sprachen DE/RU über Elternseiten /de/ und /ru/.
Author: Homegrown IT e.U.
Version: 1.0.0
Text Domain: ihr-doktor
*/

:root {
	--ihr-green: #8db5a0;
	--ihr-green-dark: #349d70;
	--ihr-line: #5a5;
	--ihr-sidebar: 25rem;
}

/* ---------- Grundlayout ---------- */

body {
	letter-spacing: .02em;
}

.ihr-main {
	max-width: 1072px; /* 1008 px Inhalt wie im Original */
	margin: 0 auto;
	padding: 7.5rem 2rem 4rem;
}

/* Inhaltsspalte wie im Original etwas links der Mitte */
@media (min-width: 1240px) {
	.ihr-main { margin-left: calc(50% - 590px); }
}

/* Abstände wie im Original: Überschriften 1em oben/unten, Absätze 1em unten (Ränder fallen zusammen) */
.ihr-main :is(h1, h2, h3, h4) { margin: 1em 0; }
.ihr-main p { margin: 0 0 1em; }
.ihr-main :is(ul, ol) { margin: 1em 0; }
.ihr-main .wp-block-post-content > h1:first-child { margin-top: 16px; }

/* ---------- Kopf: DE / RU / KONTAKT ---------- */

.ihr-topright {
	position: absolute;
	top: 58px;
	right: max(1rem, calc(50% - 514px));
	display: flex;
	gap: .35rem;
	z-index: 900;
}

.ihr-topright a {
	display: inline-block;
	border: .1em solid var(--ihr-green);
	padding: 0 .3em;
	font-size: 1.5rem;
	line-height: 2.5rem;
	height: 2.5rem;
	font-weight: 800;
	color: #000;
	text-decoration: none;
	white-space: nowrap;
}

.ihr-topright a:hover,
.ihr-topright a:focus-visible,
.ihr-topright a[aria-current="true"]:hover {
	background: var(--ihr-green);
	color: #fff;
}

/* ---------- Seitenleiste ---------- */

.ihr-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ihr-hamburger {
	position: fixed;
	top: .5rem;
	left: 1rem;
	z-index: 1001;
	width: 4.5rem;
	cursor: pointer;
	transition: left .5s, transform .5s;
}

.ihr-hamburger img { display: block; width: 100%; height: auto; }
.ihr-hamburger:hover { filter: brightness(120%); }

.ihr-toggle:focus-visible + .ihr-hamburger { outline: 2px solid var(--ihr-green-dark); outline-offset: 2px; }

.ihr-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: var(--ihr-sidebar);
	height: 98%;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--ihr-green);
	clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
	transition: transform .5s;
}

.ihr-logo {
	display: block;
	background: #fff;
	text-align: center;
	padding: .25rem 0 .5rem;
}

.ihr-logo img { width: 65%; height: auto; }

.ihr-nav ul {
	list-style: none;
	margin: 0;
	padding: 2% 0 2rem 6%;
	max-width: 80%;
}

.ihr-nav li {
	border-bottom: 1px solid var(--ihr-line);
	margin-top: 2vh;
	line-height: 2.6vh;
	font-size: max(1rem, 2.2vh);
}

.ihr-nav a { color: #fff; text-decoration: none; }
.ihr-nav a:hover,
.ihr-nav .current-menu-item > a { color: #afc; }

/* Unterseiten: Leiste eingeklappt, Pfeil klappt sie aus */
.ihr-layout-page .ihr-sidebar { transform: translateX(-30rem); }
.ihr-layout-page .ihr-toggle:checked ~ .ihr-sidebar { transform: none; }
.ihr-layout-page .ihr-toggle:checked + .ihr-hamburger { left: 30rem; transform: scaleX(-1); }

/* Startseite: Leiste immer offen, kein Pfeil */
.ihr-layout-start .ihr-hamburger { display: none; }

/* ---------- Startseite: Bild (gerade Kanten, Entscheidung User 2026-10-16) ---------- */

.ihr-hero {
	position: fixed;
	top: 136px;
	left: calc(var(--ihr-sidebar) + 1rem);
	width: 68vw;
	margin: 0;
}

/* wie im Original: Bereich 68 % des Fensters, Bild höchstens 1280 px breit und darin mittig */
.ihr-hero img {
	display: block;
	width: 100%;
	max-width: 1280px;
	height: auto;
	margin: 0 auto;
}

/* ---------- Inhalte ---------- */

/* Gliederung wie im Original: Punkt vor der Überschrift, Kreis vor dem Text */
.ihr-outline h3 { position: relative; padding-left: 40px; margin: 0 0 14px; }
.ihr-outline h3::before { content: "•"; position: absolute; left: 22px; }
.ihr-outline p { position: relative; padding-left: 80px; margin: 0 0 14px; }
.ihr-outline p::before { content: "◦"; position: absolute; left: 62px; }

/* Über mich: Bild 400 px, Text daneben */
.ihr-about { gap: 34px; }
.ihr-about > .wp-block-column:first-child { flex: 0 0 400px; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--ihr-green);
	border-radius: 14px;
	color: var(--ihr-green);
	background: transparent;
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 15px 34px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--ihr-green);
	color: #fff;
}

.ihr-contact-grid { gap: 1rem 2rem; margin: 34px 0 53px; }
.ihr-main .ihr-contact-grid h3 { margin: 0 0 27px; }
.ihr-main .ihr-contact-grid h3:last-child { margin-bottom: 0; }
.ihr-main hr { margin: 0 0 15px; }
.ihr-main hr + h2 { margin-top: 0; }
.ihr-main h2:has(+ .ihr-map) { margin-bottom: 17px; }
.ihr-contact-grid > .wp-block-column:first-child { flex: 0 0 9rem; }
.ihr-contact-grid h3 { margin: 0 0 1.3rem; }

.ihr-map img { border: 1px solid #ddd; }

.ihr-mobile-logo { display: none; }
.ihr-map figcaption { font-size: .8rem; color: #888; }

/* ---------- Mobil ---------- */

@media (max-width: 900px) {
	.ihr-main { padding: 6rem 1.25rem 3rem; }

	.ihr-topright { top: .9rem; right: 1rem; }
	.ihr-topright a { font-size: 1.1rem; line-height: 2rem; height: 2rem; }

	.ihr-hamburger { width: 3.2rem; }

	/* Leiste als Overlay, auch auf der Startseite einklappbar */
	.ihr-sidebar {
		width: min(85vw, 22rem);
		height: 100%;
		clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
		transform: translateX(-110%);
		box-shadow: none;
	}
	.ihr-layout-start .ihr-hamburger { display: block; }
	.ihr-toggle:checked ~ .ihr-sidebar { transform: none; }
	.ihr-layout-page .ihr-toggle:checked + .ihr-hamburger,
	.ihr-layout-start .ihr-toggle:checked + .ihr-hamburger { left: calc(min(85vw, 22rem) - 4rem); transform: scaleX(-1); }

	.ihr-nav li { font-size: 1.1rem; line-height: 1.6; margin-top: .9rem; }

	.ihr-layout-start .ihr-mobile-logo { display: block; text-align: center; margin: 4.5rem 0 0; }
	.ihr-mobile-logo img { width: 60%; max-width: 16rem; height: auto; }

	.ihr-main-start { padding-top: 1.5rem; }

	.ihr-hero {
		position: static;
		width: auto;
		margin: 0 0 2rem;
	}

	.ihr-outline h3 { padding-left: 1.2rem; }
	.ihr-outline h3::before { left: 0; }
	.ihr-outline p { padding-left: 1.2rem; }
	.ihr-outline p::before { left: .1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ihr-sidebar, .ihr-hamburger { transition: none; }
}