/*
Theme Name: Breakthrough Church
Theme URI: https://floulexweb.com
Author: Floulex Web
Description: A block theme built from scratch for Breakthrough Church, Manor, Texas. Bishop Roy F. Bright, Jr.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: breakthrough
*/

/*
   THE ARGUMENT THIS DESIGN MAKES

   Breakthrough has no building right now. "Moving soon. Will update later" is
   the whole answer to the address question, and a church website that is built
   around a street address would have a hole in the middle of it. So this one is
   built around the gathering instead: the Sunday time is the fact that never
   moves, the ways to find them online come before the ways to find the door,
   and the address has a real, labelled place waiting for it rather than an
   apology.

   The spine is Bishop Bright's own four words — Live, Love, Learn, Laugh. They
   are his, they are memorable, and each already carries a sentence of his
   explaining it. Nothing had to be invented to fill them.

   PALETTE, and the trap in it
   Marigold #E08A1E is 2.49:1 on paper. It is a FILL, never text on a light
   ground. #8F4E05 is the same colour dark enough to read (5.98:1) and is what
   type uses. On the deep band marigold is 6.48:1 and becomes a text colour.
   Measured before a line of this was written, because the brand palette failing
   at least once is the norm.
*/

:root {
	--paper:     var(--wp--preset--color--paper);
	--paper-2:   var(--wp--preset--color--paper-2);
	--ink:       var(--wp--preset--color--ink);
	--muted:     var(--wp--preset--color--muted);
	--marigold:  var(--wp--preset--color--marigold);
	--amber:     var(--wp--preset--color--amber-ink);
	--deep:      var(--wp--preset--color--deep);
	--sand:      var(--wp--preset--color--sand);
	--line:      var(--wp--preset--color--line);
	--display:   var(--wp--preset--font-family--display);
	--gut:       clamp(1.15rem, 4.5vw, 3.5rem);
}

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

body { background: var(--paper); color: var(--ink); }

/* WordPress puts a block gap between every top level block. The sections here
   own their own rhythm, so it is removed at the content wrapper — which is
   .wp-block-post-content, NOT a child of main. Reading the served DOM rather
   than assuming cost an afternoon on an earlier build. */
.wp-block-post-content > * { margin-block: 0; }

a { color: var(--amber); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

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

/* Visible to a screen reader, not to the eye. */
.bt-sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.bt-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--ink); color: var(--paper); padding: .7rem 1rem;
}
.bt-skip:focus { left: .5rem; top: .5rem; }

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

.bt-wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gut); }
/* The measure never goes on the centring wrapper — that centres the whole
   section and the content's left edge jumps between pages. */
.bt-read { max-width: 42rem; }
.bt-sec { padding-block: clamp(2.75rem, 6vw, 5.25rem); }
.bt-sec-tight { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
/* A page opener is followed immediately by another section, so two full section
   paddings meet and leave a hole of nothing under the lede. Most visible on a
   short page: /giving/ had about nine rems of empty between the lede and the
   only thing on the page. */
.bt-hero + .bt-sec, .bt-hero + .bt-sec-tight { padding-top: 0; }

.bt-beside { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.bt-beside-flip > :first-child { order: 2; }
.bt-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.8rem); }

/* --------------------------------------------------------------- type bits */

.bt-eyebrow {
	display: block; font-size: var(--wp--preset--font-size--micro);
	text-transform: uppercase; letter-spacing: .13em; font-weight: 700;
	color: var(--muted); margin-bottom: .8rem;
}
.bt-lede { font-size: var(--wp--preset--font-size--lede); line-height: 1.5; color: var(--muted); }
.bt-quiet { color: var(--muted); }
.bt-small { font-size: var(--wp--preset--font-size--small); }

