/*
Theme Name: Old Phelps Chapel
Theme URI: https://floulexweb.com
Author: Floulex Web
Description: Built from scratch for Old Phelps Chapel Baptist Missionary Church, Youngsville, North Carolina.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: old-phelps-chapel
*/

/* ------------------------------------------------------------------ palette
   Chosen by elimination, so nobody undoes it by accident:
   - The church's own photographs are warm: orange carpet, orange pews, the
     youth choir's orange stoles. A warm site would melt into every picture,
     so the frame is a cool, deep spruce and a quiet grey-green ground.
   - Not navy (what every church web company uses), not purple (the lazy
     shorthand for spiritual), not gold (reads megachurch, and the anniversary
     flyer is already gold), not cream with terracotta (DESIGN.md bans it).
   - The one accent is the stole orange from their own choir photograph, spent
     in one place: the This Sunday card. It is a fill under dark ink, never
     text on the light ground (it measures under 3:1 there).
   2026-10-26, Howard: the accent is now a soft spruce green, not the stole
   orange (site colors come from the church, not its vestments; no logo yet).
   Fonts: Young Serif, a sturdy old-style face for a church established in
   1909; Source Sans 3 for reading, set large (19px) for an older congregation.
   (Atkinson Hyperlegible was tried first: its slashed zero read "19Ø9".)
*/
:root {
	--opc-ground: #f3f4f0;
	--opc-paper: #ffffff;
	--opc-ink: #1c2523;
	--opc-muted: #4b5653;
	--opc-deep: #173f3c;
	--opc-deep-2: #1f4d49;
	--opc-on-deep: #f3f4f0;
	--opc-on-deep-muted: #bfd0cb;
	--opc-accent: #8cc3ad;
	--opc-accent-deep: #24685c;
	--opc-line: #d3d8d2;
	--opc-serif: "Young Serif", Georgia, "Times New Roman", serif;
	--opc-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--opc-pad: clamp(1.25rem, 4vw, 3rem);
	--opc-sec: clamp(3.5rem, 8vw, 6.5rem);
}

