/* Shepherd site styles. Loaded after the theme, Elementor and the church
   plugins, so these rules set one font pair, one colour set and one card and
   button style across the marketing pages, the plugin pages and the portal. */

:root {
	--sg-ink: #1f2b2b;
	--sg-muted: #566565;
	--sg-teal-dark: #1d3131;
	--sg-teal: #3f6b6c;
	--sg-teal-hover: #335859;
	--sg-gold: #f2c36b;
	--sg-gold-hover: #e8b44f;
	--sg-cream: #f7f3ee;
	--sg-line: #e3dcd2;
	--sg-white: #fff;
	--sg-radius: 12px;
	--sg-gutter: clamp(16px, 4vw, 48px);
	--sg-serif: "Hedvig Letters Serif", Georgia, serif;
	--sg-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Base */
body {
	background: var(--sg-cream);
	color: var(--sg-ink);
	font-family: var(--sg-sans);
	font-size: 16px;
	line-height: 1.65;
}
body #SiteWrapper {
	background: var(--sg-cream);
	width: 100%;
	max-width: none;
}
body h1, body h2, body h3, body h4,
body .entry-content h1, body .entry-content h2, body .entry-content h3 {
	font-family: var(--sg-serif);
	font-weight: 400;
	color: var(--sg-teal-dark);
	letter-spacing: 0;
	line-height: 1.25;
}
body a {
	color: var(--sg-teal);
}
body a:hover,
body a:focus {
	color: var(--sg-teal-dark);
}
#back-top {
	display: none;
}

/* Elementor pages (Features) take the same fonts and colours. */
body.elementor-kit-7 {
	--e-global-typography-primary-font-family: "Hedvig Letters Serif";
	--e-global-typography-primary-font-weight: 400;
	--e-global-typography-secondary-font-family: "Hedvig Letters Serif";
	--e-global-typography-secondary-font-weight: 400;
	--e-global-typography-text-font-family: "Poppins";
	--e-global-typography-accent-font-family: "Poppins";
	--e-global-color-primary: #1d3131;
	--e-global-color-secondary: #3f6b6c;
	--e-global-color-text: #1f2b2b;
	--e-global-color-accent: #3f6b6c;
}
body .elementor-heading-title {
	font-family: var(--sg-serif);
	font-weight: 400;
}

/* Buttons */
.sg-btn,
body .entry-content .wp-block-button__link,
body .church-btn-submit {
	display: inline-block;
	font-family: var(--sg-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	padding: 12px 22px;
	border-radius: 8px;
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.sg-btn-solid,
body .entry-content .wp-block-button__link,
body .church-btn-submit {
	background: var(--sg-teal) !important;
	color: var(--sg-white) !important;
}
.sg-btn-solid:hover,
.sg-btn-solid:focus,
body .entry-content .wp-block-button__link:hover,
body .church-btn-submit:hover {
	background: var(--sg-teal-hover) !important;
	color: var(--sg-white) !important;
}
.sg-btn-gold {
	background: var(--sg-gold);
	color: var(--sg-teal-dark);
}
.sg-btn-gold:hover,
.sg-btn-gold:focus {
	background: var(--sg-gold-hover);
	color: var(--sg-teal-dark);
}
.sg-btn-ghost {
	border-color: rgba(255, 255, 255, .85);
	color: var(--sg-white);
}
.sg-btn-ghost:hover,
.sg-btn-ghost:focus {
	background: rgba(255, 255, 255, .14);
	color: var(--sg-white);
}

/* Header */
.sg-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--sg-white);
	border-bottom: 1px solid var(--sg-line);
}
body.admin-bar .sg-header {
	top: 32px;
}
.sg-header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 12px var(--sg-gutter);
	min-height: 68px;
	box-sizing: border-box;
}
.sg-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--sg-teal-dark);
	font-family: var(--sg-serif);
	font-size: 26px;
	line-height: 1;
	flex: none;
}
.sg-brand img {
	width: 36px;
	height: 36px;
	border-radius: 8px;
}
body a.sg-brand:hover {
	color: var(--sg-teal-dark);
}
.sg-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 1;
}
.sg-nav-links {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0 auto 0 16px;
	padding: 0;
}
.sg-nav-links li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sg-nav-links a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	color: var(--sg-ink);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}
.sg-nav-links a:hover,
.sg-nav-links a:focus {
	background: var(--sg-cream);
	color: var(--sg-teal-dark);
}
.sg-nav-links .current-menu-item a,
.sg-nav-links .current_page_item a {
	color: var(--sg-teal);
	box-shadow: inset 0 -2px 0 var(--sg-gold);
	border-radius: 0;
}
.sg-nav-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}
.sg-nav-signin {
	color: var(--sg-ink);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
}
.sg-nav-actions .sg-btn {
	padding: 10px 18px;
}
.sg-menu-toggle,
.sg-menu-button {
	display: none;
}

