/* ============================================================================
   Hope-Wellness availability widget
   Palette + type matched to the live site: cream background, ink/charcoal
   headings in a serif display face, warm terracotta accent (their "Book a
   Suite" pill), sage green + black pill accents from the footer/CTA blocks.
   ============================================================================ */

.hw-availability {
	/* Establishes a query container so the breakpoints below respond to the
	   widget's own rendered width (e.g. a narrow sidebar slot on a wide
	   desktop viewport), not just the browser viewport — this is what makes
	   the embed behave when it's dropped into someone else's page layout. */
	container-type: inline-size;
	container-name: hw-availability;

	--hw-cream: #fbf9f6;
	--hw-ink: #33363f;
	--hw-body: #5c5750;
	--hw-muted: #948d81;
	--hw-border: #e7e0d4;
	--hw-grid-line: #cfc2ac;

	--hw-accent: #c99a77;
	--hw-accent-dark: #b17f5c;
	--hw-sage: #97a17e;
	--hw-sage-dark: #7c8a63;
	--hw-black: #1f1e1c;

	/* Booked / available — literal red + green per brand request, kept in the
	   same warm/earthy family as the rest of the palette rather than stock
	   traffic-light colors. */
	--hw-green: #3f6b3f;
	--hw-green-dark: #2b4d2b;
	--hw-green-bg: #e3ecdd;
	--hw-green-border: #9cb98a;
	--hw-red: #a8402e;
	--hw-red-dark: #7d2e20;
	--hw-red-bg: #f4ded8;
	--hw-red-border: #c98a7a;

	--hw-radius: 10px;

	/* Grid sizing lives in custom properties so the responsive tiers below
	   only need to change two numbers instead of repeating every selector. */
	--hw-label-w: 150px;
	--hw-day-min-w: 74px;

	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--hw-body);
	background: var(--hw-cream);
	border-radius: 16px;
	padding: 24px;
	max-width: 100%;
	box-sizing: border-box;
}

.hw-availability *,
.hw-availability *::before,
.hw-availability *::after {
	box-sizing: border-box;
}

/* ---- Header --------------------------------------------------------------- */

.hw-availability__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.hw-availability__title {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 23px;
	letter-spacing: 0.01em;
	color: var(--hw-ink);
	margin: 0;
	flex: 1 1 auto;
	min-width: 180px;
}

/* Nav is its own row-within-a-row so the pill/arrows never get squeezed by
   the title or forced to overlap — this is what was collapsing before. */
.hw-availability__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.hw-availability__nav button {
	flex-shrink: 0;
	appearance: none;
	font-family: inherit;
	line-height: 1;
}

.hw-availability .hw-availability__arrow-btn {
	border: 1px solid var(--hw-border);
	background: #fff;
	color: var(--hw-ink);
	width: 34px;
	height: 34px;
	min-width: 34px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease;
	padding: 0;
}

.hw-availability .hw-availability__arrow-btn svg {
	width: 14px;
	height: 14px;
	display: block;
	pointer-events: none;
}

.hw-availability__arrow-btn:hover {
	background: #f7ecdf;
	border-color: var(--hw-accent);
}

.hw-availability__arrow-btn:focus-visible,
.hw-availability__today-btn:focus-visible {
	outline: 2px solid var(--hw-accent-dark);
	outline-offset: 2px;
}

.hw-availability__today-btn {
	border: 1px solid var(--hw-ink);
	background: var(--hw-black);
	color: #fff;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.hw-availability__today-btn:hover {
	background: #000;
}

.hw-availability__range-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin-left: 2px;
	/* Give the label its own line if things get tight, instead of crushing
	   the buttons next to it. */
	flex-basis: 100%;
	justify-content: flex-end;
}

@container hw-availability (min-width: 420px) {
	.hw-availability__range-wrap {
		flex-basis: auto;
		justify-content: flex-start;
	}
}

/* Fallback for browsers without container query support (falls back to
   viewport width — still better than nothing). */
@supports not (container-type: inline-size) {
	@media (min-width: 640px) {
		.hw-availability__range-wrap {
			flex-basis: auto;
			justify-content: flex-start;
		}
	}
}

