/*
Theme Name: Coos Indivisible
Theme URI: https://coosindivisible.org/
Description: Custom design for Indivisible of Coos County. Coastal-navy palette drawn from the organisation's roundel logo, DM Sans headings over Inter body text (both self-hosted by the parent theme), full-width hero bands, campaign cards and a fast, accessible reading layout. Built as a child of Twenty Twenty-Three so every template the parent ships remains available as a fallback.
Author: Indivisible of Coos County
Template: twentytwentythree
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coos-indivisible
Tags: block-theme, custom-colors, custom-logo, full-width-template, accessibility-ready
*/

/* ==========================================================================
   1. TOKENS
   One place for every colour, radius and shadow the design uses. The palette
   mirrors the logo: deep navy for authority, ocean/slate blues for the coast,
   a single brick red for anything the visitor should actually click.
   ========================================================================== */

:root {
	--ci-ink:        #0F2C59; /* logo navy - headings and body text      */
	--ci-ink-deep:   #08182F; /* near-black navy - footer, dark bands    */
	--ci-ocean:      #2E5C8A; /* mid blue - links, secondary accents     */
	--ci-slate:      #6B9AC4; /* light blue - borders, small details     */
	--ci-mist:       #EDF2F8; /* cool tint - alternating section bands   */
	--ci-brick:      #B83B3B; /* the logo's red - CTAs only              */
	--ci-brick-dark: #962E2E; /* CTA hover/active                        */
	--ci-sand:       #D4C4A8; /* logo sand - warm hairlines, highlights  */
	--ci-paper:      #FBF9F5; /* warm off-white page background          */
	--ci-white:      #ffffff;

	--ci-radius:    10px;
	--ci-radius-lg: 16px;
	--ci-shadow-sm: 0 1px 2px rgba(15, 44, 89, .06), 0 8px 24px -14px rgba(15, 44, 89, .25);
	--ci-shadow-md: 0 2px 4px rgba(15, 44, 89, .06), 0 18px 44px -20px rgba(15, 44, 89, .32);
	--ci-header-h:  4.75rem;
	--ci-ease:      cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

body {
	background-color: var(--ci-paper);
	color: var(--ci-ink);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Keep long headlines from colliding with the edges of narrow phones. */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p, li, figcaption, blockquote {
	text-wrap: pretty;
}

/* Comfortable reading measure for ordinary paragraphs. Blocks that want to be
   wider say so with alignwide/alignfull, so this only ever applies to text. */
.entry-content > p,
.wp-block-post-content > p {
	max-width: 68ch;
}

/* ==========================================================================
   3. LINKS AND BUTTONS
   ========================================================================== */

a {
	text-underline-offset: .18em;
	text-decoration-thickness: .075em;
	transition: color .15s var(--ci-ease);
}

a:hover,
a:focus-visible {
	color: var(--ci-brick);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ci-slate);
	outline-offset: 2px;
	border-radius: 4px;
}

.wp-block-button__link {
	transition: background-color .18s var(--ci-ease), transform .18s var(--ci-ease), box-shadow .18s var(--ci-ease);
	box-shadow: 0 1px 2px rgba(8, 24, 47, .18);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -8px rgba(184, 59, 59, .75);
}

/* Outline style: used on dark covers where a filled red button would shout. */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background-color: transparent;
	color: var(--ci-white);
	border: 2px solid rgba(255, 255, 255, .65);
	box-shadow: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
	background-color: var(--ci-white);
	color: var(--ci-ink) !important;
	border-color: var(--ci-white);
}

/* A quieter button for side-by-side pairs. */
.wp-block-button.is-style-ci-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--ci-ink);
	border: 2px solid var(--ci-slate);
	box-shadow: none;
}

.wp-block-button.is-style-ci-ghost .wp-block-button__link:hover {
	background-color: var(--ci-ink);
	border-color: var(--ci-ink);
	color: var(--ci-white);
}

/* ==========================================================================
   4. HEADER
   White, sticky, hairline underline. The logo rides at 52px so the roundel
   stays legible on a phone.
   ========================================================================== */

