/*
Theme Name: Sawasdee
Theme URI: https://wordpress.org/themes/sawasdee/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Sawasdee emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 2.0.31
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sawasdee
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-styles, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*-----------------------------------------------------------------------
 * Twenty-Twentyfive style.css content
 ------------------------------------------------------------------------*/
/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
/* a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.1em;
} */

/* Focus styles */
/* :where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
} */

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation
	.wp-block-navigation-submenu
	.wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation
	.wp-block-navigation-item
	.wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation
	.wp-block-navigation-item
	ul.wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}
/* END Twenty-Twentyfive style.css content */
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Navigation active link fix, hide menu on tablet and desktop
 ------------------------------------------------------------------------*/
/* 1. Unterstreichung für ALLE Nav-Links radikal entfernen */
.wp-block-navigation .wp-block-navigation-item a {
	text-decoration: none !important;
}

/* 2. Unterstreichung NUR für den aktuell aktiven Link erzwingen */
.wp-block-navigation .wp-block-navigation-item.current-menu-item a {
	text-decoration: underline !important;
	text-underline-offset: 5px; /* Optional: Schönerer Abstand zum Text */
}

/* 3. Close button klebt bündig in oberer rechter Ecke (Abhilfe margin) */
.wp-block-navigation__responsive-container-close {
	margin: 1rem;
}

/*-----------------------------------------------------------------------
 * Diverses
 ------------------------------------------------------------------------*/
.sawasdee-overflow-visible {
	overflow: visible !important;
}

/*-----------------------------------------------------------------------
 * Width/Height
 ------------------------------------------------------------------------*/
.sawasdee-full-width {
	width: 100% !important;
}
.sawasdee-full-height {
	height: 100% !important;
}
.sawasdee-full-size {
	width: 100% !important;
	height: 100% !important;
}
.sawasdee-fit-content {
	width: fit-content !important;
}

/*-----------------------------------------------------------------------
 * Z-Indices
 ------------------------------------------------------------------------*/
.sawasdee-z-index-auto {
	z-index: auto !important;
}
.sawasdee-z-index--1 {
	z-index: -1 !important;
}
.sawasdee-z-index-0 {
	z-index: 0 !important;
}
.sawasdee-z-index-1 {
	z-index: 1 !important;
}
.sawasdee-z-index-2 {
	z-index: 2 !important;
}
.sawasdee-z-index-3 {
	z-index: 3 !important;
}
.sawasdee-z-index-9 {
	z-index: 9 !important;
}
.sawasdee-z-index-99 {
	z-index: 99 !important;
}
.sawasdee-z-index-999 {
	z-index: 999 !important;
}
.sawasdee-z-index-9999 {
	z-index: 9999 !important;
}
.sawasdee-z-index-99999 {
	z-index: 99999 !important;
}
/*-----------------------------------------------------------------------
 * Position Flags
 ------------------------------------------------------------------------*/
.sawasdee-position-relative {
	position: relative !important;
}
.sawasdee-position-absolute {
	position: absolute !important;
}
.sawasdee-position-fixed {
	position: fixed !important;
}
.sawasdee-position-sticky {
	position: sticky !important;
}
.sawasdee-position-static {
	position: static !important;
}
/*-----------------------------------------------------------------------
 * Display Flags
 ------------------------------------------------------------------------*/
.sawasdee-display-none {
	display: none !important;
}
.sawasdee-display-block {
	display: block !important;
}
.sawasdee-display-inline {
	display: inline !important;
}
.sawasdee-display-inline-block {
	display: inline-block !important;
}
.sawasdee-display-flex {
	display: flex !important;
}
.sawasdee-display-flex-column {
	display: flex !important;
	flex-direction: column !important;
}
.sawasdee-display-inline-flex {
	display: inline-flex !important;
}
/*-----------------------------------------------------------------------
 * Item Justification
 ------------------------------------------------------------------------*/
