/*
Theme Name: RLC County Theme
Theme URI: https://github.com/ghub-account-random-telephone-variable/rlc-county-theme
Description: Custom block theme for the RLC site. Child of Twenty Twenty-Five — inherits its base typography, layout and block patterns; layers on a navy + crimson + cream brand system, custom header, and home-page layout.
Author: St. Johns County Republican Liberty Caucus
Template: twentytwentyfive
Version: 1.2.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
Text Domain: rlc-county-theme
Tags: block-theme, full-site-editing
*/

body {
	background-color: #ffffff;
	font-family: Poppins, sans-serif;
}

.wp-block-button.x-anchor-button .wp-block-button__link {
	background-color: rgba(255, 255, 255, 0.9) !important;
	color: #721515 !important;
	padding: 0.4rem 1.2rem;
	text-decoration: none;
	font-weight: 400;
	font-size: 0.9rem;
	font-family: Poppins, sans-serif;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.wp-block-button.x-anchor-button .wp-block-button__link:hover {
	background-color: #ffffff !important;
	color: #721515 !important;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Header — two stacked rows:
     1. Top bar   (dark-red strip; left: site title + Join button,
                   right: pill search bar + white social icons)
     2. Brand row (compact white shadow-card; logo on left + primary
                   navigation links on right, single row, no socials)
   Brand colour is the deep RLC red #721515
   ------------------------------------------------------------------------- */


header.x-rlc-header {
	background-color: #ffffff;
	color: #1f1f1f;
	font-family: Poppins, sans-serif;
	position: relative;
	z-index: 100;
}


/* Constrain the white card sections to match each other and centre them so
   the body red shows on left/right. WP's `layout: constrained` constrains
   *child* widths, not the group's own width — without this rule the white
   cards span 100vw and there's no red border. */
body main.wp-block-group {
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	background-color: #ffffff;
}

/* Home page main: transparent so the banner injected by RLC Settings
   (see functions.php) shows through. Banner image + sizing are added via
   inline CSS in wp_head when an attachment is configured. */
body main.wp-block-group.x-home-main {
	background-color: transparent;
}

/* Each home page post: white rounded card sitting on top of the banner. */
body main.wp-block-group.x-home-main .x-home-post-card {
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

body header > .wp-block-group.has-page-background-background-color {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	box-sizing: border-box;
	background-color: #ffffff;
}

body header > .wp-block-group.has-page-background-background-color h1 {
	padding-top: 0.4em;
}

/* Make sure constrained groups inside main don't accidentally inherit red. */
main.wp-block-group .wp-block-group:not(.has-background) {
	background-color: transparent;
}

/* -------------------------------------------------------------------------
   Header / footer inner content: cap at the same width as <main> so the
   social icons (and footer site title) align with the main card's right
   edge instead of the viewport edge. Without this, alignfull strips
   stretch to the viewport and the right-justified flex children sit at
   the corner of the screen.
   ------------------------------------------------------------------------- */
body header > .wp-block-group > .wp-block-group,
body footer.wp-block-group > .wp-block-group,
body footer.wp-block-group > .wp-block-columns {
	min-height: fit-content;
	box-sizing: border-box;
}

/* Don't centre the top bar's flex children — space-between handles
   positioning so the left cluster sits left and the right cluster sits right. */
header .x-top-bar > .wp-block-group {
	margin-left: 0;
	margin-right: 0;
}


/* Modern search input. */
.wp-block-search__input {
	border: 1px solid #ddd;
	border-radius: 0;
	padding: 0.5rem;
}
.has-sidebar-background-color .wp-block-search__input {
	border: 1px solid #ffffff;
	background: transparent;
	color: #ffffff;
}
.wp-block-search__button {
	border-radius: 0;
	border: 0;
	padding: 0.5rem 1rem;
	font-weight: bold;
	background-color: transparent;
	color: #1f1f1f;
}
.wp-block-search__button svg {
	fill: currentColor;
}
.has-sidebar-background-color .wp-block-search__button {
	background: #ffffff;
	color: #1f1f1f;
}

/* Sidebar list styling. */
.has-sidebar-background-color .wp-block-latest-posts,
.has-sidebar-background-color .wp-block-categories {
	font-size: 0.9rem;
}
.has-sidebar-background-color .wp-block-latest-posts li {
	margin-bottom: 1.5rem;
}
.has-sidebar-background-color .wp-block-categories li {
	margin-bottom: 0.5rem;
}
.has-sidebar-background-color .wp-block-latest-posts li .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8rem;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
   Sidebar (blue) link styling: white text, hover underlines but does NOT
   change colour. Override theme.json's global link colours which would
   otherwise paint links red on the blue background.
   ------------------------------------------------------------------------- */

.has-sidebar-background-color a,
.has-sidebar-background-color a:visited,
.has-sidebar-background-color a:active {
	color: #ffffff;
	text-decoration: none;
}
.has-sidebar-background-color a:hover,
.has-sidebar-background-color a:focus {
	color: #ffffff;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Top bar: force alignfull strips to extend to both viewport edges. WP's
   built-in alignfull break-out only works inside a wp-site-blocks wrapper,
   which isn't always present (e.g., RSVP pages render the header via
   block_template_part directly). Using position+transform instead of
   negative margins because the calc(50% - 50vw) approach was leaving the
   right edge clamped at the parent's right.
   ------------------------------------------------------------------------- */
body header > .wp-block-group.alignfull {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Row 1: top bar — dark-red strip.
     Left  : site title + Join button (white pill, 90% opacity → 100% on hover)
     Right : pill search bar (icon inside, left-justified) + white social icons
   The search-bar pill mirrors the .x-anchor-button styling: same background
   colour, opacity, rounding, and font.
   ------------------------------------------------------------------------- */
header .x-top-bar {
	align-items: center;
	padding-left: 3rem;
	padding-right: 3rem;
}

/* Brand row wrap: match the top bar's horizontal padding so both blocks
   align at the same left/right edges. */
header .x-brand-row-wrap {
	padding-left: 3rem !important;
	padding-right: 3rem !important;
}

/* Inner flex clusters share a small horizontal gap. */
header .x-top-bar > .wp-block-group {
	gap: 1rem;
	align-items: center;
}

/* Site title: white text, no underline, light weight. */
header .x-top-bar .wp-block-site-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 400;
    text-transform: uppercase;
}

header .x-top-bar .wp-block-site-title a {
	color: #ffffff;
	text-decoration: none;
}
header .x-top-bar .wp-block-site-title a:hover,
header .x-top-bar .wp-block-site-title a:focus {
	text-decoration: underline;
}

/* Top-bar plain links (defensive for anything not covered by the above). */
header .x-top-bar a { color: #ffffff; }

/* ---- Search bar: pill-shaped to match the Join button. The default WP
        markup is [input][button], so we reverse the row to put the icon
        on the visible left edge of the pill and merge the two children
        into a single shared white background. ---- */
header .x-top-bar .wp-block-search { margin: 0; }
header .x-top-bar .wp-block-search > .wp-block-search__inside-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	background-color: rgba(255, 255, 255, 0.9);
	border: 0;
	border-radius: 4px;
	overflow: visible;
	height: auto;
	transition: background-color 0.15s ease-in-out;
}
header .x-top-bar .wp-block-search > .wp-block-search__inside-wrapper:hover,
header .x-top-bar .wp-block-search > .wp-block-search__inside-wrapper:focus-within {
	background-color: #ffffff;
}
header .x-top-bar .wp-block-search__input {
	border: 0;
	background: transparent;
	color: #721515;
	padding: 0.4rem 0.8rem 0.4rem 0;
	margin: 0;
	font-size: 0.9rem;
	font-family: Poppins, sans-serif;
	line-height: 1.4;
	min-width: 0;
}
header .x-top-bar .wp-block-search__input::placeholder {
	color: rgba(114, 21, 21, 0.6);
}
header .x-top-bar .wp-block-search__button {
	border: 0;
	background: transparent !important;
	color: #721515 !important;
	padding: 0.4rem 0.4rem 0.4rem 0.6rem;
	margin: 0;
	display: flex;
	align-items: center;
	border-radius: 0;
	font-weight: normal;
}
header .x-top-bar .wp-block-search__button svg {
	fill: currentColor;
	width: 1rem;
	height: 1rem;
}
header .x-top-bar .wp-block-search__button:hover {
	background: transparent !important;
	opacity: 0.7;
}

/* ---- Social icons in the top bar: white glyphs, transparent background. */
header .x-top-bar .x-top-social {
	gap: 0.5rem;
}
header .x-top-bar .x-top-social .wp-social-link {
	background-color: transparent !important;
	color: #ffffff !important;
}
header .x-top-bar .x-top-social .wp-social-link svg {
	fill: currentColor;
}
header .x-top-bar .x-top-social .wp-social-link:hover {
	opacity: 0.75;
}

/* On narrow screens, stack the two clusters into two rows:
   row 1 = site title + Join, row 2 = search + socials. */
@media (max-width: 600px) {
	header .x-top-bar {
		flex-wrap: wrap !important;
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}
	header .x-top-bar > .wp-block-group {
		flex: 0 0 100%;
		justify-content: center;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

header .x-top-bar .x-anchor-button .wp-block-button__link {
	white-space: nowrap;
}

@media (max-width: 600px) {
	header .x-primary-menu .wp-block-navigation__responsive-container.is-menu-open,
	header .x-primary-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		background-color: #ffffff !important;
		color: #333333;
	}
	header .x-primary-menu .wp-block-navigation__responsive-container.is-menu-open a {
		color: #333333 !important;
	}
}


/* -------------------------------------------------------------------------
   Row 2: brand row — a compact white shadow-card sitting on the body's
   red frame, holding the logo (left) and primary nav links (right) on a
   single line. Mirrors the rounded card on https://rlc.org/about/.

   The wrap (.x-brand-row-wrap) provides the outer red gutter; the inner
   .x-brand-row is the actual card and gets the shadow + radius.
   ------------------------------------------------------------------------- */
/* The whole brand row (card + outer red gutter) is capped at 100px tall.
   With 0.5rem (8px) of vertical padding on the wrap, the inner card gets
   100 - 16 = 84px to play with. The card uses 0.5rem internal padding,
   so the logo + text get ~68px of vertical room. */
/* `overflow: visible` is set explicitly all the way up the chain so the
   nav dropdown (which renders as a submenu absolutely positioned below
   its parent <li>) isn't clipped by the brand-row's height cap or by any
   ancestor that gets an implicit `overflow: hidden` from a layout block.
   The full chain includes the alignfull wrapper, the brand row, and every
   layer of the WP Navigation block's responsive-container structure. */
body header > .wp-block-group.alignfull,
header.x-rlc-header,
header .x-brand-row-wrap,
header .x-brand-row,
header .x-primary-menu .wp-block-navigation,
header .x-primary-menu .wp-block-navigation__responsive-container,
header .x-primary-menu .wp-block-navigation__responsive-close,
header .x-primary-menu .wp-block-navigation__responsive-dialog,
header .x-primary-menu .wp-block-navigation__responsive-container-content,
header .x-primary-menu .wp-block-navigation__container,
header .x-primary-menu .wp-block-page-list,
header .x-primary-menu .wp-block-navigation-item.has-child {
	overflow: visible;
}

/* WordPress's block layout injects dynamically-named wp-container-* classes
   that set container-type: inline-size for container queries. That property
   implies contain: layout, which clips absolutely-positioned descendants
   (like the dropdown submenu) at the element boundary — overflow: visible
   alone cannot override it. Reset containment on the two elements that carry
   those dynamic classes inside the header. */
header .x-brand-row,
header .x-primary-menu.wp-block-navigation {
	contain: none !important;
	container-type: normal !important;
}

header .x-brand-row-wrap {
	box-sizing: border-box;
}

header .x-brand-row {
	align-items: center;
	flex-wrap: nowrap;
	box-sizing: border-box;
	/* The brand row needs to create a positioning context with a stacking
	   level above the page content so the submenu hovers over the body
	   instead of slipping behind it. */
	position: relative;
	z-index: 5;
}


/* Logo — height-constrained (so it never exceeds the card) and width-auto
   so the aspect ratio is preserved. The 150px width cap from the previous
   iteration would let a tall image push the row past 100px; switching to
   a height cap is what actually keeps the row ≤100px. */
header .x-brand-row .x-brand-icon {
	margin: 0;
	flex: 0 0 auto;
	height: 100px;
	max-height: 100px;
	display: flex;
	align-items: center;
}
header .x-brand-row .x-brand-icon a,
header .x-brand-row .x-brand-icon img {
	display: block;
	height: 100%;
	max-height: 100px;
	width: auto;
	max-width: 100px;
}

/* Primary navigation: Poppins, uppercase, single row.
   Link colour is the navy rgb(8, 54, 99); weight is light (400) so the
   header reads less heavy. Hover keeps the same colour and just
   underlines (no red flash). */
header .x-primary-menu {
	font-family: Poppins, sans-serif;
	flex: 0 1 auto;
}
header .x-primary-menu .wp-block-navigation__container {
	flex-wrap: nowrap;
	white-space: nowrap;
}
header .x-primary-menu .wp-block-navigation-item__content {
	text-transform: uppercase;
	text-decoration: none;
}
/* (Hover / current-menu-item styles redefined in the v0.3.0 block below.) */


/* ---- Sub-menu (dropdown) styling. The default block-nav submenu packs
        items with almost no padding, which feels cramped against the
        rest of the page typography. Give each child page its own
        comfortable vertical and horizontal breathing room, and a soft
        hover state. */
header .x-primary-menu .wp-block-navigation__submenu-container {
	background-color: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 6px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	padding: 0.5rem 0;
	min-width: 14rem;
	/* Float above any siblings of the header (page content, sidebar, etc.). */
	position: absolute;
	z-index: 9999;
}

/* Submenu items: stack vertically, full-width hover band, no nowrap-gap
   inheritance from the top-level container. */
header .x-primary-menu .wp-block-navigation__submenu-container .wp-block-navigation-item {
	display: block;
	width: 100%;
}
header .x-primary-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.6rem 1.25rem;
	letter-spacing: 0.04em;
	font-weight: 400;
	color: rgb(8, 54, 99) !important;
}
header .x-primary-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header .x-primary-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	background-color: rgba(8, 54, 99, 0.08);
	color: rgb(8, 54, 99) !important;
	text-decoration: underline;
}



/* -------------------------------------------------------------------------
   Footer — alignfull break-out and legacy 3-column classes (logo / tagline
   / socials). Base footer color/typography and .x-footer-cols layout are
   defined further down in the v0.3.0 block.
   ------------------------------------------------------------------------- */

/* Apply the same alignfull break-out we use for the header strips so the
   background fills the viewport regardless of the surrounding template wrapper. */
body footer.x-rlc-footer.alignfull {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	box-sizing: border-box;
}

/* Left column: logo flush-left, capped at the source 180px width. */
footer.x-rlc-footer .x-footer-col-left {
	text-align: left;
}
footer.x-rlc-footer .x-footer-logo {
	margin: 0;
}
footer.x-rlc-footer .x-footer-logo img {
	display: block;
	max-width: 180px;
	width: 100%;
	height: auto;
}

/* Centre column: tagline centered, lighter weight. */
footer.x-rlc-footer .x-footer-col-center {
	text-align: center;
}
footer.x-rlc-footer .x-footer-tagline {
	margin: 0;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.4;
}

/* Right column: social icons flush-right, white glyphs, no backgrounds. */
footer.x-rlc-footer .x-footer-col-right {
	text-align: right;
}
footer.x-rlc-footer .x-footer-social {
	justify-content: flex-end;
	gap: 0.5rem;
	margin: 0;
}
footer.x-rlc-footer .x-footer-social .wp-social-link {
	background-color: transparent !important;
	color: #ffffff !important;
}
footer.x-rlc-footer .x-footer-social .wp-social-link svg {
	fill: currentColor;
}
footer.x-rlc-footer .x-footer-social .wp-social-link:hover {
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
   Event RSVP Manager — normalize button/anchor height inside .erm-public.
   The plugin's inline <style> block uses ".erm-public .btn" (specificity
   0,2,0). Adding .erm-content to the <article> lets us use the three-class
   selector below (0,3,0) to win the cascade even though the inline block
   appears later in the HTML than this stylesheet.
   ------------------------------------------------------------------------- */
.erm-public .erm-content .btn {
	font-size: 1em;
	line-height: 1.5;
	vertical-align: middle;
	box-sizing: border-box;
}

/* =========================================================================
   v0.3.0 — SJC RLC home redesign

   Adds: navy/crimson/cream palette, hero w/ "Liberty" script word, a
   right-rail Next Meeting card, tricolor stripe, Recent Activity grid,
   Get Involved band, navy footer.

   Color tokens (also in theme.json):
     --navy:        #0e2444
     --navy-deep:   #081428
     --navy-ink:    #1a2a44
     --crimson:     #8b1a1a
     --crimson-dp:  #6e1414
     --crimson-bar: #5e1212
     --cream:       #f7f3ed
     --cream-2:     #efe9df
     --paper:       #fbfaf6
     --rule:        #e3dcd0
     --muted:       #6b6357
   ========================================================================= */

:root {
	--sjc-navy: #0e2444;
	--sjc-navy-deep: #081428;
	--sjc-navy-ink: #1a2a44;
	--sjc-crimson: #8b1a1a;
	--sjc-crimson-deep: #6e1414;
	--sjc-crimson-bar: #5e1212;
	--sjc-cream: #f7f3ed;
	--sjc-cream-2: #efe9df;
	--sjc-paper: #fbfaf6;
	--sjc-rule: #e3dcd0;
	--sjc-muted: #6b6357;
}

body { background-color: var(--sjc-cream); color: var(--sjc-navy-ink); }

/* -------- Top bar overrides (was #721515 → now crimson-bar) -------- */
header .x-top-bar {
	background-color: var(--sjc-crimson-bar);
	color: #f4dcdc;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
}
header .x-top-bar .x-top-left { gap: 0.85rem; align-items: center; }
header .x-top-bar .x-top-pipe { margin: 0; opacity: 0.4; }
header .x-top-bar .x-top-tagline { margin: 0; font-size: inherit; color: inherit; text-transform: uppercase; }
header .x-top-bar .wp-block-site-title { font-size: 0.75rem; font-weight: 500; }
header .x-top-bar .wp-block-site-title a { letter-spacing: 0.08em; }

/* -------- Brand row overrides (cream card, crimson eyebrow) -------- */
header .x-brand-row-wrap { background-color: var(--sjc-cream); border-bottom: 1px solid var(--sjc-rule); max-height: none; }
header .x-brand-row {
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	max-height: none;
	gap: 2rem;
}

header .x-brand-cluster { gap: 0.875rem; align-items: center; }
header .x-brand-row .x-brand-icon { height: auto; max-height: none; width: 56px; }
header .x-brand-row .x-brand-icon img { max-height: 56px; max-width: 56px; }
header .x-brand-text { gap: 0.125rem; }
header .x-brand-eyebrow {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
	font-weight: 600;
	margin: 0;
	line-height: 1.1;
}
header .x-brand-name {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--sjc-navy);
	margin: 0;
	line-height: 1.1;
}

/* Right cluster: nav links + Join CTA */
header .x-nav-cluster { gap: 0.5rem; align-items: center; }

/* Primary nav: navy uppercase pills */
header .x-primary-menu { font-size: 0.8125rem; }
header .x-primary-menu .wp-block-navigation__container { gap: 0.25rem; }
header .x-primary-menu .wp-block-navigation-item__content {
	color: var(--sjc-navy) !important;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.625rem 1rem;
	border-radius: 6px;
	transition: color 0.15s ease, background-color 0.15s ease;
}
header .x-primary-menu .wp-block-navigation-item__content:hover,
header .x-primary-menu .wp-block-navigation-item__content:focus {
	color: var(--sjc-crimson) !important;
	text-decoration: none;
	background-color: transparent;
}
header .x-primary-menu .current-menu-item .wp-block-navigation-item__content {
	background-color: var(--sjc-navy);
	color: var(--sjc-cream) !important;
	text-decoration: none;
}

/* Join CTA button — crimson, not the Twenty Twenty-Five default red */
header .x-brand-row .wp-block-button.x-anchor-button .wp-block-button__link,
.x-anchor-button .wp-block-button__link {
	background-color: var(--sjc-crimson) !important;
	color: #ffffff !important;
	border: 1px solid var(--sjc-crimson-deep);
	border-radius: 4px;
	padding: 0.625rem 1.125rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
header .x-brand-row .wp-block-button.x-anchor-button .wp-block-button__link:hover {
	background-color: var(--sjc-crimson-deep) !important;
	color: #ffffff !important;
	text-decoration: none;
}

/* =========================================================================
   Hero
   ========================================================================= */
.x-home-main { padding: 0; max-width: none; }

.x-hero {
	position: relative;
	min-height: 580px;
	color: #ffffff;
	overflow: hidden;
	isolation: isolate;
	background-image:
		linear-gradient(120deg, rgba(14,36,68,0.86) 0%, rgba(14,36,68,0.55) 45%, rgba(139,26,26,0.78) 100%),
		url("assets/hero-florida.svg");
	background-size: cover;
	background-position: center 40%;
	margin: 0;
}
.x-hero-grain {
	position: absolute; inset: 0;
	background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
	pointer-events: none;
	mix-blend-mode: overlay;
}
.x-hero-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 6rem 2rem 5.5rem;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Headline: small + cursive script + rest */
.x-hero-h1 {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-weight: 700;
	font-size: clamp(2.5rem, 5.4vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: #ffffff;
	margin: 0 0 0.875rem;
}
.x-hero-h1 .x-hero-small { display: block; font-size: 0.62em; font-weight: 600; color: #ffffff; }
.x-hero-h1 .x-hero-script {
	font-family: 'Allura', cursive;
	font-weight: 400;
	font-size: 1.55em;
	line-height: 0.9;
	color: #f5e6d8;
	display: block;
	margin: -0.375rem 0 -0.625rem 1.75rem;
}
.x-hero-h1 .x-hero-rest { display: block; }

.x-hero-sub {
	max-width: 32.5rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.86);
	margin: 0.5rem 0 1.75rem;
}

/* Hero CTAs */
.x-hero-ctas { gap: 0.75rem; flex-wrap: wrap; }
.x-hero-ctas .wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1.375rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 4px;
	border: 1px solid transparent;
}
.x-hero-ctas .x-btn-primary .wp-block-button__link {
	background-color: var(--sjc-crimson) !important;
	color: #ffffff !important;
	border-color: rgba(255,255,255,0.12);
}
.x-hero-ctas .x-btn-primary .wp-block-button__link:hover {
	background-color: var(--sjc-crimson-deep) !important;
}
.x-hero-ctas .x-btn-ghost .wp-block-button__link {
	background-color: rgba(255,255,255,0.06) !important;
	color: #ffffff !important;
	border-color: rgba(255,255,255,0.4);
	backdrop-filter: blur(2px);
}
.x-hero-ctas .x-btn-ghost .wp-block-button__link:hover {
	background-color: rgba(255,255,255,0.14) !important;
}

/* Next Meeting card */
.x-next-meeting {
	background: rgba(8, 20, 40, 0.72);
	border: 1px solid rgba(255,255,255,0.14);
	backdrop-filter: blur(6px);
	border-radius: 6px;
	padding: 1.75rem;
	color: #ffffff;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.x-nm-tag {
	display: inline-block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #ffd2d2;
	border-bottom: 1px solid rgba(255,210,210,0.3);
	padding-bottom: 0.625rem;
	margin: 0 0 1rem;
	font-weight: 600;
}
.x-nm-date {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 0.9375rem;
	color: #f5e6d8;
	letter-spacing: 0.04em;
	margin: 0;
}
.x-nm-title {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: #ffffff;
	margin: 0.375rem 0 0.875rem;
}
.x-nm-meta { gap: 0.375rem; margin-bottom: 1.125rem; }
.x-nm-meta p {
	margin: 0;
	display: grid;
	grid-template-columns: 4rem 1fr;
	column-gap: 0.75rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.78);
}
.x-nm-lbl {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #d76a6a;
	font-weight: 600;
	align-self: center;
}
.x-nm-cta-wrap { margin: 0; }
.x-nm-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff !important;
	border-bottom: 2px solid var(--sjc-crimson);
	padding-bottom: 0.25rem;
	text-decoration: none !important;
}

