/* ==========================================================================
   Biblical Soul Care Uganda: brand layer on Twenty Twenty-Five
   Palette (Option 1, Sage & Gold): sage #7A9E7E, gold #C8A24D, ink #2F3437,
   parchment #F8F6F2. Type: Literata (logo serif) + Manrope.
   ========================================================================== */

:root {
	--bsc-sage: var(--wp--preset--color--accent-1, #7A9E7E);
	--bsc-gold: var(--wp--preset--color--accent-2, #C8A24D);
	--bsc-deep: var(--wp--preset--color--accent-3, #3F5E44);
	--bsc-ink: var(--wp--preset--color--contrast, #2F3437);
	--bsc-paper: var(--wp--preset--color--base, #F8F6F2);
	--bsc-linen: var(--wp--preset--color--accent-5, #EEE9DF);
	--bsc-mist: var(--wp--preset--color--sage-mist, #E3EBE2);
	--bsc-serif: var(--wp--preset--font-family--literata, Literata, Georgia, serif);
	--bsc-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Paper grain across the whole site */
body {
	background-color: var(--bsc-paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.2 0 0 0 0 0.21 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--bsc-gold) 45%, transparent); color: var(--bsc-ink); }

a { text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--bsc-gold) 70%, transparent); }

.wp-site-blocks { overflow-x: clip; }
.wp-site-blocks > main { margin-block-start: 0 !important; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.bsc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bsc-paper) 88%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.admin-bar .bsc-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .bsc-header { top: 0; } }
.bsc-header.is-scrolled {
	border-bottom-color: color-mix(in srgb, var(--bsc-ink) 10%, transparent);
	box-shadow: 0 10px 30px -24px rgba(47, 52, 55, .45);
}

.bsc-lockup { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--bsc-ink); }
.bsc-lockup__mark {
	width: 46px; height: 43px; flex: none;
	background: url("../images/bsc-mark.svg") center / contain no-repeat;
	transition: transform .5s var(--bsc-ease);
}
.bsc-lockup:hover .bsc-lockup__mark { transform: translateY(-2px) rotate(-2deg); }
.bsc-lockup__rule { width: 2px; align-self: stretch; min-height: 44px; background: var(--bsc-ink); border-radius: 2px; }
.bsc-lockup__text { display: flex; flex-direction: column; line-height: 1.05; }
.bsc-lockup__name {
	font-family: var(--bsc-serif); font-weight: 700; text-transform: uppercase;
	letter-spacing: .13em; font-size: .98rem;
}
.bsc-lockup__place {
	font-family: var(--bsc-serif); font-weight: 600; letter-spacing: .32em;
	font-size: .7rem; margin-top: .35rem; color: var(--bsc-deep);
}
@media (max-width: 420px) {
	.bsc-lockup { gap: .6rem; }
	.bsc-lockup__mark { width: 36px; height: 34px; }
	.bsc-lockup__name { font-size: .82rem; letter-spacing: .1em; }
	.bsc-lockup__rule { min-height: 36px; }
}

/* Navigation: gold underline that draws in */
.bsc-header .wp-block-navigation-item__content { position: relative; padding-block: .35rem; }
.bsc-header .wp-block-navigation__container > .wp-block-navigation-item:not(.bsc-nav-cta) > .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
	background: var(--bsc-gold); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--bsc-ease);
}
.bsc-header .wp-block-navigation-item__content:hover::after,
.bsc-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }

.bsc-header .bsc-nav-cta > .wp-block-navigation-item__content {
	background: var(--bsc-deep); color: var(--bsc-paper) !important;
	padding: .6rem 1.15rem; border-radius: 999px; transition: background .25s ease;
}
.bsc-header .bsc-nav-cta > .wp-block-navigation-item__content:hover { background: var(--bsc-ink); }

/* Mobile menu overlay. backdrop-filter would trap the fixed overlay inside the header, so drop it while open and on small screens. */
.bsc-header:has(.is-menu-open) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bsc-paper); }
@media (max-width: 599px) {
	.bsc-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--bsc-paper) 97%, transparent); }
}
.bsc-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--bsc-paper) !important;
	padding: clamp(1.5rem, 6vw, 3rem);
}
.bsc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.bsc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	gap: 1.1rem;
}
.bsc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.5rem; }
.bsc-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--bsc-serif); font-size: 1.9rem; text-transform: none;
	letter-spacing: 0; font-weight: 500;
}
.bsc-header .wp-block-navigation__responsive-container.is-menu-open .bsc-nav-cta > .wp-block-navigation-item__content {
	font-family: inherit; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 1rem;
}
.bsc-header .wp-block-navigation__responsive-container-open svg,
.bsc-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */
.bsc-eyebrow {
	display: inline-flex; align-items: center; gap: .8rem;
	font-size: .74rem !important; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
	color: var(--bsc-deep);
}
.bsc-eyebrow::before { content: ""; width: 2.25rem; height: 2px; background: var(--bsc-gold); }
.has-text-align-center.bsc-eyebrow { display: flex; justify-content: center; }
.has-text-align-center.bsc-eyebrow::after { content: ""; width: 2.25rem; height: 2px; background: var(--bsc-gold); }
.bsc-on-dark .bsc-eyebrow, .bsc-eyebrow.is-light { color: var(--bsc-gold); }

