/*
Theme Name: JCATL GeneratePress Child
Theme URI: https://joshcarter.com
Description: Custom child theme for the JCATL personal brand site, built on GeneratePress.
Author: Josh Carter
Template: generatepress
Version: 0.5.0
Text Domain: jcatl-gp-child
*/

/* Design tokens
--------------------------------------------- */

:root {
	/* Canonical brand palette from the Josh Carter style guide. */
	--jcatl-color-brand-blue: #00374f;
	--jcatl-color-brand-black: #000000;
	--jcatl-color-brand-green: #65b335;
	--jcatl-color-brand-orange: #e9540d;
	--jcatl-color-white: #ffffff;
	--jcatl-color-blue-tint-96: #f5f7f8;
	--jcatl-color-blue-tint-90: #e6ebed;
	--jcatl-color-blue-tint-80: #ccd7dc;

	/* Semantic colors */
	--jcatl-color-background: var(--jcatl-color-white);
	--jcatl-color-surface: var(--jcatl-color-blue-tint-96);
	--jcatl-color-surface-strong: var(--jcatl-color-blue-tint-90);
	--jcatl-color-text: var(--jcatl-color-brand-black);
	--jcatl-color-text-muted: var(--jcatl-color-brand-blue);
	--jcatl-color-heading: var(--jcatl-color-brand-blue);
	--jcatl-color-border: var(--jcatl-color-blue-tint-80);
	--jcatl-color-link: var(--jcatl-color-brand-blue);
	--jcatl-color-link-hover: var(--jcatl-color-brand-black);
	--jcatl-color-accent: var(--jcatl-color-brand-orange);
	--jcatl-color-success: var(--jcatl-color-brand-green);
	--jcatl-color-focus: var(--jcatl-color-brand-orange);

	/* Typography */
	--jcatl-font-family-brand: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--jcatl-font-family-base: var(--jcatl-font-family-brand);
	--jcatl-font-family-heading: var(--jcatl-font-family-base);
	--jcatl-font-family-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--jcatl-font-size-xs: 0.75rem;
	--jcatl-font-size-sm: 0.875rem;
	--jcatl-font-size-md: 1rem;
	--jcatl-font-size-lg: 1.125rem;
	--jcatl-font-size-xl: 1.25rem;
	--jcatl-font-size-2xl: 1.5rem;
	--jcatl-font-size-3xl: 2rem;
	--jcatl-font-size-4xl: 2.5rem;
	--jcatl-font-size-5xl: 3.5rem;
	--jcatl-font-size-6xl: 5rem;
	--jcatl-line-height-tight: 1.15;
	--jcatl-line-height-heading: 1.2;
	--jcatl-line-height-base: 1.6;
	--jcatl-letter-spacing-base: 0;
	--jcatl-font-weight-light: 300;
	--jcatl-font-weight-regular: 400;
	--jcatl-font-weight-medium: 500;
	--jcatl-font-weight-semibold: 600;
	--jcatl-font-weight-bold: 700;
	--jcatl-font-weight-black: 900;

	/* Type roles */
	--jcatl-type-hero-headline-size: var(--jcatl-font-size-4xl);
	--jcatl-type-page-title-size: var(--jcatl-font-size-3xl);
	--jcatl-type-section-heading-size: var(--jcatl-font-size-2xl);
	--jcatl-type-body-size: var(--jcatl-font-size-md);
	--jcatl-type-pull-quote-size: var(--jcatl-font-size-xl);
	--jcatl-type-caption-size: var(--jcatl-font-size-xs);
	--jcatl-type-nav-label-size: var(--jcatl-font-size-sm);
	--jcatl-type-button-size: var(--jcatl-font-size-sm);

	/* Spacing */
	--jcatl-space-0: 0;
	--jcatl-space-1: 0.25rem;
	--jcatl-space-2: 0.5rem;
	--jcatl-space-3: 0.75rem;
	--jcatl-space-4: 1rem;
	--jcatl-space-5: 1.5rem;
	--jcatl-space-6: 2rem;
	--jcatl-space-7: 3rem;
	--jcatl-space-8: 4rem;
	--jcatl-space-9: 6rem;
	--jcatl-space-10: 8rem;

	/* Layout */
	--jcatl-width-text: 44rem;
	--jcatl-width-content: 44rem;
	--jcatl-width-default: 72rem;
	--jcatl-width-wide: 82rem;
	--jcatl-width-site: 90rem;
	--gb-container-width: var(--jcatl-width-default);

	/* GeneratePress and imported Keynote alias tokens. */
	--contrast: var(--jcatl-color-brand-black);
	--contrast-2: var(--jcatl-color-brand-blue);
	--contrast-3: var(--jcatl-color-blue-tint-80);
	--base: var(--jcatl-color-blue-tint-80);
	--base-2: var(--jcatl-color-blue-tint-96);
	--base-3: var(--jcatl-color-white);
	--accent: var(--jcatl-color-brand-blue);
	--accent-2: var(--jcatl-color-brand-green);
	--accent-3: var(--jcatl-color-brand-orange);

	/* Borders and elevation */
	--jcatl-radius-sm: 0.25rem;
	--jcatl-radius-md: 0.5rem;
	--jcatl-radius-pill: 999px;
	--jcatl-border-width: 1px;
	--jcatl-shadow-soft: 0 1px 2px rgba(0, 55, 79, 0.08), 0 12px 32px rgba(0, 55, 79, 0.08);

	/* Buttons */
	--jcatl-button-background: var(--jcatl-color-brand-blue);
	--jcatl-button-background-hover: var(--jcatl-color-brand-black);
	--jcatl-button-border-color: var(--jcatl-color-brand-blue);
	--jcatl-button-border-color-hover: var(--jcatl-color-brand-black);
	--jcatl-button-color: var(--jcatl-color-white);
	--jcatl-button-font-family: var(--jcatl-font-family-brand);
	--jcatl-button-font-size: var(--jcatl-type-button-size);
	--jcatl-button-font-weight: var(--jcatl-font-weight-semibold);
	--jcatl-button-line-height: 1.2;
	--jcatl-button-padding-block: 0.875rem;
	--jcatl-button-padding-inline: 1.25rem;
	--jcatl-button-radius: var(--jcatl-radius-pill);

	/* Reviewed breakpoints: mobile <= 767px, tablet 768px-1024px, desktop >= 1025px. */
	--jcatl-breakpoint-mobile-max: 767px;
	--jcatl-breakpoint-tablet-min: 768px;
	--jcatl-breakpoint-tablet-max: 1024px;
	--jcatl-breakpoint-desktop-min: 1025px;

	/* Motion */
	--jcatl-transition-fast: 150ms ease;
	--jcatl-transition-base: 220ms ease;
}

