/*
Theme Name: Familia Apostolate
Theme URI: https://familyapostolatefaridabad.com/
Author: Family Apostolate, Diocese of Faridabad – Delhi
Author URI: https://familyapostolatefaridabad.com/
Description: A dignified, document-first WordPress theme for Catholic diocesan ministries, modelled on the restraint and typographic hierarchy of vatican.va. Built to carry the full Family Apostolate information architecture: deep multi-level navigation, announcement marquee, hero slider, vision/mission blocks, important-links panel, galleries, e-magazine and counselling sections.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: familia-apostolate
Tags: two-columns, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks

Familia Apostolate is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */

:root {
	/* Ecclesial palette — burgundy of the cassock, gold of the keys, paper ivory. */
	--fa-burgundy:        #6e1423;
	--fa-burgundy-dark:   #4b0d18;
	--fa-burgundy-soft:   #8c2233;
	--fa-gold:            #a8842f;
	--fa-gold-light:      #d9c48a;
	--fa-gold-wash:       #f5eeda;

	--fa-paper:           #ffffff;
	--fa-ivory:           #fbf9f4;
	--fa-ivory-deep:      #f4f0e6;
	--fa-ink:             #1f1b18;
	--fa-ink-soft:        #433d37;
	--fa-muted:           #6b645c;
	--fa-rule:            #e2dbca;
	--fa-rule-strong:     #cfc5ae;

	/* Typography */
	--fa-font-display: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
	--fa-font-body:    "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
	--fa-font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fa-fs-base:  1.0625rem;   /* 17px — long-form reading */
	--fa-lh-base:  1.75;
	--fa-measure:  68ch;        /* optimal reading measure */

	/* Rhythm */
	--fa-space-1: 0.25rem;
	--fa-space-2: 0.5rem;
	--fa-space-3: 0.75rem;
	--fa-space-4: 1rem;
	--fa-space-5: 1.5rem;
	--fa-space-6: 2rem;
	--fa-space-7: 3rem;
	--fa-space-8: 4rem;
	--fa-space-9: 6rem;

	--fa-container: 1180px;
	--fa-container-narrow: 820px;

	--fa-radius: 2px;           /* institutional sites are square; a hairline only */
	--fa-shadow: 0 1px 2px rgba(31, 27, 24, .06), 0 8px 24px rgba(31, 27, 24, .05);
	--fa-shadow-lift: 0 2px 4px rgba(31, 27, 24, .08), 0 16px 40px rgba(31, 27, 24, .10);

	--fa-transition: 160ms ease;
}

/* =========================================================================
   2. Reset & base
   ========================================================================= */

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

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	/* Belt and braces against a plugin-injected wide element. `clip` rather than
	   `hidden` on purpose: `hidden` would make the body a scroll container and
	   break the sticky header. */
	overflow-x: clip;
	background: var(--fa-ivory);
	color: var(--fa-ink);
	font-family: var(--fa-font-body);
	font-size: var(--fa-fs-base);
	line-height: var(--fa-lh-base);
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
img { display: block; }

hr {
	border: 0;
	border-top: 1px solid var(--fa-rule);
	margin: var(--fa-space-7) 0;
}

/* Headings — display serif, tight, small-caps eyebrows handled separately. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--fa-font-display);
	color: var(--fa-burgundy-dark);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 var(--fa-space-4);
	letter-spacing: .005em;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.1rem; }
h6 {
	font-family: var(--fa-font-ui);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fa-gold);
}

p { margin: 0 0 var(--fa-space-5); }

a {
	color: var(--fa-burgundy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: var(--fa-gold-light);
	transition: color var(--fa-transition), text-decoration-color var(--fa-transition);
}

a:hover, a:focus { color: var(--fa-gold); text-decoration-color: currentColor; }

:focus-visible {
	outline: 2px solid var(--fa-gold);
	outline-offset: 2px;
}

blockquote {
	margin: var(--fa-space-6) 0;
	padding: var(--fa-space-2) 0 var(--fa-space-2) var(--fa-space-5);
	border-left: 3px solid var(--fa-gold);
	font-size: 1.2rem;
	font-style: italic;
	color: var(--fa-ink-soft);
}

blockquote cite {
	display: block;
	margin-top: var(--fa-space-3);
	font-family: var(--fa-font-ui);
	font-size: .8rem;
	font-style: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fa-muted);
}

code, kbd, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

pre {
	background: var(--fa-ivory-deep);
	border: 1px solid var(--fa-rule);
	padding: var(--fa-space-5);
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--fa-space-6);
	font-size: .95rem;
}

th, td {
	padding: var(--fa-space-3) var(--fa-space-4);
	border-bottom: 1px solid var(--fa-rule);
	text-align: left;
	vertical-align: top;
}

th {
	font-family: var(--fa-font-ui);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fa-burgundy);
	background: var(--fa-ivory-deep);
	border-bottom-color: var(--fa-rule-strong);
}

/* Tables must scroll inside themselves, never the page. */
.fa-table-scroll { overflow-x: auto; }

ul, ol { padding-left: 1.35rem; margin: 0 0 var(--fa-space-5); }
li { margin-bottom: var(--fa-space-2); }

/* =========================================================================
   3. Layout primitives
   ========================================================================= */

.fa-container {
	width: 100%;
	max-width: var(--fa-container);
	margin-inline: auto;
	padding-inline: var(--fa-space-5);
}

.fa-container--narrow { max-width: var(--fa-container-narrow); }

.fa-section { padding-block: var(--fa-space-8); }
.fa-section--tight { padding-block: var(--fa-space-7); }
.fa-section--paper { background: var(--fa-paper); }
.fa-section--ivory { background: var(--fa-ivory-deep); }

.fa-grid { display: grid; gap: var(--fa-space-6); }
.fa-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.fa-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fa-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--fa-space-3) var(--fa-space-5);
	background: var(--fa-burgundy);
	color: #fff;
	font-family: var(--fa-font-ui);
	font-size: .9rem;
	text-decoration: none;
}

.skip-link:focus { left: var(--fa-space-4); top: var(--fa-space-4); color: #fff; }

/* Shared section heading treatment: gold rule + small-caps eyebrow. */
.fa-section-head { margin-bottom: var(--fa-space-6); }

.fa-eyebrow {
	display: block;
	font-family: var(--fa-font-ui);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--fa-gold);
	margin-bottom: var(--fa-space-2);
}

.fa-section-title { margin-bottom: var(--fa-space-3); }

.fa-rule-gold {
	display: block;
	width: 68px;
	height: 2px;
	background: var(--fa-gold);
	margin-bottom: var(--fa-space-5);
}

.fa-section-head--center { text-align: center; }
.fa-section-head--center .fa-rule-gold { margin-inline: auto; }

.fa-lede {
	font-size: 1.15rem;
	color: var(--fa-ink-soft);
	max-width: var(--fa-measure);
}

/* =========================================================================
   4. Buttons
   ========================================================================= */

.fa-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--fa-space-2);
	padding: .7rem 1.5rem;
	font-family: var(--fa-font-ui);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--fa-burgundy);
	background: var(--fa-burgundy);
	color: #fff;
	border-radius: var(--fa-radius);
	cursor: pointer;
	transition: background var(--fa-transition), color var(--fa-transition), border-color var(--fa-transition);
}

