/**
 * CCC Fable Modern — front-end styles.
 *
 * Image-led, warm, accessible design system for Connect Community Church.
 * Scoped under .ccc-* classes so it layers cleanly over the Kadence parent
 * theme without fighting its defaults. Mobile-first and responsive.
 *
 * v2.1: the homepage now lives as editable Gutenberg blocks in the "Home"
 * page, so these rules target core block markup (.wp-block-group,
 * .wp-block-image figures, .wp-block-button wrappers, core/details) that
 * carries the same ccc-* classes.
 */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
	/* Warm, welcoming palette — deep teal + warm amber on soft cream. */
	--ccc-ink: #1f2a30;
	--ccc-ink-soft: #43555e;
	--ccc-cream: #fbf7f1;
	--ccc-surface: #ffffff;
	--ccc-surface-alt: #f4ede3;
	--ccc-primary: #146b6b;      /* deep teal */
	--ccc-primary-dark: #0e4f4f;
	--ccc-accent: #e08a3c;       /* warm amber */
	--ccc-accent-dark: #c4702a;
	--ccc-line: #e6ddd0;
	--ccc-focus: #14545f;
	--ccc-scrim: rgba(9, 26, 30, 0.55);

	--ccc-radius: 16px;
	--ccc-radius-sm: 10px;
	--ccc-shadow: 0 12px 30px -18px rgba(20, 42, 48, 0.45);
	--ccc-shadow-lg: 0 24px 60px -28px rgba(20, 42, 48, 0.5);

	--ccc-maxw: 1160px;
	--ccc-gap: clamp(1rem, 3vw, 2rem);

	--ccc-font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
	--ccc-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* -------------------------------------------------------------------------
   2. Base scaffolding
   ------------------------------------------------------------------------- */
.ccc-main {
	background: var(--ccc-cream);
	color: var(--ccc-ink);
	font-family: var(--ccc-font-body);
	line-height: 1.65;
}

.ccc-main :where(h1, h2, h3) {
	font-family: var(--ccc-font-head);
	line-height: 1.15;
	color: var(--ccc-ink);
	margin: 0 0 0.5em;
}

/* Block image figures should never bring their own margins. */
.ccc-main figure.wp-block-image { margin: 0; }

.ccc-container {
	width: min(100% - 2.5rem, var(--ccc-maxw));
	margin-inline: auto;
}

/* Neutralize WordPress block-gap margins inside containers we lay out
   ourselves (grid/flex/absolute). Explicit margins below still win. */
.ccc-hero__slides > *,
.ccc-slide > *,
.ccc-paths__grid > *,
.ccc-connect__inner > *,
.ccc-welcome__inner > *,
.ccc-give__inner > *,
.ccc-section-head--row > *,
.ccc-accordion > *,
.ccc-details > * {
	margin-block: 0;
}

.ccc-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ccc-primary);
	margin: 0 0 0.75rem;
}

.ccc-eyebrow--light { color: #ffd9a8; }

.ccc-section-head {
	max-width: 56ch;
	margin: 0 auto clamp(2rem, 5vw, 3rem);
	text-align: center;
}

.ccc-section-head h2 {
	font-size: clamp(1.65rem, 3.5vw, 2.5rem);
}

.ccc-section-head p {
	color: var(--ccc-ink-soft);
	font-size: 1.05rem;
	margin: 0;
}

.ccc-section-head p.ccc-eyebrow {
	color: var(--ccc-primary);
	margin: 0 0 0.75rem;
}

.ccc-section-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	max-width: none;
	text-align: left;
	flex-wrap: wrap;
}

.ccc-section-head--row p {
	margin-top: 0.35rem;
}

/* Section rhythm */
.ccc-paths,
.ccc-connect,
.ccc-welcome,
.ccc-events,
.ccc-give,
.ccc-invite {
	padding-block: clamp(3rem, 7vw, 5.5rem);
	margin-block: 0;
}

.ccc-paths { background: var(--ccc-surface); }
.ccc-connect { background: var(--ccc-primary-dark); }
.ccc-welcome { background: var(--ccc-surface-alt); }
.ccc-events { background: var(--ccc-surface); }


