/* The Stay pages (20 Oct 2026 audit): the entry page, getting here, the questions, the
   homes page and At the Hub. Tokens from theme.json only. Loads after components.css.
   The booking widget's own styles are in bnjc-core blocks/stay-search/style.css. */

/* ---- Entry: the photograph, then the search under it ------------------------------- */
/* A shorter photograph (it was 420px and pushed the dates off the first screen), so the headline, the
   direct-booking line and the whole search (dates, guests, the button, the next holidays) show together. */
.wp-block-cover.bnjc-stay-hero {
	z-index: 1;
	min-block-size: 260px;
	padding-block: clamp(28px, 3.5vw, 44px);
}

.bnjc-stay-hero h1,
.bnjc-stay-hero p {
	text-shadow: 0 1px 14px rgba(11, 12, 56, 0.55);
}

.bnjc-stay-hero p.bnjc-stay-hero__direct {
	margin: 18px auto 0;
	font-weight: 700;
}

.bnjc-anchor {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin-block-start: -88px; /* the sticky header does not cover the search when a link jumps here */
	pointer-events: none;
}

.bnjc-stay-book {
	position: relative;
	z-index: 4; /* the calendar opens below the search and must paint over what follows */
	margin-block: 0;
	padding: clamp(20px, 3vw, 32px) var(--wp--style--root--padding-left, 24px) 0;
	background: var(--cream);
}

.bnjc-stay-book .bnjc-search--form {
	scroll-margin-block-start: 96px;
}

/* The card is white on the cream band (it was cream on the photograph). */
.bnjc-stay-book .bnjc-search--form .bnjc-search__card {
	background: var(--white);
	box-shadow: var(--wp--preset--shadow--raised);
}

/* "Not sure?": the one line under the pills. */
.bnjc-stay-book .bnjc-need {
	padding-inline: 0;
}

.bnjc-stay-book .bnjc-need__panel {
	max-inline-size: none;
	background: var(--white);
}

/* ---- The perks: four coloured cards ------------------------------------------------ */
.bnjc-creds {
	background: var(--cream);
	padding-block: clamp(24px, 4vw, 48px);
}

.bnjc-cred {
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 6px 14px;
	align-content: start;
	padding: 22px;
	border-block-start: 0;
	border-radius: var(--radius-md);
	box-shadow: none;
}

.bnjc-cred__icon {
	grid-row: 1 / span 2;
	box-sizing: border-box;
	inline-size: 48px;
	block-size: 48px;
	padding: 10px;
	background: var(--white);
	border-radius: var(--radius-pill);
	color: var(--navy);
}

.bnjc-cred__name {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 700;
	line-height: 1.1;
}

.bnjc-cred__note {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.bnjc-cred--gold {
	background: var(--wp--preset--color--gold);
	color: var(--navy);
}

.bnjc-cred--teal {
	background: var(--wp--preset--color--teal);
	color: var(--navy);
}

.bnjc-cred--pink {
	background: var(--wp--preset--color--pink);
	color: var(--navy);
}

.bnjc-cred--navy {
	background: var(--navy);
	color: var(--white);
}

.bnjc-cred--navy .bnjc-cred__name,
.bnjc-cred--navy .bnjc-cred__note {
	color: var(--white);
}

.bnjc-cred--gold .bnjc-cred__name,
.bnjc-cred--gold .bnjc-cred__note,
.bnjc-cred--teal .bnjc-cred__name,
.bnjc-cred--teal .bnjc-cred__note,
.bnjc-cred--pink .bnjc-cred__name,
.bnjc-cred--pink .bnjc-cred__note {
	color: var(--navy);
}

/* ---- Band headings for the bands added to the Stay page --------------------------------------------
   The same look as the other bands (area-poster.css, .bnjc-stay-h2): the display face, bold, one size. */
.bnjc-creds__head h2.wp-block-heading,
.bnjc-stay-practical h2.wp-block-heading {
	margin: 0;
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.04;
	font-size: clamp(var(--wp--preset--font-size--display-s), 4.2vw, var(--wp--preset--font-size--display-m)) !important;
}

.bnjc-creds__head {
	max-inline-size: var(--wp--style--global--wide-size, 1344px);
	margin: 0 auto clamp(16px, 2vw, 24px);
	padding-inline: var(--wp--style--root--padding-left, 24px);
}

/* ---- Shabbat and Yom Tov in practice: six short cards ------------------------------------------------ */
.bnjc-stay-practical {
	margin-block: 0;
	padding-block: clamp(32px, 5vw, 56px);
	background: var(--cream);
}

.bnjc-stay-practical__inner {
	display: grid;
	gap: 12px;
	max-inline-size: var(--wp--style--global--wide-size, 1344px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 24px);
}

.bnjc-stay-practical__inner > * {
	margin: 0;
}

.bnjc-stay-practical__lead {
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--medium);
}

