/*
 * Page de résultats de recherche (/?s=..., search.php) — demande explicite
 * de Jordan : l'icône de recherche de la nav était honnêtement désactivée
 * faute de destination réelle, elle doit maintenant être pleinement
 * fonctionnelle. Même esprit "zone sombre continue" que events-dons.css/
 * messages-hero.css, cartes en verre dépoli cohérentes avec le reste du site.
 */

.nwc-search-darkzone {
	position: relative;
	background-color: var(--nwc-ink);
	overflow: hidden;
	padding-bottom: var(--nwc-space-9);
	min-height: 60vh;
}

.nwc-search-darkzone__atmosphere {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(55rem 38rem at 15% -10%, oklch(74% 0.135 75 / 0.22), transparent 58%),
		radial-gradient(48rem 36rem at 95% 10%, oklch(42% 0.15 27 / 0.26), transparent 60%);
}

.nwc-search-hero {
	position: relative;
	z-index: 1;
	/* --nwc-eb-header-offset n'est posée que par js/etudes-bibliques.js (jamais
	   chargé ici, cf. functions.php) : sur cette page le repli
	   var(--nwc-header-height) s'applique TOUJOURS — comportement voulu, pas un
	   bug. Variable reprise telle quelle (cohérence visuelle avec le decalage
	   déjà en place sur le gabarit étude biblique) plutôt que dupliquée sous un
	   autre nom pour un calc() identique. */
	padding-top: calc(var(--nwc-eb-header-offset, var(--nwc-header-height)) + var(--nwc-space-6));
	padding-bottom: var(--nwc-space-7);
}

.nwc-search-form {
	display: flex;
	gap: var(--nwc-space-3);
	max-width: 36rem;
}

.nwc-search-form__input {
	flex: 1 1 auto;
	font-family: var(--nwc-font-body);
	font-size: var(--nwc-text-body);
	color: var(--nwc-ink);
	background: var(--nwc-paper);
	border: 1px solid var(--nwc-mist-deep);
	border-radius: var(--nwc-radius-md);
	padding: 0.85rem 1.1rem;
}

.nwc-search-form__input:focus-visible {
	outline: 2px solid var(--nwc-gold);
	outline-offset: 2px;
}

.nwc-search-form__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: none;
	border-radius: var(--nwc-radius-md);
	background: var(--nwc-gold);
	color: var(--nwc-ink);
	cursor: pointer;
	transition: background var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-search-form__submit:hover,
.nwc-search-form__submit:focus-visible {
	background: var(--nwc-gold-deep);
}

.nwc-search-form__submit svg {
	width: 1.3rem;
	height: 1.3rem;
}

.nwc-search-results {
	position: relative;
	z-index: 1;
}

.nwc-search-results__count {
	font-family: var(--nwc-font-mono);
	font-size: var(--nwc-text-small);
	color: oklch(97% 0.014 83 / 0.7);
	margin: 0 0 var(--nwc-space-5);
}

.nwc-search-results__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: var(--nwc-space-5);
}

.nwc-search-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: oklch(100% 0 0 / 0.06);
	border: 1px solid oklch(97% 0.014 83 / 0.14);
	border-radius: var(--nwc-radius-lg);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	padding: var(--nwc-space-5);
	transition: transform var(--nwc-duration-fast) var(--nwc-ease), background var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-search-card:hover,
.nwc-search-card:focus-visible {
	transform: translateY(-3px);
	background: oklch(100% 0 0 / 0.1);
}

.nwc-search-card__type {
	display: inline-block;
	font-family: var(--nwc-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nwc-gold);
	margin-bottom: var(--nwc-space-2);
}

.nwc-search-card__title {
	font-family: var(--nwc-font-display);
	font-size: var(--nwc-text-h3);
	color: var(--nwc-cream);
	margin: 0 0 var(--nwc-space-2);
}

.nwc-search-card__excerpt {
	font-family: var(--nwc-font-body);
	font-size: var(--nwc-text-small);
	line-height: var(--nwc-leading-body);
	color: oklch(97% 0.014 83 / 0.78);
	margin: 0;
}

.nwc-search-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nwc-space-2);
	margin-top: var(--nwc-space-7);
	font-family: var(--nwc-font-mono);
	font-size: var(--nwc-text-small);
}

.nwc-search-pagination a,
.nwc-search-pagination span {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	border-radius: var(--nwc-radius-sm);
	color: var(--nwc-cream);
	text-decoration: none;
}