/*
   The name, set rather than drawn. Breakthrough sent no logo, and a wordmark in
   the display face is honest about that: it is their name, correctly spelled,
   at a weight that carries. The intake spells it "Breakthrough Chuch"; their own
   Facebook page spells it Breakthrough Church, and a source the client has
   published beats one they typed once.
*/
.bt-brand { display: inline-flex; align-items: baseline; gap: .42rem; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.bt-brand-name {
	font-family: var(--display); font-weight: 800; letter-spacing: -.022em;
	font-size: clamp(1.12rem, 1.7vw, 1.4rem); color: var(--ink); line-height: 1;
	white-space: nowrap;
}
.bt-brand-tail { font-family: var(--display); font-weight: 500; font-size: .8em; color: var(--muted); line-height: 1; }
.bt-brand:hover .bt-brand-name { color: var(--amber); }

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

.bt-bar {
	position: sticky; top: 0; z-index: 30; background: var(--paper);
	border-bottom: 1px solid transparent;
	transition: border-color .2s linear, box-shadow .2s linear;
}
.bt-bar.is-stuck { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(23, 19, 14, .85); }
/* A zero height element never intersects, so the observer would never fire. */
.bt-bar-sentinel { height: 1px; margin-bottom: -1px; }
.bt-bar-in {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1.25rem; max-width: 78rem; margin-inline: auto; padding: .7rem var(--gut);
}

.bt-nav { display: flex; align-items: center; gap: clamp(.65rem, 1.35vw, 1.15rem); }
.bt-nav a {
	font-size: .82rem; font-weight: 600; color: var(--ink); text-decoration: none;
	white-space: nowrap; padding-block: .3rem; border-bottom: 2px solid transparent;
}
.bt-nav a:hover, .bt-nav a[aria-current="page"] { color: var(--amber); border-bottom-color: var(--marigold); }

/* The one nav item that is an action, not a page. */
.bt-nav a.bt-nav-cta {
	background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
	padding: .48rem .95rem; border-bottom-color: var(--ink); margin-left: .2rem;
}
.bt-nav a.bt-nav-cta:hover { background: var(--amber); border-color: var(--amber); color: var(--paper); }

.bt-menu { display: none; }
.bt-menu > summary {
	list-style: none; cursor: pointer; font-weight: 700; font-size: .84rem;
	background: var(--ink); color: var(--paper); padding: .5rem .9rem;
}
.bt-menu > summary::-webkit-details-marker { display: none; }
.bt-menu-panel {
	position: absolute; left: 0; right: 0; background: var(--paper);
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	padding: .3rem var(--gut) 1.1rem;
}
.bt-menu-panel a {
	display: block; padding: .8rem 0; border-bottom: 1px solid var(--line);
	text-decoration: none; color: var(--ink); font-weight: 600;
}
.bt-menu-panel a:last-child { border-bottom: 0; }
.bt-menu-panel a.bt-nav-cta {
	display: inline-block; margin-top: .9rem; border: 0;
	background: var(--ink); color: var(--paper); padding: .6rem 1.1rem;
}

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

.bt-hero { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); }
.bt-hero h1 {
	font-size: var(--wp--preset--font-size--display-1);
	letter-spacing: -.028em; line-height: 1.02; margin: 0 0 1.15rem;
}
/*
   The one piece of colour in the headline, on the word the church is named for.
   Marigold is a fill here, not text: it sits BEHIND the word as a band, with ink
   on top at 6.89:1, rather than being used as a text colour it cannot pass at.
*/
/*
   A highlighter stroke behind the word, not an underline beneath it. A
   `to top` gradient fills from the BOTTOM OF THE LINE BOX, which on a tight
   line-height sits below the baseline, so the band came out floating under the
   word looking detached. Sizing and positioning the band as a share of the box
   puts it where a highlighter would actually land.
*/
.bt-mark {
	background-image: linear-gradient(var(--marigold), var(--marigold));
	background-repeat: no-repeat;
	background-size: 100% 0.32em;
	background-position: 0 72%;
	padding-inline: .09em;
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.bt-hero .bt-lede { max-width: 34rem; margin: 0 0 1.6rem; }

.bt-acts { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.bt-btn {
	display: inline-block; font-family: var(--display); font-weight: 700;
	font-size: .95rem; line-height: 1; padding: .9rem 1.4rem;
	background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
	text-decoration: none; cursor: pointer;
	transition: background .16s linear, color .16s linear, border-color .16s linear;
}
.bt-btn:hover { background: var(--amber); border-color: var(--amber); color: var(--paper); }
.bt-btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.bt-btn-quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* When = the fact that does not move while the building does. */
.bt-when {
	display: inline-flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
	font-family: var(--display); font-weight: 700;
	font-size: var(--wp--preset--font-size--display-3); margin: 0 0 1rem;
}
.bt-when b { color: var(--amber); font-weight: 800; }
.bt-when span { font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: .82em; color: var(--muted); }

/* ------------------------------------------------------- the four L's band */

.bt-invert { background: var(--deep); color: var(--paper); }
.bt-invert h1, .bt-invert h2, .bt-invert h3 { color: var(--paper); }
/* A component's default is right for the page's dominant ground; the inverted
   section restates every muted value rather than inheriting a light one. */
.bt-invert .bt-lede, .bt-invert .bt-quiet, .bt-invert .bt-eyebrow { color: var(--sand); }
.bt-invert a { color: var(--marigold); }
.bt-invert a:hover { color: var(--sand); }

.bt-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.1rem, 2.4vw, 2rem); }
.bt-four-item { border-top: 2px solid var(--marigold); padding-top: 1rem; }
.bt-four-word {
	display: block; font-family: var(--display); font-weight: 800;
	font-size: var(--wp--preset--font-size--display-2); line-height: 1;
	color: var(--marigold); letter-spacing: -.02em; margin-bottom: .5rem;
}
.bt-four-item p { margin: 0; color: var(--sand); font-size: var(--wp--preset--font-size--small); line-height: 1.55; }

