/* ============================================================
   FLC Components
   Apply these classes via Block Editor → Advanced → CSS Class.
   ============================================================ */

/* ---------- Page canvas ---------- */
body {
	background-color: var(--flc-color-bg);
}

/* ---------- Card with inset stone border (Family signature) ---------- */
.flc-card {
	background: var(--flc-color-bg-card);
	box-shadow: var(--flc-shadow-inset);
	border-radius: var(--flc-radius-md);
	padding: var(--flc-card-padding);
	border: none;
	transition: box-shadow var(--flc-dur-fast) var(--flc-ease);
}

.flc-card:hover {
	box-shadow: var(--flc-shadow-inset), var(--flc-shadow-hover);
}

/* ---------- Recessed parchment panel ----------
   Editorial callout — light parchment surface, generous padding,
   barely-rounded corners (almost squared). Used for Pastoral Care,
   Stay Connected, etc. */
.flc-panel {
	background: var(--flc-color-bg-recessed);
	border-radius: 4px;
	padding: var(--flc-space-64) var(--flc-space-48);
}

@media (max-width: 768px) {
	.flc-panel {
		padding: var(--flc-space-32) var(--flc-space-24);
	}
}

/* Inside a panel: lists get more breathing room than default prose */
.flc-panel ul,
.flc-panel ol {
	margin: 0 0 var(--flc-space-32);
	padding-left: var(--flc-space-24);
}

.flc-panel li + li {
	margin-top: var(--flc-space-12);
}

/* Tighten the eyebrow's bottom margin in panels — heading should feel close */
.flc-panel .flc-eyebrow {
	margin-bottom: var(--flc-space-32);
}

.flc-panel h2,
.flc-panel h3 {
	margin-top: 0;
	margin-bottom: var(--flc-space-24);
}

/* ---------- Dark "phone mockup" surface ---------- */
.flc-dark-surface {
	background: #000000;
	color: #ffffff;
	border-radius: var(--flc-radius-xl);
	box-shadow: var(--flc-shadow-lg);
	padding: var(--flc-space-32);
}

/* ---------- Pill button (the only dark element on the page) ---------- */
.flc-pill,
.flc-pill-primary {
	display: inline-flex;
	align-items: center;
	gap: var(--flc-space-8);
	background: var(--flc-color-cta-bg);
	color: var(--flc-color-cta-text) !important;
	padding: 12px 24px;
	border-radius: var(--flc-radius-pill);
	font-size: 14px;
	font-weight: var(--flc-fw-medium);
	letter-spacing: -0.18px;
	text-decoration: none !important;
	transition: background var(--flc-dur-fast) var(--flc-ease);
	border: none;
	cursor: pointer;
}

.flc-pill:hover,
.flc-pill-primary:hover {
	background: var(--flc-color-cta-bg-hover);
	opacity: 1;
}

/* Light variant — pairs with the dark pill */
.flc-pill-secondary {
	display: inline-flex;
	align-items: center;
	gap: var(--flc-space-8);
	background: var(--flc-color-bg-recessed);
	color: var(--flc-color-cta-bg) !important;
	padding: 12px 24px;
	border-radius: var(--flc-radius-pill);
	font-size: 14px;
	font-weight: var(--flc-fw-medium);
	letter-spacing: -0.18px;
	text-decoration: none !important;
	transition: background var(--flc-dur-fast) var(--flc-ease);
	border: none;
	cursor: pointer;
}

.flc-pill-secondary:hover {
	background: var(--flc-color-border);
	opacity: 1;
}

/* ---------- Eyebrow / kicker label ---------- */
.flc-eyebrow {
	display: inline-block;
	font-family: var(--flc-font-body);
	font-size: 12px;
	font-weight: var(--flc-fw-semibold);
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--flc-soft-gold);
	margin-bottom: var(--flc-space-12);
}

/* Muted variant for cases where gold is too loud */
.flc-eyebrow--muted {
	color: var(--flc-color-muted);
	letter-spacing: 0.4px;
	font-weight: var(--flc-fw-medium);
}

