/* ==========================================================================
   Change Course — theme styles
   Design tokens live in theme.json. This file carries the things theme.json
   cannot express: hover states, block styles, header/footer chrome, and the
   handful of composite layouts the design uses repeatedly.
   ========================================================================== */

:root {
	--cc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--cc-header-h: 74px;
	--cc-scroll-offset: 92px;
	--cc-on-navy-text: rgba(255, 255, 255, 0.86);
	--cc-on-navy-muted: rgba(255, 255, 255, 0.66);
	--cc-on-navy-faint: rgba(255, 255, 255, 0.55);
	--cc-on-navy-line: rgba(255, 255, 255, 0.16);
	--cc-on-navy-surface: rgba(255, 255, 255, 0.07);

	/* Adobe's webfont build of Kigelia LGC carries looser vertical metrics than
	   the desktop licence the design was drawn against: `line-height: normal`
	   resolves to ~1.58x there against ~1.285x locally, which inflates every
	   piece of UI chrome. Glyph widths are identical, so pinning the ratio
	   restores the intended rhythm without touching the type itself. */
	--cc-lh: 1.285;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* Header, main and footer are stacked bands: no gap between them. */
:root .wp-site-blocks > * {
	margin-block-start: 0;
}

/* Page sections carry their own vertical padding, so the layout gap between
   them would be extra space the design does not have. */
.entry-content.wp-block-post-content > * {
	margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}

p { text-wrap: pretty; }

/* Anchor targets clear the sticky header. */
:where(.wp-site-blocks) [id] {
	scroll-margin-top: var(--cc-scroll-offset);
}

.cc-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 999;
	padding: 12px 20px;
	background: #fff;
	color: var(--wp--preset--color--navy);
	font-weight: 800;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(38, 34, 98, 0.25);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* The template-part block wraps the header in a <div> that is only as tall as
   the bar itself. That wrapper would be the sticky header's containing block,
   so the header could only "stick" within its own 74px height and would scroll
   away with the page. `display: contents` dissolves the wrapper's box so the
   header's containing block becomes .wp-site-blocks and it pins for the whole
   document. */
.cc-header-area {
	display: contents;
}

.cc-header {
	position: sticky;
	top: 0;
	z-index: 60;
}

/* The translucent blur lives on a pseudo-element. On the header itself,
   backdrop-filter would become the containing block for the mobile menu's
   fixed overlay and trap it inside the 74px bar.

   The hairline divider is drawn as an inset shadow on this layer (over the
   header's own navy fill) rather than a border-bottom on .cc-header. A
   border-bottom sits one row below the fill, where its backdrop is the white
   page background, so a 10% white line composites to solid white — the "ugly
   white line". Drawn inside the blurred layer it stays the subtle line the
   prototype has. */
.cc-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(38, 34, 98, 0.96);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 0;
	pointer-events: none;
}

.cc-header > * {
	position: relative;
	z-index: 1;
}

.cc-header .wp-block-group {
	min-height: var(--cc-header-h);
}

.cc-header .custom-logo,
.cc-header .wp-block-site-logo img {
	height: 30px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}

.cc-header .wp-block-site-logo a { display: inline-flex; }

/* Primary nav */
.cc-nav .wp-block-navigation__container {
	gap: 18px;
}

.cc-nav .wp-block-navigation-item__content {
	font-size: 14px;
	font-weight: 600;
	line-height: var(--cc-lh);
	color: #fff;
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: border-color 150ms var(--cc-ease);
}

.cc-nav .wp-block-navigation-item__content:hover,
.cc-nav .wp-block-navigation-item__content:focus-visible {
	text-decoration: none;
	border-bottom-color: var(--wp--preset--color--teal);
}

.cc-nav .current-menu-item > .wp-block-navigation-item__content,
.cc-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--teal);
}

/* Mobile drawer */
.cc-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--navy);
	padding: 24px 32px 48px;
}

.cc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 22px;
	border-bottom: none;
}

.cc-nav .wp-block-navigation__responsive-container-open,
.cc-nav .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* Header action buttons */
.cc-header-actions .wp-block-button__link {
	font-size: 14.5px;
	padding: 11px 20px;
	border-radius: 10px;
	white-space: nowrap;
}

.cc-header-actions .wp-block-button.is-style-cc-ghost .wp-block-button__link {
	padding: 10px 18px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.cc-footer {
	background: var(--wp--preset--color--navy);
	color: var(--cc-on-navy-muted);
}

.cc-footer .cc-footer-heading {
	font-size: 12px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--wp--preset--color--gold);
	line-height: var(--cc-lh);
	margin: 0 0 18px;
}

