/**
 * Custom Post Type Search Block Styles
 *
 * Styles for projekte, neuigkeiten, and generic search blocks
 */

/* Base search block styling */
.projekte-search-block.wp-block-search,
.wp-block-search.projekte-search-block,
.neuigkeiten-search-block.wp-block-search,
.wp-block-search.neuigkeiten-search-block,
.generic-search-block.wp-block-search,
.wp-block-search.generic-search-block {
	background: transparent !important;
}

/* Inside wrapper */
.projekte-search-block .wp-block-search__inside-wrapper,
.wp-block-search.projekte-search-block .wp-block-search__inside-wrapper,
.neuigkeiten-search-block .wp-block-search__inside-wrapper,
.wp-block-search.neuigkeiten-search-block .wp-block-search__inside-wrapper,
.generic-search-block .wp-block-search__inside-wrapper,
.wp-block-search.generic-search-block .wp-block-search__inside-wrapper {
	gap: 1rem;
	align-items: center;
}

/* Input field */
.projekte-search-block .wp-block-search__input,
.wp-block-search.projekte-search-block .wp-block-search__input,
.neuigkeiten-search-block .wp-block-search__input,
.wp-block-search.neuigkeiten-search-block .wp-block-search__input,
.generic-search-block .wp-block-search__input,
.wp-block-search.generic-search-block .wp-block-search__input {
	padding: 0.75rem 1.5rem !important;
	border: 3px solid var(--wp--preset--color--blau-1) !important;
	background: var(--wp--preset--color--weiss) !important;
	color: var(--wp--preset--color--blau-1) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	border-radius: 0 !important;
	box-sizing: border-box !important;
}

/* Input focus state */
.projekte-search-block .wp-block-search__input:focus,
.wp-block-search.projekte-search-block .wp-block-search__input:focus,
.neuigkeiten-search-block .wp-block-search__input:focus,
.wp-block-search.neuigkeiten-search-block .wp-block-search__input:focus,
.generic-search-block .wp-block-search__input:focus,
.wp-block-search.generic-search-block .wp-block-search__input:focus {
	outline: 3px solid var(--wp--preset--color--blau-1) !important;
	outline-offset: 0 !important;
	border-color: var(--wp--preset--color--blau-1) !important;
}

/* Input placeholder */
.projekte-search-block .wp-block-search__input::placeholder,
.wp-block-search.projekte-search-block .wp-block-search__input::placeholder,
.neuigkeiten-search-block .wp-block-search__input::placeholder,
.wp-block-search.neuigkeiten-search-block .wp-block-search__input::placeholder,
.generic-search-block .wp-block-search__input::placeholder,
.wp-block-search.generic-search-block .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--blau-1) !important;
	opacity: 0.6 !important;
}

/* Search button */
.projekte-search-block .wp-block-search__button,
.wp-block-search.projekte-search-block .wp-block-search__button,
.neuigkeiten-search-block .wp-block-search__button,
.wp-block-search.neuigkeiten-search-block .wp-block-search__button,
.generic-search-block .wp-block-search__button,
.wp-block-search.generic-search-block .wp-block-search__button {
	background: transparent !important;
	border: 3px solid var(--wp--preset--color--blau-1) !important;
	color: var(--wp--preset--color--blau-1) !important;
	width: 3rem !important;
	height: 3rem !important;
	min-width: 3rem !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	padding: 0.5rem !important;
	box-sizing: border-box !important;
}

/* Button focus state */
.projekte-search-block .wp-block-search__button:focus,
.wp-block-search.projekte-search-block .wp-block-search__button:focus,
.neuigkeiten-search-block .wp-block-search__button:focus,
.wp-block-search.neuigkeiten-search-block .wp-block-search__button:focus,
.generic-search-block .wp-block-search__button:focus,
.wp-block-search.generic-search-block .wp-block-search__button:focus {
	outline: 3px solid var(--wp--preset--color--blau-1) !important;
	outline-offset: 0 !important;
}

/* Button hover state */
.projekte-search-block .wp-block-search__button:hover,
.wp-block-search.projekte-search-block .wp-block-search__button:hover,
.neuigkeiten-search-block .wp-block-search__button:hover,
.wp-block-search.neuigkeiten-search-block .wp-block-search__button:hover,
.generic-search-block .wp-block-search__button:hover,
.wp-block-search.generic-search-block .wp-block-search__button:hover {
	background: var(--wp--preset--color--blau-1) !important;
	color: var(--wp--preset--color--weiss) !important;
}

/* Button SVG icon */
.projekte-search-block .wp-block-search__button svg,
.wp-block-search.projekte-search-block .wp-block-search__button svg,
.neuigkeiten-search-block .wp-block-search__button svg,
.wp-block-search.neuigkeiten-search-block .wp-block-search__button svg,
.generic-search-block .wp-block-search__button svg,
.wp-block-search.generic-search-block .wp-block-search__button svg {
	width: 20px !important;
	height: 20px !important;
}

