/*
Theme Name: Spring Hill AME
Theme URI: https://floulexweb.com/
Author: Floulex Web
Author URI: https://floulexweb.com/
Description: Built from scratch for SPRING HILL AME CHURCH.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: spring-hill-ame
*/

/*
WHY THESE COLORS. The church has no logo, so nothing of theirs sets the palette,
and it was chosen by elimination. If they tell us their colors, theirs win.

The brief is two words of their own: "Traditional, loud."

  Not navy        what every church web company ships.
  Not purple      the lazy shorthand for spiritual.
  Not gold        reads megachurch, and traditional is the opposite.
  Not terracotta  on cream, banned by DESIGN.md.
  Not deep green  that is Floulex Web's own color; a client's site should not
                  look like the vendor's.
  Not a pale or muted palette of any kind. Those are quiet, and this church told
                  us in one word that it is not.

What is left is hymnal red: the cloth of the book in the rack and the color of a
lot of pew cushions, so it is traditional, and it is the loudest color there is.
One accent, spent big, on a warm paper ground, with walnut for the hymn board.

WHY NOT AN 1860s POSTER. A wood-type broadside was the obvious way to say both
1868 and loud. It was rejected on purpose: for an AME church in South Carolina
that typography is also what slave auction notices looked like. The display face
is a fat face instead, which reads as a printed title rather than a notice.

Fonts: Abril Fatface and Libre Franklin, both SIL Open Font License, self-hosted.
*/

:root {
	--sh-paper: var(--wp--preset--color--paper);
	--sh-wash: var(--wp--preset--color--wash);
	--sh-ink: var(--wp--preset--color--ink);
	--sh-muted: var(--wp--preset--color--muted);
	--sh-line: var(--wp--preset--color--line);
	--sh-red: var(--wp--preset--color--hymnal);
	--sh-walnut: var(--wp--preset--color--walnut);
	--sh-on-red: #FFF8EE;
	--sh-on-walnut: #EADCC6;
	--sh-display: var(--wp--preset--font-family--display);
	--sh-gutter: clamp(1.25rem, 4vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

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

h1, h2, h3 {
	margin: 0;
	font-family: var(--sh-display);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: .002em;
}
h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
h3 { font-size: clamp(1.625rem, 3vw, 2.125rem); }

/* WordPress's own block gap would leave stripes between coloured grounds. */
.wp-block-post-content > * { margin-block: 0; }

.sh-wrap {
	width: 100%;
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--sh-gutter);
}
.sh-measure { max-width: 42rem; }
.sh-measure > * + * { margin-top: 1.25rem; }

.sh-sec { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sh-sec-wash { background: var(--sh-wash); }

.sh-lede { font-size: var(--wp--preset--font-size--lede); line-height: 1.45; }

.sh-btn,
.wp-block-button.sh-cta .wp-block-button__link {
	display: inline-block;
	padding: .85rem 1.6rem;
	background: var(--sh-red);
	color: var(--sh-on-red);
	font-weight: 700;
	text-decoration: none;
	border-radius: 0;
	transition: background-color .15s ease;
}
.sh-btn:hover,
.wp-block-button.sh-cta .wp-block-button__link:hover { background: var(--sh-walnut); color: var(--sh-on-red); }

/* ----------------------------------------------------------- the bar */

.sh-bar { position: relative; z-index: 20; background: var(--sh-red); color: var(--sh-on-red); }
.sh-bar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: 78rem;
	margin-inline: auto;
	padding: 1rem var(--sh-gutter);
}
.sh-plate {
	font-family: var(--sh-display);
	font-size: clamp(1.0625rem, 2vw, 1.3125rem);
	letter-spacing: .03em;
	color: var(--sh-on-red);
	text-decoration: none;
	white-space: nowrap;
}
.sh-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.875rem); }
.sh-nav a {
	color: var(--sh-on-red);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	text-decoration: none;
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
}
.sh-nav a:hover,
.sh-nav a[aria-current="page"] { border-bottom-color: currentColor; }
.sh-nav a.sh-give {
	padding: .55rem 1.2rem;
	background: var(--sh-on-red);
	color: var(--sh-red);
	border-bottom: 0;
}
.sh-nav a.sh-give:hover { background: var(--sh-walnut); color: var(--sh-on-red); }
.sh-nav a.sh-give[aria-current="page"] { background: var(--sh-walnut); color: var(--sh-on-red); }