.cc-footer .cc-footer-links a {
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.cc-footer .cc-footer-links a:hover {
	color: #fff;
	text-decoration: none;
}

.cc-footer .cc-footer-links {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

/* The gap is the spacing; block margins would stack on top of it. */
.cc-footer .cc-footer-links > * {
	margin-block-start: 0;
	margin-block-end: 0;
	font-size: 15px;
	line-height: var(--cc-lh);
}

.cc-footer .cc-footer-heading + .cc-footer-links { margin-block-start: 0; }

/* Footer links are white at varying opacity, never the teal body-link colour. */
.cc-footer a { color: inherit; text-decoration: none; }
.cc-footer a:hover { color: #fff; text-decoration: none; }

.cc-footer-legal a { color: rgba(255, 255, 255, 0.55); }
.cc-footer-rule a { color: rgba(255, 255, 255, 0.72); }
.cc-footer-rule .cc-footer-legal a { color: rgba(255, 255, 255, 0.55); }
.cc-footer-legal > * { margin-block-start: 0 !important; }

.cc-footer .wp-block-site-logo img {
	height: 32px;
	width: auto;
	filter: brightness(0) invert(1);
}

.cc-social.wp-block-social-links { gap: 12px; }

.cc-social .wp-social-link {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: transparent;
	padding: 0;
	transition: background-color 150ms var(--cc-ease), border-color 150ms var(--cc-ease);
}

.cc-social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	color: #fff;
	text-decoration: none;
}

.cc-social .wp-social-link:hover {
	background: var(--wp--preset--color--teal);
	border-color: var(--wp--preset--color--teal);
}

.cc-social .wp-social-link svg {
	width: 17px;
	height: 17px;
	display: block;
	fill: currentColor;
}

.cc-footer-rule { border-top: 1px solid rgba(255, 255, 255, 0.14); }

/* --------------------------------------------------------------------------
   On-dark defaults.
   :where() keeps specificity at zero so any colour an editor picks always wins.
   -------------------------------------------------------------------------- */

:where(.is-style-cc-on-dark) :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
:where(.is-style-cc-on-dark) :where(p, li, dd, dt, figcaption) { color: var(--cc-on-navy-text); }
:where(.is-style-cc-on-dark) :where(a:not(.wp-block-button__link)) { color: inherit; }
:where(.is-style-cc-on-dark) :where(hr) { border-color: var(--cc-on-navy-line); }

/* --------------------------------------------------------------------------
   Core block styles
   -------------------------------------------------------------------------- */

/* Eyebrow — the small tracked label above nearly every heading. */
.wp-block-paragraph.is-style-cc-eyebrow,
p.is-style-cc-eyebrow {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 800;
	line-height: 1.3;
	margin-bottom: 0;
	color: var(--wp--preset--color--teal);
}

.is-style-cc-on-dark p.is-style-cc-eyebrow:not([class*="has-"][class*="-color"]) {
	color: var(--wp--preset--color--gold);
}

p.is-style-cc-lead {
	font-size: 19px;
	line-height: 1.65;
	color: var(--wp--preset--color--slate);
}

p.is-style-cc-note {
	font-size: 14px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
	padding: 16px;
	background: var(--wp--preset--color--tint);
	border-left: 3px solid var(--wp--preset--color--teal);
	border-radius: 0 6px 6px 0;
}

/* Check list — the eligibility / accountability lists. */
ul.is-style-cc-checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 14px;
}

ul.is-style-cc-checks > li {
	position: relative;
	padding-left: 32px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
}

ul.is-style-cc-checks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	color: var(--wp--preset--color--teal);
	-webkit-mask: var(--cc-check-mask) center / contain no-repeat;
	mask: var(--cc-check-mask) center / contain no-repeat;
}

:root {
	--cc-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (min-width: 782px) {
	ul.is-style-cc-checks.cc-two-up { grid-template-columns: 1fr 1fr; }
}

.is-style-cc-on-dark ul.is-style-cc-checks > li { color: var(--cc-on-navy-text); }

/* FAQ — core/details styled as the design's accordion card. */
details.is-style-cc-faq {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	padding: 0;
	margin-bottom: 10px;
}

details.is-style-cc-faq > summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 24px;
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--navy);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

details.is-style-cc-faq > summary::-webkit-details-marker { display: none; }
details.is-style-cc-faq > summary::marker { content: ""; }

details.is-style-cc-faq > summary::after {
	content: "+";
	color: var(--wp--preset--color--teal);
	font-size: 22px;
	font-weight: 400;
	line-height: var(--cc-lh);
	flex-shrink: 0;
	transition: transform 180ms var(--cc-ease);
}