/* ---------- Hero rule (full-width thin divider beneath hero heading) ----------
   Selector specificity must beat Kadence's
   `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)` (3-class). */
.entry-content hr.flc-accent-rule,
.entry-content .wp-block-separator.flc-accent-rule {
	display: block;
	width: 100%;
	max-width: none;
	height: 1px;
	background-color: #d6d4d0;
	opacity: 1;
	margin: var(--flc-space-32) 0 var(--flc-space-32);
	margin-left: 0;
	margin-right: 0;
	border: 0;
}

/* Short gold variant — kept for centered hero accents when desired */
.entry-content hr.flc-accent-rule.is-gold,
.entry-content .wp-block-separator.flc-accent-rule.is-gold {
	width: 96px;
	background-color: var(--flc-soft-gold);
	opacity: 0.7;
}

.entry-content hr.flc-accent-rule.is-centered,
.entry-content .wp-block-separator.flc-accent-rule.is-centered {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Pull quote (italic serif lead-in) ---------- */
.flc-pull-quote {
	font-family: var(--flc-font-display);
	font-style: italic;
	font-size: var(--flc-text-h-sm);
	line-height: 1.45;
	color: var(--flc-color-heading);
	margin: 0 0 var(--flc-space-32);
	padding: 0;
	border: 0;
}

/* ---------- Inline accent link (Lutheran blue, like Family's ember orange) ---------- */
.flc-accent-link {
	display: inline-flex;
	align-items: center;
	gap: var(--flc-space-4);
	color: var(--flc-color-accent);
	font-weight: var(--flc-fw-medium);
	text-decoration: none;
	transition: opacity var(--flc-dur-fast) var(--flc-ease);
}

.flc-accent-link:hover {
	opacity: 0.75;
}

.flc-accent-link::after {
	content: '→';
	transition: transform var(--flc-dur-fast) var(--flc-ease);
}

.flc-accent-link:hover::after {
	transform: translateX(2px);
}

/* ---------- Badge / pill tag ---------- */
.flc-badge {
	display: inline-flex;
	align-items: center;
	background: var(--flc-color-accent);
	color: #ffffff;
	font-size: 11px;
	font-weight: var(--flc-fw-medium);
	letter-spacing: 0.3px;
	padding: 4px 10px;
	border-radius: var(--flc-radius-pill);
	text-transform: uppercase;
}

.flc-badge--gold     { background: var(--flc-soft-gold); }
.flc-badge--green    { background: var(--flc-sage-green); }
.flc-badge--neutral  { background: var(--flc-color-border); color: var(--flc-color-heading); }

/* ---------- Hero composition ---------- */
.flc-hero {
	background: var(--flc-color-bg);
	padding: var(--flc-space-96) var(--flc-space-32);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.flc-hero h1 {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.flc-hero p {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--flc-text-body-lg);
	color: var(--flc-color-text);
}

.flc-hero__buttons {
	display: flex;
	gap: var(--flc-space-12);
	justify-content: center;
	margin-top: var(--flc-space-32);
	flex-wrap: wrap;
}

/* ---------- Section spacing rhythm ----------
   .flc-section is the page-level wrapper: vertical rhythm + horizontal frame.
   On fullwidth Kadence pages (where entry-content has no cap), this is what
   keeps prose readable. */
.flc-section {
	padding-top: var(--flc-section-gap);
	padding-bottom: var(--flc-section-gap);
	padding-left: var(--flc-space-32);
	padding-right: var(--flc-space-32);
	max-width: var(--flc-content-width);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Narrower frame for content-light, magazine-feel pages (Pastors etc).
   Apply alongside .flc-section. */
.flc-section.flc-narrow {
	max-width: 1024px;
}

/* Recessed panel inside a section: parchment surface, soft radius,
   editorial padding rhythm. Margin-bottom is generous so the panel
   has clear breathing room before the (dark) footer. */
.flc-section.flc-panel {
	background: var(--flc-color-bg-recessed);
	border-radius: 4px;
	padding-top: var(--flc-space-64);
	padding-bottom: var(--flc-space-64);
	padding-left: var(--flc-space-48);
	padding-right: var(--flc-space-48);
	margin-top: var(--flc-space-32);
	margin-bottom: var(--flc-space-96);
}

@media (max-width: 768px) {
	.flc-section.flc-panel {
		padding: var(--flc-space-32) var(--flc-space-24);
		margin-bottom: var(--flc-space-64);
	}
}

@media (max-width: 768px) {
	.flc-section {
		padding-top: 64px;
		padding-bottom: 64px;
		padding-left: var(--flc-space-16);
		padding-right: var(--flc-space-16);
	}
	.flc-hero { padding: 64px 20px; }
}

/* ---------- Two-column "label + content" layout ----------
   Apply .flc-split as a className on a core/columns block (33% / 67%).
   The left column heading "sticks" so a long right-side list reads
   alongside its anchor on desktop. Columns block handles mobile stacking. */
.flc-split.wp-block-columns {
	gap: var(--flc-space-32);
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.flc-split.wp-block-columns > .wp-block-column:first-child {
		position: sticky;
		top: 120px;
	}
}

.flc-split.wp-block-columns > .wp-block-column:first-child h2,
.flc-split.wp-block-columns > .wp-block-column:first-child h3 {
	margin-top: 0;
}

/* ---------- Soft white content card ----------
   Lighter, softer alternative to .flc-card — uses a real (subtle) shadow
   and larger radius. Use for prose-heavy callouts on light pages. */
.flc-content-card {
	background: #ffffff;
	border: 1px solid var(--flc-color-border);
	border-radius: var(--flc-radius-xl);
	padding: var(--flc-space-32);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: box-shadow var(--flc-dur-fast) var(--flc-ease);
}

.flc-content-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* Partner card variant — gold accent stripe slides in on hover */
.flc-partner-card {
	background: #ffffff;
	border: 1px solid var(--flc-color-border);
	border-radius: var(--flc-radius-xl);
	padding: var(--flc-space-32);
	position: relative;
	overflow: hidden;
	transition: box-shadow var(--flc-dur-fast) var(--flc-ease);
}

.flc-partner-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--flc-soft-gold);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--flc-dur-med) var(--flc-ease);
}

