/*
Theme Name: Bethany Evangelical Baptist Church
Author: Floulex Web
Description: Built from scratch for Bethany Evangelical Baptist Church, Inc., Miami, Florida. On activation it creates its own pages and adds its own photographs, so the site is complete the moment it is switched on.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bethany-ebc
*/

/*
 * PALETTE, chosen by elimination. Read this before changing a colour.
 *
 * The church's photographs are loud and warm: yellow walls, gold anniversary
 * lettering, pink and purple stage light, purple bows, sky blue shirts. The
 * site is the frame around them, so it stays quiet and cool and lets the
 * pictures be the only saturated thing on a page.
 *
 *   not navy        what nearly every church web company already ships
 *   not purple      the shorthand for "spiritual", and the photos are full of it
 *   not gold        it would fight the gold banners in almost every picture
 *   not cream with a serif and terracotta: banned house wide (DESIGN.md)
 *   not orange      the logo's second colour, but on a light ground it walks
 *                   straight back into terracotta
 *
 * What is left is the church's own blue. The logo leads with it ("Bethany
 * Evangelical" is set in it), and a cool colour sits opposite every warm
 * photograph instead of melting into it. Taken from the logo at hue 210 and
 * walked down in lightness until it clears 4.5:1 on the lightest ground it
 * lands on (the tint band, 5.07:1). That is the one accent, and it is spent
 * on things you can press: buttons, links, the current page.
 *
 * Paper is a barely cool off-white rather than cream, for the same reason.
 * The footer is the one dark surface; it has its own text colours, measured
 * on it, never the light-ground ones.
 *
 * TYPE: Literata (display cut) for headings and for the French service names
 * in italic, which is how the church's own card sets its titles. Fira Sans for
 * reading: open, sturdy, large x-height, easy for older eyes. Both SIL OFL,
 * self-hosted, latin subset.
 */

:root {
	--be-paper: #f6f8f9;
	--be-white: #ffffff;
	--be-ink: #16212b;
	--be-muted: #4a5663;
	--be-line: #d3dbe2;
	--be-tint: #e7eff6;
	--be-blue: #2967a3;
	--be-blue-deep: #1f5286;

	--be-night: #16212b;
	--be-night-text: #e8edf1;
	--be-night-muted: #aebac6;
	--be-night-line: #2f3d4a;

	--be-serif: var(--wp--preset--font-family--literata, "Literata", Georgia, serif);
	--be-sans: var(--wp--preset--font-family--fira-sans, "Fira Sans", system-ui, sans-serif);

	--be-max: 76rem;
	--be-gut: clamp(1.25rem, 4vw, 3rem);
	--be-sec: clamp(3.5rem, 8vw, 6.5rem);
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--be-paper);
	color: var(--be-ink);
	font-family: var(--be-sans);
	overflow-x: clip;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a {
	color: var(--be-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
a:hover { color: var(--be-blue-deep); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--be-blue); outline-offset: 3px; }

strong, b { font-weight: 600; }

h1, h2, h3 {
	font-family: var(--be-serif);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; }

address { font-style: normal; }

body .wp-site-blocks > * { margin-block-start: 0; }

.be-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 120px;
	pointer-events: none;
}

/* ---------------------------------------------------------------- layout */

.be-wrap {
	width: 100%;
	max-width: var(--be-max);
	margin-inline: auto;
	padding-inline: var(--be-gut);
}

/*
 * Vertical rhythm inside a group, stated here rather than left to core: the
 * bare p/h margin resets above outrank core's zero-specificity flow rule.
 * Declared early so any later rule of the same weight can override it.
 */
.be-main :is(.wp-block-group, .wp-block-quote) > * + * { margin-block-start: 1.1rem; }
.be-main .wp-block-heading + .be-sub { margin-block-start: 0.6rem; }
.be-main .be-display + .be-lede { margin-block-start: 1.4rem; }

/* Grids reset that spacing, or the second column drops by a gap. */
.be-main .be-cols > * { margin-block-start: 0; }

.be-main .be-sec {
	margin-block: 0;
	padding-block: calc(var(--be-sec) / 2);
}
.be-main .be-sec:first-child { padding-top: var(--be-sec); }
.be-main .be-sec:last-child { padding-bottom: var(--be-sec); }

.be-main .be-sec.be-band {
	background: var(--be-tint);
	padding-block: var(--be-sec);
	margin-block: calc(var(--be-sec) / 2);
}

.be-main .be-sec.be-band:last-child { margin-bottom: 0; }

.be-measure { max-width: 46rem; }

.be-main h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.be-main h3 { font-size: 1.3rem; }