details.is-style-cc-faq[open] > summary::after { transform: rotate(45deg); }

details.is-style-cc-faq > :not(summary) {
	padding: 0 24px;
	margin-block: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--slate);
}

details.is-style-cc-faq > :last-child { padding-bottom: 22px; }

/* Quotes */
.wp-block-quote.is-style-cc-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 32px 34px;
	border-left: 1px solid var(--wp--preset--color--line);
	margin: 0;
	height: 100%;
}

.wp-block-quote.is-style-cc-card p {
	font-size: 19px;
	line-height: 1.6;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.005em;
	margin: 0;
}

.wp-block-quote.is-style-cc-card cite {
	display: block;
	margin-top: 18px;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 800;
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

.wp-block-quote.is-style-cc-feature {
	border: none;
	padding: 0;
	margin: 0;
	text-align: center;
}

.wp-block-quote.is-style-cc-feature p {
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.44;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0;
}

.is-style-cc-on-dark .wp-block-quote.is-style-cc-feature p { color: #fff; }
.is-style-cc-on-dark .wp-block-quote.is-style-cc-feature cite { color: rgba(255, 255, 255, 0.9); }

.wp-block-quote.is-style-cc-feature cite {
	display: block;
	margin-top: 24px;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 800;
	font-style: normal;
	opacity: 0.9;
}

.wp-block-quote.is-style-cc-rule {
	background: var(--wp--preset--color--tint);
	border: none;
	border-left: 4px solid var(--wp--preset--color--teal);
	border-radius: 0 12px 12px 0;
	padding: 26px 30px;
	margin: 0;
}

.wp-block-quote.is-style-cc-rule p {
	font-size: 22px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.01em;
	margin: 0;
}

.wp-block-quote.is-style-cc-rule cite {
	display: block;
	margin-top: 16px;
	font-size: 15px;
	font-style: normal;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

.wp-block-quote.is-style-cc-rule cite strong { color: var(--wp--preset--color--navy); font-weight: 800; }

/* Buttons */
.wp-block-button__link {
	line-height: var(--cc-lh);
	transition: background-color 150ms var(--cc-ease), color 150ms var(--cc-ease), transform 100ms var(--cc-ease);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.wp-block-button__link:active { transform: scale(0.98); }
.wp-block-button__link:hover { text-decoration: none; }

/* Teal solid: use the standard colour controls (background teal / text white). */
.wp-block-button .wp-block-button__link.has-teal-background-color:hover {
	background-color: var(--wp--preset--color--teal-dark) !important;
}

.wp-block-button.is-style-cc-ghost .wp-block-button__link {
	background: transparent;
	color: #fff;
	font-weight: 700;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
}

.wp-block-button.is-style-cc-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.wp-block-button.is-style-cc-outline .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	border: 1.5px solid var(--wp--preset--color--navy);
	padding: 0.875em 1.6em;
	font-size: 16px;
}

.wp-block-button.is-style-cc-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: #fff;
}

.wp-block-button.is-style-cc-pill .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--navy);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	padding: 11px 20px;
}

.wp-block-button.is-style-cc-pill .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--teal-dark);
	background: #fff;
}

.wp-block-button.is-style-cc-arrow .wp-block-button__link::after {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--cc-arrow-mask) center / contain no-repeat;
	mask: var(--cc-arrow-mask) center / contain no-repeat;
	transition: transform 150ms var(--cc-ease);
	flex-shrink: 0;
}

.wp-block-button.is-style-cc-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }

.wp-block-button.is-style-cc-quiet .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--teal-dark);
	font-size: 16px;
	font-weight: 700;
	padding: 0;
	border: none;
	border-radius: 0;
}

.wp-block-button.is-style-cc-quiet .wp-block-button__link::after {
	content: "";
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: var(--cc-arrow-mask) center / contain no-repeat;
	mask: var(--cc-arrow-mask) center / contain no-repeat;
	transition: transform 150ms var(--cc-ease);
}

.wp-block-button.is-style-cc-quiet .wp-block-button__link:hover { text-decoration: underline; }
.wp-block-button.is-style-cc-quiet .wp-block-button__link:hover::after { transform: translateX(3px); }

/* A quiet link set beside a solid button shares its box so the row lines up. */
.wp-block-button.cc-btn-padded .wp-block-button__link { padding: 15px 20px; }

.is-style-cc-on-dark .wp-block-button.is-style-cc-quiet .wp-block-button__link {
	color: var(--wp--preset--color--gold);
}

/* Back link: a leading arrow and no trailing one. */
.wp-block-button.is-style-cc-back .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--teal-dark);
	font-size: 14px;
	font-weight: 700;
	padding: 0;
	border: none;
	border-radius: 0;
}

