/*
Theme Name: MKHL Media
Theme URI: https://mkhl-media.de/
Author: MKHL Media
Author URI: https://mkhl-media.de/
Description: Individuelles Dark-Block-Theme fuer die Kommunikationsagentur MKHL Media - "Context Driven Communication". Edel-modernes Design mit eigener Typografie (Bricolage Grotesque + Inter), Balken-Signatur aus dem Logo, Projekt-Showcase und dezenter Bewegung.
Version: 0.11.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mkhl-media
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, wide-blocks, dark-mode, blog, portfolio
*/

/* =========================================================
   MKHL Media - Feinschliff (Grossteil kommt aus theme.json)
   ========================================================= */

html { scroll-behavior: smooth; }

.mkhl-logo img { height: auto; display: block; }

/* --- Heller Header: dunkle Nav, Magenta-Hover, dezenter Blur --- */
.mkhl-header { backdrop-filter: saturate(1.1) blur(6px); }
.wp-block-navigation a { transition: color .18s ease; }
.wp-block-navigation a:hover { color: #c4157c; }

/* --- Eyebrow-Label (Signatur-Kleinschrift) --- */
.mkhl-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: .8rem;
	font-weight: 700;
	color: #f27ac0;
}

/* --- Balken-Signatur (aus dem Logo abgeleitet) --- */
.mkhl-bars { display: flex; flex-direction: column; gap: 6px; width: max-content; }
.mkhl-bars span { height: 6px; border-radius: 3px; display: block; }

/* --- Karten: Hover-Lift + Akzent-Glow --- */
.mkhl-card {
	transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
	will-change: transform;
}
.mkhl-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(229,57,155,.35);
}

/* --- Projekt-Karten: Bild-Zoom + Overlay --- */
.mkhl-project { position: relative; overflow: hidden; border-radius: 12px; display: block; }
.mkhl-project img { transition: transform .5s cubic-bezier(.2,.7,.3,1); width: 100%; height: 100%; object-fit: cover; }
.mkhl-project:hover img { transform: scale(1.06); }
.mkhl-project .mkhl-project__meta {
	position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.5rem;
	background: linear-gradient(to top, rgba(10,14,26,.92), rgba(10,14,26,0));
}

/* --- Kunden-/Marken-Leiste (Platzhalter-Wortmarken) --- */
.mkhl-logos { display: flex; flex-wrap: wrap; gap: 2.5rem 3rem; align-items: center; justify-content: center; }
.mkhl-logos span {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; font-size: 1.35rem; letter-spacing: .04em;
	color: #5f6b8a; opacity: .8; transition: color .2s ease, opacity .2s ease;
}
.mkhl-logos span:hover { color: #aab4d0; opacity: 1; }

/* --- Scroll-Reveal --- */
.mkhl-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.mkhl-reveal.is-visible { opacity: 1; transform: none; }

/* --- Kennzahlen --- */
.mkhl-stat { font-variant-numeric: tabular-nums; }

/* --- Tastatur-Fokus --- */
:where(a, button, .wp-block-button__link, input):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* --- Reduzierte Bewegung respektieren --- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mkhl-reveal { opacity: 1; transform: none; transition: none; }
	.mkhl-card, .mkhl-project img { transition: none; }
	.mkhl-card:hover { transform: none; }
	.mkhl-project:hover img { transform: none; }
}

/* =========================================================
   Marken-Bilder (v0.4) - als CSS-Hintergruende (keine Editor-Warnungen)
   ========================================================= */

/* Hero: Eiswuerfel-Motiv, dunkel ueberlagert (Text bleibt lesbar) */
.mkhl-hero-bg {
	background-image:
		linear-gradient(100deg, rgba(10,14,26,.94) 0%, rgba(10,14,26,.86) 42%, rgba(20,29,56,.55) 100%),
		url('assets/images/hero-ice.jpg');
	background-size: cover;
	background-position: center;
}

/* Kontakt/CTA: Foto mit Magenta-Violett-Verlauf ueberlagert */
.mkhl-cta-bg {
	background-image:
		linear-gradient(120deg, rgba(229,57,155,.82) 0%, rgba(124,92,255,.80) 100%),
		url('assets/images/cta-contact.jpg');
	background-size: cover;
	background-position: center;
}

/* =========================================================
   v0.5 - Kennzahlen zentriert
   ========================================================= */
.wp-block-group.has-surface-background-color { text-align: center; }
.wp-block-group.has-surface-background-color .wp-block-columns { justify-content: center; }


/* =========================================================
   v0.7 - "Unsere Haltung" zentriert + Header-Navigation lesbar
   ========================================================= */

/* Abschnitt "Unsere Haltung" zentrieren */
.wp-block-group.has-depth-gradient-background { text-align: center; }

/* Header-Navigation: dunkel und gut lesbar auf weissem Header */
.mkhl-header .wp-block-navigation a,
.mkhl-header .wp-block-navigation .wp-block-navigation-item__content {
	color: #14203a !important;
	font-weight: 600;
}
.mkhl-header .wp-block-navigation a:hover,
.mkhl-header .wp-block-navigation a:focus {
	color: #c4157c !important;
}

/* =========================================================
   v0.8 - Hero zentriert + schoenerer Footer
   ========================================================= */

/* Hero-Inhalt zentrieren */
.mkhl-hero-bg { text-align: center; }
.mkhl-hero-bg .wp-block-buttons { justify-content: center; }
.mkhl-hero-bg .mkhl-bars { margin-left: auto; margin-right: auto; }