@media (min-width: 768px) {
	:root {
		--jcatl-type-hero-headline-size: var(--jcatl-font-size-5xl);
		--jcatl-type-page-title-size: var(--jcatl-font-size-4xl);
		--jcatl-type-section-heading-size: var(--jcatl-font-size-3xl);
		--jcatl-type-pull-quote-size: var(--jcatl-font-size-2xl);
	}
}

@media (min-width: 1025px) {
	:root {
		--jcatl-type-hero-headline-size: var(--jcatl-font-size-6xl);
		--jcatl-type-page-title-size: var(--jcatl-font-size-5xl);
	}
}

/* Base token mapping
--------------------------------------------- */

body {
	background-color: var(--jcatl-color-background);
	color: var(--jcatl-color-text);
	font-family: var(--jcatl-font-family-base);
	font-size: var(--jcatl-font-size-md);
	letter-spacing: var(--jcatl-letter-spacing-base);
	line-height: var(--jcatl-line-height-base);
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--jcatl-color-heading);
	font-family: var(--jcatl-font-family-heading);
	font-weight: var(--jcatl-font-weight-black);
	letter-spacing: var(--jcatl-letter-spacing-base);
	line-height: var(--jcatl-line-height-heading);
}

h1 {
	font-size: var(--jcatl-type-page-title-size);
}

h2 {
	font-size: var(--jcatl-type-section-heading-size);
}

p,
li {
	font-size: var(--jcatl-type-body-size);
}

a {
	color: var(--jcatl-color-link);
	text-underline-offset: 0.18em;
	transition: color var(--jcatl-transition-fast);
}

a:hover,
a:focus {
	color: var(--jcatl-color-link-hover);
}

:focus-visible {
	outline: 2px solid var(--jcatl-color-focus);
	outline-offset: 3px;
}

::selection {
	background-color: var(--jcatl-color-brand-orange);
	color: var(--jcatl-color-brand-black);
}

blockquote,
.wp-block-quote,
.wp-block-pullquote {
	border-color: var(--jcatl-color-brand-green);
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-type-pull-quote-size);
	font-style: italic;
	font-weight: var(--jcatl-font-weight-medium);
	line-height: var(--jcatl-line-height-heading);
}