/* =========================================================================
   Tricolor stripe divider
   ========================================================================= */
.x-stripe { display: flex; height: 6px; gap: 0; padding: 0; margin: 0; }
.x-stripe span { flex: 1; }
.x-stripe-r { background: var(--sjc-crimson); }
.x-stripe-w { background: var(--sjc-cream); }
.x-stripe-b { background: var(--sjc-navy); }

/* =========================================================================
   Recent Activity / News grid
   ========================================================================= */
.x-news { background: var(--sjc-cream); }
.x-news-inner { max-width: 1280px; margin: 0 auto; }

.x-section-head {
	align-items: end !important;
	gap: 1.5rem;
	margin-bottom: 2.25rem;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid var(--sjc-rule);
}
.x-section-kicker {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
	margin: 0 0 0.5rem;
}
.x-section-h2 {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 2.375rem;
	font-weight: 600;
	color: var(--sjc-navy);
	margin: 0;
	letter-spacing: -0.01em;
}
.x-section-head-right { gap: 1.125rem; align-items: center; }
.x-section-meta {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	color: var(--sjc-muted);
	margin: 0;
}
.x-section-link-wrap { margin: 0; }
.x-section-link {
	color: var(--sjc-crimson) !important;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.75rem;
	border-bottom: 1px solid var(--sjc-crimson);
	padding-bottom: 2px;
	text-decoration: none !important;
}

