/*
Theme Name: Mountain View Missionary Baptist Church
Theme URI: https://floulexweb.com/
Author: Floulex Web
Author URI: https://floulexweb.com/
Description: Built from scratch for Mountain View Missionary Baptist Church, Campobello, South Carolina. A Church with A Vision, since 1904.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: mountain-view-mbc
*/

/*
 * PALETTE, chosen by elimination (2026-10-29). The church has no logo yet, so
 * there was no logo colour to take (the house rule when there is one). The
 * colours come from the church's own world instead: its name.
 *
 *   Not navy: what every church web company already uses.
 *   Not purple: the lazy shorthand for "spiritual".
 *   Not gold: reads megachurch, and fights any photograph of a gold altar cloth.
 *   Not terracotta on cream: banned by name in DESIGN.md.
 *   Not deep green: that is Floulex Web's own colour, and the church's site
 *   should not look like ours.
 *
 * What is left is the one colour the church already owns: the view in its name.
 * From Campobello the Blue Ridge sits on the skyline in layers of blue haze,
 * paler as they go back. So the accent is a ridge blue (#2d5a6e), a grey green
 * blue that is plainly not navy, and the deep panel is the nearest ridge
 * (#1b3643). The ground is a warm morning haze rather than a cold grey, and the
 * hero sky is a pale dawn (#efe5d6) because the vision is a view at first light.
 *
 * If the church has colours of its own (a sign, a banner, a bulletin), those
 * replace these. It is on the "ask after the preview" list.
 *
 * Contrast, measured: ink on ground 13.36, muted on ground 6.28, muted on sky
 * 5.56 (the worst body pair), ridge on ground 6.80, paper on ridge 7.30, text
 * on deep 11.15, muted on deep 7.21, ridge-lite on deep 6.58.
 *
 * TYPE: Young Serif for display, a warm, sturdy old style face that suits a
 * church that has stood since 1904. Atkinson Hyperlegible for everything you
 * read, Source Sans 3 at 18px: open, plain and easy at small sizes, because a
 * congregation reading this on a phone includes grandparents. (Atkinson
 * Hyperlegible was tried first and dropped: it slashes its zeros, so "1904"
 * and "10:30" read as a typo.) Both are OFL and self-hosted, nothing owed.
 */

:root {
	--mv-ground: var(--wp--preset--color--ground);
	--mv-paper: var(--wp--preset--color--paper);
	--mv-sky: var(--wp--preset--color--sky);
	--mv-ink: var(--wp--preset--color--ink);
	--mv-muted: var(--wp--preset--color--muted);
	--mv-ridge: var(--wp--preset--color--ridge);
	--mv-deep: var(--wp--preset--color--deep);
	--mv-on-deep: var(--wp--preset--color--on-deep);
	--mv-line: var(--wp--preset--color--line);
	--mv-deep-muted: #b6c6cc;
	--mv-ridge-lite: #9fc0cc;
	--mv-display: var(--wp--preset--font-family--display);
	--mv-pad: clamp(1.25rem, 4vw, 2.5rem);
	--mv-sec: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; margin: 0; }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { text-wrap: balance; font-variant-numeric: lining-nums; }
:focus-visible { outline: 3px solid var(--mv-ridge); outline-offset: 3px; }

/* The one wrapper. Its first child's left edge is the same on every page. */
.mv-wrap {
	width: 100%;
	max-width: calc(72rem + 2 * var(--mv-pad));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mv-pad);
	padding-right: var(--mv-pad);
}
.mv-measure { max-width: 44rem; }

/* WordPress's constrained layout must not squeeze our full width sections. */
.mv-main { margin: 0; padding: 0; }
.mv-main .wp-block-post-content > .alignfull { margin-top: 0; margin-bottom: 0; max-width: none; }
.mv-main .wp-block-post-content { margin-top: 0; }

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