.wp-block-button.is-style-cc-back .wp-block-button__link::before {
	content: "←";
	margin-right: 8px;
}

.wp-block-button.is-style-cc-back .wp-block-button__link:hover { text-decoration: underline; }

.is-style-cc-on-dark .wp-block-button.is-style-cc-back .wp-block-button__link {
	color: rgba(255, 255, 255, 0.6);
}

.is-style-cc-on-dark .wp-block-button.is-style-cc-back .wp-block-button__link:hover {
	color: #fff;
	text-decoration: none;
}

:root {
	--cc-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* Buttons rendered on the gold/teal CTA bands sit on a coloured field. */
.has-teal-background-color .wp-block-button.is-style-cc-outline .wp-block-button__link {
	border-color: #fff;
}

/* Images and galleries */
.wp-block-image.is-style-cc-rounded img { border-radius: 20px; }

.wp-block-gallery.is-style-cc-collage {
	gap: 8px;
}

.wp-block-gallery.is-style-cc-collage figure img {
	border-radius: 6px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	display: block;
}

/* Group cards */
.wp-block-group.is-style-cc-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 28px;
}

.wp-block-group.is-style-cc-card-dark {
	background: var(--wp--preset--color--navy);
	border-radius: 16px;
	padding: 28px;
	color: #fff;
}

.wp-block-group.is-style-cc-card-glass {
	background: var(--cc-on-navy-surface);
	border: 1px solid var(--cc-on-navy-line);
	border-radius: 16px;
	padding: 28px;
	color: #fff;
}

/* Hairline grid — cells separated by a 1px rule, as used across the design. */
.wp-block-group.is-style-cc-hairline-grid {
	background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	overflow: hidden;
	gap: 1px !important;
	padding: 0;
}

.wp-block-group.is-style-cc-hairline-grid > * {
	background: #fff;
	padding: 30px;
	margin: 0;
}

.wp-block-group.is-style-cc-hairline-grid > .cc-person--text-only {
	padding: 22px 26px;
}

.wp-block-group.is-style-cc-hairline-stack {
	background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 1px !important;
	padding: 0;
}

.wp-block-group.is-style-cc-hairline-stack > * {
	background: #fff;
	padding: 18px 22px;
	margin: 0;
}

/* Divided columns — the "After you hit submit" step row. */
@media (min-width: 782px) {
	.wp-block-columns.is-style-cc-divided > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--line);
		padding-left: 28px;
	}
	.wp-block-columns.is-style-cc-divided > .wp-block-column:not(:last-child) {
		padding-right: 28px;
	}
	.is-style-cc-on-dark .wp-block-columns.is-style-cc-divided > .wp-block-column + .wp-block-column {
		border-left-color: var(--cc-on-navy-line);
	}
}

/* --------------------------------------------------------------------------
   Layout helpers used by the patterns
   -------------------------------------------------------------------------- */

/* Cards that overlap the hero above them. The doubled class beats WordPress'
   own block-gap rule, which would otherwise reset the negative margin. */
.wp-block-group.cc-overlap {
	margin-top: -130px;
	position: relative;
	z-index: 2;
}

@media (max-width: 781px) {
	.wp-block-group.cc-overlap { margin-top: -80px; }
	/* The hero's tall bottom padding exists to make room for the overlap; on a
	   phone the cards need less of it. */
	.cc-hero-overlap { padding-bottom: 140px !important; }
}

/* A section whose children need to clear a negative-margin child. */
.cc-flow-root { display: flow-root; }

/* Sticky column for the form intros. */
@media (min-width: 960px) {
	.cc-sticky { position: sticky; top: calc(var(--cc-header-h) + 32px); }
}

/* Equal-height grid children. */
.wp-block-group.is-layout-grid > .wp-block-group,
.wp-block-group.is-layout-grid > .wp-block-columns { height: 100%; }

/* Hover lift, applied via a group class in the patterns. */
.cc-lift {
	transition: transform 200ms var(--cc-ease), box-shadow 200ms var(--cc-ease);
}

.cc-lift:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 44px rgba(38, 34, 98, 0.16);
}