.bsc-display { font-family: var(--bsc-serif); font-weight: 400; line-height: 1.04 !important; letter-spacing: -.02em; }
.bsc-display em, .bsc-accent-em em { font-style: italic; color: var(--bsc-deep); font-weight: 400; }
.bsc-on-dark .bsc-display em { color: var(--bsc-gold); }
.bsc-lede { font-size: clamp(1.08rem, 1.6vw, 1.3rem) !important; line-height: 1.65; color: color-mix(in srgb, var(--bsc-ink) 88%, transparent); }
.bsc-serif { font-family: var(--bsc-serif); }
.bsc-muted { color: var(--wp--preset--color--accent-4); }
.bsc-small-caps { font-size: .78rem !important; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }

/* Gold hairline ornament: line + diamond + line */
.bsc-ornament { display: flex; align-items: center; gap: .9rem; color: var(--bsc-gold); margin-block: 0; }
.bsc-ornament::before, .bsc-ornament::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .7; }
.bsc-ornament span { width: 8px; height: 8px; transform: rotate(45deg); background: currentColor; flex: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.bsc-hero { position: relative; isolation: isolate; overflow: hidden; }
.bsc-hero::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: min(62vw, 760px); aspect-ratio: 120 / 112;
	right: -8vw; top: 50%; transform: translateY(-46%);
	background: url("../images/bsc-house-outline.svg") center / contain no-repeat;
	opacity: .55;
}
.bsc-hero::after {
	content: ""; position: absolute; z-index: -2; inset: auto -10% -45% auto;
	width: 70vw; height: 70vw; border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--bsc-gold) 22%, transparent), transparent 70%);
	pointer-events: none;
}
.bsc-hero--page::before { width: min(40vw, 460px); right: -4vw; opacity: .5; }
@media (max-width: 781px) {
	.bsc-hero::before { width: 110vw; right: -45vw; opacity: .3; top: 58%; }
}

.bsc-hero__title { max-width: 15ch; }
.bsc-hero__verse {
	border-left: 2px solid var(--bsc-gold); padding-left: 1.1rem;
	font-family: var(--bsc-serif); font-style: italic; color: var(--wp--preset--color--accent-4);
}

/* Load choreography */
@keyframes bsc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bsc-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bsc-hero .bsc-stagger > * { animation: bsc-rise .9s var(--bsc-ease) both; }
.bsc-hero .bsc-stagger > *:nth-child(1) { animation-delay: .05s; }
.bsc-hero .bsc-stagger > *:nth-child(2) { animation-delay: .18s; }
.bsc-hero .bsc-stagger > *:nth-child(3) { animation-delay: .32s; }
.bsc-hero .bsc-stagger > *:nth-child(4) { animation-delay: .46s; }
.bsc-hero .bsc-stagger > *:nth-child(5) { animation-delay: .6s; }

