/*
Theme Name: Liberty Fellowship Ministry
Theme URI: https://floulexweb.com/
Author: Floulex Web
Author URI: https://floulexweb.com/
Description: Built from scratch for Liberty Fellowship Ministry, Montgomery, Alabama.
Version: 1.0.0
Requires at least: 6.4
License: GNU General Public License v2 or later
Text Domain: liberty-fellowship
*/

/* ==========================================================================
   PALETTE, chosen by elimination (no logo was supplied, so nothing to take
   the colors from). A small church in Montgomery, led by its founding pastor,
   whose site has one job: make a stranger feel expected on a Sunday.

   Not navy: what every church web company already uses.
   Not purple: the lazy shorthand for "spiritual".
   Not gold: reads megachurch, and fails as text on a light ground.
   Not terracotta on cream: banned by name in DESIGN.md.
   Not deep green: the studio's own church color; this site must not look
     like ours with a new name.
   Not red: on a page whose job is welcome, red reads as warning.

   Deep teal (#1b5c62) is left. It is calm without being cold, it is not
   claimed by any denomination, and it holds 7.25:1 on the paper ground in
   bright sunlight on a phone. One accent, spent on links, buttons, the
   heading rule and today's day in the week. Everything else is warm paper,
   ink and one soft wash. The only dark ground is the footer.

   TYPE: Young Serif for headings (warm, a little old-fashioned, one weight),
   Figtree for everything read: open, friendly and plain at phone sizes.
   Atkinson Hyperlegible was tried first and dropped: its slashed zero turned
   every service time and the ZIP code into a row of crossed-out zeros.

   STRUCTURE: a noticeboard, not a brochure. The Sunday facts sit above the
   fold on the home page beside the picture of the building, and the
   signature piece is the week itself, laid out as a week, with today marked.
   ========================================================================== */

:root {
	--lf-paper: #fbf9f5;
	--lf-wash: #f2eee6;
	--lf-ink: #1e2427;
	--lf-muted: #525c5f;
	--lf-accent: #1b5c62;
	--lf-deep: #163a3f;
	--lf-soft: #dcebe8;
	--lf-line: #d8d1c4;
	--lf-on-deep: #fbf9f5;
	--lf-on-deep-muted: #b9cfcc;
	--lf-display: "Young Serif", Georgia, serif;
	--lf-body: "Figtree", system-ui, sans-serif;
	--lf-gutter: clamp(1.25rem, 4vw, 2.5rem);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: clip; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--lf-accent); outline-offset: 3px; }

.lf-skip {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--lf-ink); color: var(--lf-paper); padding: 0.6rem 1rem;
}
.lf-skip:focus { top: 1rem; }

/* The page container. Every section's content starts at this left edge. */
.lf-wrap {
	width: 100%;
	max-width: calc(74rem + 2 * var(--lf-gutter));
	margin-left: auto; margin-right: auto;
	padding-left: var(--lf-gutter); padding-right: var(--lf-gutter);
}

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

.lf-head {
	position: sticky; top: 0; z-index: 50;
	background: var(--lf-paper);
	border-bottom: 1px solid var(--lf-line);
}
.admin-bar .lf-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .lf-head { top: 0; } }
.lf-head-in {
	max-width: calc(74rem + 2 * var(--lf-gutter));
	margin: 0 auto; padding: 0.85rem var(--lf-gutter);
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	position: relative;
}
.lf-brand { display: flex; flex-direction: column; text-decoration: none; color: var(--lf-ink); line-height: 1.15; }
.lf-brand-name { font-family: var(--lf-display); font-size: 1.35rem; }
.lf-brand-place { font-size: 0.875rem; color: var(--lf-muted); margin-top: 0.2rem; }