.mv-rail { background: var(--mv-deep); color: var(--mv-on-deep); font-size: var(--wp--preset--font-size--note); }
.mv-rail-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1.5rem; padding-top: 0.45rem; padding-bottom: 0.45rem; }
.mv-rail p { margin: 0; }
.mv-rail-times span + span::before { content: "\00b7"; margin: 0 0.5rem; color: var(--mv-ridge-lite); }
.mv-rail-call { display: flex; gap: 1.25rem; align-items: center; }
.mv-rail-where { color: var(--mv-deep-muted); }
.mv-rail a { color: var(--mv-on-deep); font-weight: 700; }

.mv-head { background: var(--mv-paper); border-bottom: 1px solid var(--mv-line); position: relative; z-index: 20; }
.mv-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5.25rem; }

.mv-name { display: flex; flex-direction: column; color: var(--mv-ink); text-decoration: none; line-height: 1.05; padding: 0.6rem 0; }
.mv-name-1 { font-family: var(--mv-display); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); }
.mv-name-2 { font-size: 0.98rem; color: var(--mv-muted); margin-top: 0.3rem; letter-spacing: 0.01em; }
.mv-name:hover .mv-name-1 { color: var(--mv-ridge); }

.mv-panel { display: contents; }
.mv-nav { display: flex; align-items: center; gap: 0.25rem; }
.mv-nav a { color: var(--mv-ink); text-decoration: none; padding: 0.65rem 0.8rem; font-size: 1.05rem; border-bottom: 2px solid transparent; }
.mv-nav a:hover { color: var(--mv-ridge); border-bottom-color: var(--mv-line); }
.mv-nav a[aria-current="page"] { color: var(--mv-ridge); border-bottom-color: var(--mv-ridge); font-weight: 700; }

.mv-menu { display: none; }
.mv-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.95rem; border: 1px solid var(--mv-ink); color: var(--mv-ink); font-weight: 700; }
.mv-menu summary::-webkit-details-marker { display: none; }
.mv-menu-bars, .mv-menu-bars::before, .mv-menu-bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.mv-menu-bars::before, .mv-menu-bars::after { content: ""; position: absolute; left: 0; }
.mv-menu-bars::before { top: -6px; }
.mv-menu-bars::after { top: 6px; }
.mv-menu[open] .mv-menu-bars { background: transparent; }
.mv-menu[open] .mv-menu-bars::before { top: 0; transform: rotate(45deg); }
.mv-menu[open] .mv-menu-bars::after { top: 0; transform: rotate(-45deg); }

/* Measured: the five items and the name fit on one row down to 760px. */
@media (max-width: 820px) {
	.mv-bar { position: relative; }
	.mv-menu { display: block; }
	.mv-panel { display: none; }
	.mv-nav { display: none; }
	.mv-menu[open] ~ .mv-panel { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--mv-paper); border-top: 1px solid var(--mv-line); border-bottom: 1px solid var(--mv-line); box-shadow: 0 14px 28px rgba(27, 54, 67, 0.12); padding: 0.5rem var(--mv-pad) 1rem; }
	.mv-menu[open] ~ .mv-panel .mv-nav { display: flex; flex-direction: column; align-items: stretch; }
	.mv-nav a { padding: 0.95rem 0.25rem; border-bottom: 1px solid var(--mv-line); font-size: 1.15rem; }
	.mv-nav a[aria-current="page"] { border-bottom-color: var(--mv-line); border-left: 3px solid var(--mv-ridge); padding-left: 0.75rem; }
}
@media (max-width: 560px) {
	.mv-rail-where { display: none; }
	.mv-rail-in { justify-content: flex-start; }
}
@media (max-width: 380px) {
	.mv-name-1 { font-size: 1.3rem; }
	.mv-name-2 { font-size: 0.9rem; }
	.mv-menu-word { display: none; }
}

/* -------------------------------------------------------------- sections */

.mv-sec { padding-top: var(--mv-sec); padding-bottom: var(--mv-sec); background: var(--mv-ground); }
.mv-sec--paper { background: var(--mv-paper); border-top: 1px solid var(--mv-line); border-bottom: 1px solid var(--mv-line); }
.mv-sec--deep { background: var(--mv-deep); color: var(--mv-on-deep); }
.mv-sec--deep h2, .mv-sec--deep h3, .mv-sec--deep p { color: var(--mv-on-deep); }
.mv-sec--deep a { color: var(--mv-on-deep); }
.mv-sec + .mv-sec:not(.mv-sec--paper):not(.mv-sec--deep):not(.mv-hero) { padding-top: 0; }
.mv-sec--paper + .mv-sec, .mv-sec--deep + .mv-sec, .mv-hero + .mv-sec { padding-top: var(--mv-sec) !important; }