.flc-partner-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.flc-partner-card:hover::before {
	transform: scaleY(1);
}

.flc-partner-card h3,
.flc-partner-card .h3 {
	margin-top: 0;
	margin-bottom: var(--flc-space-12);
}

/* ---------- Plain centered CTA section (no background panel) ---------- */
.flc-cta-center {
	text-align: center;
	padding: var(--flc-space-64) var(--flc-space-32);
}

.flc-cta-center h2,
.flc-cta-center .h2 {
	font-size: var(--flc-text-display);
	line-height: var(--flc-leading-tight);
	letter-spacing: var(--flc-tracking-display);
	margin-bottom: var(--flc-space-16);
}

.flc-cta-center p {
	font-size: var(--flc-text-h-sm);
	color: var(--flc-color-text);
	margin-bottom: var(--flc-space-32);
}

@media (max-width: 768px) {
	.flc-cta-center {
		padding: var(--flc-space-48) var(--flc-space-16);
	}
	.flc-cta-center h2,
	.flc-cta-center .h2 {
		font-size: 36px;
		letter-spacing: -1.4px;
	}
}

/* ---------- Card grid ---------- */
.flc-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--flc-space-16);
}

/* ---------- Featured highlight (gold accent) ---------- */
.flc-featured {
	position: relative;
}

.flc-featured::before {
	content: 'Featured';
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--flc-soft-gold);
	color: #ffffff;
	font-size: 11px;
	font-weight: var(--flc-fw-medium);
	padding: 4px 10px;
	border-radius: var(--flc-radius-pill);
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/* ---------- Liturgical date / eyebrow with rule ---------- */
.flc-rule-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--flc-space-12);
	font-size: 12px;
	font-weight: var(--flc-fw-medium);
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--flc-color-muted);
	margin-bottom: var(--flc-space-16);
}

.flc-rule-eyebrow::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--flc-color-border);
}