/* ==========================================================================
   Saveur — Page banner (Tastyc "intro")
   686px photo with a 45% black overlay; the transparent header (body.sv-has-hero) sits on top.
   Centred Fraunces 80px title, 20px subtitle with a gold *highlight*, breadcrumbs row and a
   scroll-mouse link at the bottom. Printed by saveur_render_page_banner() for both the widget
   and the theme templates.
   ========================================================================== */

.sv-page-banner {
	--sv-banner-h: 686px;
	position: relative;
	display: flex;
	align-items: center;
	height: var(--sv-banner-h);
	min-height: 320px;
	padding: 0;
	overflow: hidden;
	background: var(--sv-surface-2);
	text-align: center;
	color: var(--sv-heading);
}

/* ---------- Photo + overlay ---------- */
.sv-page-banner__media { position: absolute; inset: 0; overflow: hidden; }
img.sv-page-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center;
}
.sv-page-banner__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }

/* ---------- Text ---------- */
/* Reference: the text block is centred with a 45px top margin (it sits a touch below the middle) */
.sv-page-banner__inner { position: relative; z-index: 1; margin-top: 45px; }
.sv-page-banner__title {
	margin: 0 0 30px;
	font-family: var(--sv-heading-font);
	font-size: 80px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--sv-text);
	text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}
.sv-page-banner__title .sv-accent,
.sv-page-banner__subtitle .sv-accent { color: var(--sv-accent); font-style: normal; }
.sv-page-banner__subtitle {
	margin: 0 0 30px;
	font-size: 20px;
	line-height: 1.8;
	color: var(--sv-heading);
	text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}

/* Breadcrumbs: "Home › Page", 15px, current page dimmed, chevron drawn with borders */
.sv-page-banner__crumbs { display: inline-flex; align-items: center; min-height: 50px; padding: 0 30px; }
.sv-page-banner__crumbs ol { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; padding: 0; list-style: none; }
.sv-page-banner__crumbs li { display: flex; align-items: center; font-size: 15px; line-height: 27px; letter-spacing: .04em; text-transform: capitalize; }
.sv-page-banner__crumbs li + li::before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	margin: 0 15px 0 15px;
	border-right: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .8;
}
.sv-page-banner__crumbs a { color: inherit; }
.sv-page-banner__crumbs a:hover { color: var(--sv-accent); }
.sv-page-banner__crumbs .is-current { opacity: .5; }

/* ---------- Scroll mouse ---------- */
.sv-page-banner__scroll {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 24px;
	display: block;
	width: 20px;
	height: 32px;
	margin-left: -10px;
	color: var(--sv-heading);
	opacity: .85;
	transition: opacity .3s, color .3s;
}
.sv-page-banner__scroll svg { display: block; width: 100%; height: 100%; }
.sv-page-banner__scroll:hover { opacity: 1; color: var(--sv-accent); }
.sv-page-banner__wheel { animation: sv-banner-wheel 1.6s ease-in-out infinite; }
@keyframes sv-banner-wheel {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(8px); opacity: .3; }
}
/* Anchor target for the scroll link: lands just under the fixed header */
.sv-page-banner__end { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; scroll-margin-top: var(--sv-header-h, 80px); }

/* When the header is not transparent it stays in flow above the banner; nothing else to do. */

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.sv-page-banner__title { font-size: 68px; }
}
@media (max-width: 991px) {
	.sv-page-banner { --sv-banner-h: 560px; }
	.sv-page-banner__title { font-size: 56px; margin-bottom: 20px; }
	.sv-page-banner__subtitle { font-size: 18px; margin-bottom: 20px; }
}
@media (max-width: 767px) {
	.sv-page-banner { --sv-banner-h: 460px; }
	.sv-page-banner__inner { margin-top: 30px; }
	.sv-page-banner__title { font-size: 44px; }
	.sv-page-banner__subtitle { font-size: 16px; }
	.sv-page-banner__crumbs { padding: 0 10px; min-height: 40px; }
	.sv-page-banner__crumbs li { font-size: 14px; }
	.sv-page-banner__scroll { bottom: 16px; width: 16px; height: 26px; margin-left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
	.sv-page-banner__wheel { animation: none; }
}

/* Balanced line breaks: no single word left alone on the last line */
.sv-page-banner__title, .sv-page-banner__subtitle { text-wrap: balance; }
.sv-page-banner__subtitle .sv-accent { white-space: nowrap; }