@media (max-width: 960px) {
	.sg-header-inner {
		flex-wrap: wrap;
		gap: 0;
	}
	.sg-menu-button {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		margin-left: auto;
		cursor: pointer;
		border-radius: 8px;
	}
	.sg-menu-button span {
		display: block;
		width: 24px;
		height: 2px;
		margin: 0 auto;
		background: var(--sg-teal-dark);
	}
	.sg-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 12px 0 8px;
	}
	.sg-menu-toggle:checked ~ .sg-nav {
		display: flex;
	}
	.sg-nav-links {
		flex-direction: column;
		margin: 0;
	}
	.sg-nav-links a {
		padding: 12px 8px;
		font-size: 16px;
	}
	.sg-nav-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		border-top: 1px solid var(--sg-line);
		padding-top: 12px;
	}
	.sg-nav-signin {
		padding: 8px;
	}
	.sg-nav-actions .sg-btn {
		text-align: center;
	}
}
@media (max-width: 782px) {
	body.admin-bar .sg-header {
		top: 0;
	}
}

/* Photo banner with the page title, the same on every inner page. */
.sg-banner {
	background:
		linear-gradient(90deg, rgba(29, 49, 49, .92) 0%, rgba(29, 49, 49, .72) 55%, rgba(29, 49, 49, .5) 100%),
		url("../images/slides/slider-default1.jpg") center 40% / cover no-repeat;
}
.sg-banner-inner {
	padding: 56px var(--sg-gutter) 48px;
}
body .sg-banner h1 {
	margin: 0;
	color: var(--sg-white);
	font-size: clamp(32px, 5vw, 48px);
	overflow-wrap: anywhere;
}

/* Inner page body: full width with the site gutter, one card around the
   content. */
body .container:has(#tabber-BX) {
	width: 100%;
	max-width: none;
	padding: 0 var(--sg-gutter);
	box-sizing: border-box;
}
body #tabber-BX {
	padding: 40px 0 64px;
}
body .LayoutContent-70 {
	width: 100%;
	float: none;
	padding-right: 0;
}
body .SitePageStyle-2 .entry-title,
body .SitePageStyle-2 h2.entry-title {
	display: none;
}
body .container:has(#tabber-BX) #sidebar {
	display: none;
}
body .SitePageStyle-2 .entry-content:not(:has(.church-reg-card)):not(:has(.church-login-card)):not(:has(.elementor)):not(:has(.church-portal)):not(:has(.cp-auth)):not(:has(.church-org-card)) {
	background: var(--sg-white);
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	box-shadow: 0 1px 3px rgba(29, 49, 49, .06);
	padding: clamp(24px, 4vw, 48px);
	margin: 0;
	box-sizing: border-box;
}
body .entry-content h2 {
	font-size: clamp(26px, 3vw, 32px);
	margin: 0 0 16px;
}
body .entry-content h3 {
	font-size: 22px;
	margin: 32px 0 10px;
}
body .entry-content p,
body .entry-content li {
	color: var(--sg-ink);
	font-size: 16px;
}
.church-reg-card,
.church-login-card {
	max-width: none !important;
	margin: 0 !important;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius) !important;
	box-shadow: 0 1px 3px rgba(29, 49, 49, .06) !important;
}
.cpg-wrap {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
}
.services_box {
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
}
body .church-features-page.container {
	width: 100%;
	max-width: none;
	padding: 40px var(--sg-gutter) 64px;
	box-sizing: border-box;
}
body .church-features-page .services_box {
	background: var(--sg-white) !important;
	box-shadow: 0 1px 3px rgba(29, 49, 49, .06) !important;
	padding: 28px !important;
}
/* Feature card lists use the front page's gold dot, pinned to the first line:
   (24px line - 8px dot) / 2. The plugin's inline list styles need !important. */
