/* =========================================================================
   Base layer

   The brand stylesheet (theme.css) was written on top of a WordPress block
   theme, so it assumed a page reset, a button, and a layout container it
   never had to declare. This file supplies exactly those, and nothing more.
   It loads BEFORE theme.css so every brand rule still wins.

   Fonts are linked from the document head, not imported here, so they start
   downloading without waiting for this file to parse.
   ========================================================================= */

/* Brand palette. Every colour in theme.css resolves through one of these, so
   a chapter that wants a different accent changes it here and nowhere else.
   The `sjc` prefix is the name the original theme used; it is kept so the
   ported rules did not all have to be rewritten. */
: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;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: #f7f3ed;
	color: #1a2a44;
	font-family: Poppins, 'Inter', system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: #8b1a1a;
}

a:hover {
	color: #6e1414;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
	line-height: 1.2;
	font-weight: 700;
}

p,
ul,
ol {
	margin: 0 0 1em;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid #e3dcd0;
	margin: 2rem 0;
}

/* -------------------------------------------------------------------------
   Full-bleed sections

   Every brand section carries its own `*-inner` wrapper capped at 1280px, so
   the outer element is simply allowed to run edge to edge.
   ------------------------------------------------------------------------- */

main {
	display: block;
	width: 100%;
}

