/*
Theme Name: geoDiscovery Tours
Theme URI: https://geodiscoverytours.com
Author: Marcus Kober
Description: Das Theme für geoDiscovery Tours
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.9.21
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: geodiscoverytours-theme
Tags: block-theme, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, threaded-comments, translation-ready, wide-blocks
*/

/* ================================================
   Header Styles - Ergänzungen zu theme.json
   ================================================ */

/* Sticky Header - exakt wie im Dummy */
.site-header {
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

/* Top Bar - exakt wie im Dummy: padding: var(--space-xs) 0 */
.header-top {
	font-size: 0.85rem;
	min-height: 0 !important;
	margin-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.header-top .wp-block-cover__inner-container {
	padding: 0 !important;
	width: 100%;
	margin: 0 !important;
}

/* Entferne WordPress-Spacing bei constrained layout */
.header-top.wp-block-cover.alignfull:where(.has-global-padding) > :where(.wp-block-cover__inner-container) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Entferne margin-block-end vom WordPress is-layout-flow */
.site-header > .wp-block-cover.header-top {
	margin-block-end: 0 !important;
}

/* Main Header Group - kein margin-top nach Top-Bar */
.site-header > .wp-block-group:not(.header-top) {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* Top Bar - Links in weißer Farbe, exakt wie im Dummy */
.header-top a {
	color: var(--wp--preset--color--white) !important;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding: 4px 12px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.15);
	transition: all 0.3s ease;
	font-weight: 500;
}

.header-top a:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* Scrolled State - Top-Bar verschwindet */
.site-header.scrolled .header-top {
	display: none;
}

/* Scrolled State - Logo kleiner */
.site-header.scrolled .wp-block-site-logo img {
	height: 50px !important;
}

/* Navigation Styles */
.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--preset--spacing--xl);
}

/* Mobile-Overlay (Punkt 8 Feedback Mai 2026): Weiß auf Blau invertiert -
   Items als zentrierte Kästchen, blaue Schrift. Block-Attribute greifen
   trotz Site-Editor-Anpassung nicht durch, daher gezieltes CSS-Override.
   !important nötig, weil Block-Inline-Styles den Selektor schlagen. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--primary-blue) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--xs);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--light-gray);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item button {
	color: var(--wp--preset--color--primary-blue) !important;
	font-weight: 500;
	/* Mobile-Hamburger-Overlay: an Live-Niveau (~18 px) angeglichen, vorher
	   hat die Mobile-Nav den kompakten Desktop-Wert (14 px) geerbt.
	   B13 Mai 2026: weiter erhöht auf 1.25rem (20 px) auf Wunsch der Kundin.
	   !important nötig, weil Block-Inline-Styles + WP-Block-Stylesheet sonst
	   gewinnen. */
	font-size: 1.25rem !important;
	width: 100%;
	display: flex;
	justify-content: center;
	text-align: center;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--green) !important;
	background: var(--wp--preset--color--off-white);
}

/* Submenu im Mobile-Overlay: ebenfalls weiß und kompakter */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 1px dashed var(--wp--preset--color--light-gray);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
	font-size: 1rem !important;
	color: var(--wp--preset--color--primary-blue) !important;
}

/* Open-Button Icon-Farbe: blau, damit auf weißer Top-Bar sichtbar */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	color: var(--wp--preset--color--primary-blue);
}

.wp-block-navigation-item a {
	font-weight: 500;
	color: var(--wp--preset--color--dark-gray);
	transition: color 0.3s ease;
}

.wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--green) !important;
}

/* Submenu - Desktop Styling wie im Dummy */
.wp-block-navigation__submenu-container {
	border-radius: 0.5rem !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
	border: 1px solid var(--wp--preset--color--light-gray) !important;
	padding: 4px 0 !important;
	min-width: 220px;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--light-gray);
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
	border-bottom: none;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item a {
	padding: 0.75rem var(--wp--preset--spacing--lg);
	display: block;
	white-space: nowrap;
	transition: all 0.3s ease;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
	background: linear-gradient(90deg, var(--wp--preset--color--off-white) 0%, transparent 100%);
	padding-left: calc(var(--wp--preset--spacing--lg) + 8px);
}

