/*
 * Starlight Property Map. Brand palette only: Deep Navy #0C3C46, Sunset
 * Orange #F36C1F, Cream #F7EBE1, Sage Green #668D7F, Golden Yellow #E7A93B,
 * White #FFFFFF (plus alpha variants of those same six values). No other hex
 * values in this file.
 *
 * REBUILT 2026-07-25: (1) hotspot dots are bigger + fully cover their
 * letter on desktop, smaller on mobile to stop 14 pins from covering the
 * map; (2) the details panel is now a normal in-flow section BELOW the
 * stage, no overlay/backdrop/bottom-sheet; (3) the stage supports a
 * pinch-zoom-pan layer on mobile so the PAGE never zooms, only the map
 * inside its own box (see the JS for the gesture handling; touch-action
 * below is the CSS half of that contract).
 */

.starlight-property-map-wrap {
	position: relative;
	width: 100%;
}

.starlight-property-map__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 2560 / 1440;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba( 12, 60, 70, 0.25 );
	background: #F7EBE1;
}

/*
 * Everything that needs to zoom/pan together (image + hotspots) lives in
 * this layer so the JS only ever transforms one element. touch-action is
 * set here (not just in JS) as a second, CSS-only line of defense: "pan-y"
 * tells the browser this element supports native single-finger vertical
 * scroll but NOT native pinch-zoom, so a two-finger gesture starting on the
 * map can never fall through to the browser's default page-zoom behavior
 * even if the JS gesture handler fails to load. The JS then implements the
 * actual zoom/pan visually via transform on this same layer.
 */
.starlight-property-map__zoom-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform-origin: center center;
	touch-action: pan-y;
}

