/* =========================================================================
   Sunday School in Pakistan
   -------------------------------------------------------------------------
   Built to the same design system as freeurdubibles.com so the ministry's
   sites read as one family: DM Sans, navy and amber, generous 90px section
   rhythm, moderate radii, photo-forward cards.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
	/* Overridden inline by the Customizer — see inc/setup.php. */
	--ssp-navy:  #1B2A4A;
	--ssp-amber: #E8913A;
	--ssp-clay:  #C0563A;
	--ssp-steel: #3A6EA5;

	--ssp-navy-deep: #152238;
	--ssp-navy-soft: #3A4E66;

	--ssp-ink:       #1B2A4A;
	--ssp-ink-soft:  #5A6880;
	--ssp-ink-faint: #8899BB;

	/* Section grounds. Adjacent sections never share one. */
	--ssp-white: #FFFFFF;
	--ssp-off:   #FAFAFA;
	--ssp-mist:  #F0F4FA;
	--ssp-sand:  #F5F0E8;
	--ssp-steel-bg: #C8D3E0;
	--ssp-cream: #FFFFFF;

	--ssp-line:      #E2E8F1;
	--ssp-line-soft: #EDF1F7;

	--ssp-radius:    16px;
	--ssp-radius-sm: 10px;

	--ssp-shadow:      0 1px 3px rgba(27, 42, 74, .05), 0 8px 26px rgba(27, 42, 74, .08);
	--ssp-shadow-lift: 0 4px 12px rgba(27, 42, 74, .08), 0 20px 50px rgba(27, 42, 74, .16);

	--ssp-wrap: 1180px;
	--ssp-wrap-narrow: 760px;
	--ssp-gutter: 20px;

	--ssp-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ssp-display: var(--ssp-sans);
	--ssp-serif: var(--ssp-sans);
}

@media (min-width: 700px) { :root { --ssp-gutter: 32px; } }

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--ssp-white);
	color: var(--ssp-ink-soft);
	font-family: var(--ssp-sans);
	font-size: 16px;
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--ssp-display);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ssp-navy);
	margin: 0 0 .5em;
	text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ssp-amber); }
a:hover { color: var(--ssp-clay); }

/* An explicit height attribute on <img> beats a CSS aspect-ratio, so every
   cropped image needs height:auto here too. */
img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
blockquote { margin: 0; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--ssp-amber); outline-offset: 3px; border-radius: 5px; }

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

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--ssp-navy); color: #fff;
	padding: 14px 20px; border-radius: 0 0 var(--ssp-radius-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* -------------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--ssp-wrap); margin-inline: auto; padding-inline: var(--ssp-gutter); }
.wrap--narrow { max-width: var(--ssp-wrap-narrow); }

.section { padding: 90px 0; }
.section--tight { padding: 48px 0 90px; }

.section--white  { background: var(--ssp-white); }
.section--sand   { background: var(--ssp-off); }
.section--mist   { background: var(--ssp-mist); }
.section--indigo { background: var(--ssp-navy); color: #fff; }

@media (max-width: 700px) {
	.section { padding: 58px 0; }
	.section--tight { padding: 32px 0 58px; }
}

.section__head { max-width: 720px; margin: 0 0 48px; }

.section__eyebrow,
.intro__eyebrow,
.profile__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ssp-amber);
	background: rgba(232, 145, 58, .1);
	border: 1px solid rgba(232, 145, 58, .28);
	padding: 7px 15px;
	border-radius: 999px;
	margin: 0 0 18px;
}
.section__eyebrow::before,
.intro__eyebrow::before,
.profile__eyebrow::before {
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--ssp-amber);
}
.section--indigo .section__eyebrow {
	color: var(--ssp-amber);
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.2);
}

.section__title { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.1rem); margin-bottom: .4em; }
.section--indigo .section__title { color: #fff; }
.section__lede { color: var(--ssp-ink-soft); font-size: 1.05rem; margin: 0; }
.section--indigo .section__lede { color: rgba(255,255,255,.8); }
.section__more { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 42px; }

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */

.site-header {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255,255,255,.94);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--ssp-line-soft);
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }

.brand {
	display: inline-flex; align-items: center; gap: 11px;
	text-decoration: none; color: var(--ssp-navy);
	font-family: var(--ssp-display); font-size: 1.14rem; font-weight: 700;
	line-height: 1.15; white-space: nowrap;
}
.brand__mark {
	display: grid; place-items: center;
	width: 42px; height: 42px; flex: 0 0 42px;
	border-radius: 12px;
	background: var(--ssp-navy);
	color: var(--ssp-amber);
}
.brand__mark .icon { width: 23px; height: 23px; }

