/*
 * EBZ Search – Frontend-Gestaltung
 *
 * Theme-Datei: /wp-content/themes/EBZ-Theme/assets/css/global/ebz-search.css
 * (Plugin-eigene Datei dient nur als Fallback, falls Theme-Datei fehlt.)
 * Hier kannst du Schriftgroessen, Farben, Abstaende und Rahmen aendern,
 * ohne die Suchlogik in PHP zu beruehren.
 *
 * Die Titel in den Trefferkarten sind derzeit H3-Elemente.
 * Fuer eine andere HTML-Elementart (z.B. H2) muesste PHP angepasst werden.
 */


/* ===========================================
   GRUNDLAYOUT – Breite der gesamten Suche
   =========================================== */

.ebz-search-ui {
    max-width: 100%;
    margin-inline:auto;
    color:inherit;
	font-size: clamp(
		1.0625rem,
		1.03125rem + 0.138889vw,
		1.1875rem
	);

	line-height: 1.5;
	letter-spacing: 0;
	font-weight: 300 !important;
}



/* ===========================================
   SUCHFORMULAR – Spalten, Beschriftungen, Eingaben und Button
   =========================================== */

.ebz-search-form {
    display:grid;
    grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)) auto;
    gap:12px;
    align-items:end;
    margin-bottom:40px;
	/*scroll-margin-top: 140px;*/
}

.ebz-search-field {
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

.ebz-search-field label {
    font-size: 1em;
    font-weight: 400;
}

.ebz-search-form input,.ebz-search-form select {
    width:100%;
    min-width:0;
    min-height:46px;
    padding:10px 14px;
    border:1px solid #f9d2aa;
    background:#fff;
    color:#212121;
    font:inherit;
}

.ebz-search-form button {
    padding: 15px 20px;
    border: 0;
    background: #172e56;
    color: #fff;
    font: inherit;
    cursor: pointer;
    font-size: 13px !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
	width: fit-content;
}

.ebz-search-form button {
    background-image: linear-gradient(90deg, rgba(214, 214, 214, 0.28) 0%, rgba(214, 214, 214, 0.28) 100%) !important;
    background-size: 0% 100% !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    transition: background-size 0.6s ease, color 0.4s ease, border-color 0.4s ease !important;
}

.ebz-search-form button:hover,.ebz-search-form button:focus-visible {
    background-size: 100% 100% !important;
}

/* ================================
   EBZ Search – Select-Felder
================================ */

.ebz-search-ui select {
    width: 100%;
    min-height: 44px;
    padding: 10px 42px 10px 14px;
    font-family: inherit;
    color: #142747;
    background-color: #fff;
    border: 1px solid #f9d2aa;
    appearance: none;
    -webkit-appearance: none;

    /* Eigener Dropdown-Pfeil */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23999999' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

.ebz-search-ui select:focus-visible {
    outline: 1px solid #f9d2aa;
}



/* ===========================================
   TREFFERANZAHL UND TREFFERLISTE
   =========================================== */

.ebz-search-count {
    margin-bottom:14px;
    font-weight:600;
}

.ebz-search-results {
    display: grid;
	--column-count: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    gap:12px;
}

@media (max-width:1100px) {
	.ebz-search-results {
		grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-rows: auto;
        grid-auto-flow: row;
	}
}


/* ===========================================
   TREFFERKARTEN – Abstand und Rahmen
   =========================================== */

.ebz-search-result {
    padding: 20px;
    border-top: 6px solid #f9d2aa;
    min-width: 0;
    background-color: #ffffff;
}



/* ===========================================
   TREFFER-INFO – Inhaltstyp, H3-Ueberschrift und Link
   =========================================== */

.ebz-search-kind {
	
}

.searchresult-type {
	font-weight: 500;
    font-size: .9em;
    color: #ef8a1f;
}

.searchresult-dot {
	margin: 0px 4px;
    font-weight: bold;
    line-height: 0;
    vertical-align: middle;
    font-size: 1.2em !important;
    color: #676565;
}

.searchresult-branche {
	font-weight: 300;
	font-size: .85em;
}

.ebz-search-result h3 {
    font-size: clamp(
		1.375rem,
		1.34375rem + 0.138889vw,
		1.5rem
	);
	line-height: 1.25;
	letter-spacing: -0.01em;
    margin:6px 0 8px;
}

.ebz-search-result h3 a {
    color:inherit;
    text-decoration:none;
}

.ebz-search-result h3 a:hover,.ebz-search-result h3 a:focus-visible {
    text-decoration:underline;
}



/* ===========================================
   TEXTAUSZUG – Trefferbeschreibung
   =========================================== */

.ebz-search-result p {
    max-width: 72ch;
}



/* ===========================================
   SEITENNAVIGATION – Seitenzahlen und aktive Seite
   =========================================== */

.ebz-search-pagination {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:24px;
}

.ebz-search-pagination a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    min-height:40px;
    padding:4px 12px;
    border:1px solid #cbd4df;
    text-decoration:none;
    color:inherit;
	font-weight: 500;
}

.ebz-search-pagination a:hover {
	color: #ffffff;
	background:#172e56;
}

.ebz-search-pagination a[aria-current=page] {
    background:#172e56;
    color:#fff;
    border-color:#172e56;
}



/* ===========================================
   RESPONSIVE – Tablet und Smartphone
   =========================================== */

@media (max-width:1100px) {
    .ebz-search-form {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .ebz-search-form button {
        grid-column:span 2;
    }
}
@media (max-width:540px) {
    .ebz-search-form {
        grid-template-columns:minmax(0,1fr);
    }
    .ebz-search-form button {
        grid-column:auto;
    }
}