/* The frosted, semi-transparent panel is what makes the sticky header read as
   separate from the page once content scrolls underneath it - no JavaScript or
   scroll listener is needed for the effect.

   The blur deliberately lives on a pseudo-element rather than on .ci-header.
   `backdrop-filter` makes an element a containing block for its
   `position: fixed` descendants, and the mobile navigation overlay IS a fixed
   descendant - with the filter on the header itself, the open menu was clipped
   to the header's 76px height instead of covering the screen. The pseudo-
   element has no such descendants, so the frost is preserved and the overlay
   positions against the viewport as intended. */
.ci-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: transparent;
	border-bottom: 1px solid rgba(107, 154, 196, .32);
}

.ci-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(255, 255, 255, .93);
	backdrop-filter: saturate(150%) blur(10px);
	-webkit-backdrop-filter: saturate(150%) blur(10px);
	pointer-events: none;
}

body.admin-bar .ci-header {
	top: 32px;
}

.ci-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2vw, 2rem);
	min-height: var(--ci-header-h);
	flex-wrap: nowrap;
}

.ci-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex: 0 0 auto;
}

.ci-logo img,
.ci-brand .wp-block-site-logo img {
	width: auto;
	max-width: 3.25rem;
	height: auto;
	display: block;
}

/* The roundel already reads as a badge; a soft ring ties it to the header. */
.ci-brand .wp-block-site-logo a {
	display: inline-flex;
	border-radius: 50%;
	transition: transform .2s var(--ci-ease);
}

.ci-brand .wp-block-site-logo a:hover {
	transform: scale(1.04);
}

.ci-site-title,
.ci-site-title a {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--ci-ink);
	text-decoration: none;
	margin: 0;
}

.ci-site-title a:hover {
	color: var(--ci-brick);
}

.ci-nav-wrap {
	display: flex;
	align-items: center;
	gap: clamp(.5rem, 1.2vw, 1.25rem);
	flex: 1 1 auto;
	justify-content: flex-end;
	min-width: 0;
}

/* ---- primary navigation ---- */
.ci-nav .wp-block-navigation-item__content,
.ci-nav .wp-block-navigation-item__content:visited {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: .9375rem;
	font-weight: 600;
	color: var(--ci-ink);
	text-decoration: none;
	padding: .4em 0;
	position: relative;
}

.ci-nav .wp-block-navigation-item__content:hover,
.ci-nav .wp-block-navigation-item__content:focus {
	color: var(--ci-brick);
}

/* Underline on hover only, so the bar stays calm at rest. */
.ci-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background-color: var(--ci-brick);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .2s var(--ci-ease);
}

.ci-nav .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

/* The section the visitor is currently on gets the underline permanently. */
.ci-nav .current-menu-item > .wp-block-navigation-item__content::after,
.ci-nav .current_page_item > .wp-block-navigation-item__content::after,
.ci-nav .current_page_ancestor > .wp-block-navigation-item__content::after,
.ci-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.ci-nav .wp-block-navigation__container {
	gap: clamp(.75rem, 1.4vw, 1.4rem);
	flex-wrap: wrap;
	row-gap: .25rem;
}

/* Submenu: a white card, not the default transparent strip. */
.ci-nav .wp-block-navigation__submenu-container {
	background-color: var(--ci-white);
	border: 1px solid rgba(107, 154, 196, .3);
	border-radius: var(--ci-radius);
	box-shadow: var(--ci-shadow-md);
	padding: .5rem;
	min-width: 18rem;
	gap: .1rem;
}

.ci-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: .6rem .75rem;
	border-radius: 6px;
	font-weight: 500;
	font-size: .9375rem;
	line-height: 1.35;
	color: var(--ci-ink);
}

.ci-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--ci-mist);
	color: var(--ci-brick);
}

.ci-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