.lf-nav { display: flex; align-items: center; gap: 0.25rem 1.6rem; flex-wrap: nowrap; }
.lf-nav a {
	color: var(--lf-ink); text-decoration: none; font-size: 1.0625rem; white-space: nowrap;
	padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
.lf-nav a:hover { border-bottom-color: var(--lf-line); }
.lf-nav a[aria-current="page"] { border-bottom-color: var(--lf-accent); color: var(--lf-accent); }

.lf-menu { display: none; }
.lf-menu summary {
	list-style: none; cursor: pointer;
	font-weight: 700; font-size: 1rem; color: var(--lf-ink);
	border: 1px solid var(--lf-ink); padding: 0.5rem 1rem;
}
.lf-menu summary::-webkit-details-marker { display: none; }
.lf-menu .lf-menu-close { display: none; }
.lf-menu[open] .lf-menu-close { display: inline; }
.lf-menu[open] .lf-menu-open { display: none; }

@media (max-width: 1000px) {
	.lf-menu { display: block; }
	.lf-nav { display: none; }
	.lf-menu[open] ~ .lf-nav {
		display: flex; flex-direction: column; align-items: stretch; gap: 0;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--lf-paper); border-bottom: 1px solid var(--lf-line);
		padding: 0.5rem var(--lf-gutter) 1.25rem;
		box-shadow: 0 18px 30px -24px rgba(30, 36, 39, 0.5);
	}
	.lf-menu[open] ~ .lf-nav a { padding: 0.85rem 0; border-bottom: 1px solid var(--lf-line); font-size: 1.125rem; }
	.lf-menu[open] ~ .lf-nav a[aria-current="page"] { border-bottom-color: var(--lf-accent); }
}
@media (max-width: 380px) {
	.lf-brand-name { font-size: 1.15rem; }
}

/* --------------------------------------------------------------- main */

/* Core puts the root block gap between header, main and footer: a paper strip
   above the footer. Sections carry their own spacing instead. */
.wp-site-blocks > * { margin-top: 0; margin-bottom: 0; }



.lf-main { padding: 0; }
.lf-main:not(.lf-article) > .wp-block-post-content > * { margin-top: 0; margin-bottom: 0; }
/* Sections are full width; each carries its own spacing. */
.wp-block-post-content > .lf-sec,
.wp-block-post-content > .lf-page-head,
.wp-block-post-content > .lf-hero { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }

.lf-sec { padding: clamp(3rem, 6vw, 5rem) 0; }
.lf-sec + .lf-sec:not(.lf-sec--wash) { border-top: 1px solid var(--lf-line); }
.lf-sec--wash { background: var(--lf-wash); }
.lf-sec--wash + .lf-sec { border-top: 0; }

.lf-main h1, .lf-main h2, .lf-main h3 { margin-top: 0; text-wrap: balance; }
.lf-main p { text-wrap: pretty; }

/* The one recurring device: a short teal rule above a section heading. */
.lf-mark::before {
	content: ""; display: block; width: 2.75rem; height: 3px;
	background: var(--lf-accent); margin-bottom: 1rem;
}

.lf-eyebrow { font-size: 1rem; color: var(--lf-muted); margin: 0 0 0.75rem; }
.lf-lede { font-size: var(--wp--preset--font-size--lede); line-height: 1.5; color: var(--lf-ink); max-width: 36em; }
.lf-small { font-size: 0.9375rem; color: var(--lf-muted); }

.lf-more { font-weight: 700; }
.lf-more a { text-decoration: none; border-bottom: 2px solid var(--lf-accent); padding-bottom: 0.1rem; }
.lf-more a::after { content: " \2192"; }