.starlight-property-map__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.starlight-property-map__static-fallback {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

/*
 * Desktop hotspot: enlarged so the circle visibly reads as a button and
 * fully covers its letter (owner: "the circle...should be a little bit
 * bigger and cover up the whole white character...make the letter inside
 * the circle bigger"). Only left/top are percentage-based (measured
 * directly against the artwork, see the PHP doc comment); the circle
 * itself is a fixed px size so it never shrinks with the image, and never
 * carries an anti-collision nudge (removed entirely per owner direction:
 * positional accuracy over even spacing).
 *
 * Selector is scoped to the ".starlight-property-map-wrap" ancestor (two
 * classes, specificity 0,2,0) rather than the plain ".starlight-property-
 * map__hotspot" class alone, because this Elementor install emits a
 * site-wide ".elementor-kit-{id} button" rule at specificity 0,1,1 that
 * otherwise wins the cascade on every plain <button> and silently overrides
 * background-color/border/padding with no error. See
 * _wordpress-editing-rules.md rule 42.
 */
.starlight-property-map-wrap .starlight-property-map__hotspot {
	position: absolute;
	width: 60px;
	height: 60px;
	transform: translate( -50%, -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid #FFFFFF;
	border-radius: 50%;
	background: #F36C1F;
	color: #FFFFFF;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	padding: 0;
	margin: 0;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba( 12, 60, 70, 0.45 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.starlight-property-map-wrap .starlight-property-map__hotspot:hover {
	transform: translate( -50%, -50% ) scale( 1.08 );
	box-shadow: 0 4px 14px rgba( 12, 60, 70, 0.55 );
}

.starlight-property-map-wrap .starlight-property-map__hotspot:focus-visible {
	outline: 3px solid #E7A93B;
	outline-offset: 2px;
}

.starlight-property-map-wrap .starlight-property-map__hotspot[aria-pressed="true"] {
	background: #0C3C46;
}

/*
 * Mobile: dots shrink dramatically. Fourteen 60px circles on a 375px-wide
 * map would cover most of the artwork; at this size fourteen dots cover
 * roughly 8% of a 375x211 map, down from the old build's measured 41%. The
 * guest pinch-zooms the map (see JS) before tapping a specific dot, which
 * the owner is explicitly fine requiring.
 */
@media ( max-width: 767px ) {
	.starlight-property-map-wrap .starlight-property-map__hotspot {
		width: 24px;
		height: 24px;
		border-width: 2px;
		font-size: 11px;
	}
}

/*
 * Pool and Amenity Area hotspot (added 2026-07-26): same orange circle,
 * same size, radius, border, and shadow as every cabin dot (owner spec:
 * "reads as a sibling control, not a foreign element"; "keep the new dot the
 * same size as a cabin dot"). Only the label differs ("Info", not a single
 * cabin letter), so only font-size/letter-spacing are reduced here to fit
 * the four-character word inside the same-size circle. Placed AFTER the two
 * rules above (both same 0,2,0 specificity) so it wins by source order
 * instead of being silently overridden back to a single-letter font-size.
 */
.starlight-property-map-wrap .starlight-property-map__hotspot--info {
	font-size: 15px;
	letter-spacing: -0.02em;
}

@media ( max-width: 767px ) {
	.starlight-property-map-wrap .starlight-property-map__hotspot--info {
		font-size: 7px;
		letter-spacing: -0.02em;
	}
}

/*
 * Mobile-only hint that the map can be pinched to zoom. Nothing in the
 * stage itself signals that gesture is available, and the owner's spec
 * deliberately requires a pinch before a dot is easily tappable at 375px,
 * so a one-line prompt keeps that requirement from reading as a stuck or
 * broken map. Hidden by default; shown only at the same mobile breakpoint
 * the shrunk hotspots and pinch-zoom JS use.
 */
.starlight-property-map__zoom-hint {
	display: none;
	margin: 10px 0 0 0;
	font-family: "Lora", serif;
	font-style: italic;
	font-size: 13px;
	color: rgba( 12, 60, 70, 0.65 );
	text-align: center;
}

@media ( max-width: 767px ) {
	.starlight-property-map__zoom-hint {
		display: block;
	}
}

/*
 * Details panel: a normal in-flow section BELOW the map stage. No overlay,
 * no backdrop, no fixed positioning, no scroll lock. Starts on a muted
 * placeholder prompt; JS swaps in the clicked cabin's content in place.
 */
.starlight-property-map__panel {
	margin-top: 24px;
	background: #F7EBE1;
	border-radius: 14px;
	padding: 18px 16px;
	box-shadow: 0 4px 16px rgba( 12, 60, 70, 0.12 );
	/*
	 * The site header is a 67px fixed/sticky bar (z-index 999). ROUND 3
	 * (2026-07-27): the JS no longer scrolls to the panel on hotspot click
	 * (it now pins the MAP instead, see the JS file's scrollMapToTop()), but
	 * this stays as a safety net for any OTHER native scroll-into-view of the
	 * panel (e.g. a same-page anchor link, browser find-in-page), so the
	 * cabin heading never lands hidden behind the sticky header.
	 */
	scroll-margin-top: 84px;
}

/*
 * NOTE on the ".starlight-property-map__panel X" (two-class) scoping below,
 * on the title, location/layout, ramp and placeholder rules: a plain
 * single-class selector on these <p>/<h3> elements loses the cascade to this
 * install's site-wide ".elementor-kit-278 p{margin-block-end:18px}" and
 * ".elementor-kit-278 h3{font-size:...;line-height:...}" rules, both at
 * specificity 0,1,1, beating a lone 0,1,0 class selector with no error (same
 * family as _wordpress-editing-rules.md rule 42, promoted as rule 49 after
 * this was found). Confirmed via document.styleSheets: the kit rule was
 * winning and inflating every line's margin to 18px and the title's
 * font-size/line-height to the kit's h3 tokens, which is why the photo grid
 * measured well under the owner's ~75%-of-panel target before this fix.
 */
.starlight-property-map__panel .starlight-property-map__panel-placeholder {
	margin: 0;
	font-family: "Lora", serif;
	font-style: italic;
	font-size: 15px;
	color: rgba( 12, 60, 70, 0.65 );
	text-align: center;
	padding: 12px 0;
}

.starlight-property-map__panel-content[hidden] {
	display: none;
}

.starlight-property-map__panel .starlight-property-map__panel-title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	color: #0C3C46;
	margin: 0 0 4px 0;
}

.starlight-property-map__panel-title:focus-visible {
	outline: 3px solid #E7A93B;
	outline-offset: 4px;
}

.starlight-property-map__panel .starlight-property-map__location,
.starlight-property-map__panel .starlight-property-map__layout {
	font-family: "Lora", serif;
	font-size: 15px;
	line-height: 1.3;
	color: #0C3C46;
	margin: 0 0 4px 0;
}

.starlight-property-map__panel .starlight-property-map__ramp {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #FFFFFF;
	background: #668D7F;
	display: inline-block;
	padding: 4px 12px;
	border-radius: 9999px;
	margin: 0 0 8px 0;
}

/*
 * Photos: a FIXED grid, 2 columns x 4 rows on mobile, 4 columns x 2 rows on
 * desktop (owner round-2 spec point 3), now carrying the full fixed 8-photo
 * slot order (see starlight_property_map_default_photos(), rewired
 * 2026-07-25). aspect-ratio 3/2 (landscape) matches the native 1200x800
 * source exports; the owner explicitly rejected the earlier 4/5 portrait
 * crop. margin-bottom raised 14px -> 28px (2026-07-25, owner: more breathing
 * room before the price line/button) since the grid is no longer taller
 * than it is wide and needed less help reaching ~75% of the panel.
 */
.starlight-property-map__photos {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 8px;
	margin: 0 0 28px 0;
}

@media ( min-width: 768px ) {
	.starlight-property-map__photos {
		grid-template-columns: repeat( 4, 1fr );
		gap: 10px;
	}
}

/* Two-class scoping (rule 42/49): the Elementor kit's global button rule was
   winning here, painting a navy 12px/24px padded square card behind every
   photo and clashing with the rounded image corners. */
.starlight-property-map__panel .starlight-property-map__photo-btn,
.starlight-property-map-wrap .starlight-property-map__photo-btn {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	border-radius: 10px;
	line-height: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.starlight-property-map__photo-btn:focus-visible {
	outline: 3px solid #E7A93B;
	outline-offset: 2px;
	border-radius: 10px;
}

.starlight-property-map__photos .starlight-property-map__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 10px;
	object-fit: cover;
	border: 2px solid #0C3C46;
	box-shadow: 0 4px 14px rgba( 12, 60, 70, 0.22 );
}

/*
 * Cornhole photo only (attachment 4203, PHP tags this one class conditionally
 * by attachment id, see starlight_property_map_render_photos()). Source is a
 * 1848x2768 portrait master; the default center object-position (50% 50%)
 * crops the players' heads out of the top of this 3:2 landscape slot. Shifted
 * up to 50% 30% so the crop window sits higher in the source image and both
 * players stay fully in frame. Found + fixed 2026-07-27.
 */
.starlight-property-map__photos .starlight-property-map__photo--cornhole {
	object-position: 50% 30%;
}

.starlight-property-map__photos--empty {
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 102, 141, 127, 0.18 );
	border-radius: 10px;
	margin: 0 0 14px 0;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	color: #0C3C46;
	text-align: center;
	padding: 0 16px;
}

/*
 * Price: navy sentence, only the "$190" itself set apart in Sunset Orange,
 * bold, and a step larger, so it does not visually compete with the
 * call-to-action button below it (owner spec point 7). margin-bottom raised
 * 10px -> 20px (2026-07-25, owner: more breathing room before the button).
 */
.starlight-property-map__panel .starlight-property-map__price {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #0C3C46;
	margin: 0 0 20px 0;
}

.starlight-property-map__price-amount {
	font-weight: 700;
	font-size: 1.3em;
	color: #F36C1F;
}

/*
 * Same specificity reasoning as the hotspot rule above: scoped to the panel
 * ancestor class so this beats the Elementor kit's global button rule.
 * Styling unchanged from the previous build (owner: "approved; keep it"),
 * just rescoped since the ".starlight-property-map__sheet" ancestor no
 * longer exists.
 */
.starlight-property-map__panel .starlight-property-map__book {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	background: #F36C1F;
	color: #FFFFFF;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border-radius: 9999px;
	box-sizing: border-box;
	padding: 12px 20px;
}

.starlight-property-map__panel .starlight-property-map__book:hover,
.starlight-property-map__panel .starlight-property-map__book:focus-visible {
	background: #0C3C46;
}

.starlight-property-map__panel .starlight-property-map__book:focus-visible {
	outline: 3px solid #E7A93B;
	outline-offset: 2px;
}

/*
 * Lightbox (round-2 spec point 4). A single instance is created once by JS
 * and appended to <body> (not one per cabin), then reused for whichever
 * cabin's photo grid was clicked. Backdrop uses Deep Navy at high alpha
 * (still in-palette: alpha variant of #0C3C46, per the rule-book at the top
 * of this file). Prev/next/close are all >=44px per the accessibility spec.
 */
.starlight-property-map__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 12, 60, 70, 0.92 );
	padding: 24px;
	box-sizing: border-box;
}