/* -------------------------------------------------------------------------
   2a. Desktop site header
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	body.non-transparent-header #masthead.site-header {
		background:
			linear-gradient(135deg, rgba(251, 247, 241, 0.98) 0%, rgba(244, 237, 227, 0.96) 100%);
		border-bottom: 1px solid rgba(230, 221, 208, 0.95);
		box-shadow: 0 18px 45px -36px rgba(20, 42, 48, 0.55);
	}

	#masthead .site-main-header-wrap .site-header-row-container-inner {
		background: transparent;
	}

	#masthead .site-container {
		max-width: var(--ccc-maxw);
	}

	#masthead .site-main-header-inner-wrap {
		min-height: 116px;
		gap: clamp(1.5rem, 4vw, 3.5rem);
	}

	#masthead .site-branding .brand {
		display: inline-flex;
		align-items: center;
		gap: 1rem;
		text-decoration: none;
	}

	#masthead .site-branding .custom-logo {
		width: clamp(96px, 8vw, 124px);
		height: clamp(96px, 8vw, 124px);
		object-fit: contain;
		filter: drop-shadow(0 12px 18px rgba(31, 42, 48, 0.12));
	}

	#masthead .site-title {
		max-width: 19ch;
		font-family: var(--ccc-font-head);
		font-size: clamp(1.55rem, 2.1vw, 2rem);
		font-weight: 800;
		line-height: 1.05;
		letter-spacing: -0.025em;
		color: var(--ccc-ink);
	}

	#masthead .site-header-main-section-right {
		align-items: center;
	}

	#masthead .main-navigation .primary-menu-container > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		gap: 0.45rem 0.55rem;
		max-width: 560px;
	}

	#masthead .main-navigation .primary-menu-container > ul > li {
		margin: 0;
	}

	#masthead .main-navigation .primary-menu-container > ul > li > a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 0;
		padding: 0.55rem 0.85rem;
		border-radius: 999px;
		font-family: var(--ccc-font-head);
		font-size: 0.98rem;
		font-weight: 650;
		line-height: 1.1;
		letter-spacing: -0.01em;
		color: var(--ccc-ink-soft);
		text-decoration: none;
		transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	}

	#masthead .main-navigation .primary-menu-container > ul > li > a:hover,
	#masthead .main-navigation .primary-menu-container > ul > li.current-menu-item > a,
	#masthead .main-navigation .primary-menu-container > ul > li.current_page_item > a {
		background: rgba(20, 107, 107, 0.11);
		color: var(--ccc-primary-dark);
		transform: translateY(-1px);
	}

	#masthead .main-navigation .primary-menu-container > ul > li.menu-item-488 > a {
		background: var(--ccc-accent);
		color: #2a1a08;
		box-shadow: 0 14px 28px -20px rgba(224, 138, 60, 0.8);
	}

	#masthead .main-navigation .primary-menu-container > ul > li.menu-item-488 > a:hover {
		background: var(--ccc-accent-dark);
		color: #fff;
	}

	#masthead .main-navigation .primary-menu-container > ul > li.menu-item-has-children > a .nav-drop-title-wrap {
		display: inline-flex;
		align-items: center;
		gap: 0.18rem;
	}

	#masthead .main-navigation .primary-menu-container > ul > li.menu-item-has-children .dropdown-nav-toggle {
		padding-left: 0.05rem;
	}

	#masthead .main-navigation .sub-menu {
		border: 1px solid rgba(230, 221, 208, 0.95);
		border-radius: var(--ccc-radius-sm);
		box-shadow: var(--ccc-shadow);
		overflow: hidden;
	}
}

/* -------------------------------------------------------------------------
   3. Buttons — bare anchors and core Button blocks share one look
   ------------------------------------------------------------------------- */
a.ccc-btn,
.wp-block-button.ccc-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	font-family: var(--ccc-font-head);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	box-shadow: none;
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

a.ccc-btn:hover,
.wp-block-button.ccc-btn > .wp-block-button__link:hover { transform: translateY(-2px); }

a.ccc-btn--primary,
.ccc-btn--primary > .wp-block-button__link {
	background: var(--ccc-accent);
	color: #2a1a08;
	box-shadow: var(--ccc-shadow);
}
a.ccc-btn--primary:hover,
.ccc-btn--primary > .wp-block-button__link:hover { background: var(--ccc-accent-dark); color: #fff; }

a.ccc-btn--ghost,
.ccc-btn--ghost > .wp-block-button__link {
	background: transparent;
	color: var(--ccc-primary);
	border-color: currentColor;
}
a.ccc-btn--ghost:hover,
.ccc-btn--ghost > .wp-block-button__link:hover { background: var(--ccc-primary); color: #fff; border-color: var(--ccc-primary); }

a.ccc-btn--link,
.ccc-btn--link > .wp-block-button__link {
	background: transparent;
	color: inherit;
	padding-inline: 0.25rem;
	text-decoration: underline;
	text-underline-offset: 4px;
	box-shadow: none;
}
a.ccc-btn--link:hover,
.ccc-btn--link > .wp-block-button__link:hover { color: var(--ccc-accent-dark); background: transparent; }

/* -------------------------------------------------------------------------
   4. Hero slideshow
   ------------------------------------------------------------------------- */
.ccc-hero {
	position: relative;
	isolation: isolate;
	color: #fff;
	background: var(--ccc-primary-dark);
	min-height: min(92vh, 780px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	margin: 0;
}

.ccc-hero__slides {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ccc-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease, visibility 0.9s ease;
}

/* First slide stays visible before (or without) JavaScript. */
.ccc-slide.is-active,
.ccc-hero:not(.is-ready) .ccc-slide:first-child {
	opacity: 1;
	visibility: visible;
}

.ccc-slide__img {
	position: absolute;
	inset: 0;
	margin: 0;
}

.ccc-slide__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Slow Ken Burns drift on the active slide for a video-like feel. */
.ccc-slide.is-active .ccc-slide__img img,
.ccc-hero:not(.is-ready) .ccc-slide:first-child .ccc-slide__img img {
	animation: ccc-kenburns 9s ease-out forwards;
}

@keyframes ccc-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.07); }
}

/* Readability scrim over each slide photo. */
.ccc-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(9, 26, 30, 0.35) 0%, rgba(9, 26, 30, 0.15) 40%, rgba(9, 26, 30, 0.78) 100%),
		linear-gradient(100deg, rgba(9, 26, 30, 0.72) 0%, rgba(9, 26, 30, 0.25) 60%, transparent 100%);
}

.ccc-slide__content {
	position: relative;
	z-index: 1;
	width: min(100% - 2.5rem, var(--ccc-maxw));
	max-width: var(--ccc-maxw);
	padding-block: clamp(6rem, 14vw, 9rem) clamp(7rem, 16vw, 10rem);
}

