/* Header and footer, identical on every page.
 *
 * On the original home page these two got their look by inheritance: Arial from
 * `body.homepage`, and no-underline links with a hover brightening from
 * `.home-shell a`. Interior pages had neither, which is why the chrome looked
 * different from page to page. Stating the rules here, against the header and
 * footer themselves, makes them hold everywhere.
 */

.site-header,
.home-footer {
	font-family: Arial, Helvetica, sans-serif;
}

.site-header a,
.home-footer a {
	text-decoration: none;
}

.site-header a:hover,
.home-footer a:hover {
	filter: brightness(1.15);
}

.site-header a:focus-visible,
.home-footer a:focus-visible {
	outline: 3px solid #cda342;
	outline-offset: 4px;
}

/* Header links: a fixed gap. styles.css sizes it from the viewport (0.8vw), so
   on wide monitors it grew until "Contact" wrapped onto a second line. Only
   applied where all ten links and the Give button fit on one row; narrower
   screens keep styles.css's wrapping. */
@media (min-width: 80rem) {
	.site-nav ul {
		flex-wrap: nowrap;
		gap: 0.8rem;
	}

	/* 12px (styles.css had 10px, too small to read comfortably). Letter
	   spacing is trimmed a touch so all ten links still fit on one row. */
	.site-nav a {
		font-size: 0.75rem;
		letter-spacing: 0.04em;
		white-space: nowrap;
	}
}

/* Menu button: hidden from 80rem up, where all ten links fit on one row. */
.nav-toggle {
	display: none;
}

/* 79.99rem: exactly where the one-row nav (80rem and up) stops fitting. */
@media (max-width: 79.99rem) {
	/* Brand, menu button and Give button on one row; links drop below. */
	.site-header__inner {
		flex-wrap: wrap;
		gap: 0.75rem 1rem;
	}

	.nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.55rem;
		order: 2;
		margin-left: auto;
		padding: 0.55rem 0.8rem;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 0.38em;
		background: transparent;
		color: #fff;
		font: 600 0.72rem/1 Arial, sans-serif;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.nav-toggle:focus-visible {
		outline: 3px solid #cda342;
		outline-offset: 3px;
	}

	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		display: block;
		width: 1.1rem;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
	}

	.nav-toggle__bars {
		position: relative;
	}

	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.nav-toggle__bars::before {
		top: -0.35rem;
	}

	.nav-toggle__bars::after {
		top: 0.35rem;
	}

	.site-header .btn--gold {
		order: 3;
	}

	.site-nav {
		display: none;
		order: 4;
		width: 100%;
		margin: 0;
		padding: 0.25rem 0 0.9rem;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 1.25rem;
	}

	.site-nav a {
		padding: 0.8rem 0;
		font-size: 0.8rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.site-nav a[aria-current="page"] {
		border-bottom-color: var(--color-gold);
	}
}

@media (max-width: 34rem) {
	/* Phones: the Give button stays visible but compact. */
	.site-header .btn--gold {
		padding: 0.5rem 0.8rem;
		font-size: 0.64rem;
	}

	.site-header .brand__sub {
		font-size: 0.45rem;
	}

	.site-nav ul {
		grid-template-columns: 1fr;
	}
}

/* ---- Full-width layout ------------------------------------------------------
 *
 * The site used to sit in a centred column capped at 72rem, so on large
 * monitors it was a small frame surrounded by empty margin. Every container
 * now spans the full width of the window, with fluid side gutters, and the
 * base font size grows smoothly with the screen so the layout (all rem-based)
 * scales with it. Phones and tablets keep 16px and their existing gutters.
 */
:root {
	--content-max: 100%;
	--gutter: clamp(1.25rem, 4vw, 6rem);
}

html {
	font-size: clamp(16px, calc(8px + 0.55vw), 24px);
}

.container {
	max-width: none;
}

/* Text beside a photo or card fills its column. Standalone paragraphs that
   span the whole page keep a generous cap, so a line does not run the full
   width of a 4K screen. */
.page-pastor > div,
.page-two > .page-prose {
	max-width: none;
}

.page-prose {
	max-width: 90ch;
}