.fa-btn:hover, .fa-btn:focus {
	background: var(--fa-burgundy-dark);
	border-color: var(--fa-burgundy-dark);
	color: #fff;
}

.fa-btn--ghost {
	background: transparent;
	color: var(--fa-burgundy);
}

.fa-btn--ghost:hover, .fa-btn--ghost:focus {
	background: var(--fa-burgundy);
	color: #fff;
}

.fa-btn--gold {
	background: var(--fa-gold);
	border-color: var(--fa-gold);
	color: #fff;
}

.fa-btn--gold:hover, .fa-btn--gold:focus {
	background: #8d6d21;
	border-color: #8d6d21;
}

/* Editor / plugin buttons inherit the same voice. */
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.wpcf7 input[type="submit"] {
	font-family: var(--fa-font-ui);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .7rem 1.5rem;
	background: var(--fa-burgundy);
	border: 1px solid var(--fa-burgundy);
	color: #fff;
	border-radius: var(--fa-radius);
	cursor: pointer;
	transition: background var(--fa-transition);
}

.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover { background: var(--fa-burgundy-dark); }

/* =========================================================================
   5. Forms
   ========================================================================= */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], input[type="date"],
select, textarea {
	width: 100%;
	padding: .65rem .85rem;
	font-family: var(--fa-font-body);
	font-size: 1rem;
	color: var(--fa-ink);
	background: var(--fa-paper);
	border: 1px solid var(--fa-rule-strong);
	border-radius: var(--fa-radius);
	transition: border-color var(--fa-transition), box-shadow var(--fa-transition);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--fa-gold);
	box-shadow: 0 0 0 3px rgba(168, 132, 47, .15);
	outline: none;
}

label {
	display: block;
	font-family: var(--fa-font-ui);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--fa-ink-soft);
	margin-bottom: var(--fa-space-2);
}

/* --- Contact Form 7 -------------------------------------------------------
   The registration forms build their columns by hand, with inline styles:
   `display:inline-block; width:49%` wrappers and, on one label, a literal
   `margin-bottom: 53px` used to nudge the two columns into alignment. Inline
   styles beat any stylesheet, and the nudge only ever matched one font size.

   Rather than fight it row by row, the wrappers are dissolved with
   `display: contents` so every field becomes an item in one real grid. Rows
   then align because they are actual grid rows, at any font size. */

.wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: var(--fa-space-5) var(--fa-space-6);
	max-width: 960px;
}

/* Dissolve every layout wrapper so the fields themselves become grid items.
   The hidden-input div and the response output are left intact — the first must
   stay hidden, the second is a real element that spans the grid. */
.wpcf7-form div:not([style*="none"]):not(.wpcf7-response-output) { display: contents !important; }
.wpcf7-form label[style*="margin-bottom"] { margin-bottom: 0 !important; }

.wpcf7-form p { margin: 0; }

/* Anything that needs the full width of the form. */
.wpcf7-form p:has( textarea ),
.wpcf7-form p:has( input[type="submit"] ),
.wpcf7-form .wpcf7-response-output { grid-column: 1 / -1; }

.wpcf7-form label {
	display: block;
	font-family: var(--fa-font-ui);
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--fa-ink-soft);
	margin-bottom: 0;
	text-transform: none;
}

/* The required marker: a proper mark rather than a floating superscript. */
.wpcf7-form label sup {
	color: var(--fa-burgundy);
	font-size: .9em;
	vertical-align: baseline;
	margin-left: 2px;
}

.wpcf7-form label br,
.wpcf7-form p > br { display: none; }

.wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: var(--fa-space-2); }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	/* CF7 emits size="40", which would otherwise set the width. */
	min-width: 0;
	height: auto;
}

.wpcf7-form textarea { min-height: 8rem; resize: vertical; }

/* Radios and checkboxes, in the theme's colours rather than browser blue. */
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fa-space-2) var(--fa-space-5);
	margin-top: var(--fa-space-3);
}

.wpcf7-form .wpcf7-list-item { margin: 0; }

.wpcf7-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: var(--fa-space-2);
	margin: 0;
	font-weight: 400;
	color: var(--fa-ink);
	cursor: pointer;
}

.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--fa-burgundy);
	cursor: pointer;
}

/* File input: the default control is raw browser chrome. */
.wpcf7-form input[type="file"] {
	width: 100%;
	padding: .5rem;
	font-family: var(--fa-font-ui);
	font-size: .85rem;
	color: var(--fa-ink-soft);
	background: var(--fa-paper);
	border: 1px dashed var(--fa-rule-strong);
	border-radius: var(--fa-radius);
	cursor: pointer;
}

.wpcf7-form input[type="file"]::file-selector-button {
	margin-right: var(--fa-space-4);
	padding: .45rem 1rem;
	font-family: var(--fa-font-ui);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--fa-burgundy);
	border: 0;
	border-radius: var(--fa-radius);
	cursor: pointer;
}

.wpcf7-form input[type="file"]::file-selector-button:hover { background: var(--fa-burgundy-dark); }

.wpcf7-form input[type="submit"] { margin-top: var(--fa-space-2); }

.wpcf7-not-valid-tip {
	font-family: var(--fa-font-ui);
	font-size: .78rem;
	color: #a02020;
	margin-top: var(--fa-space-2);
}

.wpcf7-form .wpcf7-not-valid { border-color: #a02020; }

.wpcf7 form .wpcf7-response-output {
	margin: var(--fa-space-5) 0 0;
	padding: var(--fa-space-3) var(--fa-space-4);
	border-width: 1px;
	border-radius: var(--fa-radius);
	font-family: var(--fa-font-ui);
	font-size: .9rem;
}

@media (max-width: 600px) {
	.wpcf7-form { grid-template-columns: minmax(0, 1fr); gap: var(--fa-space-4); }
}

/* =========================================================================
   6. Announcement bar (static — replaces the legacy marquee)
   ========================================================================= */

.fa-announce {
	background: var(--fa-burgundy-dark);
	color: #f3e7cf;
	font-family: var(--fa-font-ui);
	font-size: .86rem;
	line-height: 1.5;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	position: relative;
}

.fa-announce__inner {
	display: flex;
	align-items: center;
	gap: var(--fa-space-4);
	min-height: 44px;
	padding-block: var(--fa-space-2);
}

.fa-announce__label {
	flex: none;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fa-gold-light);
	padding-right: var(--fa-space-4);
	border-right: 1px solid rgba(217, 196, 138, .35);
}

/* min-width:0 keeps this flex item from refusing to shrink below its content. */
.fa-announce__viewport { flex: 1 1 auto; min-width: 0; }

/* Nothing moves. A notice that scrolls past cannot be read at a glance, and the
   bar carries information people need — dates, registration links. */
.fa-announce__track {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fa-space-3) var(--fa-space-6);
}