.sh-menu { display: none; }
.sh-menu summary {
	display: block;
	padding: .5rem 1rem;
	border: 1px solid var(--sh-on-red);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.sh-menu summary::-webkit-details-marker { display: none; }

@media (max-width: 859px) {
	.sh-menu { display: block; flex: none; }
	.sh-plate { white-space: normal; line-height: 1.15; }
	.sh-nav { display: none; }
	.sh-menu[open] ~ .sh-nav {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: .5rem var(--sh-gutter) 1.5rem;
		background: var(--sh-red);
		border-top: 1px solid rgba(255, 248, 238, .35);
	}
	.sh-menu[open] ~ .sh-nav a { padding-block: .8rem; font-size: 1.125rem; border-bottom: 1px solid rgba(255, 248, 238, .35); }
	.sh-menu[open] ~ .sh-nav a.sh-give { margin-top: 1rem; text-align: center; border-bottom: 0; }
}

/* ----------------------------------------------------------- the opening */

.sh-open { background: var(--sh-red); color: var(--sh-on-red); padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.sh-open-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.sh-open-text > * + * { margin-top: 1.5rem; }
.sh-open h1 { font-size: clamp(2.75rem, 7.1vw, 6.5rem); line-height: 1; letter-spacing: .01em; }
.sh-open h1 span { display: block; white-space: nowrap; }
.sh-open .sh-lede { font-size: clamp(1.375rem, 2.3vw, 1.75rem); }
.sh-open a { color: var(--sh-on-red); }
.sh-open .wp-block-button.sh-cta .wp-block-button__link { background: var(--sh-on-red); color: var(--sh-red); }
.sh-open .wp-block-button.sh-cta .wp-block-button__link:hover { background: var(--sh-walnut); color: var(--sh-on-red); }

@media (max-width: 999px) {
	.sh-open-grid { grid-template-columns: minmax(0, 1fr); }
	.sh-open h1 { font-size: clamp(2.5rem, 11vw, 6.25rem); }
}
@media (max-width: 999px) and (min-width: 620px) {
	.sh-open-grid .sh-board { max-width: 26rem; }
}

/* ----------------------------------------------------------- the hymn board
   The signature element. Three numbers slid into a walnut board, the way the
   hymns are posted at the front of a sanctuary. Each card slides into its slot
   once on load, and that is the only motion on the site besides the reveal. */

.sh-board {
	background: var(--sh-walnut);
	color: var(--sh-on-walnut);
	padding: 1.25rem 1.25rem 1.5rem;
	border: 3px solid #4A3126;
	box-shadow: 0 1.25rem 2.5rem rgba(30, 22, 20, .28);
}
.sh-board-head {
	padding-bottom: .75rem;
	border-bottom: 1px solid #5B4135;
	font-family: var(--sh-display);
	font-size: 1.375rem;
	text-align: center;
}
.sh-board li {
	display: grid;
	grid-template-columns: 8.25rem minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding-block: .875rem;
	border-bottom: 1px solid #5B4135;
}
.sh-board li:last-child { padding-bottom: 0; border-bottom: 0; }
.sh-slot {
	display: block;
	overflow: hidden;
	background: #17100C;
	padding: .3rem;
}
.sh-card {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .25rem;
	background: #FBF7F0;
	color: var(--sh-ink);
	font-family: var(--sh-display);
	font-size: 2.5rem;
	line-height: 1.2;
}
.sh-card small { font-family: var(--wp--preset--font-family--body); font-size: 1rem; font-weight: 700; }
.js .sh-card { animation: sh-slide .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.2s + var(--sh-i) * .16s); }
@keyframes sh-slide { from { transform: translateX(-108%); } to { transform: none; } }
.sh-board-what { font-size: 1rem; line-height: 1.3; }
.sh-board-what b { display: block; color: #FFF8EE; font-size: 1.0625rem; }

/* ----------------------------------------------------------- inside pages */

.sh-top { background: var(--sh-red); color: var(--sh-on-red); padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem); }
.sh-top h1 { font-size: clamp(3rem, 8vw, 6rem); }
.sh-top .sh-lede { margin-top: 1rem; max-width: 40rem; }

.sh-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.sh-split-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sh-split-top { align-items: start; }
.sh-stack > * + * { margin-top: 1.25rem; }
@media (max-width: 819px) {
	.sh-split, .sh-split-flip { grid-template-columns: minmax(0, 1fr); }
}

.sh-big-year {
	font-family: var(--sh-display);
	/* Sized to its own column: at 20vw the last 8 ran into the text beside it,
	   and no check reports that. Only looking did. */
	font-size: clamp(5.5rem, 13vw, 11.5rem);
	line-height: .9;
	color: var(--sh-red);
}
@media (max-width: 819px) { .sh-big-year { font-size: clamp(5.5rem, 27vw, 11.5rem); } }

.wp-block-image { margin: 0; }
.wp-block-image img { width: 100%; }
.wp-block-image figcaption { margin-top: .625rem; text-align: left; color: var(--sh-muted); font-size: var(--wp--preset--font-size--micro); }
.sh-wide { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* The four questions a stranger actually has, as a ruled list. */
.sh-qa { margin-top: 2.25rem; border-top: 2px solid var(--sh-ink); }
.sh-qa-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 2rem;
	align-items: baseline;
	padding-block: 1.375rem;
	border-bottom: 1px solid var(--sh-line);
}
.sh-qa-row h3 { font-family: var(--wp--preset--font-family--body); font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.sh-qa-row p { font-family: var(--sh-display); font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.12; }
@media (max-width: 619px) { .sh-qa-row { grid-template-columns: minmax(0, 1fr); gap: .375rem; } }

.sh-pastor-name { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }

.sh-find, .sh-map { margin-top: 1.75rem; }
.sh-find {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: var(--sh-paper);
	border: 1px dashed var(--sh-muted);
}
.sh-find > * + * { margin-top: 1rem; }
.sh-find-town { font-family: var(--sh-display); font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.12; }
.sh-find .sh-btn { margin-top: .5rem; }
.sh-map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--sh-line); }
@media (max-width: 619px) { .sh-map iframe { aspect-ratio: 4 / 3; } }