.starlight-property-map__lightbox[hidden] {
	display: none;
}

.starlight-property-map__lightbox-figure {
	/*
	 * NOT position:relative. That would promote this element into the same
	 * positioned-stacking layer as the close/prev/next buttons (its DOM
	 * siblings inside the lightbox), and since it comes LAST in DOM order it
	 * would then paint on top of them, silently swallowing every tap/click
	 * meant for the buttons underneath (found on mobile: the image ate every
	 * "next" tap). Leaving it position:static keeps it in normal flow, below
	 * the always-on-top absolutely-positioned controls.
	 */
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.starlight-property-map__lightbox-img {
	display: block;
	max-width: min( 92vw, 1100px );
	max-height: 78vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.5 );
}

.starlight-property-map__lightbox-caption {
	margin: 14px 0 0 0;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
}

/*
 * Same specificity reasoning as the hotspot and book-button rules above
 * (_wordpress-editing-rules.md rule 42, and its round-2 recurrence noted at
 * rule 49 near the panel-title/location rules): every one of these is a
 * plain <button>, and this install's ".elementor-kit-278 button" /
 * ".elementor-kit-278 button:focus" rules (0,1,1 and 0,2,1) otherwise paint
 * them the kit's blue accent/hover color instead of navy the moment they
 * are focused (which happens immediately on open, since openLightbox()
 * focuses the close button). Scoping to the ".starlight-property-map__lightbox"
 * ancestor (0,2,0 base, 0,2,1 on :hover/:focus) beats the base kit rule
 * outright and ties the kit's :focus/:hover rule on specificity, which this
 * plugin's stylesheet already wins on source order (verified: the hotspot
 * buttons use the identical technique and render correctly, not kit-blue).
 */
