/*
 * Homepage layer — the hero search and the band the listing cards sit on.
 *
 * SCOPE, AND WHY IT IS NOT PAGE-ID BASED
 * Every rule hangs off one of two markers that only exist where the widgets
 * do: `.main-search-container` (Listeo's home-banner widget) and
 * `.listeo-hmf-home-search-results` (the listeo-addons search widget). So this
 * file can be enqueued site-wide and still match nothing on pages that do not
 * carry those widgets, and it keeps working if Home 1 is ever rebuilt or
 * replaced as the front page. No page ID, no body class.
 *
 * The card itself is NOT here — see listing-cards.css. Cards also appear on
 * archives, related listings and the map pages, and they should look the same
 * in all of them.
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

/*
 * A graceful floor under the photo.
 *
 * The banner image is still Listeo's demo file, served from
 * m7lauhbiqx.onrocket.site — a host we do not own. If it ever stops resolving
 * the hero currently goes flat black. This warm ink keeps it looking
 * deliberate until a real Miracle Resorts photograph replaces it.
 */
.main-search-container {
	position: relative;
	background-color: #17130D;
	background-size: cover;
	background-position: center;
}

/*
 * The overlay, as a gradient rather than a flat wash.
 *
 * Elementor's "Background Overlay" control writes #1D1D1DCC — 80% black across
 * the whole image — into the page's own generated stylesheet, at a selector
 * carrying the element ID. That wash is what makes the photograph read as grey
 * noise. There is no specificity that beats a generated ID selector reliably
 * across Elementor versions, so the colour is cleared with !important and the
 * gradient does the work instead: dark at the top so the header stays legible,
 * nearly clear across the middle so the photograph is actually visible, dark
 * again at the foot so the search bar has something to sit on.
 *
 * ⚠️ Clearing it here means the Elementor overlay control no longer does
 * anything on this widget. If someone changes that control and nothing
 * happens, this rule is why.
 */
.main-search-container.container-overlay-solid::before,
.main-search-container::before {
	background-color: transparent !important;
	background-image: linear-gradient(
		180deg,
		rgba(9, 7, 4, .62) 0%,
		rgba(9, 7, 4, .34) 32%,
		rgba(9, 7, 4, .46) 64%,
		rgba(9, 7, 4, .84) 100%
	) !important;
}

.main-search-container .main-search-inner {
	position: relative;
	z-index: 2;
}

/*
 * Eyebrow above the headline.
 *
 * The markup order is h1 then h4, so the trust line prints below the headline.
 * A flex column on the wrapper plus `order: -1` lifts it above without
 * touching the HTML — the h4 is a real heading either way, and screen readers
 * still read it in source order.
 *
 * ⚠️ THE DOUBLED `.main-search-container` ON THE TWO HEADING RULES IS
 * LOAD-BEARING. Elementor writes the widget's own typography and colour
 * controls into the page's generated stylesheet as
 * `.elementor-153 .elementor-element.elementor-element-9582f8f h4` — (0,3,1),
 * exactly what a single `.main-search-container .main-search-inner h4` scores.
 * An exact tie is settled by source order, and whether post-153.css prints
 * before or after this file depends on Elementor's enqueue, which is not ours
 * to rely on. Doubling the class takes it to (0,4,1) and ends the argument.
 * Measured without it: the eyebrow stayed white.
 *
 * The flip side: the banner widget's Title/Subtitle colour controls in
 * Elementor no longer affect this hero. That is the trade, and it is why only
 * the two heading rules are doubled and nothing else in the file is.
 */
.main-search-container .main-search-inner .col-md-12 {
	display: flex;
	flex-direction: column;
}

/* opacity:1 is not decoration. Listeo ships `.main-search-container h4` at
   opacity .65, which is fine for a 24px white sentence and leaves a 13px gold
   eyebrow effectively invisible on a photograph. Measured at .65: unreadable.  */
.main-search-container.main-search-container .main-search-inner h4 {
	order: -1;
	position: relative;
	margin: 0 0 20px;
	padding-top: 22px;
	opacity: 1;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--mr-gold-hi);
	text-shadow: 0 1px 18px rgba(0, 0, 0, .75);
}

/* A 34px gold rule above the eyebrow. Centred with the text when the banner is
   centre-aligned, flush left otherwise — `margin-inline` does both without a
   second rule, because the h4 inherits the banner's text-align. */
.main-search-container.main-search-container .main-search-inner h4::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 2px;
	background: var(--mr-gold-hi);
	opacity: .85;
}