/* Buttons (core button block) */
.wp-block-buttons.lf-actions { gap: 0.75rem; margin-top: 1.75rem; }
.lf-main .wp-block-button__link, .lf-btn {
	background: var(--lf-accent); color: var(--lf-paper); border: 2px solid var(--lf-accent);
	border-radius: 0; padding: 0.8rem 1.4rem; font-family: var(--lf-body); font-weight: 700; font-size: 1.0625rem;
	text-decoration: none; display: inline-block; cursor: pointer; line-height: 1.3;
	transition: background-color .15s ease, color .15s ease;
}
.lf-main .wp-block-button__link:hover, .lf-btn:hover { background: var(--lf-deep); border-color: var(--lf-deep); }
.lf-main .is-style-outline .wp-block-button__link { background: transparent; color: var(--lf-accent); }
.lf-main .is-style-outline .wp-block-button__link:hover { background: var(--lf-soft); color: var(--lf-deep); }

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

.lf-hero { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.lf-hero-grid {
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.lf-hero h1 { font-size: var(--wp--preset--font-size--display-1); margin-bottom: 1.1rem; }
.lf-hero-text > * { margin-top: 0; }

/* The Sunday card: the answer to the first question anybody asks. */
.lf-sunday-card {
	margin-top: 1.75rem; border-left: 3px solid var(--lf-accent);
	background: var(--lf-wash); padding: 1.1rem 1.35rem;
}
.lf-sunday-card > * { margin: 0; }
.lf-sunday-card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.25rem; margin: 0; }
.lf-sunday-card dt { font-weight: 700; }
.lf-sunday-card dd { margin: 0; }
.lf-sunday { margin: 0.8rem 0 0; font-size: 0.9375rem; color: var(--lf-muted); }
.lf-sunday strong { color: var(--lf-ink); }

@media (max-width: 860px) {
	.lf-hero-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ page headings */

.lf-page-head { padding: clamp(2.75rem, 6vw, 4.75rem) 0 clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--lf-line); }
.lf-page-head h1 { font-size: var(--wp--preset--font-size--display-1); margin-bottom: 1rem; }
.lf-page-head .lf-lede { margin: 0; }
.lf-page-head + .lf-sec { border-top: 0; }
.lf-crumb { font-size: 1rem; margin: 0 0 1rem; }
.lf-crumb a { color: var(--lf-muted); }

/* ------------------------------------------------- ledger and splits */

/* Interior pages read like a printed notice: the heading in a left column,
   the substance on the right. Collapses to one column on a phone. */
.lf-ledger { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4.5rem); }
.lf-ledger > * { margin: 0; }
.lf-ledger-head h2 { margin: 0; }
.lf-ledger-body > * { margin-top: 0; margin-bottom: 1.1rem; max-width: 40em; }
.lf-ledger-body > *:last-child { margin-bottom: 0; }
/* .lf-map and .lf-photo reset their own margin; restore the gap between stacked ones. */
.lf-ledger-body > .lf-map:not(:last-child), .lf-ledger-body > .lf-photo:not(:last-child) { margin-bottom: 2rem; }
.lf-ledger-body > .lf-photo:not(:first-child) { margin-top: 2rem; }

.lf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.lf-split--portrait { grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); }
.lf-split > * { margin: 0; }
.lf-split-text > * { margin-top: 0; margin-bottom: 1.1rem; }
.lf-split-text > *:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
	.lf-ledger, .lf-split, .lf-split--portrait { grid-template-columns: 1fr; }
	.lf-split--portrait .lf-photo { max-width: 26rem; }
}