.starlight-property-map__lightbox .starlight-property-map__lightbox-close,
.starlight-property-map__lightbox .starlight-property-map__lightbox-prev,
.starlight-property-map__lightbox .starlight-property-map__lightbox-next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	background: rgba( 12, 60, 70, 0.65 );
	color: #FFFFFF;
	cursor: pointer;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

.starlight-property-map__lightbox-close svg,
.starlight-property-map__lightbox-prev svg,
.starlight-property-map__lightbox-next svg {
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.starlight-property-map__lightbox .starlight-property-map__lightbox-close:hover,
.starlight-property-map__lightbox .starlight-property-map__lightbox-close:focus,
.starlight-property-map__lightbox .starlight-property-map__lightbox-prev:hover,
.starlight-property-map__lightbox .starlight-property-map__lightbox-prev:focus,
.starlight-property-map__lightbox .starlight-property-map__lightbox-next:hover,
.starlight-property-map__lightbox .starlight-property-map__lightbox-next:focus {
	background: #F36C1F;
	border-color: #F36C1F;
}

.starlight-property-map__lightbox .starlight-property-map__lightbox-close:focus-visible,
.starlight-property-map__lightbox .starlight-property-map__lightbox-prev:focus-visible,
.starlight-property-map__lightbox .starlight-property-map__lightbox-next:focus-visible {
	outline: 3px solid #E7A93B;
	outline-offset: 2px;
}

.starlight-property-map__lightbox-close {
	top: 8px;
	right: 8px;
}

.starlight-property-map__lightbox-prev {
	left: 8px;
	top: 50%;
	transform: translateY( -50% );
}

.starlight-property-map__lightbox-next {
	right: 8px;
	top: 50%;
	transform: translateY( -50% );
}

@media ( max-width: 767px ) {
	.starlight-property-map__lightbox {
		padding: 12px;
	}

	.starlight-property-map__lightbox-close {
		top: 0;
		right: 0;
	}

	.starlight-property-map__lightbox-prev {
		left: 0;
	}

	.starlight-property-map__lightbox-next {
		right: 0;
	}
}

/*
 * Check Pricing date bar ([starlight_check_pricing], added 2026-07-26).
 * Mobile-first: below 480px every control forces a full-width stacked row;
 * at wider widths the two date fields and the button sit in one flexed row
 * and wrap cleanly if the container is narrow. Every control (both native
 * date inputs and the submit button) is at least 44px tall, since ~99% of
 * this site's traffic is mobile.
 *
 * Selectors scoped two classes deep (".starlight-check-pricing-wrap .x"),
 * same reasoning as the map's hotspot/book-button rules above: this
 * install's Elementor kit emits site-wide rules for plain <button>/<input>/
 * <label> elements that otherwise win the cascade with no error
 * (_wordpress-editing-rules.md rules 42 and 49).
 */
.starlight-check-pricing-wrap {
	width: 100%;
	box-sizing: border-box;
}

.starlight-check-pricing-wrap .starlight-check-pricing__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}

