/* VSBR Availability
   Inherits the theme's palette and type where it exists, and falls back to
   sensible values so the plugin is not tied to one site. */

.vsbr-availability {
	--vsbr-ink: var(--ink, #1f1e1c);
	--vsbr-ink-soft: var(--ink-soft, #3a3835);
	--vsbr-clay: var(--clay, #99948a);
	--vsbr-stone: var(--stone, #dacfbc);
	--vsbr-flour: var(--flour, #ede7dc);
	--vsbr-flour-soft: var(--flour-soft, #f4f0e8);
	--vsbr-accent: var(--tiger-eye, #8b4a2a);
	--vsbr-accent-deep: var(--tiger-eye-deep, #6e3a20);
	--vsbr-sans: var(--sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--vsbr-serif: var(--serif, Georgia, serif);

	/* The block that renders this shortcode may sit directly in post content
	   with no container of its own, so the layout is set here rather than
	   assumed from the theme. */
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 100px 40px 120px;

	font-family: var(--vsbr-sans);
	color: var(--vsbr-ink);
}

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

/* ---- Intro and legend ---- */

.vsbr-heading {
	font-family: var(--vsbr-serif);
	font-size: clamp(38px, 5vw, 58px);
	font-weight: 400;
	font-style: italic;
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--vsbr-ink);
	margin: 0 0 32px;
}

.vsbr-summary {
	font-family: var(--vsbr-serif);
	font-size: 25px;
	line-height: 1.55;
	max-width: 34em;
	color: var(--vsbr-ink);
	margin: 0 0 28px;
}

.vsbr-legend {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	margin: 0 0 72px;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vsbr-clay);
}

.vsbr-key {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.vsbr-key::before {
	content: "";
	width: 12px;
	height: 12px;
	border: 1px solid rgba(153, 148, 138, 0.65);
	background: #fff;
}

.vsbr-key-taken::before {
	background: var(--vsbr-stone);
	border-color: var(--vsbr-stone);
	opacity: 0.5;
}

/* ---- Month grid ---- */

.vsbr-months {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 72px 64px;
	/* Months have different numbers of weeks. Without this they stretch to match
	   the tallest in the row and the day cells grow odd gaps. */
	align-items: start;
}

/* Each month is a <section>, and themes commonly give bare <section> generous
   padding. These are panels inside one section, so that is reset here. */
.vsbr-month {
	margin: 0;
	padding: 0;
}

.vsbr-month-name {
	font-family: var(--vsbr-serif);
	font-size: 26px;
	font-weight: 400;
	font-style: italic;
	letter-spacing: 0.01em;
	margin: 0 0 20px;
	color: var(--vsbr-ink);
}

.vsbr-cal {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

/* The caption repeats the month for screen readers and parsers; visually the
   heading above already says it. */
.vsbr-cal caption,
.vsbr-state {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.vsbr-cal th {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vsbr-clay);
	padding: 0 0 12px;
	text-align: center;
}

.vsbr-cal th abbr {
	text-decoration: none;
	border: none;
}

.vsbr-cal td {
	border: 1px solid rgba(153, 148, 138, 0.2);
	vertical-align: top;
	height: 68px;
	padding: 9px 6px 6px;
	text-align: center;
}

.vsbr-pad,
.vsbr-past {
	border-color: transparent !important;
	background: none;
}

/* Dates that have already gone by. Present for the sake of a correct grid,
   but not offering anything. */
.vsbr-past .vsbr-dnum {
	color: var(--vsbr-clay);
	opacity: 0.35;
}

.vsbr-dnum {
	display: block;
	font-family: var(--vsbr-serif);
	font-size: 17px;
	line-height: 1;
	color: var(--vsbr-ink);
}

.vsbr-price {
	display: block;
	margin-top: 7px;
	font-size: 12px;
	letter-spacing: 0.01em;
	color: var(--vsbr-accent);
	white-space: nowrap;
}

.vsbr-min {
	display: block;
	margin-top: 3px;
	font-size: 9px;
	letter-spacing: 0.05em;
	color: var(--vsbr-clay);
}

/* Booked nights recede. A solid fill plus a struck-through number plus the
   word "Booked" on every cell turned whole months into a wall of beige; the
   quiet tint and the missing price say it just as clearly. */
.vsbr-taken {
	background: rgba(218, 207, 188, 0.4);
}

.vsbr-taken .vsbr-dnum {
	color: var(--vsbr-clay);
}

.vsbr-unknown .vsbr-dnum {
	opacity: 0.35;
}

.vsbr-open {
	transition: background 0.2s ease;
}

/* ---- Calls to action ---- */

.vsbr-cta {
	margin: 80px 0 0;
}

.vsbr-book {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 18px 36px;
	background: var(--vsbr-accent);
	border: 1px solid var(--vsbr-accent);
	color: var(--vsbr-flour);
	text-decoration: none;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.vsbr-book:hover,
.vsbr-book:focus {
	background: var(--vsbr-accent-deep);
	border-color: var(--vsbr-accent-deep);
	color: var(--vsbr-flour);
}

.vsbr-updated {
	margin: 28px 0 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vsbr-clay);
}

.vsbr-fallback {
	margin: 0;
}

/* ---- Optional selection state, added by the script ---- */

.js-vsbr-interactive .vsbr-open:hover {
	background: var(--vsbr-flour-soft);
}

.vsbr-day.is-selected {
	outline: 2px solid var(--vsbr-accent);
	outline-offset: -2px;
}

.vsbr-day.is-in-range {
	background: var(--vsbr-flour-soft);
}

.vsbr-open {
	cursor: default;
}

.js-vsbr-interactive .vsbr-open {
	cursor: pointer;
}

.vsbr-selection {
	margin: 32px 0 0;
	font-family: var(--vsbr-serif);
	font-size: 19px;
	color: var(--vsbr-ink);
}

@media (max-width: 1000px) {
	.vsbr-availability {
		padding: 72px 32px 88px;
	}

	.vsbr-months {
		grid-template-columns: 1fr;
		gap: 56px;
		max-width: 520px;
	}

	.vsbr-summary {
		font-size: 21px;
	}

	.vsbr-legend {
		margin-bottom: 56px;
	}

	.vsbr-cal td {
		height: 62px;
		padding: 7px 3px 5px;
	}

	.vsbr-min {
		font-size: 8px;
		letter-spacing: 0;
	}
}

/* Phones. Seven columns have to fit the screen, so the type steps down rather
   than the table spilling off the right edge. */
@media (max-width: 600px) {
	.vsbr-availability {
		padding: 48px 20px 64px;
	}

	.vsbr-summary {
		font-size: 19px;
	}

	.vsbr-cal td {
		height: 54px;
		padding: 6px 1px 4px;
	}

	.vsbr-dnum {
		font-size: 14px;
	}

	.vsbr-price {
		margin-top: 5px;
		font-size: 10px;
		letter-spacing: -0.02em;
	}

	.vsbr-min {
		display: none;
	}

	.vsbr-legend {
		gap: 18px;
		margin-bottom: 40px;
	}

	.vsbr-cta {
		margin-top: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vsbr-book,
	.vsbr-open {
		transition: none;
	}
}