/* Footer-Navigation: ohne Punkte, dezent, klarer Hover */
.mkhl-footer-nav { list-style: none; margin: 0; padding: 0; }
.mkhl-footer-nav li { margin: 0 0 .6rem; }
.mkhl-footer-nav a { color: #97a3c0; text-decoration: none; transition: color .18s ease; }
.mkhl-footer-nav a:hover { color: #ffffff; }

/* Rechtszeile im Footer */
.mkhl-footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; justify-content: space-between; }
.mkhl-footer-legal a { color: #97a3c0; text-decoration: none; transition: color .18s ease; }
.mkhl-footer-legal a:hover { color: #ffffff; }

/* =========================================================
   v0.9 - Marken-Leiste ausblenden + Abschnitts-Ueberschriften/KPIs zentrieren
   ========================================================= */

/* Marken-/Kundenleiste entfernen (ausblenden) */
.mkhl-reveal:has(.mkhl-logos) { display: none; }

/* Abschnitts-Ueberschriften zentrieren: Eyebrow + zugehoerige Ueberschrift.
   Spalten-Layouts ("Eigene Medien", "Intro") bleiben linksbuendig, da deren
   Eyebrow in einer .wp-block-column statt direkt in einer .wp-block-group liegt. */
.wp-block-group > .mkhl-eyebrow { text-align: center; }
.wp-block-group > .mkhl-eyebrow ~ .wp-block-heading { text-align: center; }

/* =========================================================
   v0.9.1 - KPI-Zahlen + Labels sicher zentrieren
   ========================================================= */
.wp-block-group:has(> .mkhl-stat) { text-align: center; }
.mkhl-stat { text-align: center; }
.mkhl-stat + p { text-align: center; }

/* =========================================================
   v0.10 - KPIs erzwungen zentrieren + Hero-Zweitbutton entfernen
   ========================================================= */

/* Gesamte Kennzahlen-Sektion zentrieren (ueberschreibt Editor-Ausrichtungen) */
.wp-block-group.has-surface-background-color * { text-align: center !important; }
.mkhl-stat, .mkhl-stat + p { text-align: center !important; }

/* Hero: zweiten Button ("Projekte ansehen") ausblenden */
.mkhl-hero-bg .wp-block-button.is-style-outline { display: none; }

/* =========================================================
   v0.10.1 - Die drei KPI-Bloecke als Gruppe mittig setzen
   ========================================================= */
.wp-block-group:has(> .wp-block-group > .mkhl-stat) {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}
.wp-block-group:has(> .wp-block-group > .mkhl-stat) > .wp-block-group {
	flex: 0 1 15rem;
}

/* =========================================================
   v0.11 - Eigener Header + robuste Mobile-Navigation (KZVN-Stil)
   ========================================================= */
.mkhl-nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mkhl-header {
	position: sticky; top: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	background: #ffffff;
	border-bottom: 1px solid #e6e8ef;
	padding-top: 0.85rem; padding-bottom: 0.85rem;
	padding-inline: max(1.5rem, calc((100% - 1240px) / 2));
}
.mkhl-header .mkhl-logo { display: inline-flex; line-height: 0; }
.mkhl-header .mkhl-logo img { width: 188px; height: auto; display: block; }

.mkhl-desktop-nav { display: flex; align-items: center; gap: 1.6rem; }
.mkhl-desktop-nav a { color: #14203a; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: color .18s ease; }
.mkhl-desktop-nav a:hover { color: #c4157c; }
.mkhl-desktop-nav a.mkhl-cta { background: #e5399b; color: #ffffff; padding: 0.55rem 1.15rem; border-radius: 6px; }
.mkhl-desktop-nav a.mkhl-cta:hover { background: #c4157c; color: #ffffff; }

.mkhl-burger { display: none; }
.mkhl-mobile-nav { display: none; }

/* ---- Mobil ---- */
@media (max-width: 860px) {
	.mkhl-header .mkhl-logo img { width: 150px; }
	.mkhl-desktop-nav { display: none; }

	.mkhl-burger {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
		width: 46px; height: 46px; padding: 9px; cursor: pointer; flex: none;
	}
	.mkhl-burger span { display: block; height: 3px; border-radius: 2px; background: #14203a; }

	.mkhl-mobile-nav {
		position: fixed; inset: 0; z-index: 2000;
		display: flex; flex-direction: column;
		background: #ffffff;
		padding: 4.75rem 0 2rem;
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .28s ease, visibility .28s ease;
	}
	.mkhl-nav-toggle:checked ~ .mkhl-mobile-nav { transform: none; visibility: visible; }

	.mkhl-mobile-close {
		position: absolute; top: 0.9rem; right: 1.1rem;
		width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
		font-size: 2.6rem; line-height: 1; color: #14203a; cursor: pointer;
	}
	.mkhl-mobile-links { display: flex; flex-direction: column; }
	.mkhl-mobile-links a {
		color: #14203a; font-size: 1.5rem; font-weight: 700; text-decoration: none;
		padding: 1.15rem 1.5rem; border-top: 1px solid #edeff4;
	}
	.mkhl-mobile-links a:last-child { border-bottom: 1px solid #edeff4; }
	.mkhl-mobile-links a:active, .mkhl-mobile-links a:hover { background: #fdf2f8; color: #c4157c; }
	.mkhl-mobile-links a.mkhl-mobile-cta { color: #c4157c; }
}