/*
Theme Name: Unity Pentecostal
Theme URI: https://floulexweb.com/
Author: Floulex Web
Author URI: https://floulexweb.com/
Description: The website of Unity Pentecostal Church of God of Homestead. Built from scratch.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unity-pentecostal
*/

/* Bodoni Moda is instanced at opsz 28, not its display 96: the hairlines stay thick
   enough to survive a phone and an older reader's eyes. It is also the family of the
   serif on the church's own flyer, so the site reads as theirs. */
@font-face { font-family: 'Bodoni Moda'; src: url('assets/fonts/bodoni-moda.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('assets/fonts/bodoni-moda-italic.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('assets/fonts/instrument-sans.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

/* Every colour here comes off the logo, not the flyer's maroon and gold ground.
     paper       the logo's white disc
     ink         the black of the five figures, the book and UPCGH, warmed a hair
     flame       the outer flame. Decorative and on black only: 2.8:1 on white
     flame-deep  the same hue walked down to 5.6:1, for words on white
     gold        the logo's ring. Hairlines only, never words on white
     wash        white with a breath of the ring in it, for the odd panel */
:root {
	--upc-paper: #ffffff;
	--upc-wash: #f8f5ee;
	--upc-ink: #14110d;
	--upc-soft: #544d44;
	--upc-line: #e3dccf;
	--upc-flame: #ff6c12;
	--upc-flame-deep: #b83f00;
	--upc-gold: #c9952e;
	--upc-on-ink: #f4efe6;
	--upc-on-ink-soft: #c4bbac;
	--upc-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
	--upc-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--upc-gutter: clamp(1.25rem, 4.2vw, 3.5rem);
	--upc-sec: clamp(3.5rem, 8vw, 6.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--upc-paper);
	color: var(--upc-ink);
	font-family: var(--upc-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--upc-flame-deep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--upc-ink); }
:focus-visible { outline: 2px solid var(--upc-flame-deep); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--upc-display); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 6.6vw, 5.25rem); }
h2 { font-size: clamp(2rem, 3.9vw, 3.05rem); }
h3 { font-size: 1.5rem; line-height: 1.2; }
p { margin: 0; }
p + p { margin-top: 1em; }

.upc-wrap { width: 100%; max-width: calc(76rem + 2 * var(--upc-gutter)); margin-inline: auto; padding-inline: var(--upc-gutter); }
.upc-sec { padding-block: var(--upc-sec); }
.upc-sec-tight { padding-top: 0; }
.upc-opener + .upc-sec { padding-top: clamp(2.5rem, 5vw, 4rem); }
.upc-wash { background: var(--upc-wash); }

.upc-lede { font-size: clamp(1.1875rem, 1.7vw, 1.375rem); line-height: 1.5; color: var(--upc-soft); max-width: 40rem; }
.upc-kicker { font-family: var(--upc-display); font-style: italic; font-size: 1.25rem; color: var(--upc-flame-deep); margin-bottom: .5rem; }
.upc-prose { max-width: 41rem; }
.upc-prose > * + * { margin-top: 1em; }
.upc-prose h2 { margin-top: 1.5em; }

/* --------------------------------------------------- the reveal, script only */
.js .upc-rev { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .upc-rev.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .upc-rev { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------------ header */
.upc-head { position: sticky; top: 0; z-index: 50; background: var(--upc-paper); border-bottom: 1px solid var(--upc-line); }
.upc-head-in { max-width: calc(76rem + 2 * var(--upc-gutter)); margin-inline: auto; padding: .625rem var(--upc-gutter); display: flex; align-items: center; gap: 1.5rem; }
.upc-brand { display: flex; align-items: center; gap: .875rem; color: var(--upc-ink); text-decoration: none; margin-right: auto; min-width: 0; }
.upc-brand:hover { color: var(--upc-ink); }
.upc-brand img { width: 72px; height: 72px; flex: none; }
.upc-brand-name { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.upc-brand-name strong { font-family: var(--upc-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; }
.upc-brand-name span { font-size: .9375rem; color: var(--upc-soft); }
.upc-panel { display: contents; }
.upc-nav { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 1.75rem); }
.upc-nav a { color: var(--upc-ink); text-decoration: none; font-weight: 500; padding-block: .5rem; border-bottom: 2px solid transparent; }
.upc-nav a:hover { border-bottom-color: var(--upc-gold); color: var(--upc-ink); }
.upc-nav a[aria-current] { border-bottom-color: var(--upc-flame); }
.upc-lang { color: var(--upc-ink); text-decoration: none; font-weight: 500; border: 1px solid var(--upc-gold); padding: .3rem .7rem; white-space: nowrap; }
.upc-lang:hover { background: var(--upc-ink); border-color: var(--upc-ink); color: var(--upc-paper); }
.upc-menu { display: none; }
.upc-menu summary { list-style: none; cursor: pointer; font-weight: 600; padding: .5rem .875rem; border: 1px solid var(--upc-ink); min-height: 44px; display: flex; align-items: center; }
.upc-menu summary::-webkit-details-marker { display: none; }
.upc-menu[open] summary { background: var(--upc-ink); color: var(--upc-paper); }

@media (max-width: 999px) {
	.upc-menu { display: block; }
	.upc-nav { display: none; }
	.upc-lang { display: none; }
	.upc-menu[open] ~ .upc-panel { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--upc-paper); border-bottom: 2px solid var(--upc-ink); padding: .5rem var(--upc-gutter) 1.25rem; }
	.upc-menu[open] ~ .upc-panel .upc-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.upc-menu[open] ~ .upc-panel .upc-nav a { padding: .8rem 0; border-bottom: 1px solid var(--upc-line); font-size: 1.125rem; }
	.upc-menu[open] ~ .upc-panel .upc-nav a[aria-current] { color: var(--upc-flame-deep); }
	.upc-menu[open] ~ .upc-panel .upc-lang { display: inline-block; margin-top: 1rem; }
}
@media (max-width: 560px) {
	.upc-head-in { gap: .75rem; padding-block: .5rem; }
	.upc-brand { gap: .625rem; }
	.upc-brand img { width: 56px; height: 56px; }
	.upc-brand-name strong { font-size: 1.1875rem; }
	.upc-brand-name span { font-size: .8125rem; }
}
@media (max-width: 374px) {
	.upc-brand-name span { display: none; }
}

/* -------------------------------------------------------------------- buttons */
.upc-btn, .upc-actions a { display: inline-block; background: var(--upc-ink); color: var(--upc-paper); border: 1px solid var(--upc-ink); padding: .8rem 1.5rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.upc-btn:hover, .upc-actions a:hover { background: var(--upc-flame-deep); border-color: var(--upc-flame-deep); color: var(--upc-paper); }
.upc-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.upc-actions a + a { background: transparent; color: var(--upc-ink); }
.upc-actions a + a:hover { background: var(--upc-ink); border-color: var(--upc-ink); color: var(--upc-paper); }
.upc-more a { font-weight: 600; color: var(--upc-flame-deep); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1em; }
.upc-more a:hover { color: var(--upc-ink); }
.upc-more { margin-top: 1.25rem; }
.upc-back { margin-bottom: 1.25rem; }
.upc-back a { color: var(--upc-soft); text-decoration: none; font-weight: 500; }
.upc-back a::before { content: "\2190\00a0"; }
.upc-back a:hover { color: var(--upc-flame-deep); }

/* ----------------------------------------------------------- the home opening */
.upc-hero { padding-block: clamp(2.5rem, 6vw, 5rem); }
.upc-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.upc-hero h1 { font-size: clamp(3.5rem, 9.4vw, 7.75rem); line-height: .98; letter-spacing: -.02em; margin-bottom: 2.25rem; }
.upc-hero h1 em { font-style: normal; color: var(--upc-flame-deep); }
.upc-hero-facts { margin-top: 1.5rem; font-weight: 600; }
.upc-hero-facts a { color: inherit; }
@media (max-width: 820px) {
	.upc-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- plate slots */
.wp-block-image { margin: 0; }
.wp-block-image img { width: 100%; height: auto; }
.wp-block-image figcaption, .wp-element-caption { font-size: .875rem; color: var(--upc-soft); margin-top: .5rem; }

/* ---------------------------------------------- the week band, the signature */
.upc-band { background: var(--upc-ink); color: var(--upc-on-ink); padding-block: clamp(3rem, 6vw, 4.5rem); }
.upc-band h2 { color: var(--upc-on-ink); }
.upc-band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.upc-next { color: var(--upc-flame); font-weight: 600; margin: 0; }
.upc-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.upc-day { border-top: 1px solid #5c5346; padding-top: 1rem; position: relative; }
.upc-day::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--upc-flame); transform: scaleX(0); transform-origin: left; transition: transform .9s ease .2s; }
.upc-day.is-today::before { transform: scaleX(1); }
.upc-day h3 { color: var(--upc-on-ink); font-size: 1.625rem; margin-bottom: .75rem; }
.upc-day h3 span { font-family: var(--upc-body); font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--upc-flame); margin-left: .5rem; }
.upc-day h3 span:empty, .upc-day:not(.is-today) h3 span { display: none; }
.upc-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.upc-day li { color: var(--upc-on-ink-soft); }
.upc-day li time { display: block; color: var(--upc-on-ink); font-weight: 600; }
.upc-day-sun ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 999px) {
	.upc-days { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
	.upc-day-sun { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
	.upc-days { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
}
@media (max-width: 460px) {
	.upc-day-sun ul { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .upc-day::before { transition: none; } }

/* ------------------------------------------- Adorer, Grandir, Servir */
.upc-motto-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 5vw, 4.5rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.upc-verb { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 1.5rem clamp(2rem, 4vw, 3.5rem); padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--upc-gold); align-items: start; }
.upc-verb h3 { font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -.02em; }
.upc-verb-en { font-family: var(--upc-display); font-style: italic; font-size: 1.375rem; color: var(--upc-flame-deep); margin-top: .35rem; }
@media (max-width: 900px) {
	.upc-motto-head { grid-template-columns: minmax(0, 1fr); }
	.upc-verb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.upc-verb-word { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.upc-verb { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- the split */
.upc-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.upc-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.upc-split h2 + p, .upc-split h2 + .upc-prose { margin-top: 1rem; }
@media (max-width: 820px) {
	.upc-split, .upc-split-even { grid-template-columns: minmax(0, 1fr); }
}
.upc-quote { margin: 1.5rem 0; padding: 0 0 0 1.25rem; border-left: 3px solid var(--upc-flame); font-family: var(--upc-display); font-style: italic; font-size: clamp(1.375rem, 2.3vw, 1.75rem); line-height: 1.3; }
.upc-quote p { margin: 0; }

/* --------------------------------------------------------------- page opener */
.upc-opener { padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--upc-line); }
.upc-opener h1 { margin-bottom: .875rem; }

/* ----------------------------------------------------------------- the rows */
.upc-rows { border-bottom: 1px solid var(--upc-gold); }
.upc-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .5rem clamp(2rem, 5vw, 4.5rem); padding-block: 1.5rem; border-top: 1px solid var(--upc-gold); }
.upc-row h3 { font-size: 1.75rem; }
.upc-row .upc-row-sub { color: var(--upc-soft); font-size: .9375rem; margin-top: .15rem; }
.upc-row .upc-more { margin-top: .625rem; }
@media (max-width: 680px) {
	.upc-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------- a first visit, the facts */
.upc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem clamp(1.5rem, 3vw, 2.5rem); margin-top: 1.5rem; }
.upc-fact h3 { font-size: 1.3125rem; margin-bottom: .3rem; }
@media (max-width: 480px) {
	.upc-facts { grid-template-columns: minmax(0, 1fr); }
}
.upc-map { margin: 0; border: 1px solid var(--upc-gold); aspect-ratio: 16 / 11; background: var(--upc-wash); }
.upc-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 560px) { .upc-map { aspect-ratio: 4 / 3; } }

/* ---------------------------------------------------------- the year on a page */
.upc-year { display: grid; gap: 0; }
.upc-month { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: .5rem clamp(2rem, 5vw, 4.5rem); padding-block: 1.75rem; border-top: 1px solid var(--upc-gold); }
.upc-month:last-child { border-bottom: 1px solid var(--upc-gold); }
.upc-month h2 { font-size: clamp(1.875rem, 3.2vw, 2.5rem); }
.upc-month h3 { font-size: 1.375rem; margin-bottom: .25rem; }
@media (max-width: 680px) { .upc-month { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------- the form */
.upc-form { max-width: 34rem; }
.upc-form p { margin: 0 0 1.125rem; }
.upc-form label { display: block; font-weight: 600; margin-bottom: .3rem; }
.upc-form input, .upc-form textarea { width: 100%; font: inherit; color: var(--upc-ink); background: var(--upc-paper); border: 1px solid #8a8071; padding: .7rem .8rem; min-height: 44px; }
.upc-form input:focus, .upc-form textarea:focus { outline: 2px solid var(--upc-flame-deep); outline-offset: 1px; }
.upc-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.upc-note { border-left: 3px solid var(--upc-flame-deep); padding: .6rem .9rem; background: var(--upc-wash); margin-bottom: 1.25rem; max-width: 34rem; }
.upc-note-bad { border-left-color: var(--upc-ink); }

/* -------------------------------------------------------- the Floulex credit */
.fx-credit-about { max-width: calc(76rem + 2 * var(--upc-gutter)); margin: 0 auto; padding: 0 var(--upc-gutter) var(--upc-sec); color: var(--upc-soft); font-size: .9375rem; }

/* ------------------------------------------------------------------ the footer */
.upc-foot { background: var(--upc-ink); color: var(--upc-on-ink-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; font-size: 1rem; }
.upc-foot a { color: var(--upc-on-ink); text-decoration: none; }
.upc-foot a:hover { color: var(--upc-flame); }
.upc-foot strong { color: var(--upc-on-ink); }
.upc-foot-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2.5fr) minmax(0, 2.5fr); gap: 2rem clamp(2rem, 4vw, 3.5rem); }
.upc-foot-name { font-family: var(--upc-display); font-weight: 700; font-size: 1.625rem; line-height: 1.15; color: var(--upc-on-ink); }
.upc-foot-motto { font-family: var(--upc-display); font-style: italic; color: var(--upc-flame); font-size: 1.1875rem; margin-top: .625rem; }
.upc-foot-facts { display: grid; gap: 1.25rem; align-content: start; }
.upc-foot-facts p + p { margin-top: 0; }
.upc-foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; align-content: start; }
.upc-foot-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #4a4238; font-size: .9375rem; }
.upc-foot-end p { margin: 0; }
.upc-copy { color: var(--upc-on-ink-soft); }
.fx-credit { color: var(--upc-on-ink-soft); }
@media (max-width: 860px) {
	.upc-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.upc-foot-who { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
	.upc-foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------- small page parts */
.upc-gap { height: clamp(1.25rem, 2.5vw, 2rem); }
.upc-hero-text > .upc-lede { max-width: 34rem; }
.upc-verb-word, .upc-verb-text, .upc-bishop, .upc-visit, .upc-since, .upc-row-name, .upc-row-body, .upc-month-body, .upc-contact-side, .upc-contact-form { min-width: 0; }
.upc-row-body p + p { margin-top: .2em; }
.upc-since h2 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); }
.upc-bishop h2 + .upc-kicker { margin-top: .4rem; }
.upc-min { min-width: 0; }
.upc-min h2 { margin-top: 1.25rem; }
.upc-min .upc-kicker { margin-top: .3rem; }
.upc-pair { align-items: start; }
.upc-contact h2 { font-size: 1.75rem; margin-bottom: .4rem; }
.upc-contact .upc-more { margin-top: .625rem; }
.upc-contact-side p + h2 { margin-top: 2rem; }

/* Core puts margin-block-start: 24px on every flow child after the first. Useful in
   a column of text; in a grid it drops the second cell of every row 24px lower. */
.upc-facts > *, .upc-hero-grid > *, .upc-split > *, .upc-verb > *, .upc-motto-head > *, .upc-row > *,
.upc-month > *, .upc-foot-grid > *, .upc-foot-facts > *, .upc-year > *, .upc-rows > * { margin-block-start: 0; }

/* A portrait is one column beside its words, not half the page. */
.upc-with-portrait { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; }
.upc-with-portrait.upc-top { align-items: start; }
@media (max-width: 820px) {
	.upc-with-portrait { grid-template-columns: minmax(0, 1fr); }
	.upc-with-portrait .wp-block-image { max-width: 24rem; }
}

.upc-main { display: block; min-height: 40vh; }