/*
Theme Name:   Shepherd's Table
Theme URI:    https://shepherdstable.org/
Description:  Child theme of Hello Elementor for the Shepherd's Table apostolate. Carries the brand palette, typography and header/footer styling. All booking, giving and dashboard behaviour lives in the Shepherd's Table Core plugin, so switching themes never loses data.
Author:       Shepherd's Table
Template:     hello-elementor
Version:      1.0.0
Text Domain:  shepherds-table-child
License:      GNU General Public License v2 or later
*/

/* Tokens are loaded by the plugin (st-tokens.css). This file only maps them
   onto the theme's own chrome — header, footer, links, headings. */

body {
	background: var(--st-bg, #FDFAF5);
	color: var(--st-fg, #05224C);
	font-family: var(--st-font-body, system-ui, sans-serif);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--st-font-display, Georgia, serif);
	color: var(--st-fg, #05224C);
	line-height: 1.2;
}

a { color: var(--st-terracotta, #B43D1B); }
a:hover { color: var(--st-terracotta-600, #9B3416); }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--st-terracotta, #B43D1B);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.st-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(253, 250, 245, .88);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--st-dur, 240ms) var(--st-ease, ease),
	            box-shadow var(--st-dur, 240ms) var(--st-ease, ease),
	            background var(--st-dur, 240ms) var(--st-ease, ease);
}
.st-header.is-stuck {
	border-bottom-color: var(--st-border, #E2D9CB);
	box-shadow: 0 2px 16px rgba(5, 34, 76, .06);
	background: rgba(253, 250, 245, .96);
}

.st-header__inner {
	display: flex;
	align-items: center;
	gap: var(--st-space-5, 24px);
	min-height: var(--st-header-h, 86px);
}

.st-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	flex: none;
}
.st-brand img { height: 64px; width: auto; display: block; }

/* The scripture sits between the mark and the navigation and is the only zone
   that flexes, so the logo and the controls never shrink. min-width:0 is what
   allows a flex item to go narrower than its own text — without it the header
   is forced onto a second line. */
.st-verse {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	text-align: center;
	padding-inline: clamp(4px, 1vw, 18px);
	font-family: var(--st-font-display, Georgia, serif);
	font-style: italic;
	font-size: clamp(12px, .34vw + 9.7px, 15px);
	line-height: 1.4;
	color: var(--st-fg-muted, #55637A);
}
.st-verse cite {
	font-style: normal;
	font-family: var(--st-font-wordmark, Georgia, serif);
	font-size: .72em;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--st-terracotta, #B43D1B);
	white-space: nowrap;
}
.st-verse cite::before { content: "\2002\2014\2002"; }
/* Only one of the two copies is ever rendered, so the verse is announced once. */
.st-verse--menu { display: none; }
.st-brand__text {
	font-family: var(--st-font-wordmark, Georgia, serif);
	font-size: 18px;
	letter-spacing: var(--st-tracking-wordmark, .14em);
	text-transform: uppercase;
	color: var(--st-navy, #05224C);
	line-height: 1.1;
}
.st-brand__text small {
	display: block;
	font-size: 10px;
	letter-spacing: .3em;
	color: var(--st-terracotta, #B43D1B);
}

.st-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.st-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: var(--st-radius-sm, 6px);
	color: var(--st-navy, #05224C);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
}
.st-nav a:hover { background: rgba(5, 34, 76, .06); }
.st-nav [aria-current="page"] {
	color: var(--st-terracotta, #B43D1B);
	box-shadow: inset 0 -2px 0 var(--st-terracotta, #B43D1B);
}

.st-header__toggle {
	display: none;
	width: 48px;
	height: 48px;
	border: 1px solid var(--st-border, #E2D9CB);
	border-radius: var(--st-radius-sm, 6px);
	background: transparent;
	cursor: pointer;
	color: var(--st-navy, #05224C);
}

@media (max-width: 1040px) {
	.st-header__toggle { display: grid; place-items: center; }
	.st-brand { margin-right: auto; }
	.st-verse--bar { display: none; }
	.st-verse--menu {
		display: block;
		flex: none;
		text-align: left;
		padding: 14px 10px 4px;
		margin-top: 8px;
		border-top: 1px solid var(--st-border, #E2D9CB);
	}
	.st-nav {
		position: absolute;
		inset: 100% 0 auto;
		background: var(--st-cream, #FDFAF5);
		border-bottom: 1px solid var(--st-border, #E2D9CB);
		padding: 8px var(--st-gutter, 24px) 20px;
	}
	.st-nav[hidden] { display: none; }
	.st-nav ul { flex-direction: column; align-items: stretch; }
	.st-nav a { padding: 12px 8px; }
}

@media (min-width: 1041px) {
	.st-nav[hidden] { display: block !important; }
}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */

.st-footer {
	background: var(--st-footer, #37394C);
	color: rgba(253, 250, 245, .82);
	padding-block: clamp(40px, 6vw, 72px) 24px;
}
.st-footer a { color: #F0B79C; }
.st-footer__brand { margin: 0 0 16px; line-height: 0; }
.st-footer__brand img { display: block; height: 66px; width: auto; }
.st-footer a:hover { color: #FFF; }
.st-footer h2 {
	color: #FDFAF5;
	font-size: 1.125rem;
	margin: 0 0 12px;
}
.st-footer__grid {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(253, 250, 245, .18);
}
.st-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding-top: 20px;
	font-size: 14px;
	color: rgba(253, 250, 245, .68);
}
.st-footer ul { list-style: none; margin: 0; padding: 0; }
.st-footer li { margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Elementor overrides — keep builder sections inside our rhythm
   -------------------------------------------------------------------------- */

.elementor-widget-container > .st-section:first-child { padding-top: 0; }
.elementor-section .st-container { padding-inline: 0; }

/* --------------------------------------------------------------------------
   Editorial note — used in Elementor text for the "Important" line on the
   Donate page. No coloured box: a hairline above, a small terracotta label,
   and the copy in the page's own ink. The CTA button is the only colour.
   -------------------------------------------------------------------------- */

.st-note {
	margin: 8px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--st-border, #E2D9CB);
	color: var(--st-fg, #05224C);
	line-height: 1.7;
}
.st-note__label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--st-font-wordmark, "Cinzel", Georgia, serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--st-tracking-eyebrow, .22em);
	text-transform: uppercase;
	color: var(--st-terracotta, #B43D1B);
}
.st-note strong { color: var(--st-fg, #05224C); }

@media print {
	.st-header, .st-footer, .st-book__actions { display: none; }
}