/* ---- mobile nav (core's responsive overlay) ---- */
/* Core's own rule for this element is five selectors deep
   (.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container
   .is-menu-open:not(.disable-default-overlay)) and paints it white, so a
   two-class rule loses and the overlay menu renders white-on-white. Match the
   selector and add !important: an unreadable phone menu is not a risk worth
   taking for tidier CSS. The nav block also carries overlayBackgroundColor /
   overlayTextColor, which is the supported way to set this. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--ci-ink-deep) !important;
	padding: 1.5rem;
}

/* The desktop nav is right-justified, and the overlay inherits that, which
   right-aligns every item in the phone menu. Left is what people expect inside
   a full-screen drawer, so the container is re-aligned here. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	/* !important: our rule won the justify-content but lost align-items to a core
	   declaration, which left every short item hugging the right edge. */
	align-items: flex-start !important;
	justify-content: flex-start !important;
	text-align: left;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited {
	color: var(--ci-white);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 1.25rem;
	font-weight: 600;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1rem;
	font-weight: 400;
	color: rgba(255, 255, 255, .82);
}

.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
	width: 1.5rem;
	height: 1.5rem;
}

.wp-block-navigation__responsive-container-open {
	color: var(--ci-ink);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--ci-white);
}

/* The header CTA disappears on phones - the overlay menu carries the link. */
@media (max-width: 900px) {
	/* Two classes deep so this outranks the core .wp-block-buttons{display:flex}
	   rule - same specificity, and core's stylesheet is printed after ours.
	   The overlay menu carries the sign-up link instead. */
	.ci-header .ci-header-cta {
		display: none;
	}
	.ci-site-title {
		font-size: 1rem;
	}
}

/* ==========================================================================
   5. HERO AND COLOUR BANDS
   ========================================================================== */

.ci-hero {
	position: relative;
	background-image: linear-gradient(150deg, #0F2C59 0%, #1B3F72 48%, #2E5C8A 100%);
	color: var(--ci-white);
	padding-top: clamp(3rem, 7vw, 6rem);
	padding-bottom: clamp(3rem, 7vw, 6rem);
	overflow: hidden;
}

/* Faint topographic-ish texture so the flat navy does not look like a default
   template panel. Pure CSS, so it costs no bytes and cannot 404. */
.ci-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(107, 154, 196, .35) 0, transparent 42%),
		radial-gradient(circle at 88% 82%, rgba(212, 196, 168, .18) 0, transparent 45%);
	pointer-events: none;
}

.ci-hero > * {
	position: relative;
	z-index: 1;
}

.ci-hero h1,
.ci-hero h2,
.ci-hero h3,
.ci-hero p,
.ci-hero .wp-block-heading {
	color: var(--ci-white);
}

.ci-hero .wp-block-buttons {
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

/* Small uppercase label that sits above a headline. Default colour is the mid
   blue so it stays legible on the light bands; on the navy hero and navy bands
   it switches to the warm sand from the logo, which is where sand has enough
   contrast to be read. */
.ci-eyebrow {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ci-ocean);
	margin: 0 0 .75rem;
}

.ci-hero .ci-eyebrow,
.ci-band-navy .ci-eyebrow,
.is-style-ci-band-navy .ci-eyebrow {
	color: var(--ci-sand);
}

.ci-lead {
	font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .9);
	max-width: 46ch;
}

/* The badge treatment for the logo when it is used large inside content. */
.ci-seal img {
	width: 100%;
	height: auto;
	max-width: 15rem;
	border-radius: 50%;
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8);
}

