/* The priced calendar shared by bnjc/unit-page and bnjc/stay-search
   (assets/js/stay-calendar.js). Tokens from theme.json only. ONE month at a
   time in a seven-column grid (Monday to Sunday): a full-width sheet on
   phones, a wide card from 960px. The block that hosts it sets the host to
   position: relative and decides what sits above it while it is open.

   Where the words go. From 840px a day is wide enough (about 115px) to hold
   everything inside it: date, price, holiday chip, the week's portion and the
   Shabbat times. Under 840px a day is about 50px wide: a 16px word such as
   "Vayishlach" does not fit in it, and a word is never cut in half, so the day
   keeps its date, price and a mark, and the words are read in a strip under the
   week (.bnjc-cal__wk), at the same 16px, in full. Nothing is clipped.

   The frame (3 Nov 2026, owner review): every day is a framed cell in one grid, like a printed
   calendar. The cells share their borders (one 1px line between two days, drawn by giving each cell a
   1px border and pulling it over its neighbour by 1px), all in one soft navy tone (--cal-frame). The date
   is top left; the price is beside it from 840px (under it on a phone); the words follow, left aligned.
   From 840px every week is the same height (the tallest week sets it). States: a chosen range is
   filled, the arrival and departure are solid navy, a booked night is grey with a diagonal, a past
   day is grey and quiet, today has an inner outline, a Shabbat is cream. */
.bnjc-cal[hidden] {
	display: none;
}
.bnjc-cal {
	--cal-frame: color-mix(in srgb, var(--navy) 20%, var(--white));
	--cal-diag: color-mix(in srgb, var(--grey-700) 45%, var(--white));
	--cal-pad: 6px;
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
}
.bnjc-cal__scrim {
	position: fixed;
	inset: 0;
}
.bnjc-cal__box {
	position: fixed;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	background: var(--white);
	color: var(--ink);
	font-size: var(--wp--preset--font-size--medium);
}
.bnjc-cal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-block-size: 56px;
	padding-inline: 16px 8px;
}
.bnjc-cal__hint,
.bnjc-cal__sum {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
:where(.bnjc-cal button) {
	background: none;
	border: 0;
	color: var(--ink);
	font: inherit;
	cursor: pointer;
}
.bnjc-cal__x,
.bnjc-cal__nav {
	display: grid;
	flex: none;
	place-items: center;
	inline-size: var(--touch-min);
	block-size: var(--touch-min);
	padding: 0;
	border-radius: var(--radius-pill);
	font-size: var(--wp--preset--font-size--heading-m);
}
.bnjc-cal__nav {
	border: 1px solid var(--wp--custom--color--border-default);
}
.bnjc-cal__nav svg {
	inline-size: 24px;
	block-size: 24px;
}
[dir="rtl"] .bnjc-cal__nav svg {
	scale: -1 1;
}
.bnjc-cal__nav[aria-disabled="true"] {
	opacity: 0.3;
	cursor: default;
}
.bnjc-cal__nav:not([aria-disabled="true"]):hover {
	background: var(--wp--custom--color--hover-wash);
}

/* The month: a clear heading with the buttons either side. */
.bnjc-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 12px 8px;
}
.bnjc-cal__mon {
	display: grid;
	flex: 1;
	justify-items: center;
	min-inline-size: 0;
}
.bnjc-cal .bnjc-cal__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
}
.bnjc-cal__sub[hidden] {
	display: none;
}
.bnjc-cal__sub {
	margin: 0;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}
.bnjc-cal__months {
	flex: 1;
	overflow-y: auto;
	padding: 0 8px 12px;
}
.bnjc-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	/* The cells pull 1px over their neighbours (below), so the grid keeps 1px for the last column and row. */
	gap: 0;
	padding: 0 1px 1px 0;
}
.bnjc-cal__dow,
.bnjc-cal__pad {
	margin: 0 -1px -1px 0;
	border: 1px solid var(--cal-frame);
}
.bnjc-cal__dow {
	padding-block: 8px;
	background: var(--wp--preset--color--cream);
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-align: center;
}
/* The empty cells before the 1st and after the last day: framed, but quiet, so the month is a whole grid. */
.bnjc-cal__pad {
	background: color-mix(in srgb, var(--wp--custom--color--grey-100) 55%, var(--white));
}

