/*
 Theme Name:     Private Hideaway
 Template:       Divi
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

/* Mobiles Menü als aufklappbares Akkordeon
------------------------------------------------------- */

/* Menü nimmt immer die volle Browserhöhe ein, unabhängig davon, wie viele
   Akkordeon-Gruppen gerade auf-/zugeklappt sind. min-height (statt height)
   wirkt als Untergrenze und setzt sich auch gegen von Divi per JS gesetzte
   Inline-Höhen durch. 100dvh berücksichtigt zusätzlich mobile Adressleisten. */
.et_mobile_menu,
#et_mobile_nav_menu,
#et_mobile_nav_menu .mobile_nav,
#mobile_menu_wrap {
	min-height: 100vh !important;
	min-height: 100dvh !important;
	box-sizing: border-box;
	overflow-y: auto;
}

/* display:none verhindert eine Transition (Sprung ohne Animation), deshalb
   wird das Untermenü stattdessen nur über max-height/opacity ein-/ausgeblendet */
.et_mobile_menu .sub-menu {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.25s ease;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Kein Eigen-Einzug der Untermenü-Zeilen, damit der Strich (siehe unten)
   bündig mit dem linken Rand der Hauptnavigationspunkte sitzt */
.et_mobile_menu .sub-menu > li {
	margin: 0;
	padding: 0;
}

/* max-height auf einen realistischen Wert begrenzt (statt z. B. 2000px) – sonst
   läuft die Öffnen/Schließen-Animation über den Großteil der Zeit "unsichtbar"
   weiter und wirkt ruckartig/zu schnell */
.et_mobile_menu .menu-item-has-children.et-accordion-open > .sub-menu {
	max-height: 500px;
	opacity: 1;
}

/* Toggle ist ein Geschwister-Element neben dem Link (li > a bleibt unverändert
   erhalten, damit die Schriftart aus den Theme-Einstellungen weiter greift).
   Positionierungs-Referenz ist das li. Feste Höhe (statt 100%) sorgt dafür,
   dass das Icon nicht mit dem aufgeklappten Untermenü nach unten wandert */
.et_mobile_menu .menu-item-has-children {
	position: relative;
}

.et_mobile_menu .mobile-accordion-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 54px; /* entspricht der Zeilenhöhe des Hauptgruppen-Links: 24px Schrift × 1.4 Zeilenhöhe + 10px Padding oben/unten */
	cursor: pointer;
}