.hw-availability__range-label {
	font-size: 13px;
	color: var(--hw-muted);
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
}

.hw-availability__range-wrap:hover .hw-availability__range-label {
	color: var(--hw-ink);
}

/* The actual date input sits invisibly on top of the label — clicking
   anywhere on the label/range text opens the browser's native date picker,
   and choosing a date jumps straight to the week containing it. */
.hw-availability__range-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	opacity: 0;
	cursor: pointer;
}

/* ---- Grid ------------------------------------------------------------------ */

.hw-availability__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--hw-border);
	border-radius: var(--hw-radius);
	background: #fff;
}

.hw-availability__grid {
	min-width: calc(var(--hw-label-w) + var(--hw-day-min-w) * 7 + 14px);
}

.hw-availability__row {
	display: flex;
	border-bottom: 1px solid var(--hw-grid-line);
}

.hw-availability__row:last-child {
	border-bottom: none;
}

.hw-availability__row--header {
	position: sticky;
	top: 0;
	z-index: 3;
	background: #fff;
	border-bottom: 1px solid var(--hw-grid-line);
}

.hw-availability__corner,
.hw-availability__suite-label {
	flex: 0 0 var(--hw-label-w);
	width: var(--hw-label-w);
	display: flex;
	align-items: center;
	padding: 10px 12px;
	background: #fff;
	position: sticky;
	left: 0;
	z-index: 2;
	border-right: 1px solid var(--hw-grid-line);
}

.hw-availability__suite-label {
	font-weight: 600;
	color: var(--hw-ink);
	font-size: 13px;
}

.hw-availability__suite-label-mobile {
	display: none;
}

.hw-availability__track {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	gap: 2px;
	background: var(--hw-grid-line);
}

.hw-availability__day-header {
	flex: 1 1 0;
	min-width: var(--hw-day-min-w);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--hw-ink);
	background: #fff;
}

.hw-availability__day-header--today {
	background: #f7ecdf;
}

.hw-availability__day-name {
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hw-muted);
	font-weight: 600;
}

/* One flex-basis-matched slot per day, sitting behind the overlaid booking
   bars. This is what gives a turnover day its "half green, half red" look:
   the slot itself is the green/available layer; a bar drawn on top covers
   only the booked portion of it. */