/* A day: a framed cell, the date top left. */
.bnjc-cal__day {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 2px;
	position: relative;
	min-inline-size: 0;
	min-block-size: 72px;
	margin: 0 -1px -1px 0;
	padding: var(--cal-pad) 5px;
	background: var(--white);
	border: 1px solid var(--cal-frame);
	border-radius: 0;
	text-align: start;
}
.bnjc-cal__num {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.2;
}
.bnjc-cal__price {
	min-block-size: 1.2em;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}
.bnjc-cal__day:not([aria-disabled]):hover {
	background: var(--wp--custom--color--hover-wash);
}
.bnjc-cal__day.is-sat {
	background: var(--wp--preset--color--cream-deep);
}
.bnjc-cal__day.is-sat:not([aria-disabled]):hover {
	background: var(--wp--custom--color--gold-soft);
}
.bnjc-cal__day.is-in {
	background: var(--wp--custom--color--blue-tint);
	border-color: color-mix(in srgb, var(--navy) 35%, var(--white));
}
.bnjc-cal__day[aria-disabled] {
	color: var(--grey-700);
	cursor: default;
}
/* A past day: grey and quiet, still in its frame. */
.bnjc-cal__day.is-past {
	background: var(--wp--custom--color--grey-100);
	opacity: 0.55;
}
/* Today: an inner outline, so it reads even on a Shabbat or inside a chosen stay. */
.bnjc-cal__day.is-today::before {
	content: "";
	position: absolute;
	inset: 2px;
	border: 2px solid var(--navy);
	border-radius: 3px;
	pointer-events: none;
}
.bnjc-cal__day.is-start.is-today::before,
.bnjc-cal__day.is-end.is-today::before {
	border-color: var(--gold);
}
/* Booked: grey, a diagonal across the cell and the date struck through. A night the guest cannot end a stay on is just quieter. */
.bnjc-cal__day.is-booked {
	background:
		linear-gradient(to top right, transparent calc(50% - 0.75px), var(--cal-diag) calc(50% - 0.75px), var(--cal-diag) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
		var(--wp--custom--color--grey-100);
}
.bnjc-cal__day.is-booked .bnjc-cal__num {
	text-decoration: line-through;
}
.bnjc-cal__day.is-off:not(.is-booked) {
	background: color-mix(in srgb, var(--wp--custom--color--grey-100) 55%, var(--white));
}
.bnjc-cal__day.is-off:not(.is-booked) .bnjc-cal__num {
	font-weight: 400;
}
/* On request: staff are holding the night and a guest can ask. A dashed outline and a label, never struck through. */
.bnjc-cal__day.is-req {
	z-index: 1;
	border: 1px dashed var(--navy);
}
.bnjc-cal__day.is-req .bnjc-cal__price {
	color: var(--navy);
	font-weight: 600;
}
/* Arrival and departure: filled. */
.bnjc-cal__day.is-start,
.bnjc-cal__day.is-end {
	z-index: 1;
	background: var(--navy);
	border-color: var(--navy);
}
.bnjc-cal__day.is-start :is(.bnjc-cal__num, .bnjc-cal__price, .bnjc-cal__lab, .bnjc-cal__sh),
.bnjc-cal__day.is-end :is(.bnjc-cal__num, .bnjc-cal__price, .bnjc-cal__lab, .bnjc-cal__sh) {
	color: var(--white);
}
.bnjc-cal__day.is-start:hover,
.bnjc-cal__day.is-end:hover {
	background: var(--navy);
}
.bnjc-cal button:focus-visible {
	outline: 3px solid var(--navy);
	outline-offset: -3px;
	box-shadow: inset 0 0 0 5px var(--white);
}
.bnjc-cal__day.is-start:focus-visible,
.bnjc-cal__day.is-end:focus-visible {
	outline-color: var(--gold);
}

/* What a day says besides its date and price. */
.bnjc-cal__info {
	display: none;
}
.bnjc-cal__chip {
	display: inline-block;
	padding: 1px 8px;
	border-radius: var(--radius-md);
	background: var(--wp--custom--color--berry-tint);
	color: var(--wp--custom--color--berry-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
}
/* The portion: whole words only, never cut in half, never clipped. */
.bnjc-cal__lab {
	color: var(--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.25;
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}
.bnjc-cal__sh {
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
}
/* A holiday that carries on from yesterday: a bar, not the name again. */
.bnjc-cal__chip.is-cont {
	display: block;
	inline-size: 100%;
	min-block-size: 0;
	block-size: 6px;
	padding: 0;
	border-radius: 3px;
	background: var(--wp--custom--color--berry-soft);
}
/* Phone: the marks under the price. */
.bnjc-cal__marks {
	display: flex;
	gap: 5px;
	align-items: center;
	min-block-size: 10px;
}
.bnjc-cal__dot,
.bnjc-cal__ring {
	flex: none;
	inline-size: 10px;
	block-size: 10px;
	border-radius: 50%;
}
.bnjc-cal__dot {
	background: var(--berry);
}
.bnjc-cal__ring {
	border: 2px solid var(--grey-700);
}
.bnjc-cal__day.is-start .bnjc-cal__dot,
.bnjc-cal__day.is-end .bnjc-cal__dot {
	background: var(--gold);
}
.bnjc-cal__day.is-start .bnjc-cal__ring,
.bnjc-cal__day.is-end .bnjc-cal__ring {
	border-color: var(--white);
}

/* Phone: the week's words, in a strip under the week. */
.bnjc-cal__wk {
	grid-column: 1 / -1;
	display: grid;
	gap: 4px;
	margin: 0 -1px -1px 0;
	padding: 8px 10px;
	border: 1px solid var(--cal-frame);
	background: var(--wp--preset--color--cream-deep);
}
.bnjc-cal__note {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	align-items: baseline;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
}
.bnjc-cal__note b {
	min-inline-size: 3.6em;
	font-weight: 600;
	color: var(--grey-700);
}

/* The key, small and in one line that wraps. */
.bnjc-cal__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 0;
	padding: 8px 16px 0;
	list-style: none;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--small);
}
.bnjc-cal__key[hidden] {
	display: none;
}
.bnjc-cal__key {
	display: flex;
	gap: 6px;
	align-items: center;
}
.bnjc-cal__swatch {
	flex: none;
	display: inline-block;
	inline-size: 16px;
	block-size: 16px;
	border: 1px solid transparent;
	border-radius: 4px;
}
.bnjc-cal__swatch.is-chosen {
	background: var(--navy);
}
.bnjc-cal__swatch.is-shabbat {
	background: var(--wp--preset--color--cream-deep);
	border-color: var(--cal-frame);
}
.bnjc-cal__swatch.is-chag {
	background: var(--wp--custom--color--berry-tint);
	border-color: var(--berry);
	border-radius: 4px;
}
.bnjc-cal__swatch.is-booked {
	background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--grey-700) calc(50% - 1px), var(--grey-700) calc(50% + 1px), transparent calc(50% + 1px));
	border-color: var(--cal-frame);
}
.bnjc-cal__swatch.is-request {
	border: 1px dashed var(--navy);
}
.bnjc-cal__swatch.is-ring {
	inline-size: 10px;
	block-size: 10px;
	margin-inline: 3px;
	border: 2px solid var(--grey-700);
	border-radius: 50%;
}