.custom-logo-link { display: inline-block; }
.custom-logo { max-height: 54px; width: auto; }

.nav-toggle {
	display: inline-grid; place-items: center;
	width: 46px; height: 46px;
	background: var(--ssp-mist); border: 0; border-radius: 12px;
	cursor: pointer; color: var(--ssp-navy);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
	display: block; width: 20px; height: 2px; background: currentColor;
	border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.primary-nav { display: none; }
.primary-nav.is-open {
	display: block; position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-bottom: 1px solid var(--ssp-line);
	box-shadow: var(--ssp-shadow); padding: 10px var(--ssp-gutter) 22px;
	max-height: calc(100vh - 76px); overflow-y: auto;
}

/* wp_nav_menu is given a real <ul>; this removes the bullets a bare-<li>
   items_wrap would otherwise produce. */
.primary-nav__list, .site-footer__list, .sub-menu { list-style: none; margin: 0; padding: 0; }

.primary-nav__list > li { border-bottom: 1px solid var(--ssp-line-soft); }
.primary-nav__list > li:last-child { border-bottom: 0; }

.primary-nav__list a {
	display: block; padding: 14px 2px; text-decoration: none;
	color: var(--ssp-navy); font-weight: 500;
}
.primary-nav__list a:hover { color: var(--ssp-amber); }
.primary-nav__list .current-menu-item > a { color: var(--ssp-amber); font-weight: 700; }

.primary-nav__list .sub-menu li a {
	padding-left: 16px; font-size: .95rem; color: var(--ssp-ink-soft);
}
.primary-nav__list .sub-menu li a::before {
	content: ""; display: inline-block; width: 12px; height: 1.5px;
	background: var(--ssp-line); vertical-align: middle; margin-right: 10px;
}

@media (min-width: 1120px) {
	.nav-toggle { display: none; }
	.primary-nav { display: block; }
	.primary-nav__list { display: flex; align-items: center; gap: 2px; }
	.primary-nav__list > li { border: 0; position: relative; }

	.primary-nav__list > li > a {
		padding: 9px 13px; border-radius: 8px;
		font-size: .95rem; font-weight: 500; white-space: nowrap;
	}
	.primary-nav__list > li > a:hover { background: var(--ssp-mist); color: var(--ssp-navy); }

	/* Direct children ONLY. Plain `li:last-child` also matched the last item
	   inside every dropdown, which then took the sub-menu's dark text colour
	   on top of this filled background — dark on dark, in every submenu. */
	.primary-nav__list > li:last-child > a {
		background: var(--ssp-amber); color: #fff; font-weight: 700;
		margin-left: 10px; border-radius: 8px;
	}
	.primary-nav__list > li:last-child > a:hover { background: #d97f26; color: #fff; }

	.primary-nav__list .menu-item-has-children > a::after {
		content: ""; display: inline-block;
		width: 6px; height: 6px; margin-left: 7px;
		border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
		transform: translateY(-2px) rotate(45deg); opacity: .5;
	}

	.primary-nav__list .sub-menu {
		position: absolute; top: calc(100% + 10px); left: 0;
		min-width: 238px; background: #fff;
		border: 1px solid var(--ssp-line); border-radius: 14px;
		box-shadow: var(--ssp-shadow-lift); padding: 9px;
		opacity: 0; visibility: hidden; transform: translateY(-6px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
		z-index: 50;
	}
	/* Bridge so the menu does not close as the pointer travels to it. */
	.primary-nav__list > li.menu-item-has-children::after {
		content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
	}
	.primary-nav__list > li:hover > .sub-menu,
	.primary-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

	.primary-nav__list .sub-menu li a {
		padding: 10px 13px; border-radius: 8px;
		font-size: .93rem; font-weight: 500; color: var(--ssp-navy); white-space: nowrap;
	}
	.primary-nav__list .sub-menu li a::before { content: none; }
	.primary-nav__list .sub-menu li a:hover { background: var(--ssp-mist); color: var(--ssp-amber); }
	.primary-nav__list > li:last-child .sub-menu { left: auto; right: 0; }
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */

.button {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 14px 26px; border: 1.5px solid transparent; border-radius: 10px;
	font-family: var(--ssp-display); font-weight: 700; font-size: .98rem;
	text-decoration: none; cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.button:hover { transform: translateY(-2px); }
.button .icon { width: 18px; height: 18px; }

.button--primary { background: var(--ssp-amber); color: #fff; box-shadow: 0 8px 22px rgba(232,145,58,.32); }
.button--primary:hover { background: #d97f26; color: #fff; }

.button--gold { background: var(--ssp-amber); color: #fff; box-shadow: 0 8px 22px rgba(232,145,58,.32); }
.button--gold:hover { background: #d97f26; color: #fff; }

.button--ghost { background: var(--ssp-navy); color: #fff; }
.button--ghost:hover { background: var(--ssp-navy-deep); color: #fff; }

.button--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.button--outline:hover { background: rgba(255,255,255,.12); color: #fff; }

/* -------------------------------------------------------------------------
   6. Slider
   ------------------------------------------------------------------------- */

.slider { position: relative; background: var(--ssp-navy-deep); overflow: hidden; }

.slider__track {
	position: relative;
	/* All slides share ONE grid cell so they stack and each stretches to the
	   full track height. Toggling absolute/relative let the active slide
	   collapse to its text height, leaving a dead band below the image. */
	display: grid; grid-template-areas: "slide";
	min-height: 500px;
}
@media (min-width: 700px)  { .slider__track { min-height: 600px; } }
@media (min-width: 1100px) { .slider__track { min-height: min(76vh, 720px); } }

.slide {
	grid-area: slide; position: relative; display: flex; align-items: center;
	min-width: 0; opacity: 0; visibility: hidden;
	transition: opacity .7s ease, visibility .7s ease;
}
.slide.is-active { opacity: 1; visibility: visible; z-index: 1; }

.slide__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.slide__scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(95deg, rgba(21,34,56,.93) 0%, rgba(21,34,56,.78) 42%, rgba(27,42,74,.42) 74%, rgba(27,42,74,.18) 100%),
		linear-gradient(180deg, rgba(21,34,56,.40) 0%, rgba(21,34,56,0) 34%, rgba(21,34,56,.38) 100%);
}

.slide__inner { position: relative; z-index: 2; width: 100%; padding-top: 56px; padding-bottom: 80px; }
.slide__text { max-width: 640px; color: #fff; }

.slide__heading {
	color: #fff; font-size: clamp(2rem, 1.3rem + 3.2vw, 3.1rem);
	line-height: 1.14; margin: 0 0 .35em;
}

.slide__lede { color: rgba(255,255,255,.86); font-size: clamp(1rem, .95rem + .35vw, 1.14rem); margin: 0; max-width: 54ch; }
.slide__actions { margin: 30px 0 0; }

.slider__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	display: none; place-items: center;
	width: 48px; height: 48px;
	border: 1px solid rgba(255,255,255,.34); border-radius: 50%;
	background: rgba(21,34,56,.4); backdrop-filter: blur(6px);
	color: #fff; cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}
.slider__arrow:hover { background: var(--ssp-amber); border-color: transparent; }
/* Absolutely positioned children measure from the padding box, so `right:0`
   would ignore the page gutter and sit against the screen edge. */
.slider__arrow--prev { left: var(--ssp-gutter); }
.slider__arrow--next { right: var(--ssp-gutter); }
@media (min-width: 900px) { .slider__arrow { display: grid; } }

.slider__dots { position: absolute; left: var(--ssp-gutter); bottom: 28px; z-index: 3; display: flex; gap: 9px; }
.slider__dot {
	width: 34px; height: 4px; padding: 0; border: 0; border-radius: 3px;
	background: rgba(255,255,255,.32); cursor: pointer;
	transition: background .2s ease, width .2s ease;
}
.slider__dot:hover { background: rgba(255,255,255,.58); }
.slider__dot.is-active { background: var(--ssp-amber); width: 50px; }
@media (min-width: 900px) { .slider__dots { left: 50%; transform: translateX(-50%); bottom: 32px; } }

/* -------------------------------------------------------------------------
   7. Homepage intro + stats band
   ------------------------------------------------------------------------- */

.section--intro { padding-bottom: 0; }
.intro { max-width: 780px; margin: 0 0 54px; }
.intro__title { font-size: clamp(1.8rem, 1.3rem + 2.1vw, 2.4rem); margin-bottom: .4em; }
.intro__lede { color: var(--ssp-ink-soft); font-size: 1.06rem; margin: 0; }

/* The navy statistics band, as on freeurdubibles.com */
.stats {
	list-style: none; margin: 0; padding: 46px var(--ssp-gutter);
	background: var(--ssp-navy);
	border-radius: var(--ssp-radius);
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 32px 20px; text-align: center;
}
@media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 52px 40px; } }

.stats__item { display: flex; flex-direction: column; gap: 8px; }
.stats__figure {
	font-family: var(--ssp-display); font-weight: 700;
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem);
	color: var(--ssp-amber); line-height: 1;
}
.stats__label { font-size: .92rem; color: rgba(255,255,255,.78); line-height: 1.45; }

/* -------------------------------------------------------------------------
   8. Features
   ------------------------------------------------------------------------- */

.feature-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }

.feature {
	background: #fff; border: 1px solid var(--ssp-line);
	border-radius: var(--ssp-radius); padding: 28px 26px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--ssp-shadow); }

.feature__icon {
	display: grid; place-items: center; width: 48px; height: 48px;
	border-radius: 12px; background: rgba(232,145,58,.12); color: var(--ssp-amber);
	margin-bottom: 18px;
}
.feature__title { font-size: 1.08rem; margin-bottom: .45em; }
.feature p { margin: 0; color: var(--ssp-ink-soft); font-size: .95rem; }

/* -------------------------------------------------------------------------
   9. Age cards
   ------------------------------------------------------------------------- */

.age-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .age-grid { grid-template-columns: repeat(4, 1fr); } }

.age-card {
	display: flex; flex-direction: column; gap: 4px;
	padding: 24px 22px; border-radius: var(--ssp-radius);
	background: #fff; border: 1px solid var(--ssp-line);
	text-decoration: none;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.age-card:hover { border-color: var(--ssp-amber); transform: translateY(-3px); box-shadow: var(--ssp-shadow); }
.age-card__name { font-family: var(--ssp-display); font-size: 1.14rem; font-weight: 700; color: var(--ssp-navy); }
.age-card__count { font-size: .88rem; color: var(--ssp-ink-faint); }

/* -------------------------------------------------------------------------
   10. Cards
   ------------------------------------------------------------------------- */

.card-grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card-grid--two { grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid--two { grid-template-columns: repeat(2, 1fr); } }

.card {
	background: #fff; border: 1px solid var(--ssp-line);
	border-radius: var(--ssp-radius); overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ssp-shadow-lift); border-color: transparent; }

.card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.card__image { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--ssp-mist); }
.card__body { padding: 22px 22px 24px; }

.card__meta {
	font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
	font-weight: 700; color: var(--ssp-amber); margin: 0 0 9px;
}
.card__title { font-size: 1.12rem; margin: 0 0 .5em; }
.card__text { margin: 0; color: var(--ssp-ink-soft); font-size: .94rem; }
.card__verse { margin: 13px 0 0; font-size: .84rem; color: var(--ssp-ink-faint); font-style: italic; }

/* -------------------------------------------------------------------------
   11. Fields of work
   ------------------------------------------------------------------------- */

.field-grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 780px) { .field-grid { grid-template-columns: repeat(3, 1fr); } }

.field {
	background: #fff; border: 1px solid var(--ssp-line);
	border-radius: var(--ssp-radius); overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.field:hover { transform: translateY(-4px); box-shadow: var(--ssp-shadow-lift); }
.field__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.field__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.field__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 11px; height: 100%; }
.field__title { font-size: 1.18rem; margin: 0; }
.field__body p { margin: 0; color: var(--ssp-ink-soft); font-size: .94rem; }
.field__more {
	margin-top: auto; padding-top: 6px;
	display: inline-flex; align-items: center; gap: 7px;
	font-weight: 700; font-size: .92rem; color: var(--ssp-amber);
}
.field__more .icon { width: 17px; height: 17px; }

/* -------------------------------------------------------------------------
   12. Split section
   ------------------------------------------------------------------------- */

.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 58px; } }
.split__text p { color: var(--ssp-ink-soft); }
.split__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 26px; }
.split__media img {
	width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: var(--ssp-radius); box-shadow: var(--ssp-shadow);
}

/* -------------------------------------------------------------------------
   13. Video, songs
   ------------------------------------------------------------------------- */

.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--ssp-radius); overflow: hidden; background: var(--ssp-navy-deep); }
.video__button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; display: block; }
.video__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, opacity .3s ease; }
.video__button:hover .video__thumb { transform: scale(1.03); opacity: .88; }
.video__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; pointer-events: none; }
.video__play svg { width: 100%; height: 100%; display: block; }
.video__play-bg { fill: rgba(21,34,56,.82); transition: fill .16s ease; }
.video__button:hover .video__play-bg { fill: var(--ssp-amber); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.song-feature { display: grid; gap: 32px; }
@media (min-width: 900px) { .song-feature { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 48px; } }
.song-feature__title { font-size: 1.55rem; margin-bottom: .25em; }
.song-feature__sub { color: var(--ssp-ink-faint); font-size: .93rem; margin-bottom: 1.2em; }

.card-grid--songs { grid-template-columns: 1fr; }
@media (min-width: 700px) { .card-grid--songs { grid-template-columns: repeat(2, 1fr); } }
.song-card { background: #fff; border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius); overflow: hidden; }
.song-card__body { padding: 22px; }
.song-card__title { font-size: 1.16rem; margin-bottom: .3em; }
.song-card__title a { text-decoration: none; color: var(--ssp-navy); }
.song-card__title a:hover { color: var(--ssp-amber); }
.song-card__english { color: var(--ssp-ink-soft); margin: 0 0 .4em; font-style: italic; }
.song-card__verse { font-size: .86rem; color: var(--ssp-ink-faint); margin: 0; }

.song__head { padding: 40px 0 20px; }
.song__title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.5rem); margin-bottom: .25em; }
.song__english { font-size: 1.12rem; font-style: italic; color: var(--ssp-ink-soft); margin: 0 0 .3em; }
.song__writer { color: var(--ssp-ink-faint); font-size: .94rem; }
.song__player { margin: 0 0 34px; }