/* Search Block Styles - ohne Button, ohne sichtbaren Border, mit Expand-Animation */
.wp-block-search {
	position: relative;
}

.wp-block-search__inside-wrapper {
	width: 200px !important;
	transition: width 0.3s ease;
}

.wp-block-search:focus-within .wp-block-search__inside-wrapper {
	width: 250px !important;
}

.wp-block-search__input {
	border: 1px solid transparent !important;
	background: var(--wp--preset--color--off-white) !important;
	padding: 0.5rem 1rem 0.5rem 2.5rem !important;
	font-size: 0.9rem !important;
	width: 100% !important;
	transition: all 0.3s ease;
	border-radius: 8px !important;
}

.wp-block-search__input:focus {
	outline: none !important;
	border-color: var(--wp--preset--color--green) !important;
	background: var(--wp--preset--color--white) !important;
}

/* Suchicon als Pseudo-Element */
.wp-block-search::before {
	content: "🔍";
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1rem;
	z-index: 1;
	pointer-events: none;
}

/* Button ausblenden (falls vorhanden) */
.wp-block-search__button {
	display: none !important;
}

/* Logo Größe mit Transition */
.wp-block-site-logo img {
	height: 100px;
	width: auto;
	transition: height 0.3s ease;
	border-radius: 0 !important; /* Fix: Logo-Ecken nicht abschneiden */
}

/* Utility: ab Tablet (≥ 35rem) sichtbar, sonst versteckt */
@media (max-width: 35rem) {
	.is-tablet-up {
		display: none !important;
	}
}

/* Mobile Responsive */
@media (max-width: 782px) {
	/* Suchfeld auf Mobile verstecken (in Navigation integriert) */
	.wp-block-search {
		display: none;
	}

	/* Logo kleiner auf Mobile (Höhe + max-width für aspect-ratio-bedingten Overhang) */
	.wp-block-site-logo img {
		height: 60px;
		max-height: 60px;
		width: auto;
	}

	/* Header-Mitte: Telefon-Stack enger packen.
	   - header-top-inner: Logo und Mitte bei Wrap dicht aneinander
	   - header-mitte: zwischen Telefon-Stack und Slogan kein extra Block-Gap
	   - telefon-whatsapp: WP setzt is-nowrap, computed ist trotzdem wrap (wegen
	     enger Mobile-Breite). row-gap auf 0 verhindert Doppel-Lücke zwischen
	     „Rufen Sie uns an" und Telefonnummer. */
	.header-top-inner {
		gap: var(--wp--preset--spacing--xs) !important;
	}

	.header-mitte {
		row-gap: 0 !important;
	}

	.telefon-whatsapp {
		row-gap: 0 !important;
		column-gap: var(--wp--preset--spacing--sm);
		line-height: 1.2;
	}

	.slogan-text {
		line-height: 1.3;
		margin: 0;
	}
}

@media (min-width: 783px) {
	/* Desktop: Suchfeld sichtbar */
	.wp-block-search {
		display: block;
	}
}

/* ================================================
   Footer Styles - Ergänzungen zu theme.json
   ================================================ */

/* Footer Überschriften - angepasste Abstände */
.wp-block-cover h4 {
	margin-bottom: var(--wp--preset--spacing--md);
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 0;
}

/* Footer Listen - keine Bullet Points */
.wp-block-list.is-style-plain {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

.wp-block-list.is-style-plain li {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Footer Paragraphen */
.wp-block-cover p {
	line-height: 1.6;
	margin-bottom: 0;
}

/* Social Icons - korrekte Farben und runder Hintergrund */
.wp-block-social-links .wp-block-social-link {
	transition: all 0.3s ease;
}

.wp-block-social-links .wp-block-social-link a {
	border-radius: 50% !important;
	padding: 0.5em !important;
}

.wp-block-social-links .wp-block-social-link:hover a {
	background-color: var(--wp--preset--color--green) !important;
}

.wp-block-social-links .wp-block-social-link:hover {
	transform: translateY(-3px);
}

/* Mobile Responsiveness für Footer */
@media (max-width: 47.9375rem) {
	/* Cover Block handles responsive background automatically */
}

@media (max-width: 29.9375rem) {
	.wp-block-columns > .wp-block-column {
		margin-bottom: var(--wp--preset--spacing--lg);
	}

	.wp-block-columns > .wp-block-column:last-child {
		margin-bottom: 0;
	}
}

/* ================================================
   Tour Downloads
   ================================================ */

.wp-block-geodiscovery-tour-downloads {
	margin-bottom: var(--wp--preset--spacing--xl);
}

.downloads-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}

.download-item a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--off-white);
	border-radius: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--dark-gray);
	transition: all 0.2s ease;
	border: 1px solid var(--wp--preset--color--light-gray);
}

