/**
 * core/search block styles.
 *
 * Deux usages sur le site :
 *  - HEADER (variante "button-only") : loupe seule, click déploie le champ
 *    via l'Interactivity API du core. La classe
 *    .wp-block-search__searchfield-hidden saute quand le contexte
 *    `isSearchInputVisible` passe à true.
 *  - PAGE RÉSULTATS (variante "button-inside") : grosse barre de recherche
 *    pré-remplie dans le bandeau or-3.
 *
 * Auto-enqueué via Assets.php uniquement sur les pages qui contiennent
 * un bloc core/search.
 *
 * Note: regroupement par cas d'usage (button-inside puis button-only)
 * plutôt que par spécificité — la règle no-descending-specificity gêne
 * cette organisation, on la désactive pour ce fichier.
 */

/* stylelint-disable no-descending-specificity */

/* ============================================================
 * BUTTON-INSIDE : page de résultats (gros champ pré-rempli)
 * ============================================================ */

.wp-block-search__button-inside {
	margin: 0 auto;
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--blanc, #fff);
	border: 1px solid var(--wp--preset--color--bleu-7, #e7e7f4);
	border-radius: 1rem;
	box-shadow: var(--wp--preset--shadow--small-light, 0 1px 2px rgb(0 0 0 / 5%));
	overflow: hidden;
}

.wp-block-search__button-inside .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 1.25rem 1.5rem;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--bleu-3, #2d2f73);
	font-size: 1rem;
	line-height: 1.4;
}

.wp-block-search__button-inside .wp-block-search__input::placeholder {
	color: rgb(45 47 115 / 55%);
}

.wp-block-search__button-inside .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

.wp-block-search__button-inside .wp-block-search__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-3, #2d2f73);
	outline-offset: -2px;
}

.wp-block-search__button-inside .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0.5rem;
	padding: 0;
	width: 44px;
	height: 44px;
	background: var(--wp--preset--color--or-3, #f5ede4);
	color: var(--wp--preset--color--bleu-3, #2d2f73);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wp-block-search__button-inside .wp-block-search__button:hover,
.wp-block-search__button-inside .wp-block-search__button:focus-visible {
	background: var(--wp--preset--color--or-2, #dfcdb9);
}

.wp-block-search__button-inside .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentcolor;
}

@media (max-width: 768px) {

	.wp-block-search__button-inside .wp-block-search__input {
		padding: 0.875rem 1rem;
	}

	.wp-block-search__button-inside .wp-block-search__button {
		width: 36px;
		height: 36px;
		margin: 0.35rem;
	}
}

/* ============================================================
 * BUTTON-ONLY : loupe dans le header (click pour déployer)
 * ============================================================ */

/* La couleur de l'icône loupe matche les social-links du header. */
.wp-block-search__button-only {
	position: relative;
	margin: 0;
	color: var(--wp--preset--color--or-1, #cbae8d);
}

.wp-block-search__button-only .wp-block-search__inside-wrapper {
	display: flex;
	align-items: center;
	gap: 4px;

  .wp-block-search__input {
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 0.5px 1px rgb(0 0 0 / 4%);
  }
}

.wp-block-search__button-only .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-search__button-only .wp-block-search__button:hover,
.wp-block-search__button-only .wp-block-search__button:focus-visible {
	background-color: rgb(0 0 0 / 5%);
}

.wp-block-search__button-only .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-3, #2d2f73);
	outline-offset: 2px;
}

.wp-block-search__button-only .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentcolor;
}

/* Champ caché en mode collapsed (classe gérée par l'Interactivity API). */
.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input {
	width: 0;
	min-width: 0;
	padding: 0;
	border: none;
	visibility: hidden;
}

/* Champ déployé : input visible, animé. */
.wp-block-search__button-only .wp-block-search__input {
	height: 40px;
	padding: 0 1rem;
	background: var(--wp--preset--color--blanc, #fff);
	color: var(--wp--preset--color--bleu-3, #2d2f73);
	border: 1px solid var(--wp--preset--color--bleu-7, #e7e7f4);
	border-radius: 999px;
	box-sizing: border-box;
	font-size: 0.95rem;
	line-height: 1.2;
	transition: width 0.25s ease;
}

.wp-block-search__button-only .wp-block-search__input::placeholder {
	color: rgb(45 47 115 / 55%);
}

.wp-block-search__button-only .wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--bleu-3, #2d2f73);
	outline-offset: 2px;
}

/* Desktop : input largeur fixe à gauche du bouton. */
@media (min-width: 769px) {

	.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		width: 300px;
	}
}

/* Desktop : retirer la nav du flux quand la search est ouverte
   (display:none plutôt que visibility:hidden pour libérer vraiment la place
   et éviter que le header passe sur 2 lignes). */
@media (min-width: 769px) {

	.wp-block-group:has(.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden)) > .wp-block-navigation {
		display: none;
	}
}

/* Mobile : overlay plein écran quand la search est ouverte. */
@media (max-width: 768px) {

	.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) {
		position: fixed;
		inset: 0;
		z-index: 10000;
		display: flex;
		align-items: flex-start;
		padding: 1.25rem;
		padding-top: max(1.25rem, env(safe-area-inset-top, 0));
		background: var(--wp--preset--color--blanc, #fff);
		box-sizing: border-box;
	}

	.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
		width: 100%;
		gap: 8px;
	}

	.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		flex: 1 1 auto;
		height: 48px;
		width: auto;
		font-size: 1rem;
	}

	.wp-block-search__button-only:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
		color: var(--wp--preset--color--bleu-3, #2d2f73);
	}
}