.ccc-slide__eyebrow { color: #ffd9a8; }

.ccc-slide__title {
	font-family: var(--ccc-font-head);
	font-weight: 700;
	color: #fff;
	font-size: clamp(2.25rem, 6vw, 4.25rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	max-width: 18ch;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.ccc-slide__lead {
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	color: rgba(255, 255, 255, 0.94);
	margin: 0 0 1.75rem;
	max-width: 46ch;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.wp-block-buttons.ccc-slide__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin: 0;
}

.ccc-slide__actions .ccc-btn--ghost > .wp-block-button__link { color: #fff; }
.ccc-slide__actions .ccc-btn--ghost > .wp-block-button__link:hover { background: #fff; color: var(--ccc-primary-dark); }

/* Gentle entrance for the caption when a slide becomes active. */
.ccc-slide__content > * {
	opacity: 0;
	transform: translateY(16px);
}
.ccc-slide.is-active .ccc-slide__content > *,
.ccc-hero:not(.is-ready) .ccc-slide:first-child .ccc-slide__content > * {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease 0.25s, transform 0.7s ease 0.25s;
}

/* Controls (built by ccc-fable-modern.js once slides are detected) */
.ccc-hero__controls {
	position: relative;
	display: none;
	align-items: center;
	gap: 0.75rem;
	width: min(100% - 2.5rem, var(--ccc-maxw));
	margin-inline: auto;
	padding-bottom: 1rem;
}

.ccc-hero.is-ready .ccc-hero__controls { display: flex; }

.ccc-hero__arrow,
.ccc-hero__pause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	background: rgba(9, 26, 30, 0.45);
	color: #fff;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.ccc-hero__arrow:hover,
.ccc-hero__pause:hover {
	background: var(--ccc-accent);
	border-color: var(--ccc-accent);
	color: #2a1a08;
	transform: translateY(-2px);
}

.ccc-hero__pause { margin-left: 0.25rem; font-size: 0.8rem; }
.ccc-hero__pause-icon--play { display: none; }
.ccc-hero__pause[aria-pressed="true"] .ccc-hero__pause-icon--pause { display: none; }
.ccc-hero__pause[aria-pressed="true"] .ccc-hero__pause-icon--play { display: inline; }

.ccc-hero__dots {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-inline: 0.25rem;
}

.ccc-hero__dot {
	width: 0.75rem;
	height: 0.75rem;
	padding: 0;
	border-radius: 999px;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, width 0.2s ease, border-color 0.2s ease;
}

.ccc-hero__dot:hover { border-color: #fff; background: rgba(255, 255, 255, 0.5); }

.ccc-hero__dot.is-active {
	width: 2rem;
	background: var(--ccc-accent);
	border-color: var(--ccc-accent);
}

/* Service basics strip pinned to the hero bottom */
ul.ccc-hero__meta {
	position: relative;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	width: min(100% - 2.5rem, var(--ccc-maxw));
	margin: 0 auto;
	padding: 0.9rem 0 1.4rem;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.92);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.ccc-hero__meta li { position: relative; margin: 0; }
.ccc-hero__meta li + li::before {
	content: "•";
	position: absolute;
	left: -1.05rem;
	color: rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------------------------------
   5. Quick links bar
   ------------------------------------------------------------------------- */
.ccc-quicklinks {
	background: var(--ccc-ink);
	margin: 0;
}

.wp-block-buttons.ccc-quicklinks__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	justify-content: center;
	padding-block: 0.6rem;
}

.wp-block-button.ccc-quicklink > .wp-block-button__link {
	background: transparent;
	border: none;
	box-shadow: none;
	color: #fff;
	text-decoration: none;
	font-family: var(--ccc-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.4;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-button.ccc-quicklink > .wp-block-button__link:hover { background: var(--ccc-accent); color: #2a1a08; }

/* -------------------------------------------------------------------------
   6. Visual exploration cards
   ------------------------------------------------------------------------- */
.ccc-paths__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--ccc-gap);
}

.ccc-path {
	position: relative;
	border-radius: var(--ccc-radius);
	overflow: hidden;
	color: #fff;
	box-shadow: var(--ccc-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	isolation: isolate;
	cursor: pointer;
	margin: 0;
}

.ccc-path:hover,
.ccc-path:focus-within {
	transform: translateY(-5px);
	box-shadow: var(--ccc-shadow-lg);
}

.ccc-path__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin: 0;
}

.ccc-path__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.ccc-path:hover .ccc-path__media img,
.ccc-path:focus-within .ccc-path__media img {
	transform: scale(1.06);
}

/* Readability scrim over the card photo. */
.ccc-path::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(9, 26, 30, 0.45) 60%, rgba(9, 26, 30, 0.92) 100%);
	pointer-events: none;
}

.ccc-path__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	display: grid;
	gap: 0.2rem;
	padding: 1.25rem 1.4rem 1.3rem;
	margin: 0;
}

.ccc-path__body > * { margin: 0; }

h3.ccc-path__title {
	color: #fff;
	font-family: var(--ccc-font-head);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	margin: 0;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.ccc-path__text {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.45;
	margin: 0;
}

.ccc-path__more { margin: 0.5rem 0 0; }

.ccc-path__more a {
	display: inline-flex;
	align-items: center;
	font-family: var(--ccc-font-head);
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #ffd9a8;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ccc-path__more a::after {
	content: "\2192";
	margin-left: 0.35rem;
	transition: margin-left 0.2s ease;
}

.ccc-path:hover .ccc-path__more a,
.ccc-path:focus-within .ccc-path__more a { color: var(--ccc-accent); }
.ccc-path:hover .ccc-path__more a::after,
.ccc-path:focus-within .ccc-path__more a::after { margin-left: 0.7rem; }

/* -------------------------------------------------------------------------
   7. Let's Connect media band
   ------------------------------------------------------------------------- */
.ccc-connect { color: #fff; }

.ccc-connect__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.ccc-connect__media {
	position: relative;
	display: block;
	border-radius: var(--ccc-radius);
	overflow: hidden;
	box-shadow: var(--ccc-shadow-lg);
	isolation: isolate;
	margin: 0;
}

.ccc-connect__media a {
	display: block;
	position: relative;
}

.ccc-connect__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ccc-connect__media:hover img,
.ccc-connect__media:focus-within img {
	transform: scale(1.04);
}

/* Play badge drawn in CSS over the video thumbnail. */
.ccc-connect__media a::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: rgba(9, 26, 30, 0.6);
	border: 2px solid rgba(255, 255, 255, 0.85);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ccc-connect__media a::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-35%, -50%);
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #fff;
	transition: border-color 0.2s ease;
}

.ccc-connect__media:hover a::before,
.ccc-connect__media a:focus-visible::before {
	background: var(--ccc-accent);
	transform: scale(1.08);
}

.ccc-connect__media:hover a::after,
.ccc-connect__media a:focus-visible::after {
	border-left-color: #2a1a08;
}

.ccc-connect__body h2 {
	color: #fff;
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

.ccc-connect__body > p {
	color: rgba(255, 255, 255, 0.9);
	margin: 0 0 1.5rem;
}

.ccc-connect__body p.ccc-eyebrow { color: #ffd9a8; margin: 0 0 0.75rem; }

.wp-block-buttons.ccc-connect__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.ccc-connect__actions .ccc-btn--ghost > .wp-block-button__link { color: #fff; }
.ccc-connect__actions .ccc-btn--ghost > .wp-block-button__link:hover { background: #fff; color: var(--ccc-primary-dark); }

/* -------------------------------------------------------------------------
   8. Newcomer welcome: accordion + aside
   ------------------------------------------------------------------------- */
.ccc-welcome__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.ccc-welcome__body h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.ccc-welcome__intro { color: var(--ccc-ink-soft); font-size: 1.05rem; }

.ccc-accordion {
	display: grid;
	gap: 0.6rem;
	margin: 1.25rem 0 1.75rem;
}

details.ccc-accordion__item {
	background: var(--ccc-surface);
	border: 1px solid var(--ccc-line);
	border-radius: var(--ccc-radius-sm);
	box-shadow: var(--ccc-shadow);
	overflow: hidden;
	margin: 0;
}

.ccc-accordion__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	cursor: pointer;
	font-family: var(--ccc-font-head);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--ccc-ink);
	list-style: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.ccc-accordion__item > summary::-webkit-details-marker { display: none; }
.ccc-accordion__item > summary::marker { content: ""; }

.ccc-accordion__item > summary:hover { color: var(--ccc-primary); background: var(--ccc-cream); }

/* Plus/close marker drawn in CSS. */
.ccc-accordion__item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background-color: var(--ccc-surface-alt);
	background-image:
		linear-gradient(var(--ccc-primary), var(--ccc-primary)),
		linear-gradient(var(--ccc-primary), var(--ccc-primary));
	background-size: 0.7rem 2px, 2px 0.7rem;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-color 0.2s ease, transform 0.25s ease;
}

.ccc-accordion__item[open] > summary { color: var(--ccc-primary); }
.ccc-accordion__item[open] > summary::after {
	background-color: var(--ccc-primary);
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff);
	transform: rotate(45deg);
}

.ccc-accordion__item > p {
	margin: 0;
	padding: 0 1.25rem 1.15rem;
	color: var(--ccc-ink-soft);
}

.ccc-welcome__aside {
	background: var(--ccc-primary-dark);
	color: #fff;
	border-radius: var(--ccc-radius);
	padding: 1.75rem;
	box-shadow: var(--ccc-shadow-lg);
	position: sticky;
	top: 1.5rem;
}
.ccc-welcome__aside h3 { color: #fff; font-size: 1.2rem; }

.ccc-details { margin: 0 0 1.25rem; display: grid; gap: 0.85rem; }
.ccc-details > p {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	font-weight: 600;
	text-align: right;
}
.ccc-details > p:last-child { border-bottom: 0; padding-bottom: 0; }
.ccc-details strong { font-weight: 600; color: rgba(255, 255, 255, 0.85); text-align: left; }
.ccc-details a { color: #ffd9a8; }

.ccc-welcome__aside .ccc-btn--ghost { width: 100%; }
.ccc-welcome__aside .ccc-btn--ghost > .wp-block-button__link { width: 100%; color: #fff; }
.ccc-welcome__aside .ccc-btn--ghost > .wp-block-button__link:hover { background: #fff; color: var(--ccc-primary-dark); }

/* -------------------------------------------------------------------------
   9. Events
   ------------------------------------------------------------------------- */
.ccc-event {
	display: flex;
	gap: 1.1rem;
	background: var(--ccc-surface);
	border: 1px solid var(--ccc-line);
	border-radius: var(--ccc-radius);
	padding: 1.25rem;
	box-shadow: var(--ccc-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ccc-event:hover { transform: translateY(-4px); box-shadow: var(--ccc-shadow-lg); }

.ccc-grid {
	display: grid;
	gap: var(--ccc-gap);
}
.ccc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.ccc-event__date {
	flex: 0 0 auto;
	align-self: flex-start;
	background: var(--ccc-primary);
	color: #fff;
	font-family: var(--ccc-font-head);
	font-weight: 700;
	font-size: 0.9rem;
	text-align: center;
	padding: 0.6rem 0.75rem;
	border-radius: var(--ccc-radius-sm);
	min-width: 3.75rem;
}

.ccc-event__title { font-size: 1.15rem; margin-bottom: 0.35rem; }
.ccc-event__title a { color: var(--ccc-ink); text-decoration: none; }
.ccc-event__title a:hover { color: var(--ccc-primary); text-decoration: underline; }

.ccc-event__meta {
	margin: 0;
	color: var(--ccc-ink-soft);
	font-size: 0.92rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.ccc-events__note {
	margin: 1.5rem 0 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--ccc-ink-soft);
	font-style: italic;
}

/* -------------------------------------------------------------------------
   10. Photo-backed CTA bands (Give + closing invite)
   ------------------------------------------------------------------------- */
.ccc-give,
.ccc-invite {
	position: relative;
	isolation: isolate;
	color: #fff;
	background-size: cover;
	background-position: center;
}

.ccc-give { background-image: url("/wp-content/uploads/2024/02/prayer.jpg"); }
.ccc-invite { background-image: url("/wp-content/uploads/2024/12/sanctuary.jpg"); }

.ccc-give::before,
.ccc-invite::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ccc-give::before {
	background: linear-gradient(100deg, rgba(24, 16, 8, 0.9) 0%, rgba(24, 16, 8, 0.72) 55%, rgba(24, 16, 8, 0.55) 100%);
}

.ccc-invite::before {
	background: rgba(11, 46, 46, 0.82);
}

.ccc-give__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1.5rem, 4vw, 3rem);
	flex-wrap: wrap;
}
.ccc-give h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.ccc-give p { margin: 0; color: rgba(255, 255, 255, 0.92); max-width: 52ch; }
.ccc-give p.ccc-eyebrow--light { color: #ffd9a8; margin: 0 0 0.75rem; }

.wp-block-buttons.ccc-give__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
}
.ccc-give__actions .ccc-btn--link > .wp-block-button__link { color: #ffd9a8; }

.ccc-invite { text-align: center; }
.ccc-invite h2 { color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.ccc-invite p { color: rgba(255, 255, 255, 0.94); font-size: 1.1rem; margin: 0 auto 1.75rem; max-width: 48ch; }

.wp-block-buttons.ccc-invite__actions {
	display: flex;
	gap: 0.85rem;
	justify-content: center;
	flex-wrap: wrap;
}
.ccc-invite__actions .ccc-btn--ghost > .wp-block-button__link { color: #fff; }
.ccc-invite__actions .ccc-btn--ghost > .wp-block-button__link:hover { background: #fff; color: var(--ccc-primary-dark); }

/* -------------------------------------------------------------------------
   11. Accessibility helpers
   ------------------------------------------------------------------------- */
.ccc-main a:focus-visible,
.ccc-main .wp-block-button__link:focus-visible,
.ccc-main button:focus-visible,
.ccc-main summary:focus-visible {
	outline: 3px solid var(--ccc-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.ccc-quicklinks .wp-block-button__link:focus-visible,
.ccc-hero a:focus-visible,
.ccc-hero button:focus-visible {
	outline-color: #ffd9a8;
}

@media (prefers-reduced-motion: reduce) {
	.ccc-main *,
	.ccc-btn,
	.ccc-path,
	.ccc-event {
		transition: none !important;
		animation: none !important;
	}
	.ccc-btn:hover,
	.ccc-path:hover,
	.ccc-event:hover { transform: none; }
	.ccc-path:hover .ccc-path__media img,
	.ccc-connect__media:hover img { transform: none; }
	.ccc-slide .ccc-slide__img img { animation: none !important; }
	.ccc-slide__content > * { opacity: 1; transform: none; }
}



/* Mobile header: tighten logo/title row so more of the homepage is visible. */
@media (max-width: 1024px) {
	#mobile-header .site-main-header-inner-wrap {
		min-height: 64px !important;
		align-items: center !important;
	}

	#mobile-header .site-branding.mobile-site-branding a.brand {
		display: inline-flex !important;
		align-items: center !important;
		gap: 0.65rem !important;
		max-width: calc(100vw - 92px) !important;
	}

	#mobile-header .site-branding.mobile-site-branding a.brand img.custom-logo {
		width: 54px !important;
		height: 54px !important;
		max-width: 54px !important;
		max-height: 54px !important;
		object-fit: contain !important;
		flex: 0 0 54px !important;
	}

	#mobile-header .site-title-wrap,
	#mobile-header .site-title {
		min-width: 0 !important;
	}

	#mobile-header .site-branding .site-title {
		font-size: clamp(0.95rem, 3.4vw, 1.15rem) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.01em !important;
	}

	.ccc-hero {
		min-height: min(76svh, 600px);
	}

	.ccc-slide__content {
		padding-block: clamp(3.75rem, 11vw, 6rem) clamp(4.5rem, 12vw, 6.75rem);
	}
}

@media (max-width: 480px) {
	#mobile-header .site-main-header-inner-wrap {
		min-height: 60px !important;
	}

	#mobile-header .site-branding.mobile-site-branding a.brand img.custom-logo {
		width: 48px !important;
		height: 48px !important;
		max-width: 48px !important;
		max-height: 48px !important;
		flex-basis: 48px !important;
	}

	.ccc-hero {
		min-height: min(72svh, 560px);
	}
}

/* -------------------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.ccc-connect__inner { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
	.ccc-hero { min-height: min(88vh, 640px); }
	.ccc-welcome__inner { grid-template-columns: 1fr; }
	.ccc-welcome__aside { position: static; }
	.ccc-section-head--row { flex-direction: column; align-items: flex-start; }
	.ccc-give__inner { flex-direction: column; align-items: flex-start; }
	.wp-block-buttons.ccc-give__actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 480px) {
	.wp-block-button.ccc-btn { width: 100%; }
	.wp-block-button.ccc-btn > .wp-block-button__link,
	a.ccc-btn { width: 100%; }
	.wp-block-buttons.ccc-slide__actions,
	.wp-block-buttons.ccc-invite__actions,
	.wp-block-buttons.ccc-connect__actions { flex-direction: column; }
	.ccc-hero__meta { font-size: 0.88rem; gap: 0.35rem 1.5rem; }
}




/* Mobile homepage hero controls: keep arrows/dots/pause away from CTA buttons. */
@media (max-width: 820px) {
	.ccc-hero.is-ready .ccc-hero__controls {
		position: absolute;
		z-index: 8;
		top: 0.75rem;
		left: auto;
		right: 0.75rem;
		bottom: auto;
		width: auto;
		margin: 0;
		padding: 0.35rem 0.45rem;
		gap: 0.4rem;
		border-radius: 999px;
		background: rgba(8, 20, 36, 0.48);
		backdrop-filter: blur(8px);
	}

	.ccc-hero__arrow,
	.ccc-hero__pause {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 0.9rem;
	}

	.ccc-hero__pause {
		margin-left: 0;
		font-size: 0.72rem;
	}

	.ccc-hero__dots {
		gap: 0.42rem;
		padding-inline: 0.1rem;
	}

	.ccc-hero__dot {
		width: 0.58rem;
		height: 0.58rem;
	}

	.ccc-hero__dot[aria-selected="true"] {
		width: 1.35rem;
	}
}



/* Rotated phones: width may exceed 820px, so keep slider controls pinned to the hero corner by height/orientation too. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
	.ccc-hero.is-ready .ccc-hero__controls {
		position: absolute;
		z-index: 8;
		top: 0.75rem;
		left: auto;
		right: 0.75rem;
		bottom: auto;
		width: auto;
		margin: 0;
		padding: 0.35rem 0.45rem;
		gap: 0.4rem;
		border-radius: 999px;
		background: rgba(8, 20, 36, 0.48);
		backdrop-filter: blur(8px);
	}

	.ccc-hero__arrow,
	.ccc-hero__pause {
		width: 2.25rem;
		height: 2.25rem;
		font-size: 0.9rem;
	}

	.ccc-hero__pause {
		margin-left: 0;
		font-size: 0.72rem;
	}

	.ccc-hero__dots {
		gap: 0.42rem;
		padding-inline: 0.1rem;
	}

	.ccc-hero__dot {
		width: 0.58rem;
		height: 0.58rem;
	}

	.ccc-hero__dot[aria-selected="true"] {
		width: 1.35rem;
	}
}

/* Keep anchored ministry headings below the sticky header when opened with a #link. */
.wp-block-heading[id] {
	scroll-margin-top: 120px;
}

/* -------------------------------------------------------------------------
   This Is Us: Mission / Vision / Values illustrated section banners
   ------------------------------------------------------------------------- */
body.page-id-437 .entry-content > h1.wp-block-heading.has-text-align-center {
	position: relative;
	margin: clamp(3rem, 7vw, 5rem) auto clamp(1.8rem, 4vw, 2.8rem);
	padding: 0 1rem;
	max-width: 980px;
	font-family: var(--ccc-font-head);
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: var(--ccc-ink);
}
body.page-id-437 .entry-content > h1.wp-block-heading.has-text-align-center::after {
	content: "";
	display: block;
	width: min(10rem, 42vw);
	height: 5px;
	margin: 1rem auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--ccc-primary), var(--ccc-accent));
}
body.page-id-437 .entry-content > h2.wp-block-heading.alignfull.has-midnight-gradient-background {
	position: relative;
	isolation: isolate;
	width: min(100vw - 2rem, 1120px);
	max-width: 1120px;
	margin: clamp(2.1rem, 5vw, 3.4rem) auto 1.15rem;
	padding: clamp(1.45rem, 4vw, 2.35rem) clamp(1.25rem, 5vw, 3.5rem);
	overflow: hidden;
	border-radius: 28px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background:
		radial-gradient(circle at 14% 22%, rgba(255, 218, 164, 0.42) 0 9%, transparent 24%),
		radial-gradient(circle at 86% 14%, rgba(78, 151, 136, 0.42) 0 11%, transparent 28%),
		radial-gradient(circle at 78% 84%, rgba(224, 138, 60, 0.32) 0 10%, transparent 30%),
		linear-gradient(135deg, rgba(8, 49, 55, 0.98) 0%, rgba(18, 96, 92, 0.95) 45%, rgba(55, 99, 83, 0.96) 100%) !important;
	box-shadow: 0 26px 70px -42px rgba(8, 35, 40, 0.9);
	color: #fff !important;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}
body.page-id-437 .entry-content > h2.wp-block-heading.alignfull.has-midnight-gradient-background::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(120deg, transparent 0 34%, rgba(255, 255, 255, 0.13) 35% 36%, transparent 37% 100%),
		linear-gradient(30deg, transparent 0 54%, rgba(255, 255, 255, 0.08) 55% 56%, transparent 57% 100%);
	mix-blend-mode: screen;
}
body.page-id-437 .entry-content > h2.wp-block-heading.alignfull.has-midnight-gradient-background::after {
	content: "";
	position: absolute;
	inset: auto clamp(1rem, 4vw, 2.2rem) 0 auto;
	width: clamp(7rem, 18vw, 13rem);
	aspect-ratio: 1;
	z-index: -1;
	transform: translateY(42%) rotate(-10deg);
	border-radius: 42% 58% 52% 48%;
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3), transparent 58%),
		linear-gradient(135deg, rgba(255, 217, 168, 0.85), rgba(224, 138, 60, 0.62));
	opacity: 0.8;
}
body.page-id-437 .entry-content > h2.wp-block-heading.alignfull.has-midnight-gradient-background strong {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	color: #fff;
	font-family: var(--ccc-font-head);
	font-size: clamp(1.75rem, 4vw, 3.1rem);
	letter-spacing: 0.03em;
}
body.page-id-437 .entry-content > h2.wp-block-heading.alignfull.has-midnight-gradient-background strong::before {
	content: "";
	flex: 0 0 auto;
	width: clamp(0.8rem, 1.7vw, 1.1rem);
	height: clamp(0.8rem, 1.7vw, 1.1rem);
	border-radius: 999px;
	background: var(--ccc-accent);
	box-shadow: 0 0 0 8px rgba(224, 138, 60, 0.16), 0 0 0 15px rgba(255, 255, 255, 0.08);
}
body.page-id-437 .entry-content > h2.wp-block-heading.alignfull.has-midnight-gradient-background + p,
body.page-id-437 .entry-content > h2.wp-block-heading.alignfull.has-midnight-gradient-background + .wp-block-paragraph {
	max-width: 880px;
	margin-inline: auto;
}
body.page-id-437 .entry-content > p.has-large-font-size,
body.page-id-437 .entry-content > p.has-medium-font-size {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 720px) {
	body.page-id-437 .entry-content > h2.wp-block-heading.alignfull.has-midnight-gradient-background {
		width: calc(100% - 1.25rem);
		border-radius: 22px;
		text-align: left !important;
	}
	body.page-id-437 .entry-content > h2.wp-block-heading.alignfull.has-midnight-gradient-background strong {
		justify-content: flex-start;
	}
}

/* MVV fallback: match the rendered Gutenberg h2 blocks wherever Kadence wraps them. */
body.page-id-437 h2.wp-block-heading.has-midnight-gradient-background,
body.page-id-437 h2.wp-block-heading[class*="has-midnight-gradient-background"] {
	position: relative !important;
	isolation: isolate !important;
	width: min(100vw - 2rem, 1120px) !important;
	max-width: 1120px !important;
	margin: clamp(2.1rem, 5vw, 3.4rem) auto 1.15rem !important;
	padding: clamp(1.45rem, 4vw, 2.35rem) clamp(1.25rem, 5vw, 3.5rem) !important;
	overflow: hidden !important;
	border-radius: 28px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	background: radial-gradient(circle at 14% 22%, rgba(255, 218, 164, 0.42) 0 9%, transparent 24%), radial-gradient(circle at 86% 14%, rgba(78, 151, 136, 0.42) 0 11%, transparent 28%), radial-gradient(circle at 78% 84%, rgba(224, 138, 60, 0.32) 0 10%, transparent 30%), linear-gradient(135deg, rgba(8, 49, 55, 0.98) 0%, rgba(18, 96, 92, 0.95) 45%, rgba(55, 99, 83, 0.96) 100%) !important;
	box-shadow: 0 26px 70px -42px rgba(8, 35, 40, 0.9) !important;
	color: #fff !important;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25) !important;
}
body.page-id-437 h2.wp-block-heading.has-midnight-gradient-background::before,
body.page-id-437 h2.wp-block-heading[class*="has-midnight-gradient-background"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(120deg, transparent 0 34%, rgba(255, 255, 255, 0.13) 35% 36%, transparent 37% 100%), linear-gradient(30deg, transparent 0 54%, rgba(255, 255, 255, 0.08) 55% 56%, transparent 57% 100%);
	mix-blend-mode: screen;
}
body.page-id-437 h2.wp-block-heading.has-midnight-gradient-background::after,
body.page-id-437 h2.wp-block-heading[class*="has-midnight-gradient-background"]::after {
	content: "";
	position: absolute;
	inset: auto clamp(1rem, 4vw, 2.2rem) 0 auto;
	width: clamp(7rem, 18vw, 13rem);
	aspect-ratio: 1;
	z-index: -1;
	transform: translateY(42%) rotate(-10deg);
	border-radius: 42% 58% 52% 48%;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.3), transparent 58%), linear-gradient(135deg, rgba(255, 217, 168, 0.85), rgba(224, 138, 60, 0.62));
	opacity: 0.8;
}
body.page-id-437 h2.wp-block-heading.has-midnight-gradient-background strong,
body.page-id-437 h2.wp-block-heading[class*="has-midnight-gradient-background"] strong {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	color: #fff !important;
	font-family: var(--ccc-font-head);
	font-size: clamp(1.75rem, 4vw, 3.1rem);
	letter-spacing: 0.03em;
}
body.page-id-437 h2.wp-block-heading.has-midnight-gradient-background strong::before,
body.page-id-437 h2.wp-block-heading[class*="has-midnight-gradient-background"] strong::before {
	content: "";
	flex: 0 0 auto;
	width: clamp(0.8rem, 1.7vw, 1.1rem);
	height: clamp(0.8rem, 1.7vw, 1.1rem);
	border-radius: 999px;
	background: var(--ccc-accent);
	box-shadow: 0 0 0 8px rgba(224, 138, 60, 0.16), 0 0 0 15px rgba(255, 255, 255, 0.08);
}
@media (max-width: 720px) {
	body.page-id-437 h2.wp-block-heading.has-midnight-gradient-background,
	body.page-id-437 h2.wp-block-heading[class*="has-midnight-gradient-background"] {
		width: calc(100% - 1.25rem) !important;
		border-radius: 22px !important;
		text-align: left !important;
	}
}

/* Final mobile homepage height override: keep quick links visible sooner. */
@media (max-width: 820px) {
	.ccc-hero {
		min-height: min(72svh, 600px);
	}

	.ccc-slide__content {
		padding-block: clamp(3.25rem, 9vw, 5rem) clamp(4rem, 10vw, 6rem);
	}
}

@media (max-width: 480px) {
	.ccc-hero {
		min-height: min(64svh, 560px);
	}

	.ccc-slide__title {
		font-size: clamp(2rem, 10vw, 2.65rem);
	}

	.ccc-slide__lead {
		margin-bottom: 1.15rem;
	}
}

/* Site-wide page-title compression: reduce the oversized gap between the
   Kadence page title band and the first content block on interior pages. */
body:not(.home) .entry-hero-container-inner {
	padding-top: clamp(2rem, 4vw, 3.25rem);
	padding-bottom: clamp(2rem, 4vw, 3.25rem);
}

body:not(.home) .entry-hero .entry-header {
	min-height: 0;
}

body:not(.home) .content-area {
	margin-top: clamp(0.5rem, 1.5vw, 1.25rem);
}

body:not(.home) .entry-content-wrap {
	padding-top: clamp(0.75rem, 2vw, 1.4rem);
}

/* Watch Online has its own full-page component, so start it tighter than
   ordinary text-heavy pages to keep the video/action area above the fold. */
body.page-id-522 .content-area {
	margin-top: 0;
}

body.page-id-522 .entry-content-wrap {
	padding-top: 0;
}

body.page-id-522 .ccc-watch {
	padding-top: clamp(1.5rem, 3.5vw, 3rem);
}

@media (max-width: 560px) {
	body:not(.home) .entry-hero-container-inner {
		padding-top: 1.45rem;
		padding-bottom: 1.45rem;
	}

	body:not(.home) .entry-title {
		font-size: clamp(2rem, 9vw, 2.45rem);
	}

	body:not(.home) .content-area {
		margin-top: 0.75rem;
	}

	body:not(.home) .entry-content-wrap {
		padding-top: 1rem;
	}
}

/* Social sharing */
.ccc-share {
	position: relative;
	width: min(100% - 2rem, 1120px);
	margin: clamp(2.5rem, 6vw, 4.5rem) auto;
	padding: clamp(1.35rem, 4vw, 2.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;
	border-radius: 28px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: radial-gradient(circle at 8% 20%, rgba(255, 218, 164, 0.28), transparent 28%), linear-gradient(135deg, #083137 0%, #146b6b 62%, #214f45 100%);
	box-shadow: 0 28px 80px -48px rgba(8, 35, 40, 0.85);
	color: #fff;
	overflow: hidden;
}

.ccc-share::after {
	content: "";
	position: absolute;
	inset: auto -3rem -5rem auto;
	width: clamp(9rem, 20vw, 16rem);
	aspect-ratio: 1;
	border-radius: 48% 52% 42% 58%;
	background: rgba(224, 138, 60, 0.34);
	pointer-events: none;
}

.ccc-share__text,
.ccc-share__actions {
	position: relative;
	z-index: 1;
}

.ccc-share__eyebrow {
	margin: 0 0 0.55rem;
	font: 800 0.78rem/1 var(--ccc-font-head, Poppins, system-ui, sans-serif);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #ffd59f;
}

.ccc-share__title {
	margin: 0;
	font-family: var(--ccc-font-head, Poppins, system-ui, sans-serif);
	font-size: clamp(1.65rem, 4vw, 2.7rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
	color: #fff;
}

.ccc-share__intro {
	max-width: 42rem;
	margin: 0.8rem 0 0;
	font-size: clamp(1rem, 2vw, 1.12rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.86);
}

.ccc-share__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.65rem;
}

.ccc-share__button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.72rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font: 800 0.92rem/1 var(--ccc-font-head, Poppins, system-ui, sans-serif);
	text-decoration: none;
	cursor: pointer;
	transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.ccc-share__button:hover,
.ccc-share__button:focus-visible {
	transform: translateY(-1px);
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.8);
}

.ccc-share__button--native,
.ccc-share__button--copy {
	background: var(--ccc-accent, #e08a3c);
	border-color: rgba(255, 255, 255, 0.2);
	color: #1f160f;
}

.ccc-share__button--native:hover,
.ccc-share__button--native:focus-visible,
.ccc-share__button--copy:hover,
.ccc-share__button--copy:focus-visible {
	background: #f0a04f;
	color: #1f160f;
}

.ccc-share__status {
	flex-basis: 100%;
	min-height: 1.3em;
	font-size: 0.9rem;
	color: #ffd59f;
	text-align: right;
}

@media (max-width: 760px) {
	.ccc-share {
		grid-template-columns: 1fr;
		border-radius: 22px;
	}

	.ccc-share__actions {
		justify-content: flex-start;
	}

	.ccc-share__button {
		flex: 1 1 calc(50% - 0.65rem);
	}

	.ccc-share__button--native,
	.ccc-share__button--copy {
		flex-basis: 100%;
	}

	.ccc-share__status {
		text-align: left;
	}
}

/* Social sharing contrast guard: Events Calendar/Kadence link styles can
   otherwise override the card on single event pages. */
.ccc-share .ccc-share__title,
.ccc-share .ccc-share__title * {
	color: #fff !important;
}

.ccc-share .ccc-share__intro,
.ccc-share .ccc-share__intro * {
	color: rgba(255, 255, 255, 0.88) !important;
}

.ccc-share .ccc-share__button:not(.ccc-share__button--native):not(.ccc-share__button--copy),
.ccc-share a.ccc-share__button:not(.ccc-share__button--native):not(.ccc-share__button--copy) {
	color: #fff !important;
	text-decoration: none !important;
}

.ccc-share .ccc-share__button--native,
.ccc-share .ccc-share__button--copy {
	color: #1f160f !important;
	text-decoration: none !important;
}


/* Keep the hero controls, CTAs, and service strip from colliding on rotated phones. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
	.ccc-hero {
		min-height: 520px;
	}

	.ccc-slide__content {
		padding-block: 4.75rem 3rem;
	}

	.ccc-slide__title {
		font-size: clamp(2.15rem, 7vw, 3.25rem);
	}

	.ccc-hero__controls {
		padding-bottom: 0.6rem;
	}
}

/* Give page: keep the opening quote centered inside the mobile content gutter. */
@media (max-width: 640px), (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
	body.page-id-195 .entry-content > h2.wp-block-heading.alignfull.has-text-align-center {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box !important;
	}
}