/* Giving: the four ways by name, each waiting for its link. */
.sh-ways { border-top: 2px solid var(--sh-ink); }
.sh-ways li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem 1.5rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--sh-line);
}
.sh-way { font-family: var(--sh-display); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; }
.sh-wait { color: var(--sh-muted); font-size: var(--wp--preset--font-size--micro); font-weight: 600; }
.sh-wait-note { margin-top: 1rem; padding: .875rem 1rem; border: 1px dashed var(--sh-muted); }
.sh-sent { margin-top: 1rem; font-weight: 700; }

.sh-form { display: grid; gap: 1.125rem; }
.sh-form label { display: grid; gap: .375rem; font-weight: 600; }
.sh-form input, .sh-form textarea {
	width: 100%;
	padding: .75rem;
	background: #fff;
	border: 1px solid var(--sh-muted);
	border-radius: 0;
	color: var(--sh-ink);
	font: inherit;
	font-weight: 400;
}
.sh-form input:disabled, .sh-form textarea:disabled { background: var(--sh-wash); }
.sh-trap { position: absolute; left: -9999px; width: 1px; }

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

.sh-foot { background: var(--sh-walnut); color: var(--sh-on-walnut); padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; font-size: 1rem; }
.sh-foot a { color: #FFF8EE; }
.sh-foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 2.5rem; }
.sh-foot-name { margin-bottom: .75rem; color: #FFF8EE; font-family: var(--sh-display); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; }
.sh-foot-head { margin-bottom: .75rem; color: #FFF8EE; font-weight: 700; }
.sh-foot li + li { margin-top: .375rem; }
.sh-foot-base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 2rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #5B4135;
	font-size: var(--wp--preset--font-size--micro);
}
.fx-credit { margin: 0; }
@media (max-width: 819px) { .sh-foot-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

.fx-credit-about {
	max-width: 78rem;
	margin: 0 auto;
	padding: 2rem var(--sh-gutter) 3rem;
	color: var(--sh-muted);
	font-size: var(--wp--preset--font-size--micro);
}

.sh-post .wp-block-post-content > * + * { margin-top: 1.25rem; }

/* ----------------------------------------------------------- the reveal */

.js .sh-rev { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.js .sh-rev.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js .sh-rev { opacity: 1; transform: none; transition: none; }
	.js .sh-card { animation: none; }
}