/* --------------------------------------------------------------- pictures */

.bt-fig, .wp-block-image.bt-fig { margin: 0; }
.bt-fig img { display: block; width: 100%; }
.bt-fig figcaption, .wp-element-caption {
	font-size: var(--wp--preset--font-size--micro); color: var(--muted);
	margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--line);
}
.bt-invert .wp-element-caption { color: var(--sand); border-top-color: rgba(245, 217, 168, .28); }
.bt-band img { width: 100%; }

/* Style the video and embed blocks BEFORE they are used, so a YouTube embed the
   church drops in later lands looking right instead of needing CSS. */
.wp-block-video video, .wp-block-embed iframe { display: block; width: 100%; }
.wp-block-embed { margin: 0; }
.wp-block-embed__wrapper { position: relative; padding-top: 56.25%; }
.wp-block-embed__wrapper > iframe { position: absolute; inset: 0; height: 100%; }

/* ----------------------------------------------------------- values, lists */

/*
   Seven values, so a two column grid is out: seven has no divisor that does not
   leave a ragged last row, and a ragged row is visible. Instead each value is
   itself two columns, name and reference on the left and the argument on the
   right. That uses the page width without running the prose to a 110 character
   measure, which is what a single full width column was doing.
*/
.bt-values { display: grid; gap: 1.7rem; margin: 0; padding: 0; list-style: none; }
.bt-value {
	display: grid; grid-template-columns: 15rem minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2.2rem);
	border-top: 1px solid var(--line); padding-top: 1.15rem;
}
.bt-value h3 { margin: 0 0 .35rem; font-size: var(--wp--preset--font-size--display-3); }
.bt-value-body { max-width: 40rem; }
.bt-value p { margin: 0 0 .55rem; }
.bt-value p:last-child { margin-bottom: 0; }
.bt-value blockquote {
	margin: 0; font-style: italic; color: var(--muted);
	font-size: var(--wp--preset--font-size--small); line-height: 1.5;
}
.bt-value cite {
	display: block; font-style: normal; font-size: var(--wp--preset--font-size--micro);
	color: var(--amber); font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; margin-top: .3rem;
}
@media (max-width: 780px) {
	.bt-value { grid-template-columns: 1fr; gap: .5rem; }
}