/* Posts grid: 3 columns from the WP query block */
.x-news-query .wp-block-post-template { gap: 1.75rem; }

.x-news-card {
	background: #ffffff;
	border: 1px solid var(--sjc-rule);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.x-news-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px -16px rgba(14,36,68,0.25);
}
.x-news-card .x-news-card-img,
.x-news-card .wp-block-post-featured-image {
	margin: 0;
	background: var(--sjc-cream-2);
	display: block;
	width: 100%;
	height: 180px;
	position: relative;
	overflow: hidden;
}
.x-news-card .wp-block-post-featured-image a,
.x-news-card .wp-block-post-featured-image picture {
	display: block;
	width: 100%;
	height: 100%;
}
.x-news-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
/* Striped placeholder shown when no featured image is set.
   The featured-image block renders nothing if there's no image, so we add a
   sibling placeholder via .x-news-card-img that's only visible when the
   featured-image block isn't present (or is empty). */
.x-news-card-img-placeholder {
	display: block;
	width: 100%;
	height: 180px;
	background:
		repeating-linear-gradient(135deg, rgba(14,36,68,0.06) 0 8px, rgba(14,36,68,0.02) 8px 16px),
		var(--sjc-cream-2);
	position: relative;
}
.x-news-card-img-placeholder::after {
	content: "No image";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sjc-muted);
}
/* If the featured-image block is empty (no <img> inside), hide it and
   let the placeholder show. Block theme outputs an empty figure when missing. */
.x-news-card .wp-block-post-featured-image:not(:has(img)) { display: none; }
/* Hide placeholder when a real featured image precedes it. */
.x-news-card .wp-block-post-featured-image:has(img) + .x-news-card-img-placeholder { display: none; }
.x-news-card-body {
	padding: 1.375rem 1.375rem 1.625rem;
	flex: 1;
	gap: 0;
}
.x-news-card-date {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sjc-muted) !important;
	margin: 0 0 0.625rem !important;
}
.x-news-card-title {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: 1.25rem !important;
	line-height: 1.25 !important;
	color: var(--sjc-navy) !important;
	font-weight: 600 !important;
	margin: 0 0 0.625rem !important;
	letter-spacing: -0.005em;
}
.x-news-card-title a { color: inherit !important; text-decoration: none; }
.x-news-card-title a:hover { color: var(--sjc-crimson) !important; }
.x-news-card-excerpt {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 0.90625rem !important;
	line-height: 1.55 !important;
	color: var(--sjc-navy-ink) !important;
	margin: 0 0 1.125rem !important;
}
.x-news-card-more-wrap { margin: 0; }
.x-news-card-more {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sjc-crimson) !important;
	text-decoration: none !important;
}
.x-news-card-more::after { content: " →"; transition: transform 0.15s ease; display: inline-block; }
.x-news-card:hover .x-news-card-more::after { transform: translateX(3px); }

/* =========================================================================
   Get Involved band — navy with 3 columns + dividers
   ========================================================================= */
.x-involve { background: var(--sjc-navy); color: #ffffff; }
.x-involve-inner { max-width: 1280px; margin: 0 auto; gap: 0 !important; }
.x-involve-col {
	padding: 0.75rem 2.25rem !important;
	border-right: 1px solid rgba(255,255,255,0.12);
	margin: 0;
}
.x-involve-col:last-child { border-right: 0; }
.x-involve-col:first-child { padding-left: 0 !important; }
.x-involve-num {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	color: #d76a6a;
	letter-spacing: 0.18em;
	margin: 0 0 0.75rem;
}
.x-involve-h3 {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: 1.625rem !important;
	color: #ffffff;
	margin: 0 0 0.75rem !important;
	font-weight: 600 !important;
}
.x-involve-p {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 0.90625rem !important;
	line-height: 1.6 !important;
	color: rgba(255,255,255,0.78) !important;
	margin: 0 0 1.25rem !important;
}
.x-involve-link {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #ffffff !important;
	border-bottom: 2px solid var(--sjc-crimson);
	padding-bottom: 3px;
	text-decoration: none !important;
}

/* =========================================================================
   Footer — navy-deep, 4-column layout, bottom bar w/ copy + socials
   ========================================================================= */
footer.x-rlc-footer {
	background-color: var(--sjc-navy-deep);
	color: rgba(255,255,255,0.72);
	font-family: 'Inter', system-ui, sans-serif;
}
footer.x-rlc-footer .x-footer-cols {
	max-width: 1280px;
	margin: 0 auto !important;
	gap: 3rem;
	align-items: flex-start;
}
footer.x-rlc-footer .x-footer-cols > .wp-block-column { margin: 0; }

footer.x-rlc-footer .x-footer-col-brand .x-footer-logo { margin: 0 0 0.875rem; }
footer.x-rlc-footer .x-footer-col-brand .x-footer-logo img { max-width: 88px; height: auto; }
footer.x-rlc-footer .x-footer-blurb {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255,255,255,0.85);
	max-width: 20rem;
	margin: 0;
}