.fa-announce__item { color: #f3e7cf; text-decoration: none; }
.fa-announce__item a { color: var(--fa-gold-light); }
.fa-announce__item a:hover { color: #fff; }

/* No divider between notices: once they wrap, a separator lands at the start of
   the new line and reads as a stray mark. The column gap does the work. */

@media (max-width: 782px) {
	.fa-announce__inner { flex-direction: column; gap: var(--fa-space-2); padding-block: var(--fa-space-3); }
	.fa-announce__label { padding-right: 0; border-right: 0; }
	.fa-announce__track { text-align: center; gap: var(--fa-space-2); }
}

/* =========================================================================
   7. Header & masthead
   ========================================================================= */

.fa-topbar {
	background: var(--fa-ivory-deep);
	border-bottom: 1px solid var(--fa-rule);
	font-family: var(--fa-font-ui);
	font-size: .8rem;
	color: var(--fa-muted);
}

.fa-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fa-space-4);
	min-height: 38px;
	flex-wrap: wrap;
}

.fa-topbar a { color: var(--fa-muted); text-decoration: none; }
.fa-topbar a:hover { color: var(--fa-burgundy); }

.fa-topbar__contact { display: flex; gap: var(--fa-space-5); flex-wrap: wrap; }
.fa-topbar__links { display: flex; gap: var(--fa-space-4); align-items: center; }

/* --- Masthead: brand and navigation share a single row ------------------- */

.fa-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: saturate(180%) blur(8px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--fa-rule);
	transition: box-shadow var(--fa-transition);
}

/* The shadow appears only once the page has moved, so the header sits flat at rest. */
.fa-header.is-scrolled { box-shadow: var(--fa-shadow); }

/* The header gets a wider container than the body text: nine sections plus a
   call-to-action do not fit 1180px, and beyond that width the standard
   container stops growing, so nothing else can give. */
.fa-header > .fa-container { max-width: 1360px; }

.fa-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fa-space-5);
	min-height: 88px;
}

.fa-brand {
	display: flex;
	align-items: center;
	gap: var(--fa-space-3);
	text-decoration: none;
	/* Never shrink: the nav wraps or tightens before the identity does. */
	flex: 0 0 auto;
}

.fa-brand__text { display: flex; flex-direction: column; line-height: 1.08; }

/* The wordmark leads the lockup: it must sit wider than the tagline beneath it.
   The tagline's tracking is the lever — widening the title alone would just eat
   the navigation's headroom. */
.fa-brand__title {
	font-family: var(--fa-font-display);
	font-size: clamp(1.35rem, 1.05rem + .95vw, 1.95rem);
	font-weight: 700;
	color: var(--fa-burgundy-dark);
	margin: 0;
	letter-spacing: .01em;
	white-space: nowrap;
}

/* The emblem carries its own ring, so it stands alone — no medallion, no rules.
   It fills the footprint the old medallion occupied, and stays under its native
   95×100 so the line work does not soften. */
.fa-crest {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.fa-crest img { width: auto; height: auto; object-fit: contain; }

.fa-crest--header img { max-height: 66px; max-width: 66px; }

.fa-crest--footer { margin-bottom: var(--fa-space-4); }

/* No treatment needed on the burgundy footer: the emblem carries its own opaque
   cream disc, so it stays legible unaided. Inverting it would recolour an
   official diocesan crest, which is not ours to do. */
.fa-crest--footer img {
	max-height: 70px;
	max-width: 70px;
}

@media (max-width: 782px) {
	.fa-crest--header img { max-height: 52px; max-width: 52px; }
}

.fa-brand:hover .fa-brand__title { color: var(--fa-burgundy); }

.fa-brand__tagline {
	font-family: var(--fa-font-ui);
	font-size: .56rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--fa-gold);
	margin-top: 3px;
	white-space: nowrap;
}

/* Must come after the base rules above: these carry the same specificity, so
   source order decides. Placed before them, the title changed and the tagline
   silently did not. */
@media (max-width: 782px) {
	.fa-brand__title { font-size: 1.5rem; }
	.fa-brand__tagline { font-size: .5rem; letter-spacing: .05em; }
}

/* =========================================================================
   8. Primary navigation — up to three levels deep
   ========================================================================= */

.fa-nav { display: flex; align-items: center; min-width: 0; }

.fa-menu {
	display: flex;
	align-items: center;
	/* Nine sections plus an optional call to action can exceed one row on a
	   narrow desktop; wrapping is the graceful failure, clipping is not. */
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fa-menu li { position: relative; margin: 0; }

.fa-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	/* Fluid rather than stepped: nine sections plus an optional button have to
	   fit one row at every desktop width, and fixed breakpoints left gaps where
	   the last item ("Contact Us") dropped to a second line. */
	padding: .55rem clamp(.26rem, -.30rem + .68vw, .68rem);
	border-radius: var(--fa-radius);
	font-family: var(--fa-font-ui);
	font-size: clamp(.72rem, .49rem + .28vw, .845rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--fa-burgundy-dark);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--fa-transition), color var(--fa-transition), box-shadow var(--fa-transition);
}

.fa-menu > li > a:hover,
.fa-menu > li > a:focus-visible,
.fa-menu > li.is-open > a { background: var(--fa-ivory-deep); color: var(--fa-burgundy); }

.fa-menu > li.current-menu-item > a,
.fa-menu > li.current-menu-ancestor > a,
.fa-menu > li.current_page_item > a,
.fa-menu > li.current_page_ancestor > a {
	color: var(--fa-burgundy);
	box-shadow: inset 0 -2px 0 var(--fa-gold);
}

/* Nine top-level items must hold one row down to the tablet breakpoint. */
@media (min-width: 1201px) and (max-width: 1500px) {
	.fa-header__inner { gap: var(--fa-space-3); }
	.fa-menu__cta { margin-left: var(--fa-space-2); }
	.fa-menu__cta .fa-btn { padding-inline: .8rem; font-size: .72rem; }
}

/* Nine sections need ~1121px to sit on one row at the sizes above. Between the
   mobile breakpoint and that figure the identity block gives up room first —
   a smaller crest and wordmark are a better trade than a wrapped navigation. */
/* The brand no longer shrinks here. This block dated from a 1180px container and
   a 1024px breakpoint; with the header container at 1360px and the off-canvas
   menu taking over below 1200px, there is 230–375px of slack across this band,
   and shrinking the wordmark only made the header read weaker than the footer. */
@media (min-width: 1201px) and (max-width: 1400px) {
	.fa-header__inner { gap: var(--fa-space-3); }
}

/* --- Submenus ------------------------------------------------------------ */

.fa-menu ul {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 252px;
	list-style: none;
	margin: 0;
	padding: .35rem;
	background: var(--fa-paper);
	border: 1px solid var(--fa-rule);
	border-top: 2px solid var(--fa-gold);
	border-radius: var(--fa-radius);
	box-shadow: var(--fa-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--fa-transition), transform var(--fa-transition), visibility var(--fa-transition);
	z-index: 50;
}

.fa-menu li:hover > ul,
.fa-menu li:focus-within > ul,
.fa-menu li.is-open > ul { opacity: 1; visibility: visible; transform: translateY(0); }

/* Third level opens to the side. */
.fa-menu ul ul { top: -.35rem; left: 100%; margin-left: 2px; border-top-width: 1px; border-left: 2px solid var(--fa-gold); }

/* Flipped when it would otherwise leave the viewport. */
.fa-menu ul li.fa-flip > ul {
	left: auto;
	right: 100%;
	margin: 0 2px 0 0;
	border-left: 1px solid var(--fa-rule);
	border-right: 2px solid var(--fa-gold);
}