.related-lesson { margin: 36px 0 60px; padding: 24px 26px; background: var(--ssp-mist); border-radius: var(--ssp-radius); }
.related-lesson__label { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ssp-amber); margin: 0 0 7px; }
.related-lesson__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ssp-display); font-size: 1.2rem; font-weight: 700; color: var(--ssp-navy); text-decoration: none; }
.related-lesson__link:hover { color: var(--ssp-amber); }
.related-lesson__link .icon { width: 19px; height: 19px; }

/* -------------------------------------------------------------------------
   14. CTA band
   ------------------------------------------------------------------------- */

.cta { max-width: 760px; }
.cta__title { color: #fff; font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.2rem); }
.cta__text { color: rgba(255,255,255,.82); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }

/* -------------------------------------------------------------------------
   15. Breadcrumbs, archive heads, filters
   ------------------------------------------------------------------------- */

.breadcrumbs { margin: 0 0 18px; font-size: .85rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; color: var(--ssp-ink-faint); }
.breadcrumbs li + li::before { content: "/"; margin-right: 7px; color: var(--ssp-line); }
.breadcrumbs a { color: var(--ssp-ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ssp-amber); }

.archive-head { padding: 46px 0 26px; }
.archive-head__title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.5rem); margin-bottom: .35em; }
.archive-head__lede { color: var(--ssp-ink-soft); max-width: 62ch; margin: 0; font-size: 1.03rem; }