/* ---- Banner -------------------------------------------------------------------
 *
 * One banner, identical on every page: same height, same photograph, same
 * crop. Only the text changes. The text starts at the same left edge as the
 * logo and the content below, and is vertically centred, so a one-line title
 * like "Watch Live" does not leave an empty gap under it. Bottom padding keeps
 * room for the panel that overlaps the banner on some pages.
 */
/* .page-hero is included so these win over the per-page min-height rules in
   home.css and pages.css, which made some banners taller than others. */
.home-hero,
.home-hero.page-hero {
	display: flex;
	align-items: center;
	min-height: 0;
	height: clamp(22rem, 24vw, 30rem);
}

.home-hero-content,
.page-hero .home-hero-content {
	width: 100%;
	padding-top: 2rem;
	padding-bottom: 4rem;
}

.home-hero-copy {
	max-width: 44rem;
}

@media (min-width: 62rem) {
	/* Text and photograph share one centred container, the same width as the
	   content band below, so they can never drift apart on wide screens. The
	   navy background still spans the full window. */
	.home-hero,
	.home-hero.page-hero {
		align-items: stretch;
	}

	.home-hero::before {
		content: none;
	}

	.home-hero::after {
		background: linear-gradient(0deg, rgba(3, 14, 26, 0.25), transparent 35%);
	}

	.home-hero-content,
	.page-hero .home-hero-content {
		position: relative;
		display: flex;
		align-items: center;
		max-width: max(85vw, 70rem);
		margin: 0 auto;
	}

	.home-hero-copy {
		position: relative;
		z-index: 1;
	}

	/* The photograph keeps its own proportions (1448 x 790, cropped above the bottom step), fills the banner's
	   height and sits at the right edge of the container, so "Rejoice!" and
	   the whole stage is always visible. It fades in at its edges. */
	.home-hero-content::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: var(--gutter);
		aspect-ratio: 1448 / 790;
		max-width: 60%;
		background: url("/assets/images/church/sanctuary-stage-8cf1215d.jpg");
		background-image: image-set(
			url("/assets/images/church/sanctuary-stage-8cf1215d.webp") type("image/webp"),
			url("/assets/images/church/sanctuary-stage-8cf1215d.jpg") type("image/jpeg")
		);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		-webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75) 18%, #000 32%, #000 86%, transparent);
		mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.75) 18%, #000 32%, #000 86%, transparent);
	}
}

/* Below 62rem the photograph sits behind the text, as positioned by home.css;
   only the image changes. */
@media (max-width: 61.99rem) {
	.home-hero::before {
		background: url("/assets/images/church/sanctuary-stage-8cf1215d.jpg");
		background-image: image-set(
			url("/assets/images/church/sanctuary-stage-8cf1215d.webp") type("image/webp"),
			url("/assets/images/church/sanctuary-stage-8cf1215d.jpg") type("image/jpeg")
		);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
}

/* Phones and small tablets: the text can wrap to more lines, so the banner
   grows to fit it rather than cutting it off, but never shrinks below the
   standard height. */
@media (max-width: 47.99rem) {
	.home-hero,
	.home-hero.page-hero {
		height: auto;
		min-height: 27rem;
	}
}

/* ---- Content width -----------------------------------------------------------
 *
 * Header, banner (with the schedule / facts panel that overlaps it) and footer
 * span the full window. Everything between the banner and the footer, on every
 * page, is capped at 85% of the window, but never narrower than 70rem: on
 * laptops, tablets and phones it simply fills the content area, and it only
 * settles at 85% once the screen is wide enough for that to leave margins.
 */
.home-content > :not(.home-schedule) {
	max-width: max(85vw, 70rem);
	margin-left: auto;
	margin-right: auto;
}

/* Church logo (gcf monogram) in front of the name, header and footer. */
.brand__logo {
	display: block;
	width: auto;
	height: 2.4rem;
	flex: none;
}

.home-brand__logo {
	display: block;
	width: auto;
	height: 3.2em;
	flex: none;
}

@media (max-width: 34rem) {
	.brand__logo {
		height: 2rem;
	}
}