.fa-menu ul a {
	display: block;
	padding: .5rem .7rem;
	border-radius: var(--fa-radius);
	font-family: var(--fa-font-ui);
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--fa-ink-soft);
	text-decoration: none;
	transition: background var(--fa-transition), color var(--fa-transition);
}

.fa-menu ul a:hover,
.fa-menu ul a:focus-visible { background: var(--fa-gold-wash); color: var(--fa-burgundy); }

.fa-menu ul li.current-menu-item > a,
.fa-menu ul li.current_page_item > a {
	color: var(--fa-burgundy);
	font-weight: 700;
	background: rgba(168, 132, 47, .12);
	box-shadow: inset 3px 0 0 var(--fa-gold);
}

.fa-menu .fa-caret {
	display: inline-block;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	opacity: .65;
	flex: none;
}

.fa-menu ul .fa-caret {
	position: absolute;
	right: .8rem;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
}

/* Header call to action, closing the row. */
.fa-menu__cta { margin-left: var(--fa-space-3); }
.fa-menu__cta a { white-space: nowrap; }

/* --- Toggle & off-canvas chrome ------------------------------------------ */

/* Icon only — the label is carried for screen readers, not drawn. */
.fa-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--fa-rule-strong);
	border-radius: var(--fa-radius);
	color: var(--fa-burgundy-dark);
	cursor: pointer;
	transition: background var(--fa-transition), color var(--fa-transition), border-color var(--fa-transition);
}

.fa-nav-toggle:hover,
.fa-nav-toggle[aria-expanded="true"] {
	background: var(--fa-burgundy);
	border-color: var(--fa-burgundy);
	color: #fff;
}

.fa-nav-toggle__bars {
	display: block;
	position: relative;
	width: 20px;
	height: 2px;
	background: currentColor;
}

.fa-nav-toggle__bars::before,
.fa-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--fa-transition), top var(--fa-transition);
}

.fa-nav-toggle__bars::before { top: -6px; }
.fa-nav-toggle__bars::after  { top: 6px; }

/* The panel head and backdrop exist only in the mobile panel. */
.fa-menu__head { display: none; }

.fa-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(35, 8, 14, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms ease, visibility 300ms ease;
	z-index: 80;
}

.fa-nav-backdrop.is-open { opacity: 1; visibility: visible; }

.fa-submenu-toggle {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 52px;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--fa-rule);
	color: var(--fa-burgundy);
	cursor: pointer;
}

/* --- Mobile: off-canvas panel -------------------------------------------- */

@media (max-width: 1200px) {
	/* `.fa-nav` stays in the row as a zero-width item (its menu is the fixed
	   off-canvas panel), so `space-between` would split the free space into two
	   gaps and strand the toggle mid-row. Push the toggle right explicitly and
	   drop the gap, so it finishes flush with the container edge. */
	.fa-header__inner {
		min-height: 68px;
		justify-content: flex-start;
		gap: 0;
	}

	.fa-nav-toggle { margin-left: auto; }

	/* backdrop-filter makes the sticky header a containing block for the fixed
	   off-canvas panel, which would clip the panel to the header's height. */
	.fa-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--fa-paper); }

	.fa-nav-toggle { display: inline-flex; }

	.fa-menu {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(90vw, 380px);
		flex-direction: column;
		align-items: stretch;
		/* Must be reset: flex-end is for the desktop row, and in a column it
		   would push the whole menu to the bottom of the panel. */
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 0;
		padding: 0 0 var(--fa-space-7);
		background: var(--fa-paper);
		border-left: 4px solid var(--fa-gold);
		box-shadow: -20px 0 60px rgba(31, 27, 24, .22);
		transform: translateX(100%);
		transition: transform 300ms cubic-bezier(.22, .9, .3, 1);
		overflow-y: auto;
		overscroll-behavior: contain;
		z-index: 90;
	}

	.fa-menu.is-open { transform: translateX(0); }

	.fa-menu__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--fa-space-4);
		padding: var(--fa-space-4) var(--fa-space-5);
		border-bottom: 1px solid var(--fa-rule);
		background: var(--fa-ivory-deep);
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.fa-menu__head-title {
		font-family: var(--fa-font-ui);
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .22em;
		text-transform: uppercase;
		color: var(--fa-gold);
	}

	.fa-menu__close {
		width: 38px; height: 38px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 1px solid var(--fa-rule-strong);
		border-radius: 50%;
		color: var(--fa-burgundy);
		font-size: 1.2rem;
		line-height: 1;
		cursor: pointer;
	}

	.fa-menu__close:hover { background: var(--fa-burgundy); color: #fff; border-color: var(--fa-burgundy); }

	.fa-menu > li > a,
	.fa-menu ul a {
		display: flex;
		width: 100%;
		padding: .9rem 1.25rem;
		border-radius: 0;
		font-size: 1rem;
		border-bottom: 1px solid var(--fa-rule);
	}

	.fa-menu > li > a:hover,
	.fa-menu > li.is-open > a { background: var(--fa-ivory-deep); }

	.fa-menu > li.current-menu-item > a,
	.fa-menu > li.current_page_item > a {
		box-shadow: inset 3px 0 0 var(--fa-gold);
		background: var(--fa-ivory-deep);
	}

	/* Submenus become accordions. */
	.fa-menu ul,
	.fa-menu ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: var(--fa-ivory);
	}

	.fa-menu li.is-open > ul { display: block; }

	.fa-menu ul a { padding-left: 2.2rem; font-size: .95rem; color: var(--fa-ink-soft); }
	.fa-menu ul ul a { padding-left: 3.1rem; background: var(--fa-ivory-deep); }

	.fa-menu .fa-caret { display: none; }
	.fa-submenu-toggle { display: block; }

	.fa-submenu-toggle::before {
		content: "";
		position: absolute;
		top: 50%; left: 50%;
		width: 8px; height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translate(-50%, -65%) rotate(45deg);
		transition: transform var(--fa-transition);
	}

	.fa-submenu-toggle[aria-expanded="true"]::before { transform: translate(-50%, -35%) rotate(-135deg); }

	.fa-menu__cta { margin: var(--fa-space-5) 1.25rem 0; }
	.fa-menu__cta a { display: flex; justify-content: center; }

	/* Scroll is locked on the document while the panel is open. */
	body.fa-nav-open { overflow: hidden; }
}

@media (max-width: 782px) {
	.fa-topbar__inner { justify-content: center; }
}
/* =========================================================================
   9. Hero / slider region
   ========================================================================= */

.fa-hero {
	position: relative;
	background: var(--fa-burgundy-dark);
	color: #fff;
	overflow: hidden;
}

.fa-hero__media { position: relative; }

.fa-hero__media img { width: 100%; object-fit: cover; }

.fa-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(35, 8, 14, .82) 0%, rgba(35, 8, 14, .55) 45%, rgba(35, 8, 14, .12) 100%);
	display: flex;
	align-items: center;
}

.fa-hero__content { max-width: 640px; padding-block: var(--fa-space-8); }

.fa-hero__eyebrow {
	font-family: var(--fa-font-ui);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fa-gold-light);
	margin-bottom: var(--fa-space-3);
}

.fa-hero__title {
	color: #fff;
	font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
	margin-bottom: var(--fa-space-4);
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.fa-hero__text {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, .9);
	max-width: 52ch;
	margin-bottom: var(--fa-space-6);
}