/* Plus-/Minus-Zeichen statt Pfeil */
.et_mobile_menu .mobile-accordion-toggle:after {
	content: "+";
	font-family: inherit;
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
	color: #8a8a8a;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}

.et_mobile_menu .menu-item-has-children.et-accordion-open .mobile-accordion-toggle:after {
	content: "\2212"; /* Minuszeichen (−) */
}

/* Textgröße/Farbe der Hauptgruppen, z. B. "Property", "Architecture", "Interior" */
/* Schriftart bewusst NICHT gesetzt – die kommt aus den Theme-/Customizer-Einstellungen
   und soll mit den echten Überschriften identisch bleiben.
   Höher spezifischer Selektor (.menu-item-has-children > a statt > li > a) + !important,
   damit die Größe nicht von anderem CSS (z. B. Divi/Customizer) überschrieben wird */
.et_mobile_menu .menu-item-has-children > a {
	font-size: 24px !important;
	line-height: 1.4;
	font-weight: 400;
	color: #5a5a5a;
	padding: 10px 0;
}

/* Geöffnete Hauptgruppe dunkler hervorheben */
.et_mobile_menu .menu-item-has-children.et-accordion-open > a {
	color: #1a1a1a;
}

/* Textgrößen Untermenü-Einträge, z. B. "Projects", "Journal", "About" */
/* Alle Untermenü-Einträge bekommen denselben linken Freiraum, damit der Text
   (aktiv & inaktiv) bündig ausgerichtet bleibt und nur der Strich hineinragt */
.et_mobile_menu .sub-menu > li > a {
	font-size: 21px;
	font-weight: 400;
	color: #9a9a9a;
	padding: 6px 0 6px 22px;
	display: inline-block;
	position: relative;
}

/* Aktueller Menüpunkt (z. B. "Overview") fett, dunkel */
.et_mobile_menu .sub-menu > li.current-menu-item > a,
.et_mobile_menu .sub-menu > li.current_page_item > a,
.et_mobile_menu .sub-menu > li.current-menu-ancestor > a {
	color: #1a1a1a;
	font-weight: 600;
}

/* Strich erscheint nur beim aktiven Punkt, im reservierten Freiraum links */
.et_mobile_menu .sub-menu > li.current-menu-item > a:before,
.et_mobile_menu .sub-menu > li.current_page_item > a:before,
.et_mobile_menu .sub-menu > li.current-menu-ancestor > a:before {
	content: "\2212";
	position: absolute;
	left: 0;
	top: 6px;
	color: #b08d57;
}

/* CTA-Menüpunkt (Klasse "mobile_menu_cta", im WP-Menü vergeben) unten links
   fixiert, als umrandeter Button. !important überschreibt die sonst dort
   greifenden Standard-Menüpunkt-Styles (Größe/Schriftart der Hauptpunkte). */
.et_mobile_menu .mobile_menu_cta {
	position: fixed;
	left: 20px;
	bottom: 30px;
	z-index: 999999;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.et_mobile_menu .mobile_menu_cta > a {
	display: inline-block;
	padding: 16px 30px !important;
	border: 1px solid #b08d57;
	color: #6b5a3a !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-decoration: none;
	background: transparent;
}

/* "Projects" als aktiv hervorheben, wenn man auf einer Projekt-Detailseite ist
   (Klassen current-menu-parent/current-menu-ancestor werden per PHP-Filter
   gesetzt, siehe functions.php). Gilt für den Fall, dass "Projects" ein
   Top-Level-Punkt ist – sowohl Desktop als auch mobiles Akkordeon-Menü. */
#top-menu .current-menu-parent > a,
#top-menu .current-menu-ancestor > a,
.et-menu:not(.et_mobile_menu) .current-menu-parent > a,
.et-menu:not(.et_mobile_menu) .current-menu-ancestor > a {
	font-weight: 700 !important;
}

.et_mobile_menu > li.current-menu-parent > a,
.et_mobile_menu > li.current-menu-ancestor > a,
.et_mobile_menu .menu-item-has-children.current-menu-parent > a,
.et_mobile_menu .menu-item-has-children.current-menu-ancestor > a {
	color: #1a1a1a;
	font-weight: 600;
}

/* Toggle-Modul (.et_pb_toggle_title): Divi ändert die Textfarbe standardmäßig,
   sobald ein Toggle geöffnet ist (Klasse .et_pb_toggle_open wird gesetzt).
   "inherit" holt sich die Farbe vom Eltern-Element zurück, statt Divis eigener
   Override-Farbe zu folgen – dadurch bleibt die Farbe im offenen wie im
   geschlossenen Zustand gleich. */
.et_pb_toggle_open .et_pb_toggle_title {
	color: inherit !important;
}

/* Header-Navigations-Toggle (Klasse "header-nav-toggle" im Divi Builder am
   Toggle-Modul vergeben): statt Divis Standard-Höhen-Animation (vertikal)
   klappt der Inhalt jetzt in der Breite auf (horizontal, von links nach rechts).
   height:auto !important neutralisiert Divis eigene Höhen-Animation, display:flex
   + overflow:hidden + max-width-Transition erzeugt die horizontale Bewegung. */
.header-nav-toggle .et_pb_toggle_content {
	display: flex !important;
	align-items: center;
	overflow: hidden;
	max-width: 0;
	height: auto !important;
	white-space: nowrap;
	transition: max-width 0.45s ease;
}

/* max-content statt fixer Pixelzahl: passt sich automatisch an die tatsächliche
   Inhaltsbreite an (funktioniert unabhängig von Textlänge, Sprachumschaltung
   EN/DE, künftig hinzugefügten Menüpunkten etc.) – kein geratener Wert mehr,
   der bei Textänderungen erneut zu knapp werden könnte. */
.header-nav-toggle.et_pb_toggle_open .et_pb_toggle_content {
	max-width: max-content;
}

/* Unterhalb der Desktop-Breite (hier greift ohnehin das mobile Menü) die
   Breiten-Animation komplett deaktivieren statt sie zu erzwingen: normal
   umbrechen lassen, kein overflow:hidden/max-width mehr nötig. */
@media (max-width: 980px) {
	.header-nav-toggle .et_pb_toggle_content {
		max-width: none !important;
		overflow: visible;
		white-space: normal;
		flex-wrap: wrap;
		transition: none;
	}
}

/* "Link kopieren"-Button (Klasse "copy-link-btn", im Divi Builder vergeben):
   Tooltip-Bestätigung ("Link kopiert!") erscheint über dem Button, statt den
   Button-Text zu ersetzen. .copy-link-btn--has-tooltip sorgt per JS dafür,
   dass der Button als Positionierungs-Referenz für den Tooltip dient. */
.copy-link-btn--has-tooltip {
	position: relative;
}

.copy-link-tooltip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: #1a1a1a;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 999999;
}

/* Kleines Dreieck unter der Tooltip-Blase, zeigt auf den Button */
.copy-link-tooltip:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1a1a1a;
}

