/* Klisia's public pages (026 §2). Colours come from Website Branding's --brand-* variables, so
   the publisher changes them on Desk; the fallbacks are Klisia's navy and blue. --k-dark is the
   primary deepened (the WordPress site's #151f33), and --k-warm the gold of its rules and glows. */
.klisia-site { --k-primary: var(--brand-primary, #0d3049); --k-blue: var(--brand-secondary, #2473f7);
	--k-sky: var(--brand-tertiary, #44b2f7);
	--k-dark: color-mix(in srgb, var(--k-primary) 70%, #000); --k-warm: #ffba5a;
	--k-accent: var(--brand-accent, #077ddf); font-family: "Open Sans", var(--brand-body-font, sans-serif); }
.klisia-site h1, .klisia-site h2, .klisia-site h3, .klisia-site h4 { font-family: "Inter", var(--brand-heading-font, sans-serif); }
.klisia-site .k-hero { position: relative; color: #fff; padding: 6rem 1rem 5rem; text-align: center;
	background: linear-gradient(180deg, color-mix(in srgb, var(--k-dark) 15%, transparent) 0%,
		color-mix(in srgb, var(--k-dark) 45%, transparent) 55%, var(--k-dark) 100%), var(--k-hero) center / cover no-repeat; }
.klisia-site .k-hero h1, .klisia-site .k-hero h2, .klisia-site .k-hero .k-lead { text-shadow: 0 0 0.8em rgba(0, 17, 51, 0.55); }
/* The home page's two tabs hang half below the hero, in the brand's two blues. */
.klisia-site .k-hero:has(.k-hero-tabs) { padding-bottom: 0; }
.klisia-site .k-hero:has(.k-hero-tabs) + .k-section { padding-top: 6.5rem; }
.klisia-site .k-hero-tabs { display: flex; justify-content: center; margin: 3rem auto 0; max-width: 40rem;
	position: relative; z-index: 1; transform: translateY(2.6rem); }
.klisia-site .k-hero-tab { flex: 1 1 0; padding: 1.85rem 1.25rem; border-radius: 10px 0 0 0; background: var(--k-primary);
	color: #fff; font-weight: 700; font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
	box-shadow: 0 12px 100px -6px color-mix(in srgb, var(--k-warm) 60%, transparent);
	transition: transform 0.3s ease, border-radius 0.3s ease; }
/* White text on the brand blues is darkened to WCAG AA's 4.5:1 (051 §7). */
.klisia-site .k-hero-tab--give { background: color-mix(in srgb, var(--k-blue) 88%, #000); }
.klisia-site .k-hero-tab:hover, .klisia-site .k-hero-tab:focus { color: #fff; text-decoration: none;
	transform: translateY(-0.35rem); border-radius: 10px 10px 0 0; }
@media (max-width: 576px) { .klisia-site .k-hero-tabs { flex-direction: column; } }
.klisia-site .k-hero h3 { color: #fff; }
.klisia-site .k-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; color: #fff; }
.klisia-site .k-hero h2 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 500; color: #fff; text-transform: none; }
.klisia-site .k-hero .k-lead { max-width: 46rem; margin: 1.5rem auto 0; font-size: 1.1rem; }
.klisia-site .k-buttons { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.klisia-site .k-btn { display: inline-block; padding: 0.7rem 1.6rem; border-radius: 2rem; font-weight: 600;
	background: color-mix(in srgb, var(--k-accent) 88%, #000); color: #fff; text-decoration: none; }
.klisia-site button.k-btn { border: 0; }
.klisia-site .k-btn:hover { filter: brightness(0.92); color: #fff; text-decoration: none; }
.klisia-site .k-btn--ghost { background: transparent; border: 2px solid #fff; }
.klisia-site .k-section--tint .k-btn--ghost { color: var(--k-primary); border-color: var(--k-primary); }
.klisia-site .k-section--tint .k-btn--ghost:hover { color: var(--k-primary); }
/* A link inside text is underlined, not told apart by its colour alone (WCAG 1.4.1). */
.klisia-site :is(p, li, dd, td) a:not(.btn):not(.k-btn) { text-decoration: underline; }
/* Bootstrap's muted grey is too light on the site's backgrounds (WCAG 1.4.3). */
.klisia-site .text-muted { color: #595959 !important; }
.klisia-site .btn-outline-secondary { color: #595959; border-color: #595959; }
.klisia-site .k-section { padding: 4rem 1rem; }
.klisia-site .k-section--tint { background: #f6f3fa; }
.klisia-site .k-section--dark { background: var(--k-dark); color: #fff; }
.klisia-site .k-section.k-section--dark h2, .klisia-site .k-section--dark a { color: #fff; }
.klisia-site .k-wrap { max-width: 68rem; margin: 0 auto; }
.klisia-site .k-narrow { max-width: 46rem; margin: 0 auto; }
.klisia-site .k-section h2 { color: var(--k-primary); font-weight: 700; margin-bottom: 1.5rem; }
.klisia-site .k-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.klisia-site .k-card h3 { font-size: 1.15rem; color: var(--k-primary); text-transform: capitalize; }
/* A short gold rule under a heading, and a section lit by soft gold glows at its edges. */
.klisia-site .k-rule { width: 5rem; margin: -0.5rem 0 2.5rem; border: 0; border-top: 3px solid var(--k-warm); opacity: 1; }
.klisia-site .k-section--glow {
	background: radial-gradient(60% 35% at 50% 0%, color-mix(in srgb, var(--k-warm) 22%, transparent), transparent 70%),
		radial-gradient(45% 30% at 85% 100%, color-mix(in srgb, var(--k-warm) 18%, transparent), transparent 70%); }
/* Feature cards: a bracket on the top and left edges, and small capitals for the titles. */
.klisia-site .k-features { align-items: start; }
.klisia-site .k-features .k-card { padding: 1.25rem 0 0 1.25rem; border-top: 3px solid; border-left: 3px solid;
	border-color: color-mix(in srgb, var(--k-warm) 30%, transparent); border-radius: 10px 0 0 0; }
.klisia-site .k-features .k-card h3 { font-size: 0.9rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 0; }
.klisia-site .k-split { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.klisia-site .k-split img, .klisia-site figure img { width: 100%; border-radius: 0.5rem; }
.klisia-site figcaption { font-size: 0.8rem; color: #6c757d; margin-top: 0.4rem; }
.klisia-site .k-quote { font-style: italic; border-left: 4px solid var(--k-accent); padding-left: 1rem; }
.klisia-site .k-person { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.klisia-site .k-person img { width: 8rem; height: 8rem; object-fit: cover; border-radius: 50%; }
.klisia-site .k-steps { counter-reset: none; list-style: none; padding: 0; }
.klisia-site .k-steps li { margin-bottom: 1.5rem; }
.klisia-site .k-steps h3 { font-size: 1.1rem; color: var(--k-primary); }
.klisia-site .k-subscribe { display: flex; gap: 0.5rem; max-width: 30rem; margin: 1rem auto 0; }
.klisia-site .k-books { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.klisia-site .k-book img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
.klisia-site .k-book .k-nocover { aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center;
	padding: 1rem; text-align: center; background: var(--k-primary); color: #fff; font-weight: 600; }
.klisia-site .k-book h3 { font-size: 1rem; margin: 0.6rem 0 0.2rem; }
.klisia-site .k-book p { font-size: 0.85rem; margin: 0; color: #555; }
/* Books seeking funding (034 §1). */
.klisia-site .k-progress { height: 6px; margin: 0.4rem 0 0.3rem; border-radius: 3px; background: rgba(0, 0, 0, 0.1); overflow: hidden; }
.klisia-site .k-progress span { display: block; height: 100%; background: var(--k-primary); }
.klisia-notice { background: var(--brand-accent, #f59038); color: #fff; text-align: center; padding: 0.6rem 1rem; font-weight: 600; }
@media (max-width: 576px) { .klisia-site .k-person { grid-template-columns: 1fr; } .klisia-site .k-subscribe { flex-direction: column; } }
/* The embedded donation form: koinonia's widget, which keeps its own colours (koinonia 0004a). */
.klisia-site .k-give-form { max-width: 42rem; margin: 2rem auto; text-align: left; }
/* The home page's newsletter: a navy card with slanted sky-blue bands, beside the Acts 2 passage. */
.klisia-site .k-newsletter { display: grid; gap: 3rem; align-items: center; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.klisia-site .k-newsletter__card { position: relative; overflow: hidden; padding: 2.5rem 2rem; border-radius: 10px 0 0 0;
	background: var(--k-primary); color: #fff; box-shadow: 0 12px 60px -12px color-mix(in srgb, var(--k-primary) 45%, transparent); }
.klisia-site .k-newsletter__card::before { content: ""; position: absolute; inset: 0; background: var(--k-sky);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg stroke='%23000' stroke-width='40' stroke-linecap='round'%3E%3Cpath d='M140 340L330 30'/%3E%3Cpath d='M210 340L440 -30'/%3E%3Cpath d='M270 240L420 0'/%3E%3Cpath d='M310 340L430 150'/%3E%3C/g%3E%3C/svg%3E") right / auto 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cg stroke='%23000' stroke-width='40' stroke-linecap='round'%3E%3Cpath d='M140 340L330 30'/%3E%3Cpath d='M210 340L440 -30'/%3E%3Cpath d='M270 240L420 0'/%3E%3Cpath d='M310 340L430 150'/%3E%3C/g%3E%3C/svg%3E") right / auto 100% no-repeat; opacity: 0.85; }
.klisia-site .k-newsletter__card > * { position: relative; }
.klisia-site .k-section .k-newsletter__card h2 { color: #fff; font-weight: 300; margin: 0.25rem 0 1rem; }
.klisia-site .k-newsletter__card .form-control { height: auto; padding: 0.7rem 1.1rem; border: 0; border-radius: 2rem; }
.klisia-site .k-newsletter__card .k-subscribe { margin: 1.25rem 0 0; }
.klisia-site .k-newsletter__card .k-btn { background: color-mix(in srgb, var(--k-blue) 88%, #000); }
.klisia-site .k-passage { position: relative; margin: 0; padding-top: 3.5rem; font-size: 1.2rem; line-height: 1.9; color: #4b5563; }
.klisia-site .k-passage::before { content: "\201C"; position: absolute; top: -0.5rem; left: 0; font: 700 5rem/1 Georgia, serif;
	color: var(--k-warm); }