/**
 * Textbox Block Styles (Group Block with Background Colors)
 * Based on Figma Design System - Styleguide Node 227:3141
 * Exact match from Figma:
 * - Background: var(--secondary---lesetip,#f8f8da) or other secondary colors
 * - Padding: p-[50px]
 * - Gap: gap-[20px]
 * - Heading (H3): text-[40px] font-extrabold leading-[1.2]
 * - Text: text-[18px] font-normal leading-[1.8]
 * - Border-left: 3px solid primary-blue (konsistente Linie)
 */

/* Textbox with background colors - via background color or block style */
.wp-block-group.has-secondary-lesetip-background-color,
.wp-block-group.has-secondary-salmon-background-color,
.wp-block-group.has-secondary-yellow-background-color,
.wp-block-group.has-secondary-green-background-color,
.wp-block-group.is-style-textbox-lesetip,
.wp-block-group.is-style-textbox-salmon,
.wp-block-group.is-style-textbox-yellow,
.wp-block-group.is-style-textbox-green {
	padding: 50px;
	box-sizing: border-box;
}

.wp-block-group.has-secondary-lesetip-background-color,
.wp-block-group.is-style-textbox-lesetip {
	background-color: var(--wp--preset--color--secondary-lesetip);
}

.wp-block-group.has-secondary-salmon-background-color,
.wp-block-group.is-style-textbox-salmon {
	background-color: var(--wp--preset--color--secondary-salmon);
}

.wp-block-group.has-secondary-yellow-background-color,
.wp-block-group.is-style-textbox-yellow {
	background-color: var(--wp--preset--color--secondary-yellow);
}

.wp-block-group.has-secondary-green-background-color,
.wp-block-group.is-style-textbox-green {
	background-color: var(--wp--preset--color--secondary-green);
}

/* Textbox content spacing */
.wp-block-group.has-secondary-lesetip-background-color .wp-block-group__inner-container,
.wp-block-group.has-secondary-salmon-background-color .wp-block-group__inner-container,
.wp-block-group.has-secondary-yellow-background-color .wp-block-group__inner-container,
.wp-block-group.has-secondary-green-background-color .wp-block-group__inner-container,
.wp-block-group.is-style-textbox-lesetip .wp-block-group__inner-container,
.wp-block-group.is-style-textbox-salmon .wp-block-group__inner-container,
.wp-block-group.is-style-textbox-yellow .wp-block-group__inner-container,
.wp-block-group.is-style-textbox-green .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Textbox headings - alle Heading-Levels einheitlich (40px, extrabold) */
/* Redaktion soll H3 verwenden (erscheint nicht im Inhaltsverzeichnis) */
.wp-block-group.has-secondary-lesetip-background-color .wp-block-heading,
.wp-block-group.has-secondary-salmon-background-color .wp-block-heading,
.wp-block-group.has-secondary-yellow-background-color .wp-block-heading,
.wp-block-group.has-secondary-green-background-color .wp-block-heading,
.wp-block-group.is-style-textbox-lesetip .wp-block-heading,
.wp-block-group.is-style-textbox-salmon .wp-block-heading,
.wp-block-group.is-style-textbox-yellow .wp-block-heading,
.wp-block-group.is-style-textbox-green .wp-block-heading {
	font-size: 40px; /* Override font-size for textbox variant */
	font-weight: 800; /* Einheitlich extrabold, unabhängig vom Heading-Level */
	margin: 0; /* Override margin */
}

/* Textbox paragraphs */
/* Base styles (font-family, font-size, font-weight, line-height, color) are defined in theme.json for core/paragraph */
.wp-block-group.has-secondary-lesetip-background-color .wp-block-paragraph,
.wp-block-group.has-secondary-salmon-background-color .wp-block-paragraph,
.wp-block-group.has-secondary-yellow-background-color .wp-block-paragraph,
.wp-block-group.has-secondary-green-background-color .wp-block-paragraph,
.wp-block-group.is-style-textbox-lesetip .wp-block-paragraph,
.wp-block-group.is-style-textbox-salmon .wp-block-paragraph,
.wp-block-group.is-style-textbox-yellow .wp-block-paragraph,
.wp-block-group.is-style-textbox-green .wp-block-paragraph {
	margin: 0; /* Only override margin, rest comes from theme.json */
}

/* Textbox Listen: Pfeil-Bulletpoints (wie Post-It Block) */
.wp-block-group.has-secondary-lesetip-background-color ul,
.wp-block-group.has-secondary-salmon-background-color ul,
.wp-block-group.has-secondary-yellow-background-color ul,
.wp-block-group.has-secondary-green-background-color ul,
.wp-block-group.is-style-textbox-lesetip ul,
.wp-block-group.is-style-textbox-salmon ul,
.wp-block-group.is-style-textbox-yellow ul,
.wp-block-group.is-style-textbox-green ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wp-block-group.has-secondary-lesetip-background-color ul li,
.wp-block-group.has-secondary-salmon-background-color ul li,
.wp-block-group.has-secondary-yellow-background-color ul li,
.wp-block-group.has-secondary-green-background-color ul li,
.wp-block-group.is-style-textbox-lesetip ul li,
.wp-block-group.is-style-textbox-salmon ul li,
.wp-block-group.is-style-textbox-yellow ul li,
.wp-block-group.is-style-textbox-green ul li {
	position: relative;
	padding-left: 0;
	margin: 0;
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--wp--preset--color--primary-blue);
}