.copy-link-tooltip--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}


/* vioma-Buchungsstrecke: Label in der zusammengeklappten Schritt-Zusammenfassung
   wieder in IvyMode statt Browser-Standard. Immer Regular statt Bold/Light. */
[id^="vri-container-"] .vsc-item-collapsed-item-label,
[id^="vri-container-"] .vsc-head,
[id^="vri-container-"] .vsc-item-head {
	font-family: 'IvyMode', Georgia, 'Times New Roman', serif !important;
	font-weight: 400 !important;
}

/* vioma-Buchungsstrecke: nur Überschriften linksbündig, alles andere bleibt
   bei vioma's Standard-Ausrichtung. */
[id^="vri-container-"] .cst h1,
[id^="vri-container-"] .cst h2,
[id^="vri-container-"] .cst h3,
[id^="vri-container-"] .cst h4,
[id^="vri-container-"] .vsc-title,
[id^="vri-container-"] .vsc-item-title,
[id^="vri-container-"] .vsc-item-head-name,
[id^="vri-container-"] .vsc-name,
[id^="vri-container-"] .vsc-hotel-info-name {
	text-align: left !important;
}

/* Alle Stellen, an denen vioma's eigenes CSS IvyMode einsetzt, kommen mit
   Bold- oder Light-Schnitt daher — hier durchgehend auf Regular gestellt
   (Ausrichtung bleibt jeweils unangetastet). */
[id^="vri-container-"] .cst h1,
[id^="vri-container-"] .cst h2,
[id^="vri-container-"] .cst h3,
[id^="vri-container-"] .cst h4,
[id^="vri-container-"] .vsc-title,
[id^="vri-container-"] .vsc-item-title,
[id^="vri-container-"] .vsc-item-head-name,
[id^="vri-container-"] .vsc-name,
[id^="vri-container-"] .vsc-hotel-info-name,
[id^="vri-container-"] .vsc-share-layer-title,
[id^="vri-container-"] .vsc-item-calendar-info,
[id^="vri-container-"] .vdp-head-month,
[id^="vri-container-"] .vdp-head-year {
	font-weight: 400 !important;
}

/* Schritt "Date": Kalender (.vsc-item-calendar-left) und Info-Texte
   (.vsc-item-calendar-right) standen nebeneinander (float:left/right, von
   vioma über die generischen .vsc-left/.vsc-right gesetzt) — laut DOM-Check
   ist .vsc-clear hier ein Geschwister von .vsc-content, nicht dessen Kind,
   daher kann dessen Elternelement gefahrlos auf Flexbox umgestellt werden.
   Bewusst nur die Kombination mit den calendar-spezifischen Klassen
   angefasst, nicht die generischen .vsc-left/.vsc-right selbst. */