.main-search-container.main-search-container .main-search-inner h1 {
	margin: 0 0 34px;
	font-size: clamp(38px, 4.4vw, 62px);
	font-weight: 500;
	line-height: 1.06;
	color: #fff;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .38);
}

/* The typed word is the moving part, so it is the one that carries the gold. */
.main-search-container.main-search-container .main-search-inner h1 .typed-words {
	color: var(--mr-gold-hi);
}

.main-search-container.main-search-container .main-search-inner h1 .typed-cursor {
	color: var(--mr-gold-hi);
	font-weight: 300;
	opacity: .7;
}

/* ==========================================================================
   2. Hero search bar
   ========================================================================== */

/*
 * One raised white slab, not five stacked boxes.
 *
 * Listeo builds the bar as a flex row of .main-search-input-item cells inside a
 * white pill. The pill was 68px tall with a faint 8px shadow, which read as a
 * form control rather than the main thing on the page. Taller, rounder, and a
 * proper drop shadow makes it the object the eye lands on.
 *
 * align-items moves from flex-start to center so the cells, the category
 * drilldown (47px) and the button (56px) all share one optical centre line.
 */
.main-search-container .main-search-form .main-search-input {
	align-items: center;
	padding: 10px 10px 10px 4px;
	border-radius: 999px;
	background: #fff;
	box-shadow:
		0 28px 64px rgba(0, 0, 0, .30),
		0 2px 6px rgba(0, 0, 0, .10);
}

/*
 * The cell dividers exist only while the bar is actually a row.
 *
 * Listeo switches .main-search-input from flex to block at 992px and stacks the
 * four cells; a `border-right` there draws a stray vertical line down the right
 * edge of each stacked field. Measured at 900px before this was gated: four of
 * them. 993px is Listeo's own breakpoint, not a new one.
 */
@media (min-width: 993px) {
	.main-search-container .main-search-form .main-search-input-item {
		padding: 0 22px;
		border-right: 1px solid var(--mr-line-soft);
	}

	.main-search-container .main-search-form .main-search-input-item:first-child {
		padding-left: 28px;
	}
}

.main-search-container .main-search-form .main-search-input input[type="text"],
.main-search-container .main-search-form .main-search-input .drilldown-menu {
	height: 44px;
	font-size: 15px;
	color: var(--mr-ink);
}

.main-search-container .main-search-form .main-search-input input::placeholder {
	color: var(--mr-muted);
	opacity: 1;
}

/* The calendar glyph and the drilldown chevron, in gold rather than grey. */
.main-search-container .main-search-form .main-search-input-item i,
.main-search-container .main-search-form .main-search-input-item .sl,
.main-search-container .main-search-form .drilldown-menu:after {
	color: var(--mr-gold);
}

/*
 * The Search button.
 *
 * background-image rather than background-color: Listeo paints .button from
 * --primary-color, and layering the gradient on top leaves that flat colour in
 * place underneath as a fallback if the gradient is ever unsupported.
 */
.main-search-container .main-search-form .main-search-input button.button {
	height: 56px;
	padding: 0 44px;
	border-radius: 999px;
	background-color: #B27F26;
	background-image: var(--mr-gold-grad);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 10px 26px rgba(120, 84, 20, .36);
	transition:
		transform .28s var(--mr-ease),
		box-shadow .28s var(--mr-ease),
		filter .28s ease;
}

.main-search-container .main-search-form .main-search-input button.button:hover,
.main-search-container .main-search-form .main-search-input button.button:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 16px 34px rgba(120, 84, 20, .44);
	filter: brightness(1.04);
}

.main-search-container .main-search-form .main-search-input button.button:active {
	transform: translateY(0);
}

/*
 * "Use advanced search page" moves out of the pill.
 *
 * It is a preference, not a search field, and inside the white slab it took
 * 236px — more room than any of the four real inputs — and made the bar look
 * like a settings panel. Below the bar, in white on the photograph, it stays
 * available without competing.
 *
 * Desktop only: at 992px and under Listeo stacks the bar into a column, and an
 * absolutely positioned child would land on top of the button. Below that
 * breakpoint it simply stays in flow.
 */
