/*
Theme Name:        Minimal Fervent Theme
Theme URI:         https://github.com/FerventWord-Ministries/Minimal-Fervent-Theme
Description:       Deliberately minimal classic theme for FerventWord sites. Provides the site chrome — a sticky header with a site-wide navigation menu and a mobile drawer — plus a documented set of design tokens accented in FerventWord red, and nothing else. No page builder, no jQuery, no block library, no theme.json.
Author:            FerventWord Ministries
Version:           1.2.2
Requires at least: 6.4
Requires PHP:      8.0
License:           GPL-2.0-or-later
Text Domain:       fervent
GitHub Theme URI:  https://github.com/FerventWord-Ministries/Minimal-Fervent-Theme
Primary Branch:    main
*/

/* ===========================================================================
 * DESIGN TOKENS — the theme's public styling contract.
 *
 * Every color, font and layout value the theme uses is one of the custom
 * properties below. Nothing further down hard-codes a color or a font; it all
 * reads var(--fervent-*). Plugins and modules are encouraged to CONSUME these
 * (`color: var(--fervent-text)`) so they match whatever the site is set to, and
 * are free to OVERRIDE them.
 *
 * Everything here is declared inside :where(:root), which has ZERO
 * specificity. Any plugin rule on a plain `:root` (0,1,0) beats it, in either
 * color mode, regardless of stylesheet print order. Keep it that way: a plain
 * `:root` here would force every plugin into a specificity or ordering fight
 * just to adjust a color.
 *
 * Color mode follows the OS/browser via prefers-color-scheme. There is no
 * toggle and no JS.
 *
 * The neutrals and the accent are FerventWord's own (the ferventword plugin's
 * --fw-black-text, --fw-page-bg, --fw-surface and --fw-red-text), so the
 * chrome agrees with plugin output in both modes.
 *
 * Fervent Theme → Style in wp-admin rewrites the settings-controlled tokens
 * (marked [setting]) in an inline block printed straight after this file, also
 * at :where(:root). With a group's toggle off, the baseline values below apply
 * — deliberately neutral: the system font stack (no web-font download), the
 * browser's own link color, 16px.
 * ------------------------------------------------------------------------- */

:where(:root) {
	color-scheme: light dark; /* native controls, scrollbars and the canvas follow the mode */

	/* -- Surfaces -------------------------------------------------------- */
	--fervent-bg: #ffffff;          /* page background */
	--fervent-bg-elevated: #ffffff; /* header, drawer, submenus, skip link */
	--fervent-bg-subtle: #f8f8f8;   /* hover / current-item fill */
	--fervent-border: #e0e0df;      /* hairlines and control borders */
	--fervent-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.08); /* a whole box-shadow value */

	/* -- Brand ----------------------------------------------------------- */
	/* FerventWord red. #7f1518 is 10.4:1 on white; the dark value is the
	   plugin's lightened counterpart, 5.8:1 on the dark canvas below. Not a
	   setting: it is the brand, and the thing plugins should reach for. */
	--fervent-accent: #7f1518;

	/* -- Text and interaction -------------------------------------------- */
	--fervent-text: #282528;  /* [setting] primary text, incl. header and nav */
	--fervent-link: LinkText; /* [setting] link color; LinkText is the UA's, and follows color-scheme */
	--fervent-focus: var(--fervent-accent); /* focus rings; deliberately separate from --fervent-link */

	/* -- Typography ------------------------------------------------------ */
	--fervent-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* [setting] */
	--fervent-font-heading: var(--fervent-font-body); /* [setting] h1–h6, page title, site title */
	--fervent-font-size: 16px; /* [setting] body text size; html is left alone so rem units are unaffected */

	/* -- Layout ---------------------------------------------------------- */
	--fervent-header-h: 64px;
	--fervent-logo-h: 32px;      /* [setting] header logo's maximum height; set at Fervent Theme → Logo */
	--fervent-max-w: 1600px;
	--fervent-gap: 24px;
	--fervent-tail: 100px;       /* breathing room under the last element on every page */
	--fervent-content-w: 72rem;  /* Minimal template width; see .fervent-main--flush */
}

@media (prefers-color-scheme: dark) {
	:where(:root) {
		--fervent-bg: #282528;
		--fervent-bg-elevated: #302d30;
		--fervent-bg-subtle: #3b373b;
		--fervent-border: #403c40;
		--fervent-shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.5);
		--fervent-accent: #d98e8e;
		--fervent-text: #e0e0df;
	}
}

/* ---------------------------------------------------------------------------
 * Web fonts. Only woff2/woff are referenced (the other formats in fonts/ are
 * export-ignored and never deploy). A declared face is downloaded only once
 * something actually uses the family and weight, so declaring every weight
 * costs nothing until one is used.
 *
 * Each family also needs an entry in fervent_style_fonts()
 * (inc/style-output.php) for the Style screen to offer it.
 * ------------------------------------------------------------------------- */