.bnjc-cal__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	align-items: center;
	margin-block-start: 8px;
	padding: 14px 16px max(16px, env(safe-area-inset-bottom));
	border-block-start: 1px solid var(--wp--custom--color--divider);
}
.bnjc-cal__sum {
	flex: 1 0 100%;
	min-block-size: 1.5em;
}
.bnjc-cal__save {
	flex: 1;
}
/* "Clear dates": beside the date buttons (not in the dialog), across the whole row, while a date is set. */
.bnjc-cal__reset {
	grid-column: 1 / -1;
	justify-self: start;
	min-block-size: var(--touch-min, 44px);
	margin: 0;
	padding: 0 4px;
	background: none;
	border: 0;
	color: var(--navy);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.bnjc-cal__reset[hidden] {
	display: none;
}
.bnjc-cal__reset:focus-visible {
	outline: 3px solid var(--navy);
	outline-offset: 2px;
}
.bnjc-cal__clear {
	min-block-size: var(--touch-min);
	padding-inline: 8px;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
}
.bnjc-cal__save {
	min-block-size: 52px;
	padding-inline: 22px;
	background: var(--navy);
	border-radius: var(--radius-pill);
	color: var(--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}
.bnjc-cal__save:disabled {
	background: var(--wp--custom--color--grey-100);
	color: var(--grey-700);
	cursor: default;
}
.bnjc-cal__grid[aria-busy="true"] .bnjc-cal__day {
	opacity: 0.7;
}
/* The cookie notice would sit over the foot of the sheet (Save dates, Clear), so it waits until the sheet closes. */
.bnjc-cal-open .bnjc-cookie-notice,
.bnjc-cal-open .bnjc-consent {
	display: none;
}
@media (max-width: 959px) {
	.bnjc-cal-open {
		overflow: hidden;
	}
	/* The sheet is the whole screen on a phone, so nothing else may sit over it: the sticky header and bars (z-index 20 to 50,
	   above the booking section the sheet lives in) would cover the close button.
	   Hiding keeps their place in the layout; all of it comes back when the sheet closes. */
	.bnjc-cal-open :is(header.wp-block-template-part, .bnjc-section-bar, .bnjc-stay-bar, .bnjc-bsk-pill) {
		visibility: hidden;
	}
	.bnjc-cal__bar {
		padding-block-start: env(safe-area-inset-top, 0px);
	}
}

/* From 840px the words sit inside the day and the week strip goes. */
@media (min-width: 840px) {
	.bnjc-cal__wk,
	.bnjc-cal__marks {
		display: none;
	}
	/* No arrivals or departures (Shabbat, Yom Tov): a small ring in the bottom corner (the top right is the price). */
	.bnjc-cal__day.is-nc:not(.is-past)::after {
		content: "";
		position: absolute;
		inset-block-end: 10px;
		inset-inline-end: 10px;
		inline-size: 8px;
		block-size: 8px;
		border: 2px solid var(--grey-700);
		border-radius: 50%;
	}
	.bnjc-cal__day.is-start.is-nc::after,
	.bnjc-cal__day.is-end.is-nc::after {
		border-color: var(--white);
	}
	.bnjc-cal__info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
		inline-size: 100%;
		margin-block-start: 2px;
	}
	/* The date top left, the price top right, the words under them. Every week is as tall as the busiest one. */
	.bnjc-cal__day {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-rows: auto 1fr;
		align-items: start;
		align-content: start;
		gap: 4px 6px;
		min-block-size: 104px;
		padding: 8px 8px 10px;
	}
	.bnjc-cal__day .bnjc-cal__info {
		grid-column: 1 / -1;
		margin-block-start: 0;
	}
	.bnjc-cal__day .bnjc-cal__num,
	.bnjc-cal__day .bnjc-cal__price {
		align-self: baseline;
	}
	.bnjc-cal__price {
		text-align: end;
	}
	.bnjc-cal__grid {
		grid-template-rows: auto;
		grid-auto-rows: 1fr;
	}
	.bnjc-cal__chip {
		padding-inline: 8px;
	}
}
@media (min-width: 960px) {
	.bnjc-cal__sum {
		flex: 1 1 10rem;
	}
	.bnjc-cal__save {
		flex: none;
	}
	.bnjc-cal__box {
		position: absolute;
		inset: 8px auto auto;
		inset-inline-end: 0;
		inline-size: min(880px, calc(100vw - 32px));
		border: 1px solid var(--wp--custom--color--border-subtle);
		border-radius: var(--radius-md, 8px);
		box-shadow: var(--wp--preset--shadow--overlay);
	}
	.bnjc-cal__head {
		padding-inline: 20px;
	}
	.bnjc-cal__months {
		padding-inline: 16px;
	}
	.bnjc-cal__legend {
		padding-inline: 20px;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.bnjc-cal__day,
	.bnjc-cal__nav {
		transition: var(--transition-control);
	}
}