.full {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* -------------------------------------------------------------------------
   Buttons

   `.btn-wrap` stands in for the block editor's button wrapper and `.btn` for
   its link, because the brand rules target that pair by name. Keeping the
   two-element shape costs one span and saves rewriting 40 selectors.
   ------------------------------------------------------------------------- */

.btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.btn-wrap {
	display: inline-block;
}

.btn {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 4px;
	background-color: #8b1a1a;
	color: #ffffff;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
	background-color: #6e1414;
	color: #ffffff;
	text-decoration: none;
}

/* A button inside an article, such as a meeting's RSVP button, keeps its own
   colours. The article's link rule would otherwise colour its text crimson,
   the same as the button. */
.x-post-content a.btn,
.x-post-content a.btn:hover {
	color: #ffffff;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Navigation

   A plain list the brand rules dress as navy uppercase pills. The mobile
   toggle is a checkbox so the menu opens with no JavaScript at all.
   ------------------------------------------------------------------------- */

.nav-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-link {
	display: inline-block;
	text-decoration: none;
}

.nav-toggle,
.nav-toggle-label {
	display: none;
}

.social {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.social-item a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.social-item svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* -------------------------------------------------------------------------
   Screen-reader-only text and skip link
   ------------------------------------------------------------------------- */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background: #0e2444;
	color: #ffffff;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 2px solid #8b1a1a;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Mobile navigation

   Below 980px the primary menu collapses behind a hamburger. The checkbox
   that drives it lives next to the label in the header markup.
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.nav-toggle-label {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		width: 34px;
		height: 34px;
		padding: 6px 4px;
		cursor: pointer;
	}

	.nav-toggle-label span {
		display: block;
		height: 2px;
		background: #0e2444;
		border-radius: 2px;
	}

	.nav-list {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem 1.5rem 1rem;
		background: #f7f3ed;
		border-bottom: 1px solid #e3dcd0;
		box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
	}

	/* The list sits inside <nav>, which is the checkbox's sibling, so the
	   match has to go through it. A plain `~ .nav-list` selects nothing. */
	.nav-toggle:checked ~ .x-primary-menu .nav-list {
		display: flex;
	}

	.x-brand-row-wrap {
		position: relative;
	}
}

/* -------------------------------------------------------------------------
   Structural layout

   WordPress generated these from each block's `layout` attribute and emitted
   `is-layout-flex` / `is-layout-grid` classes to carry them. Those classes
   went with the block editor, so the arrangements they described are
   declared here against the brand class names instead.

   Only containers are listed. Anything about how a container LOOKS stays in
   theme.css, which loads after this file and therefore still wins.
   ------------------------------------------------------------------------- */

/* Header row 1: title and tagline left, social icons right. */
.x-top-bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.x-top-left,
.x-top-right {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

/* Header row 2: brand cluster left, nav and CTA right. */
.x-brand-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

/* When the header row runs out of room, something has to give. It must not
   be the Join button. A shrinking button breaks its own words across three
   lines and stops looking like a button at all, so it is fixed at the width
   its label needs and the menu absorbs the squeeze by wrapping to a second
   line instead. */
.x-anchor-button {
	flex: 0 0 auto;
}

.x-anchor-button .btn {
	white-space: nowrap;
}

.x-brand-text {
	display: flex;
	flex-direction: column;
}

/* Section headers: kicker left, "view all" link right. Only the two-part
   form goes side by side. A band heading is kicker above title, which is
   ordinary block flow. */
.x-section-head:has(> .x-section-head-left),
.x-featured-head,
.x-footer-bottom,
.x-post-crumb-inner,
.x-side-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

/* Column sets: the footer's four, and the article/sidebar pair. */
.cols {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.col {
	flex: 1 1 0;
	min-width: 0;
}

.x-footer-cols > .x-footer-col-brand {
	flex: 0 1 34%;
}

.x-post-columns > .x-post-article {
	flex: 1 1 62%;
}

.x-post-columns > .x-post-side {
	flex: 0 1 32%;
}

/* Card grids. */
.x-news-grid,
.x-endorse-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
}

/* Endorsements run three across, as the query loop on the WordPress site did,
   on the endorsements page and in the home band alike. A card stays one third
   wide however many there are. Narrower screens drop to two and one in
   theme.css. */
.x-endorse-grid {
	grid-template-columns: repeat(3, 1fr);
}

.x-endorse-query .post-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.x-involve-inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

/* The meetings calendar: a date block beside the details. */
.x-meet-row {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--sjc-rule);
}

.x-meet-when {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 4.5rem;
	padding: 0.5rem 0;
	background: var(--sjc-navy);
	color: #ffffff;
	border-radius: 4px;
	font-family: 'Inter', system-ui, sans-serif;
	line-height: 1.1;
}

.x-meet-mon {
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	font-weight: 600;
	opacity: 0.85;
}

.x-meet-day {
	font-size: 1.75rem;
	font-weight: 700;
}

.x-meet-yr {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	opacity: 0.7;
}

.x-meet-body {
	min-width: 0;
}

.x-meet-title {
	font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
	font-size: 1.25rem;
	margin: 0 0 0.25rem;
}

.x-meet-title a {
	color: var(--sjc-navy);
	text-decoration: none;
}

.x-meet-title a:hover {
	color: var(--sjc-crimson);
}

.x-meet-meta {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sjc-muted);
	margin: 0 0 0.4rem;
}

.x-meet-excerpt {
	margin: 0;
	color: var(--sjc-navy-ink);
}

.x-meet-row.is-past {
	opacity: 0.72;
}

.x-meet-row.is-past .x-meet-when {
	background: var(--sjc-muted);
}

.x-meet-section {
	margin: 2.5rem 0;
}

/* Single meeting: flyer beside the details card. */
.x-event-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
	margin: 2rem 0;
}

