/*
Theme Name: The Faith In God Ministries
Theme URI: https://floulexweb.com/
Author: Floulex Web
Author URI: https://floulexweb.com/
Description: Built from scratch for The Faith In God Ministries International Corporation, Memphis, Tennessee.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: faith-in-god-ministries
*/

/*
  WHERE THE COLORS COME FROM. Every one is out of his own logo, read from the
  fills in his banner PDF, not chosen.

  --ink   #111111  the cross and the hill.
  --sky   #4FB3E8  the rays and the words THE FAITH IN GOD MINISTRIES.
  --paper #FFFFFF  the road and the gaps between the rays. The logo has no cream.

  --sky-deep #0B6496 is the one color not on the banner. The sky measures 2.35:1 on
  white, so it can never be text on a light ground. This is the same hue walked down
  until it clears 6:1, and his printed card already runs the mark in a deeper blue.
  Sky stays a ground (black words on it are 8:1) and a color on black. Deep sky is
  what sky turns into when it has to be read on white.

  --mist #E9F5FC is sky with a lot of paper in it. --slate is ink lifted just enough
  for quiet text.

  WHY THE TYPE IS WHAT IT IS. His banner is all heavy capitals and it is a good
  banner, so the site keeps that shout. Big Shoulders Display 900 is a tall civic
  poster face: condensed, so "Jails and Prisons" can run huge on a phone instead of
  shrinking to fit. Public Sans is plain and easy, at 19px, because the readers
  include people reading on a cheap phone with tired eyes. Open licenses, self-hosted.

  ARCHITECTURE. There is no Sunday service, no visit page and no staff list, because
  this ministry goes to people rather than waiting for them. The site follows his
  banner: what the work is, who to call, then the number, very large, on every page.
*/

:root {
	--ink: #111111;
	--sky: #4FB3E8;
	--sky-deep: #0B6496;
	--paper: #FFFFFF;
	--mist: #E9F5FC;
	--slate: #3C464D;
	--on-ink: #C4CDD3;
	--rule-ink: rgba(255, 255, 255, .24);
	--rule: rgba(17, 17, 17, .18);
	--gutter: clamp(1rem, 5vw, 4rem);
	--w: min(78rem, calc(100vw - 2 * var(--gutter)));   /* the content column, for type sized to fill it */
	--sec: clamp(4.5rem, 10vw, 9rem);
	--display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
}

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

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

body {
	margin: 0;
	overflow-x: clip;
	background: var(--paper);
	color: var(--ink);
}

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