/* Logo wall tiles. */
.cc-logo-wall { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 600px) { .cc-logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cc-logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Cycle-of-community strip. */
.cc-cycle {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.cc-cycle span {
	font-size: 21px;
	font-weight: 800;
	color: var(--wp--preset--color--navy);
	letter-spacing: -0.01em;
}

.cc-cycle span.cc-cycle-arrow {
	font-size: 15px;
	font-weight: 400;
	color: var(--wp--preset--color--line-strong);
}

/* --------------------------------------------------------------------------
   Gravity Forms
   Gravity Forms 3 ships the "orbital" theme, which is driven entirely by CSS
   custom properties. Setting those is the supported way to restyle it, so the
   forms inherit the Change Course design system instead of fighting it.
   -------------------------------------------------------------------------- */

.cc-form-card {
	background: var(--wp--preset--color--tint);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 36px;
}

/* Orbital declares its defaults on the wrapper itself, so the overrides have to
   land there too — inherited custom properties would lose. */
.cc-form-card .gform_wrapper.gform-theme.gform-theme--framework {
	/* Palette */
	--gf-color-primary: var(--wp--preset--color--teal);
	--gf-color-primary-rgb: 0, 161, 155;
	--gf-color-primary-contrast: #fff;
	--gf-color-primary-darker: var(--wp--preset--color--teal-dark);
	--gf-color-primary-lighter: var(--wp--preset--color--teal);

	/* Fields */
	--gf-ctrl-bg-color: #fff;
	--gf-ctrl-color: var(--wp--preset--color--ink);
	--gf-ctrl-border-color: var(--wp--preset--color--line);
	--gf-ctrl-border-color-hover: var(--wp--preset--color--line-strong);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--teal);
	--gf-ctrl-border-width: 1.5px;
	--gf-ctrl-radius: 6px;
	--gf-ctrl-textarea-radius: 6px;
	--gf-ctrl-multiselect-radius: 6px;
	--gf-ctrl-size: 50px;
	--gf-ctrl-padding-x: 14px;
	--gf-ctrl-font-size: 16px;
	--gf-ctrl-font-family: inherit;
	--gf-ctrl-outline-color: rgba(0, 161, 155, 0.18);
	--gf-ctrl-placeholder-color: var(--wp--preset--color--faint);

	/* Labels */
	--gf-ctrl-label-color-primary: var(--wp--preset--color--slate);
	--gf-ctrl-label-color-secondary: var(--wp--preset--color--slate);
	--gf-ctrl-label-font-size-primary: 12px;
	--gf-ctrl-label-font-weight-primary: 800;
	--gf-ctrl-label-font-family-primary: inherit;
	--gf-ctrl-label-color-req: var(--wp--preset--color--teal-dark);

	/* Rhythm */
	--gf-field-gap-y: 18px;
	--gf-field-gap-x: 18px;
	--gf-form-gap-y: 20px;
	--gf-field-choice-gap: 10px;
	--gf-ctrl-choice-size: 18px;

	/* Submit button */
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--gold);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--gold-dark);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--gold-dark);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--navy);
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--navy);
	--gf-ctrl-btn-color-focus-primary: var(--wp--preset--color--navy);
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-color-hover-primary: transparent;
	--gf-ctrl-btn-radius: 10px;
	--gf-ctrl-btn-font-size: 17px;
	--gf-ctrl-btn-font-weight: 800;
	--gf-ctrl-btn-font-family: inherit;
	--gf-ctrl-btn-size: 54px;
	--gf-ctrl-btn-padding-x: 32px;
}

/* A few control properties are pinned inside the Gravity Forms theme rather
   than exposed as variables, so they are set directly. */
.cc-form-card .gform_wrapper :is(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="number"], input[type="password"], select, textarea
) {
	/* Gravity Forms' own theme pins these, so they are forced here. Scoped to
	   .cc-form-card, they never leak past the Change Course form cards. */
	font-family: inherit !important;
	font-size: 16px !important;
	line-height: var(--cc-lh) !important;
	padding: 12px 14px !important;
	min-height: 0 !important;
	height: auto !important;
	border-width: 1.5px !important;
	border-style: solid !important;
	border-color: var(--wp--preset--color--line);
	border-radius: 6px;
	color: var(--wp--preset--color--ink);
	background-color: #fff;
}

.cc-form-card .gform_wrapper .ginput_container textarea,
.cc-form-card .gform_wrapper textarea {
	line-height: 1.6 !important;
	/* Gravity Forms defaults to a tall box; the design uses four rows. */
	height: 110px !important;
	min-height: 110px !important;
	max-height: none !important;
}

/* The contact form's message field is the one deliberately taller box. */
.cc-form-card--tall-message .gform_wrapper .ginput_container textarea,
.cc-form-card--tall-message .gform_wrapper textarea {
	height: 168px !important;
	min-height: 168px !important;
}

/* Field grid: 18px both ways, matching the design's form layout. */
.cc-form-card .gform_wrapper .gform_fields {
	row-gap: 18px !important;
	column-gap: 18px !important;
}