@media (min-width: 993px) {
	.main-search-container .main-search-form .main-search-input {
		position: relative;
	}

	.main-search-container .main-search-form .listeo-hmf-search-mode-toggle {
		position: absolute;
		top: 100%;
		left: 26px;
		margin: 18px 0 0;
		padding: 0;
	}

	/* The colour has to go on the <span>, not only the <label>: the plugin
	   styles the span itself at #444, which on a photograph is invisible. */
	.main-search-container .main-search-form .listeo-hmf-search-mode-toggle label,
	.main-search-container .main-search-form .listeo-hmf-search-mode-toggle label span {
		gap: 9px;
		font-size: 13px;
		font-weight: 500;
		color: rgba(255, 255, 255, .9);
		text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
	}

	.main-search-container .main-search-form .listeo-hmf-search-mode-toggle input {
		width: 16px;
		height: 16px;
		accent-color: var(--mr-gold);
	}
}

/* ==========================================================================
   3. The band the cards sit on
   ========================================================================== */

/*
 * The warm ground the cards sit on.
 *
 * FIRST ATTEMPT, AND WHY IT WAS WRONG
 * The widget is 1180px wide inside Elementor's boxed container, so there is no
 * element to paint edge to edge, and the obvious trick is
 * `box-shadow: 0 0 0 100vmax` clipped back with `clip-path`. It works, but it
 * paints a band exactly as tall as the widget — and the widget does not touch
 * the hero above it or the footer below it. Measured on staging: a 10px white
 * strip above (Elementor's .e-con-inner padding), 48px more (the widget's own
 * top margin) and 30px below. Bleeding the shadow far enough to cover those
 * meant painting cream over the bottom of the hero photograph.
 *
 * WHAT IS HERE INSTEAD
 * `.container.content-container` already spans the full window width and runs
 * from the top of the hero to the top of the footer — exactly the region that
 * should be warm. The hero paints its own opaque background over its share of
 * it, so colouring the container shows only below the hero. No shadow, no
 * clip-path, no negative margins, and nothing that can produce a horizontal
 * scrollbar.
 *
 * The `:has()` keeps it to pages that actually carry the listings widget. If a
 * browser does not support `:has()` the page simply stays white and every other
 * rule here still applies — the cards are legible either way.
 */
.content-container:has(.listeo-hmf-home-search-results) {
	background: var(--mr-cream);
}

.listeo-hmf-home-search-results {
	position: relative;
	padding: 56px 0 72px;
}

/*
 * The widget's own 48px Elementor top margin sits between the hero and the
 * sort bar, on top of this file's 56px. It is set on .elementor-widget-container
 * rather than on the element itself, which is why zeroing the element alone did
 * nothing — both are needed.
 */
#miracles-home-search-results,
#miracles-home-search-results > .elementor-widget-container {
	margin-top: 0 !important;
}

/* A warm glow where the band meets the hero, so the join is not a hard line. */
.listeo-hmf-home-search-results::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	width: min(1180px, 94vw);
	height: 240px;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(62% 100% at 50% 0%, rgba(190, 139, 51, .13), rgba(190, 139, 51, 0) 72%);
}

.listeo-hmf-home-search-results > * {
	position: relative;
	z-index: 1;
}

/*
 * "Sort by:" — demoted to a label.
 *
 * It was 18px/600 in a blue-grey (#2d3446), which gave it the same weight as a
 * section heading and the wrong temperature for the page. Small, uppercase and
 * warm grey reads as what it is: the caption on the control beside it.
 */
.listeo-hmf-home-search-results .listeo-hmf-sort-bar {
	margin: 0 0 30px;
}

.listeo-hmf-home-search-results .listeo-hmf-sort-bar__label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mr-muted);
}

/* A little more air between cards than Listeo's 25px, now that they carry a
   shadow that needs somewhere to fall. */
.listeo-hmf-home-search-results .new-grid-layout-nl {
	gap: 30px;
}

/*
 * Stacked bar, 992px and down.
 *
 * A 999px radius on a slab that is now ~370px tall reads as a capsule, not a
 * search bar, so the radius drops to a rounded rectangle. Listeo gives each
 * stacked field its own bordered box at this size, which is why the cells only
 * need padding here and no dividers of their own.
 */
@media (max-width: 992px) {
	.main-search-container .main-search-form .main-search-input {
		padding: 14px;
		border-radius: 22px;
	}

	.main-search-container .main-search-form .main-search-input-item {
		padding: 0 8px;
	}
}

@media (max-width: 767px) {
	.listeo-hmf-home-search-results {
		padding: 36px 0 48px;
	}

	.main-search-container.main-search-container .main-search-inner h1 {
		margin-bottom: 26px;
	}
}