* { box-sizing: border-box; }

:root {
	--csst-primary: #2D5F3E;
	--csst-accent: #E8A33D;
	--csst-text: #1A1A1A;
	--csst-bg-tint: #F4F7F3;
}

body {
	margin: 0;
	font-family: var(--csst-body-font, -apple-system, "Segoe UI", Roboto, sans-serif);
	color: var(--csst-text);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--csst-heading-font, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* Base type scale — set from the wizard's Fonts step. Any element below
   that needs a genuinely different size from its own tag's base (like the
   hero h1, which is meant to be more prominent than a typical h1) scales
   relative to these variables via calc(), rather than hardcoding an
   absolute pixel value that would silently ignore whatever the wizard is
   set to. */
h1 { font-size: var(--csst-h1-size, 42px); }
h2 { font-size: var(--csst-h2-size, 30px); }
h3 { font-size: var(--csst-h3-size, 24px); }
h4 { font-size: var(--csst-h4-size, 20px); }
h5 { font-size: var(--csst-h5-size, 18px); }
h6 { font-size: var(--csst-h6-size, 16px); }
p { font-size: var(--csst-p-size, 16px); }

.csst-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Header */
.csst-site-header {
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
}

.csst-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
}

.csst-logo-image {
	max-height: 50px;
	width: auto;
}

.csst-logo-text {
	font-size: 22px;
	font-weight: 700;
	color: var(--csst-primary);
}

.csst-primary-nav ul,
.csst-fallback-menu {
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
}

.csst-primary-nav li {
	position: relative;
}

/* Small down-caret on any top-level item that has a submenu, so it's
   visible a dropdown exists before interacting with it. */
.csst-primary-nav .menu-item-has-children > a::after {
	content: var(--csst-dropdown-icon, "▾");
	display: inline-block;
	margin-left: 4px;
	font-size: var(--csst-dropdown-icon-size, 10px);
}

/* Standard hover dropdown — :focus-within alongside :hover so it's also
   reachable by keyboard (tabbing into a submenu link keeps the submenu
   visible), not just a mouse. */
.csst-primary-nav .sub-menu {
	display: none;
	flex-direction: column;
	gap: 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: 8px 0;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.csst-primary-nav .menu-item-has-children:hover > .sub-menu,
.csst-primary-nav .menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}

.csst-primary-nav .sub-menu li {
	width: 100%;
}

.csst-primary-nav .sub-menu a {
	display: block;
	padding: 8px 18px;
	white-space: nowrap;
}

.csst-primary-nav .sub-menu a:hover {
	background: var(--csst-bg-tint);
}

/* A submenu item can itself have children too — nest its own dropdown
   flyout to the right rather than stacking straight down. */
.csst-primary-nav .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.csst-primary-nav a,
.csst-fallback-menu a {
	color: var(--csst-text);
	text-decoration: none;
	font-weight: 500;
}

.csst-primary-nav a:hover,
.csst-fallback-menu a:hover {
	color: var(--csst-primary);
}