.download-item a:hover {
	background: var(--wp--preset--color--light-green-bg);
	border-color: var(--wp--preset--color--green);
	transform: translateX(4px);
}

.download-icon {
	flex-shrink: 0;
	color: var(--wp--preset--color--primary-blue);
}

.download-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.download-title {
	flex: 1;
	font-weight: 500;
}

.download-meta {
	color: var(--wp--preset--color--black);
	font-size: 0.875rem;
}

.download-action {
	color: var(--wp--preset--color--green);
	font-weight: bold;
	font-size: 1.25rem;
}

/* ================================================
   Tour Extensions Overview
   ================================================ */

.tour-extensions-overview {
	margin-top: var(--wp--preset--spacing--xl);
	padding-top: var(--wp--preset--spacing--xl);
	border-top: 1px solid var(--wp--preset--color--light-gray);
}

.tour-extensions-overview__header {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--lg);
}

.tour-extensions-overview__header h2 {
	color: var(--wp--preset--color--primary-blue);
	font-family: var(--wp--preset--font-family--headings);
	margin: 0;
}

/* Grid für Extensions: Cards müssen gleiche Höhe haben */
.tour-extensions-overview .tour-grid {
	align-items: stretch;
}

.tour-extensions-overview .tour-grid > .tour-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.tour-extensions-overview .tour-grid > .tour-card .tour-card-link {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tour-extensions-overview .tour-grid > .tour-card .tour-card-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tour-extensions-overview .tour-grid > .tour-card .tour-card-footer {
	margin-top: auto;
}

/* ================================================
   Tour Map Image Block
   ================================================ */

.wp-block-geodiscovery-tour-map-image h2 {
	margin-bottom: var(--wp--preset--spacing--md);
}

.tour-map-image-wrapper {
	text-align: center;
}

.tour-map-image-item {
	display: inline-block;
	cursor: zoom-in;
}

.tour-map-image-item img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
	.tour-map-image-item:hover img {
		transform: scale(1.02);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	}
}

.tour-map-caption {
	margin-top: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--black);
	font-style: italic;
}

/* ================================================
   Travel-Companion-Cards (Archive: Mitreisende gesucht)
   ================================================ */

/* Grid: WordPress Query-Loop mit type=grid rendert ein <ul>-Wrapper.
   Das Spalten-Verhalten kommt aus minimumColumnWidth im Block-Markup;
   hier nur die Item-Höhe und das Listen-Reset. */
.travel-companion-grid.wp-block-post-template {
	list-style: none;
	padding: 0;
}

.travel-companion-grid.wp-block-post-template > li {
	display: flex;
	height: 100%;
}

.travel-companion-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--lg);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transition: transform var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base);
}

.travel-companion-card-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.travel-companion-card-image-wrapper {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--light-gray);
}

.travel-companion-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.travel-companion-card-no-image {
	width: 100%;
	height: 100%;
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--light-blue-bg) 0%,
		var(--wp--preset--color--light-green-bg) 100%
	);
}

.travel-companion-card-content {
	padding: var(--wp--preset--spacing--md);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--wp--preset--spacing--sm);
}

.travel-companion-card-title {
	margin: 0;
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary-blue);
	/* Lange deutsche Wörter wie „Kilimandscharo" sauber umbrechen */
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

.travel-companion-card-date {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dark-gray);
	font-weight: 600;
}

.travel-companion-card-excerpt {
	margin: 0;
	color: var(--wp--preset--color--black);
	flex: 1;
}

.travel-companion-card-footer {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--sm);
}

.travel-companion-card-button {
	display: inline-block;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--sm);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	transition: background var(--wp--custom--transition--base);
}