.x-event-grid:has(> .x-event-details:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.x-event-flyer img {
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.x-event-card {
	background: #ffffff;
	border: 1px solid var(--sjc-rule);
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.x-event-row {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 0.75rem;
	margin: 0 0 0.6rem;
}

.x-event-row:last-child {
	margin-bottom: 0;
}

.x-event-lbl {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
	padding-top: 0.2rem;
}

.x-event-map {
	display: block;
	font-size: 0.875rem;
	margin-top: 0.2rem;
}

.x-event-note {
	color: var(--sjc-muted);
	font-style: italic;
}

.x-event-back {
	margin-top: 2.5rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.x-event-back a,
.x-news-empty a {
	text-decoration: none;
}

.x-news-empty {
	padding: 2.5rem 0 4rem;
	color: var(--sjc-muted);
	font-size: 1.05rem;
}

/* Archive pagination. */
.x-news-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 3rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sjc-rule);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.x-news-pagination a {
	text-decoration: none;
	font-weight: 600;
}

.x-news-pagination .pagination-numbers {
	color: var(--sjc-muted);
}

/* The standalone search form on /search/. */
.x-search-form {
	display: flex;
	gap: 0.5rem;
	max-width: 32rem;
	margin: 0 0 2.5rem;
}

.x-search-form .search-input {
	flex: 1 1 auto;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--sjc-rule);
	border-radius: 4px;
	background: #ffffff;
	font-size: 1rem;
}

.x-search-form .search-button {
	padding: 0.7rem 1.25rem;
	border: 0;
	border-radius: 4px;
	background: var(--sjc-crimson);
	color: #ffffff;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

@media (max-width: 980px) {
	.x-involve-inner {
		grid-template-columns: 1fr;
	}

	.x-event-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.x-top-bar {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.x-meet-row {
		gap: 1rem;
	}
}

/* -------------------------------------------------------------------------
   Section spacing and palette

   Two more things WordPress supplied from outside style.css:

   1. Section padding, which the block editor wrote as a `style` attribute on
      each group. Those attributes went with the block markup, so the values
      are restated here, copied from the original templates.
   2. The palette classes (`has-sidebar-background-color` and friends), which
      WordPress generated into its own global stylesheet from theme.json.
      Only three were ever used, and they are applied directly to the
      elements that used them.

   The `.x-side` sidebar is the clearest case of the second: it carried white
   text from one palette class and a navy background from another, so without
   these rules it rendered white on nothing.
   ------------------------------------------------------------------------- */

.x-top-bar {
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
}

.x-brand-row-wrap {
	padding: 0.75rem 2rem;
}

.x-featured-event {
	padding: 4rem 2rem 5rem;
}

.x-endorse {
	padding: 4.5rem 2rem 5rem;
}

.x-news {
	padding: 4.5rem 2rem 6rem;
}

.x-involve {
	padding: 4.5rem 2rem;
}

.x-rlc-footer {
	padding: 3.5rem 2rem 1.75rem;
}

.x-news-main .x-news-inner,
.x-event-main .x-post-inner {
	padding: 3rem 2rem 5rem;
}

.x-page-main .x-post-inner {
	padding: 3rem 2rem 5rem;
	max-width: 1280px;
	margin: 0 auto;
}

.x-page-main .x-post-article {
	max-width: 780px;
}

/* The sidebar: navy card, white text, its own padding and corner radius. */
.x-side {
	background-color: var(--sjc-navy);
	color: #ffffff;
	border-radius: 6px;
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.x-side > * {
	margin: 0;
}

/* The breadcrumb strip above a post. */
.x-post-crumb {
	background-color: var(--sjc-cream-2);
}

/* WordPress laid these rows out with its own flex classes. The ported
   stylesheet keeps the colours and spacing but not the layout, so the rows
   are restated here. Without them each crumb would sit on its own line. */
.x-post-crumb-left,
.x-post-crumb-right,
.x-post-eyebrow,
.x-post-byline,
.x-byline-published,
.x-byline-author {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}

.x-post-crumb-left > *,
.x-post-crumb-right > *,
.x-post-eyebrow > *,
.x-post-byline > * {
	margin: 0;
}

/* Title above date in each sidebar row, for the same reason. */
.x-side-item-body {
	display: flex;
	flex-direction: column;
}

/* A band heading sits closer to its tiles than a page heading does. Carries
   the specificity to beat the plain `.x-section-head` rule in theme.css. */
.x-election-band .x-endorse-head {
	margin-bottom: 1.5rem;
	padding-bottom: 0.875rem;
}

.page-bg {
	background-color: var(--sjc-cream);
}

@media (max-width: 640px) {
	.x-featured-event,
	.x-endorse,
	.x-news,
	.x-involve,
	.x-rlc-footer,
	.x-news-main .x-news-inner,
	.x-page-main .x-post-inner,
	.x-event-main .x-post-inner {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.x-brand-row-wrap {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
}

/* A chapter with no logo uploaded still needs a way back from a release. */
.x-release-masthead {
	margin: 0 0 1rem;
	text-align: center;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 600;
}

.x-release-masthead a {
	color: var(--sjc-navy);
	text-decoration: none;
}

/* =========================================================================
   Forms and the calendar inside page content

   The brand stylesheet dresses the sign-up for the dark hero: white labels,
   translucent inputs. Dropped into a page it would be white on cream, which
   is what the first Contact page looked like. These rules restate the same
   design against a light background.
   ========================================================================= */

.x-signup-form--inline {
	max-width: 34rem;
	margin: 1.5rem 0 2rem;
}

.x-signup-form--inline .x-signup-field {
	margin: 0 0 1rem;
}

.x-signup-form--inline .x-signup-field label {
	display: block;
	margin: 0 0 0.35rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sjc-crimson);
}

.x-signup-form--inline .x-signup-field input {
	display: block;
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--sjc-rule);
	border-radius: 4px;
	background: #ffffff;
	color: var(--sjc-navy-ink);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.95rem;
}

.x-signup-form--inline .x-signup-field input:focus {
	outline: none;
	border-color: var(--sjc-crimson);
	box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.12);
}

.x-signup-form--inline .x-signup-btn {
	display: inline-block;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--sjc-crimson-deep);
	border-radius: 4px;
	background: var(--sjc-crimson);
	color: #ffffff;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.x-signup-form--inline .x-signup-btn:hover {
	background: var(--sjc-crimson-deep);
}

/* The Contact page opens on a one-line note, which a drop cap overwhelms. */
.x-page-contact .x-post-content > p:first-of-type::first-letter {
	float: none;
	margin: 0;
	font: inherit;
	color: inherit;
}

/* The Contact form is the home page's sign-up panel set on the page: the
   same navy, tag, title, labels, fields and button. There is no hero photo
   behind it, so the panel is solid rather than see-through, and a red top
   edge ties it to the cards elsewhere on the site. It clears the page's
   picture, which floats beside the text above it. */
.x-contact-card {
	clear: both;
	max-width: 46rem;
	margin: 2.5rem 0 1rem;
	padding: 2rem 2.25rem 2.25rem;
	background: var(--sjc-navy);
	border-top: 3px solid var(--sjc-crimson);
	border-radius: 6px;
	color: #ffffff;
	box-shadow: 0 30px 60px -28px rgba(14, 36, 68, 0.55);
}

/* The page's own heading rules reach the title, and the page's serif
   reaches the fine print, so both are set again here. */
.x-contact-card .x-signup-title {
	font-size: 1.75rem;
	color: #ffffff !important;
	margin: 0.25rem 0 0.75rem !important;
}

.x-contact-card .x-signup-fine {
	font-family: 'Inter', system-ui, sans-serif;
}

.x-contact-card .x-signup-intro {
	font-size: 0.9375rem;
	max-width: 34rem;
}

.x-contact-form {
	margin: 0;
}

.x-contact-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1rem;
}

.x-contact-card .x-signup-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.6875rem 0.875rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 4px;
	resize: vertical;
}

.x-contact-card .x-signup-field textarea:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.7);
	background: rgba(255, 255, 255, 0.12);
}

