/* ==========================================================================
   CGT OBS — site search (header button + overlay + live preview)
   ========================================================================== */

:root {
	--cgtobs-red: var(--cgt-red, #d71920);
	--cgtobs-red-dark: var(--cgt-red-hover, #b51218);
	--cgtobs-black: var(--cgt-black, #111111);
	--cgtobs-gray: var(--cgt-gray, #4f4f4f);
	--cgtobs-light: var(--cgt-bg-light, #f5f5f5);
	--cgtobs-white: var(--cgt-white, #ffffff);
	--cgtobs-radius: var(--cgt-radius, 10px);
}

/* --------------------------------------------------------------------------
   1. Search button (header menu or search widget)
   -------------------------------------------------------------------------- */
.cgtobs-menu-search .cgtobs-search-toggle,
.cgtobs-search-widget .cgtobs-search-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--cgtobs-red);
	border: 0;
	padding: 0.4rem 0.6rem;
	font: inherit;
	color: var(--cgtobs-white);
	cursor: pointer;
	transition: background 0.2s ease;
	height: 40px;
	/* Astra's own button radius, so the toggle matches native buttons instead
	   of competing with them. Restated on :hover below: Elementor's kit swaps
	   the hover state to 10px, which would reshape the button mid-hover. */
	border-radius: 4px;
}

/* Hover darkens the fill, like every other red button on the site. The label
   stays white throughout. */
.cgtobs-menu-search .cgtobs-search-toggle:hover,
.cgtobs-search-widget .cgtobs-search-toggle:hover {
	background: var(--cgtobs-red-dark);
	color: var(--cgtobs-white);
	border-radius: 4px;
}

.cgtobs-search-toggle .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 1;
}

/* Keep "Rechercher" on a single line — never wrap inside the button. */
.cgtobs-search-toggle__label {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Overlay
   -------------------------------------------------------------------------- */
body.cgtobs-search-open {
	overflow: hidden;
}

.cgtobs-search-modal[hidden] {
	display: none;
}

/* Predictable box model inside the modal (avoids inherited theme button padding). */
.cgtobs-search-modal,
.cgtobs-search-modal *,
.cgtobs-search-modal *::before,
.cgtobs-search-modal *::after {
	box-sizing: border-box;
}

.cgtobs-search-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(1rem, 6vh, 6rem) 1rem 1rem;
}

.cgtobs-search-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(17, 17, 17, 0.55);
	backdrop-filter: blur(2px);
}

.cgtobs-search-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 720px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	background: var(--cgtobs-white);
	border-radius: var(--cgtobs-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	animation: cgtobs-search-in 0.18s ease;
}

@keyframes cgtobs-search-in {
	from {
		transform: translateY(-12px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.cgtobs-search-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	line-height: 1;
	border: 0;
	border-radius: 50% !important;
	background: var(--cgtobs-light) !important;
	color: var(--cgtobs-black) !important;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.cgtobs-search-modal__close .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 1;
}

.cgtobs-search-modal__close:hover {
	background: var(--cgtobs-red) !important;
	color: var(--cgtobs-white) !important;
	border-radius: 50% !important;
}

/* --------------------------------------------------------------------------
   3. Search form
   -------------------------------------------------------------------------- */
.cgtobs-search-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	/* Extra right padding keeps the submit button clear of the close button. */
	padding: 1.25rem 4.25rem 1.25rem 1.25rem;
	border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.cgtobs-search-form__icon {
	color: var(--cgtobs-red);
	font-size: 22px;
	width: 22px;
	height: 22px;
	line-height: 1;
	flex: 0 0 auto;
}

.cgtobs-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	outline: none;
	font: inherit;
	font-size: 1.1rem;
	color: var(--cgtobs-black);
	background: transparent;
	padding: 0.35rem 0;
}

.cgtobs-search-form__input::placeholder {
	color: #9a9a9a;
}

.cgtobs-search-form__submit {
	flex: 0 0 auto;
	background: var(--cgtobs-red) !important;
	color: var(--cgtobs-white) !important;
	border: 0;
	border-radius: var(--cgt-radius-sm, 6px) !important;
	padding: 0.55rem 1rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.cgtobs-search-form__submit:hover {
	background: var(--cgtobs-red-dark) !important;
	color: var(--cgtobs-white) !important;
	border-radius: var(--cgt-radius-sm, 6px) !important;
}

/* --------------------------------------------------------------------------
   4. Results
   -------------------------------------------------------------------------- */
.cgtobs-search-results {
	overflow-y: auto;
	padding: 0.5rem 1.25rem 1.25rem;
}

.cgtobs-search-results__msg {
	margin: 0;
	padding: 1.5rem 0;
	text-align: center;
	color: var(--cgtobs-gray);
	font-size: 0.95rem;
}

.cgtobs-search-results__msg.is-loading::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 0.5rem;
	vertical-align: -3px;
	border: 2px solid rgba(215, 25, 32, 0.25);
	border-top-color: var(--cgtobs-red);
	border-radius: 50%;
	animation: cgtobs-spin 0.7s linear infinite;
}

@keyframes cgtobs-spin {
	to {
		transform: rotate(360deg);
	}
}

.cgtobs-search-group {
	padding-top: 1rem;
}

/* Real <h3> (built in search.js): font-family and font-weight are inherited from
   the Customizer's heading settings rather than pinned here, so the modal's group
   titles match the rest of the site. */
.cgtobs-search-modal .cgtobs-search-group__title {
	margin: 0 0 0.5rem !important;
	font-size: var(--cgtobs-h3, 24px) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: var(--cgtobs-red) !important;
}

.cgtobs-search-group__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.25rem;
}

/* Post result */
.cgtobs-search-post {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
	border-radius: var(--cgt-radius-sm, 6px);
	text-decoration: none;
	transition: background 0.15s ease;
}

.cgtobs-search-post:hover {
	background: var(--cgtobs-light);
}

.cgtobs-search-post__thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: var(--cgt-radius-sm, 6px);
	overflow: hidden;
	background: var(--cgtobs-light);
}

.cgtobs-search-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cgtobs-search-post__body {
	min-width: 0;
}

.cgtobs-search-post__title {
	display: block;
	color: var(--cgtobs-black);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.35;
}

.cgtobs-search-post:hover .cgtobs-search-post__title {
	color: var(--cgtobs-red);
}

.cgtobs-search-post__date {
	display: block;
	color: var(--cgtobs-gray);
	font-size: 0.78rem;
	margin-top: 0.15rem;
}

/* Term / author result (pill row) */
.cgtobs-search-group--inline .cgtobs-search-group__list {
	grid-auto-flow: row;
}

.cgtobs-search-term {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.6rem;
	border-radius: var(--cgt-radius-sm, 6px);
	text-decoration: none;
	color: var(--cgtobs-black);
	transition: background 0.15s ease, color 0.15s ease;
}

.cgtobs-search-term:hover {
	background: var(--cgtobs-light);
	color: var(--cgtobs-red);
}

.cgtobs-search-term__name {
	font-size: 0.92rem;
	font-weight: 500;
}

.cgtobs-search-term__count {
	font-size: 0.72rem;
	color: var(--cgtobs-gray);
	background: var(--cgtobs-light);
	border-radius: 999px;
	padding: 0.05rem 0.5rem;
}

.cgtobs-search-term:hover .cgtobs-search-term__count {
	background: rgba(215, 25, 32, 0.12);
}

/* See-all footer */
.cgtobs-search-results__footer {
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(17, 17, 17, 0.08);
	text-align: center;
}

.cgtobs-search-seeall {
	display: inline-block;
	font-weight: 600;
	color: var(--cgtobs-red);
	text-decoration: none;
}

.cgtobs-search-seeall:hover {
	color: var(--cgtobs-red-dark);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Modal — phone layout (full-screen)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.cgtobs-search-modal {
		padding: 0;
	}

	.cgtobs-search-modal__panel {
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.cgtobs-search-modal__close {
		top: 0.5rem;
		right: 0.5rem;
	}

	.cgtobs-search-form {
		padding: 1rem 3.25rem 1rem 1rem;
		gap: 0.4rem;
	}

	.cgtobs-search-form__icon {
		font-size: 20px;
		width: 20px;
		height: 20px;
	}

	.cgtobs-search-form__input {
		font-size: 1rem; /* 16px keeps iOS from zooming on focus */
	}

	.cgtobs-search-form__submit {
		padding: 0.5rem 0.8rem;
	}

	.cgtobs-search-results {
		padding: 0.5rem 1rem 1.25rem;
	}
}

/* --------------------------------------------------------------------------
   6. Search widget as a centred red CTA button on mobile
      (placed at the bottom of the off-canvas menu). Scoped by our own
      .cgtobs-search-widget class + the mobile breakpoint, so it reliably
      targets the off-canvas instance regardless of Astra's wrapper markup.
      Change the vertical padding below to make it taller/shorter.
   -------------------------------------------------------------------------- */
@media (max-width: 921px) {
	.cgtobs-search-widget {
		text-align: center;
		padding: 0.5rem 0;
	}

	.cgtobs-search-widget .cgtobs-search-toggle {
		display: inline-flex;
		justify-content: center;
		gap: 0.5rem;
		height: auto;
		/* ~10px taller than the menu items — tweak this vertical padding. */
		padding: 0.85rem 1.75rem;
		background: var(--cgt-red, #d71920);
		color: #ffffff;
		border-radius: var(--cgt-radius, 10px);
		font-weight: 600;
	}

	.cgtobs-search-widget .cgtobs-search-toggle:hover {
		background: var(--cgt-red-hover, #b51218);
		color: #ffffff;
	}
}