.hw-availability__slot {
	flex: 1 1 0;
	min-width: var(--hw-day-min-w);
	min-height: 52px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hw-availability__slot--open {
	background: var(--hw-green-bg);
}

.hw-availability__slot--sold {
	background: var(--hw-red-bg);
}

/* Earlier this week. The calendar always opens on Monday, so the current week
   routinely carries a few nights that have been and gone. They aren't for
   sale, and whether they were free is nobody's business now. */
.hw-availability__slot--past {
	background: #efece7;
}

.hw-availability__slot--past::after {
	background: var(--hw-border);
}

/* Compact "dot calendar" mode — a small status dot instead of a full
   colored block. Off by default; the narrow-container tier below switches
   it on and hides the full-block styling above, so at small widths the
   whole week fits without horizontal scrolling. */
.hw-availability__slot::after {
	content: "";
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: var(--hw-green);
	pointer-events: none;
}

.hw-availability__slot--sold::after {
	background: var(--hw-red);
}

/* A night that is genuinely empty but shorter than the minimum stay, so the
   property can't sell it. Deliberately neither green nor red: nobody is
   staying here, it just can't be booked. */
.hw-availability__slot--minstay {
	background: repeating-linear-gradient(
		135deg,
		#eae4da 0 5px,
		#d2c7b7 5px 10px
	);
}

.hw-availability__slot--minstay::after {
	background: var(--hw-muted);
}

.hw-availability__slot-btn {
	all: unset;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.15s ease;
}

.hw-availability__slot-btn:hover {
	background: rgba(255, 255, 255, 0.5);
}

.hw-availability__slot-btn:focus-visible {
	outline: 2px solid var(--hw-accent-dark);
	outline-offset: -2px;
}

.hw-availability__edge-marker {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	color: var(--hw-muted);
	opacity: 0.8;
	pointer-events: none;
	z-index: 2;
}

.hw-availability__edge-marker svg {
	width: 100%;
	height: 100%;
}

.hw-availability__edge-marker--before {
	left: 3px;
}

.hw-availability__edge-marker--after {
	right: 3px;
}

/* ---- Legend ----------------------------------------------------------------- */

.hw-availability__legend {
	display: flex;
	gap: 20px;
	margin-top: 14px;
	font-size: 12px;
	color: var(--hw-muted);
	flex-wrap: wrap;
}

.hw-availability__legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hw-availability__swatch {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hw-availability__swatch--open {
	background: var(--hw-green-bg);
	border: 1px solid var(--hw-green-border);
}

.hw-availability__swatch--sold {
	background: var(--hw-red-bg);
}

/* Sits at the end of the legend row, and on its own line once the legend
   stacks. Says what a column means, now that a column is a night. */
.hw-availability__legend-note {
	font-style: italic;
	opacity: 0.85;
}

.hw-availability__swatch--minstay {
	background: repeating-linear-gradient(
		135deg,
		#eae4da 0 4px,
		#d2c7b7 4px 8px
	);
	border: 1px solid var(--hw-border);
}

/* ---- Loading / error states -------------------------------------------------- */

.hw-availability__state {
	padding: 40px 12px;
	text-align: center;
	color: var(--hw-muted);
	font-size: 14px;
}

.hw-availability__state--error {
	color: var(--hw-red);
}

.hw-availability__stale-notice {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--hw-muted);
	background: rgba(255, 255, 255, 0.7);
}

/* ---- Responsive --------------------------------------------------------------- */

/* These are container queries, not viewport media queries — the widget is
   meant to sit as a small embed inside someone else's page, so it needs to
   respond to the width it's actually given (e.g. a 320px sidebar column on
   a 1400px-wide desktop site), not the size of the visitor's screen. */

/* TARGETING NOTE: an element can't query its own container, so a rule inside
   @container has to target a DESCENDANT of .hw-availability — a rule written
   against .hw-availability itself silently never matches. That's why the grid
   sizing custom properties below are set on .hw-availability__grid (every cell
   that reads them lives inside it) and why the widget's own padding is left to
   the viewport media queries at the end of this file. */

@container hw-availability (max-width: 560px) {
	.hw-availability__title {
		font-size: 20px;
	}

	.hw-availability__legend {
		gap: 14px 18px;
	}
}

/* ---- Compact "dot calendar" mode ------------------------------------------
   Below 480px the day-by-day color blocks give way to a small status dot
   per day (see the ::after rules on .hw-availability__slot above). Columns
   shrink enough that a full 7-day week fits without horizontal scrolling —
   that's the whole point of switching styles here instead of just shrinking
   the block layout further. */

@container hw-availability (max-width: 480px) {
	.hw-availability__grid {
		--hw-label-w: 0px;
		--hw-day-min-w: 30px;
	}

	.hw-availability__title {
		font-size: 18px;
	}

	.hw-availability__nav {
		gap: 8px;
	}

	.hw-availability__today-btn {
		padding: 7px 14px;
		font-size: 12px;
	}

	.hw-availability .hw-availability__arrow-btn {
		width: 30px;
		height: 30px;
		min-width: 30px;
	}

	/* Drop the suite-name column to save width — each dot's aria-label
	   still carries the suite name for screen readers, it just isn't
	   shown as a visible row header here. */
	.hw-availability__corner,
	.hw-availability__suite-label {
		display: none;
	}

	.hw-availability__day-header {
		font-size: 11px;
		padding: 6px 2px;
	}

	.hw-availability__day-name {
		font-size: 8.5px;
	}

	.hw-availability__slot {
		min-height: 38px;
	}

	/* Hand off from full-block color to the small dot: flatten every state's
	   background and hide the diagonal triangle overlay, then reveal the
	   dot drawn by ::after above. */
	.hw-availability__slot--open,
	.hw-availability__slot--sold,
	.hw-availability__slot--minstay,
	.hw-availability__slot--past {
		background: #fff;
	}

	.hw-availability__slot::after {
		display: block;
	}

	.hw-availability__row:nth-child(even) .hw-availability__slot {
		background: var(--hw-cream);
	}

	/* Legend swatches become dots too, using the exact same colors as the grid
	   dots above — including the solid open/sold fills, so the key actually
	   matches what's in the grid rather than staying on the pale block tints. */
	.hw-availability__swatch {
		border-radius: 50%;
	}

	.hw-availability__swatch--open {
		background: var(--hw-green);
		border: none;
	}

	.hw-availability__swatch--sold {
		background: var(--hw-red);
		border: none;
	}

	.hw-availability__swatch--minstay {
		background: var(--hw-muted);
		border: none;
	}

	.hw-availability__legend {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@container hw-availability (max-width: 340px) {
	.hw-availability__grid {
		--hw-day-min-w: 26px;
	}

	.hw-availability__title {
		font-size: 17px;
	}

	/* No room left for the weekday letters at this width — the date number
	   plus the dot underneath is still enough to orient by. */
	.hw-availability__day-name {
		display: none;
	}

	.hw-availability__slot::after {
		width: 10px;
		height: 10px;
	}
}

/* Fallback for browsers without container query support: same tiers,
   keyed off viewport width instead of the widget's own rendered width. */
@supports not (container-type: inline-size) {
	@media (max-width: 560px) {
		.hw-availability {
			padding: 18px;
		}

		.hw-availability__title {
			font-size: 20px;
		}
	}

	@media (max-width: 480px) {
		.hw-availability {
			padding: 16px;
			--hw-label-w: 0px;
			--hw-day-min-w: 30px;
		}

		.hw-availability__title {
			font-size: 18px;
		}

		.hw-availability__corner,
		.hw-availability__suite-label {
			display: none;
		}

		.hw-availability__slot {
			min-height: 38px;
		}

		.hw-availability__slot--open,
		.hw-availability__slot--sold,
		.hw-availability__slot--minstay,
		.hw-availability__slot--past {
			background: #fff;
		}

		.hw-availability__slot::after {
			display: block;
		}

		.hw-availability__swatch {
			border-radius: 50%;
		}

		.hw-availability__swatch--minstay {
			background: var(--hw-muted);
			border: none;
		}

		.hw-availability__legend {
			flex-direction: column;
			align-items: flex-start;
			gap: 8px;
		}
	}

	@media (max-width: 340px) {
		.hw-availability {
			--hw-day-min-w: 26px;
		}

		.hw-availability__day-name {
			display: none;
		}

		.hw-availability__slot::after {
			width: 10px;
			height: 10px;
		}
	}
}

/* The widget's own padding — the one thing the container queries above can't
   set on it (see the targeting note). Viewport width is a fine proxy here:
   it's cosmetic breathing room, not layout that has to fit. */

@media (max-width: 560px) {
	.hw-availability {
		padding: 18px;
	}
}

@media (max-width: 480px) {
	.hw-availability {
		padding: 16px;
	}
}

@media (max-width: 340px) {
	.hw-availability {
		padding: 14px;
	}
}

/* ============================================================================
   Popup / lightbox
   ----------------------------------------------------------------------------
   Opened by any [data-hw-availability] trigger, or a link pointing at
   #view-availability. The panel owns the cream card + padding, so the grid
   inside drops its own frame (see .hw-availability--in-modal below).
   ============================================================================ */

.hw-modal {
	--hw-modal-cream: #fbf9f6;
	--hw-modal-ink: #33363f;
	--hw-modal-border: #e7e0d4;
	--hw-modal-muted: #948d81;

	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(31, 30, 28, 0.55);
	opacity: 0;
	transition: opacity 0.18s ease;
	box-sizing: border-box;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

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

.hw-modal *,
.hw-modal *::before,
.hw-modal *::after {
	box-sizing: border-box;
}

.hw-modal--open {
	opacity: 1;
}

.hw-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(920px, 100%);
	max-height: min(88vh, 780px);
	background: var(--hw-modal-cream);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	transform: translateY(14px) scale(0.985);
	transition: transform 0.18s ease;
}

.hw-modal--open .hw-modal__panel {
	transform: none;
}

.hw-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 14px;
	border-bottom: 1px solid var(--hw-modal-border);
	flex-shrink: 0;
}

.hw-modal__title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var(--hw-modal-ink);
}

.hw-modal .hw-modal__close {
	appearance: none;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hw-modal-border);
	border-radius: 50%;
	background: #fff;
	color: var(--hw-modal-ink);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.hw-modal__close:hover {
	background: #f7ecdf;
	border-color: #c99a77;
}

.hw-modal__close:focus-visible {
	outline: 2px solid #b17f5c;
	outline-offset: 2px;
}

.hw-modal__close svg {
	width: 15px;
	height: 15px;
	display: block;
	pointer-events: none;
}

.hw-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 24px 24px;
}