.bnjc-stay-practical .bnjc-cards {
	margin-block-start: 12px;
}

/* ---- Group stays: three routes, then the one button ------------------------------------------------- */
.bnjc-stay-groups__card {
	max-inline-size: var(--wp--style--global--wide-size, 1344px);
}

.bnjc-stay-groups__card .bnjc-cards {
	justify-self: stretch;
	margin-block: 8px 4px;
}

.bnjc-stay-groups__call {
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-stay-groups__call a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-min);
}

/* ---- Make a weekend of it: the card grid is the block's own CSS (bnjc-core blocks/stay-events/style.css) ---- */

/* ---- Guest reviews (nothing is drawn until real ones are entered) ------------------ */
.bnjc-reviews {
	max-inline-size: var(--wp--style--global--wide-size, 1344px);
	margin-inline: auto;
	padding: clamp(32px, 5vw, 56px) var(--gutter, 16px);
	color: var(--ink);
}

.bnjc-reviews__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: baseline;
	margin-block-end: 20px;
}

.bnjc-reviews__title {
	margin: 0;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: clamp(var(--wp--preset--font-size--display-s), 4vw, var(--wp--preset--font-size--display-m));
	line-height: 1.04;
}

.bnjc-reviews__score {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.bnjc-reviews__score strong {
	font-size: var(--wp--preset--font-size--heading-l);
}

.bnjc-reviews__list {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0 0 8px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
}

.bnjc-reviews__item {
	flex: 0 0 min(86%, 340px);
	scroll-snap-align: start;
}

.bnjc-reviews__item figure {
	block-size: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 20px;
	background: var(--white);
	border-block-start: 6px solid var(--wp--preset--color--gold);
	border-radius: var(--radius-md);
	box-shadow: var(--wp--preset--shadow--card);
}

.bnjc-reviews__stars {
	margin: 0 0 8px;
	color: var(--navy);
	font-size: var(--wp--preset--font-size--heading-m);
	letter-spacing: 0.1em;
}

.bnjc-reviews__stars span {
	opacity: 0.25;
}

.bnjc-reviews__item blockquote {
	margin: 0 0 12px;
}

.bnjc-reviews__item blockquote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.bnjc-reviews__item figcaption {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.bnjc-reviews__item figcaption span {
	color: var(--grey-700);
	font-weight: 400;
}

.bnjc-reviews__more a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-min);
	color: var(--navy);
	font-weight: 700;
}

@media (min-width: 960px) {
	.bnjc-reviews__list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		overflow: visible;
	}
}

/* ---- Questions: search box and list ------------------------------------------------ */
.bnjc-faq--page {
	max-inline-size: 860px;
	margin-inline: auto;
	padding: clamp(24px, 4vw, 48px) var(--wp--style--root--padding-left, 24px);
}

.bnjc-faq .wp-block-details[hidden] {
	display: none;
}

.bnjc-faq--page .bnjc-faq__list > .wp-block-details {
	margin-block: 0 8px;
}

.bnjc-faq-search {
	margin-block-end: 20px;
}

.bnjc-faq-search[hidden] {
	display: none;
}