.x-contact-check {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0.25rem 0 1.25rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
}

.x-contact-check input {
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	accent-color: var(--sjc-crimson);
}

.x-contact-card .x-signup-btn {
	margin-top: 0;
}

.x-contact-card .x-signup-btn::after {
	content: "→";
}

.x-contact-card .x-signup-done {
	font-size: 1.125rem;
	max-width: 34rem;
}

.x-contact-note {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-left: 2px solid var(--sjc-crimson);
	background: rgba(255, 255, 255, 0.06);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 640px) {
	.x-contact-card {
		padding: 1.5rem 1.25rem 1.75rem;
	}
	.x-contact-row {
		grid-template-columns: 1fr;
	}
}

/* The fine print under the hero sign-up, and its light-background twin. */
.x-signup-fine {
	margin: 0.6rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
}

.x-signup-form--inline .x-signup-fine,
.x-signup-note {
	color: var(--sjc-muted);
}

/* -------------------------------------------------------------------------
   Month calendar
   ------------------------------------------------------------------------- */

.x-cal {
	margin: 1.5rem 0 2rem;
}

.x-cal-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}

.x-cal-nav {
	display: flex;
	align-items: stretch;
	gap: -1px;
}

.x-cal-step,
.x-cal-today {
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--sjc-rule);
	background: #ffffff;
	color: var(--sjc-crimson);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.8125rem;
	text-decoration: none;
}

.x-cal-step:hover,
.x-cal-today:hover {
	background: var(--sjc-cream-2);
}

.x-cal-today {
	margin: 0 -1px;
}

