/*
Theme Name: Lorenio
Theme URI: https://loreniosystems.de
Author: Lorenio Systems
Author URI: https://loreniosystems.de
Description: Firmen-Theme für Lorenio Systems – Entwicklungsunternehmen für spezielle Portale und Kiosk-Systeme. Block-Theme mit dunkler Teal-Palette und Smaragd-Akzent, passend zur Produktmarke Innvilo.
Version: 1.0.4
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lorenio
Tags: block-patterns, full-site-editing, one-column, custom-colors
*/

/* Feinschliff, der über theme.json hinausgeht */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Karten */
.lorenio-card {
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(16, 32, 28, 0.08);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(16, 32, 28, 0.04), 0 8px 24px rgba(16, 32, 28, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lorenio-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(16, 32, 28, 0.05), 0 16px 40px rgba(16, 32, 28, 0.1);
}

/* Karten auf dunklem Grund */
.lorenio-card-dark {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
}

/* Eyebrow-Label über Überschriften */
.lorenio-eyebrow {
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
}

/* Buttons */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.is-style-outline .wp-block-button__link {
	border-width: 1.5px;
}

/* Navigation */
.wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

/* Nummern-Badges im Prozess */
.lorenio-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--dark);
	font-weight: 700;
}

/* Sanfter Verlauf im Hero */
.lorenio-hero {
	background:
		radial-gradient(1100px 500px at 85% -10%, rgba(44, 224, 167, 0.16), transparent 60%),
		radial-gradient(800px 420px at 5% 110%, rgba(14, 138, 109, 0.12), transparent 55%),
		var(--wp--preset--color--surface);
}

/* Dunkle Sektionen (Innvilo) */
.lorenio-dark {
	background:
		radial-gradient(900px 480px at 90% 0%, rgba(44, 224, 167, 0.12), transparent 55%),
		var(--wp--preset--color--dark);
}

/* Header oben fixieren */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 50;
}

/*
 * Wichtig: kein backdrop-filter auf dem Header! Er würde den Header zum
 * Containing Block für das position:fixed-Navigations-Overlay machen und
 * das mobile Menü auf Header-Höhe abschneiden.
 */
.lorenio-header {
	background-color: rgba(255, 255, 255, 0.97) !important;
}

/* Geöffnetes mobiles Menü immer über dem Sticky-Header */
.wp-block-navigation__responsive-container.is-menu-open {
	z-index: 100000;
	padding: 4.5rem 2rem 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.4rem;
	font-weight: 600;
}

/* Häkchen-Liste (Innvilo-Sektion) */
.lorenio-check-list {
	list-style: none;
	padding-left: 0;
}

.lorenio-check-list li {
	padding-left: 1.9rem;
	position: relative;
}

.lorenio-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--mint);
	font-weight: 700;
}

/* Logo im Header: leicht gerundet, feste Größe */
.wp-block-site-logo img {
	border-radius: 9px;
	display: block;
}

/*
 * Mobiler Header: Der CTA-Button passt neben Logo, Name und Hamburger
 * nicht in eine Zeile und ließe den Header umbrechen. Unterhalb der
 * Navigations-Breakpoint-Breite (781px, WordPress-Standard) wird er
 * ausgeblendet — der Header bleibt einzeilig: Marke links, Menü rechts.
 */
@media (max-width: 781px) {
	.lorenio-header-cta {
		display: none !important;
	}

	.lorenio-header .wp-block-site-logo img {
		width: 34px;
		height: 34px;
	}
}

/* Zugänglicher Fokusring */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}