/* Scroll reveal (enabled by bsc.js; content stays visible without JS) */
.bsc-motion .bsc-reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--bsc-ease), transform .9s var(--bsc-ease); }
.bsc-motion .bsc-reveal.is-visible { opacity: 1; transform: none; }
.bsc-motion .bsc-reveal.is-visible .bsc-card { animation: bsc-rise .8s var(--bsc-ease) both; }
.bsc-motion .bsc-reveal.is-visible .wp-block-column:nth-child(2) .bsc-card { animation-delay: .12s; }
.bsc-motion .bsc-reveal.is-visible .wp-block-column:nth-child(3) .bsc-card { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Roofline divider (the logo's roof as a section edge)
   -------------------------------------------------------------------------- */
.bsc-roof-top { position: relative; }
.bsc-roof-top::before {
	content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(28px, 5vw, 70px);
	background: var(--bsc-paper);
	clip-path: polygon(0 0, 100% 0, 100% 0, 50% 100%, 0 0);
}
.bsc-roof-top.on-linen::before { background: var(--bsc-linen); }
.bsc-roof-top.on-white::before { background: #fff; }

/* Photo with an offset gold frame */
.bsc-framed { position: relative; margin: 0 1.1rem 1.1rem 0; }
.bsc-framed::before {
	content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; z-index: 0;
	border: 1.5px solid var(--bsc-gold); border-radius: 2px;
}
.bsc-framed img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
@media (max-width: 781px) { .bsc-framed img { aspect-ratio: 4 / 3; } }

/* Closing call to action */
.bsc-cta { position: relative; isolation: isolate; overflow: hidden; }
.bsc-cta::before {
	content: ""; position: absolute; z-index: -1; left: 50%; bottom: -12%; transform: translateX(-50%);
	width: min(90vw, 620px); aspect-ratio: 120 / 112; opacity: .14;
	background: url("../images/bsc-house-outline.svg") center / contain no-repeat;
	filter: brightness(1.6);
}

/* --------------------------------------------------------------------------
   Cards, pillars, steps
   -------------------------------------------------------------------------- */
.bsc-card {
	height: 100%;
	background: color-mix(in srgb, #fff 55%, var(--bsc-paper));
	border: 1px solid color-mix(in srgb, var(--bsc-ink) 9%, transparent);
	border-top: 3px solid var(--bsc-gold);
	border-radius: 4px;
	transition: transform .45s var(--bsc-ease), box-shadow .45s var(--bsc-ease);
}
.bsc-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(47, 52, 55, .5); }
.bsc-card h3 { margin-top: .4rem; }
.bsc-card__num {
	font-family: var(--bsc-serif); font-style: italic; font-size: 2.6rem !important; line-height: 1 !important;
	color: var(--bsc-gold);
}
.bsc-card__icon {
	width: 46px; height: 46px; border-radius: 50%;
	display: grid; place-items: center; background: var(--bsc-mist); color: var(--bsc-deep);
	font-family: var(--bsc-serif); font-size: 1.2rem !important; font-weight: 600; margin: 0 !important;
}

.bsc-steps { counter-reset: step; }
.bsc-step { position: relative; padding-left: 4.2rem !important; }
.bsc-step::before {
	counter-increment: step; content: counter(step, decimal-leading-zero);
	position: absolute; left: 0; top: .1rem;
	font-family: var(--bsc-serif); font-style: italic; font-size: 2.2rem; line-height: 1; color: var(--bsc-gold);
}
.bsc-step + .bsc-step { border-top: 1px solid color-mix(in srgb, var(--bsc-ink) 12%, transparent); }

/* Linked cards on the resources page */
.bsc-link-card { text-decoration: none; }
.bsc-card a.bsc-arrow, a.bsc-arrow {
	font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
	color: var(--bsc-deep);
}
a.bsc-arrow::after { content: "  →"; transition: margin .3s var(--bsc-ease); }
a.bsc-arrow:hover::after { margin-left: .35rem; }

/* --------------------------------------------------------------------------
   Scripture panel
   -------------------------------------------------------------------------- */
.bsc-verse { position: relative; isolation: isolate; overflow: hidden; }
.bsc-verse::before {
	content: "\201C"; position: absolute; z-index: -1; left: 50%; top: -.12em; transform: translateX(-50%);
	font-family: var(--bsc-serif); font-size: clamp(14rem, 30vw, 26rem); line-height: 1;
	color: color-mix(in srgb, var(--bsc-gold) 22%, transparent);
}
.bsc-verse__text { font-family: var(--bsc-serif); font-weight: 300; line-height: 1.3 !important; }
.bsc-verse cite, .bsc-verse__ref { font-style: normal; letter-spacing: .24em; text-transform: uppercase; font-size: .78rem !important; font-weight: 700; color: var(--bsc-gold); }

.bsc-on-dark { color: var(--bsc-paper); }
.bsc-on-dark a:not(.wp-block-button__link) { color: var(--bsc-paper); }

/* --------------------------------------------------------------------------
   Content pages
   -------------------------------------------------------------------------- */
.bsc-prose h2 { margin-top: 2.4em; }
.bsc-prose h2:first-child { margin-top: 0; }
.bsc-prose h3 { margin-top: 1.8em; }
.bsc-prose ul li::marker { color: var(--bsc-gold); }

.bsc-aside {
	background: var(--bsc-mist); border-left: 3px solid var(--bsc-deep); border-radius: 0 4px 4px 0;
}
.bsc-aside.is-gold { background: color-mix(in srgb, var(--bsc-gold) 13%, var(--bsc-paper)); border-left-color: var(--bsc-gold); }

.bsc-sticky-col { position: sticky; top: 7.5rem; }
@media (max-width: 781px) { .bsc-sticky-col { position: static; } }

/* Section index (left column labels) */
.bsc-index { font-family: var(--bsc-serif); font-style: italic; color: var(--bsc-gold); font-size: 1.1rem !important; }

/* Counselor portraits (placeholder monogram) */
.bsc-portrait {
	aspect-ratio: 4 / 5; border-radius: 2px; display: grid; place-items: center;
	background:
		url("../images/bsc-house-outline.svg") center 62% / 70% no-repeat,
		linear-gradient(160deg, var(--bsc-mist), var(--bsc-linen));
	font-family: var(--bsc-serif); font-size: 3rem !important; color: var(--bsc-deep);
}

/* Give page: payment method tiles */
.bsc-pay { border: 1px dashed color-mix(in srgb, var(--bsc-deep) 45%, transparent); border-radius: 6px; }
.bsc-pay__number { font-family: var(--bsc-serif); font-size: 1.6rem !important; letter-spacing: .04em; }

/* Buttons: outline variant on dark backgrounds */
.bsc-on-dark .wp-block-button.is-style-outline .wp-block-button__link { color: var(--bsc-paper); border-color: color-mix(in srgb, var(--bsc-paper) 60%, transparent); }
.bsc-on-dark .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--bsc-paper); color: var(--bsc-ink); }
.wp-block-button.is-style-gold .wp-block-button__link, .bsc-btn-gold .wp-block-button__link { background: var(--bsc-gold); color: var(--bsc-ink); }
.bsc-btn-gold .wp-block-button__link:hover { background: var(--bsc-paper); color: var(--bsc-ink); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.bsc-footer { position: relative; background-color: #232729 !important; }
.bsc-footer .bsc-footer__links a { overflow-wrap: anywhere; }
.bsc-footer .bsc-footer__mark {
	width: 64px; height: 60px; background: url("../images/bsc-mark-light.svg") center / contain no-repeat;
}
.bsc-footer a { color: var(--bsc-paper); text-decoration: none; }
.bsc-footer a:hover { color: var(--bsc-gold); }
.bsc-footer .bsc-footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.bsc-footer .bsc-footer__links li { margin: 0; }
.bsc-footer__tagline { font-family: var(--bsc-serif); font-style: italic; font-weight: 300; }
.bsc-footer__base { border-top: 1px solid color-mix(in srgb, var(--bsc-paper) 16%, transparent); }

/* Topic tags (counseling page) */
.bsc-tags {
	list-style: none; padding: 0; margin: var(--wp--preset--spacing--50) auto 0; max-width: 980px;
	display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
}
.bsc-tags li {
	margin: 0; padding: .65rem 1.2rem; border-radius: 999px;
	background: color-mix(in srgb, #fff 70%, var(--bsc-paper));
	border: 1px solid color-mix(in srgb, var(--bsc-deep) 22%, transparent);
	font-family: var(--bsc-serif); font-size: 1.02rem; color: var(--bsc-ink);
	transition: background .3s ease, color .3s ease, transform .3s var(--bsc-ease);
}
.bsc-tags li:hover { background: var(--bsc-deep); color: var(--bsc-paper); transform: translateY(-2px); }

/* Check lists */
.bsc-checks { list-style: none; padding-left: 0; }
.bsc-checks li { position: relative; padding-left: 2rem; margin-top: .8rem; }
.bsc-checks li::before {
	content: ""; position: absolute; left: 0; top: .42em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
	background: var(--bsc-mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.5L12 5.4' fill='none' stroke='%233F5E44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}

/* Belief rows */
.bsc-belief .bsc-index { margin-bottom: .2rem; }

/* Counselor cards */
.bsc-person .bsc-portrait { margin: 0; }
.bsc-person h3 { margin-bottom: 0; }

/* Bookshelf */
.bsc-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2.4rem 2.5rem; }
.bsc-shelf h3 {
	font-family: var(--bsc-serif); font-size: 1.3rem; font-weight: 500; margin: 0 0 .9rem;
	padding-bottom: .6rem; border-bottom: 2px solid var(--bsc-gold);
}
.bsc-shelf ul { list-style: none; margin: 0; padding: 0; }
.bsc-shelf li { margin: 0; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--bsc-ink) 10%, transparent); display: grid; gap: .15rem; }
.bsc-shelf a { text-decoration: none; color: var(--bsc-ink); }
.bsc-shelf a:hover { color: var(--bsc-deep); }
.bsc-shelf cite { font-family: var(--bsc-serif); font-style: italic; font-size: 1.08rem; }
.bsc-shelf span { font-size: .85rem; color: var(--wp--preset--color--accent-4); }

/* Small-screen polish */
@media (max-width: 781px) {
	.bsc-hide-mobile { display: none !important; }
	.bsc-step { padding-left: 3.4rem !important; }
	.bsc-step::before { font-size: 1.8rem; }
}