.starlight-check-pricing-wrap .starlight-check-pricing__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 140px;
	min-width: 0;
}

.starlight-check-pricing-wrap .starlight-check-pricing__field label {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: #0C3C46;
}

.starlight-check-pricing-wrap .starlight-check-pricing__field input[type="date"] {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 10px 12px;
	border: 2px solid #668D7F;
	border-radius: 8px;
	background: #FFFFFF;
	color: #0C3C46;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
}

.starlight-check-pricing-wrap .starlight-check-pricing__field input[type="date"]:focus-visible {
	outline: 3px solid #E7A93B;
	outline-offset: 2px;
	border-color: #0C3C46;
}

/*
 * Same specificity reasoning as the map's "Book My Cabin" button (rule 42):
 * scoped to the wrap ancestor so this beats the Elementor kit's global
 * button rule instead of silently losing background/border/padding to it.
 */
.starlight-check-pricing-wrap .starlight-check-pricing__submit {
	flex: 1 1 140px;
	min-width: 0;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F36C1F;
	color: #FFFFFF;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 15px;
	border: 0;
	border-radius: 9999px;
	box-sizing: border-box;
	padding: 12px 20px;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.starlight-check-pricing-wrap .starlight-check-pricing__submit:hover,
.starlight-check-pricing-wrap .starlight-check-pricing__submit:focus-visible {
	background: #0C3C46;
}

.starlight-check-pricing-wrap .starlight-check-pricing__submit:focus-visible {
	outline: 3px solid #E7A93B;
	outline-offset: 2px;
}

.starlight-check-pricing-wrap .starlight-check-pricing__error {
	margin: 10px 0 0 0;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #F36C1F;
}

.starlight-check-pricing-wrap .starlight-check-pricing__error[hidden] {
	display: none;
}

@media ( max-width: 479px ) {
	.starlight-check-pricing-wrap .starlight-check-pricing__field,
	.starlight-check-pricing-wrap .starlight-check-pricing__submit {
		flex: 1 1 100%;
	}
}