body .church-features-page .services_box ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 14px 0 0 !important;
}
body .church-features-page .services_box li {
	position: relative;
	list-style: none;
	margin: 0 0 6px;
	padding-left: 20px;
	line-height: 24px !important;
}
body .church-features-page .services_box li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sg-gold);
}

/* Front page */
.sg-hero {
	background:
		linear-gradient(90deg, rgba(29, 49, 49, .9) 0%, rgba(29, 49, 49, .7) 50%, rgba(29, 49, 49, .35) 100%),
		url("../images/slides/slider-default1.jpg") center / cover no-repeat;
	color: var(--sg-white);
}
.sg-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	padding: clamp(64px, 10vw, 128px) var(--sg-gutter);
}
@media (max-width: 960px) {
	.sg-hero-inner {
		grid-template-columns: minmax(0, 1fr);
	}
}
body .sg-hero h1 {
	color: var(--sg-white);
	font-size: clamp(36px, 6vw, 64px);
	line-height: 1.1;
	margin: 0 0 20px;
}
.sg-hero p {
	color: rgba(255, 255, 255, .92);
	font-size: clamp(17px, 2vw, 20px);
	margin: 0 0 32px;
}
.sg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.sg-section-inner {
	padding: 0 var(--sg-gutter);
}
.sg-section {
	padding: clamp(48px, 7vw, 88px) 0;
}
.sg-section-tint {
	background: #efe8de;
}
body .sg-section-title {
	font-size: clamp(28px, 3.5vw, 40px);
	margin: 0 0 28px;
}
.sg-lead {
	font-size: 18px;
	color: var(--sg-muted);
	margin: -12px 0 24px;
}
.sg-grid {
	display: grid;
	gap: 20px;
	margin: 0;
	padding: 0;
}
.sg-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sg-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sg-card {
	background: var(--sg-white);
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	padding: 24px;
	list-style: none;
	margin: 0;
}
body .sg-card h3 {
	font-size: 22px;
	margin: 0 0 8px;
}
.sg-card p {
	margin: 0;
	color: var(--sg-muted);
}
.sg-photo-card {
	padding: 0;
	overflow: hidden;
}
.sg-photo-card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.sg-card-body {
	padding: 20px 22px 24px;
}
.sg-facts {
	background: var(--sg-teal-dark);
	padding: 36px 0;
}
body .sg-fact h2 {
	color: var(--sg-gold);
	font-size: 22px;
	margin: 0 0 6px;
}
.sg-fact p {
	color: rgba(255, 255, 255, .85);
	margin: 0;
}
.sg-steps {
	counter-reset: sg-step;
}
.sg-steps li {
	counter-increment: sg-step;
}
.sg-steps li::before {
	content: counter(sg-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--sg-gold);
	color: var(--sg-teal-dark);
	font-weight: 600;
}
.sg-feature-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px 20px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.sg-feature-list li {
	position: relative;
	margin: 0;
	padding: 10px 14px 10px 32px;
	background: var(--sg-white);
	border: 1px solid var(--sg-line);
	border-radius: 8px;
	font-size: 15px;
	line-height: 24px;
	font-weight: 500;
}
/* Dot sits on the first line of text: 10px padding plus (24px line - 8px dot) / 2. */
.sg-feature-list li::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 18px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sg-gold);
}
.sg-link {
	font-weight: 600;
}
.sg-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
}
.sg-split p {
	font-size: 17px;
}
.sg-faq details {
	background: var(--sg-white);
	border: 1px solid var(--sg-line);
	border-radius: 8px;
	margin: 0 0 10px;
	padding: 0 18px;
}
.sg-faq summary {
	cursor: pointer;
	padding: 14px 0;
	font-weight: 600;
	color: var(--sg-teal-dark);
}
.sg-faq details p {
	margin: 0 0 16px;
	color: var(--sg-muted);
}
.sg-cta {
	background: var(--sg-teal);
	padding: clamp(48px, 7vw, 80px) 0;
	color: var(--sg-white);
}
body .sg-cta h2 {
	color: var(--sg-white);
	font-size: clamp(28px, 3.5vw, 40px);
	margin: 0 0 10px;
}
.sg-cta p {
	color: rgba(255, 255, 255, .88);
	margin: 0 0 24px;
	font-size: 17px;
}