/* Neutral band used to separate two light sections. */
.ci-band {
	padding-top: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.ci-band-mist,
.is-style-ci-band-mist {
	background-color: var(--ci-mist);
}

.ci-band--paper {
	background-color: var(--ci-paper);
}

.ci-band-white {
	background-color: var(--ci-white);
}

.ci-band-navy,
.is-style-ci-band-navy {
	background-image: linear-gradient(180deg, #0F2C59 0%, #08182F 100%);
	color: var(--ci-white);
}

.ci-band-navy h1,
.ci-band-navy h2,
.ci-band-navy h3,
.ci-band-navy h4,
.ci-band-navy .wp-block-heading,
.ci-band-navy p,
.is-style-ci-band-navy h1,
.is-style-ci-band-navy h2,
.is-style-ci-band-navy h3,
.is-style-ci-band-navy h4,
.is-style-ci-band-navy .wp-block-heading,
.is-style-ci-band-navy p {
	color: var(--ci-white);
}

/* Section heading with a short red rule under it - a cheap way to give every
   section a recognisable signature. */
.ci-section-title {
	margin-bottom: 1.75rem;
}

.ci-section-title::after {
	content: "";
	display: block;
	width: 5rem;
	height: 4px;
	margin-top: .9rem;
	background-color: var(--ci-brick);
	border-radius: 2px;
}

.ci-section-title.has-text-align-center::after {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   6. CARDS
   Groups flagged with the "ci-card" class render as raised panels. This is
   what the homepage campaigns and the three pillars use.
   ========================================================================== */

.ci-card,
.is-style-ci-card {
	background-color: var(--ci-white);
	border: 1px solid rgba(107, 154, 196, .28);
	border-radius: var(--ci-radius-lg);
	padding: clamp(1.25rem, 2.4vw, 2rem);
	box-shadow: var(--ci-shadow-sm);
	height: 100%;
	transition: transform .2s var(--ci-ease), box-shadow .2s var(--ci-ease), border-color .2s var(--ci-ease);
}

.ci-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ci-shadow-md);
	border-color: rgba(107, 154, 196, .5);
}

.ci-card h3,
.ci-card h4 {
	margin-top: 0;
}

.ci-card p:last-child {
	margin-bottom: 0;
}

/* Card carrying a hanging accent bar, for the pillars. */
.ci-card-accent {
	border-top: 4px solid var(--ci-brick);
}

.ci-card-ocean {
	border-top: 4px solid var(--ci-ocean);
}

/* Keep one accent per card and make sure every one of them is actually
   visible on white. Sand was too close to the card to read as a border. */
.ci-card-slate {
	border-top: 4px solid var(--ci-slate);
}

/* A single big number or short label inside a card. */
.ci-card__kicker {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ci-ocean);
	margin: 0 0 .5rem;
}

/* ==========================================================================
   7. DETAIL STRIP
   The rallies / meetings / advocacy facts on the homepage.
   ========================================================================== */

.ci-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
}

.ci-fact {
	padding-left: 1rem;
	border-left: 3px solid var(--ci-slate);
}

.ci-fact dt,
.ci-fact__label {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ci-ocean);
	margin-bottom: .35rem;
}

.ci-fact dd,
.ci-fact__value {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--ci-ink);
}

@media (max-width: 782px) {
	.ci-facts {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   8. COVER BLOCKS
   The Resources page is built from cover blocks with no background image.
   Left alone they render as flat grey slabs; here they become cards.
   ========================================================================== */

.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)) {
	background-color: var(--ci-white);
	border: 1px solid rgba(107, 154, 196, .28);
	border-radius: var(--ci-radius-lg);
	padding: clamp(1.25rem, 2.4vw, 1.85rem);
	box-shadow: var(--ci-shadow-sm);
	min-height: 0;
	/* stretch, not flex-start: with flex-start the inner container only grew to
	   the height of its text, so buttons sat wherever the copy happened to end
	   and the row of cards had a jagged bottom edge. */
	align-items: stretch;
	transition: transform .2s var(--ci-ease), box-shadow .2s var(--ci-ease);
}

/* Lay each card out as a column and push the button block to the bottom, so
   every button in a grid row lines up no matter how long the description is. */
.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)) .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)) .wp-block-cover__inner-container > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)) .wp-block-buttons {
	margin-top: auto;
	padding-top: .75rem;
	/* The source page right-aligned one card's button and left-aligned the rest;
	   cards look tidier with one consistent side. */
	justify-content: flex-start !important;
	/* WordPress gives every child of a constrained layout
	   `margin-left/right: auto !important`, and auto margins take precedence over
	   align-items: stretch - so the button block shrank to fit and floated in the
	   middle. Zeroing them lets it fill the card and the button land on the same
	   left edge as the heading. */
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)):hover {
	transform: translateY(-3px);
	box-shadow: var(--ci-shadow-md);
}