footer.x-rlc-footer .x-footer-h {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #d76a6a;
	margin: 0 0 1rem;
	font-weight: 600;
}
footer.x-rlc-footer .x-footer-list,
footer.x-rlc-footer .wp-block-page-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}
footer.x-rlc-footer .x-footer-list a,
footer.x-rlc-footer .wp-block-page-list a {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.8) !important;
	text-decoration: none;
}
footer.x-rlc-footer .x-footer-list a:hover,
footer.x-rlc-footer .wp-block-page-list a:hover { color: #ffffff !important; }

footer.x-rlc-footer .x-footer-meta {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.85);
	margin: 0;
}

/* Bottom bar */
footer.x-rlc-footer .x-footer-bottom {
	max-width: 1280px;
	margin: 2.5rem auto 0;
	padding-top: 1.375rem;
	border-top: 1px solid rgba(255,255,255,0.1);
	gap: 1rem;
	align-items: center;
}
footer.x-rlc-footer .x-footer-copy {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.55);
	letter-spacing: 0.04em;
	margin: 0;
}
footer.x-rlc-footer .x-footer-social { gap: 0.625rem; margin: 0; }
footer.x-rlc-footer .x-footer-social .wp-social-link {
	width: 32px; height: 32px;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	background-color: transparent !important;
	color: rgba(255,255,255,0.8) !important;
}
footer.x-rlc-footer .x-footer-social .wp-social-link:hover {
	border-color: var(--sjc-crimson);
	color: #ffffff !important;
	opacity: 1;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
	.x-hero-inner { grid-template-columns: 1fr; padding: 4rem 1.5rem; }
	.x-news-query .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
	.x-involve-inner { grid-template-columns: 1fr !important; }
	.x-involve-col {
		padding: 1.5rem 0 !important;
		border-right: 0;
		border-bottom: 1px solid rgba(255,255,255,0.12);
	}
	.x-involve-col:last-child { border-bottom: 0; }
	footer.x-rlc-footer .x-footer-cols { grid-template-columns: 1fr 1fr !important; flex-wrap: wrap; }
	footer.x-rlc-footer .x-footer-cols > .wp-block-column { flex-basis: calc(50% - 1.5rem) !important; }
}
@media (max-width: 640px) {
	header .x-top-bar .x-top-tagline,
	header .x-top-bar .x-top-pipe { display: none; }
	.x-news-query .wp-block-post-template { grid-template-columns: 1fr !important; }
	footer.x-rlc-footer .x-footer-cols > .wp-block-column { flex-basis: 100% !important; }
	footer.x-rlc-footer .x-footer-bottom { flex-direction: column; align-items: flex-start; }
	.x-section-head { flex-direction: column; align-items: flex-start !important; }

	/* Shrink chapter wordmark on phones so it doesn't dominate the brand row */
	header .x-brand-eyebrow { font-size: 0.5625rem; letter-spacing: 0.14em; }
	header .x-brand-name { font-size: 0.875rem; }

	/* Shrink the brand-row Join CTA to a single-line "Join" pill on phones */
	header .x-brand-row .wp-block-button.x-anchor-button .wp-block-button__link {
		font-size: 0;
		white-space: nowrap;
		padding: 0.45rem 0.75rem;
		letter-spacing: 0;
	}
	header .x-brand-row .wp-block-button.x-anchor-button .wp-block-button__link::before {
		content: "Join";
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.12em;
	}
}


/* Home-page section backgrounds must beat the
   `main .wp-block-group:not(.has-background)` transparent rule. */
main.wp-block-group .x-involve { background-color: var(--sjc-navy) !important; }
main.wp-block-group .x-news    { background-color: var(--sjc-cream); }
main.wp-block-group .x-hero    { /* keeps its background-image gradient + url */ }

/* Footer columns: assert flex layout explicitly so we don't depend on
   wp-block-library's columns CSS being enqueued on this page. */
footer.x-rlc-footer .x-footer-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
}
footer.x-rlc-footer .x-footer-cols > .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}
/* Brand column gets a wider basis (was inline 34%) */
footer.x-rlc-footer .x-footer-col-brand {
	flex: 0 1 28%;
}


/* =========================================================================
   v0.4.0 — Single-post + sidebar redesign

   Adds the breadcrumb strip, mono kicker, serif title + italic byline,
   outlined category pills, floated featured-image figure with caption
   strip, red drop-cap on body content, About-author card, and the navy
   sidebar with red search button + numbered Latest list + category pills.

   Token map (already declared in :root above):
     --sjc-cream     #f7f3ed   page bg
     --sjc-cream-2   #efe9df   breadcrumb strip + photo card
     --sjc-rule      #e3dcd0   hairlines / dividers
     --sjc-navy      #0e2444   title text + sidebar bg
     --sjc-navy-ink  #1a2a44   body text
     --sjc-crimson   #8b1a1a   accents, drop-cap, pills, kicker
     --sjc-muted     #6b6357   meta text
   ========================================================================= */

/* --- Page wrapper: cream bg, no max-width, no padding --- */
body main.wp-block-group.x-post-main {
	background-color: var(--sjc-cream);
	padding: 0;
	max-width: none;
	margin: 0;
}

/* --- Breadcrumb strip (full-width, cream-2, mono kicker) --- */
.x-post-main .x-post-crumb {
	border-bottom: 1px solid var(--sjc-rule);
	padding: 0;
	margin: 0;
}
.x-post-crumb-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0.875rem 2rem;
	align-items: center !important;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sjc-muted);
}
.x-post-crumb-left,
.x-post-crumb-right { gap: 0.625rem !important; align-items: center !important; }
.x-post-crumb p { margin: 0; }
.x-post-crumb .x-crumb-link a {
	color: var(--sjc-muted) !important;
	text-decoration: none !important;
}
.x-post-crumb .x-crumb-link a:hover { color: var(--sjc-crimson) !important; }
.x-post-crumb .x-crumb-sep,
.x-post-crumb .x-crumb-dot { opacity: 0.45; }
.x-post-crumb .x-crumb-cat,
.x-post-crumb .x-crumb-cat a {
	color: var(--sjc-navy) !important;
	text-decoration: none !important;
	font-weight: 600;
}
.x-post-crumb .x-crumb-date {
	color: var(--sjc-muted) !important;
	font-weight: 500;
}
.x-post-crumb .x-crumb-date time { color: inherit; }
.x-post-crumb .x-crumb-filed {
	color: var(--sjc-crimson) !important;
	font-weight: 600;
}
.x-post-crumb .x-crumb-filed-cat,
.x-post-crumb .x-crumb-filed-cat a {
	color: var(--sjc-crimson) !important;
	font-weight: 600;
	text-decoration: none !important;
}

/* --- Inner wrap: max-width and column gap --- */
.x-post-main .x-post-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 3rem 2rem 5rem;
}
.x-post-columns {
	gap: 3rem !important;
	margin: 0 !important;
}

/* --- Eyebrow kicker (// CATEGORY · MONTH) --- */
.x-post-eyebrow {
	gap: 0.5rem !important;
	align-items: center !important;
	margin-bottom: 1rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
}
.x-post-eyebrow > * { margin: 0 !important; }
.x-post-eyebrow .x-eyebrow-prefix { font-weight: 600; }
.x-post-eyebrow .x-eyebrow-cat,
.x-post-eyebrow .x-eyebrow-cat a {
	color: var(--sjc-crimson) !important;
	text-decoration: none !important;
	font-weight: 600;
}
.x-post-eyebrow .x-eyebrow-sep { opacity: 0.55; }
.x-post-eyebrow .x-eyebrow-month time { color: inherit; }

/* --- Title --- */
.x-post-title {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: clamp(2rem, 4.4vw, 3rem) !important;
	font-weight: 700 !important;
	line-height: 1.08 !important;
	letter-spacing: -0.012em !important;
	color: var(--sjc-navy) !important;
	margin: 0 0 1.25rem !important;
}

/* --- Byline meta row: PUBLISHED date · BY author + pill chips --- */
.x-post-byline {
	gap: 0.875rem !important;
	align-items: center !important;
	padding-bottom: 1.5rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--sjc-rule);
}
.x-post-byline > * { margin: 0 !important; }
.x-byline-published,
.x-byline-author { gap: 0.5rem !important; align-items: baseline !important; }
.x-byline-lbl {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-muted);
	font-weight: 600;
	margin: 0 !important;
}
.x-byline-date,
.x-byline-name {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-style: italic;
	font-size: 0.9375rem;
	color: var(--sjc-navy-ink);
	margin: 0 !important;
}
.x-byline-date time { color: inherit; }
.x-byline-bullet {
	color: var(--sjc-rule);
	margin: 0 0.125rem !important;
}
/* Pill-style category chips (right-aligned in the byline row).
   wp:post-terms with separator=" " emits <a> ... <a>; the literal space
   between anchors collapses inside the flex layout below. */
.x-byline-pills {
	margin-left: auto !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0; /* collapse the literal space between <a> tags */
}
.x-byline-pills a {
	display: inline-block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sjc-crimson) !important;
	border: 1px solid var(--sjc-crimson);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	text-decoration: none !important;
	line-height: 1.4;
	background: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.x-byline-pills a:hover {
	background-color: var(--sjc-crimson);
	color: #ffffff !important;
}