.mv-sec h2 { margin: 0 0 1rem; }
.mv-sec h3 { margin: 0 0 0.5rem; }
.mv-sec p { margin: 0 0 1rem; }
.mv-sec p:last-child { margin-bottom: 0; }

.mv-kicker { font-size: 1.02rem; color: var(--mv-muted); margin: 0 0 1rem !important; }
.mv-lede { font-size: var(--wp--preset--font-size--lede); line-height: 1.5; color: var(--mv-ink); max-width: 40rem; }

.mv-link a, a.mv-more { font-weight: 700; color: var(--mv-ridge); }
.mv-link a::after { content: " \2192"; }
.mv-sec--deep .mv-link a { color: var(--mv-ridge-lite); }

.mv-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem !important; }
.mv-btn, .mv-actions a { display: inline-block; background: var(--mv-ridge); color: var(--mv-paper); text-decoration: none; font-weight: 700; padding: 0.9rem 1.35rem; border: 2px solid var(--mv-ridge); line-height: 1.2; font-size: 1.05rem; cursor: pointer; font-family: inherit; }
.mv-btn:hover, .mv-actions a:hover { background: var(--mv-deep); border-color: var(--mv-deep); color: var(--mv-paper); }
.mv-actions a + a { background: transparent; color: var(--mv-ink); border-color: var(--mv-ink); }
.mv-actions a + a:hover { background: var(--mv-ink); color: var(--mv-paper); }

/* Page opener: the title of an inner page. */
.mv-opener { padding-top: clamp(3rem, 2rem + 3vw, 5rem); padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.75rem); background: var(--mv-sky); border-bottom: 1px solid var(--mv-line); }
.mv-opener h1 { margin: 0 0 0.9rem; }
.mv-opener .mv-lede { margin: 0; }
.mv-opener + .mv-sec { padding-top: var(--mv-sec) !important; }

/* ------------------------------------------------------------------ hero */

.mv-hero { background: var(--mv-sky); padding-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: 0; }
.mv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: end; }
.mv-hero h1 { margin: 0 0 1.1rem; }
.mv-hero-text .mv-lede { margin: 0; }
.mv-sunday { background: var(--mv-paper); border: 1px solid var(--mv-line); padding: clamp(1.5rem, 3vw, 2.1rem); position: relative; z-index: 2; }
.mv-sunday h2 { font-size: var(--wp--preset--font-size--display-3); margin: 0 0 0.75rem; }
.mv-sunday p { color: var(--mv-muted); margin: 1rem 0 0; }