.be-display {
	font-size: clamp(2.5rem, 5.6vw, 4.5rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.be-lede {
	font-size: clamp(1.15rem, 1.6vw, 1.32rem);
	line-height: 1.55;
	color: var(--be-muted);
	max-width: 38rem;
}

.be-sub {
	font-size: 1.15rem;
	color: var(--be-muted);
	max-width: 40rem;
}

.be-main .wp-block-image { margin: 0; }

/* --------------------------------------------------------------- header */

.be-head-part {
	position: relative;
	z-index: 20;
}

.be-head {
	background: var(--be-paper);
	border-bottom: 1px solid var(--be-line);
	transition: box-shadow 0.25s ease;
}

.be-head-in {
	display: flex;
	align-items: center;
	gap: 1rem 2.5rem;
	max-width: var(--be-max);
	margin-inline: auto;
	padding: 0.85rem var(--be-gut);
}

.be-brand { display: block; flex: none; line-height: 0; }
.be-brand img {
	display: block;
	height: 104px;
	width: auto;
	transition: height 0.25s ease;
}

.be-nav {
	display: flex;
	align-items: center;
	gap: 0.25rem 2rem;
	margin-left: auto;
	font-weight: 600;
	font-size: 1.06rem;
}
.be-nav a {
	color: var(--be-ink);
	text-decoration: none;
	padding-block: 0.45rem;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.be-nav a:hover { color: var(--be-ink); border-bottom-color: var(--be-line); }
.be-nav a[aria-current="page"] { border-bottom-color: var(--be-blue); }

.be-head-call {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	padding: 0.6rem 1rem;
	border: 2px solid var(--be-blue);
	color: var(--be-blue);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.be-head-call:hover { background: var(--be-blue); color: #fff; }

@media (min-width: 900px) {
	.be-head-part { position: sticky; top: 0; }
	.admin-bar .be-head-part { top: 32px; }
	.be-head.is-scrolled { box-shadow: 0 1px 0 var(--be-line), 0 8px 24px rgba(22, 33, 43, 0.06); }
	.be-head.is-scrolled .be-brand img { height: 60px; }
}

@media (max-width: 899px) {
	.be-head-in { flex-wrap: wrap; gap: 0.6rem 1rem; padding-block: 0.7rem 0; }
	.be-brand img { height: 70px; }
	.be-head-call { margin-left: auto; }
	.be-nav {
		order: 3;
		width: 100%;
		margin-left: 0;
		gap: 1.75rem;
		border-top: 1px solid var(--be-line);
		padding-block: 0.35rem;
	}
}

@media (max-width: 480px) {
	.be-call-num { display: none; }
	.be-nav { gap: 1.4rem; }
}

/* -------------------------------------------------------------- buttons */

.be-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}
.be-main .be-actions { margin-block-start: 2rem; }

.be-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.1rem;
	padding: 0.7rem 1.4rem;
	border: 2px solid var(--be-blue);
	font-weight: 600;
	font-size: 1.05rem;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.be-btn-solid { background: var(--be-blue); color: #fff; }
.be-btn-solid:hover { background: var(--be-blue-deep); border-color: var(--be-blue-deep); color: #fff; }
.be-btn-line { background: transparent; color: var(--be-blue); }
.be-btn-line:hover { background: var(--be-blue); color: #fff; }

/* ----------------------------------------------------------- the opening */

.be-main .be-sec.be-open { padding-top: clamp(2.5rem, 6vw, 5rem); }

.be-open-grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.be-open-text .be-lede { margin-block-start: 1.4rem; }

/* The Sunday card: the church's own card, set as a timetable. */
.be-sunday {
	background: var(--be-white);
	border: 1px solid var(--be-line);
	border-top: 4px solid var(--be-ink);
	padding: clamp(1.35rem, 3vw, 2rem);
}
.be-main .be-sunday-h { font-size: 1.55rem; margin-bottom: 0.9rem; }

.be-sunday-list { list-style: none; margin: 0; padding: 0; }
.be-sunday-list li {
	display: grid;
	grid-template-columns: 6.4rem minmax(0, 1fr);
	gap: 0.15rem 1rem;
	padding-block: 0.95rem;
	border-top: 1px solid var(--be-line);
}
.be-t {
	grid-row: span 2;
	font-family: var(--be-serif);
	font-weight: 600;
	font-size: 1.7rem;
	line-height: 1.05;
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}
.be-t small {
	font-family: var(--be-sans);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.be-until { font-size: 0.95rem; color: var(--be-muted); }
.be-sunday-where {
	margin-top: 0.4rem;
	padding-top: 0.95rem;
	border-top: 1px solid var(--be-line);
	font-size: 0.95rem;
	color: var(--be-muted);
}

/* English over the card's French, everywhere a service is named. */
.be-en { display: block; font-weight: 600; line-height: 1.3; }
.be-fr {
	display: block;
	font-family: var(--be-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--be-muted);
	line-height: 1.35;
	margin-top: 0.1rem;
}

/* ------------------------------------------------------- the quote band */

.be-band-grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.be-main .be-band-grid h2 {
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	padding-top: 0.7rem;
	border-top: 2px solid var(--be-ink);
	max-width: 16rem;
}

.be-main .be-quote {
	margin: 0;
	padding: 0;
	border: 0;
}
.be-main .be-quote p {
	font-family: var(--be-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--be-ink);
	text-wrap: balance;
}
.be-main .be-quote p::before { content: "\201C"; }
.be-main .be-quote p::after { content: "\201D"; }
.be-main .be-quote cite {
	display: block;
	margin-top: 1.25rem;
	font-style: normal;
	font-size: 1rem;
	color: var(--be-muted);
}

.be-main .be-quote.be-quote-sm {
	margin-block-start: 1.75rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--be-ink);
}
.be-main .be-quote.be-quote-sm p { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }

/* ------------------------------------------------------ photographs */

.be-main .be-photos {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	margin-block-start: 2rem;
}
.be-main .be-photos .be-ph { margin: 0; }
.be-photos .be-ph-main { grid-row: span 2; }
.be-photos .be-ph img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--be-line);
}
.be-photos .be-ph-main img { aspect-ratio: auto; min-height: 100%; }

/* Small originals are shown as prints, at the size they can hold. */
.be-prints {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
	gap: 1.25rem;
	align-items: start;
}
.be-main .be-prints .be-print {
	margin: 0;
	padding: 0.6rem;
	background: var(--be-white);
	border: 1px solid var(--be-line);
}
.be-prints .be-print img { display: block; width: 100%; height: auto; }
.be-prints .be-print-wide { margin-top: 3rem; }

.be-portrait-fig { max-width: 28rem; }
.be-main .be-portrait-fig { margin: 0; }
.be-portrait-fig img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* ------------------------------------------------------------ the week */

.be-week-grid,
.be-where-grid,
.be-church-grid,
.be-pastor-grid {
	display: grid;
	gap: 2.5rem clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.be-week-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.be-where-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.be-church-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.be-pastor-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.be-main .be-week-list { list-style: none; margin: 1.5rem 0 0; padding: 0; border-bottom: 1px solid var(--be-line); }
.be-week-list li {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr) auto;
	gap: 0.3rem 1.25rem;
	align-items: baseline;
	padding-block: 1rem;
	border-top: 1px solid var(--be-line);
}
.be-day { font-family: var(--be-serif); font-weight: 600; font-size: 1.2rem; }
.be-when { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.be-main .be-more { margin-top: 1.25rem; font-weight: 600; }

/* --------------------------------------------------------- the schedule */

.be-main .be-sched { margin-top: 2rem; border-bottom: 1px solid var(--be-line); }
.be-sched-day {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	gap: 0.5rem 2rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--be-line);
}
.be-sched-day:first-child { border-top: 2px solid var(--be-ink); }
.be-main .be-sched-dayname { font-size: clamp(1.45rem, 2.3vw, 1.9rem); }
.be-sched-items { list-style: none; margin: 0; padding: 0; }
.be-sched-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.35rem 2rem;
	padding-block: 0.6rem;
}
.be-sched-item + .be-sched-item { border-top: 1px dashed var(--be-line); }
.be-sched-item .be-en { font-size: 1.18rem; }
.be-sched-time {
	font-weight: 600;
	font-size: 1.1rem;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- where and map */

.be-main .be-where { margin-top: 1.5rem; }
.be-addr {
	font-family: var(--be-serif);
	font-weight: 600;
	font-size: clamp(1.45rem, 2.4vw, 1.85rem);
	line-height: 1.25;
}
.be-dir { margin-top: 0.75rem; font-weight: 600; }
.be-contact { list-style: none; margin: 1.75rem 0 0; padding: 0; border-bottom: 1px solid var(--be-line); }
.be-contact li { padding-block: 0.7rem; border-top: 1px solid var(--be-line); }
.be-label { display: block; font-size: 0.9rem; color: var(--be-muted); }
.be-contact a { font-weight: 600; font-size: 1.15rem; }
.be-email { overflow-wrap: anywhere; }

.be-map {
	margin: 0;
	padding: 0.5rem;
	background: var(--be-white);
	border: 1px solid var(--be-line);
}
.be-map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	border: 0;
	background: var(--be-tint);
}

/* --------------------------------------------------------------- giving */

.be-main .be-give {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 2.25rem;
	border-top: 2px solid var(--be-ink);
}
.be-give-item { padding: 1.5rem 1.75rem 1.75rem 0; }
.be-give-item + .be-give-item { padding-left: 1.75rem; border-left: 1px solid var(--be-line); }
.be-main .be-give h3 { font-size: 1.15rem; font-family: var(--be-sans); font-weight: 600; color: var(--be-muted); }
.be-give-val {
	margin-block: 0.6rem 0.5rem;
	font-family: var(--be-serif);
	font-weight: 600;
	font-size: clamp(1.35rem, 2.1vw, 1.7rem);
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.be-give-payee { font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
.be-give-note { color: var(--be-muted); }

/* --------------------------------------------------------------- footer */

.be-foot {
	background: var(--be-night);
	color: var(--be-night-text);
	padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
}
.be-foot a { color: var(--be-night-text); }
.be-foot a:hover { color: #fff; }
.be-foot-grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 4.4fr) minmax(0, 3.4fr) minmax(0, 1.6fr);
	gap: 2rem;
}
.be-foot-name {
	font-family: var(--be-serif);
	font-weight: 600;
	font-size: 1.45rem;
	line-height: 1.2;
}
.be-foot-pastor { margin-top: 0.6rem; color: var(--be-night-muted); }
.be-foot-h {
	margin-bottom: 0.55rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--be-night-muted);
}
.be-foot-contact { margin-top: 0.75rem; }
.be-foot-list { list-style: none; margin: 0; padding: 0; }
.be-foot-list li { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0.5rem; padding-block: 0.15rem; }
.be-foot-time { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.be-foot .be-email { font-size: 0.92rem; }
.be-foot-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.be-foot-base {
	margin-top: 2.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--be-night-line);
	color: var(--be-night-muted);
	font-size: 0.92rem;
}

/* --------------------------------------------------------------- motion */

.js .be-rev {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--d, 0) * 90ms);
}
.js .be-rev.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js .be-rev { opacity: 1; transform: none; transition: none; }
	.be-brand img, .be-head, .be-btn { transition: none; }
}

@media print {
	.js .be-rev { opacity: 1 !important; transform: none !important; }
	.be-head-part { position: static; }
	.be-map, .be-head-call { display: none; }
}

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 1000px) {
	.be-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.be-open-grid,
	.be-band-grid,
	.be-week-grid,
	.be-where-grid,
	.be-church-grid,
	.be-pastor-grid { grid-template-columns: minmax(0, 1fr); }
	.be-sunday { max-width: 34rem; }
	.be-main .be-band-grid h2 { max-width: none; }
	.be-main .be-give { grid-template-columns: minmax(0, 1fr); }
	.be-give-item,
	.be-give-item + .be-give-item { padding: 1.4rem 0; border-left: 0; }
	.be-give-item + .be-give-item { border-top: 1px solid var(--be-line); }
	.be-prints { max-width: 36rem; }
}