/* Hero */
.csst-hero {
	background: var(--csst-primary);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.csst-hero__overlay {
	background: rgba(0, 0, 0, 0.35);
}

.csst-hero:not(.has-image) .csst-hero__overlay {
	background: none;
}

.csst-hero__content {
	padding: 100px 24px;
	text-align: center;
}

.csst-hero__content h1 {
	margin: 0 0 12px;
}

.csst-hero__tagline {
	font-size: 20px;
	opacity: 0.9;
	margin: 0 0 28px;
}

/* Internal page banner: a thinner, lighter version of the homepage hero.
   Uses the page's own Featured Image if set (native WordPress field, no
   custom field needed); falls back to a solid primary-color band when no
   image is set, so every internal page gets some visual anchor at the
   top rather than only the ones someone remembered to add an image to. */
.csst-page-banner {
	background: var(--csst-primary);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.csst-page-banner__overlay {
	background: rgba(0, 0, 0, 0.35);
	padding: 44px 24px;
	text-align: center;
}

.csst-page-banner:not(.has-image) .csst-page-banner__overlay {
	background: none;
}

.csst-page-banner h1 {
	margin: 0;
	/* Deliberately smaller than the homepage hero's h1 — scaled relative
	   to the same base size rather than a fixed value, so it stays
	   proportionally "thinner" whatever h1 size is chosen. */
	font-size: calc(var(--csst-h1-size, 42px) * 0.6);
}

/* Buttons */
.csst-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none;
}

.csst-btn--accent {
	background: var(--csst-accent);
	color: #1a1a1a;
}

/* Sections */
.csst-section {
	padding: 64px 0;
}

.csst-welcome {
	background: var(--csst-bg-tint);
}

.csst-welcome__inner {
	max-width: 760px;
	text-align: center;
}

/* Per-point optional images, positioned per the site owner's choice
   (above/below/left/right of the text) via a flex-direction modifier —
   shared by all four layouts through csst_render_point_content(). No
   background of its own; the outer point container below already
   provides the box, so image and text always read as one boxed unit
   regardless of which position is chosen. */
.csst-point-inner {
	display: flex;
	gap: 20px;
}

.csst-point-inner--above {
	flex-direction: column;
}

.csst-point-inner--below {
	flex-direction: column-reverse;
}

.csst-point-inner--left {
	flex-direction: row;
	align-items: center;
}

.csst-point-inner--right {
	flex-direction: row-reverse;
	align-items: center;
}

.csst-point-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The wrapper is always present and always the actual flex child,
   regardless of whether the image inside happens to be linked — that
   consistency is what makes sizing reliable. All fixed dimensions live
   here; the img (and the anchor, if present) inside just fill it
   completely via width/height: 100%. */
.csst-point-image-wrap {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	flex-shrink: 0;
}

.csst-point-image-wrap a {
	display: block;
	width: 100%;
	height: 100%;
}

.csst-point-inner--above .csst-point-image-wrap,
.csst-point-inner--below .csst-point-image-wrap {
	width: 100%;
	height: 180px;
}

.csst-point-inner--left .csst-point-image-wrap,
.csst-point-inner--right .csst-point-image-wrap {
	width: 160px;
	height: 140px;
}

.csst-point-text {
	min-width: 0; /* allows text to wrap correctly inside a flex row rather than forcing the row wider */
}

/* Per-point optional link: heading-as-link, a button, and/or the image
   itself, independently — see csst_render_point_content() for which
   combination applies. */
.csst-point-button {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 22px;
	border-radius: 6px;
	background: var(--csst-accent);
	color: #1a1a1a;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.csst-point-button:hover {
	opacity: 0.9;
}

.csst-spotlight-lead .csst-point-image-wrap {
	height: 260px;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* Rotating accent variation, so each point reads as visually distinct
   from its neighbors rather than all looking identical. Colors are
   derived from the site's own chosen accent/primary via color-mix() so
   this automatically matches whichever palette is active, rather than
   needing separate per-point color settings. */
.csst-stacked-card:nth-child(3n+2) {
	border-left-color: color-mix(in srgb, var(--csst-accent) 60%, var(--csst-primary));
}

.csst-stacked-card:nth-child(3n+3) {
	border-left-color: var(--csst-primary);
}

.csst-feature-col:nth-child(3n+2),
.csst-alternating-row:nth-child(3n+2) {
	background: color-mix(in srgb, var(--csst-bg-tint) 60%, white);
}

.csst-feature-col:nth-child(3n+3),
.csst-alternating-row:nth-child(3n+3) {
	background: var(--csst-bg-tint);
}

.csst-feature-col,
.csst-alternating-row {
	background: #fff;
	padding: 24px;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* Spotlight layout: box the smaller supporting items to match the other
   layouts; the lead statement stays open/unboxed on purpose, since it's
   meant to feel more expansive and prominent rather than contained. */
.csst-spotlight-item {
	background: #fff;
	padding: 20px 24px;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.csst-spotlight-item:nth-child(3n+2) {
	background: color-mix(in srgb, var(--csst-bg-tint) 60%, white);
}

.csst-spotlight-item:nth-child(3n+3) {
	background: var(--csst-bg-tint);
}

/* Sub-hero: a smaller supporting message directly below the hero */
.csst-subhero {
	background: #fff;
	text-align: center;
	padding: 40px 0;
}

.csst-subhero__inner {
	max-width: 700px;
	margin: 0 auto;
}

.csst-subhero h2 {
	color: var(--csst-primary);
	margin: 0 0 12px;
}

.csst-subhero p {
	color: #50575e;
	margin: 0;
}

.csst-home-content {
	background: var(--csst-bg-tint);
}

.csst-home-content__inner {
	width: var(--csst-content-width, 82%);
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}

.csst-home-content__inner .wp-block-heading {
	color: var(--csst-primary);
}

.csst-home-content__inner > .wp-block-heading:first-child {
	margin-top: 0;
}

.csst-features-title {
	text-align: center;
	margin: 40px 0 32px;
	color: var(--csst-primary);
}

.csst-section h2 {
	text-align: center;
	margin: 0 0 32px;
	color: var(--csst-primary);
}

/* Columns layout — reflows automatically for any number of points,
   rather than assuming exactly three. */
.csst-features-columns {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.csst-columns-row {
	display: flex;
	gap: 32px;
}

.csst-columns-row .csst-feature-col {
	flex: 1;
	min-width: 0;
}

.csst-feature-col h3 {
	color: var(--csst-primary);
	margin-bottom: 8px;
}

.csst-alternating-row h3 {
	color: var(--csst-primary);
	margin-bottom: 8px;
}

@media (max-width: 720px) {
	.csst-columns-row {
		flex-direction: column;
	}
}

/* CTA band */
.csst-cta-band {
	background: var(--csst-primary);
	color: #fff;
	text-align: center;
}

.csst-cta-band h2 {
	color: #fff;
}

.csst-cta-band p {
	margin-bottom: 28px;
}

/* Generic page content */
.csst-page-content__inner {
	max-width: 760px;
}

/* The events list wants the full configurable content width, like the
   homepage does — not the narrower reading-column width other page
   content uses. Scoped with :has() so only pages actually containing
   the events list are widened; a normal prose page (About, etc.) using
   this same template keeps its narrower, more readable column. */
.csst-page-content__inner:has(.csst-events) {
	width: var(--csst-content-width, 82%);
	max-width: 1100px;
}

/* Alternating layout: image and text side by side, alternating which
   side the image sits on row by row, stacking on mobile. */
.csst-alternating-row {
	margin-bottom: 24px;
}

.csst-alternating-row:last-child {
	margin-bottom: 0;
}

@media (max-width: 720px) {
	.csst-point-inner--left,
	.csst-point-inner--right {
		flex-direction: column;
	}
	.csst-point-inner--left .csst-point-image-wrap,
	.csst-point-inner--right .csst-point-image-wrap {
		width: 100%;
		height: 180px;
	}
}

/* Stacked cards layout */
.csst-stacked-card {
	background: #fff;
	border-left: 4px solid var(--csst-accent);
	border-radius: 6px;
	padding: 24px 28px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.csst-stacked-card:last-child {
	margin-bottom: 0;
}

.csst-stacked-card h3 {
	margin-top: 0;
	color: var(--csst-primary);
}

/* Spotlight layout */
.csst-spotlight-lead {
	max-width: 640px;
	margin: 0 auto 40px;
	text-align: center;
}

.csst-spotlight-lead h3 {
	/* Intentionally larger than a typical h3 on the same page — scaled
	   relative to the user's chosen h3 size rather than a fixed value, so
	   it keeps its extra prominence proportionally whatever h3 size ends
	   up being. */
	font-size: calc(var(--csst-h3-size, 24px) * 1.33);
	color: var(--csst-primary);
}

.csst-spotlight-support {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
}

.csst-spotlight-support h4 {
	color: var(--csst-primary);
	margin-bottom: 6px;
}

@media (max-width: 720px) {
	.csst-spotlight-support {
		grid-template-columns: 1fr;
	}
}

/* Footer */
.csst-site-footer {
	background: #1a1a1a;
	color: #ccc;
	text-align: center;
	padding: 24px 0;
	font-size: 14px;
}