[id^="vri-container-"] .vsc-item-calendar > .vsc-body > .vsc-content.vsc-item-content {
	display: flex !important;
	flex-direction: column;
	gap: 32px;
}
[id^="vri-container-"] .vsc-item-calendar-left.vsc-left,
[id^="vri-container-"] .vsc-item-calendar-right.vsc-right {
	float: none !important;
	width: 100% !important;
}
[id^="vri-container-"] .vsc-item-calendar-right.vsc-right {
	padding-left: 0 !important;
}

/* vioma-Buchungsstrecke: Hintergrundfarbe der Metabar-Leiste entfernen. */
[id^="vri-container-"] .vsc-metabar-wrapper {
	background: transparent !important;
}

/* "Filter zurücksetzen"-Button: Textfarbe + Unterstreichung statt Standard-Button-Optik. */
[id^="vri-container-"] .vsc-button-reset {
	color: #15181d !important;
	text-decoration: underline !important;
}

/* vioma-Buchungsstrecke: maximale Breite des Inhalts auf 100% der verfügbaren
   Spalte, statt einer von vioma vorgegebenen schmaleren Breite. */
[id^="vri-container-"],
[id^="vri-container-"] .cst,
[id^="vri-container-"] .vsc-remote {
	max-width: 100% !important;
	width: 100% !important;
}


/* =============================================================================
   "Suchen & Buchen"-Suchwidget (.vri-* Klassen) — anderes vioma-Bauteil als
   die Schritt-für-Schritt-Buchungsstrecke (.vsc-*), auf anderen Seiten
   eingebettet. Das Formular trägt selbst die Klasse "vri-elements-vertical" —
   das deutet stark darauf hin, dass vioma intern auch eine horizontale
   Variante (z. B. "vri-elements-horizontal") kennt, vermutlich einstellbar
   im Widget/Shortcode selbst. Falls es dort eine Ausrichtungs-Option gibt,
   wäre das der sauberere Weg. Bis dahin hier per Flexbox erzwungen.
   ========================================================================== */
[id^="vri-container-"] .vri-elements-vertical {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 16px !important;
}
[id^="vri-container-"] .vri-title {
	flex: 1 1 100%;
	font-family: 'IvyMode', Georgia, 'Times New Roman', serif !important;
	font-weight: 400 !important;
	text-align: left !important;
}
/* flex-basis klein + min-width:0, damit die Felder bei Bedarf schrumpfen und
   die Buttons in derselben Zeile Platz haben, statt in eine zweite Zeile
   umzubrechen (nur der Titel oben soll umbrechen, siehe flex:1 1 100%). */
[id^="vri-container-"] .vri-widget-date-from,
[id^="vri-container-"] .vri-widget-date-to,
[id^="vri-container-"] .vri-widget-adults,
[id^="vri-container-"] .vri-widget-children {
	flex: 1 1 110px;
	min-width: 0;
}
[id^="vri-container-"] .vri-element-date input,
[id^="vri-container-"] .vri-element-select select {
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
/* Nur der äußere .vri-clear (direktes Kind des Formulars, umschließt die
   Buttons) wird zur Button-Reihe — der innere .vri-clear (reiner
   Clearfix-Spacer, siehe DOM) bleibt unangetastet. flex-shrink erlaubt, damit
   die Buttons notfalls auch selbst etwas nachgeben, aber ohne Umbruch (siehe
   white-space:nowrap). */
[id^="vri-container-"] .vri-elements-vertical > .vri-clear {
	display: flex !important;
	align-items: center;
	gap: 12px;
	flex: 0 1 auto;
}
[id^="vri-container-"] .vri-elements-vertical > .vri-clear .vri-button {
	white-space: nowrap;
}

/* Kontrastproblem: "Buchen" war helles Gold auf goldenem Grund kaum lesbar.
   Nur background-color (nicht background) angefasst, falls vioma dort per
   background-image noch einen Pfeil/Icon einblendet. */
[id^="vri-container-"] .vri-button-next.vri-right {
	background-color: #b1a16c !important;
	color: #ffffff !important;
	border-color: #b1a16c !important;
}
[id^="vri-container-"] .vri-button-secondary {
	background-color: #15181d !important;
	color: #ffffff !important;
	border-color: #15181d !important;
}
[id^="vri-container-"] .vri-element-date::before {
	background-color: #b1a16c !important;
}