/* --- Featured photo + caption strip — floats right inside the article --- */
.x-post-photo {
	float: right;
	width: 45%;
	max-width: 380px;
	margin: 0.5rem 0 1.25rem 1.75rem !important;
	padding: 0;
	background: var(--sjc-cream-2);
	border: 1px solid var(--sjc-rule);
	box-shadow: 0 6px 20px -12px rgba(14,36,68,0.18);
}
.x-post-photo .wp-block-post-featured-image {
	margin: 0;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background:
		repeating-linear-gradient(135deg, rgba(14,36,68,0.08) 0 8px, rgba(14,36,68,0.02) 8px 16px),
		var(--sjc-cream-2);
}
.x-post-photo .wp-block-post-featured-image a,
.x-post-photo .wp-block-post-featured-image picture {
	display: block;
	width: 100%;
	height: 100%;
}
.x-post-photo .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Hide image wrapper when no featured image is set so the caption sits
   directly below an empty card, matching the comp's placeholder feel. */
.x-post-photo .wp-block-post-featured-image:not(:has(img)) {
	min-height: 11rem;
}
.x-post-photo-cap {
	margin: 0 !important;
	padding: 0.625rem 0.875rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sjc-muted);
	background: #ffffff;
	border-top: 1px solid var(--sjc-rule);
	line-height: 1.5;
}
.x-post-photo-cap:empty { display: none; }

/* --- Body content: serif, drop-cap on first paragraph --- */
.x-post-content {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--sjc-navy-ink);
}
.x-post-content > p {
	margin: 0 0 1.25rem;
}
.x-post-content > p:first-of-type::first-letter {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	float: left;
	font-size: 5rem;
	line-height: 0.85;
	color: var(--sjc-crimson);
	font-weight: 700;
	margin: 0.4rem 0.55rem 0 0;
	padding: 0;
}
.x-post-content h2,
.x-post-content h3 {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	color: var(--sjc-navy);
	font-weight: 600 !important;
	letter-spacing: -0.005em;
	margin: 1.75rem 0 0.75rem;
}
.x-post-content h2 { font-size: 1.625rem; }
.x-post-content h3 { font-size: 1.25rem; }
.x-post-content a { color: var(--sjc-crimson); }
.x-post-content blockquote {
	border-left: 3px solid var(--sjc-crimson);
	padding: 0.25rem 0 0.25rem 1.125rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: var(--sjc-navy-ink);
}

/* --- About author card (clears the floated photo) --- */
.x-post-author {
	clear: both;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sjc-rule);
}
.x-post-author .x-author-h {
	align-items: baseline !important;
	gap: 0.5rem !important;
	margin: 0 0 1.25rem !important;
}
.x-post-author .x-author-h-prefix {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: 1.5rem !important;
	color: var(--sjc-navy) !important;
	margin: 0 !important;
	font-weight: 600 !important;
	letter-spacing: -0.005em;
}
.x-post-author .x-author-h-name {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: 1.5rem !important;
	color: var(--sjc-navy) !important;
	font-weight: 600 !important;
	margin: 0 !important;
	letter-spacing: -0.005em;
}
.x-post-author .x-author-card {
	gap: 1rem !important;
	align-items: center !important;
	margin-bottom: 0.75rem;
}
.x-post-author .x-author-avatar img,
.x-post-author .wp-block-avatar img {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	border: 2px solid var(--sjc-rule);
	background: var(--sjc-cream-2);
	display: block;
}
.x-post-author .x-author-meta { gap: 0.125rem !important; }
.x-post-author .x-author-name {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: 1.0625rem !important;
	font-weight: 600 !important;
	color: var(--sjc-navy) !important;
	margin: 0 !important;
}
.x-post-author .x-author-role {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-muted);
	margin: 0 !important;
	font-weight: 600;
}
.x-post-author .x-author-bio {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: 0.9375rem !important;
	line-height: 1.65 !important;
	color: var(--sjc-navy-ink) !important;
	margin: 0.875rem 0 0 !important;
}

/* --- Comments --- (see full .x-post-comments block further down) */

/* =========================================================================
   Single-post sidebar — navy block, red search, numbered query, pills
   ========================================================================= */

.x-post-side .x-side {
	position: sticky;
	top: 1.5rem;
}

/* --- Search pill: cream input + crimson icon button --- */
.x-side .x-side-search { margin: 0 !important; }
.x-side .x-side-search .wp-block-search__inside-wrapper {
	display: flex;
	flex-direction: row;
	background: transparent;
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	height: auto;
}
.x-side .x-side-search .wp-block-search__input {
	flex: 1;
	background: rgba(255,255,255,0.96) !important;
	color: var(--sjc-navy-ink) !important;
	border: 0 !important;
	border-radius: 4px 0 0 4px;
	padding: 0.625rem 0.875rem;
	margin: 0;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.4;
	min-width: 0;
}
.x-side .x-side-search .wp-block-search__input::placeholder {
	color: rgba(14,36,68,0.45);
}
.x-side .x-side-search .wp-block-search__button {
	background: var(--sjc-crimson) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 0 4px 4px 0;
	padding: 0.625rem 0.875rem !important;
	margin: 0 !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.x-side .x-side-search .wp-block-search__button svg {
	fill: currentColor;
	width: 1rem;
	height: 1rem;
}
.x-side .x-side-search .wp-block-search__button:hover {
	background: var(--sjc-crimson-deep) !important;
}

/* --- LATEST · 06 POSTS section header --- */
.x-side .x-side-head {
	align-items: baseline !important;
	padding-bottom: 0.75rem;
	margin: 0 !important;
	border-bottom: 1px solid rgba(255,255,255,0.18);
}
.x-side .x-side-head > p { margin: 0 !important; }
.x-side .x-side-h {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #d76a6a !important;
	font-weight: 600;
}
.x-side .x-side-h-count {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5) !important;
}