/* Facts list: label and answer, hairline between. */
.lf-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lf-line); }
.lf-facts li { padding: 0.95rem 0; border-bottom: 1px solid var(--lf-line); display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.25rem 1.5rem; }
.lf-facts strong { font-weight: 700; }
@media (max-width: 560px) { .lf-facts li { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ photos */

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

.lf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: 2.5rem; }
.lf-pair > * { margin: 0; }
@media (max-width: 700px) { .lf-pair { grid-template-columns: 1fr; } }

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

.lf-week {
	list-style: none; margin: 2rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
	border-top: 1px solid var(--lf-line); border-left: 1px solid var(--lf-line);
	background: var(--lf-paper);
}
.lf-day {
	position: relative; padding: 1.15rem 0.9rem 1.25rem;
	border-right: 1px solid var(--lf-line); border-bottom: 1px solid var(--lf-line);
}
.lf-day::before {
	content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px;
	background: var(--lf-accent); transform: scaleX(0); transform-origin: left center;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1) .25s;
}
.lf-day.is-today { background: var(--lf-soft); }
.lf-day.is-today::before { transform: scaleX(1); }
.lf-day-name { font-family: var(--lf-display); font-size: 1.2rem; margin: 0 0 0.85rem; }
.lf-day.is-today .lf-day-name::after { content: "Today"; display: block; font-family: var(--lf-body); font-size: 0.875rem; font-weight: 700; color: var(--lf-accent); margin-top: 0.15rem; }
.lf-day ul { list-style: none; margin: 0; padding: 0; }
.lf-day ul li { margin: 0 0 0.85rem; line-height: 1.35; }
.lf-day-when { display: block; font-weight: 700; font-size: 1rem; }
.lf-day-what { display: block; font-size: 0.9375rem; color: var(--lf-ink); }
.lf-day-note { font-size: 0.875rem; color: var(--lf-muted); margin: 0.25rem 0 0; border-top: 1px dashed var(--lf-line); padding-top: 0.6rem; }

@media (max-width: 1080px) {
	.lf-week { grid-template-columns: 1fr; }
	.lf-day { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 0.25rem 1.25rem; padding: 1rem 1.1rem; }
	.lf-day-name { margin: 0; }
	.lf-day-note { grid-column: 2; }
	.lf-day ul li { margin: 0 0 0.6rem; }
	.lf-day ul li:last-child { margin-bottom: 0; }
	.lf-day::before { top: 0; bottom: 0; left: -1px; right: auto; width: 4px; height: auto; transform: scaleY(0); transform-origin: center top; }
	.lf-day.is-today::before { transform: scaleY(1); }
}
@media (max-width: 480px) {
	.lf-day { grid-template-columns: 1fr; }
	.lf-day-note { grid-column: 1; }
	.lf-day-name { margin-bottom: 0.4rem; }
}

/* --------------------------------------------------------- beliefs */

.lf-beliefs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lf-line); }
.lf-beliefs li { padding: 1.35rem 0; border-bottom: 1px solid var(--lf-line); }
.lf-beliefs .lf-ref { display: block; margin-top: 0.45rem; font-size: 0.9375rem; color: var(--lf-muted); }

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

.lf-quote { margin: 1.5rem 0 0; padding: 0 0 0 1.5rem; border-left: 3px solid var(--lf-accent); }
.lf-quote p { font-family: var(--lf-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.35; margin: 0; }
.lf-quote cite { display: block; margin-top: 0.75rem; font-style: normal; font-size: 1rem; color: var(--lf-muted); }

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

.lf-give { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--lf-line); border-left: 1px solid var(--lf-line); }
.lf-give > * { margin: 0; padding: 1.6rem 1.5rem; border-right: 1px solid var(--lf-line); border-bottom: 1px solid var(--lf-line); background: var(--lf-paper); }
.lf-give h3 { margin: 0 0 0.6rem; }
.lf-give p { margin: 0 0 0.5rem; }
.lf-tag { display: inline-block; font-size: 0.875rem; font-weight: 700; color: var(--lf-deep); background: var(--lf-soft); padding: 0.2rem 0.6rem; }
@media (max-width: 640px) { .lf-give { grid-template-columns: 1fr; } }

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

.lf-map { margin: 0; }
.lf-map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 30rem; border: 1px solid var(--lf-line); }
@media (max-width: 700px) { .lf-map iframe { aspect-ratio: 4 / 3; } }

/* -------------------------------------------------------------- form */