.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)) .wp-block-cover__background {
	background: transparent !important;
	opacity: 1;
}

/* Card headings are capped deliberately. These covers carry a plain h2, and the
   global h2 size is tuned for a full-width hero - in a ~300px grid column it
   produced a nine-line heading and 900px-tall cards. */
.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)) .wp-block-heading {
	color: var(--ci-ink);
	margin-top: 0;
	font-size: clamp(1.125rem, 1.05rem + .4vw, 1.4375rem);
	line-height: 1.25;
}

/* Cover blocks set their text to white because they expect a photograph and a
   dark overlay. These have neither, so the paragraphs were rendering white on
   a white card - the text was there, invisible. Headings were handled above;
   this is the body copy. */
.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)) .wp-block-cover__inner-container,
.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)) p {
	color: var(--ci-ink);
}

.wp-block-cover:not(:has(.wp-block-cover__image-background, video.wp-block-cover__video-background)) .wp-block-button__link {
	font-size: .8125rem;
	padding: .8em 1.25em;
}

/* A grid group inside a page inherits the 44rem reading measure, which left the
   Resources cards 219px wide and over 1000px tall. Grids need the wide measure,
   and auto-fit lets three columns become two and then one as the screen
   narrows instead of staying squashed. */
.wp-block-post-content .is-layout-grid,
.entry-content .is-layout-grid {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto;
	margin-right: auto;
	/* 20rem minimum: at the wide measure that gives three columns of ~370px
	   on a desktop and folds to two, then one, on smaller screens. */
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--wp--preset--spacing--s);
}

/* Covers that DO have a photo keep the overlay but get rounded corners. */
.wp-block-cover:has(.wp-block-cover__image-background) {
	border-radius: var(--ci-radius-lg);
	overflow: hidden;
}

/* ==========================================================================
   9. FILE / DOWNLOAD BLOCKS
   Used on the Political Policies page for the PDFs.
   ========================================================================== */

/* Inline PDF previews are hidden on purpose. WordPress renders each one as a
   600px-tall <object>, which is a blank box on most phones, downloads the whole
   PDF to show it, and turned the Political Policies page into five stacked
   viewers. The download card underneath says the same thing in one line. */
.wp-block-file__embed {
	display: none !important;
}

.wp-block-file {
	background-color: var(--ci-white);
	border: 1px solid rgba(107, 154, 196, .3);
	border-radius: var(--ci-radius);
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	justify-content: space-between;
}

.wp-block-file a:not(.wp-block-file__button) {
	color: var(--ci-ink);
	text-decoration: none;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--dm-sans);
}

.wp-block-file a:not(.wp-block-file__button):hover {
	color: var(--ci-brick);
}

.wp-block-file__button {
	background-color: var(--ci-brick) !important;
	color: var(--ci-white) !important;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .7em 1.3em;
	text-decoration: none;
	transition: background-color .18s var(--ci-ease);
}

.wp-block-file__button:hover {
	background-color: var(--ci-brick-dark) !important;
	color: var(--ci-white) !important;
}

/* ==========================================================================
   10. LISTS AND TABLES
   ========================================================================== */

.entry-content ul,
.wp-block-post-content ul {
	padding-left: 1.25rem;
}

.entry-content li,
.wp-block-post-content li {
	margin-bottom: .4rem;
}

.entry-content li::marker,
.wp-block-post-content li::marker {
	color: var(--ci-brick);
}

/* Checklist-style list used in the link lists on nav-heavy pages. */
.ci-linklist {
	list-style: none;
	padding-left: 0 !important;
	margin: 0;
}

.ci-linklist li {
	margin-bottom: .55rem;
}

.ci-linklist a {
	font-weight: 600;
	text-decoration: none;
}