.nwc-search-pagination a {
	background: oklch(100% 0 0 / 0.08);
}

.nwc-search-pagination a:hover {
	background: var(--nwc-gold);
	color: var(--nwc-ink);
}

.nwc-search-pagination .current {
	background: var(--nwc-gold);
	color: var(--nwc-ink);
	font-weight: 600;
}

@media (max-width: 48rem) {
	.nwc-search-hero {
		padding-top: calc(var(--nwc-eb-header-offset, var(--nwc-header-height)) + var(--nwc-space-5));
	}
}

/* ---------------------------------------------------------------------------
   Modale de recherche instantanée (demande de Jordan, 10/10/2026) — remplace
   le lien direct vers /?s= : suggestions en direct dès 3 caractères via
   /wp-json/wp/v2/search (js/search-modal.js). Même grammaire verre dépoli que
   le reste du thème (header.css, lien.css), jamais réinventée.
--------------------------------------------------------------------------- */
.nwc-search-modal[hidden] {
	display: none;
}

.nwc-search-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 10vh var(--nwc-space-4) var(--nwc-space-5);
}

.nwc-search-modal__backdrop {
	position: absolute;
	inset: 0;
	background: oklch(15% 0.03 265 / 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.nwc-search-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 38rem;
	background: oklch(99% 0.004 90 / 0.98);
	border: 1px solid oklch(23% 0.05 265 / 0.12);
	border-radius: var(--nwc-radius-lg);
	box-shadow: 0 30px 70px oklch(15% 0.03 265 / 0.4);
	padding: var(--nwc-space-4);
	max-height: 75vh;
	display: flex;
	flex-direction: column;
	gap: var(--nwc-space-3);
}

.nwc-search-modal__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--nwc-space-2);
	border: 1px solid oklch(23% 0.05 265 / 0.16);
	border-radius: var(--nwc-radius-md);
	padding: 0.7rem var(--nwc-space-4);
}

.nwc-search-modal__icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--nwc-ink-soft);
}

.nwc-search-modal__input {
	flex: 1 1 auto;
	border: none;
	background: transparent;
	font-family: var(--nwc-font-body);
	font-size: 1.05rem;
	color: var(--nwc-ink);
	min-width: 0;
}

.nwc-search-modal__input:focus-visible {
	outline: none;
}

.nwc-search-modal__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	border: none;
	border-radius: var(--nwc-radius-sm);
	background: oklch(23% 0.05 265 / 0.06);
	color: var(--nwc-ink-soft);
	cursor: pointer;
}

.nwc-search-modal__close svg {
	width: 14px;
	height: 14px;
}

.nwc-search-modal__close:hover {
	background: oklch(23% 0.05 265 / 0.12);
}

.nwc-search-modal__hint {
	font-family: var(--nwc-font-mono);
	font-size: var(--nwc-text-small);
	color: var(--nwc-ink-soft);
	margin: 0;
	padding: 0 var(--nwc-space-2);
}

.nwc-search-modal__results {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.nwc-search-modal__result a {
	display: flex;
	align-items: baseline;
	gap: var(--nwc-space-3);
	padding: 0.65rem var(--nwc-space-3);
	border-radius: var(--nwc-radius-sm);
	text-decoration: none;
	color: var(--nwc-ink);
}

.nwc-search-modal__result a:hover,
.nwc-search-modal__result a.is-active {
	background: oklch(74% 0.135 75 / 0.14);
}

.nwc-search-modal__result-type {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 5rem;
}

.nwc-search-modal__result-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: var(--nwc-gold);
}

.nwc-search-modal__result-icon svg {
	width: 100%;
	height: 100%;
}

.nwc-search-modal__result-type-label {
	font-family: var(--nwc-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--nwc-gold);
}

.nwc-search-modal__result-title {
	font-size: 0.95rem;
}

.nwc-search-modal__all {
	display: block;
	text-align: center;
	font-family: var(--nwc-font-mono);
	font-size: var(--nwc-text-small);
	color: var(--nwc-ink-soft);
	text-decoration: underline;
	padding-top: var(--nwc-space-2);
	border-top: 1px solid oklch(23% 0.05 265 / 0.1);
}

.nwc-search-modal__all[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.nwc-search-modal__panel {
		animation: nwc-search-modal-in var(--nwc-duration-fast) var(--nwc-ease);
	}
}

@keyframes nwc-search-modal-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}