.bt-rows { display: grid; gap: 0; margin: 1.4rem 0 0; }
.bt-row {
	display: grid; grid-template-columns: 11rem 1fr; gap: 1rem;
	padding: .85rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.bt-row:first-child { border-top: 1px solid var(--line); }
.bt-row > span { font-size: var(--wp--preset--font-size--small); color: var(--muted); font-weight: 600; }
.bt-row > strong { font-family: var(--display); font-weight: 700; font-size: 1.06rem; }

/* --------------------------------------------------- waiting on the client */

/*
   A fact the church has not sent yet. It must read as "coming", never as
   "broken": a labelled panel is a decision, an empty space is an oversight, and
   a made up address on a church's own website is the worst of the three.
*/
.bt-pending {
	background: var(--paper-2); border-left: 3px solid var(--marigold);
	padding: 1.15rem 1.3rem; margin: 1.4rem 0 0;
	/* It carries a sentence of explanation, so it needs a measure. Dropped
	   straight into a full width wrapper it ran to about 140 characters. */
	max-width: 46rem;
}
.bt-pending strong { display: block; font-family: var(--display); font-size: 1.06rem; margin-bottom: .3rem; }
.bt-pending p { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--muted); }
.bt-invert .bt-pending { background: rgba(245, 217, 168, .1); border-left-color: var(--marigold); }
.bt-invert .bt-pending p { color: var(--sand); }

/* ------------------------------------------------------------ links, ways */

.bt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bt-card {
	display: block; text-decoration: none; padding: 1.3rem 1.4rem;
	background: var(--paper-2); border: 1px solid var(--line);
	transition: background .16s linear, border-color .16s linear;
}
.bt-card:hover { background: var(--ink); border-color: var(--ink); }
.bt-card:hover .bt-card-where, .bt-card:hover .bt-card-what, .bt-card:hover .bt-card-go { color: var(--paper); }
.bt-card-where { display: block; font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--ink); }
.bt-card-what { display: block; font-size: var(--wp--preset--font-size--small); color: var(--muted); margin-top: .2rem; }
.bt-card-go { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--amber); margin-top: .9rem; }

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

.bt-foot { background: var(--deep); color: var(--paper); padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.bt-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.bt-foot h2 {
	font-size: var(--wp--preset--font-size--micro); text-transform: uppercase;
	letter-spacing: .13em; color: var(--sand); margin: 0 0 .8rem; font-weight: 700;
}
.bt-foot a { color: var(--paper); text-decoration-color: rgba(250, 246, 240, .4); }
.bt-foot a:hover { color: var(--marigold); }
.bt-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bt-foot-name { font-family: var(--display); font-weight: 800; font-size: 1.5rem; margin: 0 0 .3rem; }
.bt-foot-line { margin: 0; color: var(--sand); font-size: var(--wp--preset--font-size--small); }
.bt-foot-base {
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(245, 217, 168, .22);
	font-size: var(--wp--preset--font-size--micro); color: var(--sand);
}

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

/*
   One reveal, and it must be scoped to a class only script can set. An
   `opacity: 0` written unconditionally leaves the whole page invisible with
   JavaScript off, which is how an earlier build shipped seven blank sections.
*/
.js .bt-rev { opacity: 0; transform: translateY(12px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .25, 1); }
.js .bt-rev.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js .bt-rev { opacity: 1; transform: none; transition: none; }
	* { scroll-behavior: auto !important; }
}

/* -------------------------------------------------------------- responsive */

/*
   The bar hands over to the button where it actually runs out of room, not at a
   number that sounds mobile. Seven links plus the wordmark and the gutters need
   about 1000px; below that the desktop nav would be rendered into a bar too
   narrow for it and the PAGE scrolls sideways, which is invisible at 1440 and
   390 and is exactly what bin/check-widths.py exists to catch.
*/
@media (max-width: 1040px) {
	.bt-nav { display: none; }
	.bt-menu { display: block; }
}
@media (max-width: 900px) {
	.bt-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bt-beside { grid-template-columns: 1fr; }
	.bt-beside-flip > :first-child { order: 0; }
	.bt-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
	.bt-pair, .bt-cards { grid-template-columns: 1fr; }
	.bt-four { grid-template-columns: 1fr; }
	.bt-foot-grid { grid-template-columns: 1fr; }
	.bt-row { grid-template-columns: 1fr; gap: .15rem; }
	.bt-hero h1 { letter-spacing: -.02em; }
}
@media (max-width: 380px) {
	/* The wordmark is the widest fixed thing in the bar; below this it has to
	   give way rather than push the page sideways. */
	.bt-bar-in { gap: .7rem; }
	.bt-brand-name { font-size: 1.02rem; }
	.bt-brand-tail { display: none; }
}