/**
 * Architerra Customizations — Search Map Collapse
 *
 * Makes the property listing results map collapsible via a tab-style
 * toggle handle, and pins the map + toggle to the top of the viewport
 * while scrolling. Default state collapsed. Animation: 250ms ease.
 *
 * Layout (constructed by JS):
 *
 *   .architerra-rhc-map-sticky          ← position:sticky;top:0;z-index
 *     ├── .architerra-rhc-collapsible    ← max-height transitions 0 ↔ 100vh
 *     └── .architerra-rhc-map-controls   ← full-width blue bar (::before)
 *           └── .architerra-rhc-map-toggle  ← rounded-bottom tab handle
 *
 * The collapse rules key off the .architerra-rhc-collapsible class
 * applied by JS — same CSS works for any of the various RealHomes
 * map containers (.rh_map, .rh_map__search, .rh_page__listing_map).
 *
 * Why collapse with max-height instead of display:none — even though
 * the map is visually hidden on first load, the inner #map-head keeps
 * its theme-defined CSS dimensions (60rem desktop / 50rem tablet),
 * so Google Maps initializes at correct dimensions behind the scenes.
 * When the user expands, the modern Maps API auto-detects the
 * container resize via ResizeObserver and re-renders tiles. JS also
 * dispatches window 'resize' as a safety net for older Maps API.
 */

/* ==========================================================================
   Sticky wrapper
   --------------------------------------------------------------------------
   Pins the map + controls to the top of the viewport as the user scrolls
   through the listings below. The wrapper sticks within its parent's
   scroll context — typically the property listing page's main column,
   which is tall enough (full listings height) for sticky to engage.
   ========================================================================== */
.architerra-rhc-map-sticky {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
}

/* ==========================================================================
   Collapsible map wrapper
   ========================================================================== */
.architerra-rhc-collapsible {
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
}

/* Open state. 100vh comfortably fits the theme's #map-head height
 * (60rem desktop, 50rem mobile) on essentially any screen. */
.architerra-rhc-collapsible.is-open {
	max-height: 100vh;
}

/* The .rh_map__search variant has a theme-applied negative margin-top on
 * #map-head that pulls the map up to overlap the search form above. With
 * the map collapsed, that overlap looks weird (clipped tiles peeking up
 * past the search form area), so reset it while collapsed. Restore it at
 * the breakpoints where the original theme CSS defines it when open. */
.rh_map__search.architerra-rhc-collapsible #map-head {
	margin-top: 0 !important;
}

@media ( min-width: 1024px ) {
	.rh_map__search.architerra-rhc-collapsible.is-open #map-head {
		margin-top: -4.5rem !important;
	}
}

@media ( min-width: 1140px ) {
	.rh_map__search.architerra-rhc-collapsible.is-open #map-head {
		margin-top: -4rem !important;
	}
}

@media ( min-width: 1280px ) {
	.rh_map__search.architerra-rhc-collapsible.is-open #map-head {
		margin-top: -4.75rem !important;
	}
}

/* ==========================================================================
   Controls strip — full-width blue bar with toggle handle
   --------------------------------------------------------------------------
   The bar runs full viewport width (100vw with a centered transform, so
   it ignores any max-width on parent containers and reaches edge to
   edge). The toggle button hangs off the bar's bottom edge.
   ========================================================================== */
.architerra-rhc-map-controls {
	position: relative;
	width: 100%;
	padding-top: 4px;
	/* leaves room for the bar at the very top. */
	padding-bottom: 1.2rem;
	text-align: center;
	background: #fff;
}

/* Full-viewport-width blue bar at the top of the controls strip. */
.architerra-rhc-map-controls::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 4px;
	background: var(--rh-global-color-primary, #1f7da3);
	z-index: 1;
}

/* ==========================================================================
   Tab-handle toggle button
   --------------------------------------------------------------------------
   Centered horizontally below the bar. Flat top corners + rounded bottom
   corners give it the visual feel of a tab "hanging" from the bar.
   ========================================================================== */
.architerra-rhc-map-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	margin: 0;
	padding: .9rem 2.4rem;
	background: var(--rh-global-color-primary, #1f7da3);
	color: #fff;
	font-family: inherit;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.4;
	border: none;
	border-radius: 0 0 6px 6px;
	/* flat top, rounded bottom — "tab" look. */
	cursor: pointer;
	transition: background .2s ease, transform .15s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
	position: relative;
	z-index: 2;
}

.architerra-rhc-map-toggle:hover, .architerra-rhc-map-toggle:focus {
	background: var(--rh-global-color-primary-dark, #155a76);
	color: #fff;
	transform: translateY(1px);
	outline: none;
}

.architerra-rhc-map-toggle:focus-visible {
	outline: 2px solid var(--rh-global-color-secondary, #ea723d);
	outline-offset: 2px;
}

.architerra-rhc-map-toggle__label {
	font: inherit;
}

.architerra-rhc-map-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	line-height: 1;
	transition: transform .25s ease;
}

/* Rotate chevron when map is open. The selector traverses from the
 * collapsible wrapper to its sibling controls, then down to the icon. */
.architerra-rhc-collapsible.is-open ~ .architerra-rhc-map-controls .architerra-rhc-map-toggle__icon {
	transform: rotate(180deg);
}