.filters { display: flex; flex-direction: column; gap: 15px; padding-top: 10px; padding-bottom: 10px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 11px; }
.filter-bar__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ssp-ink-faint); flex: 0 0 auto; }
.filter-bar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
	display: inline-block; padding: 7px 15px; border-radius: 999px;
	background: #fff; border: 1px solid var(--ssp-line);
	color: var(--ssp-ink-soft); font-size: .86rem; font-weight: 500; text-decoration: none;
	transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.pill:hover { border-color: var(--ssp-amber); color: var(--ssp-amber); }
.pill.is-active { background: var(--ssp-navy); border-color: var(--ssp-navy); color: #fff; }
.pill--age { background: rgba(232,145,58,.1); border-color: rgba(232,145,58,.3); color: var(--ssp-amber); font-weight: 700; }

/* -------------------------------------------------------------------------
   16. Lesson page
   ------------------------------------------------------------------------- */

.lesson__head { background: var(--ssp-mist); border-bottom: 1px solid var(--ssp-line); padding: 40px 0 44px; }
.lesson__terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.lesson__title { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.7rem); margin-bottom: .35em; }
.lesson__idea { font-size: 1.1rem; color: var(--ssp-ink-soft); margin: 0 0 1em; max-width: 60ch; }
.lesson__passage { margin: 0; font-size: .95rem; color: var(--ssp-ink-faint); }
.lesson__passage strong { color: var(--ssp-navy); }