.bnjc-faq-search__label {
	display: block;
	margin-block-end: 6px;
	color: var(--navy);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.bnjc-faq-search__input {
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 52px;
	padding: 0 16px;
	background: var(--white);
	border: 1.5px solid var(--navy);
	border-radius: var(--radius-xs);
	color: var(--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.bnjc-faq-search__input:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

.bnjc-faq-search__count {
	margin: 6px 0 0;
	min-block-size: 1.5em;
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-faq-search__empty {
	margin: 8px 0 0;
	padding: 14px 16px;
	background: var(--wp--preset--color--cream-deep);
	border-radius: var(--radius-xs);
}

.bnjc-faq__more {
	margin-block: 20px 0;
	font-weight: 700;
}

.bnjc-faq__more a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-min);
	color: var(--navy);
}

.bnjc-sim-link {
	margin-block-start: 8px;
}

.bnjc-sim-link small {
	color: var(--grey-700);
}

/* Section headings on the Stay information pages: the display face, like the bands on the entry page. */
.bnjc-stay-h2 {
	margin-block: clamp(32px, 5vw, 56px) 16px;
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.04;
	font-size: clamp(var(--wp--preset--font-size--display-s), 4.2vw, var(--wp--preset--font-size--display-m)) !important;
}

/* ---- Getting here: route cards ----------------------------------------------------- */
.bnjc-routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-block: 8px 24px;
}

.bnjc-routes--three {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.bnjc-route {
	box-sizing: border-box;
	padding: 22px;
	background: var(--wp--preset--color--cream-deep);
	border-block-start: 6px solid var(--navy);
	border-radius: var(--radius-md);
}

.bnjc-route:nth-child(4n + 2) {
	border-block-start-color: var(--berry);
}

.bnjc-route:nth-child(4n + 3) {
	border-block-start-color: var(--wp--preset--color--blue);
}

.bnjc-route:nth-child(4n) {
	border-block-start-color: var(--wp--preset--color--gold);
}

.bnjc-route > * {
	margin-block: 0 8px;
}

.bnjc-route h3 {
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading-m);
}

.bnjc-route__time {
	color: var(--navy);
	font-weight: 700;
}

.bnjc-planner__credit {
	color: var(--grey-700);
	font-size: var(--wp--preset--font-size--caption);
}

.bnjc-planner__map-link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-min);
}

/* The card titles on Homes and At the Hub are second-level headings (the page's H1 is the only thing above them). */
.bnjc-cardset__item .bnjc-cardset__title {
	margin: 0 0 8px;
	color: var(--navy);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.1;
}

/* ---- Homes: the row of cards to what comes next ------------------------------------ */
.bnjc-linkcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin-block: 16px 32px;
}

.bnjc-linkcard {
	position: relative;
	box-sizing: border-box;
	padding: 20px;
	border-radius: var(--radius-md);
	color: var(--navy);
}

.bnjc-linkcard > * {
	margin: 0;
}

.bnjc-linkcard--gold {
	background: var(--wp--preset--color--gold);
}

.bnjc-linkcard--teal {
	background: var(--wp--preset--color--teal);
}

.bnjc-linkcard--pink {
	background: var(--wp--preset--color--pink);
}

.bnjc-linkcard--terracotta {
	background: var(--wp--preset--color--yofi-terracotta);
}

.bnjc-linkcard--navy {
	background: var(--navy);
	color: var(--white);
}

.bnjc-linkcard__title {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 700;
}

/* The whole card is the link; the title underlines on hover and focus to say so. */
.bnjc-linkcard__title a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-block-size: var(--touch-min);
	color: inherit;
	text-decoration: none;
}

.bnjc-linkcard__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.bnjc-linkcard__title a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.bnjc-linkcard__title a:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

.bnjc-linkcard--navy a:focus-visible {
	outline-color: var(--cream);
}

.bnjc-linkcard__note {
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-linkcard:hover {
	box-shadow: var(--wp--preset--shadow--card);
}