@media (max-width: 900px) {
	.mv-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* The signature: the ridgeline at the foot of the hero. */
.mv-ridge { margin-top: clamp(2rem, 4vw, 3.5rem); line-height: 0; }
.mv-ridge svg { display: block; width: 100%; height: clamp(84px, 13.9vw, 200px); }
.mv-r1 { fill: #c9d5d8; }
.mv-r2 { fill: #9fb4bb; }
.mv-r3 { fill: #5f7f8c; }
.mv-r4 { fill: var(--mv-ground); }
.js .mv-r1, .js .mv-r2, .js .mv-r3 { transform: translateY(34px); opacity: 0; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1), opacity 1.2s ease; }
.js .mv-r2 { transition-delay: 0.18s; }
.js .mv-r3 { transition-delay: 0.36s; }
.js .mv-ridge.is-up .mv-r1, .js .mv-ridge.is-up .mv-r2, .js .mv-ridge.is-up .mv-r3 { transform: none; opacity: 1; }
.mv-hero--paper .mv-r4 { fill: var(--mv-paper); }

/* ----------------------------------------------------------- timetable */

.mv-times { margin: 0; }
.mv-times table { width: 100%; border-collapse: collapse; table-layout: auto; }
.mv-times td { border: 0; border-top: 1px solid var(--mv-line); padding: 0.85rem 0; vertical-align: baseline; }
.mv-times tr:last-child td { border-bottom: 1px solid var(--mv-line); }
/* Times in the body face: Young Serif's old-style figures make 11:45 read as II:45. */
.mv-times td:first-child { font-weight: 700; color: var(--mv-ridge); font-size: 1.35rem; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; padding-right: 1.25rem; width: 7.5rem; }
.mv-times td:last-child { font-size: 1.1rem; }

/* -------------------------------------------------------- first Sunday */

.mv-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--mv-ink); margin-top: 1.75rem; }
.mv-grid3 > * { padding: 1.5rem 1.75rem 0.5rem 0; margin: 0 !important; }
.mv-grid3 > * + * { padding-left: 1.75rem; border-left: 1px solid var(--mv-line); }
.mv-grid3 h3 { font-size: 1.35rem; }
.mv-grid3 p { color: var(--mv-ink); }
@media (max-width: 820px) {
	.mv-grid3 { grid-template-columns: minmax(0, 1fr); }
	.mv-grid3 > * + * { padding-left: 0; border-left: 0; border-top: 1px solid var(--mv-line); }
	.mv-grid3 > * { padding-right: 0; padding-bottom: 1.25rem; }
}
.mv-head2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem; }
.mv-head2 > * { margin-bottom: 0 !important; }

/* ------------------------------------------------------- split sections */

.mv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mv-split--portrait { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.mv-split--flip > :first-child { order: 2; }
.mv-split > * { margin: 0 !important; }
.mv-split-text > * + * { margin-top: 1rem; }
.mv-split-text > h3 { margin-top: 2.25rem !important; }
@media (max-width: 820px) {
	.mv-split, .mv-split--portrait { grid-template-columns: minmax(0, 1fr); }
	.mv-split--flip > :first-child { order: 0; }
	.mv-split--portrait > .mv-photo { max-width: 26rem; }
}

/* ------------------------------------------------------- pictures, video */

.mv-photo { margin: 0; }
.mv-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--mv-line); }
.mv-photo figcaption, .mv-map figcaption { font-size: var(--wp--preset--font-size--note); color: var(--mv-muted); margin-top: 0.6rem; line-height: 1.45; }
.mv-sec--deep .mv-photo figcaption { color: var(--mv-deep-muted); }
.wp-block-video, .wp-block-embed { margin: 1.5rem 0; }
.wp-block-video video { display: block; width: 100%; height: auto; border: 1px solid var(--mv-line); background: var(--mv-deep); }
.wp-block-embed iframe { display: block; width: 100%; border: 1px solid var(--mv-line); }
.wp-block-embed figcaption, .wp-block-video figcaption { font-size: var(--wp--preset--font-size--note); color: var(--mv-muted); }

/* ------------------------------------------------------------------ map */

