/*
Theme Name: Boon-Raksa
Theme URI: https://thaimassage-boonraksa.de
Description: Child Theme für Sawasdee
Author: GLa
Template: sawasdee
Version: 1.0.13
*/

/*-----------------------------------------------------------------------
 * FAQ-Section
 ------------------------------------------------------------------------*/
/* Initialer Zustand: Items ab dem Index (n+4) verstecken */
.faq-dynamic-section.is-truncated .faq-item:nth-child(n + 7) {
	display: none;
	opacity: 0;
}

/* Hilfsklasse für flüssiges Einblenden */
.faq-item {
	transition: opacity 0.4s ease-in-out; /* cubic-bezier(0.4, 0, 0.2, 1); */
}

.faq-item.is-visible {
	display: block !important;
	opacity: 1;
}

/* Initiales Verstecken des Show Less Buttons (da Gutenberg ihn sonst anzeigt) */
#faq-show-less {
	display: none;
}

/* Such-Button komplett deaktivieren */
.faq-section .wp-block-search__button {
	display: none !important;
	pointer-events: none !important;
}

/* Paragraph für keine Ergebnisse initial verstecken */
#faq-search-no-results {
	display: none;
}

/* Buttons ausblenden, wenn die Suche aktiv ist */
.search-active #faq-show-more,
.search-active #faq-show-less {
	display: none !important;
}

/* Search Container / Input */
.faq-search-container {
	border-bottom: 1px solid #000 !important;
}
.faq-search-input .wp-block-search__input {
	border: none !important;
}

/*-----------------------------------------------------------------------
 * Slide Title 'Boon-Raksa' am Hero Homepage hervorheben (Glow Effekt)
 ------------------------------------------------------------------------*/
.wp-block-gla-heroslider .slide-list .slide-item.slide-1 .slide-title {
	/* Ein tiefes, warmes Dunkelbraun (Erde) */
	color: #4a3728 !important;

	/* Outline: Ein weiches Ocker #d9b382 statt hartem Weiß */
	text-shadow:
		-1px -1px 0 #dfc8a9,
		1px -1px 0 #dfc8a9,
		-1px 1px 0 #dfc8a9,
		1px 1px 0 #dfc8a9;

	/* Filter (Glow-Effekt) */
	/* filter: drop-shadow(
		0px 0px 8px rgba(193, 149, 81, 0.5)
	) !important; */ /* golden Glow warm & hochwertig*/
	/* filter: drop-shadow(
		0px 0px 8px rgba(138, 154, 91, 0.5)
	) !important; */ /* sanftes Waldgrün */
	filter: drop-shadow(
		0px 0px 12px rgba(255, 255, 255, 0.8)
	) !important; /* nur weiches Licht*/
	/* filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3)) !important; */ /* dunkler Schatten für die Lesbarkeit*/
}

.wp-block-gla-heroslider .button-2:hover {
	border-color: #9a704a !important;
}

/*-----------------------------------------------------------------------
 * Dto. Section 11 Title 'Boon-Raksa' (Glow Effekt)
 ------------------------------------------------------------------------*/
#section-11-boonraksa {
	/* Ein tiefes, warmes Dunkelbraun (Erde) */
	color: #4a3728 !important;

	/* Outline: Ein weiches Ocker #d9b382 statt hartem Weiß */
	text-shadow:
		-1px -1px 0 #dfc8a9,
		1px -1px 0 #dfc8a9,
		-1px 1px 0 #dfc8a9,
		1px 1px 0 #dfc8a9;

	/* Filter (Glow-Effekt) */
	/* filter: drop-shadow(
		0px 0px 8px rgba(193, 149, 81, 0.5)
	) !important; */ /* golden Glow warm & hochwertig*/
	filter: drop-shadow(
		0px 0px 8px rgba(138, 154, 91, 0.5)
	) !important; /* sanftes Waldgrün */
	/* filter: drop-shadow(
		0px 0px 12px rgba(255, 255, 255, 0.8)
	) !important; */ /* nur weiches Licht*/
	/* filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3)) !important; */ /* dunkler Schatten für die Lesbarkeit*/
}

/*-----------------------------------------------------------------------
 * Korrektur rotierender Text
 ------------------------------------------------------------------------*/
.boon-raksa-section5-rotating-text {
	translate: -50% 0 !important;
}

/*-----------------------------------------------------------------------
 * Korrektur animated Title Balken
 ------------------------------------------------------------------------*/
.boon-raksa-intro-title .sawasdee-anim-titlebar {
	translate: 0 -50% !important;
}

/*-----------------------------------------------------------------------
 * Website Heading <h1> ausblenden
 ------------------------------------------------------------------------*/
#boon-raksa-heading {
	display: none;
}

/*-----------------------------------------------------------------------
 * Menu Anpassungen
 ------------------------------------------------------------------------*/