.x-cal-label {
	margin: 0;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--sjc-navy);
}

.x-cal-upcoming {
	padding: 0.9rem 1.1rem;
	background: var(--sjc-cream-2);
	border: 1px solid var(--sjc-rule);
	border-bottom: 0;
}

.x-cal-none {
	margin: 0;
	color: var(--sjc-muted);
}

.x-cal-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.x-cal-list li + li {
	margin-top: 0.5rem;
}

.x-cal-list a {
	font-weight: 600;
	text-decoration: none;
}

.x-cal-when {
	display: block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sjc-muted);
}

.x-cal-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	background: #ffffff;
}

.x-cal-grid th {
	padding: 0.5rem;
	border: 1px solid var(--sjc-rule);
	background: var(--sjc-cream-2);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sjc-muted);
}

.x-cal-grid td {
	height: 5.5rem;
	padding: 0.35rem;
	border: 1px solid var(--sjc-rule);
	vertical-align: top;
}

.x-cal-day {
	display: block;
	text-align: right;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.75rem;
	color: var(--sjc-muted);
}

.x-cal-grid td.is-outside {
	background: #faf9f7;
}

.x-cal-grid td.is-outside .x-cal-day {
	opacity: 0.45;
}

.x-cal-grid td.is-today {
	background: #fdf8ec;
}

.x-cal-grid td.is-today .x-cal-day {
	color: var(--sjc-crimson);
	font-weight: 700;
}

/* A meeting title can run to a dozen words. Clamped to three lines so one
   long one cannot stretch the whole row; the full title is on its own page
   and in the list above the grid. */
/* The chip carries its own colours. The selector is heavier than it looks
   because the calendar sits inside page content, where `.x-post-content a`
   would otherwise paint the text crimson on a crimson chip. */