@media (max-width: 700px) {
	.be-main .be-photos { grid-template-columns: minmax(0, 1fr); }
	.be-photos .be-ph-main { grid-row: auto; }
	.be-photos .be-ph-main img { aspect-ratio: 4 / 3; min-height: 0; }
	.be-sched-day { grid-template-columns: minmax(0, 1fr); }
	.be-map iframe { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
	.be-week-list li { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
	.be-contact .be-email { font-size: 0.98rem; }
	.be-foot-grid { grid-template-columns: minmax(0, 1fr); }
	.be-prints { grid-template-columns: minmax(0, 1fr); }
	.be-prints .be-print-tall { max-width: 16.5rem; }
	.be-prints .be-print-wide { margin-top: 0; max-width: 21.5rem; }
	.be-sunday-list li { grid-template-columns: 5.6rem minmax(0, 1fr); }
	.be-t { font-size: 1.5rem; }
}

/* ------------------------------------------------------------- details */

.be-what { min-width: 0; }
.be-phones a { white-space: nowrap; font-weight: 600; }
.be-foot-id { max-width: 22rem; }
.be-foot-part { margin: 0; }
.be-giving { scroll-margin-top: 8rem; }
.be-main .be-role {
	margin-block-start: 0.35rem;
	font-family: var(--be-serif);
	font-style: italic;
	font-size: 1.25rem;
	color: var(--be-muted);
}

.be-give-item h3 + .be-give-note { margin-top: 0.6rem; }