/* Apertura — body. Weights follow the files' own weight classes: Medium is 450
   in the font and is declared at 500, the nearest CSS keyword step; Black is
   800 in the font and declared as such. */
@font-face {
	font-family: 'Apertura';
	src: url('fonts/apertura-regular.woff2') format('woff2'),
		url('fonts/apertura-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Apertura';
	src: url('fonts/apertura-italic.woff2') format('woff2'),
		url('fonts/apertura-italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Apertura';
	src: url('fonts/apertura-medium.woff2') format('woff2'),
		url('fonts/apertura-medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Apertura';
	src: url('fonts/apertura-medium-italic.woff2') format('woff2'),
		url('fonts/apertura-medium-italic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Apertura';
	src: url('fonts/apertura-bold.woff2') format('woff2'),
		url('fonts/apertura-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Apertura';
	src: url('fonts/apertura-bold-italic.woff2') format('woff2'),
		url('fonts/apertura-bold-italic.woff') format('woff');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Apertura';
	src: url('fonts/apertura-black.woff2') format('woff2'),
		url('fonts/apertura-black.woff') format('woff');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Apertura';
	src: url('fonts/apertura-black-italic.woff2') format('woff2'),
		url('fonts/apertura-black-italic.woff') format('woff');
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}

/* Trajan Pro 3 — headings. Capitals only by design: lowercase letters render
   as small capitals. ExtraLight is 250 in the font, declared at 200.
   The woff2/woff files are subset to Latin (Basic, Latin-1, Extended-A),
   general punctuation, the euro, trademark and minus signs, with every
   OpenType feature kept — under half the size of a full conversion. Any
   other character falls through to the next font in the stack rather than
   breaking. README.md has the command that rebuilds them from the .otf. */
@font-face {
	font-family: 'Trajan Pro 3';
	src: url('fonts/trajan/trajan-pro-3-extralight.woff2') format('woff2'),
		url('fonts/trajan/trajan-pro-3-extralight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Trajan Pro 3';
	src: url('fonts/trajan/trajan-pro-3-light.woff2') format('woff2'),
		url('fonts/trajan/trajan-pro-3-light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Trajan Pro 3';
	src: url('fonts/trajan/trajan-pro-3-regular.woff2') format('woff2'),
		url('fonts/trajan/trajan-pro-3-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Trajan Pro 3';
	src: url('fonts/trajan/trajan-pro-3-semibold.woff2') format('woff2'),
		url('fonts/trajan/trajan-pro-3-semibold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Trajan Pro 3';
	src: url('fonts/trajan/trajan-pro-3-bold.woff2') format('woff2'),
		url('fonts/trajan/trajan-pro-3-bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Trajan Pro 3';
	src: url('fonts/trajan/trajan-pro-3-black.woff2') format('woff2'),
		url('fonts/trajan/trajan-pro-3-black.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ============================================================= BASE === */
/* Element rules are :where()-wrapped for the same reason the tokens are: a
   plugin styling its own links or headings should not need to out-specify the
   theme to do it. */

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

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

:where(body) {
	margin: 0;
	padding-bottom: var(--fervent-tail);
	background: var(--fervent-bg);
	color: var(--fervent-text);
	font-family: var(--fervent-font-body);
	font-size: var(--fervent-font-size);
	line-height: 1.5;
}

:where(h1, h2, h3, h4, h5, h6) { font-family: var(--fervent-font-heading); }

:where(a) { color: var(--fervent-link); }

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

/* Visible focus for keyboard users, everywhere. */
:where(:focus-visible) {
	outline: 2px solid var(--fervent-focus);
	outline-offset: 2px;
}

/* Skip link — visually hidden until focused. */
.fervent-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 10px 16px;
	background: var(--fervent-bg-elevated);
	color: var(--fervent-text);
	border: 1px solid var(--fervent-border);
	border-radius: 0 0 6px 0;
}
.fervent-skip:focus {
	left: 0;
}

/* =========================================================== HEADER === */
/* This header is on every page, so it is deliberately cheap: no
   web-font-dependent logo art, no background images, no layout that depends on
   JS having run. */

.fervent-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--fervent-bg-elevated);
	border-bottom: 1px solid var(--fervent-border);
}

.fervent-header-inner {
	max-width: var(--fervent-max-w);
	margin: 0 auto;
	padding: 0 var(--fervent-gap);
	min-height: var(--fervent-header-h);
	display: flex;
	align-items: center;
	gap: var(--fervent-gap);
}

.fervent-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fervent-font-heading);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.2px;
	color: var(--fervent-text);
	text-decoration: none;
	white-space: nowrap;
}
.fervent-brand:hover { color: var(--fervent-text); }

.fervent-brand-picture { display: block; }

/* Both dimensions auto, so the width/height attributes only lend the browser
   the image's ratio and --fervent-logo-h caps the rendered size. */
.fervent-brand-logo {
	display: block;
	max-height: var(--fervent-logo-h);
	width: auto;
	height: auto;
}

/* ============================================================= NAV === */

.fervent-nav { margin-left: auto; }

.fervent-menu,
.fervent-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fervent-menu {
	display: flex;
	align-items: center;
	gap: 4px;
}

.fervent-menu li { position: relative; }

.fervent-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	color: var(--fervent-text);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
}

.fervent-menu a:hover,
.fervent-menu a:focus-visible {
	background: var(--fervent-bg-subtle);
}

.fervent-menu .current-menu-item > a,
.fervent-menu .current_page_item > a {
	background: var(--fervent-bg-subtle);
	font-weight: 600;
}

/* Submenus: keyboard-reachable, not hover-only. Revealed on hover AND on
   focus-within, so tabbing through the parent link opens the child list. */
.fervent-menu .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 200px;
	padding: 6px;
	background: var(--fervent-bg-elevated);
	border: 1px solid var(--fervent-border);
	border-radius: 8px;
	box-shadow: var(--fervent-shadow-raised);
	display: none;
}

.fervent-menu li:hover > .sub-menu,
.fervent-menu li:focus-within > .sub-menu {
	display: block;
}

/* The toggle is hidden on desktop but must still exist in the DOM so the
   script can bind to it once and not care about viewport. */
.fervent-toggle {
	display: none;
	margin-left: auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--fervent-border);
	border-radius: 8px;
	color: var(--fervent-text);
	cursor: pointer;
}

.fervent-toggle:hover { background: var(--fervent-bg-subtle); }

.fervent-toggle-bar,
.fervent-toggle-bar::before,
.fervent-toggle-bar::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.fervent-toggle-bar { position: relative; }

.fervent-toggle-bar::before,
.fervent-toggle-bar::after {
	content: '';
	position: absolute;
	left: 0;
}
.fervent-toggle-bar::before { top: -6px; }
.fervent-toggle-bar::after  { top: 6px; }

/* ======================================== MOBILE (below 980px) === */
/* 980px matches Divi's breakpoint, so a site switching over from Divi sees no
   visible change in where the menu collapses. */

@media (max-width: 979px) {

	.fervent-toggle { display: inline-flex; }

	.fervent-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		margin: 0;
		background: var(--fervent-bg-elevated);
		border-bottom: 1px solid var(--fervent-border);
		box-shadow: var(--fervent-shadow-raised);
		max-height: calc(100vh - var(--fervent-header-h));
		overflow-y: auto;
	}

	/* Closed by default on small screens. `.is-open` is added by the script;
	   with JS off the nav falls back to always-visible (see below), so the menu
	   is never unreachable. */
	.fervent-nav[data-fervent-nav] { display: none; }
	.fervent-nav.is-open { display: block; }

	/* Progressive enhancement: until the script marks the header enhanced, the
	   nav renders in flow and stays reachable without JS. */
	.fervent-header:not(.is-enhanced) .fervent-nav {
		display: block;
		position: static;
		box-shadow: none;
		max-height: none;
	}
	.fervent-header:not(.is-enhanced) .fervent-toggle { display: none; }

	.fervent-header-inner { position: relative; flex-wrap: wrap; }

	.fervent-menu {
		display: block;
		padding: 8px var(--fervent-gap) 12px;
	}

	.fervent-menu a {
		padding: 12px 8px;
		font-size: 16px;
		border-radius: 8px;
	}

	/* Submenus stack inline rather than floating — no hover on touch. */
	.fervent-menu .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 16px;
		background: none;
	}
}

/* ============================================================ MAIN === */

.fervent-main {
	max-width: var(--fervent-max-w);
	margin: 0 auto;
	padding: var(--fervent-gap);
}

/* The Minimal template drops the page gutter -- the plugin output it hosts
   brings its own internal spacing -- but keeps every block on one shared
   content width, so sibling shortcodes line up on the same left and right
   edges instead of one running edge-to-edge beside another that
   self-constrains. Kept as a token (--fervent-content-w, top of file) so a
   plugin that wants to match it can read the same value. */

.fervent-main--flush {
	max-width: var(--fervent-content-w);
	margin-inline: auto;
	padding: 0;
}

.fervent-page-title {
	font-family: var(--fervent-font-heading);
	margin: 0 0 var(--fervent-gap);
	font-size: 28px;
	line-height: 1.2;
}

.fervent-entry img { border-radius: 8px; }

@media print {
	.fervent-header { display: none; }
	body { padding-bottom: 0; }
}