.fa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--fa-space-3); }

.fa-hero .fa-btn { border-color: var(--fa-gold); background: var(--fa-gold); }
.fa-hero .fa-btn:hover { background: #8d6d21; border-color: #8d6d21; }
.fa-hero .fa-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.fa-hero .fa-btn--ghost:hover { background: #fff; color: var(--fa-burgundy-dark); border-color: #fff; }

/* --- Homepage slider ----------------------------------------------------- */

.fa-slider {
	position: relative;
	background: var(--fa-burgundy-dark);
	overflow: hidden;
}

/* The band is keyed to the artwork's own 956×350 proportion rather than an
   arbitrary height, so wide banner images are not cropped top and bottom. The
   cap stops it becoming a letterbox on very wide screens. */
.fa-slider__viewport {
	position: relative;
	aspect-ratio: 956 / 350;
	max-height: 560px;
	min-height: 320px;
}

.fa-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 700ms ease, visibility 700ms ease;
}

.fa-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* No JS: the first slide is simply the slide. */
.no-js .fa-slide:not(.is-active) { display: none; }

.fa-slide__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* A slow drift keeps a still devotional image from feeling inert. */
	animation: fa-kenburns 16s ease-out both;
}

.fa-slide.is-active .fa-slide__image { animation-play-state: running; }

@keyframes fa-kenburns {
	from { transform: scale(1.0) translate3d(0, 0, 0); }
	to   { transform: scale(1.08) translate3d(0, -1.2%, 0); }
}

/* The scrim carries the text; it is heavier at the left where the copy sits. */
.fa-slide__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(35, 8, 14, .88) 0%, rgba(35, 8, 14, .70) 38%, rgba(35, 8, 14, .28) 68%, rgba(35, 8, 14, .12) 100%),
		linear-gradient(180deg, rgba(35, 8, 14, .35) 0%, transparent 30%, rgba(35, 8, 14, .40) 100%);
	z-index: 1;
}

.fa-slide__body {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	height: 100%;
}

.fa-slide__content { max-width: 620px; }

/* --- Text position per slide --------------------------------------------- */

/* Right: for artwork whose subject sits on the left (a painting's foreground
   figure, say) — the scrim mirrors so the subject stays clear. */
.fa-slide--align-right .fa-slide__content { margin-left: auto; }

.fa-slide--align-right .fa-slide__scrim {
	background:
		linear-gradient(270deg, rgba(35, 8, 14, .88) 0%, rgba(35, 8, 14, .70) 38%, rgba(35, 8, 14, .28) 68%, rgba(35, 8, 14, .12) 100%),
		linear-gradient(180deg, rgba(35, 8, 14, .35) 0%, transparent 30%, rgba(35, 8, 14, .40) 100%);
}

/* Bottom: for images with figures across the whole frame, where any side scrim
   would cover someone. The wash sits under the text only. */
.fa-slide--align-bottom .fa-slide__body { align-items: flex-end; padding-bottom: var(--fa-space-7); }
.fa-slide--align-bottom .fa-slide__content { max-width: 760px; }

.fa-slide--align-bottom .fa-slide__scrim {
	background: linear-gradient(180deg, rgba(35, 8, 14, .18) 0%, transparent 34%, rgba(35, 8, 14, .58) 68%, rgba(35, 8, 14, .90) 100%);
}

/* Under: no overlay at all. The picture is shown whole and the words sit below
   it on burgundy — the honest option for a busy or high-key image. */
.fa-slide--align-under { display: flex; flex-direction: column; }

.fa-slide--align-under .fa-slide__image,
.fa-slide--align-under .fa-slide__motif {
	position: relative;
	inset: auto;
	width: 100%;
	height: auto;
	aspect-ratio: 956 / 350;
}

.fa-slide--align-under .fa-slide__scrim { display: none; }

.fa-slide--align-under .fa-slide__body {
	position: relative;
	height: auto;
	background: var(--fa-burgundy-dark);
	padding-block: var(--fa-space-6);
}

.fa-slide--align-under .fa-slide__content { max-width: none; }
.fa-slide--align-under .fa-slide__title { text-shadow: none; }

/* A slide that stacks needs the band to size to it rather than to a fixed ratio. */
.fa-slider__viewport:has( .fa-slide--align-under.is-active ) {
	aspect-ratio: auto;
	height: auto;
	max-height: none;
}

.fa-slide--align-under.is-active { position: relative; }

.fa-slide__eyebrow {
	font-family: var(--fa-font-ui);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--fa-gold-light);
	margin-bottom: var(--fa-space-3);
}

.fa-slide__title {
	color: #fff;
	font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem);
	margin-bottom: var(--fa-space-4);
	text-shadow: 0 2px 20px rgba(0, 0, 0, .4);
}

.fa-slide__text {
	font-size: 1.12rem;
	color: rgba(255, 255, 255, .9);
	max-width: 52ch;
	margin-bottom: var(--fa-space-6);
}

/* Content rises as its slide becomes active. */
.fa-slide.is-active .fa-slide__eyebrow,
.fa-slide.is-active .fa-slide__title,
.fa-slide.is-active .fa-slide__text,
.fa-slide.is-active .fa-slide__content .fa-btn {
	animation: fa-slide-rise 700ms cubic-bezier(.22, .9, .3, 1) both;
}

.fa-slide.is-active .fa-slide__title { animation-delay: 90ms; }
.fa-slide.is-active .fa-slide__text { animation-delay: 170ms; }
.fa-slide.is-active .fa-slide__content .fa-btn { animation-delay: 250ms; }

@keyframes fa-slide-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Fallback motif: radiant gold rays behind a soft halo ----------------- */

.fa-slide__motif {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 68% 46%, #7d1a2c 0%, #5a1020 45%, #3d0a15 100%);
	overflow: hidden;
}

.fa-slide__rays {
	position: absolute;
	top: 46%;
	left: 68%;
	width: 150vmax;
	height: 150vmax;
	transform: translate(-50%, -50%);
	background: repeating-conic-gradient(
		from 0deg at 50% 50%,
		rgba(217, 196, 138, .16) 0deg 3deg,
		transparent 3deg 11deg
	);
	animation: fa-rays 90s linear infinite;
}

.fa-slide__halo {
	position: absolute;
	top: 46%;
	left: 68%;
	width: clamp(220px, 26vw, 380px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 238, 218, .30) 0%, rgba(217, 196, 138, .14) 42%, transparent 70%);
	box-shadow: 0 0 0 1px rgba(217, 196, 138, .22), 0 0 0 14px rgba(217, 196, 138, .07);
}

@keyframes fa-rays {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Controls ------------------------------------------------------------ */

.fa-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(35, 8, 14, .42);
	border: 1px solid rgba(217, 196, 138, .45);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background var(--fa-transition), border-color var(--fa-transition);
}

.fa-slider__arrow:hover,
.fa-slider__arrow:focus-visible { background: var(--fa-gold); border-color: var(--fa-gold); }

.fa-slider__arrow--prev { left: var(--fa-space-4); }
.fa-slider__arrow--next { right: var(--fa-space-4); }

