/*
 * St Marina Church - theme stylesheet
 * Tokens reproduced from the audited production bundle (index-Dhf3PE9N.css, 26 Aug 2026).
 * Fonts are self-hosted; the live React site hotlinked Google Fonts.
 */

/* ---------------------------------------------------------------- Fonts -- */
@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------- Tokens -- */
:root {
	--primary: 220 100% 16%;
	--primary-foreground: 30 20% 98%;
	--secondary: 38 60% 50%;
	--secondary-foreground: 220 100% 16%;
	--background: 30 20% 92%;
	--foreground: 220 100% 16%;
	--card: 30 20% 98%;
	--card-foreground: 220 100% 16%;
	--muted: 220 20% 90%;
	--muted-foreground: 220 30% 40%;
	--accent: 38 60% 92%;
	--accent-foreground: 220 100% 16%;
	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 98%;
	--border: 220 20% 85%;
	--input: 220 20% 85%;
	--ring: 38 60% 50%;
	--radius: 0.5rem;


	--font-display: "Playfair Display", Georgia, "Times New Roman", Times, serif;
	--font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
	margin: 0;
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: hsl(var(--primary));
	text-decoration: none;
	transition: var(--transition-base);
}

a:hover {
	text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	color: hsl(var(--foreground));
	margin: 0 0 1rem;
}

h1 {
	font-size: 2.25rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.01em;
}

h2 {
	font-size: 1.5rem;
	line-height: 1.375;
	font-weight: 600;
}

h3 {
	font-size: 1.25rem;
	line-height: 1.375;
	font-weight: 600;
}

h4 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}

p {
	margin: 0 0 1rem;
}

@media (min-width: 768px) {
	h1 { font-size: 3rem; }
	h2 { font-size: 1.875rem; }
	h3 { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
	h1 { font-size: 3.75rem; }
}

/*
 * Heading size, decoupled from heading level.
 *
 * A card title inside a section is a second-level heading whatever size it is
 * drawn at. These let the document outline be correct - h1, h2, h3 in order,
 * which is what a screen reader navigates by - without redrawing pages that
 * were not part of this piece of work. Level carries meaning; size is styling.
 */
.heading-size-3 { font-size: 1.25rem; line-height: 1.375; }
.heading-size-4 { font-size: 1rem; line-height: 1.5; font-weight: 600; }

@media (min-width: 768px) {
	.heading-size-3 { font-size: 1.5rem; }
	.heading-size-4 { font-size: 1rem; }
}

/* ------------------------------------------------------------ Utilities -- */
.container-padding {
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.container-padding { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
	.container-padding { padding-left: 2rem; padding-right: 2rem; }
}

.section-spacing {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

@media (min-width: 768px) {
	.section-spacing { padding-top: 5rem; padding-bottom: 5rem; }
}

@media (min-width: 1024px) {
	.section-spacing { padding-top: 6rem; padding-bottom: 6rem; }
}

.wrap-sm { max-width: 28rem; margin-left: auto; margin-right: auto; }
.wrap-md { max-width: 56rem; margin-left: auto; margin-right: auto; }
.wrap-lg { max-width: 72rem; margin-left: auto; margin-right: auto; }
.wrap-xl { max-width: 80rem; margin-left: auto; margin-right: auto; }

.text-center { text-align: center; }
.muted { color: hsl(var(--muted-foreground)); }
.eyebrow {
	color: hsl(var(--primary));
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.875rem;
	margin-bottom: 1rem;
	display: block;
}

.eyebrow-gold { color: hsl(var(--secondary)); }

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

.skip-link:focus {
	background-color: hsl(var(--card));
	color: hsl(var(--primary));
	clip: auto;
	clip-path: none;
	display: block;
	font-weight: 700;
	height: auto;
	left: 1rem;
	padding: 0.75rem 1.25rem;
	top: 1rem;
	width: auto;
	z-index: 100000;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

/* Visible keyboard focus everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid hsl(var(--ring));
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------- Cards -- */
.card-elevated {
	border-radius: 0.75rem;
	border: 1px solid hsl(var(--border) / 0.5);
	background-color: hsl(var(--card));
	padding: 1.5rem;
	box-shadow: var(--shadow-lg);
	transition: var(--transition-base);
}

.card-subtle {
	border-radius: 0.75rem;
	border: 1px solid hsl(var(--border) / 0.2);
	background-color: hsl(var(--muted));
	padding: 1.5rem;
	transition: var(--transition-base);
}

.card-white {
	background: #fff;
	border-radius: 1rem;
	border: 1px solid hsl(var(--border) / 0.5);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

/* -------------------------------------------------------------- Buttons -- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.75rem;
	border-radius: var(--radius);
	border: 1px solid transparent;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: var(--transition-base);
	text-decoration: none;
}

.btn:hover { text-decoration: none; }

.btn-primary {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
	background-color: hsl(var(--primary) / 0.9);
}

.btn-secondary {
	background-color: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
}

.btn-secondary:hover {
	background-color: hsl(var(--secondary) / 0.9);
}

.btn-outline {
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

.btn-outline:hover {
	background-color: hsl(var(--primary-foreground) / 0.1);
}

.btn-block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ---------------------------------------------------------------- Forms -- */
.field { margin-bottom: 1.25rem; }

.field label,
.form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.375rem;
	color: hsl(var(--foreground));
}

.required-mark { color: hsl(var(--destructive)); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="password"],
.field select,
.field textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid hsl(var(--input));
	border-radius: var(--radius);
	background-color: #fff;
	color: hsl(var(--foreground));
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	transition: var(--transition-base);
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: hsl(var(--ring));
	outline: 3px solid hsl(var(--ring) / 0.35);
	outline-offset: 0;
}

.checkbox-row,
.radio-row {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-bottom: 0.5rem;
}

.checkbox-row input,
.radio-row input {
	margin-top: 0.25rem;
	width: 1rem;
	height: 1rem;
	accent-color: hsl(var(--primary));
	flex-shrink: 0;
}

.checkbox-row label,
.radio-row label {
	margin-bottom: 0;
	font-weight: 400;
	font-size: 0.9375rem;
	cursor: pointer;
}

.option-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1rem;
}

@media (min-width: 640px) {
	.option-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
}

fieldset legend {
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	padding: 0;
}

.form-section-title {
	font-size: 1.125rem;
	margin-bottom: 0.25rem;
}

.form-section-desc {
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
	margin-bottom: 1.25rem;
}

.honeypot-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-notice {
	padding: 1rem 1.25rem;
	border-radius: var(--radius);
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
}

.form-notice-success {
	background-color: hsl(140 45% 94%);
	border: 1px solid hsl(140 40% 70%);
	color: hsl(140 60% 22%);
}

.form-notice-error {
	background-color: hsl(0 80% 96%);
	border: 1px solid hsl(0 70% 80%);
	color: hsl(0 70% 32%);
}

.field-error {
	display: block;
	color: hsl(0 70% 32%);
	font-size: 0.8125rem;
	margin-top: 0.25rem;
}

.recaptcha-note {
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
	margin-top: 1rem;
}

/* --------------------------------------------------------------- Header -- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: hsl(var(--card) / 0.95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid hsl(var(--border));
}

.header-inner {
	max-width: 80rem;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 5.25rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
	.header-inner { min-height: 6rem; gap: 1.25rem; }
}

@media (min-width: 1100px) {
	.header-inner { min-height: 6.75rem; gap: 1.5rem; }
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	text-decoration: none;
	color: hsl(var(--foreground));
	padding: 0.5rem 0;
	min-width: 0; /* allow the name to wrap rather than push the nav */
}

.site-brand:hover { text-decoration: none; }

/*
 * Circular logo lockup.
 *
 * The artwork is square, so a 1:1 box with object-fit: contain shows it whole -
 * no saint, text or border of the original is cropped. Width/height attributes
 * are on the <img> so the browser reserves space and there is no layout shift.
 */
.site-logo,
.footer-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	background-color: hsl(var(--card));
	border: 2px solid hsl(var(--secondary) / 0.75);
	box-shadow: 0 2px 8px hsl(220 100% 10% / 0.18);
}