.sawasdee-text-align-center {
	text-align: center !important;
}
.sawasdee-justifiy-center {
	justify-content: center !important;
}
.sawasdee-align-center {
	align-items: center !important;
}
.sawasdee-text-justify {
	text-align: justify;
	hyphens: auto;
}
/*-----------------------------------------------------------------------
 * Translate Flags
 ------------------------------------------------------------------------*/
/* bündig an den aussenkanten (nicht über das elternelement hinausragend) */
.sawasdee-xy-top-left {
	top: 0%;
	left: 0%;
}
.sawasdee-xy-top-center {
	top: 0%;
	left: 50%;
	translate: -50% 0 !important;
}
.sawasdee-xy-top-right {
	top: 0%;
	right: 0%;
}
.sawasdee-xy-center-left {
	top: 50%;
	left: 0%;
	translate: 0 -50% !important;
}
.sawasdee-xy-center-center {
	top: 50%;
	left: 50%;
	translate: -50% -50% !important;
}
.sawasdee-xy-center-right {
	top: 50%;
	right: 0%;
	translate: 0 -50% !important;
}
.sawasdee-xy-bottom-left {
	bottom: 0%;
	left: 0%;
}
.sawasdee-xy-bottom-center {
	bottom: 0%;
	left: 50%;
	translate: -50% 0 !important;
}
.sawasdee-xy-bottom-right {
	bottom: 0%;
	right: 0%;
}
/* overhanging 50% an den aussenkanten (über das elternelement hinausragend) */
.sawasdee-xy2-top-left {
	top: 0%;
	left: 0%;
	translate: -50% -50% !important;
}
.sawasdee-xy2-top-center {
	top: 0%;
	left: 50%;
	translate: -50% -50% !important;
}
.sawasdee-xy2-top-right {
	top: 0%;
	right: 0%;
	translate: 50% -50% !important;
}
.sawasdee-xy2-center-left {
	top: 50%;
	left: 0%;
	translate: -50% -50% !important;
}
.sawasdee-xy2-center-center {
	top: 50%;
	left: 50%;
	translate: -50% -50% !important;
}
.sawasdee-xy2-center-right {
	top: 50%;
	right: 0%;
	translate: 50% -50% !important;
}
.sawasdee-xy2-bottom-left {
	bottom: 0%;
	left: 0%;
	translate: -50% 50% !important;
}
.sawasdee-xy2-bottom-center {
	bottom: 0%;
	left: 50%;
	translate: -50% 50% !important;
}
.sawasdee-xy2-bottom-right {
	bottom: 0%;
	right: 0%;
	translate: 50% 50% !important;
}
/*-----------------------------------------------------------------------
 * Box Sizing
 ------------------------------------------------------------------------*/
.sawasdee-border-box {
	box-sizing: border-box;
}
.sawasdee-content-box {
	box-sizing: content-box;
}
/*-----------------------------------------------------------------------
 * Figure/Image Overlays
 ------------------------------------------------------------------------*/
.wp-block-cover[class*='sawasdee-overlay-'],
figure[class*='sawasdee-overlay-'] {
	position: relative;
}
.wp-block-cover[class*='sawasdee-overlay-'] a.wp-block-gla-icon-wrapper {
	width: 100%;
	height: 100%;
	text-decoration: none !important;
}
.wp-block-cover[class*='sawasdee-overlay-']::before,
figure[class*='sawasdee-overlay-']::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	content: '';
	opacity: 1;
	z-index: 1;
	-webkit-transition: background 0.5s ease-out;
	-moz-transition: background 0.5s ease-out;
	-o-transition: background 0.5s ease-out;
	transition: background 0.5s ease-out;
}
.wp-block-cover[class*='sawasdee-overlay-'] .wp-block-cover__inner-container {
	position: relative;
	z-index: 10;
	height: 100%;
}
.wp-block-cover.sawasdee-overlay-dark::before,
figure.sawasdee-overlay-dark::before {
	background: rgba(0, 0, 0, 0);
}
.wp-block-cover.sawasdee-overlay-dark:hover::before,
figure.sawasdee-overlay-dark:hover::before {
	background: rgba(128, 128, 128, 0.66);
}
.wp-block-cover.sawasdee-overlay-light::before,
figure.sawasdee-overlay-light::before {
	background: rgba(255, 255, 255, 0);
}
.wp-block-cover.sawasdee-overlay-light:hover::before,
figure.sawasdee-overlay-light:hover::before {
	background: rgba(255, 255, 255, 0.66);
}
.wp-block-cover[class*='sawasdee-overlay-']:not([class*='block-editor-'])
	.wp-block-gla-icon-wrapper::before,