.fa-slider__chevron {
	width: 11px;
	height: 11px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.fa-slider__arrow--prev .fa-slider__chevron { transform: rotate(-135deg); margin-left: 4px; }
.fa-slider__arrow--next .fa-slider__chevron { transform: rotate(45deg); margin-right: 4px; }

.fa-slider__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--fa-space-5);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fa-space-4);
}

.fa-slider__dots { display: flex; gap: var(--fa-space-2); }

.fa-slider__dot {
	width: 34px;
	height: 4px;
	padding: 0;
	background: rgba(255, 255, 255, .35);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background var(--fa-transition), width var(--fa-transition);
}

.fa-slider__dot:hover { background: rgba(255, 255, 255, .6); }
.fa-slider__dot.is-active { background: var(--fa-gold-light); width: 52px; }

.fa-slider__pause {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(217, 196, 138, .45);
	border-radius: 50%;
	color: var(--fa-gold-light);
	cursor: pointer;
}

.fa-slider__pause:hover { background: rgba(217, 196, 138, .18); }

/* Two bars = playing (press to pause); a triangle = paused. */
.fa-slider__pause-icon {
	width: 8px;
	height: 9px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.fa-slider__pause[aria-pressed="true"] .fa-slider__pause-icon {
	width: 0;
	height: 0;
	border: 0;
	border-left: 8px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	margin-left: 2px;
}

/* On a phone a 2.73:1 banner cropped into a tall viewport would show only its
   middle third — on the Holy Family painting that means losing Joseph and Mary
   entirely. So the slide stacks instead: the picture keeps its full width and
   proportion, and the words sit beneath it on burgundy.

   The active slide goes back into normal flow so the band can size itself to
   whichever slide is showing; the others stay absolute and overlay it. */
@media (max-width: 782px) {
	.fa-slider__arrow { display: none; }

	.fa-slider__viewport {
		aspect-ratio: auto;
		height: auto;
		max-height: none;
		min-height: 0;
	}

	.fa-slide { display: flex; flex-direction: column; }
	.fa-slide.is-active { position: relative; }

	.fa-slide__image,
	.fa-slide__motif {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 956 / 350;
		animation: none;
	}

	.fa-slide__scrim { display: none; }

	.fa-slide__body {
		position: relative;
		height: auto;
		background: var(--fa-burgundy-dark);
		padding-block: var(--fa-space-6);
	}

	.fa-slide__content { max-width: none; }
	.fa-slide__title { font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.1rem); text-shadow: none; }
	.fa-slide__text { font-size: 1rem; margin-bottom: var(--fa-space-5); }

	.fa-slider__controls { position: relative; bottom: auto; padding-block: var(--fa-space-4); background: var(--fa-burgundy-dark); }
}

/* Motion is decoration here; strip it rather than merely shortening it. */
@media (prefers-reduced-motion: reduce) {
	.fa-slide { transition: none; }
	.fa-slide__image { animation: none; }
	.fa-slide__rays { animation: none; }

	.fa-slide.is-active .fa-slide__eyebrow,
	.fa-slide.is-active .fa-slide__title,
	.fa-slide.is-active .fa-slide__text,
	.fa-slide.is-active .fa-slide__content .fa-btn { animation: none; }
}

/* When MetaSlider (or any slider shortcode) is present it takes the region over. */
.fa-hero--slider .metaslider { max-width: 100% !important; }
.fa-hero--slider .metaslider img { width: 100%; }

/* =========================================================================
   10. Vision & Mission
   ========================================================================= */

.fa-pillars { display: grid; gap: var(--fa-space-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.fa-pillar {
	background: var(--fa-paper);
	border: 1px solid var(--fa-rule);
	border-top: 3px solid var(--fa-gold);
	padding: var(--fa-space-6);
	box-shadow: var(--fa-shadow);
	display: flex;
	flex-direction: column;
}

.fa-pillar__icon {
	width: 44px; height: 44px;
	margin-bottom: var(--fa-space-4);
	color: var(--fa-gold);
}

.fa-pillar__title { margin-bottom: var(--fa-space-3); }
.fa-pillar__text { color: var(--fa-ink-soft); flex: 1 1 auto; }

.fa-pillar__more {
	font-family: var(--fa-font-ui);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fa-burgundy);
	margin-top: var(--fa-space-4);
}

.fa-pillar__more::after { content: " →"; }
.fa-pillar__more:hover { color: var(--fa-gold); }

/* =========================================================================
   11. Important links panel
   ========================================================================= */

.fa-links-panel {
	background: var(--fa-burgundy);
	color: #fff;
	background-image:
		radial-gradient(circle at 12% 20%, rgba(217, 196, 138, .10) 0, transparent 42%),
		radial-gradient(circle at 88% 78%, rgba(217, 196, 138, .08) 0, transparent 40%);
}

.fa-links-panel .fa-section-title,
.fa-links-panel .fa-eyebrow { color: #fff; }
.fa-links-panel .fa-eyebrow { color: var(--fa-gold-light); }

.fa-links-grid { display: grid; gap: var(--fa-space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.fa-link-card {
	display: flex;
	align-items: center;
	gap: var(--fa-space-4);
	padding: var(--fa-space-4) var(--fa-space-5);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(217, 196, 138, .28);
	border-radius: var(--fa-radius);
	color: #fff;
	text-decoration: none;
	transition: background var(--fa-transition), border-color var(--fa-transition), transform var(--fa-transition);
}

.fa-link-card:hover, .fa-link-card:focus {
	background: rgba(255, 255, 255, .13);
	border-color: var(--fa-gold-light);
	color: #fff;
	transform: translateY(-2px);
}

.fa-link-card__icon { flex: none; width: 26px; height: 26px; color: var(--fa-gold-light); }

.fa-link-card__label {
	font-family: var(--fa-font-ui);
	font-size: .92rem;
	font-weight: 500;
	line-height: 1.35;
}

.fa-link-card__meta {
	display: block;
	font-size: .74rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(217, 196, 138, .85);
	margin-top: 2px;
}

/* =========================================================================
   12. Programme / card grids
   ========================================================================= */

.fa-card {
	display: flex;
	flex-direction: column;
	background: var(--fa-paper);
	border: 1px solid var(--fa-rule);
	border-radius: var(--fa-radius);
	overflow: hidden;
	box-shadow: var(--fa-shadow);
	transition: box-shadow var(--fa-transition), transform var(--fa-transition);
}

.fa-card:hover { box-shadow: var(--fa-shadow-lift); transform: translateY(-2px); }

.fa-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fa-ivory-deep); }
.fa-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.fa-card:hover .fa-card__media img { transform: scale(1.035); }

.fa-card__body { padding: var(--fa-space-5); display: flex; flex-direction: column; flex: 1 1 auto; }

.fa-card__meta {
	font-family: var(--fa-font-ui);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fa-gold);
	margin-bottom: var(--fa-space-2);
}

.fa-card__title { font-size: 1.3rem; margin-bottom: var(--fa-space-3); }
.fa-card__title a { text-decoration: none; color: inherit; }
.fa-card__title a:hover { color: var(--fa-gold); }

.fa-card__excerpt { color: var(--fa-ink-soft); font-size: .98rem; flex: 1 1 auto; margin-bottom: var(--fa-space-4); }

.fa-card__more {
	font-family: var(--fa-font-ui);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fa-burgundy);
	align-self: flex-start;
}

.fa-card__more::after { content: " →"; }

