/* ==========================================================================
   Welcome (20 Oct 2026 audit): "New here? Start here". Visit and Welcome are one page, an entry page
   in the poster composition (assets/css/area-poster.css gives the huge page title and the overlapping
   photograph; the page is mapped to the Start Here section so it takes that colour).
   Everything below the hero is ordinary blocks, edited in the page.
   ========================================================================== */

/* ---- The invitation ---------------------------------------------------------------------- */
.bnjc-welcome-coffee h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	font-size: clamp(var(--wp--preset--font-size--display-m), 7vw, var(--wp--preset--font-size--display-hero)) !important;
	color: var(--navy);
}

.bnjc-welcome-coffee .is-style-standfirst {
	max-inline-size: 36rem;
	color: var(--navy);
}

.bnjc-welcome-coffee .wp-block-buttons {
	margin-block-start: 24px;
}

/* ---- Jewish Brighton & Hove, in a few lines ----------------------------------------------- */
.bnjc-welcome-jewish__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(20px, 5vw, 80px);
	align-items: start;
}

.bnjc-welcome-jewish__grid > h2 {
	margin: 0;
}

.bnjc-welcome-jewish__body > * + * {
	margin-block-start: 16px;
}

.bnjc-welcome-jewish__body .is-style-standfirst {
	font-weight: 600;
	color: var(--navy);
}

.bnjc-welcome-jewish__body ul {
	padding-inline-start: 1.1em;
}

.bnjc-welcome-jewish__body li {
	margin-block-end: 8px;
}

/* ---- Essentials: plain cards, not a feature ------------------------------------------------- */
.bnjc-firstvisit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
	margin-block-start: 32px;
}

.bnjc-firstvisit__item {
	padding: 24px;
	background: var(--white);
	border: 1px solid color-mix(in srgb, var(--navy) 14%, transparent);
	border-block-start: 3px solid var(--navy);
	border-radius: var(--radius-xs, 2px);
}

.bnjc-firstvisit__item h3 {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-l);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--navy);
}

.bnjc-firstvisit__item p {
	margin: 0 0 10px;
}

.bnjc-firstvisit__item a {
	color: var(--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 899px) {

	.bnjc-welcome-jewish__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

/* Every section heading on the page in the display face, as on the other entry pages. */
:is(.bnjc-welcome-jewish__grid, .bnjc-welcome-essentials, .bnjc-welcome-hours, .bnjc-welcome-week, .bnjc-welcome-next, .bnjc-welcome-todo, .bnjc-welcome-tours) > h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--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;
}

/* Constrained groups centre any child that has a max width; these read from the left edge. */
.bnjc-welcome-coffee > *,
.bnjc-welcome-jewish__body > * {
	margin-inline: 0 !important;
}

/* Touch targets: links that stand on their own line in the cards are at least 44px tall. */
.bnjc-firstvisit__item a,
.bnjc-hours__item a,
.bnjc-welcome-next > p a,
.bnjc-welcome-tours > p a {
	display: inline-block;
	padding-block: 11px;
}

/* "Welcome" is seven letters, one more than the poster's phone minimum was drawn for: at 375px it ran
   off the edge. The size follows the viewport instead (about 82px at 375, 280px on a desktop). */
.bnjc-poster-wrap:has(.bnjc-landing--welcome) {
	--bnjc-poster-fs: clamp(72px, 22vw, 400px);
}

/* The coffee band's words sit in the same centred frame as the other bands (100% here is the viewport less two gutters, hence the + gutter). */
.bnjc-welcome-coffee {
	padding-inline: max(var(--wp--custom--layout--gutter, 20px), calc((100% - var(--wp--style--global--wide-size, 1344px)) / 2 + var(--wp--custom--layout--gutter, 20px))) !important;
}