@media (max-width: 1100px) {
	.sg-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 760px) {
	.sg-grid-3,
	.sg-grid-4,
	.sg-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Footer */
.sg-footer {
	background: var(--sg-teal-dark);
	color: rgba(255, 255, 255, .8);
}
.sg-footer-inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
	padding: 56px var(--sg-gutter) 40px;
}
.sg-brand-light,
body a.sg-brand-light:hover {
	color: var(--sg-white);
}
.sg-footer-brand p {
	margin: 14px 0 0;
}
body .sg-footer h2 {
	font-family: var(--sg-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sg-gold);
	margin: 0 0 14px;
}
.sg-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sg-footer li {
	margin: 0 0 8px;
}
body .sg-footer a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}
body .sg-footer a:hover,
body .sg-footer a:focus {
	color: var(--sg-white);
	text-decoration: underline;
}
.sg-footer-legal {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 18px var(--sg-gutter);
	font-size: 14px;
	color: rgba(255, 255, 255, .65);
}
@media (max-width: 760px) {
	.sg-footer-inner {
		grid-template-columns: 1fr 1fr;
	}
	.sg-footer-brand {
		grid-column: 1 / -1;
	}
}

/* Member portal (body.sg-app): the portal is the page. One white card with a
   white sidebar, site fonts, sitting right under the header. */
body.sg-app #tabber-BX {
	padding: 24px 0 48px;
}
body.sg-app .church-portal,
body.sg-app .cp-auth {
	--font-display: "Hedvig Letters Serif", Georgia, serif;
	--font-body: "Poppins", system-ui, -apple-system, sans-serif;
	--color-bg: #f7f3ee;
	--color-border: #e3dcd2;
	--color-border-light: #ece6dd;
}
body.sg-app .church-portal {
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	box-shadow: 0 1px 3px rgba(29, 49, 49, .06);
}
body.sg-app .cp-nav {
	background: var(--sg-white);
}
/* One white surface: sidebar and content share it, forms and cards inside
   are outlined so nothing sits in a box inside a box of another colour. */
body.sg-app .cp-main {
	background: var(--sg-white);
}
body.sg-app .cp-form,
body.sg-app .cp-card {
	border-color: var(--sg-line);
	box-shadow: none;
}
body.sg-app .cp-main {
	scroll-margin-top: 84px;
}
body.sg-app .cp-auth {
	padding: 0;
}
body.sg-app .cp-auth__box {
	max-width: none;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	box-shadow: 0 1px 3px rgba(29, 49, 49, .06);
}
@media (max-width: 680px) {
	body.sg-app .container:has(#tabber-BX) {
		padding: 0;
	}
	body.sg-app #tabber-BX {
		padding: 0 0 32px;
	}
	body.sg-app .church-portal {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}
	body.sg-app .cp-nav {
		background: var(--sg-cream);
	}
}

/* Organization and profile cards (my-profile, my-organizations, directory):
   the card is the page body, full width, same edge as other cards. */
.church-org-card {
	max-width: none !important;
	margin: 0 0 20px !important;
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius) !important;
	box-shadow: 0 1px 3px rgba(29, 49, 49, .06) !important;
	padding: clamp(24px, 4vw, 48px) !important;
}