figcaption,
.wp-caption-text,
.entry-meta,
.posted-on,
.cat-links,
.tags-links {
	color: var(--jcatl-color-text-muted);
	font-size: var(--jcatl-type-caption-size);
	font-weight: var(--jcatl-font-weight-medium);
	line-height: var(--jcatl-line-height-base);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.wp-block-navigation-item__content {
	font-family: var(--jcatl-font-family-brand);
	font-size: var(--jcatl-type-nav-label-size);
	font-weight: var(--jcatl-font-weight-semibold);
	letter-spacing: var(--jcatl-letter-spacing-base);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.gb-button {
	align-items: center;
	background-color: var(--jcatl-button-background);
	border: 2px solid var(--jcatl-button-border-color);
	border-radius: var(--jcatl-button-radius);
	color: var(--jcatl-button-color);
	display: inline-flex;
	font-family: var(--jcatl-button-font-family);
	font-size: var(--jcatl-button-font-size);
	font-weight: var(--jcatl-button-font-weight);
	justify-content: center;
	letter-spacing: var(--jcatl-letter-spacing-base);
	line-height: var(--jcatl-button-line-height);
	padding: var(--jcatl-button-padding-block) var(--jcatl-button-padding-inline);
	text-decoration: none;
	transition: background-color var(--jcatl-transition-fast), border-color var(--jcatl-transition-fast), color var(--jcatl-transition-fast);
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.button:hover,
.button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.gb-button:hover,
.gb-button:focus {
	background-color: var(--jcatl-button-background-hover);
	border-color: var(--jcatl-button-border-color-hover);
	color: var(--jcatl-button-color);
}

/* Reusable editor and plugin refinements
--------------------------------------------- */

.gb-container p:last-child:last-of-type,
.gb-container ul:last-child:last-of-type,
.gb-container ol:last-child:last-of-type,
.wp-block-group p:last-child:last-of-type,
.wp-block-group ul:last-child:last-of-type,
.wp-block-group ol:last-child:last-of-type {
	margin-bottom: 0;
}

.content-area :is(p, li) a {
	border-bottom: 1px solid currentColor;
	color: var(--jcatl-color-link);
	font-weight: var(--jcatl-font-weight-medium);
	padding-bottom: 0;
	text-decoration: none;
}

.content-area :is(p, li) a:hover,
.content-area :is(p, li) a:focus {
	color: var(--jcatl-color-link-hover);
}

.gb-button {
	line-height: var(--jcatl-line-height-heading);
}

.wp-block-categories {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

@media (max-width: 1024px) {
	.site-content {
		flex-direction: column;
	}

	.site-content .content-area,
	.site-content .is-right-sidebar {
		width: 100%;
	}
}

.single-post :is(p, ul, ol) + :is(h2, h3, h4) {
	margin-top: var(--jcatl-space-7);
}

.wp-block-search__button.has-icon {
	background-color: var(--jcatl-button-background);
	border-radius: var(--jcatl-radius-sm);
	transition: background-color var(--jcatl-transition-fast);
}

.wp-block-search__button.has-icon:hover,
.wp-block-search__button.has-icon:focus {
	background-color: var(--jcatl-button-background-hover);
}

.wp-block-search__button svg {
	min-height: 1.6em;
	min-width: 1.6em;
	vertical-align: text-bottom;
}

.site-footer .wp-block-navigation,
.jcatl-footer-cta .wp-block-navigation {
	gap: 0;
}

.site-footer .wp-block-navigation li:hover,
.site-footer .wp-block-navigation li:focus-within,
.jcatl-footer-cta .wp-block-navigation li:hover,
.jcatl-footer-cta .wp-block-navigation li:focus-within {
	color: var(--jcatl-color-link-hover);
}

.fluentform .frm-fluent-form .ff-el-input--label {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-md);
	font-weight: var(--jcatl-font-weight-medium);
}

.fluentform .frm-fluent-form .ff-el-form-control {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-sm);
	color: var(--jcatl-color-text);
	font-size: var(--jcatl-font-size-md);
	line-height: var(--jcatl-line-height-base);
	padding: 0.6875rem 1.5rem;
}

.fluentform .frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--jcatl-color-focus);
	outline: 2px solid var(--jcatl-color-focus);
	outline-offset: 2px;
}

.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--jcatl-color-text-muted);
	font-size: var(--jcatl-font-size-md);
}

.fluentform .frm-fluent-form .ff-btn-submit {
	background-color: var(--jcatl-button-background);
	border: 2px solid var(--jcatl-button-border-color);
	border-radius: var(--jcatl-button-radius);
	color: var(--jcatl-button-color);
	font-size: var(--jcatl-font-size-md);
	font-weight: var(--jcatl-font-weight-semibold);
	line-height: var(--jcatl-line-height-heading);
	opacity: 1;
	padding: 0.6875rem 1.5rem;
	transition: background-color var(--jcatl-transition-fast), border-color var(--jcatl-transition-fast), color var(--jcatl-transition-fast);
}

.fluentform .frm-fluent-form .ff-btn-submit:hover,
.fluentform .frm-fluent-form .ff-btn-submit:focus {
	background-color: var(--jcatl-button-background-hover);
	border-color: var(--jcatl-button-border-color-hover);
	color: var(--jcatl-button-color);
}

form.fluent_form_3 .ff-btn-submit,
form.fluent_form_4 .ff-btn-submit {
	width: 100%;
}

.fluentform .ff-el-is-error .text-danger {
	font-size: var(--jcatl-font-size-md) !important;
}

.frm-fluent-form .ff-t-cell .ff_submit_btn_wrapper_custom {
	margin-top: 0 !important;
}

.fluentform .ff-message-success {
	border: 0;
	box-shadow: none;
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-md);
	font-weight: var(--jcatl-font-weight-medium);
	margin-top: var(--jcatl-space-4);
	padding: 0;
	position: relative;
	text-align: center;
}

/* Reusable section patterns
--------------------------------------------- */

.jcatl-section {
	background-color: var(--jcatl-color-white);
	color: var(--jcatl-color-text);
	margin-block: 0;
	padding: var(--jcatl-space-8) var(--jcatl-space-5);
}

.jcatl-section--tint {
	background-color: var(--jcatl-color-blue-tint-96);
}

.jcatl-section--dark,
.jcatl-section--accent {
	background-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-white);
}

.jcatl-section--dark h1,
.jcatl-section--dark h2,
.jcatl-section--dark h3,
.jcatl-section--dark p,
.jcatl-section--accent h1,
.jcatl-section--accent h2,
.jcatl-section--accent h3,
.jcatl-section--accent p {
	color: inherit;
}

.jcatl-section__inner,
.jcatl-section__grid,
.jcatl-section__header {
	margin-inline: auto;
	max-width: var(--jcatl-width-wide);
	width: 100%;
}

.jcatl-section__copy,
.jcatl-section__header {
	max-width: var(--jcatl-width-text);
}

.jcatl-section__grid,
.jcatl-contact-grid {
	align-items: center;
	display: grid;
	gap: var(--jcatl-space-7);
	grid-template-columns: minmax(0, 1fr);
}

.jcatl-section__header {
	margin-bottom: var(--jcatl-space-6);
}