.site-logo img,
.footer-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
	display: block;
	padding: 3px;
}

/* Mobile first: ~60px */
.site-logo {
	width: 60px;
	height: 60px;
}

.site-brand-name {
	display: flex;
	flex-direction: column;
	line-height: 1.18;
	min-width: 0;
}

.site-brand-name .brand-line-1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: hsl(var(--primary));
	letter-spacing: -0.01em;
}

.site-brand-name .brand-line-2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.8125rem;
	color: hsl(var(--secondary));
	letter-spacing: 0.01em;
}

/* Tablet: ~72px */
@media (min-width: 768px) {
	.site-logo { width: 72px; height: 72px; }
	.site-brand-name .brand-line-1 { font-size: 1.0625rem; }
	.site-brand-name .brand-line-2 { font-size: 0.9375rem; }
}

/* Desktop: ~84px */
@media (min-width: 1100px) {
	.site-logo { width: 84px; height: 84px; }
	.site-brand-name .brand-line-1 { font-size: 1.1875rem; }
	.site-brand-name .brand-line-2 { font-size: 1rem; }
}

.primary-nav { display: none; }

@media (min-width: 1100px) {
	.primary-nav {
		display: flex;
		align-items: center;
		gap: 1.15rem;
		flex-shrink: 0;
	}
	.menu-toggle { display: none !important; }
}

.primary-nav a,
.primary-nav .dropdown-toggle {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: hsl(var(--foreground));
	background: none;
	border: 0;
	padding: 0.5rem 0;
	cursor: pointer;
	transition: var(--transition-base);
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	text-decoration: none;
}

.primary-nav a:hover,
.primary-nav .dropdown-toggle:hover {
	color: hsl(var(--primary));
	text-decoration: none;
}

.primary-nav a.is-current,
.primary-nav .dropdown-toggle.is-current {
	color: hsl(var(--primary));
	font-weight: 600;
}

.nav-dropdown { position: relative; }

.dropdown-toggle .chevron {
	transition: transform 0.2s ease;
}

.dropdown-toggle[aria-expanded="true"] .chevron {
	transform: rotate(180deg);
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 15rem;
	background-color: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: 0.75rem;
	box-shadow: var(--shadow-lg);
	padding: 0.5rem 0;
	margin: 0;
	list-style: none;
	display: none;
	z-index: 60;
}

.nav-dropdown.is-open .dropdown-menu { display: block; }

.dropdown-menu li { margin: 0; }

.dropdown-menu a {
	display: block;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	width: 100%;
}

.dropdown-menu a:hover {
	background-color: hsl(var(--muted));
}

.dropdown-menu a.is-current {
	background-color: hsl(var(--primary) / 0.05);
	color: hsl(var(--primary));
	font-weight: 500;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: transparent;
	color: hsl(var(--foreground));
	cursor: pointer;
}

.mobile-nav {
	display: none;
	border-top: 1px solid hsl(var(--border));
	background-color: hsl(var(--card));
	padding: 0.75rem 0 1.25rem;
}

.mobile-nav.is-open { display: block; }

@media (min-width: 1100px) {
	.mobile-nav,
	.mobile-nav.is-open { display: none; }
}

.mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 80rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mobile-nav a {
	display: block;
	padding: 0.625rem 1rem;
	border-radius: var(--radius);
	font-weight: 500;
	color: hsl(var(--foreground));
}

.mobile-nav a:hover {
	background-color: hsl(var(--muted));
	text-decoration: none;
}

.mobile-nav a.is-current {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.mobile-nav .sub a { padding-left: 2rem; font-size: 0.9375rem; }

/* --------------------------------------------------------------- Footer -- */
.site-footer {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	padding-top: 4rem;
}

.site-footer a {
	color: hsl(var(--primary-foreground));
	opacity: 0.9;
}

.site-footer a:hover { opacity: 1; }

.footer-grid {
	max-width: 80rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
}

@media (min-width: 768px) {
	.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	/*
	 * Three columns, not four: brand, quick links, newsletter. The middle
	 * track is the widest because it carries two lists side by side, and
	 * "Coptic Orthodox Church" has to sit on one line inside half of it.
	 */
	.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }

	/*
	 * Quick links as two columns under one heading. grid-auto-flow: column
	 * with three explicit rows fills top-to-bottom then across, so the first
	 * three links stay together on the left and the last three on the right -
	 * a plain two-column grid would interleave them instead.
	 *
	 * Selector carries .footer-col too: `.footer-col ul` above sets
	 * flex-direction, and a lone class would lose to it on specificity.
	 */
	.footer-col ul.footer-links-split {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		column-gap: 2rem;
	}
}

