/*
 * WHAT: All dwsearch styling — rail box, the /suche/ page, the shared result
 *       row, and the in-page overlay (full-screen on mobile).
 * WHY:  Composes on the dwtheme token kernel (--bg/--ink/--rule/--rubric/--read)
 *       so it follows the light/sand/dark lightswitch. Boxes are SQUARE
 *       (border-radius:0) per DW — rounding is for buttons only. Inputs use
 *       >=16px so iOS does not zoom on focus.
 */

/* ===== Rail search box (sits under the Essays years) ===== */
.dwsearch-rail { margin: 6px 2px 16px; } /* a little room before the INFO group */
.dwsearch-rail__input {
	width: 100%;
	box-sizing: border-box;
	padding: 7px 10px;
	font-size: 16px;
	color: var(--ink, #1a1a1a);
	background: var(--bg-2, #f3f3f3);
	border: 1px solid var(--rule, #ccc);
	border-radius: 0;
}
.dwsearch-rail__input:focus { outline: none; border-color: var(--ink-soft, #52525b); }
.dwsearch-rail__input::placeholder { color: var(--ink-soft, #888); }

/* ===== Shared result row (page + overlay) — thumbnail left, text right ===== */
.dwsearch-hit {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 0;
	border-top: 1px solid var(--rule, #e5e5e5);
	text-decoration: none;
	color: inherit;
}
.dwsearch-hit:last-child { border-bottom: 1px solid var(--rule, #e5e5e5); }
.dwsearch-hit:hover .dwsearch-hit__title { color: var(--rubric, #cc0000); }
/* Fixed 4:3 thumbnail — uniform + stable (a 4:3 box that also matches each
   variable row height can't be done without a layout feedback loop). */
.dwsearch-hit__thumb {
	flex: none;
	width: 116px;
	height: 87px;                 /* 4:3 */
	object-fit: cover;
	background: var(--bg-2, #eee); /* square per DW — no border-radius */
}
.dwsearch-hit__body { flex: 1; min-width: 0; } /* min-width:0 lets long titles wrap, not overflow */
/* Header line: title (left) + meta = [▶ Video · ]date, flush top-right. */
.dwsearch-hit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dwsearch-hit__title { flex: 1; min-width: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dwsearch-hit__meta { flex: none; display: inline-flex; align-items: center; white-space: nowrap; line-height: 1.3; font-size: 0.8125rem; color: var(--rubric, #cc0000); }
/* Red, 4:3 YouTube-style play badge before the date. */
.dwsearch-hit__video { display: inline-flex; margin-right: 6px; }
.dwsearch-hit__video svg { display: block; width: 20px; height: 15px; }
.dwsearch-hit__excerpt { margin-top: 4px; font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft, #555); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Matched terms highlighted by colour + weight, NOT a yellow box (editorial). */
.dwsearch-hit mark { background: transparent; color: var(--rubric, #cc0000); font-weight: 700; padding: 0; margin: 0; }
/* Short date shown only on mobile (≤600px); long date hidden there. */
.dwsearch-hit__date-short { display: none; }

/* Friendly prompt shown while the query is empty. */
.dwsearch-empty { margin: 0; padding: 20px 2px; color: var(--ink-soft, #777); font-size: 0.95rem; }

/* ===== Meta row: status count (left) + sort controls (right) — one line ===== */
/* flex-wrap lets the sort drop below the count on very narrow viewports. */
.dwsearch__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0 0 14px;
}
.dwsearch-overlay__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 8px 12px 0;
}

/* ===== Sort bar — sits inside the meta row, flush right ===== */
.dwsearch-sort { flex: none; white-space: nowrap; }
.dwsearch-sort__label { font-size: 0.9375rem; color: var(--ink-soft, #666); margin-right: 4px; }
.dwsearch-sort__btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
	color: var(--ink-soft, #888);
}
.dwsearch-sort__btn:hover { color: var(--rubric, #cc0000); }
.dwsearch-sort__btn.is-active { color: var(--ink, #1a1a1a); font-weight: 700; cursor: default; }
.dwsearch-sort__sep { font-size: 0.9375rem; color: var(--rule, #ccc); }

/* ===== /suche/ page ===== */
.dwsearch { max-width: var(--read, 720px); margin-inline: auto; padding: 42px 20px 64px; }
.dwsearch__title { margin: 0 0 16px; }
.dwsearch__form { margin: 0 0 8px; }
.dwsearch__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 1.0625rem;
	color: var(--ink, #1a1a1a);
	background: var(--bg-2, #f3f3f3);
	border: 1px solid var(--rule, #ccc);
	border-radius: 0;
}
.dwsearch__input:focus { outline: none; border-color: var(--ink-soft, #52525b); }
/* Status sits inside .dwsearch__meta — no own margin/padding. */
.dwsearch__status { margin: 0; color: var(--ink-soft, #666); font-size: 0.9375rem; }
.dwsearch__results { display: flex; flex-direction: column; }
.dwsearch__noscript { color: var(--ink-soft, #555); }

/* ===== Overlay (every page; full-screen on mobile) ===== */
/* Drop the browser's native search-clear "×" so the overlay shows only our own
 * close button (two ×'s side by side looked odd). */
.dwsearch__input::-webkit-search-cancel-button,
.dwsearch-rail__input::-webkit-search-cancel-button,
.dwsearch-overlay__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

html.dwsearch-locked, html.dwsearch-locked body { overflow: hidden; }

.dwsearch-overlay { position: fixed; inset: 0; z-index: 100000; }
.dwsearch-overlay[hidden] { display: none; }
.dwsearch-overlay__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }

.dwsearch-overlay__panel {
	position: absolute;
	left: 50%;
	top: 8vh;
	transform: translateX(-50%);
	width: min(680px, 94vw);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	background: var(--bg, #fff);
	border: 1px solid var(--rule, #ccc);
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}
.dwsearch-overlay__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-bottom: 1px solid var(--rule, #eee);
}
.dwsearch-overlay__input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 11px 12px;
	font-size: 1.0625rem; /* 17px — also keeps iOS from zooming on focus */
	color: var(--ink, #1a1a1a);
	background: var(--bg-2, #f3f3f3);
	border: 1px solid var(--rule, #ccc);
	border-radius: 0;
}
.dwsearch-overlay__input:focus { outline: none; border-color: var(--ink-soft, #52525b); }
.dwsearch-overlay__close {
	flex: none;
	width: 38px;
	height: 38px;
	font-size: 24px;
	line-height: 1;
	color: var(--ink-soft, #666);
	background: transparent;
	border: 0;
	cursor: pointer;
}
.dwsearch-overlay__close:hover { color: var(--rubric, #cc0000); }
/* Status sits inside .dwsearch-overlay__meta — padding is on the wrapper. */
.dwsearch-overlay__status { margin: 0; padding: 0; color: var(--ink-soft, #666); font-size: 0.9375rem; }
.dwsearch-overlay__results { overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 12px; }

/* Phones: the overlay fills the screen (no cramped centred card). */
@media (max-width: 600px) {
	.dwsearch-overlay__panel {
		left: 0;
		top: 0;
		transform: none;
		width: 100%;
		max-height: none;
		height: 100vh;
		height: 100dvh; /* tracks the dynamic mobile browser chrome */
		border: 0;
	}

	/* On narrow viewports, drop the "Treffer" word and the "Sortierung:" label so
	 * count + sort options fit on one line without wrapping. */
	.dwsearch-count__label,
	.dwsearch-sort__label { display: none; }

	/* Switch to short date ("23.06.26") to give long title words room to breathe. */
	.dwsearch-hit__date-long { display: none; }
	.dwsearch-hit__date-short { display: inline; }

	/* Stack title above date on narrow viewports. overflow-wrap:break-word does not
	 * work reliably inside -webkit-box (a known flex/WebKit interaction bug: the
	 * element ignores min-width:0 and bleeds into the date's space). A column layout
	 * eliminates the horizontal competition entirely — title gets the full body
	 * width, date sits below it left-aligned. */
	.dwsearch-hit__head { flex-direction: column; gap: 2px; }
	.dwsearch-hit__meta { align-self: flex-start; }
}