/* --- Numbered Latest list (CSS counter renders 01..06) --- */
.x-side-query .wp-block-post-template {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	counter-reset: x-side-num;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.x-side-query .wp-block-post-template > li {
	counter-increment: x-side-num;
	margin: 0 !important;
	padding: 0 0 1rem 2.75rem;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	list-style: none;
	position: relative;
}
.x-side-query .wp-block-post-template > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.x-side-query .wp-block-post-template > li::before {
	content: counter(x-side-num, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.0625rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	color: var(--sjc-crimson);
	font-weight: 600;
	line-height: 1;
}
.x-side-query .x-side-item-body { gap: 0.25rem !important; }
.x-side-query .x-side-item-title {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: #ffffff !important;
	margin: 0 !important;
	letter-spacing: -0.005em;
}
.x-side-query .x-side-item-title a {
	color: #ffffff !important;
	text-decoration: none !important;
}
.x-side-query .x-side-item-title a:hover {
	color: #ffd2d2 !important;
}
.x-side-query .x-side-item-date {
	font-family: 'JetBrains Mono', ui-monospace, monospace !important;
	font-size: 0.625rem !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: rgba(255,255,255,0.55) !important;
	margin: 0.25rem 0 0 !important;
}
.x-side-query .x-side-item-date time { color: inherit; }

/* --- // Categories kicker + pill chips --- */
.x-side .x-side-kicker {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #d76a6a !important;
	margin: 0 !important;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255,255,255,0.18);
	font-weight: 600;
}
.x-side .x-side-cats {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.x-side .x-side-cats li { margin: 0 !important; }
.x-side .x-side-cats a {
	display: inline-block;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff !important;
	border: 1px solid rgba(255,255,255,0.32);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
	text-decoration: none !important;
	line-height: 1.4;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.x-side .x-side-cats a:hover {
	background-color: rgba(255,255,255,0.1);
	border-color: #ffffff;
}

/* =========================================================================
   v0.4.0 responsive: stack sidebar under article, unfloat photo on phones
   ========================================================================= */
@media (max-width: 980px) {
	.x-post-main .x-post-inner { padding: 2rem 1.25rem 3.5rem; }
	.x-post-columns { flex-wrap: wrap !important; gap: 2rem !important; }
	.x-post-columns > .x-post-article,
	.x-post-columns > .x-post-side {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	.x-post-side .x-side { position: static; }
	.x-post-photo { width: 50%; }
	.x-post-byline { flex-wrap: wrap; }
	.x-byline-pills { margin-left: 0 !important; flex-basis: 100%; }
}

@media (max-width: 640px) {
	.x-post-photo {
		float: none;
		width: 100%;
		max-width: none;
		margin: 1rem 0 1.5rem !important;
	}
	.x-post-content > p:first-of-type::first-letter { font-size: 3.75rem; }
	.x-post-crumb-inner { padding: 0.625rem 1rem; flex-wrap: wrap; gap: 0.5rem !important; }
	.x-post-crumb-right { display: none !important; }
	.x-post-title { font-size: 1.875rem !important; }
}

/* =========================================================================
   Featured Event — bulletin-board banner

   Sits between the tricolor stripe and Recent Activity on the home page.
   Section visibility (the entire .x-featured-event group) is governed by
   the render_block_core/group filter in functions.php — when ERM has no
   currently-featured event, the group renders as empty.

   Two-column layout at desktop (flyer left, info right). The left column
   collapses gracefully when the featured event has no flyer attached:
   `[rlc_featured_flyer]` returns an empty string, and
   `.x-featured-flyer-wrap:empty { display: none; }` removes its visual
   footprint, falling back to a single-column event card.
   ========================================================================= */

.x-featured-event {
	background:
		repeating-linear-gradient(45deg, rgba(14,36,68,0.04) 0 2px, transparent 2px 12px),
		var(--sjc-cream-2);
	border-bottom: 1px solid var(--sjc-rule);
}
.x-featured-inner { max-width: 1280px; margin: 0 auto; }

/* ---- Section head ---- */
.x-featured-head {
	align-items: end !important;
	gap: 1.5rem;
	margin-bottom: 2rem;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid var(--sjc-rule);
}
.x-featured-kicker {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
	margin: 0 0 0.5rem;
}
.x-featured-h2 {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 2.25rem;
	font-weight: 600;
	color: var(--sjc-navy);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.05;
}
.x-featured-posted {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sjc-muted);
	margin: 0;
	white-space: nowrap;
}
.x-featured-posted:empty { display: none; }

/* ---- Two-column body ---- */
.x-featured-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* ---- Flyer column (pinned-to-corkboard) ---- */
.x-featured-flyer-col { padding: 0; }
.x-featured-flyer-wrap {
	position: relative;
	margin: 0 auto;
	max-width: 520px;
	background: #ffffff;
	padding: 0.75rem;
	border-radius: 2px;
	box-shadow:
		0 36px 60px -24px rgba(14,36,68,0.4),
		0 4px 12px -6px rgba(14,36,68,0.15);
	transform: rotate(-1deg);
	transition: transform 0.2s ease;
	line-height: 0;
}
.x-featured-flyer-wrap:hover {
	transform: rotate(-0.4deg) translateY(-2px);
}
/* Auto-collapse / pushpin styles defined in the v0.4 patch block below. */

.x-featured-flyer-wrap img,
.x-featured-flyer-wrap .x-featured-flyer {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
}

/* ---- Info column ---- */
.x-featured-info { padding: 0; }
.x-featured-title {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: clamp(1.75rem, 2.4vw, 2.25rem) !important;
	font-weight: 600 !important;
	color: var(--sjc-navy) !important;
	margin: 0 0 0.875rem !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em !important;
}
.x-featured-lead {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sjc-navy-ink);
	margin: 0 0 1.5rem;
	max-width: 540px;
}

.x-featured-meta {
	background: #ffffff;
	border: 1px solid var(--sjc-rule);
	border-top: 3px solid var(--sjc-crimson);
	border-radius: 2px;
	padding: 1.125rem 1.25rem 1.25rem;
	margin: 0 0 1.5rem;
	gap: 0.625rem;
}
.x-featured-meta-row {
	margin: 0 !important;
	display: grid;
	grid-template-columns: 5rem 1fr;
	column-gap: 1rem;
	align-items: baseline;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.9375rem;
	color: var(--sjc-navy-ink);
	line-height: 1.5;
}
.x-featured-meta-lbl {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
	font-weight: 600;
}
.x-featured-meta-val { color: var(--sjc-navy-ink); }
/* Hide a meta row entirely when its value shortcode returned "". */
.x-featured-meta-row:has(.x-featured-meta-val:empty) { display: none; }

/* CTA row: reuses the existing .x-btn-primary tokens from the hero
   buttons so we don't duplicate colour rules. */
.x-featured-ctas { gap: 0.75rem; flex-wrap: wrap; }
.x-featured-ctas .x-btn-primary .wp-block-button__link {
	background-color: var(--sjc-crimson) !important;
	color: #ffffff !important;
	border: 1px solid var(--sjc-crimson-deep);
	border-radius: 4px;
	padding: 0.875rem 1.375rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}
.x-featured-ctas .x-btn-primary .wp-block-button__link:hover {
	background-color: var(--sjc-crimson-deep) !important;
}

/* Make sure background paints over the generic main-group transparent
   rule (mirrors the .x-news / .x-involve overrides further down). */
main.wp-block-group .x-featured-event {
	background-color: var(--sjc-cream-2);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.x-featured-grid {
		grid-template-columns: 1fr !important;
		gap: 2rem;
	}
	.x-featured-flyer-wrap {
		max-width: 420px;
		transform: rotate(-0.6deg);
	}
	.x-featured-head {
		flex-wrap: wrap !important;
		gap: 0.5rem;
	}
	.x-featured-h2 { font-size: 1.875rem; }
}

/* =========================================================================
   Event Post styling — append to style.css

   Triggered when a post has rlc_event_flyer_id meta OR contains
   [erm_event_details] / [erm_event_post_rsvp] in its content. The mockup
   adds three blocks the regular-post styles don't cover:
     1. .rlc-event-post__flyer        — centered flyer figure
     2. .rlc-event-details            — cream card with dl rows
     3. .rlc-event-post__rsvp-banner  — confirmation/notice banner

   Reuses the existing --sjc-* tokens from :root. No changes needed to the
   .x-post-* rules already in style.css — these just add on top.
   ========================================================================= */

/* ---- Flyer figure ---- */
.rlc-event-post__flyer {
	margin: 0.5rem 0 2rem;
	padding: 0;
	text-align: center;
}
.rlc-event-post__flyer img,
.rlc-event-post__flyer .rlc-event-flyer {
	max-width: 100%;
	width: auto;
	height: auto;
	margin: 0 auto;
	display: block;
	border-radius: 6px;
	box-shadow:
		0 24px 48px -20px rgba(14,36,68,0.35),
		0 4px 12px -6px rgba(14,36,68,0.15);
	border: 1px solid var(--sjc-rule);
	background: var(--sjc-cream-2);
}

/* ---- Event details card ---- */
.rlc-event-details {
	margin: 0 0 2rem;
	padding: 1.625rem 1.875rem;
	background: var(--sjc-paper);
	border: 1px solid var(--sjc-rule);
	border-left: 3px solid var(--sjc-crimson);
	border-radius: 4px;
}
.rlc-event-details dl { margin: 0; padding: 0; display: block; }
.rlc-event-details__row,
.rlc-event-details .erm-event-day dl > div {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 1.125rem;
	align-items: baseline;
	padding: 0.75rem 0;
	border-bottom: 1px dashed var(--sjc-rule);
}
.rlc-event-details__row:first-child,
.rlc-event-details .erm-event-day dl > div:first-child { padding-top: 0; }
.rlc-event-details__row:last-child,
.rlc-event-details .erm-event-day dl > div:last-child { border-bottom: 0; }
.rlc-event-details dt {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
	font-weight: 600;
	margin: 0;
}
.rlc-event-details dd {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--sjc-navy-ink);
	margin: 0;
}
.rlc-event-details dd .erm-venue-map,
.rlc-event-details dd a {
	display: inline-block;
	margin-top: 0.375rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
	border-bottom: 1px solid var(--sjc-crimson);
	padding-bottom: 1px;
	text-decoration: none;
}

/* Multi-day grouped sub-sections */
.rlc-event-details .erm-event-days-blocks {
	display: flex;
	flex-direction: column;
}
.rlc-event-details .erm-event-day {
	padding: 1.125rem 0;
	border-bottom: 1px solid var(--sjc-rule);
}
.rlc-event-details .erm-event-day:first-child { padding-top: 0; }
.rlc-event-details .erm-event-day:last-child { border-bottom: 0; padding-bottom: 0; }
.rlc-event-details .erm-event-day h3 {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--sjc-navy);
	margin: 0 0 0.625rem;
	padding: 0;
	border-bottom: 0;
	letter-spacing: -0.005em;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}
.rlc-event-details .erm-event-day h3::before {
	content: "";
	width: 24px;
	height: 2px;
	background: var(--sjc-crimson);
	display: inline-block;
}