.footer-col h2,
.footer-col h3 {
	color: hsl(var(--primary-foreground));
	font-size: 1.0625rem;
	margin-bottom: 1rem;
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.footer-logo {
	width: 96px;
	height: 96px;
	background-color: hsl(var(--primary-foreground) / 0.96);
	border-color: hsl(var(--secondary));
}

.footer-brand-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
	margin: 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.footer-brand-title .brand-line-2 {
	color: hsl(var(--secondary));
	font-weight: 600;
	font-size: 0.9375rem;
}

.footer-col p {
	font-size: 0.9375rem;
	opacity: 0.9;
	line-height: 1.6;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/*
 * Footer navigation links were 20px tall, under the 24px minimum. Giving them
 * a 44px minimum height and centring the text makes each one a comfortable
 * target on a phone; the list gap shrinks to compensate so the footer keeps
 * roughly the height it had.
 */
.footer-col ul a {
	font-size: 0.9375rem;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.footer-bottom {
	border-top: 1px solid hsl(var(--primary-foreground) / 0.2);
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}

.footer-bottom-inner {
	max-width: 80rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
}

/* Privacy and Terms sat at 22px; same treatment as the column links. */
.footer-bottom-inner a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.25rem;
}

@media (min-width: 768px) {
	.footer-bottom-inner { flex-direction: row; }
}

.social-links {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.social-links a {
	padding: 0.5rem;
	border-radius: var(--radius);
	display: inline-flex;
	transition: var(--transition-base);
}

.social-links a:hover {
	background-color: hsl(var(--primary-foreground) / 0.1);
}

.footer-legal {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.875rem;
	opacity: 0.9;
}

.footer-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.footer-newsletter-form input[type="email"] {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius);
	border: 1px solid hsl(var(--primary-foreground) / 0.3);
	background-color: hsl(var(--primary-foreground) / 0.1);
	color: hsl(var(--primary-foreground));
	font-family: var(--font-body);
	font-size: 0.9375rem;
}

.footer-newsletter-form input[type="email"]::placeholder {
	color: hsl(var(--primary-foreground) / 0.6);
}

/* ------------------------------------------------ Subscribe (double opt-in) --
 * One form, two shapes. The footer variant is compact and sits on the dark
 * navy ground; the page variant is roomier and sits on the light ground. Both
 * carry the same fields, so they share everything except layout.
 * -------------------------------------------------------------------------- */
.smcc-subscribe {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.smcc-subscribe .smcc-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

.smcc-subscribe .smcc-field label {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.smcc-subscribe input[type="email"],
.smcc-subscribe input[type="text"] {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.4;
}

.smcc-subscribe .smcc-inline-controls {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

@media (min-width: 480px) {
	.smcc-subscribe .smcc-inline-controls { flex-direction: row; }
	.smcc-subscribe .smcc-inline-controls input[type="email"] { flex: 1 1 auto; min-width: 0; }
	.smcc-subscribe .smcc-inline-controls .smcc-btn { flex: 0 0 auto; }
}

.smcc-subscribe .smcc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: var(--radius);
	background-color: hsl(var(--accent));
	color: hsl(var(--accent-foreground));
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
	white-space: nowrap;
}

.smcc-subscribe .smcc-btn:hover { background-color: hsl(var(--accent) / 0.88); }
.smcc-subscribe .smcc-btn:active { transform: translateY(1px); }

.smcc-subscribe .smcc-quiet {
	margin: 0;
	font-size: 0.78125rem;
	line-height: 1.5;
	opacity: 0.78;
}

.smcc-subscribe .smcc-notice {
	margin: 0;
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius);
	font-size: 0.84rem;
	line-height: 1.45;
}

/* The honeypot is kept off-screen rather than display:none, so a bot that
 * fills every field still finds it, while nobody using the page ever does. */
.smcc-subscribe .smcc-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- footer variant: dark navy ground --- */
.smcc-subscribe--footer .smcc-field label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.smcc-subscribe--footer input[type="email"],
.smcc-subscribe--footer input[type="text"] {
	border: 1px solid hsl(var(--primary-foreground) / 0.3);
	background-color: hsl(var(--primary-foreground) / 0.1);
	color: hsl(var(--primary-foreground));
}

.smcc-subscribe--footer input::placeholder {
	color: hsl(var(--primary-foreground) / 0.6);
}

.smcc-subscribe--footer input:focus-visible {
	outline: 2px solid hsl(var(--accent));
	outline-offset: 2px;
	background-color: hsl(var(--primary-foreground) / 0.16);
}

.smcc-subscribe--footer .smcc-btn:focus-visible {
	outline: 2px solid hsl(var(--primary-foreground));
	outline-offset: 2px;
}

.smcc-subscribe--footer .smcc-quiet { color: hsl(var(--primary-foreground) / 0.75); }

.smcc-subscribe--footer .smcc-notice-ok {
	background-color: hsl(var(--primary-foreground) / 0.14);
	color: hsl(var(--primary-foreground));
	border-left: 3px solid hsl(var(--accent));
}

.smcc-subscribe--footer .smcc-notice-error {
	background-color: hsl(var(--primary-foreground) / 0.14);
	color: hsl(var(--primary-foreground));
	border-left: 3px solid hsl(var(--primary-foreground) / 0.6);
}

/* --- page variant: light ground --- */
.smcc-subscribe--page {
	max-width: 32rem;
}

.smcc-subscribe--page input[type="email"],
.smcc-subscribe--page input[type="text"] {
	border: 1px solid hsl(var(--border));
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
}

.smcc-subscribe--page input:focus-visible {
	outline: 2px solid hsl(var(--accent));
	outline-offset: 2px;
	border-color: hsl(var(--accent));
}

.smcc-subscribe--page .smcc-btn:focus-visible {
	outline: 2px solid hsl(var(--foreground));
	outline-offset: 2px;
}

.smcc-subscribe--page .smcc-quiet { color: hsl(var(--muted-foreground)); }

.smcc-subscribe--page .smcc-notice-ok {
	background-color: hsl(var(--muted));
	color: hsl(var(--foreground));
	border-left: 3px solid hsl(var(--accent));
}

.smcc-subscribe--page .smcc-notice-error {
	background-color: hsl(var(--muted));
	color: hsl(var(--foreground));
	border-left: 3px solid hsl(var(--destructive, var(--foreground)));
}

@media (prefers-reduced-motion: reduce) {
	.smcc-subscribe .smcc-btn { transition: none; }
}

/* -------------------------------------------------------- Page sections -- */
.page-hero {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	padding: 5rem 0;
	position: relative;
	overflow: hidden;
	text-align: center;
}

@media (min-width: 768px) {
	.page-hero { padding: 8rem 0; }
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.1;
	background: radial-gradient(circle at center, hsl(var(--secondary)), hsl(var(--primary)) 70%);
	pointer-events: none;
}

.page-hero > * { position: relative; z-index: 1; }

.page-hero h1 { color: #fff; margin-bottom: 1.5rem; }

.page-hero .eyebrow { color: hsl(var(--secondary)); }

.page-hero p {
	font-size: 1.25rem;
	line-height: 1.6;
	color: hsl(0 0% 100% / 0.9);
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.page-hero p { font-size: 1.5rem; }
}

.section-muted { background-color: hsl(var(--muted)); }
.section-bg { background-color: hsl(var(--background)); }
.section-primary {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.section-primary h2,
.section-primary h3 { color: hsl(var(--primary-foreground)); }

/* ------------------------------------------------------- Home: carousel -- */
.home-hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: #0a0a0a;
	color: #fff;
	text-align: center;
}

.hero-carousel {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.hero-slide.is-active { opacity: 1; }

.hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay keeps hero text at WCAG AA contrast over every slide. */
.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		hsl(220 100% 10% / 0.72),
		hsl(220 100% 10% / 0.62) 50%,
		hsl(220 100% 10% / 0.78)
	);
}

.home-hero-content {
	position: relative;
	z-index: 10;
	max-width: 56rem;
	margin: 0 auto;
	padding-top: 6rem;
	padding-bottom: 6rem;
}

.home-hero-content h1 {
	color: #fff;
	margin-bottom: 1.5rem;
	text-shadow: 0 2px 12px hsl(220 100% 8% / 0.6);
}

.home-hero-content h1 .line-gold {
	display: block;
	color: hsl(var(--secondary));
}

.home-hero-content p {
	font-size: 1.25rem;
	color: hsl(0 0% 100% / 0.92);
	margin-bottom: 2.5rem;
	text-shadow: 0 1px 8px hsl(220 100% 8% / 0.6);
}

@media (min-width: 768px) {
	.home-hero-content p { font-size: 1.5rem; }
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
	width: 3rem;
	height: 3rem;
	border-radius: 9999px;
	border: 1px solid hsl(0 0% 100% / 0.35);
	background-color: hsl(220 100% 10% / 0.5);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--transition-base);
}

.carousel-btn:hover { background-color: hsl(220 100% 10% / 0.8); }

.carousel-prev { left: 1rem; }
.carousel-next { right: 1rem; }

.carousel-indicators {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	/*
	 * No gap. The buttons are 44px wide and carry their own breathing room,
	 * so a gap here would only push the row wider without making anything
	 * easier to hit.
	 */
	gap: 0;
}

/*
 * The dot people see is 12px. The control they press is 44px square.
 * Previously they were the same 12px element, which is under the 24px in
 * WCAG 2.5.8 and, with a 10px gap, close enough to its neighbours that the
 * spacing exception did not rescue it either. The button is now the target
 * and the dot is drawn inside it, so the hero looks unchanged and the row
 * still fits comfortably on a 375px screen.
 */
.carousel-indicators button {
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
}

.carousel-indicators button::before {
	content: "";
	display: block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 9999px;
	border: 1px solid hsl(0 0% 100% / 0.7);
	background-color: hsl(0 0% 100% / 0.35);
	transition: var(--transition-base);
}

.carousel-indicators button[aria-current="true"]::before {
	background-color: hsl(var(--secondary));
	border-color: hsl(var(--secondary));
	width: 2rem;
}

/* Home: vision + priest video */
.vision-statement {
	font-family: var(--font-display);
	font-size: 1.875rem;
	line-height: 1.3;
	font-weight: 500;
	text-align: center;
	color: hsl(var(--foreground));
	max-width: 56rem;
	margin: 0 auto;
}

@media (min-width: 768px) { .vision-statement { font-size: 2.25rem; } }
@media (min-width: 1024px) { .vision-statement { font-size: 3rem; } }

.priest-card {
	background-color: hsl(var(--card));
	border-radius: 1.5rem;
	box-shadow: var(--shadow-xl);
	padding: 2rem;
}

@media (min-width: 768px) { .priest-card { padding: 3rem; } }

.priest-card .rule {
	width: 6rem;
	height: 0.25rem;
	background-color: hsl(var(--primary));
	margin: 0 auto 2.5rem;
	border-radius: 9999px;
}

.video-frame {
	aspect-ratio: 16 / 9;
	background-color: #000;
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: 2.5rem;
	box-shadow: var(--shadow-lg);
}

.video-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.priest-quote {
	font-size: 1.25rem;
	line-height: 1.7;
	color: hsl(var(--muted-foreground));
	font-style: italic;
	margin-bottom: 1.5rem;
}

.priest-attribution {
	font-weight: 600;
	color: hsl(var(--foreground));
}

/* --------------------------------------------------------------- Grids -- */
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
	.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.flow > * + * { margin-top: 1.5rem; }

/* --------------------------------------------------------- Coptic page -- */
.split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 768px) {
	.split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.split.reverse .split-media { order: 2; }
}

.split-media img {
	border-radius: 1rem;
	box-shadow: var(--shadow-xl);
	width: 100%;
	object-fit: cover;
}

.portrait-img {
	border-radius: 1rem;
	box-shadow: var(--shadow-xl);
	width: 100%;
	max-height: 32rem;
	object-fit: cover;
	object-position: center top;
}

/* -------------------------------------------------------- History page -- */
.timeline {
	position: relative;
	max-width: 72rem;
	margin: 0 auto;
	list-style: none;
	padding: 0;
}

.timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 2.25rem;
	width: 2px;
	background-color: hsl(var(--border));
}