.jcatl-kicker,
.jcatl-card__meta,
.jcatl-post-card__meta {
	color: var(--jcatl-color-brand-orange);
	font-size: var(--jcatl-font-size-xs);
	font-weight: var(--jcatl-font-weight-bold);
	letter-spacing: 0;
	line-height: var(--jcatl-line-height-tight);
	margin-bottom: var(--jcatl-space-2);
	text-transform: uppercase;
}

.jcatl-section--dark .jcatl-kicker,
.jcatl-section--accent .jcatl-kicker {
	color: var(--jcatl-color-brand-green);
}

.jcatl-lede {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-lg);
	line-height: var(--jcatl-line-height-base);
}

.jcatl-section--dark .jcatl-lede,
.jcatl-section--accent .jcatl-lede {
	color: var(--jcatl-color-white);
}

.jcatl-hero {
	background-color: var(--jcatl-color-blue-tint-96);
	padding-top: var(--jcatl-space-9);
}

.jcatl-hero__title {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-type-hero-headline-size);
	line-height: var(--jcatl-line-height-tight);
	margin-bottom: var(--jcatl-space-4);
	max-width: 12ch;
}

.jcatl-media-frame {
	align-items: center;
	aspect-ratio: 4 / 3;
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	color: var(--jcatl-color-brand-blue);
	display: flex;
	justify-content: center;
	min-height: 18rem;
	overflow: hidden;
	padding: var(--jcatl-space-5);
	text-align: center;
}

.jcatl-section--tint .jcatl-media-frame {
	background-color: var(--jcatl-color-white);
}

.jcatl-card-grid {
	display: grid;
	gap: var(--jcatl-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.jcatl-card,
.jcatl-post-card,
.jcatl-contact-panel {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	box-shadow: var(--jcatl-shadow-soft);
	color: var(--jcatl-color-text);
	padding: var(--jcatl-space-5);
}

.jcatl-card--accent {
	border-color: var(--jcatl-color-brand-green);
}

.jcatl-card p:last-child,
.jcatl-post-card p:last-child,
.jcatl-contact-panel p:last-child {
	margin-bottom: 0;
}

.jcatl-cta,
.jcatl-footer-cta {
	align-items: center;
	background-color: var(--jcatl-color-brand-blue);
	border-radius: var(--jcatl-radius-md);
	color: var(--jcatl-color-white);
	display: grid;
	gap: var(--jcatl-space-5);
	grid-template-columns: minmax(0, 1fr);
	padding: var(--jcatl-space-6);
}

.jcatl-cta h2,
.jcatl-cta h3,
.jcatl-cta p,
.jcatl-footer-cta h2,
.jcatl-footer-cta h3,
.jcatl-footer-cta p {
	color: inherit;
}

.jcatl-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jcatl-space-3);
	margin-top: var(--jcatl-space-5);
}

.jcatl-cta .jcatl-actions,
.jcatl-footer-cta .jcatl-actions {
	margin-top: 0;
}

.jcatl-section .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-section .is-style-outline .wp-block-button__link:hover,
.jcatl-section .is-style-outline .wp-block-button__link:focus {
	background-color: var(--jcatl-color-blue-tint-96);
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-brand-black);
}

.jcatl-section--dark .is-style-outline .wp-block-button__link,
.jcatl-section--accent .is-style-outline .wp-block-button__link,
.jcatl-cta .is-style-outline .wp-block-button__link,
.jcatl-footer-cta .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--jcatl-color-white);
	color: var(--jcatl-color-white);
}

.jcatl-section--dark .is-style-outline .wp-block-button__link:hover,
.jcatl-section--dark .is-style-outline .wp-block-button__link:focus,
.jcatl-section--accent .is-style-outline .wp-block-button__link:hover,
.jcatl-section--accent .is-style-outline .wp-block-button__link:focus,
.jcatl-cta .is-style-outline .wp-block-button__link:hover,
.jcatl-cta .is-style-outline .wp-block-button__link:focus,
.jcatl-footer-cta .is-style-outline .wp-block-button__link:hover,
.jcatl-footer-cta .is-style-outline .wp-block-button__link:focus {
	background-color: var(--jcatl-color-white);
	border-color: var(--jcatl-color-white);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-card-grid.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jcatl-post-card {
	display: grid;
	gap: var(--jcatl-space-4);
	grid-template-columns: minmax(0, 1fr);
}

.jcatl-post-card .wp-block-post-featured-image,
.jcatl-post-card__image {
	aspect-ratio: 16 / 10;
	background-color: var(--jcatl-color-blue-tint-96);
	border-radius: var(--jcatl-radius-sm);
	margin: 0;
	overflow: hidden;
}

.jcatl-post-card .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 768px) {
	.jcatl-post-card {
		grid-template-columns: minmax(10rem, 0.4fr) minmax(0, 0.6fr);
	}

	.jcatl-cta,
	.jcatl-footer-cta {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

@media (min-width: 1025px) {
	.jcatl-section {
		padding-block: var(--jcatl-space-9);
	}

	.jcatl-section__grid,
	.jcatl-contact-grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}

@media (max-width: 767px) {
	.jcatl-section {
		padding: var(--jcatl-space-6) var(--jcatl-space-4);
	}

	.jcatl-hero {
		padding-top: var(--jcatl-space-7);
	}

	.jcatl-actions,
	.jcatl-actions .wp-block-button,
	.jcatl-actions .wp-block-button__link {
		width: 100%;
	}

	.jcatl-cta,
	.jcatl-footer-cta {
		padding: var(--jcatl-space-5);
	}
}

/* Homepage patterns
--------------------------------------------- */

.jcatl-home {
	background-color: var(--jcatl-color-white);
	color: var(--jcatl-color-text);
}

.jcatl-home-section {
	margin-block: 0;
	padding: var(--jcatl-space-8) var(--jcatl-space-5);
}

.jcatl-home-section > .jcatl-home-shell,
.jcatl-home-shell {
	margin-inline: auto;
	max-width: var(--jcatl-width-wide);
	width: 100%;
}

.jcatl-home-section h1,
.jcatl-home-section h2,
.jcatl-home-section h3,
.jcatl-home-section p {
	margin-top: 0;
}

.jcatl-home-section h2 {
	margin-bottom: var(--jcatl-space-4);
}

.jcatl-home-section h3 {
	font-size: var(--jcatl-font-size-xl);
	margin-bottom: var(--jcatl-space-3);
}

.jcatl-home-kicker,
.jcatl-home-card__meta {
	color: var(--jcatl-color-brand-orange);
	font-size: var(--jcatl-font-size-xs);
	font-weight: var(--jcatl-font-weight-bold);
	letter-spacing: 0;
	line-height: var(--jcatl-line-height-tight);
	margin-bottom: var(--jcatl-space-2);
	text-transform: uppercase;
}

.jcatl-home-lede,
.jcatl-home-proof__intro {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-lg);
	line-height: var(--jcatl-line-height-base);
}

.jcatl-home-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jcatl-space-3);
	margin-top: var(--jcatl-space-5);
}