/* Labels are Change Course slate, not the plugin's default near-black. */
.cc-form-card .gform_wrapper .gfield_label { color: var(--wp--preset--color--slate) !important; }
.cc-form-card--dark .gform_wrapper .gfield_label { color: rgba(255, 255, 255, 0.7) !important; }
.cc-form-card--dark .gform_wrapper .gfield_required { color: var(--wp--preset--color--gold) !important; }

.cc-form-card .gform_wrapper :is(input, select, textarea) { outline-width: 0; }

.cc-form-card .gform_wrapper :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 4px rgba(0, 161, 155, 0.18);
	outline: none;
}

.cc-form-card .gform_wrapper .gform_button {
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	padding: 16px 32px !important;
	min-height: 0 !important;
	height: auto !important;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 150ms var(--cc-ease), transform 100ms var(--cc-ease);
}

.cc-form-card .gform_wrapper :is(input[type="checkbox"], input[type="radio"]) {
	accent-color: var(--wp--preset--color--teal);
	width: 18px;
	height: 18px;
	min-height: 0;
	padding: 0;
	border-radius: 3px;
	box-shadow: none;
}

.cc-form-card--dark .gform_wrapper :is(
	input[type="text"], input[type="email"], input[type="tel"], select, textarea
) {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
}

/* The inline newsletter form keeps the same control shape at a smaller scale. */
.cc-newsletter .gform_wrapper input[type="email"] {
	font-family: inherit !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	padding: 14px 16px !important;
	min-height: 0 !important;
	height: auto !important;
	border: 1.5px solid var(--wp--preset--color--line) !important;
	border-radius: 8px;
	background: #fff;
	width: 100%;
}

.cc-newsletter .gform_wrapper input[type="email"]:focus {
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 4px rgba(0, 161, 155, 0.18);
	outline: none;
}