/* ---- RSVP banner / notices ---- */
.rlc-event-post__rsvp-banner { margin: 0 0 2rem; }
.notice {
	padding: 1rem 1.25rem;
	border-radius: 4px;
	border-left: 3px solid var(--sjc-muted);
	background: var(--sjc-paper);
	color: var(--sjc-navy-ink);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.90625rem;
	line-height: 1.55;
}
.notice strong { color: var(--sjc-navy); }
.notice.success {
	border-left-color: #2f7d4a;
	background: #eef7f0;
	color: #1d4d2c;
}
.notice.success strong { color: #1d4d2c; }
.notice.error {
	border-left-color: var(--sjc-crimson);
	background: #fbeded;
	color: var(--sjc-crimson-deep);
}
.notice.error strong { color: var(--sjc-crimson-deep); }
.erm-event-extra {
	margin-top: 0.5rem;
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 0.96875rem;
	line-height: 1.55;
	color: var(--sjc-navy-ink);
}
.erm-event-extra p { margin: 0.5rem 0 0; }

/* ---- Mobile: stack label/value ---- */
@media (max-width: 720px) {
	.rlc-event-details__row,
	.rlc-event-details .erm-event-day dl > div {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/* =========================================================================
   Event Post styling — append to style.css

   Targets the actual markup emitted by the ERM plugin + RLC theme:
     - <dl class="erm-event-summary">  (Date / Time / Venue rows)
     - <img class="rlc-event-flyer">   (bare img inside .x-post-content)
     - <div class="notice success|error"> (RSVP banner)

   Reuses the existing --sjc-* tokens already declared in :root.
   ========================================================================= */

/* ---- Event summary card (Date / Time / Venue) ----
   Matches: <dl class="erm-event-summary"><dt>...</dt><dd>...</dd></dl>
   inside .x-post-content. */
.x-post-content .erm-event-summary {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	column-gap: 1.125rem;
	row-gap: 0;
	margin: 0 0 2rem;
	padding: 1.5rem 1.875rem;
	background: var(--sjc-paper);
	border: 1px solid var(--sjc-rule);
	border-left: 3px solid var(--sjc-crimson);
	border-radius: 4px;
	font-family: 'Inter', system-ui, sans-serif;
}
.x-post-content .erm-event-summary dt {
	grid-column: 1;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-crimson) !important;
	font-weight: 600;
	margin: 0;
	padding: 0.75rem 0;
	border-bottom: 1px dashed var(--sjc-rule);
	align-self: baseline;
}
.x-post-content .erm-event-summary dd {
	grid-column: 2;
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--sjc-navy-ink);
	margin: 0;
	padding: 0.75rem 0;
	border-bottom: 1px dashed var(--sjc-rule);
}
/* First row: no top padding */
.x-post-content .erm-event-summary dt:first-of-type,
.x-post-content .erm-event-summary dd:first-of-type { padding-top: 0; }
/* Last row: no bottom border */
.x-post-content .erm-event-summary dt:last-of-type,
.x-post-content .erm-event-summary dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

.x-post-content .erm-event-summary dd a,
.x-post-content .erm-event-summary dd .erm-venue-map {
	display: inline-block;
	margin-top: 0.375rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
	border-bottom: 1px solid var(--sjc-crimson);
	padding-bottom: 1px;
	text-decoration: none;
}

/* Don't drop-cap the first paragraph when the post starts with a notice
   or event-summary block. style.css's :first-of-type rule still hits the
   first <p> regardless of what came before it; reset the ::first-letter
   styling but keep the paragraph itself styled by .x-post-content. */
.x-post-content > .notice ~ p:first-of-type::first-letter,
.x-post-content > dl.erm-event-summary ~ p:first-of-type::first-letter {
	font-family: inherit !important;
	float: none !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---- Flyer image (bare <img class="rlc-event-flyer"> in post body) ---- */
.x-post-content > img.rlc-event-flyer,
.x-post-content img.rlc-event-flyer {
	display: block;
	max-width: 460px;
	width: 100%;
	height: auto;
	margin: 2rem auto 2rem;
	border-radius: 6px;
	box-shadow:
		0 24px 48px -20px rgba(14,36,68,0.35),
		0 4px 12px -6px rgba(14,36,68,0.15);
	border: 1px solid var(--sjc-rule);
	background: var(--sjc-cream-2);
	clear: both; /* clear the floated .x-post-photo above */
}

/* ---- RSVP / notice banner ---- */
.x-post-content .notice,
.rlc-event-post__rsvp-banner .notice {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 4px;
	border-left: 3px solid var(--sjc-muted);
	background: var(--sjc-paper);
	color: var(--sjc-navy-ink);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.90625rem;
	line-height: 1.55;
}
.x-post-content .notice strong { color: var(--sjc-navy); }
.x-post-content .notice.success {
	border-left-color: #2f7d4a;
	background: #eef7f0;
	color: #1d4d2c;
}
.x-post-content .notice.success strong { color: #1d4d2c; }
.x-post-content .notice.error {
	border-left-color: var(--sjc-crimson);
	background: #fbeded;
	color: var(--sjc-crimson-deep);
}
.x-post-content .notice.error strong { color: var(--sjc-crimson-deep); }

.x-post-content .erm-event-extra {
	margin: 0.5rem 0 1.5rem;
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 0.96875rem;
	line-height: 1.55;
	color: var(--sjc-navy-ink);
}
.x-post-content .erm-event-extra p { margin: 0.5rem 0 0; }

/* ---- Mobile: stack dt/dd ---- */
@media (max-width: 720px) {
	.x-post-content .erm-event-summary {
		grid-template-columns: 1fr;
		padding: 1.25rem 1.25rem;
	}
	.x-post-content .erm-event-summary dt,
	.x-post-content .erm-event-summary dd {
		grid-column: 1;
		padding: 0.5rem 0;
		border-bottom: 0;
	}
	.x-post-content .erm-event-summary dt { padding-bottom: 0.125rem; }
	.x-post-content .erm-event-summary dd {
		padding-top: 0;
		padding-bottom: 0.625rem;
		border-bottom: 1px dashed var(--sjc-rule);
	}
	.x-post-content .erm-event-summary dd:last-of-type { border-bottom: 0; }

	.x-post-content > img.rlc-event-flyer { max-width: 100%; }
}

/* =========================================================================
   Comments form (matches the WP-emitted .wp-block-post-comments-form)
   Markup:
     .x-post-comments
       #respond.comment-respond
         h3#reply-title.comment-reply-title
         form#commentform
           p.logged-in-as
           p.comment-form-comment > label + textarea
           p.form-submit > input[type=submit].wp-block-button__link
   ========================================================================= */

.x-post-comments {
	clear: both;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sjc-rule);
}

.x-post-comments .comment-reply-title {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
	font-size: 1.75rem !important;
	font-weight: 600 !important;
	color: var(--sjc-navy) !important;
	margin: 0 0 0.5rem !important;
	letter-spacing: -0.005em;
}
.x-post-comments .comment-reply-title small a {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sjc-crimson);
	margin-left: 0.625rem;
}

.x-post-comments .logged-in-as {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	color: var(--sjc-muted);
	margin: 0 0 1.5rem !important;
}
.x-post-comments .logged-in-as a {
	color: var(--sjc-crimson);
	border-bottom: 1px solid rgba(139,26,26,0.35);
	text-decoration: none;
}
.x-post-comments .logged-in-as a:hover { border-bottom-color: var(--sjc-crimson); }
.x-post-comments .logged-in-as .required {
	color: var(--sjc-crimson);
	font-weight: 600;
}
.x-post-comments .required-field-message {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.75rem;
	color: var(--sjc-muted);
}

.x-post-comments .comment-form p {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1.125rem;
}

.x-post-comments .comment-form label {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sjc-navy);
	font-weight: 600;
}
.x-post-comments .comment-form label .required { color: var(--sjc-crimson); }

.x-post-comments .comment-form textarea,
.x-post-comments .comment-form input[type="text"],
.x-post-comments .comment-form input[type="email"],
.x-post-comments .comment-form input[type="url"] {
	width: 100%;
	padding: 0.875rem 1rem;
	background: #ffffff;
	border: 1px solid var(--sjc-rule);
	border-radius: 4px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.9375rem;
	color: var(--sjc-navy-ink);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}
.x-post-comments .comment-form textarea {
	min-height: 10rem;
	resize: vertical;
	line-height: 1.5;
}
.x-post-comments .comment-form textarea:focus,
.x-post-comments .comment-form input[type="text"]:focus,
.x-post-comments .comment-form input[type="email"]:focus,
.x-post-comments .comment-form input[type="url"]:focus {
	border-color: var(--sjc-crimson);
	box-shadow: 0 0 0 3px rgba(139,26,26,0.08);
}