.wp-block-group.has-secondary-lesetip-background-color ul li::before,
.wp-block-group.has-secondary-salmon-background-color ul li::before,
.wp-block-group.has-secondary-yellow-background-color ul li::before,
.wp-block-group.has-secondary-green-background-color ul li::before,
.wp-block-group.is-style-textbox-lesetip ul li::before,
.wp-block-group.is-style-textbox-salmon ul li::before,
.wp-block-group.is-style-textbox-yellow ul li::before,
.wp-block-group.is-style-textbox-green ul li::before {
	content: "";
	position: relative;
	top: 4px;
	width: 20px;
	min-width: 20px;
	height: 20px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.806396 13.1123H20.6011' stroke='%231E3791' stroke-width='3' stroke-miterlimit='10'/%3E%3Cpath d='M11.6201 22.1922L20.6012 13.1122L11.6201 4.03223' stroke='%231E3791' stroke-width='3' stroke-miterlimit='10'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Textbox Highlight-Links: Pfeil nach jedem Link */
.wp-block-group.has-secondary-lesetip-background-color a,
.wp-block-group.has-secondary-salmon-background-color a,
.wp-block-group.has-secondary-yellow-background-color a,
.wp-block-group.has-secondary-green-background-color a,
.wp-block-group.is-style-textbox-lesetip a,
.wp-block-group.is-style-textbox-salmon a,
.wp-block-group.is-style-textbox-yellow a,
.wp-block-group.is-style-textbox-green a {
	text-decoration: none !important;
	font-weight: 600;
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
}

.wp-block-group.has-secondary-lesetip-background-color a::before,
.wp-block-group.has-secondary-salmon-background-color a::before,
.wp-block-group.has-secondary-yellow-background-color a::before,
.wp-block-group.has-secondary-green-background-color a::before,
.wp-block-group.is-style-textbox-lesetip a::before,
.wp-block-group.is-style-textbox-salmon a::before,
.wp-block-group.is-style-textbox-yellow a::before,
.wp-block-group.is-style-textbox-green a::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-top: 7px;
	background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.806396 13.1123H20.6011' stroke='%231E3791' stroke-width='3' stroke-miterlimit='10'/%3E%3Cpath d='M11.6201 22.1922L20.6012 13.1122L11.6201 4.03223' stroke='%231E3791' stroke-width='3' stroke-miterlimit='10'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	flex-shrink: 0;
}

.wp-block-group.has-secondary-lesetip-background-color a:hover,
.wp-block-group.has-secondary-salmon-background-color a:hover,
.wp-block-group.has-secondary-yellow-background-color a:hover,
.wp-block-group.has-secondary-green-background-color a:hover,
.wp-block-group.is-style-textbox-lesetip a:hover,
.wp-block-group.is-style-textbox-salmon a:hover,
.wp-block-group.is-style-textbox-yellow a:hover,
.wp-block-group.is-style-textbox-green a:hover {
	text-decoration: underline !important;
}

/* Responsive */
@media (max-width: 768px) {
	.wp-block-group.has-secondary-lesetip-background-color,
	.wp-block-group.has-secondary-salmon-background-color,
	.wp-block-group.has-secondary-yellow-background-color,
	.wp-block-group.has-secondary-green-background-color,
	.wp-block-group.is-style-textbox-lesetip,
	.wp-block-group.is-style-textbox-salmon,
	.wp-block-group.is-style-textbox-yellow,
	.wp-block-group.is-style-textbox-green {
		padding: 30px;
	}

	.wp-block-group.has-secondary-lesetip-background-color .wp-block-heading,
	.wp-block-group.has-secondary-salmon-background-color .wp-block-heading,
	.wp-block-group.has-secondary-yellow-background-color .wp-block-heading,
	.wp-block-group.has-secondary-green-background-color .wp-block-heading,
	.wp-block-group.is-style-textbox-lesetip .wp-block-heading,
	.wp-block-group.is-style-textbox-salmon .wp-block-heading,
	.wp-block-group.is-style-textbox-yellow .wp-block-heading,
	.wp-block-group.is-style-textbox-green .wp-block-heading {
		font-size: 32px;
	}

	.wp-block-group.has-secondary-lesetip-background-color ul li,
	.wp-block-group.has-secondary-salmon-background-color ul li,
	.wp-block-group.has-secondary-yellow-background-color ul li,
	.wp-block-group.has-secondary-green-background-color ul li,
	.wp-block-group.is-style-textbox-lesetip ul li,
	.wp-block-group.is-style-textbox-salmon ul li,
	.wp-block-group.is-style-textbox-yellow ul li,
	.wp-block-group.is-style-textbox-green ul li {
		font-size: 16px;
	}

	.wp-block-group.has-secondary-lesetip-background-color ul li::before,
	.wp-block-group.has-secondary-salmon-background-color ul li::before,
	.wp-block-group.has-secondary-yellow-background-color ul li::before,
	.wp-block-group.has-secondary-green-background-color ul li::before,
	.wp-block-group.is-style-textbox-lesetip ul li::before,
	.wp-block-group.is-style-textbox-salmon ul li::before,
	.wp-block-group.is-style-textbox-yellow ul li::before,
	.wp-block-group.is-style-textbox-green ul li::before {
		width: 18px;
		min-width: 18px;
		height: 18px;
		top: 3px;
	}
}