/* Nav Button (Hamburger) padding */
.boon-raksa-nav-button {
	padding: 8px 8px;
}
/* Navigationsleiste abrunden */
.boon-raksa-nav-main,
.boon-raksa-nav-reveal {
	border-radius: 9999px;
	padding: 5px 20px;
	overflow: hidden;
}
/* Das Logo im Reveal-Header austauschen (dark version) */
.header-reveal .custom-logo-link img {
	/* Versteckt das ursprüngliche helle Bild */
	display: none !important;
}
.header-reveal .custom-logo-link {
	/* Setzt das dunkle Logo als Hintergrundbild des Links */
	background-image: url('http://localhost:8888/wp-content/uploads/2026/02/logo-dark.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: left center;

	/* Wichtig: Breite und Höhe exakt wie beim Original definieren */
	display: inline-block;
	width: 200px;
	height: 45px;
}
/* Blendet das Navigations-Menü auf Mobilgeräten und Tablets komplett aus */
@media (max-width: 1200px) {
    .boon-raksa-nav-main,
    .boon-raksa-nav-reveal {
        display: none !important;
    }
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Heroslider Anpassungen (Blur & Overlay)
 ------------------------------------------------------------------------*/
/* 1. Das Overlay auf den Wrapper legen, damit es über dem Bild, aber unter dem Text liegt */
.boon-raksa-hero-blur .slide-item .slide-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.35); /* Etwas dunkler für bessere Lesbarkeit */
	z-index: 1;
	pointer-events: none; /* Klicks gehen durch auf den Slider */
}

/* 2. Den Blur-Effekt auf das Bild anwenden */
.boon-raksa-hero-blur .slide-item img {
	filter: blur(5px) brightness(0.9); /* Blur + leichte Abdunklung direkt am Bild */
	transform: scale(
		1.08
	); /* Etwas größer skalieren, um verwaschene Ränder zu schlucken */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 3. Den Content über das Overlay heben */
.boon-raksa-hero-blur .slide-content {
	position: relative;
	z-index: 10; /* Höher als das ::before (z-index: 1) */
	/* Optional: Ein leichter Schatten für den Text erhöht die Lesbarkeit extrem */
	text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.6);
}

/* 4. Sicherstellen, dass die Buttons klickbar bleiben */
.boon-raksa-hero-blur .slide-buttons {
	position: relative;
	z-index: 20;
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Speziell für Smartphones (max-width: 767px)
 ------------------------------------------------------------------------*/
@media (max-width: 767px) {
	/* Heroslider Slide-1 Author */
	.boon-raksa-hero-blur .slide-item.slide-1 .slide-author {
		font-size: 20px !important;
		letter-spacing: normal !important;
		line-height: normal !important;
	}
	/* Heroslider Slide-1 Title */
	.boon-raksa-hero-blur .slide-item.slide-1 .slide-title {
		font-size: 52px !important;
	}
	/* Heroslider Slide-2 Author */
	.boon-raksa-hero-blur .slide-item.slide-2 .slide-author {
		font-size: 12px !important;
		letter-spacing: normal !important;
		font-weight: 600;
	}
	/* Heroslider Slide-2 Title */
	.boon-raksa-hero-blur .slide-item.slide-2 .slide-title {
		font-size: 16px !important;
	}
	/* Heroslider Slide-2 Topic */
	.boon-raksa-hero-blur .slide-item.slide-2 .slide-topic {
		font-size: 16px !important;
	}
	/* FancyHeading Homepage Section 2 */
	.section-2 .gla-advanced-title-item-text,
	.section-2 .gla-advanced-title-item-highlighted {
		font-size: 44px !important;
	}
	.section-2 .gla-advanced-title-item-image img {
		width: 3rem !important;
		height: 3rem !important;
	}
	/* FancyHeading Angebotsseite */
	.angebote .gla-advanced-title-item-text,
	.angebote .gla-advanced-title-item-highlighted {
		font-size: 22px !important;
	}
	/* Section 4 switch row flex-direction column */
	.section-4-row {
		flex-direction: column;
	}
	/* Section Animated Title-Bar Title smaller */
	.sawasdee-anim-title {
		font-size: 48px !important;
	}
	/* Section Animated Title-Bar Title smaller */
	.gla-typewriter-text {
		font-size: 32px !important;
	}
	/* Section 7 Marquee Text smaller */
	.section-7-marquee .gla-marquee-content {
		zoom: 0.4;
		-moz-transform: scale(0.4);
		-moz-transform-origin: center center;
		animation-duration: 60s !important;
	}
	/* Alle Seiten ausser Home Heading Cover */
	#heading-cover {
		height: 90px !important;
		min-height: unset !important;
	}
	/* PDF-Viewer Pages min-height */
	#pdf-viewer-page {
		min-height: unset !important;
	}
	#pdf-viewer-page object {
		height: 800px !important;
	}
}
/*-----------------------------------------------------------------------*/