.mv-map { margin: 1.5rem 0 0; }
.mv-map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 30rem; border: 1px solid var(--mv-line); background: var(--mv-line); }
@media (max-width: 620px) { .mv-map iframe { aspect-ratio: 4 / 3; } }
.mv-find { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.mv-find > * { margin: 0 !important; }
.mv-find .mv-map { margin-top: 0; }
@media (max-width: 820px) { .mv-find { grid-template-columns: minmax(0, 1fr); } }
.mv-address { font-family: var(--mv-display); font-variant-numeric: lining-nums; font-size: var(--wp--preset--font-size--display-3); line-height: 1.25; }

/* ---------------------------------------------------------------- quote */

.mv-quote { margin: 0; padding: 0; border: 0; max-width: 54rem; }
.mv-quote p { font-family: var(--mv-display); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1.2; margin: 0 0 1.25rem; }
.mv-quote cite { font-style: normal; font-size: 1.1rem; color: var(--mv-ridge-lite); font-weight: 700; }
.mv-sec--deep .mv-kicker { color: var(--mv-deep-muted); }

/* --------------------------------------------------------------- contact */

.mv-phone a { font-weight: 700; font-size: var(--wp--preset--font-size--display-2); color: var(--mv-ridge); text-decoration: none; line-height: 1.1; }
.mv-phone a:hover { text-decoration: underline; }

.mv-form { background: var(--mv-paper); border: 1px solid var(--mv-line); padding: clamp(1.5rem, 3vw, 2.25rem); }
.mv-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mv-field { margin: 0 0 1.15rem !important; }
.mv-field label { display: block; font-weight: 700; margin-bottom: 0.4rem; color: var(--mv-ink); }
.mv-field input, .mv-field textarea { display: block; width: 100%; font: inherit; color: var(--mv-ink); background: var(--mv-paper); border: 1px solid var(--mv-muted); padding: 0.8rem 0.9rem; border-radius: 0; }
.mv-field textarea { resize: vertical; min-height: 8rem; }
.mv-form.is-off input, .mv-form.is-off textarea { background: var(--mv-ground); border-style: dashed; cursor: not-allowed; }
.mv-form-note { margin: 0.25rem 0 0 !important; color: var(--mv-muted); border-top: 1px solid var(--mv-line); padding-top: 1rem; }
.mv-form-sent { background: var(--mv-sky); border-left: 3px solid var(--mv-ridge); padding: 0.9rem 1rem; margin: 0 0 1.25rem !important; color: var(--mv-ink); }
.mv-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- posts */

.mv-post { padding: var(--mv-sec) 0; }
.mv-post h1 { margin: 0.4rem 0 1.5rem; }
.mv-post-date { color: var(--mv-muted); font-size: var(--wp--preset--font-size--note); }
.mv-post-body > * + * { margin-top: 1rem; }
.mv-post .wp-block-post-title a { color: var(--mv-ink); text-decoration: none; }
.mv-post .wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.mv-post .wp-block-post-template > li { border-top: 1px solid var(--mv-line); padding: 1.5rem 0; }

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

.mv-foot { background: var(--mv-deep); color: var(--mv-on-deep); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.mv-foot p { margin: 0 0 0.6rem; }
.mv-foot a { color: var(--mv-on-deep); }
.mv-foot-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: 2rem 2.5rem; padding-bottom: 2.75rem; }
.mv-foot-title { font-family: var(--mv-display); font-size: 1.5rem; line-height: 1.2; }
.mv-foot-name p:not(.mv-foot-title) { color: var(--mv-deep-muted); }
.mv-foot-h { font-weight: 700; color: var(--mv-ridge-lite); }
.mv-foot-col p:not(.mv-foot-h) { color: var(--mv-on-deep); line-height: 1.7; }
.mv-foot-nav { display: flex; flex-direction: column; gap: 0.35rem; }
.mv-foot-nav a { text-decoration: none; }
.mv-foot-nav a:hover, .mv-foot-nav a[aria-current="page"] { text-decoration: underline; }
.mv-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; border-top: 1px solid rgba(238, 241, 238, 0.18); padding-top: 1.25rem; padding-bottom: 1.5rem; font-size: var(--wp--preset--font-size--note); color: var(--mv-deep-muted); }
.mv-foot-base p { margin: 0; }
.fx-credit { color: var(--mv-deep-muted); }
.fx-credit a { color: var(--mv-on-deep); }
@media (max-width: 900px) { .mv-foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .mv-foot-in { grid-template-columns: minmax(0, 1fr); } }

/* The About line from inc/floulex-credit.php, aligned to the page's own edge. */
.wp-block-post-content > .fx-credit-about {
	max-width: calc(72rem + 2 * var(--mv-pad)) !important;
	margin: 0 auto !important;
	padding: 1.5rem var(--mv-pad) 2.5rem;
	color: var(--mv-muted);
	font-size: var(--wp--preset--font-size--note);
}
.fx-credit-about a { color: var(--mv-ridge); }

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

.js .mv-rev { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1); }
.js .mv-rev.is-in { opacity: 1; transform: none; }
.js .mv-rev:nth-child(2) { transition-delay: 0.08s; }
.js .mv-rev:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
	.js .mv-rev, .js .mv-r1, .js .mv-r2, .js .mv-r3 { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}