/* Submit button — overrides the generic wp-block-button__link */
.x-post-comments .form-submit {
	margin-top: 0.5rem !important;
}
.x-post-comments .form-submit input[type="submit"],
.x-post-comments .wp-block-button__link {
	padding: 0.875rem 1.625rem !important;
	background: var(--sjc-crimson) !important;
	color: #ffffff !important;
	font-family: 'Inter', system-ui, sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	border-radius: 4px !important;
	border: 1px solid var(--sjc-crimson-deep, #6e1414) !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
	box-shadow: none !important;
}
.x-post-comments .form-submit input[type="submit"]:hover,
.x-post-comments .wp-block-button__link:hover {
	background: var(--sjc-crimson-deep, #6e1414) !important;
}

/* Akismet honeypot stays hidden */
.x-post-comments .akismet-fields-container { display: none !important; }

/* =========================================================================
   Page styling — append to style.css

   Targets the markup emitted by the RLC page template:
     <main class="x-page-main">
       <h1 class="x-post-title">…</h1>
       <figure class="x-post-thumb wp-block-post-featured-image">…</figure>
       <div class="x-post-content">…</div>
     </main>

   Pages reuse .x-post-title and .x-post-content from style.css (so the
   title font, drop-cap, body type, headings, etc. all carry over). What
   pages DON'T have: crumbs, eyebrow, byline, sidebar — so this file just
   adds the layout container + the small floated featured-thumb behavior.

   Reuses --sjc-* tokens already in :root.
   ========================================================================= */

/* ---- Page wrapper: cream bg, max-width centered, breathing room ---- */
body main.wp-block-group.x-page-main {
	background-color: var(--sjc-cream);
	/* Override the inline padding-* WP emits with our own consistent rhythm.
	   Inline styles win normally — these need !important. */
	padding-top: 3.5rem !important;
	padding-bottom: 5rem !important;
	padding-left: 2rem !important;
	padding-right: 2rem !important;
	margin: 0;
}

/* Constrain the title + thumb + content to a readable column.
   The block editor's is-layout-constrained already pins direct children
   via wp-container-* classes, but their max-width tokens come from
   theme.json. Force a sensible cap regardless. */
.x-page-main > .x-post-title,
.x-page-main > .x-post-thumb,
.x-page-main > .x-post-content {
	max-width: 880px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---- Title ---- */
.x-page-main > .x-post-title {
	margin-top: 0 !important;
	margin-bottom: 1.5rem !important;
	/* .x-post-title from style.css already sets font-family, size, color */
}

/* ---- Featured image (floats right, small inset like .x-post-photo) ---- */
.x-page-main > .x-post-thumb.wp-block-post-featured-image {
	float: right;
	width: 40%;
	max-width: 360px;
	min-width: 220px;
	margin: 0.25rem 0 1.25rem 1.875rem;
	padding: 0;
	border: 1px solid var(--sjc-rule);
	border-radius: 4px;
	overflow: hidden;
	background:
		repeating-linear-gradient(135deg,
			rgba(14,36,68,0.05) 0 8px,
			rgba(14,36,68,0.02) 8px 16px),
		var(--sjc-cream-2);
	box-shadow: 0 6px 20px -12px rgba(14,36,68,0.18);
	/* aspect-ratio comes from the inline style WP emits (4/3) */
}
.x-page-main > .x-post-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* If the featured image is the "no-thumbnail" placeholder, fade the
   stripe pattern through (the placeholder PNG already shows "NO IMAGE").
   Nothing to do — let it render. */

/* ---- Body content: clear after the floated image, full-width images ---- */
.x-page-main > .x-post-content {
	clear: none; /* let first paragraphs wrap around the floated thumb */
}

/* In-content figures (full-width images placed inline in page body) need
   to clear the floated featured thumb so they don't sit beside it, and
   should run edge-to-edge of the content column. */
.x-page-main .x-post-content > .wp-block-image {
	clear: both;
	margin: 1.75rem 0;
}
.x-page-main .x-post-content > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	border: 1px solid var(--sjc-rule);
}

/* Lists rendered as bare paragraphs (e.g. "Officers:" + "Chair" + "Vice
   Chair" + "Treasurer") read better with tighter spacing — the editor
   emitted them as separate <p>, so style consecutive short paragraphs
   with reduced bottom margin. Optional polish — comment out if undesired. */
.x-page-main .x-post-content > p {
	margin-bottom: 1.25rem;
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
	body main.wp-block-group.x-page-main {
		padding-top: 2rem !important;
		padding-bottom: 3rem !important;
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}
	.x-page-main > .x-post-thumb.wp-block-post-featured-image {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 1.5rem;
	}
}

/* =========================================================================
   Patch: drop the pushpin from the featured flyer + make it clickable.

   Append to style.css. This OVERRIDES the earlier .x-featured-flyer-pin
   rules and the :has(:only-child) collapse logic in style-3da3e312.css.

   - Hides any leftover pushpin element if the markup still has it.
   - Updates the auto-collapse to fire when the <p> is empty (no flyer
     was rendered), instead of looking for a pin-only-child.
   - Styles the new <a class="x-featured-flyer-link"> wrapper that
     functions.php now emits around the <img>.
   ========================================================================= */

/* Hide pushpin if any cached/legacy markup still emits it */
.x-featured-flyer-pin { display: none !important; }

/* New collapse rule: hide the wrap when the shortcode returned nothing
   (no <a>, no <img>) — i.e. the <p> is empty. */
.x-featured-flyer-wrap:empty { display: none; }

/* Hide the wrap when only whitespace remains (some block parsers leave
   a stray space). :has() lets us also hide if the only child is the
   shortcode's empty span. */
.x-featured-flyer-wrap:not(:has(img)):not(:has(a)) { display: none; }

/* Anchor wrapper around the flyer — block-level, no underline, inherits
   the rotate/shadow card from .x-featured-flyer-wrap. */
.x-featured-flyer-link {
	display: block;
	line-height: 0;
	text-decoration: none;
	border: 0;
	cursor: zoom-in;
}
.x-featured-flyer-link img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	transition: transform 0.2s ease;
}
.x-featured-flyer-link:hover img {
	/* subtle pop-out on hover to signal it's clickable */
	transform: scale(1.01);
}
.x-featured-flyer-link:focus-visible {
	outline: 2px solid var(--sjc-crimson);
	outline-offset: 4px;
}

/* If the original .x-featured-grid:has(... pin :only-child) collapse
   from style-3da3e312.css is still in cache, this matches the new
   empty-state condition: collapse the grid to a single column when the
   flyer wrap has no img/anchor inside it. */
.x-featured-grid:has(.x-featured-flyer-wrap:not(:has(img)):not(:has(a))) {
	grid-template-columns: 1fr;
	max-width: 880px;
}

/* =========================================================================
   Click-to-zoom on post-body event flyers.
   functions.php wraps <img class="rlc-event-flyer"> in
   <a class="rlc-event-flyer-link"> via the_content filter.
   ========================================================================= */

.x-post-content .rlc-event-flyer-link {
	display: block;
	line-height: 0;
	text-decoration: none;
	border: 0;
	cursor: zoom-in;
	margin: 2rem auto;
	max-width: 460px;
	clear: both;
}
.x-post-content .rlc-event-flyer-link img.rlc-event-flyer {
	margin: 0; /* anchor handles outer spacing */
}
.x-post-content .rlc-event-flyer-link:hover img.rlc-event-flyer {
	transform: scale(1.01);
}
.x-post-content .rlc-event-flyer-link:focus-visible {
	outline: 2px solid var(--sjc-crimson);
	outline-offset: 4px;
}

/* Make sure the existing img.rlc-event-flyer rule also applies to the
   wrapped variant (same shadow card). Add this selector to the existing
   rule, or duplicate the declarations: */
.x-post-content .rlc-event-flyer-link img.rlc-event-flyer {
	display: block;
	max-width: 460px;
	width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow:
		0 24px 48px -20px rgba(14,36,68,0.35),
		0 4px 12px -6px rgba(14,36,68,0.15);
	border: 1px solid var(--sjc-rule);
	background: var(--sjc-cream-2);
	transition: transform 0.2s ease;
}

/* Mobile */
@media (max-width: 720px) {
	.x-post-content .rlc-event-flyer-link { max-width: 100%; }
}

/* =========================================================================
   Sticky header — pin the cream brand row (logo + primary nav + Join CTA)
   to the top of the viewport on scroll. The crimson utility bar slides
   off naturally above the viewport.

   Why we sticky the outer <header class="wp-block-template-part"> instead
   of .x-rlc-header or .x-brand-row-wrap: position: sticky only sticks
   within its containing block. Both .x-rlc-header (inner) and
   .x-brand-row-wrap have parents that are exactly their own height, so
   they have nowhere to stick and scroll away with their parent. The
   outer template-part wrapper is a direct child of .wp-site-blocks
   (full document height), so it has the entire page-scroll range to
   stick within.

   The negative top offset equals the top bar's height — when the user
   scrolls past the top bar, the outer header sticks at top: -2.5rem,
   pushing the crimson bar above the viewport and pinning the brand row
   at top: 0. We force a deterministic top-bar height so the math lands
   exactly on the brand row's top edge.
   ========================================================================= */
header.wp-block-template-part {
	--rlc-top-bar-h: 2.5rem;
	position: sticky;
	top: calc(-1 * var(--rlc-top-bar-h));
	z-index: 1000;
}

header.x-rlc-header .x-top-bar {
	min-height: var(--rlc-top-bar-h, 2.5rem);
	box-sizing: border-box;
}

/* Strong drop shadow under the pinned brand row so it reads as a
   floating bar against the matching cream page background. */
header .x-brand-row-wrap {
	box-shadow: 0 6px 14px -4px rgba(14, 36, 68, 0.35),
	            0 2px 4px -1px rgba(14, 36, 68, 0.2);
}

/* On narrow screens the top bar wraps to two rows (see the
   `@media (max-width: 600px)` block earlier in this file). Bump the
   reserved height so the brand row still lands cleanly at top: 0. */
@media (max-width: 600px) {
	header.wp-block-template-part {
		--rlc-top-bar-h: 5rem;
	}
}

/* =========================================================================
   v0.4.1 — Compact hero mode

   Triggered by `body.rlc-hero-compact`, which functions.php stamps on
   <body> when the "Compact hero mode" checkbox is on in RLC Settings.

   Effect: collapses the home-page hero down to just the Next Meeting
   card, centered horizontally. Hides the headline ("The Voice of
   Liberty…"), the sub-paragraph, and both Hero CTAs (JOIN THE RLC /
   NEXT MEETING). Keeps the hero background image + gradient + grain
   overlay intact, just at a reduced height.

   Append this block to wp-content/themes/RLC-wordpress-theme-main/style.css
   (the same file the README/v0.3.0 redesign block already lives in).
   ========================================================================= */

/* ---- 1. Hide the marketing column entirely ---- */
/* The hero's left column is the headline + sub-paragraph + CTAs row.
   We don't have a single wrapper around all three in home.html (they're
   sibling blocks), so we target each by its existing class. We also
   hide every direct paragraph child of .x-hero-inner that isn't the
   Next Meeting card — covers cases where the sub-paragraph in home.html
   is just a bare <p> without the .x-hero-sub class. */
body.rlc-hero-compact .x-hero .x-hero-h1,
body.rlc-hero-compact .x-hero .x-hero-sub,
body.rlc-hero-compact .x-hero .x-hero-tagline,
body.rlc-hero-compact .x-hero .x-hero-ctas,
body.rlc-hero-compact .x-hero-inner > p,
body.rlc-hero-compact .x-hero-inner > h1,
body.rlc-hero-compact .x-hero-inner > h2,
body.rlc-hero-compact .x-hero-inner > .wp-block-buttons,
body.rlc-hero-compact .x-hero-inner > .wp-block-group:not(.x-next-meeting),
body.rlc-hero-compact .x-hero-inner > div:not(.x-next-meeting):not(:has(.x-next-meeting)) {
	display: none !important;
}

/* ---- 2. Re-flow the hero grid as a single column ---- */
/* The default .x-hero-inner is a 2-col grid (1.2fr | 1fr). With the
   left column hidden, we collapse to one column so the Next Meeting
   card centers in the available width instead of clinging to the
   right rail. min-height is dropped so the hero shrinks to fit
   whatever the card needs (plus our reduced vertical padding). */
body.rlc-hero-compact .x-hero {
	min-height: 0;
}
body.rlc-hero-compact .x-hero-inner {
	grid-template-columns: 1fr;
	padding-top: 3rem;
	padding-bottom: 3rem;
	gap: 0;
}

/* ---- 3. Center + size the Next Meeting card ---- */
/* The card is `.x-next-meeting`. In standard mode it's right-rail and
   has flexible width; in compact mode we pin it to a comfortable
   reading width and put it dead-center. justify-self handles the
   horizontal centering inside the now-single-column grid track. */
body.rlc-hero-compact .x-hero-inner .x-next-meeting {
	width: 100%;
	max-width: 38rem;        /* ~608px — keeps the card readable on wide screens */
	justify-self: center;
	margin: 0 auto;
}

/* ---- 4. Graceful fallback when no upcoming meeting exists ---- */
/* The render_block filter in functions.php strips the .x-next-meeting
   block when rlc_get_next_meeting() returns null. With everything else
   hidden, that would leave an empty hero band — so we collapse it to
   the bare minimum (a thin tinted strip) and add a small sentinel
   message so the page doesn't look broken.

   Detected via :has(): the .x-hero with no .x-next-meeting child is
   the empty case. Browsers without :has() (~5% globally) just see an
   empty short hero, which is still acceptable. */
body.rlc-hero-compact .x-hero:not(:has(.x-next-meeting)) {
	min-height: 0;
}
body.rlc-hero-compact .x-hero:not(:has(.x-next-meeting)) .x-hero-inner {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/* ---- 5. Responsive: tighten the padding further on small screens ---- */
@media (max-width: 640px) {
	body.rlc-hero-compact .x-hero-inner {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	body.rlc-hero-compact .x-hero-inner .x-next-meeting {
		padding: 1.375rem;
	}
}