@media (min-width: 768px) {
	.timeline::before { left: 50%; transform: translateX(-50%); }
}

.timeline-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin-bottom: 3rem;
}

.timeline-marker {
	position: absolute;
	left: 0;
	top: 0;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 9999px;
	background-color: hsl(var(--primary));
	color: hsl(var(--secondary));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	box-shadow: var(--shadow-lg);
	border: 4px solid hsl(var(--background));
	z-index: 2;
}

@media (min-width: 768px) {
	.timeline-marker { left: 50%; transform: translateX(-50%); }
}

.timeline-body {
	margin-left: 6rem;
	width: 100%;
}

@media (min-width: 768px) {
	.timeline-body { margin-left: 0; width: 50%; padding-right: 4rem; }
	.timeline-item.is-right .timeline-body {
		margin-left: 50%;
		padding-right: 0;
		padding-left: 4rem;
	}
}

.timeline-body h3 { margin-bottom: 0.5rem; }

.timeline-body .year-label {
	color: hsl(var(--secondary));
	font-weight: 700;
	letter-spacing: 0.08em;
	font-size: 0.875rem;
	display: block;
	margin-bottom: 0.25rem;
}

/* --------------------------------------------------------- Clergy page -- */
.clergy-card {
	background-color: hsl(var(--card));
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 1px solid hsl(var(--border) / 0.5);
	display: flex;
	flex-direction: column;
}

.clergy-photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: hsl(var(--muted));
}

.clergy-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(20%);
	transition: filter 0.5s ease;
}

.clergy-card:hover .clergy-photo img { filter: grayscale(0); }

.clergy-body { padding: 1.5rem; }

.clergy-body h2 { margin-bottom: 0.25rem; font-size: 1.375rem; }

.clergy-role {
	color: hsl(var(--secondary));
	font-weight: 600;
	font-size: 0.9375rem;
	margin-bottom: 1rem;
}

.clergy-contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.9375rem;
}

.clergy-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	word-break: break-word;
}

/* ------------------------------------------------------- Services page -- */
.services-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.services-layout { grid-template-columns: 2fr 1fr; }
}

