/* ============================================================
   FLC — Kadence-specific overrides
   Targets Kadence theme/blocks classes to apply FLC system.
   ============================================================ */

/* ---------- All Kadence buttons get pill shape ---------- */
.kb-button,
.kadence-button-link,
.wp-block-button .wp-block-button__link,
.wp-block-kadence-advancedbtn .kt-btn-svg-show-always {
	border-radius: var(--flc-radius-pill) !important;
	transition: all var(--flc-dur-fast) var(--flc-ease) !important;
	letter-spacing: -0.18px !important;
}

/* Primary Kadence button — match flc-pill-primary */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--flc-color-cta-bg) !important;
	color: var(--flc-color-cta-text) !important;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--flc-color-cta-bg-hover) !important;
}

/* Outline Kadence button — match flc-pill-secondary */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--flc-color-bg-recessed) !important;
	color: var(--flc-color-cta-bg) !important;
	border: none !important;
}

/* Catch-all: never let a button hover go orange.
   Kadence advanced buttons + outline buttons hover to Lutheran Blue.
   Primary midnight buttons keep their charcoal hover (rule above). */
.kb-button:hover,
.kadence-button-link:hover,
.wp-block-kadence-advancedbtn .kt-btn-svg-show-always:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--flc-color-accent) !important;
	color: #ffffff !important;
	border-color: var(--flc-color-accent) !important;
	opacity: 1 !important;
}

/* ---------- Header / nav polish ---------- */
.site-header {
	background: #ffffff !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

/* Generous header height matching the mockup (96px content) */
.site-header-row {
	min-height: 88px;
}

/* Logo + wordmark spacing — 16px gap, vertically centered */
.site-header .site-branding {
	display: flex;
	align-items: center;
	gap: var(--flc-space-16);
}

.site-header .site-branding .custom-logo {
	display: block;
	height: 48px !important;
	width: auto !important;
}

.site-header .site-title {
	font-family: var(--flc-font-display);
	font-weight: var(--flc-fw-medium);
	font-size: 24px;
	letter-spacing: 0.4px;
	line-height: 1.1;
	margin: 0;
}

/* Nav item rhythm — Tailwind-style gap-8 (32px) between top-level items */
.header-navigation .menu > .menu-item + .menu-item {
	margin-left: var(--flc-space-32);
}

.header-navigation .menu-item > a {
	font-family: var(--flc-font-body);
	font-weight: var(--flc-fw-medium);
	font-size: 14px;
	letter-spacing: -0.18px;
	color: var(--flc-color-heading);
	padding: 8px 0;
}

.header-navigation .menu-item > a:hover {
	color: var(--flc-color-accent);
	opacity: 1;
}

/* Active page in main nav gets a subtle gold underline (mockup) */
.header-navigation .menu-item.current-menu-item > a,
.header-navigation .menu-item.current-menu-ancestor > a {
	color: var(--flc-color-heading);
	position: relative;
}

.header-navigation .menu-item.current-menu-item > a::after,
.header-navigation .menu-item.current-menu-ancestor > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: var(--flc-soft-gold);
	border-radius: 1px;
}

/* ---------- Footer (dark) ---------- */
.site-footer {
	background: var(--flc-charcoal);
	color: rgba(255, 255, 255, 0.78);
	border-top: 0;
}

.site-footer a {
	color: #ffffff;
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--flc-soft-gold);
	opacity: 1;
}

.site-footer .site-title,
.site-footer .footer-widget-area-inner h1,
.site-footer .footer-widget-area-inner h2,
.site-footer .footer-widget-area-inner h3,
.site-footer .footer-widget-area-inner h4,
.site-footer .footer-widget-area-inner h5 {
	color: #ffffff;
}