.jcatl-home .jcatl-home-button-secondary .wp-block-button__link {
	background-color: var(--jcatl-color-white);
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-home .jcatl-home-button-secondary .wp-block-button__link:hover,
.jcatl-home .jcatl-home-button-secondary .wp-block-button__link:focus {
	background-color: var(--jcatl-color-blue-tint-96);
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-brand-black);
}

.jcatl-home .jcatl-home-button-link .wp-block-button__link {
	background-color: transparent;
	border-color: transparent;
	color: var(--jcatl-color-brand-blue);
	padding-inline: 0;
}

.jcatl-home .jcatl-home-button-link .wp-block-button__link:hover,
.jcatl-home .jcatl-home-button-link .wp-block-button__link:focus {
	background-color: transparent;
	border-color: transparent;
	color: var(--jcatl-color-brand-black);
	text-decoration: underline;
}

.jcatl-home-hero {
	background-color: var(--jcatl-color-blue-tint-96);
	padding-top: var(--jcatl-space-9);
}

.jcatl-home-hero__grid,
.jcatl-home-split,
.jcatl-home-feature,
.jcatl-home-contact__grid {
	align-items: center;
	display: grid;
	gap: var(--jcatl-space-7);
	grid-template-columns: minmax(0, 1fr);
}

.jcatl-home-hero__content,
.jcatl-home-section-copy,
.jcatl-home-section-header,
.jcatl-home-feature__content {
	max-width: var(--jcatl-width-text);
}

.jcatl-home-hero__title {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-type-hero-headline-size);
	line-height: var(--jcatl-line-height-tight);
	margin-bottom: var(--jcatl-space-4);
	max-width: 12ch;
}

.jcatl-home-hero__lineage {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-xl);
	font-weight: var(--jcatl-font-weight-semibold);
	line-height: var(--jcatl-line-height-heading);
	margin-bottom: var(--jcatl-space-4);
}

.jcatl-home-image-placeholder,
.jcatl-home-embed-placeholder,
.jcatl-home-form-placeholder {
	align-items: center;
	background-color: var(--jcatl-color-blue-tint-96);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	color: var(--jcatl-color-brand-blue);
	display: flex;
	justify-content: center;
	min-height: 18rem;
	padding: var(--jcatl-space-5);
	text-align: center;
}

.jcatl-home-image-placeholder > p,
.jcatl-home-embed-placeholder > p {
	margin-bottom: 0;
}

.jcatl-home-hero__image {
	aspect-ratio: 4 / 5;
	background-color: var(--jcatl-color-white);
	min-height: 24rem;
}

.jcatl-home-proof {
	background-color: var(--jcatl-color-white);
	border-bottom: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-top: var(--jcatl-border-width) solid var(--jcatl-color-border);
	padding: var(--jcatl-space-6) var(--jcatl-space-5);
}

.jcatl-home-proof__intro {
	margin-bottom: var(--jcatl-space-5);
	max-width: var(--jcatl-width-text);
}