.panel {
	background: #fff;
	border-radius: 1rem;
	box-shadow: var(--shadow-lg);
	border: 1px solid hsl(var(--border) / 0.5);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.panel-head {
	padding: 2rem;
	border-bottom: 1px solid hsl(var(--border) / 0.5);
	background-color: hsl(var(--muted) / 0.3);
}

.panel-head h2 { color: hsl(var(--primary)); margin: 0 0 0.75rem; }

.panel-head p {
	color: hsl(var(--muted-foreground));
	line-height: 1.6;
	margin: 0;
	max-width: 42rem;
}

.panel-body { padding: 2rem; flex: 1; }

.icon-badge {
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background-color: hsl(var(--primary) / 0.1);
	color: hsl(var(--primary));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 1rem;
}

.panel-head-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.panel-head-row .icon-badge { margin-bottom: 0; }

.list-tile {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	border-radius: 0.75rem;
	background-color: hsl(var(--muted) / 0.5);
	transition: var(--transition-base);
}

.list-tile:hover { background-color: hsl(var(--muted)); }

.list-tile h4 { margin: 0 0 0.25rem; font-size: 1rem; }

.list-tile p {
	margin: 0;
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
}

.tile-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 640px) {
	.tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.info-box {
	background-color: hsl(var(--accent) / 0.5);
	border-radius: 0.75rem;
	padding: 1.25rem;
	margin-top: 1.5rem;
}

.info-box h4 { margin: 0 0 0.5rem; }

.info-box p { margin: 0; font-size: 0.9375rem; }

/* --------------------------------------------------- Ministries + FAQ -- */
.ministry-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ministry-card h2 { margin-bottom: 0.75rem; }

.ministry-card > p {
	font-size: 0.875rem;
	line-height: 1.7;
	margin-bottom: 1rem;
	flex: 1;
	color: hsl(var(--muted-foreground));
}

.ministry-expect {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid hsl(var(--border));
}

.ministry-expect .label {
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.ministry-expect .value {
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
	line-height: 1.6;
	margin: 0;
}

.accordion { display: flex; flex-direction: column; gap: 1rem; }

.accordion-item {
	border-radius: 0.75rem;
	border: 1px solid hsl(var(--border) / 0.2);
	background-color: hsl(var(--muted));
	overflow: hidden;
}

.accordion-trigger {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: none;
	border: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	text-align: left;
	cursor: pointer;
}

.accordion-trigger:hover { text-decoration: underline; }

.accordion-trigger .chevron { transition: transform 0.2s ease; flex-shrink: 0; }

.accordion-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.accordion-panel { padding: 0 1.5rem 1.25rem; }

.accordion-panel p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: hsl(var(--muted-foreground));
}

.accordion-panel[hidden] { display: none; }

/* --------------------------------------------------------- Donate page -- */
.donate-block {
	margin-top: 2rem;
	padding: 1.5rem;
	background-color: hsl(var(--muted));
	border-radius: 0.75rem;
}

.donate-block h3 { margin-bottom: 0.75rem; }

.donate-block p { font-size: 0.875rem; line-height: 1.7; }

.bank-lines p { margin: 0 0 0.5rem; font-size: 0.875rem; }
.bank-lines .font-medium { font-weight: 600; }

.icon-row {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.icon-row .icon-wrap {
	flex-shrink: 0;
	padding: 0.75rem;
	background-color: hsl(var(--accent) / 0.5);
	border-radius: 0.75rem;
	height: fit-content;
	color: hsl(var(--primary));
	display: inline-flex;
}

.icon-row h3 { margin-bottom: 0.5rem; }

.icon-row p {
	font-size: 0.875rem;
	line-height: 1.7;
	color: hsl(var(--muted-foreground));
	margin: 0;
}

/* -------------------------------------------------------- Contact page -- */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.contact-layout { grid-template-columns: 1fr 1fr; }
}

.contact-detail {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.contact-detail .icon-wrap {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background-color: hsl(var(--primary) / 0.1);
	color: hsl(var(--primary));
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.contact-detail h3 { margin: 0 0 0.375rem; font-size: 1.0625rem; }

.contact-detail p,
.contact-detail address {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: hsl(var(--muted-foreground));
	font-style: normal;
}

.map-frame {
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	margin-top: 2rem;
	aspect-ratio: 4 / 3;
	background-color: hsl(var(--muted));
}

.map-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* -------------------------------------------------------- Gallery page -- */
/*
 * Two layers. An index of album cards, then a section per album holding its
 * photographs. Both are ordinary documents: the cards are anchors to the
 * sections and each photograph is an anchor to its own file, so nothing here
 * depends on the viewer script having loaded.
 */

.album-index { margin-bottom: 3.5rem; }

.album-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.album-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: hsl(var(--card));
	border: 1px solid hsl(var(--border) / 0.6);
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.album-card:hover,
.album-card:focus-visible {
	box-shadow: var(--shadow-xl);
	transform: translateY(-3px);
}

.album-card:focus-visible {
	outline: 3px solid hsl(var(--ring));
	outline-offset: 3px;
}

.album-card__cover {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: hsl(var(--muted));
}

.album-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.album-card:hover .album-card__cover img { transform: scale(1.04); }

.album-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.125rem 1.125rem;
}

.album-card__title {
	font-family: var(--font-display);
	font-size: 1.1875rem;
	line-height: 1.3;
	color: hsl(var(--primary));
}

.album-card__count {
	font-size: 0.8125rem;
	color: hsl(var(--muted-foreground));
}

/* ---------------------------------------------------------- One album -- */

.album {
	padding-top: 1rem;
	margin-bottom: 3.5rem;
	scroll-margin-top: 6rem;
}

.album:focus { outline: none; }

.album:target .album__head h2 {
	text-decoration: underline;
	text-decoration-color: hsl(var(--secondary));
	text-underline-offset: 6px;
	text-decoration-thickness: 3px;
}

.album__head { margin-bottom: 1.25rem; }

.album__head h2 {
	font-size: 1.5rem;
	margin: 0 0 0.35rem;
	color: hsl(var(--primary));
}

.album__excerpt {
	font-size: 0.9375rem;
	color: hsl(var(--muted-foreground));
	margin: 0 0 0.35rem;
	max-width: 60ch;
}

.album__count {
	font-size: 0.8125rem;
	color: hsl(var(--muted-foreground));
	margin: 0;
}

.empty-state {
	text-align: center;
	padding: 4rem 1rem;
}

.empty-state h2 { margin-bottom: 0.5rem; }

.empty-state p { color: hsl(var(--muted-foreground)); margin: 0; }

/* --------------------------------------------------------- Photo grid -- */

.photo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}

@media (min-width: 1024px) {
	.photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.photo-grid figure {
	margin: 0;
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: hsl(var(--muted));
	box-shadow: var(--shadow-sm);
	height: 100%;
}

.photo-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.photo-grid figcaption {
	font-size: 0.8125rem;
	color: hsl(var(--muted-foreground));
	padding: 0.5rem 0.75rem;
}

/* --------------------------------------------------------- The viewer -- */
/*
 * Built by theme.js and appended only once a photograph is opened, so a page
 * with no JavaScript carries none of this markup and every photograph stays a
 * plain link to its own file.
 */

.smc-viewer[hidden] { display: none !important; }

.smc-viewer {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	/* Navy rather than black: the scrim belongs to the parish palette. */
	background-color: hsl(220 60% 6% / 0.96);
	backdrop-filter: blur(6px);
}

.smc-viewer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	color: hsl(30 20% 96%);
	flex: 0 0 auto;
}

.smc-viewer__meta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.smc-viewer__album {
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.smc-viewer__count {
	font-size: 0.8125rem;
	color: hsl(38 60% 70%);
	font-variant-numeric: tabular-nums;
}

.smc-viewer__stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0 0.5rem;
	min-height: 0;
}

.smc-viewer__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 0.35rem;
	box-shadow: 0 24px 60px rgb(0 0 0 / 0.5);
}

.smc-viewer__caption {
	flex: 0 0 auto;
	text-align: center;
	color: hsl(30 20% 88%);
	font-size: 0.875rem;
	padding: 0.75rem 1.25rem 1rem;
	max-width: 70ch;
	margin: 0 auto;
	min-height: 1rem;
}