.lesson__body { padding: 46px 0 64px; }
.lesson__section { margin: 0 0 44px; }
.lesson__h2 { font-size: 1.45rem; margin-bottom: .6em; }

.verse {
	background: var(--ssp-mist); border-left: 4px solid var(--ssp-amber);
	border-radius: 0 var(--ssp-radius) var(--ssp-radius) 0;
	padding: 26px 28px; margin: 0 0 44px;
}
.verse__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ssp-amber); margin: 0 0 11px; }
.verse blockquote p { font-family: var(--ssp-display); font-size: 1.2rem; font-weight: 500; line-height: 1.5; margin: 0 0 .5em; color: var(--ssp-navy); }
.verse cite { font-style: normal; font-weight: 700; color: var(--ssp-amber); font-size: .93rem; }
.verse__roman { margin: 17px 0 0; padding-top: 15px; border-top: 1px solid rgba(27,42,74,.1); color: var(--ssp-ink-soft); }
.verse__roman-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ssp-ink-faint); margin-bottom: 5px; }
.verse--plain { background: transparent; padding-left: 22px; }

.outline { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.outline__item {
	counter-increment: step; position: relative;
	/* Padding is on the item, so an absolutely positioned marker measures
	   from the padding box — the offset must be 0 with padding to clear it. */
	padding-left: 54px; margin: 0 0 30px;
}
.outline__item::before {
	content: counter(step); position: absolute; left: 0; top: 0;
	width: 36px; height: 36px; display: grid; place-items: center;
	border-radius: 10px; background: var(--ssp-navy); color: #fff;
	font-weight: 700; font-size: .95rem;
}
.outline__title { font-size: 1.12rem; margin-bottom: .4em; }
.outline__item p { margin: 0; color: var(--ssp-ink-soft); }

.lesson__practical { display: grid; gap: 22px; margin: 0 0 26px; }
@media (min-width: 760px) { .lesson__practical { grid-template-columns: 1fr 1fr; } }

.panel { border-radius: var(--ssp-radius); padding: 26px; border: 1px solid var(--ssp-line); background: #fff; }
.panel__title { display: flex; align-items: center; gap: 10px; font-size: 1.04rem; margin-bottom: .55em; font-weight: 700; }
.panel__title .icon { width: 21px; height: 21px; }
.panel p { margin: 0; font-size: .96rem; color: var(--ssp-ink-soft); }
.panel--activity { background: #EFF5FB; border-color: #D8E6F3; }
.panel--activity .panel__title { color: var(--ssp-steel); }
.panel--craft { background: #FDF4E9; border-color: #F3E0C6; }
.panel--craft .panel__title { color: #B8752A; }
.panel--prayer { background: var(--ssp-mist); border-color: #DDE6F2; margin-bottom: 44px; }
.panel--prayer .panel__title { color: var(--ssp-navy); }

.lesson__free { border-top: 1px solid var(--ssp-line); padding-top: 30px; color: var(--ssp-ink-soft); }
.lesson__free .lesson__h2 { font-size: 1.18rem; }

/* -------------------------------------------------------------------------
   17. Pages, profile, articles
   ------------------------------------------------------------------------- */

.page__head, .article__head { padding: 44px 0 12px; }
.page__head--wide {
	background: var(--ssp-mist);
	border-bottom: 1px solid var(--ssp-line);
	padding: 52px 0 48px; margin-bottom: 6px;
}
.page__title, .article__title { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.6rem); margin-bottom: .35em; }
.page__lede { color: var(--ssp-ink-soft); font-size: 1.08rem; margin: 0; max-width: 62ch; }
.article__meta { color: var(--ssp-ink-faint); font-size: .9rem; margin: 0; }

/* Blog articles keep a normal featured image. There is deliberately NO banner
   under a PAGE title — a wide image strip there reads as a slider cut in half. */
.article__media { margin: 28px 0 8px; }
.article__media img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--ssp-radius); }

.profile { background: var(--ssp-mist); border-bottom: 1px solid var(--ssp-line); padding: 44px 0 48px; }
.profile__inner { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .profile__inner { grid-template-columns: 300px 1fr; gap: 52px; } }
.profile__portrait { width: 210px; margin: 0 auto; }
@media (min-width: 860px) { .profile__portrait { width: 100%; margin: 0; } }
.profile__portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ssp-radius); box-shadow: var(--ssp-shadow-lift); background: #fff; }
.profile__name { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem); margin: 0 0 .25em; }
.profile__role { font-size: 1.06rem; color: var(--ssp-ink-soft); margin: 0 0 20px; }
.profile__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.profile__facts li { background: #fff; border: 1px solid var(--ssp-line); border-radius: 999px; padding: 7px 15px; font-size: .87rem; color: var(--ssp-ink-soft); font-weight: 500; }

.pull-quote { margin: 34px 0; padding: 26px 30px; background: var(--ssp-sand); border-left: 4px solid var(--ssp-amber); border-radius: 0 var(--ssp-radius) var(--ssp-radius) 0; }
.pull-quote p { font-family: var(--ssp-display); font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem); font-weight: 500; line-height: 1.5; color: var(--ssp-navy); margin: 0 0 .55em; }
.pull-quote cite { font-style: normal; font-weight: 700; color: var(--ssp-amber); font-size: .92rem; }

.entry-content { padding: 26px 0 64px; }
.entry-content--tight { padding-bottom: 0; }
.entry-content h2 { font-size: 1.5rem; margin-top: 1.8em; }
.entry-content h2:first-child { margin-top: 0; }
.entry-content h3 { font-size: 1.15rem; margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }

/* Article link styling must not leak into cards or buttons embedded in the
   flow of a post — those set their own colour and must not be underlined. */
.entry-content .card a, .entry-content .card__link, .entry-content .button,
.entry-content .pill, .entry-content .related-lesson__link,
.entry-content .breadcrumbs a, .entry-content .link-card__link {
	text-decoration: none; color: inherit;
}
.entry-content .button--primary, .entry-content .button--gold, .entry-content .button--ghost { color: #fff; }
.entry-content .card__title { color: var(--ssp-navy); }

.page-links { margin: 20px 0; }

/* -------------------------------------------------------------------------
   18. Quick Links
   ------------------------------------------------------------------------- */

.links-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 660px)  { .links-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .links-grid { grid-template-columns: repeat(3, 1fr); } }

.link-card {
	display: flex; flex-direction: column; gap: 11px;
	background: #fff; border: 1px solid var(--ssp-line);
	border-radius: var(--ssp-radius); padding: 28px 26px 26px;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.link-card:hover { transform: translateY(-4px); box-shadow: var(--ssp-shadow-lift); border-color: transparent; }
.link-card__link { text-decoration: none; color: inherit; }
.link-card__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: var(--ssp-navy); color: var(--ssp-amber); margin-bottom: 15px; }
.link-card__icon .icon { width: 25px; height: 25px; }
.link-card__short { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; font-weight: 700; color: var(--ssp-amber); margin-bottom: 6px; }
.link-card__title { font-size: 1.14rem; margin: 0; line-height: 1.3; }
.link-card__text { margin: 0; color: var(--ssp-ink-soft); font-size: .93rem; flex: 1 1 auto; }
.link-card__more { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .9rem; color: var(--ssp-amber); text-decoration: none; margin-top: 4px; }
.link-card__more .icon { width: 16px; height: 16px; }
.link-card__more:hover { text-decoration: underline; }
.link-card__stores { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.link-card__stores a { display: inline-block; padding: 5px 13px; border: 1px solid var(--ssp-line); border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--ssp-ink-soft); text-decoration: none; }
.link-card__stores a:hover { border-color: var(--ssp-amber); color: var(--ssp-amber); }

/* -------------------------------------------------------------------------
   19. Search results, forms, pagination
   ------------------------------------------------------------------------- */

.results { list-style: none; margin: 0; padding: 0; }
.result { padding: 24px 0; border-bottom: 1px solid var(--ssp-line-soft); }
.result__type { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--ssp-amber); margin: 0 0 7px; }
.result__title { font-size: 1.24rem; margin-bottom: .25em; }
.result__title a { text-decoration: none; color: var(--ssp-navy); }
.result__title a:hover { color: var(--ssp-amber); }
.result__text { margin: 0; color: var(--ssp-ink-soft); font-size: .95rem; }
.empty { color: var(--ssp-ink-soft); }