.jcatl-home-logo-band {
	display: grid;
	gap: var(--jcatl-space-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.jcatl-home-logo-band li {
	align-items: center;
	background-color: var(--jcatl-color-blue-tint-96);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	color: var(--jcatl-color-brand-blue);
	display: flex;
	font-size: var(--jcatl-font-size-sm);
	font-weight: var(--jcatl-font-weight-semibold);
	justify-content: center;
	min-height: 5rem;
	padding: var(--jcatl-space-4);
	text-align: center;
}

.jcatl-home-about,
.jcatl-home-conversations,
.jcatl-home-foundation {
	background-color: var(--jcatl-color-blue-tint-96);
}

.jcatl-home-card-grid {
	display: grid;
	gap: var(--jcatl-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	margin-bottom: var(--jcatl-space-6);
}

.jcatl-home-card {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	box-shadow: var(--jcatl-shadow-soft);
	padding: var(--jcatl-space-5);
}

.jcatl-home-card--large {
	border-color: var(--jcatl-color-brand-green);
}

.jcatl-home-card--compact {
	box-shadow: none;
}

.jcatl-home-card p:last-child {
	margin-bottom: 0;
}

.jcatl-home-card__link a,
.jcatl-home-card a {
	font-weight: var(--jcatl-font-weight-semibold);
}

.jcatl-home-podcast {
	background-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-white);
}

.jcatl-home-podcast h2,
.jcatl-home-podcast h3,
.jcatl-home-podcast .jcatl-home-lede,
.jcatl-home-podcast .jcatl-home-card__meta {
	color: var(--jcatl-color-white);
}

.jcatl-home-podcast .jcatl-home-kicker {
	color: var(--jcatl-color-brand-green);
}

.jcatl-home-podcast .jcatl-home-button-secondary .wp-block-button__link {
	background-color: transparent;
	border-color: var(--jcatl-color-white);
	color: var(--jcatl-color-white);
}

.jcatl-home-podcast .jcatl-home-button-secondary .wp-block-button__link:hover,
.jcatl-home-podcast .jcatl-home-button-secondary .wp-block-button__link:focus {
	background-color: var(--jcatl-color-white);
	border-color: var(--jcatl-color-white);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-home-embed-card,
.jcatl-home-form-placeholder {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	box-shadow: var(--jcatl-shadow-soft);
	color: var(--jcatl-color-text);
	padding: var(--jcatl-space-5);
}

.jcatl-home-podcast .jcatl-home-embed-card .jcatl-home-card__meta {
	color: var(--jcatl-color-brand-orange);
}

.jcatl-home-embed-placeholder {
	aspect-ratio: 16 / 9;
	background-color: var(--jcatl-color-blue-tint-96);
	margin-bottom: var(--jcatl-space-4);
	min-height: 12rem;
}

.jcatl-home-logo-placeholder {
	background-color: var(--jcatl-color-white);
	min-height: 16rem;
}

.jcatl-home-contact {
	background-color: var(--jcatl-color-white);
	border-top: 4px solid var(--jcatl-color-brand-blue);
}

.jcatl-home-form-placeholder {
	align-items: flex-start;
	display: block;
	text-align: left;
}

@media (min-width: 768px) {
	.jcatl-home-card-grid--featured {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.875fr);
	}

	.jcatl-home-card-grid--featured .jcatl-home-card--large {
		grid-row: span 2;
	}
}

@media (min-width: 1025px) {
	.jcatl-home-section {
		padding-block: var(--jcatl-space-9);
	}

	.jcatl-home-hero__grid {
		grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
	}

	.jcatl-home-split,
	.jcatl-home-feature,
	.jcatl-home-contact__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	}

	.jcatl-home-feature--reverse {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	}

	.jcatl-home-feature--reverse .jcatl-home-feature__content {
		order: 2;
	}

	.jcatl-home-feature--reverse .jcatl-home-image-placeholder {
		order: 1;
	}
}

@media (max-width: 767px) {
	.jcatl-home-section {
		padding: var(--jcatl-space-6) var(--jcatl-space-4);
	}

	.jcatl-home-hero {
		padding-top: var(--jcatl-space-7);
	}

	.jcatl-home-actions,
	.jcatl-home-actions .wp-block-button,
	.jcatl-home-actions .wp-block-button__link {
		width: 100%;
	}

	.jcatl-home-hero__image,
	.jcatl-home-image-placeholder,
	.jcatl-home-embed-placeholder {
		min-height: 14rem;
	}
}

/* Design system reference template
--------------------------------------------- */

.jcatl-design-system-reference {
	background: linear-gradient(180deg, var(--jcatl-color-blue-tint-96) 0, var(--jcatl-color-white) 18rem);
	color: var(--jcatl-color-text);
}

.jcatl-reference-shell {
	margin-inline: auto;
	max-width: var(--jcatl-width-wide);
	padding: var(--jcatl-space-7) var(--jcatl-space-5);
}

.jcatl-reference-hero,
.jcatl-reference-section,
.jcatl-reference-nav {
	margin-inline: auto;
	max-width: var(--jcatl-width-default);
}

.jcatl-reference-hero {
	padding: var(--jcatl-space-6) 0 var(--jcatl-space-5);
}

.jcatl-reference-eyebrow,
.jcatl-reference-kicker,
.jcatl-reference-card-meta {
	color: var(--jcatl-color-brand-orange);
	font-size: var(--jcatl-font-size-xs);
	font-weight: var(--jcatl-font-weight-bold);
	letter-spacing: 0;
	line-height: var(--jcatl-line-height-tight);
	margin: 0 0 var(--jcatl-space-2);
	text-transform: uppercase;
}

.jcatl-reference-title {
	font-size: var(--jcatl-type-hero-headline-size);
	line-height: var(--jcatl-line-height-tight);
	margin-bottom: var(--jcatl-space-4);
	max-width: 11ch;
}

.jcatl-reference-intro {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-lg);
	line-height: var(--jcatl-line-height-base);
	margin-bottom: var(--jcatl-space-5);
	max-width: var(--jcatl-width-text);
}

.jcatl-reference-meta {
	display: grid;
	gap: var(--jcatl-space-3);
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	margin: 0;
	max-width: var(--jcatl-width-default);
}

.jcatl-reference-meta div {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	padding: var(--jcatl-space-4);
}

.jcatl-reference-meta dt {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-xs);
	font-weight: var(--jcatl-font-weight-bold);
	margin-bottom: var(--jcatl-space-1);
	text-transform: uppercase;
}