/* Inside the panel the grid is already on a cream card — drop the second one. */
.hw-availability--in-modal {
	background: transparent;
	border-radius: 0;
	padding: 20px 0 0;
}

/* A single-suite popup names the suite in the panel header, so the row label
   would just repeat it — reclaim that 150px for the seven day columns. */
.hw-availability--in-modal.hw-availability--single .hw-availability__corner,
.hw-availability--in-modal.hw-availability--single .hw-availability__suite-label {
	display: none;
}

.hw-availability--in-modal.hw-availability--single {
	--hw-label-w: 0px;
}

/* A one-row calendar reads as a thin strip at the default row height — give
   it a little more presence in the panel. */
.hw-availability--in-modal.hw-availability--single .hw-availability__slot {
	min-height: 62px;
}

/* Phone: a bottom sheet sized to its content. A full-height panel leaves a
   single-suite calendar stranded at the top of an empty screen. */
@media (max-width: 640px) {
	.hw-modal {
		padding: 0;
		align-items: flex-end;
	}

	.hw-modal__panel {
		width: 100%;
		max-height: 92%;
		border-radius: 16px 16px 0 0;
		transform: translateY(24px);
	}

	.hw-modal__header {
		padding: 18px 18px 12px;
	}

	.hw-modal__title {
		font-size: 19px;
	}

	.hw-modal__body {
		padding: 4px 18px 22px;
	}

	/* In the all-suites popup, keep a narrow row-header column visible so
	   guests can tell which mobile availability row belongs to which suite. */
	.hw-availability--in-modal:not(.hw-availability--single) .hw-availability__grid {
		--hw-label-w: 58px;
	}

	.hw-availability--in-modal:not(.hw-availability--single) .hw-availability__corner,
	.hw-availability--in-modal:not(.hw-availability--single) .hw-availability__suite-label {
		display: flex;
		justify-content: center;
		padding: 6px 4px;
		text-align: center;
	}

	.hw-availability--in-modal:not(.hw-availability--single) .hw-availability__corner::after {
		content: "Suite";
		font-size: 9px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--hw-muted);
	}

	.hw-availability--in-modal:not(.hw-availability--single) .hw-availability__suite-label {
		font-size: 11px;
		line-height: 1.15;
	}

	.hw-availability--in-modal:not(.hw-availability--single) .hw-availability__suite-label-full {
		display: none;
	}

	.hw-availability--in-modal:not(.hw-availability--single) .hw-availability__suite-label-mobile {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hw-modal,
	.hw-modal__panel {
		transition: none;
	}
}

/* ---- Optional trigger button ------------------------------------------------
   Only needed if the button lives in a Code Block rather than being a native
   Squarespace button. Colours are exposed as custom properties so they can be
   re-pointed at the site palette in one place. */

.hw-availability-trigger {
	--hw-trigger-bg: #a8b18f;
	--hw-trigger-bg-hover: #97a17e;
	--hw-trigger-fg: #2c2f26;

	appearance: none;
	display: block;
	width: 100%;
	margin: 12px 0 0;
	padding: 15px 22px;
	border: 0;
	border-radius: 0;
	background: var(--hw-trigger-bg);
	color: var(--hw-trigger-fg);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.hw-availability-trigger:hover {
	background: var(--hw-trigger-bg-hover);
	color: var(--hw-trigger-fg);
}

.hw-availability-trigger:focus-visible {
	outline: 2px solid #b17f5c;
	outline-offset: 3px;
}