/* The flow-layout gap never reaches these; every space below is set on purpose. */
.wp-site-blocks > *,
.wp-block-post-content > *,
main > * { margin-block: 0; }
.wp-block-group { margin-block: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3 {
	margin: 0;
	font-family: var(--display);
	font-weight: 900;
	line-height: .98;
	letter-spacing: .004em;
	text-transform: uppercase;
	text-wrap: balance;
}

h2 { font-size: clamp(3rem, 7.2vw, 6.25rem); line-height: 1.04; }
h2 + .fgm-lede-hero { margin-top: 1.25rem; }
h3 { font-size: clamp(2.5rem, 5vw, 4.5rem); }

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

.fgm-wrap {
	max-width: calc(78rem + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.fgm-sec { padding-block: var(--sec); position: relative; }
.fgm-sec-mist { background: var(--mist); }

.fgm-ink { background: var(--ink); color: var(--paper); }
.fgm-ink a { color: var(--sky); }
.fgm-ink a:hover { color: var(--paper); }
.fgm-ink :focus-visible { outline-color: var(--sky); }

.fgm-prose { max-width: 40rem; }

.fgm-more { margin-top: 2.5rem; font-weight: 700; font-size: 1.25rem; }

.fgm-sub {
	font-weight: 700;
	font-size: 1.25rem;
	margin: .9rem 0 1.5rem;
	color: var(--slate);
}

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

.fgm-bar {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: .75rem var(--gutter);
	max-width: calc(78rem + 2 * var(--gutter));
	margin-inline: auto;
}

.wp-block-template-part { background: var(--paper); }

.fgm-logo { flex: none; }
.fgm-logo img { height: 4.25rem; width: auto; }

.fgm-panel { display: contents; }

.fgm-nav {
	margin-left: auto;
	display: flex;
	gap: clamp(.9rem, 1.8vw, 1.75rem);
}

.fgm-nav a {
	color: var(--ink);
	font-weight: 600;
	font-size: 1.0625rem;
	text-decoration: none;
	padding-block: .4rem;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}

.fgm-nav a:hover { border-bottom-color: var(--sky); color: var(--ink); }
.fgm-nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.fgm-cta {
	flex: none;
	background: var(--ink);
	color: var(--paper);
	font-weight: 700;
	font-size: 1.0625rem;
	text-decoration: none;
	padding: .7rem 1.1rem;
	white-space: nowrap;
}

.fgm-cta:hover { background: var(--sky); color: var(--ink); }

.fgm-menu { display: none; margin-left: auto; }

.fgm-menu summary {
	list-style: none;
	cursor: pointer;
	font-weight: 700;
	font-size: 1.0625rem;
	padding: .65rem 1rem;
	border: 2px solid var(--ink);
}

.fgm-menu summary::-webkit-details-marker { display: none; }

/* One nav. Below the measured break the same <nav> becomes the panel; display:none
   sits on the nav itself because a check reading computed display cannot see a
   hidden parent. */
@media (max-width: 959px) {
	.fgm-bar { gap: .75rem; }
	.fgm-logo { flex: 0 1 auto; min-width: 0; }
	.fgm-logo img { height: auto; max-height: 3.75rem; width: 100%; max-width: 15.5rem; }
	.fgm-menu { display: block; flex: none; }
	.fgm-nav, .fgm-cta { display: none; }
	.fgm-panel {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--ink);
		padding: 1rem var(--gutter) 1.5rem;
	}
	.fgm-menu[open] ~ .fgm-panel { display: block; }
	.fgm-menu[open] ~ .fgm-panel .fgm-nav { display: block; margin: 0; }
	.fgm-nav a {
		display: block;
		color: var(--paper);
		font-size: 1.5rem;
		padding-block: .7rem;
		border-bottom: 1px solid var(--rule-ink);
	}
	.fgm-nav a:hover { color: var(--paper); border-bottom-color: var(--rule-ink); }
	.fgm-nav a[aria-current="page"] { color: var(--sky); border-bottom-color: var(--rule-ink); }
}

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

/* Set the way his banner sets it: each line runs the full width of the column, so
   the sizes are the column divided by the measured width of the words. The
   divisors are the lines' own widths in em, in Big Shoulders 900, plus a hair. */
.fgm-hero {
	--sun: min(33vw, 30rem);
	position: relative;
	z-index: 2;
	background: var(--paper);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.fgm-hero h1 { line-height: .9; letter-spacing: 0; }
.fgm-hero h1 span { display: block; }
.fgm-h1-one { font-size: calc(var(--w) / 7.22); white-space: nowrap; }
.fgm-h1-two { font-size: calc(var(--w) / 8.93); line-height: 1; margin-top: .1em; white-space: nowrap; }

.fgm-hero-text { min-width: 0; padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }

.fgm-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.fgm-name {
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.35;
	margin-bottom: .9rem;
	color: var(--sky-deep);
	max-width: 34rem;
}

.fgm-lede-hero { font-size: 1.5rem; line-height: 1.4; margin: 0 0 2rem; max-width: 36rem; }

.fgm-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.fgm-btn {
	display: inline-block;
	background: var(--ink);
	color: var(--paper);
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.2;
	text-decoration: none;
	padding: 1.05rem 1.5rem;
	border: 2px solid var(--ink);
}

.fgm-btn:hover { background: var(--sky); border-color: var(--ink); color: var(--ink); }
.fgm-btn-line { background: transparent; color: var(--ink); }
.fgm-ink .fgm-btn { background: var(--sky); border-color: var(--sky); color: var(--ink); }
.fgm-ink .fgm-btn-line { background: transparent; color: var(--paper); border-color: var(--paper); }

/* His whole mark. The bottom hangs over the black section below, so the hill runs
   into it and only his white road crosses the line. In the grid, not positioned,
   so it can never land on the headline at any width. */
.fgm-sun {
	position: relative;
	width: var(--sun);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}

/* Three classes because core's `.is-layout-flow > :last-child` zeroes this margin. */
.fgm-hero .fgm-hero-grid .fgm-sun { margin-bottom: calc(var(--sun) * -.15); align-self: end; }

.fgm-sun::before {
	content: "";
	position: absolute;
	inset: .8%;
	border-radius: 50%;
	background: var(--paper);
}

.fgm-sun img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fgm-sun-hill { z-index: 1; }

.js .fgm-sun-rays { animation: fgm-rise 1.5s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes fgm-rise {
	from { transform: translateY(16%); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@media (max-width: 759px) {
	.fgm-hero { --sun: min(88vw, 26rem); }
	.fgm-h1-one { font-size: calc(var(--w) / 3.84); white-space: normal; }
	.fgm-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.fgm-sun { justify-self: center; }
}

/* -------------------------------------------------------- where the work is */

.fgm-where { padding-top: clamp(9rem, 15vw, 12rem); z-index: 1; }

.fgm-rows { margin-top: clamp(2.5rem, 5vw, 4rem); }

.fgm-row {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 1rem clamp(2rem, 5vw, 5rem);
	align-items: baseline;
	padding-block: clamp(1.75rem, 3.5vw, 3rem);
	border-top: 1px solid var(--rule-ink);
}

.fgm-row h3 { color: var(--sky); }
.fgm-row p { font-size: 1.5rem; line-height: 1.4; }

@media (max-width: 760px) {
	.fgm-row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- who to call */

.fgm-who {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: end;
}

.fgm-who-right { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; }

.fgm-who > .wp-block-group > p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
	.fgm-who, .fgm-who-right { grid-template-columns: minmax(0, 1fr); }
	.fgm-who figure { max-width: 22rem; }
}

.wp-block-image { margin: 0; }
.wp-block-image img { width: 100%; height: auto; }

/* ---------------------------------------------------- inner page openers */

/* His rays coming up over the bottom edge. The rays are 70% of their square, so the
   section's minimum height is what keeps the whole arc in view, and the headline's
   width stops short of them so the two never touch. */
.fgm-open {
	--r: min(40vw, 33rem);
	position: relative;
	overflow: hidden;
	background: var(--ink);
	color: var(--paper);
	padding-block: clamp(3rem, 5vw, 4.5rem);
	min-height: calc(var(--r) * .78);
	display: flex;
	align-items: center;
}

.fgm-open::after {
	content: "";
	position: absolute;
	right: max(var(--gutter), calc((100vw - 78rem) / 2));
	bottom: calc(var(--r) * -.3);
	width: var(--r);
	aspect-ratio: 1;
	background: url("assets/img/mark-rays.svg") center / contain no-repeat;
}

.fgm-open .fgm-wrap { position: relative; z-index: 1; width: 100%; }
.fgm-open h1 { font-size: clamp(4.25rem, 9.4vw, 8.5rem); line-height: .92; max-width: calc(var(--w) - var(--r) - 2rem); text-wrap: pretty; }
.fgm-open p { font-size: 1.5rem; line-height: 1.4; max-width: calc(var(--w) - var(--r) - 2rem); margin-top: 1.25rem; }
.fgm-open a { color: var(--sky); }

@media (max-width: 759px) {
	.fgm-open { --r: 19rem; padding-bottom: calc(var(--r) * .78); display: block; min-height: 0; }
	.fgm-open::after { right: 50%; transform: translateX(50%); }
	.fgm-open h1, .fgm-open p { max-width: none; }
}

/* -------------------------------------------------------------- the work */

.fgm-chapter {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}

.fgm-chapter-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.fgm-chapter p { font-size: 1.5rem; line-height: 1.4; margin-top: 1.25rem; }

@media (max-width: 760px) {
	.fgm-chapter, .fgm-chapter-flip { grid-template-columns: minmax(0, 1fr); }
	.fgm-chapter-flip > .wp-block-image { order: 2; }
}

/* -------------------------------------------------------------- facts */

.fgm-facts { margin: clamp(2rem, 4vw, 3rem) 0 0; }

.fgm-facts > div {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: .25rem 2rem;
	padding-block: 1rem;
	border-top: 1px solid var(--rule);
}

.fgm-facts dt { font-weight: 700; color: var(--slate); }
.fgm-facts dd { margin: 0; font-size: 1.3125rem; line-height: 1.4; overflow-wrap: anywhere; }

@media (max-width: 620px) {
	.fgm-facts > div { grid-template-columns: minmax(0, 1fr); }
}

.fgm-marked {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}

.fgm-marked .fgm-mark { width: 100%; max-width: 22rem; }
.fgm-marked p { font-size: 1.5rem; line-height: 1.4; margin-top: 1.25rem; }

@media (max-width: 760px) {
	.fgm-marked { grid-template-columns: minmax(0, 1fr); }
	.fgm-marked .fgm-mark { max-width: 16rem; }
}

/* A dashed, labelled frame: an absence reads as waiting, never as broken. */
.fgm-wait {
	border: 2px dashed var(--sky-deep);
	background: var(--mist);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	max-width: 46rem;
}

.fgm-wait-label {
	font-family: var(--display);
	font-weight: 900;
	font-size: 2rem;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--sky-deep);
	margin-bottom: .6rem;
}

.fgm-sec-mist .fgm-wait { background: var(--paper); }

.fgm-gap-top { margin-top: clamp(2rem, 4vw, 3rem); }

/* -------------------------------------------------------------- contact */

.fgm-reach {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

.fgm-reach > div { min-width: 0; }

.fgm-reach-label { font-weight: 700; font-size: 1.25rem; color: var(--slate); margin-bottom: .25rem; }

.fgm-reach-big {
	display: inline-block;
	font-family: var(--display);
	font-weight: 900;
	font-size: calc(var(--w) / 6.12);
	line-height: 1.16;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.fgm-reach-mail { font-size: calc(var(--w) / 7.94); color: var(--sky-deep); }
.fgm-reach-big:hover { color: var(--sky-deep); }
.fgm-reach-mail:hover { color: var(--ink); }

.fgm-map { display: block; width: 100%; aspect-ratio: 16 / 10; max-height: 34rem; border: 1px solid var(--rule); }

/* ---------------------------------------------------------------- the band */

.fgm-band { background: var(--sky); color: var(--ink); padding-block: clamp(3rem, 7vw, 6rem); }

.fgm-band-call {
	font-family: var(--display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(2rem, 4.6vw, 3.75rem);
	line-height: 1;
	margin: 0;
}

.fgm-band-call span { display: inline-block; margin-left: .35em; }

.fgm-band-phone {
	display: block;
	font-family: var(--display);
	font-weight: 900;
	font-size: calc(var(--w) / 6.12);
	line-height: 1.16;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.fgm-band-phone:hover { color: var(--paper); }
.fgm-band-mail { font-size: 1.375rem; font-weight: 600; margin: .5rem 0 0; }
.fgm-band-mail a { color: var(--ink); overflow-wrap: anywhere; }
.fgm-band-mail a:hover { color: var(--paper); }
.fgm-band :focus-visible { outline-color: var(--ink); }

@media (max-width: 620px) {
	.fgm-band-call span { display: block; margin: .2em 0 0; font-size: .62em; }
}

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

.fgm-foot { background: var(--ink); color: var(--on-ink); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.fgm-foot a { color: var(--paper); }
.fgm-foot a:hover { color: var(--sky); }
.fgm-foot :focus-visible { outline-color: var(--sky); }

.fgm-foot-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr);
	gap: 2.5rem clamp(2rem, 5vw, 4rem);
}

/* Black words and a black hill need paper under them, so the logo keeps its own. */
.fgm-foot-logo { display: inline-block; background: var(--paper); padding: .75rem 1rem; max-width: 100%; }
.fgm-foot-logo img { width: 18rem; max-width: 100%; height: auto; }
.fgm-foot-id p { margin-top: 1.1rem; }

.fgm-foot-nav { display: flex; flex-direction: column; gap: .5rem; }
.fgm-foot-nav a { text-decoration: none; font-weight: 600; }
.fgm-foot-nav a:hover { text-decoration: underline; }
.fgm-foot-reach { overflow-wrap: anywhere; }

.fgm-foot-end {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 2rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	font-size: 1rem;
}

.fgm-foot-end p { margin: 0; padding-top: 1.1rem; }
.fgm-foot-end { position: relative; }

.fgm-foot-end::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--gutter);
	right: var(--gutter);
	border-top: 1px solid var(--rule-ink);
}

.fx-credit a { color: var(--on-ink); }

.fx-credit-about {
	width: var(--w);
	margin: 0 auto;
	padding-block: 1.75rem;
	font-size: 1.0625rem;
	color: var(--slate);
	border-top: 1px solid var(--rule);
}

@media (max-width: 860px) {
	.fgm-foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.fgm-foot-id { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
	.fgm-foot-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The call button stays under the thumb on a phone. */
.fgm-callbar { display: none; }

@media (max-width: 720px) {
	body { padding-bottom: 3.75rem; }
	.fgm-callbar {
		display: block;
		position: fixed;
		z-index: 30;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--sky);
		color: var(--ink);
		text-align: center;
		font-weight: 700;
		font-size: 1.25rem;
		line-height: 3.75rem;
		text-decoration: none;
		border-top: 2px solid var(--ink);
	}
	.fgm-callbar:hover { color: var(--ink); }
}

/* ------------------------------------------------------------- reading pages */

.fgm-read { padding-block: var(--sec); }
.fgm-read .wp-block-post-content { max-width: 40rem; }
.fgm-read .wp-block-post-content > * + * { margin-top: 1.25em; }

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

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

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