.jcatl-reference-meta dd {
	margin: 0;
}

.jcatl-reference-nav {
	align-items: center;
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	box-shadow: var(--jcatl-shadow-soft);
	display: flex;
	flex-wrap: wrap;
	gap: var(--jcatl-space-2);
	margin-bottom: var(--jcatl-space-7);
	padding: var(--jcatl-space-3);
	position: sticky;
	top: var(--jcatl-space-3);
	z-index: 2;
}

.jcatl-reference-nav a {
	border-radius: var(--jcatl-radius-pill);
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-sm);
	font-weight: var(--jcatl-font-weight-semibold);
	padding: var(--jcatl-space-2) var(--jcatl-space-3);
	text-decoration: none;
}

.jcatl-reference-nav a:hover,
.jcatl-reference-nav a:focus {
	background-color: var(--jcatl-color-blue-tint-96);
	color: var(--jcatl-color-brand-black);
}

.jcatl-reference-section {
	background-color: var(--jcatl-color-white);
	border-top: 4px solid var(--jcatl-color-brand-blue);
	margin-bottom: var(--jcatl-space-7);
	padding: var(--jcatl-space-6) 0 0;
}

.jcatl-reference-section-header {
	margin-bottom: var(--jcatl-space-5);
	max-width: var(--jcatl-width-text);
}

.jcatl-reference-section-header h2,
.jcatl-reference-section-header p {
	margin-bottom: var(--jcatl-space-3);
}

.jcatl-reference-type-stack {
	max-width: var(--jcatl-width-text);
}

.jcatl-reference-type-stack > * {
	margin-bottom: var(--jcatl-space-4);
}

.jcatl-reference-type-stack h1 {
	font-size: var(--jcatl-type-page-title-size);
}

.jcatl-reference-type-stack h3 {
	font-size: var(--jcatl-font-size-2xl);
}

.jcatl-reference-type-stack h4 {
	font-size: var(--jcatl-font-size-xl);
}

.jcatl-reference-type-stack h5 {
	font-size: var(--jcatl-font-size-lg);
}

.jcatl-reference-type-stack h6 {
	font-size: var(--jcatl-font-size-md);
}

.jcatl-reference-lede {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-lg);
}

.jcatl-reference-caption {
	color: var(--jcatl-color-text-muted);
	font-size: var(--jcatl-type-caption-size);
	font-weight: var(--jcatl-font-weight-medium);
}

.jcatl-reference-action-grid,
.jcatl-reference-card-grid,
.jcatl-reference-media-grid,
.jcatl-reference-embed-grid,
.jcatl-reference-split {
	display: grid;
	gap: var(--jcatl-space-5);
}

.jcatl-reference-action-grid {
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(12rem, max-content));
}

.jcatl-reference-button {
	align-items: center;
	border: 2px solid transparent;
	border-radius: var(--jcatl-radius-pill);
	display: inline-flex;
	font-family: var(--jcatl-button-font-family);
	font-size: var(--jcatl-button-font-size);
	font-weight: var(--jcatl-button-font-weight);
	justify-content: center;
	line-height: var(--jcatl-button-line-height);
	padding: var(--jcatl-button-padding-block) var(--jcatl-button-padding-inline);
	text-decoration: none;
	transition: background-color var(--jcatl-transition-fast), border-color var(--jcatl-transition-fast), color var(--jcatl-transition-fast);
}

.jcatl-reference-button--primary {
	background-color: var(--jcatl-color-brand-blue);
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-white);
}

.jcatl-reference-button--primary:hover,
.jcatl-reference-button--primary:focus {
	background-color: var(--jcatl-color-brand-black);
	border-color: var(--jcatl-color-brand-black);
	color: var(--jcatl-color-white);
}

