/* base styles */

/* Hero: subtext max-width — block markup hat keinen direkten max-width param auf Paragraphen */
.hero-subtext {
	max-width: 600px;
	margin-inline: auto;
}

/* Hero: sticky header versetzt min-height 100vh um Header-Höhe */
.hero-section {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	box-sizing: border-box;
}

/* Sticky header z-index */
.site-header {
	z-index: 100;
}

/* Header-Navigation: Abstand zwischen Menüpunkten erzwingen
   (WP-Core überschreibt sonst den blockGap aus header.html) */
.site-header .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--lg);
}

/* Header Logo: Logo-Bild + Schriftzug als gemeinsamer Link */
.site-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--wp--preset--color--off-white);
}
.site-logo-img {
	width: 100px;
	height: 100px;
	object-fit: contain;
	flex-shrink: 0;
}
.site-logo-text {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* Karten gleiche Höhe pro Reihe, Link/Button klebt unten */
.leistung-card,
.pricing-card {
	height: 100%;
}

/* Feature-Liste: Standard-Bullets durch Lime-Checkmarks ersetzen */
.pricing-feature-list {
	list-style: none;
	padding-left: 0;
}

.pricing-feature-list li {
	padding-left: 1.5rem;
	position: relative;
	margin-bottom: 0.5rem;
}

.pricing-feature-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--lime);
	font-weight: 700;
}

/* Footer: Lime-Hover auf alle Links */
.site-footer a:hover {
	color: var(--wp--preset--color--lime);
	transition: color 0.15s ease;
}

/* Logo-Wall */
.logo-wall {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}

.logo-item {
	border: 1px solid var(--wp--preset--color--gray);
	width: 120px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--gray);
	font-size: 0.8rem;
}

@media (max-width: 768px) {
	.logo-wall {
		gap: 1rem;
	}

	.logo-item {
		width: 90px;
		height: 45px;
	}
}

/* Trust-Bar: 2x2 Grid auf Mobile */
@media (max-width: 768px) {
	.trust-bar .wp-block-columns.is-not-stacked-on-mobile {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0 !important;
	}
	.trust-bar .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex: initial !important;
		width: auto !important;
	}
	/* Im 2x2: Item 2 (rechts oben) hat keinen rechten Nachbarn */
	.trust-bar .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column:nth-child(2) {
		border-right: none !important;
	}
}

/* Hero-Headings: <br>-Tags auf Mobile ausblenden */
@media (max-width: 768px) {
	.has-home-hero-font-size br,
	.has-page-hero-font-size br {
		display: none;
	}
}

/* Kontakt-Info-Items: Zahl-Spalte gegen Shrink sichern */
.kontakt-info-item > p:first-child {
	min-width: 3rem;
	flex-shrink: 0;
	white-space: nowrap;
}

/* Featured Post Card */
.featured-post-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.featured-post-card figure {
	margin: 0;
	height: 100%;
}

.featured-post-card figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Blog Grid */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.blog-card {
	height: 100%;
}

@media (max-width: 768px) {
	.featured-post-card {
		grid-template-columns: 1fr;
	}

	.blog-grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------
   Mobile Nav Overlay (WP Core overlayMenu:"mobile", greift ab ≤600px)
------------------------------------------------------- */

/* Items: //-Lime-Prefix + off-white Text + Lead-Size */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--off-white);
	font-size: var(--wp--preset--font-size--lead);
	transition: color 0.15s ease;
	display: block;
}

.wp-block-navigation__responsive-container .wp-block-navigation-item__content::before {
	content: "// ";
	color: var(--wp--preset--color--lime);
	font-family: monospace;
	font-weight: 400;
}

/* Hover nur auf Geräten mit echtem Hover (kein sticky-hover auf Touch) */
@media (hover: hover) {
	.wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--lime);
	}
}

/* Touch-Feedback: kurzer Lime-Flash beim Tap */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:active {
	color: var(--wp--preset--color--lime);
}

/* Aktiver Menu-Item-State (current page) */
.wp-block-navigation__responsive-container .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--lime);
}

/* Item-Liste: Spacing + linksbündig */
.wp-block-navigation__responsive-container .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--md);
	padding: 2rem;
	align-items: flex-start;
}

/* Slide-In + Slide-Out (Strategie B: override WP Core display:none)
   Auf ≤600px scopen — WP Core nutzt denselben Container auf Desktop */
@media (max-width: 600px) {
	.wp-block-navigation__responsive-container {
		display: flex !important;
		transform: translateX(100%);
		visibility: hidden;
		pointer-events: none;
		transition:
			transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
			visibility 0s linear 0.3s;
	}

	.wp-block-navigation__responsive-container.is-menu-open {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		transition:
			transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
			visibility 0s linear 0s;
	}
}

/* -------------------------------------------------------
   Header CTA Button — Mobile
   Inline-Padding auf .wp-block-button__link via !important überschreiben
------------------------------------------------------- */
@media (max-width: 600px) {
	.site-header .wp-block-button__link {
		padding-left: 0.65rem !important;
		padding-right: 0.65rem !important;
	}
}

/* -------------------------------------------------------
   Site Header — Mobile-Padding
   768px: konsistent mit anderen Mobile-Patches (Trust-Bar, Hero-<br>)
   Inline-Padding auf <header> via !important überschreiben
------------------------------------------------------- */
@media (max-width: 768px) {
	.site-header {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}