.x-cal a.x-cal-event {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.25rem;
	padding: 0.2rem 0.35rem;
	border-radius: 3px;
	background: var(--sjc-crimson);
	color: #ffffff;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.7rem;
	line-height: 1.25;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.x-cal a.x-cal-event:hover {
	background: var(--sjc-crimson-deep);
	color: #ffffff;
}

/* A partner group's meeting: the same chip, outlined in navy instead of
   filled in crimson, so the chapter's own meetings stand out. It is a span
   when the group gave no address, so the shape is set here for both. */
.x-cal .x-cal-event.x-cal-event--partner {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.25rem;
	padding: 0.15rem 0.3rem;
	border: 1px solid var(--sjc-navy);
	border-radius: 3px;
	background: #ffffff;
	color: var(--sjc-navy);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.7rem;
	line-height: 1.25;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.x-cal a.x-cal-event.x-cal-event--partner:hover {
	background: var(--sjc-navy);
	color: #ffffff;
}

@media (max-width: 640px) {
	.x-cal .x-cal-event.x-cal-event--partner {
		display: block;
		font-size: 0;
		height: 6px;
		margin-top: 0.2rem;
		padding: 0;
	}
}

/* A phone gets the list of what is coming up instead of the month grid. A
   partner meeting's date is outlined rather than filled, as on the grid. */
.x-cal-agenda {
	display: none;
}

.x-cal-agenda .x-meet-row.is-partner .x-meet-when {
	background: transparent;
	border: 1px solid var(--sjc-navy);
	color: var(--sjc-navy);
}

/* The calendar sits in a page's body, whose links are crimson. The titles
   stay navy, as on the Meetings page. */
.post-body .x-cal-agenda .x-meet-title a {
	color: var(--sjc-navy);
	text-decoration: none;
}

.post-body .x-cal-agenda .x-meet-title a:hover {
	color: var(--sjc-crimson);
}

.x-cal-agenda .x-meet-excerpt a {
	color: var(--sjc-crimson);
}

@media (max-width: 640px) {
	.x-cal-head,
	.x-cal-upcoming,
	.x-cal-grid {
		display: none;
	}

	.x-cal-agenda {
		display: block;
		border-top: 1px solid var(--sjc-rule);
	}
}

/* Columns written into an article, carried over from WordPress, stack on a
   phone. An empty one takes no room. */
@media (max-width: 640px) {
	.post-body .cols {
		flex-direction: column;
		gap: 0;
	}

	.post-body .cols > .col {
		flex: none;
	}

	.post-body .cols > .col:empty {
		display: none;
	}
}

@media (max-width: 640px) {
	.x-cal-grid td {
		height: 3.5rem;
		padding: 0.2rem;
	}

	.x-cal a.x-cal-event {
		display: block;
		font-size: 0;
		height: 6px;
		margin-top: 0.2rem;
		padding: 0;
	}
}

/* Endorsements: one band per election. */
.x-election-band {
	margin-top: 3.5rem;
}

/* The page behind the bands is cream, so the cards are white to stand off
   it. On the home page they sit in a white band and keep their cream. */
.x-election-band .x-endorse-card {
	background: #ffffff;
}

/* A link to an election lands with its heading clear of the sticky header. */
.x-election-band [id] {
	scroll-margin-top: 9rem;
}

.x-election-band .x-guide-row {
	margin-bottom: 2rem;
}

/* Voter guide tile: an endorsement card with the guide on top at thumbnail
   size. The whole guide shows, letterboxed in a fixed frame, so tiles in a
   row line up whatever shape each guide was drawn at. */
.x-guide-card-img {
	margin: 0 0 1rem;
	aspect-ratio: 10 / 7;
	background: var(--sjc-cream-2);
	border: 1px solid var(--sjc-rule);
}

.x-guide-card-img a,
.x-guide-card-img img {
	display: block;
	width: 100%;
	height: 100%;
}

.x-guide-card-img img {
	object-fit: contain;
}

.x-guide-card .x-guide-card-endorsements {
	margin-top: 0.625rem !important;
}

.x-election-band .x-commentary-query {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* The share row on a release or a guide stays at the top of the window.
   It carries the page colour so the page scrolls out of sight beneath it.
   When it first locks in place it drops a little and settles back, which
   says it has stopped moving with the page. */
.x-release-share-wrap {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: 0.75rem 0;
	background: #f7f3ed;
}

.x-release-share-wrap.is-stuck {
	animation: x-share-settle 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* While the row is locked, the star rule from under the masthead hangs
   below the buttons, between them and the page scrolling beneath. It sits
   outside the flow, so the page does not jump when it appears. */
.x-release-share-wrap .x-share-rule {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0 !important;
	padding: 0.25rem 0 0.75rem;
	background: #f7f3ed;
}

.x-release-share-wrap.is-stuck .x-share-rule {
	display: flex;
}

@keyframes x-share-settle {
	from { transform: translateY(-0.75rem); }
	to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.x-release-share-wrap.is-stuck {
		animation: none;
	}
}

@media print {
	.x-release-share-wrap {
		position: static;
	}
}

/* The link under a voter guide to the endorsements it summarises. */
.x-guide-single-endorsements {
	margin: 1.5rem 0 0;
	text-align: center;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.x-guide-single-endorsements a {
	color: var(--sjc-crimson) !important;
	text-decoration: none;
}

.x-guide-single-endorsements a:hover {
	text-decoration: underline;
}

/* Five menu items, two of them three words long, need more room than the
   WordPress spacing left. The pills sit a little closer and the letters a
   little tighter, so the menu keeps to one line on a laptop screen. Below
   1280px wide it tightens once more before it has to wrap. The selectors
   carry an extra element because theme.css loads after this file. */
header .x-primary-menu .nav-item .nav-link {
	padding: 0.625rem 0.5625rem;
	letter-spacing: 0.07em;
}

/* A menu link to another site opens in a new tab, and says so with a small
   arrow after its label, in the top menu and the footer's copy of it. The
   selector character keeps iOS from drawing the arrow as an emoji. */
header .x-primary-menu .nav-link[target="_blank"]::after,
.x-footer-col-explore a[target="_blank"]::after {
	content: "\2197\FE0E";
	margin-left: 0.25em;
	font-size: 0.9em;
	letter-spacing: 0;
}

@media (min-width: 981px) and (max-width: 1279px) {
	header nav.x-primary-menu {
		font-size: 0.75rem;
	}
	header .x-primary-menu .nav-item .nav-link {
		padding: 0.5rem 0.5rem;
		letter-spacing: 0.06em;
	}
}