.cc-newsletter .gform_wrapper .gform_button {
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	padding: 14px 28px !important;
	min-height: 0 !important;
	height: auto !important;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

/* Uppercase tracked labels are a Change Course signature the theme vars
   cannot express. */
.cc-form-card .gform_wrapper .gfield_label {
	display: block;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: var(--cc-lh);
	margin-bottom: 7px;
}

/* The required marker sits inline in the label and would otherwise set a taller
   line box than the label itself. */
.cc-form-card .gform_wrapper .gfield_label * { line-height: inherit; }

.cc-form-card .gform_wrapper .gfield_required {
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.cc-form-card .gform_wrapper .gform-footer,
.cc-form-card .gform_wrapper .gform_footer {
	margin-top: 26px;
	padding: 0;
	justify-content: flex-start;
}

.cc-form-card .gform_wrapper .gform_button:active { transform: scale(0.98); }

/* Checkbox and radio labels read as body copy, not as field labels. */
.cc-form-card .gform_wrapper .gchoice label {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--slate);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

/* A checkbox field given the "cc-choice-tiles" CSS class in Gravity Forms
   renders as the bordered two-up tiles the design uses for interest pickers. */
.cc-form-card .cc-choice-tiles .gfield_label { margin-bottom: 12px; }

.cc-form-card .cc-choice-tiles .gfield_checkbox {
	/* Gravity Forms stacks choices in a flex column; the design lays the
	   interest pickers out two-up. */
	display: grid !important;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.cc-form-card .cc-choice-tiles .gfield_checkbox { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.cc-form-card .cc-choice-tiles .gchoice {
	display: flex;
	gap: 10px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	padding: 12px 14px;
	transition: border-color 120ms var(--cc-ease);
}

.cc-form-card .cc-choice-tiles .gchoice:hover { border-color: var(--wp--preset--color--teal); }
.cc-form-card .cc-choice-tiles .gchoice label { margin: 0; }

/* Teal submit, for the referral and contact forms. */
.cc-form-card--teal-submit .gform_wrapper.gform-theme.gform-theme--framework {
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--teal);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--teal-dark);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--teal-dark);
	--gf-ctrl-btn-color-primary: #fff;
	--gf-ctrl-btn-color-hover-primary: #fff;
	--gf-ctrl-btn-color-focus-primary: #fff;
}

/* The referral form sits on the deep blue band. */
.cc-form-card--dark {
	background: var(--cc-on-navy-surface);
	border-color: var(--cc-on-navy-line);
	/* The design sets the on-navy card a little tighter than the tinted one. */
	padding: 32px;
}

.cc-form-card--dark .gform_wrapper.gform-theme.gform-theme--framework {
	--gf-ctrl-bg-color: rgba(255, 255, 255, 0.08);
	--gf-ctrl-color: #fff;
	--gf-ctrl-border-color: rgba(255, 255, 255, 0.2);
	--gf-ctrl-border-color-hover: rgba(255, 255, 255, 0.35);
	--gf-ctrl-label-color-primary: rgba(255, 255, 255, 0.7);
	--gf-ctrl-label-color-secondary: rgba(255, 255, 255, 0.7);
	--gf-ctrl-label-color-req: var(--wp--preset--color--gold);
	--gf-ctrl-placeholder-color: rgba(255, 255, 255, 0.45);
}

.cc-form-card--dark .gform_wrapper .gchoice label { color: rgba(255, 255, 255, 0.82); }

.cc-form-card--dark .cc-choice-tiles .gchoice {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Confirmation message after a successful submission. */
.cc-form-card .gform_confirmation_message {
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--slate);
}

.cc-form-card--dark .gform_confirmation_message { color: var(--cc-on-navy-text); }

/* A placeholder shown where a Gravity Form has not been chosen yet. */
.cc-form-placeholder {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	padding: 5px 11px;
	border-radius: 999px;
	margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Post content (blog / stories), so non-designed pages still look right
   -------------------------------------------------------------------------- */

.cc-prose > * + * { margin-top: 20px; }
.cc-prose h2 { margin-top: 48px; }
.cc-prose h3 { margin-top: 32px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.cc-nav .wp-block-navigation__container { gap: 14px; }
	.cc-nav .wp-block-navigation-item__content { font-size: 13.5px; }
}

@media (max-width: 781px) {
	.wp-block-group.is-style-cc-hairline-grid > * { padding: 24px; }
	.cc-form-card { padding: 24px; }
	.wp-block-quote.is-style-cc-card { padding: 24px 26px; }
	details.is-style-cc-faq > summary { padding: 16px 18px; font-size: 16px; }
	details.is-style-cc-faq > :not(summary) { padding: 0 18px; }
	details.is-style-cc-faq > :last-child { padding-bottom: 18px; }
}

/* --------------------------------------------------------------------------
   Page-specific composites
   -------------------------------------------------------------------------- */

/* "Most needed" pill on the monthly-giving card. */
p.cc-pill-badge {
	display: inline-block;
	align-self: flex-start;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--gold);
	padding: 5px 11px;
	border-radius: 999px;
}

/* Giving cards fill their grid cell and push the button to the bottom. */
.cc-give-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cc-give-card > .wp-block-buttons { margin-top: auto; }
.cc-give-card .wp-block-button { width: 100%; }
.cc-give-card .wp-block-button__link { width: 100%; justify-content: center; }

/* Gold-tinted panel: Night of Hope. */
.cc-gold-panel {
	background: rgba(252, 163, 17, 0.13);
	border: 1px solid rgba(252, 163, 17, 0.42);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cc-gold-panel > .wp-block-buttons { margin-top: auto; }

/* The white "where it went" ledger card sits on the deep blue band. */
.cc-ledger { height: 100%; }

/* Newsletter form sits inline on the contact page. */
.cc-newsletter { flex: 1 1 420px; }

.cc-newsletter .gform_wrapper.gform-theme.gform-theme--framework {
	--gf-ctrl-bg-color: #fff;
	--gf-ctrl-border-color: var(--wp--preset--color--line);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--teal);
	--gf-ctrl-border-width: 1.5px;
	--gf-ctrl-radius: 8px;
	--gf-ctrl-size: 50px;
	--gf-ctrl-font-size: 16px;
	--gf-ctrl-font-family: inherit;
	--gf-ctrl-outline-color: rgba(0, 161, 155, 0.18);
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--navy);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--navy-deep);
	--gf-ctrl-btn-color-primary: #fff;
	--gf-ctrl-btn-color-hover-primary: #fff;
	--gf-ctrl-btn-radius: 8px;
	--gf-ctrl-btn-font-size: 16px;
	--gf-ctrl-btn-font-weight: 800;
	--gf-ctrl-btn-font-family: inherit;
	--gf-ctrl-btn-size: 50px;
	--gf-ctrl-btn-padding-x: 28px;
}

.cc-newsletter .gform_wrapper form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.cc-newsletter .gform_wrapper .gform_body { flex: 1 1 280px; }
.cc-newsletter .gform_wrapper .gfield { margin: 0; }
.cc-newsletter .gform_wrapper .gfield_label { display: none; }