.ci-linklist a:hover {
	text-decoration: underline;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th {
	background-color: var(--ci-mist);
	color: var(--ci-ink);
	font-family: var(--wp--preset--font-family--dm-sans);
	text-align: left;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid rgba(107, 154, 196, .35);
	padding: .6rem .75rem;
}

/* ==========================================================================
   11. FORMS
   Includes the Kit (ConvertKit) embed on /subscribe/, which ships its own
   inline styles, so a few rules need !important to take effect.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	color: var(--ci-ink);
	background-color: var(--ci-white);
	border: 1.5px solid var(--ci-slate);
	border-radius: 8px;
	padding: .8rem .95rem;
	transition: border-color .15s var(--ci-ease), box-shadow .15s var(--ci-ease);
}

input::placeholder,
textarea::placeholder {
	color: #7b8aa1;
	opacity: 1;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ci-ocean);
	box-shadow: 0 0 0 3px rgba(46, 92, 138, .18);
	outline: none;
}

/* Kit's embed names its inputs .formkit-input and sets inline borders. */
.formkit-form .formkit-input,
.formkit-input {
	border: 1.5px solid var(--ci-slate) !important;
	border-radius: 8px !important;
	color: var(--ci-ink) !important;
	padding: .85rem 1rem !important;
	font-size: 1rem !important;
	background-color: var(--ci-white) !important;
	min-height: 3rem;
}

.formkit-form .formkit-input:focus {
	border-color: var(--ci-ocean) !important;
	box-shadow: 0 0 0 3px rgba(46, 92, 138, .18);
}

.formkit-form .formkit-submit {
	background-color: var(--ci-brick) !important;
	color: var(--ci-white) !important;
	border-radius: 8px !important;
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-weight: 700 !important;
	font-size: .9375rem !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 1rem 1.75rem !important;
	transition: background-color .18s var(--ci-ease);
}

.formkit-form .formkit-submit:hover {
	background-color: var(--ci-brick-dark) !important;
}

.formkit-form .seva-fields {
	gap: .75rem;
	flex-wrap: wrap;
}

.seva-form.formkit-form {
	max-width: 34rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.formkit-powered-by-convertkit-container {
	margin-top: .75rem !important;
}

/* ==========================================================================
   12. PAGE HEADER BAND
   Inner pages open with the page title on a misty band.
   ========================================================================== */

.ci-page-hero {
	background-color: var(--ci-mist);
	border-bottom: 1px solid rgba(107, 154, 196, .3);
	padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
	padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.ci-page-hero .wp-block-post-title,
.ci-page-hero h1 {
	margin: 0;
	font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
	color: var(--ci-ink);
}

.ci-page-hero p {
	margin: .6rem 0 0;
	color: var(--ci-ocean);
	max-width: 60ch;
}

/* ==========================================================================
   13. CONTENT LAYOUT
   ========================================================================== */

.ci-content-wrap {
	padding-top: clamp(2rem, 4.5vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* First heading in a page should not have a big gap above it. */
.ci-content-wrap > .wp-block-post-content > :first-child,
.entry-content > :first-child {
	margin-top: 0;
}

/* Two-column text sections used on "Who we are". */
.ci-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

@media (max-width: 860px) {
	.ci-split {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ==========================================================================
   14. BLOG / ARCHIVE / SEARCH
   ========================================================================== */

.wp-block-post-template {
	list-style: none;
	padding-left: 0;
	gap: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)) !important;
}

.wp-block-post-template > li {
	background-color: var(--ci-white);
	border: 1px solid rgba(107, 154, 196, .28);
	border-radius: var(--ci-radius-lg);
	overflow: hidden;
	box-shadow: var(--ci-shadow-sm);
	transition: transform .2s var(--ci-ease), box-shadow .2s var(--ci-ease);
	display: flex;
	flex-direction: column;
}

.wp-block-post-template > li:hover {
	transform: translateY(-3px);
	box-shadow: var(--ci-shadow-md);
}

.wp-block-post-template .wp-block-post-featured-image {
	margin: 0;
}

.wp-block-post-template .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	border-radius: 0;
}

.ci-postcard-body {
	padding: clamp(1rem, 2vw, 1.5rem);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1 1 auto;
}

.wp-block-post-title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.wp-block-post-title a {
	color: var(--ci-ink);
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--ci-brick);
}

.wp-block-post-date,
.wp-block-post-terms {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ci-ocean);
}

.wp-block-post-excerpt p {
	font-size: .9375rem;
	line-height: 1.6;
	color: #3d4f68;
	margin: 0;
}

.wp-block-query-pagination {
	margin-top: clamp(2rem, 4vw, 3rem);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-weight: 600;
}

.wp-block-query-pagination a {
	text-decoration: none;
}

/* "Nothing found" states, including the currently empty News page. */
.wp-block-query-no-results,
.ci-empty-state {
	background-color: var(--ci-mist);
	border: 1px dashed var(--ci-slate);
	border-radius: var(--ci-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
	color: var(--ci-ocean);
}

/* Single post / page reading layout. */
.ci-single-header {
	background-color: var(--ci-mist);
	border-bottom: 1px solid rgba(107, 154, 196, .3);
	padding-top: clamp(2rem, 5vw, 3.5rem);
	padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.ci-single-header .wp-block-post-title {
	font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3rem);
	max-width: 34ch;
}

.ci-single-featured {
	margin-top: 0;
}

.ci-single-featured img {
	border-radius: var(--ci-radius-lg);
	width: 100%;
	height: auto;
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.ci-footer {
	background-image: linear-gradient(180deg, #0F2C59 0%, #08182F 100%);
	color: rgba(255, 255, 255, .82);
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: 0;
}

.ci-footer h2,
.ci-footer h3,
.ci-footer h4,
.ci-footer .wp-block-heading,
.ci-footer p,
.ci-footer li {
	color: rgba(255, 255, 255, .84);
}

.ci-footer .ci-footer__heading {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ci-sand);
	margin: 0 0 1rem;
}

.ci-footer a {
	color: var(--ci-white);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
	transition: border-color .15s var(--ci-ease), color .15s var(--ci-ease);
}

.ci-footer a:hover {
	color: var(--ci-sand);
	border-bottom-color: var(--ci-sand);
}

.ci-footer .ci-footer__brand {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-bottom: 1rem;
}

.ci-footer .wp-block-site-logo img {
	width: 3.5rem;
	height: auto;
}

.ci-footer .ci-footer__name {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ci-white);
	line-height: 1.2;
	margin: 0;
}

.ci-footer .ci-footer__mission {
	font-size: .9375rem;
	line-height: 1.65;
	max-width: 34ch;
}

.ci-footer ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.ci-footer li {
	margin-bottom: .55rem;
	font-size: .9375rem;
}

.ci-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .16);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: space-between;
	align-items: center;
}

.ci-footer__bottom p {
	margin: 0;
	font-size: .875rem;
	color: rgba(255, 255, 255, .74);
}

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */

.ci-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background-color: var(--ci-brick);
	color: var(--ci-white);
	padding: .75rem 1.25rem;
	border-radius: 0 0 8px 0;
	font-weight: 700;
	text-decoration: none;
}

.ci-skip-link:focus {
	left: 0;
	color: var(--ci-white);
}

.ci-mt-0 {
	margin-top: 0 !important;
}

.ci-mb-0 {
	margin-bottom: 0 !important;
}

.ci-center {
	text-align: center;
}

/* The stray theme "Homepage" title that Twenty Twenty-Three renders before the
   front page content: the front page template omits it, but hide it defensively
   so an accidental template switch cannot put it back on the homepage. */
.home .ci-content-wrap .wp-block-post-title {
	display: none;
}

/* On a phone, side-by-side buttons leave both of them too narrow to read a
   long label comfortably. Stacked and full width is the touch-screen norm. */
@media (max-width: 560px) {
	.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.wp-block-button,
	.wp-block-button__link {
		width: 100%;
		text-align: center;
	}
	.wp-block-buttons > .wp-block-button + .wp-block-button {
		margin-top: .25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.ci-header,
	.ci-footer,
	.wp-block-navigation,
	.wp-block-buttons {
		display: none !important;
	}
	body {
		background: #fff;
		color: #000;
	}
}