/* Controls. 48px square everywhere, which clears the 44px minimum with room
   for the focus ring to sit outside the button rather than on top of it. */
.smc-viewer__btn {
	appearance: none;
	border: 1px solid hsl(30 20% 96% / 0.25);
	background-color: hsl(220 60% 10% / 0.7);
	color: hsl(30 20% 96%);
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.smc-viewer__btn:hover:not(:disabled) {
	background-color: hsl(38 60% 50% / 0.85);
	border-color: hsl(38 60% 60%);
}

.smc-viewer__btn:focus-visible {
	outline: 3px solid hsl(38 60% 60%);
	outline-offset: 3px;
}

.smc-viewer__btn:disabled { opacity: 0.35; cursor: default; }

.smc-viewer__btn svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }

.smc-viewer__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.smc-viewer__nav--prev { left: 0.5rem; }
.smc-viewer__nav--next { right: 0.5rem; }

@media (min-width: 768px) {
	.smc-viewer__nav--prev { left: 1.5rem; }
	.smc-viewer__nav--next { right: 1.5rem; }
	.smc-viewer__btn { width: 52px; height: 52px; }
}

.smc-viewer__loading {
	position: absolute;
	color: hsl(30 20% 88%);
	font-size: 0.875rem;
}

body.smc-viewer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.album-card,
	.album-card__cover img,
	.smc-viewer__btn { transition: none; }
	.album-card:hover { transform: none; }
	.album-card:hover .album-card__cover img { transform: none; }
}

/* ------------------------------------------------- Legal / prose pages -- */
.legal-page { padding: 3rem 0 5rem; }

.legal-inner { max-width: 48rem; margin: 0 auto; }

.legal-back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.9375rem;
	margin-bottom: 2rem;
}

.legal-updated {
	color: hsl(var(--muted-foreground));
	font-size: 0.9375rem;
	margin-bottom: 2.5rem;
}

.legal-section { margin-bottom: 2.5rem; }

.legal-section h2 {
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid hsl(var(--border));
}

.legal-section h3 { font-size: 1.125rem; margin: 1.5rem 0 0.75rem; }

.legal-section p,
.legal-section li {
	color: hsl(var(--muted-foreground));
	line-height: 1.75;
}

.legal-section ul { padding-left: 1.25rem; margin: 0 0 1rem; }

.legal-section li { margin-bottom: 0.5rem; }

/* ------------------------------------------------- Status / 404 states -- */
.status-page {
	padding: 5rem 0;
	text-align: center;
}

.status-icon {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.status-icon-success {
	background-color: hsl(140 45% 92%);
	color: hsl(140 60% 28%);
}

.status-icon-error {
	background-color: hsl(0 80% 95%);
	color: hsl(0 65% 40%);
}

.status-icon-info {
	background-color: hsl(var(--accent));
	color: hsl(var(--primary));
}

.status-page p { color: hsl(var(--muted-foreground)); max-width: 34rem; margin: 0 auto 1rem; }

.status-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 2rem;
}

/* --------------------------------------------------------- Newsletter -- */
.newsletter-inline {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 32rem;
	margin: 0 auto;
}

@media (min-width: 640px) {
	.newsletter-inline { flex-direction: row; }
	.newsletter-inline input[type="email"] { flex: 1; }
}

.newsletter-inline input[type="email"] {
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	border: 1px solid hsl(var(--primary-foreground) / 0.3);
	background-color: hsl(var(--primary-foreground) / 0.1);
	color: hsl(var(--primary-foreground));
	font-family: var(--font-body);
	font-size: 1rem;
}

.newsletter-inline input[type="email"]::placeholder {
	color: hsl(var(--primary-foreground) / 0.6);
}


/* ------------------------------------ Suggestions & Complaints CTA -- */
/*
 * Header call-to-action. Gold on navy, rounded, with distinct hover, active
 * and keyboard-focus states. Hidden below the desktop breakpoint so the nav
 * cannot overflow; the mobile menu carries its own copy.
 */
.btn-cta {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.125rem;
	border-radius: 9999px;
	background-color: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	box-shadow: 0 1px 2px hsl(220 100% 10% / 0.15);
	transition: var(--transition-base);
}

.btn-cta svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.btn-cta:hover {
	background-color: hsl(38 60% 44%);
	color: hsl(var(--secondary-foreground));
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px hsl(220 100% 10% / 0.22);
}

.btn-cta:active {
	transform: translateY(0);
	background-color: hsl(38 60% 40%);
	box-shadow: 0 1px 2px hsl(220 100% 10% / 0.2);
}

.btn-cta:focus-visible {
	outline: 3px solid hsl(var(--primary));
	outline-offset: 2px;
}

.btn-cta.is-current {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	box-shadow: inset 0 0 0 2px hsl(var(--secondary));
}

/* Show the header CTA only where there is room for it. */
@media (min-width: 1100px) {
	.btn-cta.header-cta { display: inline-flex; }
}

/* Narrower desktop widths: drop the icon label padding a little. */
@media (min-width: 1100px) and (max-width: 1279px) {
	.btn-cta.header-cta {
		padding: 0.5rem 0.875rem;
		font-size: 0.8125rem;
	}
}

/* Mobile menu CTA */
.mobile-nav .mobile-cta {
	margin-top: 0.75rem;
	padding: 0 1rem;
}

.btn-cta.mobile-cta-button {
	display: inline-flex;
	width: 100%;
	justify-content: center;
	padding: 0.875rem 1.25rem;
	font-size: 0.9375rem;
}

/* ----------------------------------- Footer feedback CTA banner ----- */
.feedback-cta-band {
	background-color: hsl(var(--background));
	padding: 3rem 0;
}

.feedback-cta-card {
	background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(220 100% 12%) 100%);
	border: 1px solid hsl(var(--secondary) / 0.35);
	border-radius: 1.25rem;
	padding: 2rem;
	box-shadow: var(--shadow-xl);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

@media (min-width: 768px) {
	.feedback-cta-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 2.5rem 3rem;
	}
}

.feedback-cta-copy h2 {
	color: hsl(var(--secondary));
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

@media (min-width: 768px) {
	.feedback-cta-copy h2 { font-size: 1.75rem; }
}

.feedback-cta-copy p {
	color: hsl(var(--primary-foreground) / 0.9);
	margin: 0;
	max-width: 42rem;
	line-height: 1.6;
}

.feedback-cta-action { flex-shrink: 0; }

.feedback-cta-action .btn {
	border-radius: 9999px;
	padding: 0.875rem 1.75rem;
}

/* ------------------------------------- Suggestions & Complaints page -- */
.feedback-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1024px) {
	.feedback-layout { grid-template-columns: 22rem 1fr; }
}

.feedback-aside h2 { margin-bottom: 1.5rem; }