@font-face { font-family: "Source Sans 3"; src: url(assets/fonts/SourceSans3-normal.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(assets/fonts/SourceSans3-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Young Serif"; src: url(assets/fonts/YoungSerif-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--opc-ground);
	color: var(--opc-ink);
	font-family: var(--opc-sans);
	font-size: 1.1875rem;
	line-height: 1.6;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--opc-accent-deep); outline-offset: 3px; }
.opc-nw, .opc-phone, .opc-bar-call { white-space: nowrap; }
.opc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* WordPress adds block-gap margins between flow children; this theme spaces
   its own sections. */
.opc-main .is-layout-flow > *, .opc-main .wp-block-post-content > * { margin-block: 0; }
.opc-main { display: block; }

.opc-wrap {
	max-width: 76rem;
	margin: 0 auto;
	padding-inline: var(--opc-pad);
}
.opc-measure { max-width: 40rem; }
.opc-sec { padding-block: var(--opc-sec); }
.opc-sec + .opc-sec { border-top: 1px solid var(--opc-line); }
.opc-sec.opc-band + .opc-sec, .opc-sec + .opc-sec.opc-band { border-top: 0; }

/* ------------------------------------------------------------------ type */
.opc-h1, .opc-h2, .opc-h3 {
	font-family: var(--opc-serif);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 0.45em;
	text-wrap: balance;
	font-variant-numeric: lining-nums;
}
.opc-h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); }
.opc-h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.opc-h3 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); line-height: 1.2; }
.opc-lede { font-size: clamp(1.18rem, 1.7vw, 1.36rem); line-height: 1.55; color: var(--opc-ink); max-width: 38rem; }
.opc-label {
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--opc-muted);
	margin: 0 0 1rem;
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.opc-label::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; flex: none; }
.opc-muted { color: var(--opc-muted); }
.opc-link { color: var(--opc-deep); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.opc-link:hover { color: var(--opc-accent-deep); }

/* ------------------------------------------------------------------ buttons */
.opc-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.opc-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 3.1rem; padding: 0.7rem 1.4rem;
	background: var(--opc-deep); color: var(--opc-on-deep);
	border: 2px solid var(--opc-deep);
	font-weight: 700; font-size: 1.05rem; text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.opc-btn:hover { background: var(--opc-ink); border-color: var(--opc-ink); }
.opc-btn-quiet { background: transparent; color: var(--opc-deep); }
.opc-btn-quiet:hover { background: var(--opc-deep); color: var(--opc-on-deep); border-color: var(--opc-deep); }

/* ------------------------------------------------------------------ header */
.opc-head { position: sticky; top: 0; z-index: 50; }
.opc-bar { background: var(--opc-paper); border-bottom: 1px solid var(--opc-line); }
.opc-bar-in {
	max-width: 76rem; margin: 0 auto; padding: 0.85rem var(--opc-pad);
	display: flex; align-items: center; gap: 1.5rem; position: relative;
}
.opc-mark { text-decoration: none; display: flex; flex-direction: column; line-height: 1.05; margin-right: auto; color: var(--opc-ink); }
.opc-mark-name { font-family: var(--opc-serif); font-size: clamp(1.35rem, 2.2vw, 1.65rem); letter-spacing: -0.005em; }
.opc-mark-sub { font-size: 0.8rem; font-weight: 700; color: var(--opc-muted); letter-spacing: 0.06em; margin-top: 0.3rem; text-transform: uppercase; }
.opc-nav { display: flex; align-items: center; gap: 0.25rem; }
.opc-nav a {
	text-decoration: none; font-weight: 700; font-size: 1.02rem;
	padding: 0.55rem 0.75rem; color: var(--opc-ink);
	border-bottom: 2px solid transparent;
}
.opc-nav a:hover { color: var(--opc-deep); border-bottom-color: var(--opc-line); }
.opc-nav a[aria-current="page"] { border-bottom-color: var(--opc-deep); color: var(--opc-deep); }
.opc-bar-call {
	font-weight: 700; text-decoration: none; color: var(--opc-deep);
	border: 2px solid var(--opc-deep); padding: 0.45rem 0.85rem; white-space: nowrap;
}
.opc-bar-call:hover { background: var(--opc-deep); color: var(--opc-on-deep); }
.opc-menu { display: none; }
.opc-menu summary {
	list-style: none; cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 0.6rem;
	padding: 0.6rem 0.9rem; border: 2px solid var(--opc-ink); min-height: 2.9rem;
}
.opc-menu summary::-webkit-details-marker { display: none; }
.opc-burger, .opc-burger::before, .opc-burger::after { display: block; width: 1.15rem; height: 2px; background: currentColor; position: relative; }
.opc-burger::before, .opc-burger::after { content: ""; position: absolute; left: 0; }
.opc-burger::before { top: -6px; }
.opc-burger::after { top: 6px; }
.opc-menu[open] .opc-burger { background: transparent; }
.opc-menu[open] .opc-burger::before { top: 0; transform: rotate(45deg); }
.opc-menu[open] .opc-burger::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1080px) {
	.opc-bar-call { display: none; }
}
@media (max-width: 760px) {
	.opc-menu { display: block; }
	.opc-nav { display: none; }
	.opc-menu[open] ~ .opc-nav {
		display: flex; flex-direction: column; align-items: stretch; gap: 0;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--opc-paper); border-bottom: 1px solid var(--opc-line);
		padding: 0.5rem var(--opc-pad) 1.25rem;
		box-shadow: 0 18px 30px -24px rgba(28, 37, 35, .5);
	}
	.opc-menu[open] ~ .opc-nav a { padding: 0.95rem 0; border-bottom: 1px solid var(--opc-line); font-size: 1.15rem; }
	.opc-menu[open] ~ .opc-nav a[aria-current="page"] { border-bottom-color: var(--opc-line); box-shadow: inset 4px 0 0 var(--opc-deep); padding-left: 0.9rem; }
	.opc-mark-sub { font-size: 0.72rem; }
}

/* ------------------------------------------------------------------ images */
.opc-main .wp-block-image { margin: 0; }
.opc-main .wp-block-image img { width: 100%; height: auto; }
.opc-main .wp-block-image figcaption, .opc-cap {
	font-size: 0.95rem; color: var(--opc-muted); margin: 0.7rem 0 0; line-height: 1.45; text-align: left;
}

