/*
Theme Name: mauly
Description: Schlankes Block-Theme für mauly.de (Nachbau des bisherigen Enfold-Layouts).
Version: 1.3.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: mauly
License: GPLv2 or later
*/

/* Kein Abstand zwischen Header, Inhalt und Footer */
.wp-site-blocks > * { margin-block-start: 0; }

/* Vollbreite Abschnitte stoßen direkt aneinander (wie bei Enfold) */
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }

/* Header: weiß, fixiert beim Scrollen, dezente Linie */
.mauly-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid #e1e1e1;
}
.admin-bar .mauly-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mauly-header { top: 46px; } }

.mauly-header .wp-block-navigation a {
	font-weight: 600;
	text-decoration: none;
}
.mauly-header .wp-block-navigation a:hover,
.mauly-header .wp-block-navigation .current-menu-item > a { color: #a80a0a; }

/* Dunkelblaue Abschnitte: alles weiß */
.has-navy-background-color :is(h1, h2, h3, h4, h5, h6, p, li, a:not(.wp-element-button)) { color: #fff; }

/* Buttons in dunkelblauen Abschnitten: weiß mit blauer Schrift, Hover rot */
.has-navy-background-color .wp-element-button:not(.has-background) { background-color: #fff; color: #001744; }
.has-navy-background-color .wp-element-button:not(.has-background):is(:hover, :focus) { background-color: #a80a0a; color: #fff; }

/* Icon-Kreise der drei Vorteile */
.mauly-icon {
	width: 76px;
	height: 76px;
	margin: 0 auto !important;
	border-radius: 50%;
	background: #0c2a63;
	color: #fff;
	font-size: 32px;
	line-height: 76px;
	text-align: center;
}

/* Titelbild immer volle Breite, ohne Abstand zum Header */
.mauly-hero {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	width: 100%;
	max-width: none !important;
}

/* Hero-Text mit halbtransparentem Rahmen, Schrift immer weiß */
.mauly-hero-caption {
	max-width: 640px;
	background: rgba(0, 23, 68, 0.6);
	padding: 1.5rem 2rem;
}
.mauly-hero-caption,
.mauly-hero-caption :is(h1, h2, h3, p) {
	color: #fff !important;
	margin: 0;
}
.mauly-hero-caption h2 { margin-bottom: 0.5rem; }
@media (max-width: 600px) {
	.mauly-hero { min-height: 340px !important; }
	.mauly-hero-caption { padding: 1rem 1.25rem; }
}

/* Inhalt der Startseite beginnt direkt unter dem Titelbild */
.wp-block-post-content > :first-child { margin-block-start: 0; }

/* Bilder wachsen leicht beim Überfahren (Enfold "hover grow") */
.wp-block-media-text__media,
.mauly-grow .wp-block-image { overflow: hidden; }
.wp-block-media-text__media img,
.mauly-grow .wp-block-image img { transition: transform 0.4s ease; }
.wp-block-media-text__media:hover img,
.mauly-grow .wp-block-image:hover img { transform: scale(1.05); }

/* Text neben Bildern bekommt mehr Luft */
.wp-block-media-text > .wp-block-media-text__content { padding: 2.5rem 8%; }

/* Listen mit Häkchen */
.mauly-checklist { list-style: none; padding-left: 0; }
.mauly-checklist li { position: relative; padding-left: 1.8em; margin-bottom: 0.35em; }
.mauly-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #a80a0a;
	font-weight: 700;
}

/* Footer-Leiste */
.mauly-footer a { color: #fff; text-decoration: none; }
.mauly-footer a:hover { text-decoration: underline; }

/* "Nach oben"-Knopf */
.mauly-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	background: rgba(0, 23, 68, 0.85);
	color: #fff !important;
	font-size: 22px;
	line-height: 44px;
	text-align: center;
	text-decoration: none !important;
	z-index: 99;
}
.mauly-top:hover { background: #a80a0a; }

/* Sprungmarken (Inhaltsverzeichnis) landen nicht unter dem fixierten Header */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 150px; }

/* Buttons mit etwas Abstand, auf dem Handy untereinander */
.wp-block-buttons { gap: 1rem; }
.wp-block-button__link { padding: 0.8em 1.6em; }

/* YouTube-Video mit Abstand */
.wp-block-embed { margin-block: 2rem; }

/* Titelbild "Tag der Büroklammer": höher und mit der Breite mitwachsend,
   damit die Köpfe nicht abgeschnitten werden */
.mauly-hero-tall { min-height: clamp(340px, 42vw, 760px) !important; }