.assurance {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.assurance .icon-wrap {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background-color: hsl(var(--primary) / 0.1);
	color: hsl(var(--primary));
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.assurance h3 { margin: 0 0 0.375rem; font-size: 1.0625rem; }

.assurance p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: hsl(var(--muted-foreground));
}

.feedback-form fieldset { margin-bottom: 1.5rem; }

.type-choice {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}

@media (min-width: 480px) {
	.type-choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.type-choice .radio-row {
	margin: 0;
	padding: 0.875rem 1rem;
	border: 1px solid hsl(var(--border));
	border-radius: 0.75rem;
	background-color: hsl(var(--card));
	transition: var(--transition-base);
}

.type-choice .radio-row:hover { border-color: hsl(var(--secondary)); }

.type-choice .radio-row:focus-within {
	border-color: hsl(var(--ring));
	box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3);
}

.type-choice label { font-weight: 600; }

.anon-toggle {
	background-color: hsl(var(--accent) / 0.45);
	border: 1px solid hsl(var(--secondary) / 0.3);
	border-radius: 0.75rem;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.anon-toggle .checkbox-row { margin-bottom: 0; }

.anon-toggle label { font-size: 0.9375rem; line-height: 1.6; }

.field-hint {
	display: block;
	font-size: 0.8125rem;
	color: hsl(var(--muted-foreground));
	margin-top: 0.375rem;
}

.feedback-success {
	text-align: center;
	padding: 1.5rem 0;
}

.feedback-success h2 { margin-bottom: 0.75rem; }

.feedback-success p {
	color: hsl(var(--muted-foreground));
	max-width: 34rem;
	margin: 0 auto 1rem;
	line-height: 1.7;
}


/* ==================================================== Service schedule == */
/*
 * The live schedule on the services page. Uses the theme's existing tokens -
 * navy --primary, gold --secondary, warm --card - so it reads as part of the
 * site rather than as a plugin bolted onto it.
 */

.smc-schedule-section {
	background:
		radial-gradient(circle at 12% 0%, hsl(var(--accent) / 0.55), transparent 42%),
		hsl(var(--background));
}

.smc-schedule-header {
	text-align: center;
	max-width: 42rem;
	margin: 0 auto 2.25rem;
}

/*
 * The detailed Coptic cross ornament.
 *
 * One asset, sized in rem/vw rather than pixels so the Coptic inscription
 * stays legible on a phone as well as a desktop. object-fit: contain keeps the
 * whole artwork visible whatever box it lands in, and height: auto against the
 * intrinsic 512x505 means it can never be stretched.
 */
.smc-coptic-cross {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.smc-coptic-cross img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

.smc-schedule-ornament {
	display: inline-flex;
	margin-bottom: 0.5rem;
}

.smc-schedule-ornament .smc-coptic-cross {
	width: clamp(5.5rem, 14vw, 6.5rem);
}

.smc-eyebrow {
	margin: 0 0 0.4rem;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: hsl(var(--secondary));
}

.smc-schedule-header h2 {
	margin: 0 0 0.6rem;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 4.4vw, 2.7rem);
	line-height: 1.15;
	color: hsl(var(--primary));
	text-wrap: balance;
}

.smc-schedule-lede {
	margin: 0;
	color: hsl(var(--muted-foreground));
	line-height: 1.7;
}

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

.smc-schedule-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 1rem;
	margin-bottom: 1.75rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.smc-view-switch {
	display: inline-flex;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	overflow: hidden;
	background: hsl(var(--background));
}

.smc-view-btn {
	padding: 0.5rem 1.05rem;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	color: hsl(var(--foreground));
	border-right: 1px solid hsl(var(--border));
	transition: var(--transition-base);
}

.smc-view-btn:last-child { border-right: 0; }

.smc-view-btn:hover {
	background: hsl(var(--accent));
}

.smc-view-btn.is-active {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.smc-schedule-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
}

.smc-schedule-filter label {
	font-size: 0.85rem;
	font-weight: 600;
	color: hsl(var(--muted-foreground));
}

.smc-schedule-filter select {
	padding: 0.45rem 0.6rem;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-size: 0.9rem;
	font-family: inherit;
	max-width: 14rem;
}

.smc-schedule-apply {
	padding: 0.45rem 0.9rem;
	border: 1px solid hsl(var(--primary));
	border-radius: var(--radius);
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	font-size: 0.85rem;
	font-family: inherit;
	cursor: pointer;
}

.smc-schedule-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.smc-schedule-action {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.5rem 0.9rem;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--background));
	color: hsl(var(--primary));
	font-size: 0.85rem;
	font-family: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: var(--transition-base);
}

.smc-schedule-action:hover {
	background: hsl(var(--accent));
	border-color: hsl(var(--secondary));
}

.smc-schedule-action svg {
	width: 16px;
	height: 16px;
}

/* Focus is never removed, only restyled to the gold ring. */
.smc-view-btn:focus-visible,
.smc-schedule-action:focus-visible,
.smc-schedule-apply:focus-visible,
.smc-schedule-filter select:focus-visible,
.smc-period-btn:focus-visible {
	outline: 2px solid hsl(var(--secondary));
	outline-offset: 2px;
}

/* -------------------------------------------------------- Period nav -- */

.smc-period-nav {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.smc-period-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid hsl(var(--border));
	border-radius: 50%;
	background: hsl(var(--card));
	color: hsl(var(--primary));
	text-decoration: none;
	transition: var(--transition-base);
}

.smc-period-btn:hover {
	background: hsl(var(--accent));
	border-color: hsl(var(--secondary));
}

.smc-period-btn svg { width: 18px; height: 18px; }

.smc-period-label {
	margin: 0;
	min-width: 12rem;
	text-align: center;
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: hsl(var(--primary));
}

/* ------------------------------------------------------------ List view -- */

.smc-schedule-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.smc-day {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: 1.25rem;
	padding: 1.25rem 1.4rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.smc-day.is-today {
	border-color: hsl(var(--secondary));
	box-shadow: inset 3px 0 0 hsl(var(--secondary)), var(--shadow-sm);
}

.smc-day-head {
	border-right: 1px solid hsl(var(--border));
	padding-right: 1.25rem;
}

.smc-day-weekday {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: hsl(var(--secondary));
}

.smc-day-date {
	margin: 0.15rem 0 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1.2;
	color: hsl(var(--primary));
	font-variant-numeric: tabular-nums;
}

.smc-today-flag {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: hsl(var(--secondary));
}

.smc-day-services {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

/* -------------------------------------------------------------- Service -- */

.smc-service {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 0.9rem;
	padding-left: 0.85rem;
	border-left: 3px solid var(--smc-service-accent, hsl(var(--primary)));
}

.smc-service-time {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: hsl(var(--primary));
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.smc-service-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.1rem;
	line-height: 1.3;
	color: hsl(var(--foreground));
}

.smc-service-type {
	margin: 0.1rem 0 0;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--smc-service-accent, hsl(var(--muted-foreground)));
}

.smc-service-meta {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	margin: 0.3rem 0 0;
	font-size: 0.85rem;
	color: hsl(var(--muted-foreground));
}

.smc-service-meta svg { width: 14px; height: 14px; flex-shrink: 0; }

.smc-service-lang { font-style: italic; }

.smc-service-note {
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: hsl(var(--muted-foreground));
}

.smc-service.is-cancelled .smc-service-title,
.smc-service.is-cancelled .smc-service-time {
	text-decoration: line-through;
	color: hsl(var(--muted-foreground));
}

.smc-service-flag {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: hsl(var(--destructive));
}

.smc-service-reason {
	display: block;
	margin-top: 0.15rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: hsl(var(--muted-foreground));
}

.smc-service.is-compact {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.1rem;
	padding-left: 0.55rem;
	border-left-width: 2px;
	margin-bottom: 0.5rem;
}

.smc-service.is-compact .smc-service-time { font-size: 0.8rem; }
.smc-service.is-compact .smc-service-title { font-size: 0.88rem; font-family: var(--font-body); }

/* ------------------------------------------------------------ Week view -- */

.smc-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.6rem;
}