/* ------------------------------------------------------------------ home opening */
.opc-open { padding-block: clamp(2.5rem, 6vw, 5rem) var(--opc-sec); }
.opc-open-grid {
	display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.opc-open-since { font-weight: 700; color: var(--opc-muted); margin-bottom: 1.2rem; }
.opc-open .opc-h1 { margin-bottom: 0.35em; }
.opc-open-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) {
	.opc-open-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ the band (one dark panel) */
.opc-band { background: var(--opc-deep); color: var(--opc-on-deep); }
.opc-band .opc-label { color: var(--opc-on-deep-muted); }
.opc-band .opc-lede, .opc-band p { color: var(--opc-on-deep); }
.opc-band .opc-link { color: var(--opc-on-deep); }
.opc-band .opc-link:hover { color: #f3b77a; }
.opc-band .opc-btn { background: var(--opc-on-deep); color: var(--opc-deep); border-color: var(--opc-on-deep); }
.opc-band .opc-btn:hover { background: transparent; color: var(--opc-on-deep); }
.opc-band-grid {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 900px) { .opc-band-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ This Sunday (signature) */
.opc-sunday {
	background: var(--opc-paper); color: var(--opc-ink);
	border: 1px solid var(--opc-line);
	padding: clamp(1.4rem, 3vw, 2rem);
	position: relative;
	box-shadow: 0 1px 0 rgba(28, 37, 35, .04);
}
.opc-band .opc-sunday { border-color: transparent; }
.opc-sunday p { color: var(--opc-ink); }
.opc-sunday-k { font-weight: 700; font-size: 0.98rem; color: var(--opc-muted) !important; margin: 0 0 0.6rem; }
.opc-sunday-date {
	display: inline-block; font-family: var(--opc-serif); font-size: clamp(1.45rem, 2.6vw, 1.85rem);
	line-height: 1.15; background: var(--opc-accent); color: var(--opc-ink) !important;
	padding: 0.35rem 0.75rem 0.4rem; margin: 0 0 1.1rem;
	transform-origin: left center;
}
.opc-sunday.is-live .opc-sunday-date { animation: opc-stamp .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes opc-stamp { from { opacity: 0; transform: translateX(-10px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.opc-sunday-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.opc-sunday-list li {
	display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0.8rem;
	padding: 0.7rem 0; border-top: 1px solid var(--opc-line); font-size: 1.12rem;
}
.opc-sunday-list li:last-child { border-bottom: 1px solid var(--opc-line); }
.opc-sunday-list span { font-weight: 700; color: var(--opc-deep); }
.opc-sunday-note { font-size: 0.98rem; color: var(--opc-muted) !important; }
.opc-sunday.is-off .opc-sunday-date { background: var(--opc-line); }

/* ------------------------------------------------------------------ the week */
.opc-week { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--opc-ink); }
.opc-week li {
	display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); gap: 1.5rem;
	padding: 1.25rem 0; border-bottom: 1px solid var(--opc-line);
}
.opc-week-day { font-family: var(--opc-serif); font-size: 1.35rem; line-height: 1.2; margin: 0; }
.opc-week-day span { display: block; font-family: var(--opc-sans); font-weight: 700; font-size: 1rem; color: var(--opc-deep); margin-top: 0.25rem; }
.opc-week-what { font-weight: 700; font-size: 1.15rem; margin: 0 0 0.2rem; }
.opc-week-how { color: var(--opc-muted); margin: 0; }
@media (max-width: 560px) {
	.opc-week li { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
}

/* ------------------------------------------------------------------ two column text + figure */
.opc-split {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.opc-split-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.opc-split > .wp-block-image { max-width: 26rem; }
@media (max-width: 900px) {
	.opc-split, .opc-split-flip { grid-template-columns: minmax(0, 1fr); }
}

/* the pastor's photograph is small at source (370px); never stretch it */
.opc-portrait { max-width: 22rem !important; }
.opc-portrait img { aspect-ratio: 1 / 1; object-fit: cover; }

/* ------------------------------------------------------------------ purpose quote */
.opc-quote { margin: 0; max-width: 54rem; }
.opc-quote p {
	font-family: var(--opc-serif); font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.22;
	margin: 0; text-wrap: balance;
}
.opc-quote p::before { content: "\201C"; color: var(--opc-accent-deep); }
.opc-quote p::after { content: "\201D"; color: var(--opc-accent-deep); }
.opc-quote cite { display: block; font-style: normal; font-weight: 700; color: var(--opc-muted); margin-top: 1.2rem; font-size: 1rem; }

.opc-pull { font-family: var(--opc-serif); font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.3; border-left: 3px solid var(--opc-deep); padding-left: 1.2rem; margin: 2rem 0; max-width: 34rem; }

/* ------------------------------------------------------------------ event */
.opc-event-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
	background: var(--opc-paper); border: 1px solid var(--opc-line);
	padding: clamp(1.5rem, 4vw, 3rem);
}
.opc-event-when { font-family: var(--opc-serif); font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.25; }
.opc-event-when span { display: block; font-family: var(--opc-sans); font-weight: 700; font-size: 1.05rem; color: var(--opc-deep); margin-top: 0.3rem; }
.opc-event-where { color: var(--opc-muted); }
.opc-event-flyer { margin: 0; width: 213px; }
.opc-event-flyer img { width: 213px; height: auto; box-shadow: 0 14px 30px -18px rgba(28, 37, 35, .55); }
@media (max-width: 640px) {
	.opc-event-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ ministries */
.opc-min { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--opc-ink); }
.opc-min > div { padding: 1.6rem 2rem 1.6rem 0; border-bottom: 1px solid var(--opc-line); }
.opc-min > div + div { padding-left: 2rem; border-left: 1px solid var(--opc-line); }
@media (max-width: 700px) {
	.opc-min { grid-template-columns: minmax(0, 1fr); }
	.opc-min > div + div { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------------ gallery: 7 photographs + 1 tile = 8 */
.opc-main .opc-gallery {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
	margin-top: 2.2rem;
}
.opc-gallery .wp-block-image img { aspect-ratio: 3 / 4; object-fit: cover; }
.opc-gallery-tile {
	background: var(--opc-paper); border: 1px solid var(--opc-line);
	padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-end;
	aspect-ratio: 3 / 4;
}
.opc-gallery-tile p { margin: 0 0 0.5rem; }
.opc-gallery-tile .opc-h3 { margin-bottom: 0.4rem; }
@media (max-width: 900px) { .opc-main .opc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
	.opc-gallery-tile { padding: 1rem; }
	.opc-gallery-tile .opc-h3 { font-size: 1.2rem; }
	.opc-gallery-tile p { font-size: 0.98rem; line-height: 1.4; }
}
@media (max-width: 360px) { .opc-gallery-tile { aspect-ratio: auto; } }

/* ------------------------------------------------------------------ find us + map */
.opc-find { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.opc-address, .opc-event-when, .opc-week-day, .opc-sunday-date, .opc-quote p, .opc-pull, .opc-mark-name, .opc-foot-name { font-variant-numeric: lining-nums; }
.opc-address { font-family: var(--opc-serif); font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.3; margin-bottom: 1rem; }
.opc-phone { font-weight: 700; font-size: 1.3rem; color: var(--opc-deep); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.opc-map { border: 1px solid var(--opc-line); background: var(--opc-paper); }
.opc-map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 30rem; border: 0; }
.opc-map-links { margin: 0.8rem 0 0; }
@media (max-width: 900px) {
	.opc-find { grid-template-columns: minmax(0, 1fr); }
	.opc-map iframe { aspect-ratio: 4 / 3; }
}
.opc-watch { max-width: 34rem; }
.opc-watch-h { margin-top: 2.6rem !important; }
.opc-sec .opc-h2 + .opc-lede, .opc-sec p + .opc-h2 { margin-top: 0; }
.opc-h2.opc-gap { margin-top: 2.5rem; }

/* ------------------------------------------------------------------ inner page opener */
.opc-page-open { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.opc-page-open + .opc-sec { border-top: 1px solid var(--opc-line); }

/* contact lines */
.opc-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--opc-ink); }
.opc-lines > div { padding: 1.6rem 1.6rem 1.6rem 0; border-bottom: 1px solid var(--opc-line); }
.opc-lines > div + div { padding-left: 1.6rem; border-left: 1px solid var(--opc-line); }
@media (max-width: 860px) {
	.opc-lines { grid-template-columns: minmax(0, 1fr); }
	.opc-lines > div + div { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------------ footer */
.opc-foot { background: var(--opc-paper); border-top: 1px solid var(--opc-line); padding-block: 3.5rem 2rem; font-size: 1rem; }
.opc-foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.opc-foot-name { font-family: var(--opc-serif); font-size: 1.35rem; line-height: 1.2; }
.opc-foot-k { font-weight: 700; color: var(--opc-muted); margin-bottom: 0.4rem; }
.opc-foot a { color: var(--opc-deep); font-weight: 700; }
.opc-foot-small { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--opc-line); color: var(--opc-muted); font-size: 0.92rem; }
@media (max-width: 900px) { .opc-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .opc-foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ hooks */
.opc-open-text { max-width: 36rem; }
.opc-event { scroll-margin-top: 6rem; }
.opc-event-text { min-width: 0; }
.opc-map-wrap { min-width: 0; }
.opc-foot-id p { margin-bottom: 0.5rem; }
.opc-foot-part { display: block; }

/* ------------------------------------------------------------------ media the church may add later */
.opc-main .wp-block-embed, .opc-main .wp-block-video { margin: 2rem 0; }
.opc-main .wp-block-embed iframe, .opc-main .wp-block-video video { width: 100%; border: 1px solid var(--opc-line); }

/* ------------------------------------------------------------------ motion */
.js .opc-rev { opacity: 0; transform: translateY(16px); }
.js .opc-rev.is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
	.js .opc-rev, .js .opc-rev.is-in { opacity: 1; transform: none; transition: none; }
	.opc-sunday.is-live .opc-sunday-date { animation: none; }
}