@media (hover: hover) and (pointer: fine) {
	.travel-companion-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	}

	.travel-companion-card:hover .travel-companion-card-button {
		background: var(--wp--preset--color--green-hover);
	}
}

@media (hover: none) {
	.travel-companion-card:active {
		transform: scale(0.98);
	}
}

/* ================================================
   Hero-Headline Mobile (Befund #6 / Lauf 1)
   ================================================
   HomepageHero-Shortcode rendert die H1 mit Inline-`font-size:
   var(--wp--preset--font-size--xxx-large)` (Default). xxx-large hat
   `fluid.min: 2rem`, das bricht bei langen Headlines auf V1 in 6+
   Zeilen. Den globalen xxx-large-Slot verkleinern wäre Kollateral-
   schaden (alle h1 site-weit). Stattdessen nur die Hero-H1 auf Mobile
   reduzieren — `!important` nötig, weil Inline-Style sonst gewinnt. */
@media (max-width: 35rem) {
	.homepage-hero h1 {
		/* Mobile-Default auf Live-Niveau (~36 px). Wenn im Backend eine
		   Mobile-Schriftgröße gewählt ist, setzt HomepageHero die
		   Custom-Prop --hero-title-size-mobile am Inline-Style — der
		   Default-clamp greift dann nicht mehr. */
		font-size: var(--hero-title-size-mobile, clamp(2rem, 5vw + 1rem, 2.5rem)) !important;
		line-height: 1.2;
	}

	.homepage-hero p {
		font-size: var(--hero-subtitle-size-mobile, var(--wp--preset--font-size--medium)) !important;
		line-height: 1.4;
	}
}

/* Mobile-Override-Texte (Sekundärhebel #6):
   HomepageHero-Shortcode rendert bei gepflegtem Mobile-Override beide
   Varianten als Spans im selben H1/P. CSS regelt die Sichtbarkeit. */
.homepage-hero-title__mobile,
.homepage-hero-subtitle__mobile {
	display: none;
}

.homepage-hero-subtitle--mobile-only {
	display: none;
}

@media (max-width: 35rem) {
	.homepage-hero-title__desktop,
	.homepage-hero-subtitle__desktop {
		display: none;
	}

	.homepage-hero-title__mobile,
	.homepage-hero-subtitle__mobile,
	.homepage-hero-subtitle--mobile-only {
		display: inline;
	}
}

/* ================================================
   Touch-Targets ≥ 44 × 44 px (Befund #9 / Lauf 1)
   ================================================
   iOS HIG / Material verlangen mindestens 44×44 px für Touch-Ziele.
   Bericht: WhatsApp-Icon 48×28, WPML-Flaggen 26×22, Top-Bar-Links
   23 px, Footer-Links 18 px.

   Nur auf Touch-Geräten aktiv (`hover: none` + `pointer: coarse`),
   damit Desktop-Maus-Layouts kompakt bleiben. Header-Top-Padding
   ist bewusst klein (Befund #3) — die Touch-Schwelle wird über
   `min-height` am Link selbst gelöst. */
@media (hover: none) and (pointer: coarse) {
	.header-top a,
	.wpml-ls-link,
	.wp-block-social-link a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Sprachflaggen: transparenter Inflater um die kleine Flagge.
	   WPML rendert <a class="wpml-ls-link"><img class="wpml-ls-flag">. */
	.wpml-ls-link {
		min-width: 44px;
		justify-content: center;
		padding: 0.625rem;
	}

	/* Footer-Social-Icons: ohne Mindestbreite werden die runden 44-px-Hoch-
	   Targets vertikal länglich („Eier") — der border-radius: 50% braucht
	   ein quadratisches Element, sonst bleibt es ein Oval. */
	.wp-block-social-link a {
		min-width: 44px;
		justify-content: center;
	}

	/* WhatsApp-Link in der Top-Bar: Pill-Padding ist 4px/12px (Befund
	   #3). Touch-Mode: vertikales Padding aufstocken, Mindestbreite 44. */
	.header-top .whatsapp-link a {
		min-width: 44px;
		justify-content: center;
		padding-block: 0.625rem;
	}
}