.wp-block-cover[class*='sawasdee-overlay-']:not([class*='block-editor-'])
	.wp-block-gla-icon-wrapper
	> span {
	opacity: 0;
	transition: opacity 0.5s ease-in-out !important;
}
.wp-block-cover[class*='sawasdee-overlay-']:hover
	.wp-block-gla-icon-wrapper::before,
.wp-block-cover[class*='sawasdee-overlay-']:hover
	.wp-block-gla-icon-wrapper
	> span {
	opacity: 1 !important;
}
/*-----------------------------------------------------------------------
 * Heading Doodle Underline (pattern heading-doodle-underline.php)
 * Heading Variant 'Doodle Underline'
 ------------------------------------------------------------------------*/
.is-style-doodle-underline::after {
	content: '';
	display: block;
	position: absolute;
	left: -5%;
	bottom: 0.1em;
	width: 110%;
	height: 0.4em;
	min-height: 2px; /* Verhindert, dass die Linie ganz verschwindet */
	pointer-events: none;
	background-color: var(--wp--preset--color--contrast);

	/* Das SVG ist nur die Schablone */
	-webkit-mask-image: url('./assets/svg/underline.svg');
	mask-image: url('./assets/svg/underline.svg');
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
/*-----------------------------------------------------------------------
 * Title Animated (pattern title-animated.php)
 ------------------------------------------------------------------------*/
.sawasdee-anim-container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.sawasdee-anim-titlebar {
	position: absolute !important;
	max-width: none !important;
	width: 100%;
	top: 50%;
	left: 0;
	translate: 0 -30%;
	opacity: 1;
	z-index: 0;
}
.sawasdee-anim-title {
	position: relative;
	margin: 0 auto;
	/* opacity: 0; */
	z-index: 1;
}
/*-----------------------------------------------------------------------
 * Heading Abstract Underline ( pattern using svg-wrapper plugin )
 ------------------------------------------------------------------------*/
/* usage add classnames 'sawasdee-abstract-underline sawasdee-animate' */
.sawasdee-abstract-underline.gla-svg-wrapper {
	/* Hier definierst du deine Variablen */
	--wave-color: rgba(230, 221, 191, 0.8) /* gray */ /* #f2f0e9 */;
	--wave-thickness: 30px;
	position: relative;
}
.sawasdee-abstract-underline.gla-svg-wrapper .gla-svg-container svg {
	position: absolute;
	left: 0;
	bottom: 5px;
	width: 110%;
	height: 100%;
	transform: translateX(-5%);
	z-index: -1;
}
.sawasdee-abstract-underline.gla-svg-wrapper .gla-svg-container svg path {
	fill: none !important; /* Verhindert die schwarzen Flächen */
	stroke: var(--wave-color);
	stroke-width: var(--wave-thickness);
	stroke-linecap: round;
}
/*-----------------------------------------------------------------------
 * Sawasdee Horizontale Divider Linie ( ähnlich <hr> mit oder ohne Text )
 ------------------------------------------------------------------------*/
/* an z.b. <p>-Tag ohne Text class 'sawasdee-divider' = horizontale Linie*/
.sawasdee-divider {
	display: block;
	color: transparent !important;
	width: 100%;
	margin: 0;
	border: 0;
	border-bottom: 1px solid
		color-mix(in srgb, var(--wp--preset--color--contrast), transparent 80%);
	translate: 0 -50%;
}
/* dto. mit Text 'sawasdee-divider-text' = Linie links & rechts des Textes */
.sawasdee-divider-text {
	display: flex;
	align-items: center;
	text-align: center;
	width: 100%;
	margin: 0;

	/* Der Text in der Mitte */
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.85rem;
	font-weight: bold;
	color: var(--wp--preset--color--contrast);
}
.sawasdee-divider-text::before,
.sawasdee-divider-text::after {
	content: '';
	flex: 1; /* Füllt den gesamten verfügbaren Platz aus */
	border-bottom: 1px solid
		color-mix(in srgb, var(--wp--preset--color--contrast), transparent 80%);
}
.sawasdee-divider-text::before {
	margin-right: 1.5rem; /* Abstand zum Text rechts */
}
.sawasdee-divider-text::after {
	margin-left: 1.5rem; /* Abstand zum Text links */
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Alpine.js x-cloak support
 ------------------------------------------------------------------------*/
/* Verhindert, dass das Element vor dem Laden von JS kurz sichtbar ist */
[x-cloak] {
	display: none !important;
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Homepage Section 8 posts cards visuelle negative margin (Überlappung)
 ------------------------------------------------------------------------*/
/* class 'posts-2-col-content' im pattern integriert 'posts-2-col.php' */
.posts-2-col-content {
	position: relative;
	width: 90%;
	margin: -30px auto 0px auto;
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Homepage Section 11 cover image (fixed) mit gewalt etwas nach oben
 ------------------------------------------------------------------------*/
.gla-section11-cover .wp-block-cover__image-background {
	background-position: 50% 70% !important;
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Homepage Section 4 cards styling (Branding / Affiliate / Strategy)
 ------------------------------------------------------------------------*/
.gla-section4-card {
	/* grundzustand kein schatten (alpha 0) */
	box-shadow: 0 0 0px rgba(0, 0, 0, 0);
	/* Dauer: 0.5s | Kurve: ease-in-out (sanftes Starten/Stoppen) */
	transition: box-shadow 0.5s ease-in-out;
}
.gla-section4-card:hover {
	/* Syntax: horizontal-offset | vertical-offset | blur-radius | spread-radius | color */
	box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.1);
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Modal Pattern modal-interactive.php & sawadee-modal-handler.js
 ------------------------------------------------------------------------*/
dialog.custom-modal-element {
	border: none;
	border-radius: 12px;
	padding: 0;
	max-width: 90vw;
	width: 500px;
}
dialog.custom-modal-element::backdrop {
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(3px);
}
.modal-inner {
	padding: 2rem;
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * ServiceShortcode.php Styles (siehe src/integrations) 
 ------------------------------------------------------------------------*/
/* 1. Das Raster (Grid) */
.services-grid-container {
	display: grid;
	/* Erzeugt automatisch Spalten, die mindestens 300px breit sind */
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px; /* Abstand zwischen den Karten */
	padding: 40px 0;
}

/* 2. Die Karte als festes Objekt */
.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* Text klebt unten am Kartenrand */

	/* Die Lösung für dein Problem: Quadratisch oder Hochformat */
	aspect-ratio: 1 / 1; /* 1/1 für Quadrate, 3/4 für klassisches Hochformat */

	border-radius: 20px;
	overflow: hidden; /* Verhindert, dass Inhalt über die Rundungen ragt */

	/* Background-Handling */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* 3. Lesbarkeit des Textes auf dem Bild */
.card-content-wrapper {
	padding: 25px;
	/* Ein sanfter Verlauf von transparent zu schwarz für bessere Lesbarkeit */
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	color: white;
}

.card-content-wrapper h3 {
	margin: 0 0 10px 0;
	font-size: 1.5rem;
}

.card-content-wrapper p {
	margin: 0 0 15px 0;
	font-size: 0.9rem;
	opacity: 0.9;
}

/* 4. Meta-Infos (Dauer & Preis) nebeneinander */
.service-meta {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	font-size: 0.85rem;
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Newsletter CF7 Form Footer
 ------------------------------------------------------------------------*/
.sawasdee-footer-newsletter {
	--cf7-color: color-mix(
		in srgb,
		var(--wp--preset--color--primary),
		transparent 50%
	) !important;
}

/* Der äußere Container */
.sawasdee-footer-newsletter p {
	display: flex;
	align-items: flex-start;
	/* max-width: 500px; */
	gap: 10px;
}

/* Der Wrapper um das Email-Feld */
.sawasdee-footer-newsletter .wpcf7-form-control-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Das Email-Eingabefeld */
.sawasdee-footer-newsletter input[type='email'] {
	width: 100%;
	height: 45px;
	border: 1px solid var(--cf7-color);
	border-radius: 25px; /* Pillenform */
	padding: 0 20px;
	background: transparent;
	color: var(--cf7-color);
	box-sizing: border-box;
	outline: none;
}

/* Der Submit-Button */
.sawasdee-footer-newsletter input[type='submit'] {
	height: 45px;
	border: 1px solid var(--cf7-color);
	border-radius: 25px; /* Pillenform */
	padding: 0 30px;
	background: transparent;
	color: var(--cf7-color);
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	white-space: nowrap; /* Verhindert Zeilenumbruch im Text */
}

.sawasdee-footer-newsletter input[type='submit']:hover {
	background: var(--cf7-color);
	color: #fff !important;
}

/* Korrektur für den Spinner (das Lade-Icon), damit er das Layout nicht verschiebt */
.sawasdee-footer-newsletter .wpcf7-spinner {
	position: absolute;
	margin: 0;
	bottom: -25px; /* Schiebt ihn unter das Formular */
}

/* --- FEHLERMELDUNGEN STYLEN --- */

/* Die rote Meldung direkt unterm Feld */
.sawasdee-footer-newsletter .wpcf7-not-valid-tip {
	color: #d9534f;
	font-size: 12px !important;
	padding-left: 20px;
	margin-top: 5px;
}

/* Die große gelbe/orange Box unten drunter dezent machen oder ausblenden */
.wpcf7-response-output {
	display: none;
}
/*------------------- ENDE Newsletter CF7 Form Footer -------------------*/
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Posts Signature nach Content
 ------------------------------------------------------------------------*/
/* 
 * siehe ThemeSetup.php function 'add_post_content_sawasdee_signature'
 * An jeden post wird ans Ende des contents eine Sawadee Signatur hin-
 * zugefügt.
 */
.sawasdee-signature {
	box-sizing: border-box;
	margin: 4rem 0 2rem;
	padding: 3rem 1.5rem;
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	text-align: center;
	/* Ein leichter Hintergrund-Hauch */
	background-color: color-mix(
		in srgb,
		var(--wp--preset--color--contrast),
		transparent 98%
	);
}

.signature-text {
	font-family: serif; /* Oder deine gewählte Font-Variable */
	font-size: 1.4rem;
	line-height: 1.5;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--contrast);
}

.signature-subtext {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	opacity: 0.6;
	display: block;
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Footer Share Buttons Styling
 ------------------------------------------------------------------------*/
/* Container für die Icons */
.sawasdee-share-container {
	display: flex;
	justify-content: center;
	gap: 1.25rem; /* Abstand zwischen den Icons */
	margin-bottom: 2rem;
}

/* Grundstyling für die Links (Farbe & Größe) */
.sawasdee-share-link {
	text-decoration: none !important;
	color: var(--wp--preset--color--contrast);
	font-size: 1.2rem; /* Reguliert die Größe des Icons */
	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none !important; /* Entfernt den blauen Rahmen */
	box-shadow: none !important;
}

.sawasdee-share-link:hover {
	opacity: 0.6;
	color: var(--wp--preset--color--base--alt);
	outline: none !important;
	text-decoration: none !important;
	/* transform: translateY(-2px); */ /* Kleiner optischer Lift beim Hover */
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Homepage Section 10 Testimonials 5-Star Rating
 ------------------------------------------------------------------------*/
.sawasdee-rating {
	font-family: 'gla-icons' !important;
	speak: never;
	color: transparent !important; /* <p>-tag placeholder text '.' ausblenden */
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
/* Spezifisch für die Sterne */
.star-rating::before {
	content: '\e806 \e806 \e806 \e806 \e806'; /* Dein Icon-Code für den Stern, 5-mal hintereinander */
	letter-spacing: 5px;
	color: #ffb800; /* Gold */
	font-size: 1.2rem;
	display: flex;
	justify-content: center;
}
/*-----------------------------------------------------------------------
 * Homepage Section 10 Testimonials blockquote styling am paragraph
 ------------------------------------------------------------------------*/
.sawasdee-blockquote {
	display: flex;
	flex-direction: column; /* Icon über dem Text */
	border: none;
	/* gap: 0.5em; */ /* Abstand zwischen Icon und Text */

	/* Zentraler Fallback für die Größe */
	--quote-size: 2em;

	&::before {
		content: '';
		display: block;
		align-self: flex-start;
		width: var(--quote-size);
		height: var(--quote-size);
		background-color: color-mix(
			in srgb,
			var(--wp--preset--color--contrast),
			transparent 90%
		);

		/* Mask-Logik bleibt gleich */
		-webkit-mask-image: url('./assets/svg/quote-open.svg');
		mask-image: url('./assets/svg/quote-open.svg');
		mask-size: contain;
		mask-repeat: no-repeat;

		/* Das Zauberwort für die Ausrichtung ohne Absolute */
		margin-bottom: -0.5em; /* Optional: Um es etwas in den Text rücken zu lassen */
	}

	/*--- Größen-Varianten ---*/
	&.quote-size-s {
		--quote-size: 1em;
	}
	&.quote-size-m {
		--quote-size: 2em;
	}
	&.quote-size-l {
		--quote-size: 3em;
	}
	&.quote-size-xl {
		--quote-size: 4em;
	}
	&.quote-size-xxl {
		--quote-size: 5em;
	}
	&.quote-size-xxxl {
		--quote-size: 6em;
	}

	/*--- Ausrichtungen ---*/
	&.has-text-align-left {
		align-items: flex-start;
		text-align: left;
	}
	&.has-text-align-center {
		align-items: center;
		text-align: center;
	}
	&.has-text-align-right {
		align-items: flex-end;
		text-align: right;
	}
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * WP cover horizontal parallax on scroll (sawasdee-parallax-hoizontal)
 ------------------------------------------------------------------------*/
.sawasdee-parallax-horizontal {
	overflow: hidden;
	position: relative;
}

.sawasdee-parallax-horizontal .wp-block-cover__image-background,
.sawasdee-parallax-horizontal img {
	width: 150% !important;
	max-width: none !important;
	/* height: 100%; */
	/* object-fit: cover; */
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	/* transition: transform 0.1s ease-out; */ /* Macht die Bewegung "weicher" */
	/* will-change: transform; */ /* Optimiert die Render-Performance */
}
/*-----------------------------------------------------------------------*/

/*-----------------------------------------------------------------------
 * Back-to-top-button
 ------------------------------------------------------------------------*/
/* Nur im Frontend: Button fixieren und verstecken für GSAP */
:not(.is-root-container) > .back-to-top-button {
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: none; /* GSAP schaltet dies auf 'flex' oder 'block' */
	opacity: 0;
	z-index: 999;
}
/* Überall (Frontend & Backend) gültig */
.back-to-top-button {
	cursor: pointer;
}
/*-----------------------------------------------------------------------*/