.search-form { display: flex; gap: 9px; margin: 20px 0 0; max-width: 480px; }
.search-form__field { flex: 1 1 auto; min-width: 0; padding: 13px 17px; border: 1px solid var(--ssp-line); border-radius: 10px; background: #fff; font: inherit; color: var(--ssp-navy); }
.search-form__submit { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 10px; background: var(--ssp-navy); color: #fff; cursor: pointer; }
.search-form__submit:hover { background: var(--ssp-amber); }

.contact-form { margin: 10px 0 34px; max-width: 560px; }
.contact-form__row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 19px; }
.contact-form__row label { font-weight: 700; font-size: .92rem; color: var(--ssp-navy); }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
	width: 100%; padding: 13px 15px; border: 1px solid var(--ssp-line);
	border-radius: 10px; background: #fff; font: inherit; color: var(--ssp-navy);
}
.contact-form textarea { resize: vertical; }
.contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 15px 19px; border-radius: 10px; margin: 0 0 22px; font-size: .95rem; }
.notice--ok  { background: #EAF6F0; border: 1px solid #C3E4D4; color: #1B6E4B; }
.notice--bad { background: #FDEDEA; border: 1px solid #F5D2CA; color: #A03A22; }
.contact-alt { color: var(--ssp-ink-soft); font-size: .95rem; padding-bottom: 54px; }

.pagination { margin: 46px 0 0; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 13px;
	border-radius: 10px; border: 1px solid var(--ssp-line); background: #fff;
	text-decoration: none; color: var(--ssp-ink-soft); font-weight: 500;
}
.pagination .page-numbers.current { background: var(--ssp-navy); border-color: var(--ssp-navy); color: #fff; }
.pagination .page-numbers:hover:not(.current) { border-color: var(--ssp-amber); color: var(--ssp-amber); }

/* -------------------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------------------- */

.site-footer { background: var(--ssp-navy); color: rgba(255,255,255,.74); padding: 68px 0 34px; font-size: .94rem; }
.site-footer__grid {
	display: grid; gap: 36px; grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 620px)  { .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 30px; } }
@media (min-width: 1000px) {
	/* Four columns of similar weight. The first is a little wider because it
	   carries the address and social row. */
	.site-footer__grid { grid-template-columns: 1.35fr 1fr 1fr 1.25fr; gap: 44px 36px; }
}
.site-footer__col { min-width: 0; }

.site-footer__title { color: #fff; font-family: var(--ssp-display); font-size: 1.02rem; font-weight: 700; margin: 0 0 17px; }
.site-footer__text { margin: 0 0 .9em; line-height: 1.65; }
.site-footer__address { color: rgba(255,255,255,.56); font-size: .9rem; }
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: var(--ssp-amber); }
.site-footer__list li { margin-bottom: 10px; }

.site-footer__social { display: flex; gap: 10px; margin: 20px 0 0; }
.site-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; transition: background .16s ease, color .16s ease, transform .16s ease; }
.site-footer__social a:hover { background: var(--ssp-amber); color: #fff; transform: translateY(-2px); }
.site-footer__social .icon { width: 20px; height: 20px; }

.site-footer__legal {
	margin: 48px 0 0; padding-top: 26px;
	border-top: 1px solid rgba(255,255,255,.13);
	font-size: .88rem; color: rgba(255,255,255,.62); text-align: center;
}
.site-footer__legal p { margin: 0; }
/* The separator is decorative; it wraps away rather than splitting the line
   awkwardly on a narrow screen. */
.site-footer__legal span { margin: 0 6px; color: rgba(255,255,255,.3); }

/* -------------------------------------------------------------------------
   21. Phone layout — centre the page
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.slide { text-align: center; }
	.slide__inner { padding-top: 40px; padding-bottom: 64px; }
	.slide__text, .slide__lede { margin-inline: auto; }
	.slide__actions { display: flex; justify-content: center; }
	.slider__dots { left: 50%; transform: translateX(-50%); }
	.slide__scrim { background: linear-gradient(180deg, rgba(21,34,56,.6) 0%, rgba(21,34,56,.78) 55%, rgba(21,34,56,.9) 100%); }

	.intro, .section__head, .cta { text-align: center; }
	.intro__lede, .section__lede, .cta__text { margin-inline: auto; }
	.hero__text, .split__text { text-align: center; }
	.hero__lede { margin-inline: auto; }
	.hero__actions, .cta__actions, .section__more, .split__actions { justify-content: center; }

	.card__body, .field__body, .song-card__body { text-align: center; }
	.field__body { align-items: center; }
	.field__more { justify-content: center; }
	.feature { text-align: center; }
	.feature__icon { margin-inline: auto; }
	.age-card { align-items: center; text-align: center; }

	.archive-head, .page__head, .article__head { text-align: center; }
	.archive-head__lede, .page__lede { margin-inline: auto; }
	.breadcrumbs ol { justify-content: center; }
	.search-form { margin-inline: auto; }

	.lesson__head { text-align: center; }
	.lesson__terms { justify-content: center; }
	.lesson__idea { margin-inline: auto; }

	.profile__text { text-align: center; }
	.profile__facts { justify-content: center; }
	.song-feature__text { text-align: center; }
	.link-card { align-items: center; text-align: center; }
	.link-card__icon { margin-inline: auto; }
	.link-card__stores { justify-content: center; }

	.site-footer { text-align: center; }
	.site-footer__social { justify-content: center; }
	.filters { align-items: center; }
	.filter-bar { justify-content: center; }

	/* Body copy stays left aligned — centred paragraphs of prose are hard to
	   read. Only the furniture is centred. */
	.entry-content, .entry-content h2, .entry-content h3 { text-align: left; }
}

/* -------------------------------------------------------------------------
   22. Motion + print
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.button:hover, .card:hover, .age-card:hover, .field:hover, .link-card:hover { transform: none; }
	.slide { transition: none; }
}

@media print {
	.site-header, .site-footer, .breadcrumbs, .lesson__free, .slider,
	.section--sand, .video__play, .nav-toggle { display: none !important; }
	body { background: #fff; font-size: 12pt; color: #000; }
	.wrap { max-width: none; padding: 0; }
	.panel, .verse { border: 1px solid #ccc; background: #fff; }
	a { color: #000; text-decoration: none; }
	.outline__item::before { background: #000; }
}