/* Salem Devotionals - front-end styles. Mobile-first: base rules target
   phone width, then min-width breakpoints scale up for tablet/desktop. */

:root {
	--sd-primary: #3e7054;
	--sd-secondary: #236192;
	--sd-accent: #5d4b3c;
	--sd-box-bg: #f7f6f3;
}

.sd-hub, .sd-devotion {
	/* Per-season colors come from the --sd-primary/--sd-secondary/--sd-accent
	   custom properties set on :root by sd_output_season_style_vars() in
	   frontend.php (with its own brand-color fallback baked in there).
	   Deliberately NOT redeclared here - a value set directly on this element
	   would always win over the inherited :root value regardless of which
	   stylesheet loads first, which is exactly the bug that made every
	   season look identical (brand green/blue/brown) no matter what colors
	   were entered on the series edit screen. */
	font-family: 'Noto Sans', sans-serif;
	font-size: 18px;
	line-height: 1.6;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 20px 40px;
	box-sizing: border-box;
}

.sd-admin-only-badge {
	background: #b32d2e;
	color: #fff;
	text-align: center;
	padding: 8px;
	font-weight: bold;
	font-size: 14px;
	margin-bottom: 16px;
}

.sd-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	border-radius: 8px;
	margin: 16px 0 0;
	aspect-ratio: 21 / 9;
	min-height: 140px;
	overflow: hidden;
}
.sd-hero-texture {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.25;
}
.sd-season-name {
	margin: 12px 0 0;
	font-size: 28px;
	text-align: center;
	/* Set directly on the heading itself, not merely relying on inheritance -
	   the site's theme (Cornerstone/Themeco) applies its own global heading
	   color directly to every <h1>, and a value declared directly on an
	   element always wins over an inherited one, no matter the specificity
	   of the parent's rule. !important is used deliberately here since this
	   is the one spot on the page where the theme's global typography needs
	   to be overridden so the season's own color shows through reliably. */
	color: var(--sd-primary) !important;
}

.sd-intro { margin: 20px 0; }

.sd-hub-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 20px 0;
}

.sd-btn {
	display: inline-block;
	text-align: center;
	padding: 14px 20px;
	min-height: 44px;
	border-radius: 6px;
	background: var(--sd-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	box-sizing: border-box;
}
.sd-btn-sms { background: var(--sd-secondary); }
.sd-btn-companion { background: var(--sd-accent); }
.sd-btn-today { background: var(--sd-primary); }
.sd-sms-fallback { font-size: 13px; text-align: center; margin-top: -6px; }
.sd-sms-description { font-size: 15px; text-align: center; margin: 0 0 4px; }

.sd-week-label {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sd-secondary);
	margin: 28px 0 10px;
}
.sd-week-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sd-day-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	min-height: 44px;
	border-radius: 6px;
	background: var(--sd-primary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	box-sizing: border-box;
}
.sd-day-card-today {
	outline: 3px solid var(--sd-accent);
}
.sd-audio-icon { font-size: 16px; }
.sd-not-started { font-style: italic; }

.sd-progress {
	font-size: 14px;
	color: #666;
	margin: 0 0 4px;
}
.sd-devotion-date { margin-top: 0; }

/**
 * Vertical rhythm for everything below the date heading: instead of giving
 * each section its own top-AND-bottom margin and hoping adjacent margins
 * collapse down to a single gap (unreliable - depends on whether the theme
 * wraps things in a way that blocks collapsing, which was the real cause
 * of the oversized, inconsistent gaps around the scripture/prayer boxes),
 * every direct child of .sd-devotion gets exactly one top margin, and nothing
 * has a bottom margin of its own. This "owl selector" (`> * + *`) targets
 * every child EXCEPT the first automatically - no manual first-child reset
 * needed, and the gap between any two sections is always exactly this one
 * value, never doubled.
 */
.sd-devotion > * + * {
	margin-top: 16px;
}

.sd-author {
	display: flex;
	align-items: center;
	gap: 10px;
}
.sd-author-photo { border-radius: 50%; width: 80px; height: 80px; object-fit: cover; }

.sd-responsive-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.sd-responsive-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sd-scripture, .sd-prayer, .sd-instruction {
	/* Background is configurable per-series (Scripture & prayer box color,
	   series edit screen) via the --sd-box-bg custom property set in
	   sd_output_season_style_vars() - falls back to this warm off-white if
	   a season hasn't set its own. */
	padding: 16px 20px;
	border-radius: 6px;
	background: var(--sd-box-bg, #f7f6f3);
}
.sd-scripture-ref { font-weight: 700; margin-bottom: 8px; }
.sd-instruction { background: transparent; padding: 0; }
/* A trailing/leading child's own margin (e.g. a paragraph's default margin
   from the theme's global typography) has no padding/border to stop it from
   escaping the box and silently adding to the gap above/below - zeroing it
   out keeps the box's spacing exactly what's declared above. */
.sd-scripture-text > *:first-child,
.sd-prayer > *:first-child { margin-top: 0; }
.sd-scripture-text > *:last-child,
.sd-prayer > *:last-child { margin-bottom: 0; }

.sd-body > *:first-child { margin-top: 0; }
.sd-body > *:last-child { margin-bottom: 0; }

.sd-reflection-questions li { margin-bottom: 14px; }

.sd-share, .sd-nav, .sd-btn-back {
	display: block;
}
.sd-share-btn {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 6px;
	border: 1px solid var(--sd-primary);
	background: #fff;
	color: var(--sd-primary);
	font-weight: 600;
}
.sd-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
}
.sd-nav a { color: var(--sd-secondary); text-decoration: none; }
.sd-btn-back { text-align: center; }

/* Audio player - placed inline in the entry (below the author, on Standard
   entries) so it's part of the normal reading flow rather than a fixed
   sticky bar at the bottom of the screen. */
.sd-audio-player {
	padding: 10px 14px;
	border-radius: 6px;
	background: var(--sd-box-bg, #f7f6f3);
}
.sd-audio-player audio {
	width: 100%;
	display: block;
}

@media (min-width: 720px) {
	.sd-hub, .sd-devotion { max-width: 720px; }
	.sd-week-cards { flex-direction: row; flex-wrap: wrap; }
	.sd-day-card { flex: 1 1 30%; }
	.sd-hub-actions { flex-direction: row; flex-wrap: wrap; }
	.sd-btn { flex: 1 1 auto; }
}