.cc-newsletter .gform_wrapper .gform-footer,
.cc-newsletter .gform_wrapper .gform_footer {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

/* Sticky form intros need room under the header. */
.cc-sticky > * { margin-top: 0; }

/* Hairline grid cells that carry their own card padding should not double up. */
.is-style-cc-hairline-grid > .cc-tile--plain { padding: 22px 20px; }


/* --------------------------------------------------------------------------
   Design variants
   Modifier classes for the handful of places where the same component appears
   at a second size or weight in the design. Applied via the block's Additional
   CSS class field, so they stay discoverable in the editor.
   -------------------------------------------------------------------------- */

/* Square collage (This Is My Story). Declared after .is-style-cc-collage so it
   wins the 3/4 portrait ratio that style sets. */
.wp-block-gallery.is-style-cc-collage.cc-square figure img {
	aspect-ratio: 1 / 1;
	border-radius: 10px;
}

/* A measure cap for intro blocks that sit left-aligned inside a wide section.
   The constrained layout would otherwise centre anything with a max-width. */
.cc-measure-sm, .cc-measure, .cc-measure-md, .cc-measure-lg, .cc-measure-xl,
.cc-measure-hero, .cc-measure-lead, .cc-measure-lead-lg, .cc-measure-hero-sm,
.cc-measure-hero-lead {
	margin-left: 0;
	margin-right: auto;
}

.cc-measure-sm { max-width: 520px; }
.cc-measure { max-width: 560px; }
.cc-measure-md { max-width: 640px; }
.cc-measure-lg { max-width: 680px; }
.cc-measure-xl { max-width: 900px; }

/* Tiles: the design uses two title sizes and two body sizes. */
.cc-tile--sm-title .cc-tile__title { font-size: 16px; }
.cc-tile--sm-title .cc-tile__text { color: rgba(255, 255, 255, 0.68); }

/* A report we cannot link yet reads a step quieter than the rest. */
.cc-tile--pending .cc-tile__title,
.cc-tile--pending .cc-tile__text { color: rgba(255, 255, 255, 0.72); }
.cc-tile--lg-text .cc-tile__text { font-size: 15px; line-height: 1.55; }

/* Stat note: 15px muted in the compact cards, 16px slate in the big ones. */
.cc-stat--note-sm .cc-stat__note { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--muted); }
.cc-stat--note-on-navy .cc-stat__note { line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.cc-stat--note-light .cc-stat__note { color: rgba(255, 255, 255, 0.82); }
.cc-stat--note-white .cc-stat__note { color: #fff; }

/* Application steps use full gold; the church door numbers use the deep gold. */
.cc-phase--step-gold .cc-phase__step { color: var(--wp--preset--color--gold); }

/* A plain badge reading as a heading on the deep blue card. */
.cc-badge--on-navy .cc-badge__title { color: #fff; }

/* Placeholder captions read in the surrounding text colour, as in the design. */
.cc-media--empty,
.cc-photo__media.cc-media--empty { color: inherit; opacity: 0.75; }

/* The phone number and quiet links that sit on light bands in the deep blue
   brand colour rather than the teal link colour. */
.wp-block-button.cc-link-navy .wp-block-button__link,
.cc-link-navy a, a.cc-link-navy { color: var(--wp--preset--color--navy); }

.wp-block-button.cc-link-navy .wp-block-button__link:hover,
.cc-link-navy a:hover, a.cc-link-navy:hover { color: var(--wp--preset--color--teal-dark); }


/* An underlined text link on the deep blue band: the design's secondary action
   beside a ghost button. */
.wp-block-button.is-style-cc-underline .wp-block-button__link {
	background: transparent;
	color: #fff;
	font-weight: 700;
	padding: 12px 4px;
	border: none;
	border-radius: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.wp-block-button.is-style-cc-underline .wp-block-button__link:hover {
	border-bottom-color: var(--wp--preset--color--gold);
	color: #fff;
	text-decoration: none;
}

/* The scripture attribution is a 14px eyebrow, not the standard 12px. */
p.is-style-cc-eyebrow.cc-eyebrow-lg { font-size: 14px; letter-spacing: 0.12em; }

/* Sections set blockGap to 0 and carry their own spacing, so the eyebrow that
 * introduces a feature quote needs its gap back. */
p.is-style-cc-eyebrow + blockquote.is-style-cc-feature { margin-block-start: 24px; }


/* FAQ cards carry their own 10px margin; the layout gap would stack on it. */
.wp-block-group > details.is-style-cc-faq + details.is-style-cc-faq {
	margin-block-start: 0;
}


/* Hero measures, matching the prototype's max-widths. */
.cc-measure-hero { max-width: 900px; }
.cc-measure-lead { max-width: 660px; }
.cc-measure-lead-lg { max-width: 680px; }
.cc-measure-hero-sm { max-width: 520px; }
.cc-measure-hero-lead { max-width: 620px; }