.jcatl-reference-button--secondary {
	background-color: var(--jcatl-color-white);
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-reference-button--secondary:hover,
.jcatl-reference-button--secondary:focus {
	background-color: var(--jcatl-color-blue-tint-96);
	color: var(--jcatl-color-brand-black);
}

.jcatl-reference-button--light {
	background-color: var(--jcatl-color-white);
	border-color: var(--jcatl-color-white);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-reference-button--light:hover,
.jcatl-reference-button--light:focus {
	background-color: var(--jcatl-color-blue-tint-90);
	border-color: var(--jcatl-color-blue-tint-90);
	color: var(--jcatl-color-brand-black);
}

.jcatl-reference-button--ghost {
	background-color: transparent;
	border-color: var(--jcatl-color-white);
	color: var(--jcatl-color-white);
}

.jcatl-reference-button--ghost:hover,
.jcatl-reference-button--ghost:focus {
	background-color: var(--jcatl-color-white);
	color: var(--jcatl-color-brand-blue);
}

.jcatl-reference-card-grid,
.jcatl-reference-media-grid,
.jcatl-reference-embed-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.jcatl-reference-card {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	box-shadow: var(--jcatl-shadow-soft);
	padding: var(--jcatl-space-5);
}

.jcatl-reference-card h3 {
	font-size: var(--jcatl-font-size-xl);
	margin-bottom: var(--jcatl-space-3);
}

.jcatl-reference-card p {
	margin-bottom: var(--jcatl-space-4);
}

.jcatl-reference-card a {
	font-weight: var(--jcatl-font-weight-semibold);
}

.jcatl-reference-card--accent {
	border-color: var(--jcatl-color-brand-green);
}

.jcatl-reference-card--dark {
	background-color: var(--jcatl-color-brand-blue);
	border-color: var(--jcatl-color-brand-blue);
	color: var(--jcatl-color-white);
}

.jcatl-reference-card--dark h3,
.jcatl-reference-card--dark a,
.jcatl-reference-card--dark .jcatl-reference-card-meta {
	color: var(--jcatl-color-white);
}

.jcatl-reference-split {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.jcatl-reference-split blockquote {
	background-color: var(--jcatl-color-blue-tint-96);
	border-left: 4px solid var(--jcatl-color-brand-green);
	border-radius: var(--jcatl-radius-md);
	margin: 0;
	padding: var(--jcatl-space-5);
}

.jcatl-reference-split cite {
	color: var(--jcatl-color-brand-black);
	display: block;
	font-size: var(--jcatl-font-size-sm);
	font-style: normal;
	font-weight: var(--jcatl-font-weight-semibold);
	margin-top: var(--jcatl-space-3);
}

.jcatl-reference-figure {
	margin: 0;
}

.jcatl-reference-image-frame {
	align-items: center;
	aspect-ratio: 4 / 3;
	background-color: var(--jcatl-color-blue-tint-96);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	display: flex;
	justify-content: center;
	margin-bottom: var(--jcatl-space-3);
	padding: var(--jcatl-space-5);
}

.jcatl-reference-image-frame img {
	height: auto;
	max-height: 12rem;
	max-width: min(100%, 18rem);
}

.jcatl-reference-figure--dark .jcatl-reference-image-frame {
	background-color: var(--jcatl-color-brand-blue);
	border-color: var(--jcatl-color-brand-blue);
}

.jcatl-reference-figure--mark .jcatl-reference-image-frame img {
	max-width: 8rem;
}

.jcatl-reference-cta {
	align-items: center;
	background-color: var(--jcatl-color-brand-blue);
	border-radius: var(--jcatl-radius-md);
	color: var(--jcatl-color-white);
	display: grid;
	gap: var(--jcatl-space-5);
	grid-template-columns: minmax(0, 1fr) auto;
	padding: var(--jcatl-space-6);
}

.jcatl-reference-cta h3,
.jcatl-reference-cta p {
	color: var(--jcatl-color-white);
	margin-bottom: var(--jcatl-space-3);
}

.jcatl-reference-cta .jcatl-reference-kicker {
	color: var(--jcatl-color-brand-green);
}

.jcatl-reference-cta-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--jcatl-space-3);
	justify-content: flex-start;
}

.jcatl-reference-form {
	background-color: var(--jcatl-color-blue-tint-96);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	display: grid;
	gap: var(--jcatl-space-4);
	max-width: var(--jcatl-width-text);
	padding: var(--jcatl-space-5);
}

.jcatl-reference-form label,
.jcatl-reference-form fieldset {
	display: grid;
	gap: var(--jcatl-space-2);
	margin: 0;
}

.jcatl-reference-form label span,
.jcatl-reference-form legend {
	color: var(--jcatl-color-brand-blue);
	font-size: var(--jcatl-font-size-sm);
	font-weight: var(--jcatl-font-weight-semibold);
}

.jcatl-reference-form input[type="text"],
.jcatl-reference-form input[type="email"],
.jcatl-reference-form select,
.jcatl-reference-form textarea {
	background-color: var(--jcatl-color-white);
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-sm);
	color: var(--jcatl-color-text);
	font: inherit;
	padding: var(--jcatl-space-3);
	width: 100%;
}

.jcatl-reference-form input:focus,
.jcatl-reference-form select:focus,
.jcatl-reference-form textarea:focus {
	border-color: var(--jcatl-color-focus);
	outline: 2px solid var(--jcatl-color-focus);
	outline-offset: 2px;
}

.jcatl-reference-form fieldset {
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-sm);
	padding: var(--jcatl-space-4);
}

.jcatl-reference-form fieldset label,
.jcatl-reference-checkbox {
	align-items: center;
	display: flex;
	gap: var(--jcatl-space-2);
}

.jcatl-reference-form-grid {
	display: grid;
	gap: var(--jcatl-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.jcatl-reference-embed {
	margin: 0;
}

.jcatl-reference-embed iframe {
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--jcatl-radius-md);
	box-shadow: var(--jcatl-shadow-soft);
	display: block;
	margin-bottom: var(--jcatl-space-3);
	width: 100%;
}

.jcatl-reference-embed--audio iframe {
	aspect-ratio: 4 / 1;
}

.jcatl-reference-editor-content {
	border: var(--jcatl-border-width) solid var(--jcatl-color-border);
	border-radius: var(--jcatl-radius-md);
	padding: var(--jcatl-space-5);
}

@media (max-width: 767px) {
	.jcatl-reference-shell {
		padding: var(--jcatl-space-5) var(--jcatl-space-4);
	}

	.jcatl-reference-nav {
		position: static;
	}

	.jcatl-reference-section {
		margin-bottom: var(--jcatl-space-6);
		padding-top: var(--jcatl-space-5);
	}

	.jcatl-reference-action-grid {
		grid-template-columns: 1fr;
	}

	.jcatl-reference-action-grid > *,
	.jcatl-reference-button {
		width: 100%;
	}

	.jcatl-reference-cta {
		grid-template-columns: 1fr;
		padding: var(--jcatl-space-5);
	}

	.jcatl-reference-embed--audio iframe {
		aspect-ratio: 16 / 9;
	}
}