.lf-form { max-width: 34rem; }
.lf-form p { margin: 0 0 1.1rem; }
.lf-form label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.lf-form input[type=text], .lf-form textarea {
	width: 100%; font: inherit; color: var(--lf-ink); background: #fff;
	border: 1px solid #8a8f8c; border-radius: 0; padding: 0.7rem 0.8rem;
}
.lf-form input:focus, .lf-form textarea:focus { outline: 3px solid var(--lf-soft); border-color: var(--lf-accent); }
.lf-hint { display: block; font-size: 0.9375rem; color: var(--lf-muted); margin-top: 0.3rem; }
.lf-form-note { padding: 0.9rem 1.1rem; margin: 0 0 1.4rem; max-width: 34rem; font-weight: 700; }
.lf-form-ok { background: var(--lf-soft); color: var(--lf-deep); }
.lf-form-err { background: #f6e3df; color: #7a2418; }

/* ----------------------------------------------------------- article */

.lf-article-head { padding-top: clamp(2.75rem, 6vw, 4.5rem); padding-bottom: 1.5rem; }
.lf-article-head h1 { font-size: var(--wp--preset--font-size--display-2); max-width: 22em; margin: 0 0 0.6rem; }
.lf-article-date { color: var(--lf-muted); font-size: 1rem; }
.lf-article-body { padding: 0 var(--lf-gutter) clamp(3rem, 6vw, 5rem); max-width: calc(74rem + 2 * var(--lf-gutter)); margin: 0 auto; }
/* Same left edge as the title above it, not centered in the constrained layout. */
.lf-article-body.is-layout-constrained > * { max-width: 44rem; margin-left: 0 !important; margin-right: auto !important; margin-top: 0; margin-bottom: 1.15rem; }
.lf-article-body.is-layout-constrained > h2 { font-size: var(--wp--preset--font-size--display-3); margin-top: 2.25rem; margin-bottom: 0.75rem; }
.lf-article-body ul { padding-left: 1.25rem; }
.lf-article-body li { margin-bottom: 0.4rem; }
.lf-list { padding-bottom: 4rem; }

/* ----------------------------------------------------------- credit */

.fx-credit-about { margin-top: 2rem; font-size: 0.9375rem; color: var(--lf-muted); }
.wp-block-post-content > .fx-credit-about { padding: 0 var(--lf-gutter) 3rem; max-width: calc(74rem + 2 * var(--lf-gutter)) !important; margin: 0 auto !important; }
.fx-credit { margin: 0; }
.fx-credit a { color: var(--lf-on-deep); }

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

.lf-foot { background: var(--lf-deep); color: var(--lf-on-deep); padding: 3.5rem 0 1.5rem; }
.lf-foot a { color: var(--lf-on-deep); }
.lf-foot p { margin: 0 0 0.75rem; }
.lf-foot-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.lf-foot-name { font-family: var(--lf-display); font-size: 1.5rem; }
.lf-foot-h { font-weight: 700; color: var(--lf-on-deep); }
.lf-foot-note { color: var(--lf-on-deep-muted); font-size: 0.9375rem; }
.lf-foot-nav ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.lf-foot-nav li { margin: 0 0 0.5rem; break-inside: avoid; }
.lf-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(251, 249, 245, 0.2); font-size: 0.9375rem; color: var(--lf-on-deep-muted); }
.lf-foot-base p { margin: 0; color: var(--lf-on-deep-muted); }
@media (max-width: 860px) { .lf-foot-in { grid-template-columns: 1fr 1fr; } .lf-foot-id { grid-column: 1 / -1; } }
@media (max-width: 520px) { .lf-foot-in { grid-template-columns: 1fr; } }

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

/* One reveal per element, once. Only hides anything when a script exists. */
.js .lf-rev { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .lf-rev.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .lf-rev { opacity: 1; transform: none; transition: none; }
	.lf-day::before { transition: none; }
}

/* The #form anchor lands below the sticky header, not under it. */
.lf-form-wrap { scroll-margin-top: 7rem; }
.lf-foot-times p:last-child { margin-bottom: 0; }