.smc-week-day {
	padding: 0.85rem 0.7rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	min-height: 9rem;
}

.smc-week-day.is-today {
	border-color: hsl(var(--secondary));
	box-shadow: inset 0 3px 0 hsl(var(--secondary));
}

.smc-week-head {
	margin: 0 0 0.6rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid hsl(var(--border));
	font-family: var(--font-body);
	font-size: 0.8rem;
}

.smc-week-weekday {
	display: block;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--secondary));
	font-size: 0.7rem;
}

.smc-week-date {
	display: block;
	margin-top: 0.1rem;
	color: hsl(var(--primary));
	font-variant-numeric: tabular-nums;
}

.smc-week-none {
	margin: 0;
	font-size: 0.78rem;
	color: hsl(var(--muted-foreground));
}

/* ----------------------------------------------------------- Month view -- */

/* The grid keeps seven columns and scrolls inside its own container, so the
   page body never scrolls sideways on a narrow screen. */
.smc-month-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.smc-month {
	display: grid;
	grid-template-columns: repeat(7, minmax(6.5rem, 1fr));
	gap: 0.35rem;
	min-width: 46rem;
}

.smc-month-head {
	padding: 0.4rem;
	text-align: center;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--muted-foreground));
}

.smc-month-cell {
	padding: 0.45rem;
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: 4px;
	min-height: 6.5rem;
}

.smc-month-cell.is-outside { opacity: 0.45; }

.smc-month-cell.is-today {
	border-color: hsl(var(--secondary));
	box-shadow: inset 0 2px 0 hsl(var(--secondary));
}

.smc-month-date {
	margin: 0 0 0.3rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: hsl(var(--muted-foreground));
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- Empty state -- */

.smc-schedule-empty {
	padding: 3rem 1.5rem;
	text-align: center;
	background: hsl(var(--card));
	border: 1px dashed hsl(var(--border));
	border-radius: var(--radius);
	color: hsl(var(--muted-foreground));
}

.smc-schedule-empty-ornament {
	display: inline-flex;
	margin-bottom: 0.25rem;
}

.smc-schedule-empty-ornament .smc-coptic-cross {
	width: clamp(6rem, 20vw, 7.5rem);
}

.smc-schedule-empty p { margin: 0.6rem 0 0; }

.smc-schedule-empty-hint { font-size: 0.9rem; }

/* --------------------------------------------------------- Small screens -- */

@media (max-width: 900px) {
	.smc-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.smc-schedule-controls {
		flex-direction: column;
		align-items: stretch;
	}

	.smc-view-switch { width: 100%; }

	.smc-view-btn {
		flex: 1;
		text-align: center;
		padding: 0.55rem 0.4rem;
	}

	.smc-schedule-filter select { flex: 1; max-width: none; }

	.smc-schedule-actions { justify-content: stretch; }
	.smc-schedule-action { flex: 1; justify-content: center; }

	/* At 390px a two-column day header wastes the width it needs for the
	   service titles, so the date moves above the services. */
	.smc-day {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.85rem;
		padding: 1rem 1.1rem;
	}

	.smc-day-head {
		border-right: 0;
		border-bottom: 1px solid hsl(var(--border));
		padding-right: 0;
		padding-bottom: 0.6rem;
		display: flex;
		gap: 0.6rem;
		align-items: baseline;
	}

	.smc-day-date { font-size: 1.2rem; }
	.smc-today-flag { display: inline; margin-left: 0.4rem; }

	.smc-service { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }

	.smc-week { grid-template-columns: minmax(0, 1fr); }
	.smc-week-day { min-height: 0; }

	.smc-period-label { min-width: 0; font-size: 1.1rem; }
}

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

	.hero-slide { transition: none; }
	.album-card:hover { transform: none; }
	html { scroll-behavior: auto; }
}


/* ============================================================== Print == */
/*
 * The printable schedule. Page furniture goes; the schedule stays, in black
 * on white, with the parish name as a heading so a sheet pinned to the
 * noticeboard identifies itself.
 */
@media print {
	.site-header,
	.site-footer,
	.page-hero,
	.smc-schedule-controls,
	.smc-period-nav,
	.smc-schedule-ornament,
	.smc-schedule-empty-ornament,
	.newsletter-form,
	.skip-link,
	nav {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
	}

	.smc-schedule-section {
		background: #fff !important;
		padding: 0 !important;
	}

	.smc-schedule-header {
		text-align: left;
		max-width: none;
		margin-bottom: 1rem;
		border-bottom: 2pt solid #000;
		padding-bottom: 0.5rem;
	}

	.smc-schedule-header h2 { color: #000 !important; font-size: 20pt; }
	.smc-eyebrow { color: #444 !important; }

	/* The parish name, printed only. */
	.smc-schedule-header::before {
		content: "Saint Mary and Saint Marina Coptic Orthodox Church";
		display: block;
		margin-bottom: 0.3rem;
		font-size: 10pt;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #000;
	}

	.smc-day {
		background: #fff !important;
		border: 0;
		border-bottom: 0.5pt solid #999;
		border-radius: 0;
		box-shadow: none !important;
		padding: 0.4rem 0;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.smc-day-head { border-right: 0.5pt solid #999; }
	.smc-day-date,
	.smc-service-title,
	.smc-service-time { color: #000 !important; }

	.smc-day-weekday,
	.smc-service-type { color: #444 !important; }

	.smc-service { border-left: 1.5pt solid #000; }

	.smc-service.is-cancelled .smc-service-title { text-decoration: line-through; }
	.smc-service-flag { color: #000 !important; }

	/* A month grid does not print usefully at A4; the list does. */
	.smc-month-scroll,
	.smc-week { display: block; }

	.smc-week-day {
		border: 0;
		border-bottom: 0.5pt solid #999;
		padding: 0.3rem 0;
		page-break-inside: avoid;
	}

	a[href]::after { content: ""; }
}

/* Gallery photo links.
   Each photograph opens its full-size file, so the link needs a visible
   keyboard focus state - without one, somebody tabbing through the grid has
   no idea which photograph they are on. */
.photo-link {
	display: block;
	border-radius: 4px;
	outline-offset: 3px;
}

.photo-link:focus-visible {
	outline: 3px solid hsl(var(--secondary));
	outline-offset: 3px;
}

.photo-link img {
	display: block;
	transition: opacity 0.2s ease;
}

.photo-link:hover img,
.photo-link:focus-visible img {
	opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
	.photo-link img {
		transition: none;
	}
}