/* =========================================================================
   13. Page header (inner pages) & breadcrumbs
   ========================================================================= */

.fa-page-header {
	background: var(--fa-ivory-deep);
	border-bottom: 1px solid var(--fa-rule);
	padding-block: var(--fa-space-7);
	position: relative;
}

.fa-page-header--image { background-size: cover; background-position: center; }

.fa-page-header--image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(35, 8, 14, .85), rgba(35, 8, 14, .55));
}

.fa-page-header--image .fa-container { position: relative; }
.fa-page-header--image .fa-page-header__title,
.fa-page-header--image .fa-breadcrumbs,
.fa-page-header--image .fa-breadcrumbs a { color: #fff; }

.fa-page-header__title { margin-bottom: 0; }

.fa-breadcrumbs {
	font-family: var(--fa-font-ui);
	font-size: .78rem;
	letter-spacing: .04em;
	color: var(--fa-muted);
	margin-bottom: var(--fa-space-3);
}

.fa-breadcrumbs a { color: var(--fa-muted); text-decoration: none; }
.fa-breadcrumbs a:hover { color: var(--fa-burgundy); text-decoration: underline; }
.fa-breadcrumbs__sep { margin-inline: var(--fa-space-2); color: var(--fa-gold); }

/* =========================================================================
   14. Content area & sidebar
   ========================================================================= */

.fa-main { padding-block: var(--fa-space-8); }

.fa-layout {
	display: grid;
	gap: var(--fa-space-8);
	grid-template-columns: minmax(0, 1fr) 300px;
	align-items: start;
}

.fa-layout--full { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
	.fa-layout { grid-template-columns: minmax(0, 1fr); }
}

.fa-content { min-width: 0; }

/* Long-form typography for page/post bodies. */
.fa-entry-content { max-width: var(--fa-measure); }
.fa-layout--full .fa-entry-content { max-width: none; }

.fa-entry-content > * + * { margin-top: var(--fa-space-5); }
.fa-entry-content h2 { margin-top: var(--fa-space-7); }
.fa-entry-content h3 { margin-top: var(--fa-space-6); }

.fa-entry-content h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 2px;
	background: var(--fa-gold);
	margin-top: var(--fa-space-3);
}

.fa-entry-content img { border-radius: var(--fa-radius); }

.fa-entry-content .alignwide  { width: min(100%, calc(var(--fa-measure) + 12rem)); max-width: none; }
.fa-entry-content .alignfull  { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.fa-entry-content .alignleft  { float: left;  margin: 0 var(--fa-space-5) var(--fa-space-4) 0; }
.fa-entry-content .alignright { float: right; margin: 0 0 var(--fa-space-4) var(--fa-space-5); }
.fa-entry-content .aligncenter { margin-inline: auto; }

.fa-entry-content ul li::marker { color: var(--fa-gold); }
.fa-entry-content ol li::marker { color: var(--fa-gold); font-family: var(--fa-font-ui); font-size: .9em; }

/* Downloadable resource links (PDF forms are core to this ministry). */
.fa-entry-content a[href$=".pdf"]::after {
	content: " (PDF)";
	font-family: var(--fa-font-ui);
	font-size: .72em;
	letter-spacing: .08em;
	color: var(--fa-muted);
}

.fa-entry-footer {
	margin-top: var(--fa-space-7);
	padding-top: var(--fa-space-5);
	border-top: 1px solid var(--fa-rule);
	font-family: var(--fa-font-ui);
	font-size: .85rem;
	color: var(--fa-muted);
}

.fa-entry-meta {
	font-family: var(--fa-font-ui);
	font-size: .8rem;
	letter-spacing: .06em;
	color: var(--fa-muted);
	margin-bottom: var(--fa-space-4);
}

.fa-entry-meta a { color: var(--fa-muted); }

/* Sidebar */
.fa-sidebar { font-size: .97rem; }

.fa-widget {
	background: var(--fa-paper);
	border: 1px solid var(--fa-rule);
	border-top: 3px solid var(--fa-gold);
	padding: var(--fa-space-5);
	margin-bottom: var(--fa-space-6);
	box-shadow: var(--fa-shadow);
}

.fa-widget__title,
.fa-widget .widget-title {
	font-family: var(--fa-font-ui);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fa-burgundy);
	margin: 0 0 var(--fa-space-4);
	padding-bottom: var(--fa-space-3);
	border-bottom: 1px solid var(--fa-rule);
}

.fa-widget ul { list-style: none; padding: 0; margin: 0; }

.fa-widget li {
	margin: 0;
	border-bottom: 1px dotted var(--fa-rule);
}

.fa-widget li:last-child { border-bottom: 0; }

.fa-widget li a {
	display: block;
	padding: .5rem 0 .5rem var(--fa-space-4);
	position: relative;
	text-decoration: none;
	color: var(--fa-ink-soft);
	line-height: 1.45;
}

.fa-widget li a::before {
	content: "";
	position: absolute;
	left: 0; top: .95em;
	width: 5px; height: 5px;
	background: var(--fa-gold);
	border-radius: 50%;
}

.fa-widget li a:hover { color: var(--fa-burgundy); }

/* Section navigation widget — sibling/child pages of the current branch. */
.fa-subnav li.is-current > a { color: var(--fa-burgundy); font-weight: 600; }
.fa-subnav ul { padding-left: var(--fa-space-4); }

/* =========================================================================
   15. Archive / post listing
   ========================================================================= */

.fa-archive-list { display: grid; gap: var(--fa-space-6); }

.fa-post-row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--fa-space-5);
	padding-bottom: var(--fa-space-6);
	border-bottom: 1px solid var(--fa-rule);
}

.fa-post-row:last-child { border-bottom: 0; }
.fa-post-row--no-media { grid-template-columns: minmax(0, 1fr); }

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

.fa-post-row__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fa-radius); }
.fa-post-row__title { font-size: 1.5rem; margin-bottom: var(--fa-space-2); }
.fa-post-row__title a { text-decoration: none; color: inherit; }
.fa-post-row__title a:hover { color: var(--fa-gold); }

/* Pagination */
.fa-pagination {
	margin-top: var(--fa-space-7);
	display: flex;
	justify-content: center;
}

.fa-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); }

.fa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--fa-space-3);
	font-family: var(--fa-font-ui);
	font-size: .88rem;
	text-decoration: none;
	color: var(--fa-ink-soft);
	background: var(--fa-paper);
	border: 1px solid var(--fa-rule);
	border-radius: var(--fa-radius);
}

.fa-pagination .page-numbers:hover,
.fa-pagination .page-numbers.current {
	background: var(--fa-burgundy);
	border-color: var(--fa-burgundy);
	color: #fff;
}

/* =========================================================================
   16. Gallery support (works with the Photo Gallery plugin and core galleries)
   ========================================================================= */

.fa-gallery-grid { display: grid; gap: var(--fa-space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.fa-gallery-item {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--fa-rule);
	border-radius: var(--fa-radius);
	background: var(--fa-ivory-deep);
}

.fa-gallery-item img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; transition: transform 400ms ease; }
.fa-gallery-item:hover img { transform: scale(1.05); }