/* Alignment - right aligned */
.projekte-search-block.wp-block-search.alignright,
.wp-block-search.projekte-search-block.alignright,
.neuigkeiten-search-block.wp-block-search.alignright,
.wp-block-search.neuigkeiten-search-block.alignright,
.generic-search-block.wp-block-search.alignright,
.wp-block-search.generic-search-block.alignright {
	width: 75% !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ============================================
   Projektekategorien Dropdown Filter
   ============================================ */
.tgbw-kategorie-filter {
	display: flex;
	justify-content: flex-end;
	position: relative;
	padding-bottom: 3rem;
}

.tgbw-kategorie-filter > p:empty {
	display: none;
}

.tgbw-kategorie-filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--button-padding-block) var(--button-padding-inline);
	border: var(--button-border-width) solid var(--wp--preset--color--blau-1);
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--blau-1);
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-bold);
	border-radius: 0;
	cursor: pointer;
	box-sizing: border-box;
}

.tgbw-kategorie-filter__toggle:hover {
	background-color: var(--wp--preset--color--blau-1);
	border-color: var(--wp--preset--color--blau-1);
	color: var(--wp--preset--color--weiss);
}

.tgbw-kategorie-filter__toggle:focus {
	outline: 3px solid var(--wp--preset--color--blau-1);
	outline-offset: 0;
}

.tgbw-kategorie-filter__arrow {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.tgbw-kategorie-filter__toggle[aria-expanded="true"] .tgbw-kategorie-filter__arrow {
	transform: rotate(180deg);
}

/* Options list */
.tgbw-kategorie-filter__list {
	display: none;
	position: absolute;
	top: calc(100% - 3rem);
	right: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(39, 75, 109, 0.85);
	border-radius: 0;
	min-width: 100%;
	z-index: 10;
	box-sizing: border-box;
}

.tgbw-kategorie-filter__toggle[aria-expanded="true"] ~ .tgbw-kategorie-filter__list {
	display: block;
}

.tgbw-kategorie-filter__list li {
	margin: 0;
	padding: 0;
}

.tgbw-kategorie-filter__list li a {
	display: block;
	padding: var(--button-padding-block) var(--button-padding-inline);
	color: var(--wp--preset--color--weiss);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
}

.tgbw-kategorie-filter__list li a:hover {
	background: rgba(39, 75, 109, 1);
}

.tgbw-kategorie-filter__list li[aria-selected="true"] a {
	background: rgba(39, 75, 109, 1);
}

/* Checkbox option labels */
.tgbw-kategorie-filter__option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: var(--button-padding-block) var(--button-padding-inline);
	color: var(--wp--preset--color--weiss);
	font-size: var(--wp--preset--font-size--medium);
	font-family: var(--font-family-base);
	font-weight: var(--font-weight-bold);
	white-space: nowrap;
	cursor: pointer;
}

.tgbw-kategorie-filter__option:hover {
	background: rgba(39, 75, 109, 1);
}

.tgbw-kategorie-filter__option input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.1em;
	height: 1.1em;
	border: 2px solid var(--wp--preset--color--weiss);
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
}

.tgbw-kategorie-filter__option input[type="checkbox"]:checked {
	background: var(--wp--preset--color--weiss);
}

.tgbw-kategorie-filter__option input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 45%;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	margin-top: -5px;
	border: solid rgba(39, 75, 109, 1);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.tgbw-kategorie-filter__option input[type="checkbox"]:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.tgbw-kategorie-filter__option input[type="checkbox"]:disabled + span {
	opacity: 0.4;
}

/* Aktuelles separator line */
.tgbw-kategorie-filter__separator {
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	margin: 0.2rem var(--button-padding-inline);
}

/* Search / loupe button */
.tgbw-kategorie-filter__list li.tgbw-kategorie-filter__search-item {
	display: flex;
	justify-content: flex-end;
	padding: 0.8rem 1.2rem 1rem;
}

.tgbw-kategorie-filter__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 2px solid var(--wp--preset--color--weiss);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--weiss);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.tgbw-kategorie-filter__search:hover {
	background: var(--wp--preset--color--weiss);
	color: rgba(39, 75, 109, 1);
}

/* Alignment - center aligned */
.projekte-search-block.wp-block-search.aligncenter,
.wp-block-search.projekte-search-block.aligncenter,
.neuigkeiten-search-block.wp-block-search.aligncenter,
.wp-block-search.neuigkeiten-search-block.aligncenter,
.generic-search-block.wp-block-search.aligncenter,
.wp-block-search.generic-search-block.aligncenter {
	width: 75% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}