/* Subtle separator between footer rows */
.site-footer .site-bottom-footer-wrap,
.site-footer .site-middle-footer-wrap {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .site-bottom-footer-wrap {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
}

/* ---------- Kadence cards / info boxes — apply Family inset border ---------- */
.kt-info-box-link-wrap,
.wp-block-kadence-infobox {
	border-radius: var(--flc-radius-md) !important;
	box-shadow: var(--flc-shadow-inset) !important;
	border: none !important;
}

/* ---------- Blockquote in Kadence ---------- */
.wp-block-quote {
	border-left: 3px solid var(--flc-color-accent);
	padding-left: var(--flc-space-24);
	font-family: var(--flc-font-display);
}

/* ---------- The Events Calendar — match FLC ---------- */
.tribe-events .tribe-events-c-events-bar,
.tribe-events-calendar-list__event,
.tribe-events-calendar-month__day {
	font-family: var(--flc-font-body);
}

.tribe-events-calendar-list__event-title,
.tribe-events-c-top-bar__datepicker-button {
	font-family: var(--flc-font-display) !important;
	font-weight: var(--flc-fw-medium);
}

.tribe-common-c-btn,
.tribe-events button {
	border-radius: var(--flc-radius-pill) !important;
}

/* TEC search input has a background-image icon at the left;
   restore the padding it needs (our generic input rule below overrides it). */
.tribe-events .tribe-events-c-search__input,
input.tribe-events-c-search__input {
	padding-left: 44px !important;
}

/* TEC marks the active month-picker cell with class .focused (its own state,
   not :focus-visible). Its default 2px dark outline doubles up with the
   blue selection pill. Suppress it — the filled pill is a strong indicator. */
.tribe-events .datepicker .month.focused,
.tribe-events .datepicker .year.focused,
.tribe-events .datepicker .month.focused:focus,
.tribe-events .datepicker .month.focused:focus-visible {
	outline: none !important;
}

/* ---------- Forms (Fluent Forms / Mailchimp for WP) ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.ff-el-form-control {
	background: var(--flc-color-bg-card);
	border: 1px solid var(--flc-color-border) !important;
	border-radius: var(--flc-radius-md) !important;
	padding: 10px 14px !important;
	font-family: var(--flc-font-body);
	font-size: 15px;
	transition: border-color var(--flc-dur-fast) var(--flc-ease);
}

input:focus,
textarea:focus,
select:focus,
.ff-el-form-control:focus {
	border-color: var(--flc-color-accent) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 95, 168, 0.12);
}

/* ---------- Default content frame ----------
   Default pages get a 1200px cap with horizontal breathing room.
   Pages with Kadence's "fullwidth" Layout setting (body.content-width-fullwidth)
   skip the cap and let Kadence row layouts manage their own widths.
   .flc-prose narrows to a comfortable reading width on prose-only pages. */
.entry-content {
	max-width: var(--flc-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--flc-space-32);
	padding-right: var(--flc-space-32);
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.entry-content {
		padding-left: var(--flc-space-16);
		padding-right: var(--flc-space-16);
	}
}

/* Fullwidth Kadence pages: let entry-content fill the viewport so
   alignfull row layouts and inheritMaxWidth blocks position correctly. */
.content-width-fullwidth .entry-content {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Single blog posts get a comfortable prose width */
.single-post .entry-content,
.flc-prose .entry-content {
	max-width: 720px;
}

/* Full-bleed escape hatch on constrained pages — child blocks can break out.
   Skipped on fullwidth pages since entry-content already spans the viewport. */
:not(.content-width-fullwidth) .entry-content > .alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: auto;
}

/* ---------- Heading margin reset for single posts/pages ----------
   Kadence's default `.single-content h1..h6 { margin: 1.5em 0 .5em }` adds
   a large top margin that fights our component spacing. Drop the top
   margin so headings butt against the preceding element's bottom rhythm. */
.single-content h1,
.single-content h2,
.single-content h3,
.single-content h4,
.single-content h5,
.single-content h6 {
	margin: 0 0 0.5em;
}

/* ---------- Image rounding ---------- */
.entry-content img,
.wp-block-image img {
	border-radius: var(--flc-radius-md);
}

/* ---------- Accessibility: focus rings ---------- */
:focus-visible {
	outline: 2px solid var(--flc-color-accent);
	outline-offset: 2px;
	border-radius: var(--flc-radius-sm);
}