.fa-gallery-item__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--fa-space-4) var(--fa-space-3) var(--fa-space-3);
	background: linear-gradient(transparent, rgba(35, 8, 14, .85));
	color: #fff;
	font-family: var(--fa-font-ui);
	font-size: .8rem;
}

.wp-block-gallery, .gallery { margin-bottom: var(--fa-space-6); }

/* =========================================================================
   17. Footer
   ========================================================================= */

.fa-footer {
	background: var(--fa-burgundy-dark);
	color: rgba(255, 255, 255, .78);
	font-size: .95rem;
}

/* --- Footer sitemap: the primary menu, opened out ------------------------- */

.fa-sitemap {
	padding-block: var(--fa-space-7);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* A grid, not multi-column: with one very tall section (nine Programmes) the
   balancing in a multicol leaves whole columns empty. align-items:start stops
   the short sections stretching to the tallest row. */
.fa-sitemap__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
	align-items: start;
	gap: var(--fa-space-6) var(--fa-space-5);
}

.fa-sitemap__title {
	font-family: var(--fa-font-ui);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fa-gold-light);
	margin: 0 0 var(--fa-space-3);
	padding-bottom: var(--fa-space-2);
	border-bottom: 1px solid rgba(217, 196, 138, .25);
}

.fa-sitemap__title a { color: inherit; text-decoration: none; }
.fa-sitemap__title a:hover { color: #fff; text-decoration: none; }

.fa-sitemap ul { list-style: none; margin: 0; padding: 0; }

.fa-sitemap li { margin-bottom: var(--fa-space-2); line-height: 1.4; }

.fa-sitemap li a {
	color: rgba(255, 255, 255, .72);
	font-size: .87rem;
	text-decoration: none;
}

.fa-sitemap li a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--fa-gold); }

@media (max-width: 600px) {
	.fa-sitemap__grid { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: var(--fa-space-5) var(--fa-space-4); }
	.fa-sitemap li a { font-size: .82rem; }
}

.fa-footer__top {
	padding-block: var(--fa-space-8);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

/* auto-fit cannot be mixed with an explicit track in the same template, so the
   columns are uniform and the brand column is simply given more room to breathe. */
.fa-footer__grid {
	display: grid;
	gap: var(--fa-space-7);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.fa-footer__grid > :first-child { min-width: 240px; }

/* With no link, widget or contact columns filled in, a single narrow column
   left two-thirds of the footer empty. Here the brand block runs sideways
   instead — crest beside the wordmark, description and copyright. */
.fa-footer__grid--solo { grid-template-columns: minmax(0, 1fr); }

.fa-footer__grid--solo .fa-footer__brand {
	display: flex;
	align-items: flex-start;
	gap: var(--fa-space-6);
}

.fa-footer__grid--solo .fa-crest--footer { margin-bottom: 0; }

.fa-footer__grid--solo .fa-footer__about { max-width: 74ch; }

.fa-footer__copyright {
	margin: var(--fa-space-5) 0 0;
	font-family: var(--fa-font-ui);
	font-size: .8rem;
	color: rgba(255, 255, 255, .6);
}

@media (max-width: 600px) {
	.fa-footer__grid--solo .fa-footer__brand { flex-direction: column; gap: var(--fa-space-4); }
}

@media (max-width: 640px) {
	.fa-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--fa-space-6); }
}

.fa-footer h2, .fa-footer h3, .fa-footer .widget-title, .fa-footer__heading {
	font-family: var(--fa-font-ui);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fa-gold-light);
	margin: 0 0 var(--fa-space-4);
}

.fa-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.fa-footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--fa-gold); }

.fa-footer ul { list-style: none; padding: 0; margin: 0; }
.fa-footer li { margin-bottom: var(--fa-space-2); line-height: 1.5; }

/* Needs 0,2,0: `.fa-footer h2` above is 0,1,1 and was overriding every shared
   property, rendering the wordmark as a small gold column label instead. */
.fa-footer .fa-footer__brand-title {
	font-family: var(--fa-font-display);
	font-size: 1.95rem;
	font-weight: 700;
	color: #fff;
	text-transform: none;
	letter-spacing: .01em;
	line-height: 1.08;
	margin: 0;
}

/* Mirrors the header tagline, so both lockups read the same way. */
.fa-footer .fa-footer__brand-tagline {
	display: block;
	font-family: var(--fa-font-ui);
	font-size: .56rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--fa-gold-light);
	margin: 3px 0 var(--fa-space-4);
}

@media (max-width: 782px) {
	.fa-footer .fa-footer__brand-title { font-size: 1.5rem; }
	.fa-footer .fa-footer__brand-tagline { font-size: .5rem; letter-spacing: .1em; }
}

.fa-footer__about { max-width: 42ch; color: rgba(255, 255, 255, .7); }

.fa-footer__contact li { display: flex; gap: var(--fa-space-3); }
.fa-footer__contact svg { flex: none; width: 16px; height: 16px; margin-top: .3em; color: var(--fa-gold-light); }

.fa-social { display: flex; gap: var(--fa-space-3); margin-top: var(--fa-space-5); }

.fa-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border: 1px solid rgba(217, 196, 138, .4);
	border-radius: 50%;
	color: var(--fa-gold-light);
	transition: background var(--fa-transition), color var(--fa-transition);
}

.fa-social a:hover { background: var(--fa-gold); color: var(--fa-burgundy-dark); text-decoration: none; }
.fa-social svg { width: 17px; height: 17px; }

.fa-footer__bottom {
	padding-block: var(--fa-space-5);
	font-family: var(--fa-font-ui);
	font-size: .8rem;
	color: rgba(255, 255, 255, .6);
}

.fa-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fa-space-4);
	align-items: center;
	justify-content: space-between;
}

.fa-footer__legal { display: flex; flex-wrap: wrap; gap: var(--fa-space-4); }
.fa-footer__legal a { color: rgba(255, 255, 255, .6); }

/* Scripture line — the quiet devotional note at the very bottom. */
.fa-footer__verse {
	font-family: var(--fa-font-display);
	font-size: 1.05rem;
	font-style: italic;
	color: var(--fa-gold-light);
	text-align: center;
	padding-block: var(--fa-space-5);
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.fa-back-to-top {
	position: fixed;
	right: var(--fa-space-5);
	bottom: var(--fa-space-5);
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fa-burgundy);
	color: #fff;
	border: 1px solid var(--fa-gold);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--fa-transition), transform var(--fa-transition), visibility var(--fa-transition);
	z-index: 60;
	cursor: pointer;
}

.fa-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.fa-back-to-top:hover { background: var(--fa-gold); }

/* =========================================================================
   18. Utilities & print
   ========================================================================= */

.fa-text-center { text-align: center; }
.fa-mt-0 { margin-top: 0; }
.fa-mb-0 { margin-bottom: 0; }

.fa-notice {
	padding: var(--fa-space-5);
	background: var(--fa-gold-wash);
	border-left: 3px solid var(--fa-gold);
	border-radius: var(--fa-radius);
}

@media print {
	.fa-nav, .fa-announce, .fa-topbar, .fa-footer, .fa-sidebar,
	.fa-back-to-top, .fa-slider, .fa-hero { display: none !important; }
	.fa-header { position: static; }

	body { background: #fff; font-size: 11pt; }
	.fa-layout { display: block; }
	a { text-decoration: none; color: #000; }
	.fa-entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}