/*
Theme Name: Indivisible North Pinellas
Theme URI: https://indivisiblenorthpinellas.org
Description: Custom block theme for Indivisible North Pinellas - grassroots civic engagement in Dunedin, FL.
Version: 3.10.97
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
Author: Catalyst Partners
Author URI: https://conversionisourgame.com
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inp-theme
Tags: block-patterns, full-site-editing, custom-colors, custom-logo
*/

/* ============================================
   INDIVISIBLE NORTH PINELLAS — v3
   Apple-clean modern design
   Inspired by indivisible.org
   ============================================ */

/* --- CSS Variables --- */

:root {
  --navy: #194379;
  --navy-deep: #0f2d54;
  --navy-light: #1e5294;
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --white: #ffffff;
  --text-primary: #1d1d1f;
  --text-dark: #1d1d1f;
  --text-body: #1d1d1f;
  --text-muted: #6e6e73;
  --text-light: #f5f5f7;
  --red: #ee2324;
  --red-hover: #d41f20;
  --cyan: #57c6d7;
  --cyan-light: #7dd8e5;
  --success: #34c759;
  --border: #d2d2d7;
  --border-dark: rgba(255, 255, 255, 0.12);
  --border-light: #d2d2d7;
  --font-display:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Base & Reset --- */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg) !important;
  color: var(--text-body) !important;
  font-size: 17px;
  /* overflow-x: clip removed in v3.10.46 (#31). Now scoped to .inp-ticker
   * only — see ticker section. Sticky nav (.inp-header position:sticky)
   * still works because no ancestor sets overflow that creates a new
   * containing block. */
}

::selection {
  background: var(--cyan);
  color: var(--white);
}

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

/* --- Meeting Banner --- */

.inp-meeting-banner {
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.85) !important;
  background: var(--navy) !important;
  position: relative;
  z-index: 100;
  --wp--style--block-gap: 0 !important;
}

.inp-meeting-banner.is-layout-flow > *,
.inp-meeting-banner.is-layout-flow > * + *,
.inp-meeting-banner.wp-block-group-is-layout-flow > *,
.inp-meeting-banner.wp-block-group-is-layout-flow > * + * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

.inp-meeting-banner p {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
}

.inp-meeting-banner strong {
  color: var(--cyan) !important;
  font-weight: 700;
}

.inp-meeting-banner a {
  color: var(--cyan-light) !important;
  text-decoration: none !important;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.inp-meeting-banner a:hover {
  color: #9be5ef !important;
  border-bottom-color: #9be5ef;
}

/* --- Site Header (Frosted Glass Nav) --- */

/* The <header class="wp-block-template-part"> is .inp-header's parent
   and acts as its sticky containing block, so the nav scrolls away
   with the template-part. display:contents removes the wrapper from
   the box tree, letting .inp-header stick against the page root. */
body > .wp-site-blocks > header.wp-block-template-part {
  display: contents;
}

.inp-header {
  position: sticky;
  top: 0;
  z-index: 99;
  background: rgba(25, 67, 121, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  --wp--style--block-gap: 0 !important;
}

.inp-header-inner,
.inp-header-inner.is-layout-flex,
.inp-header-inner.wp-block-group-is-layout-flex {
  max-width: 1200px;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 70px !important;
  gap: 1rem !important;
}

.inp-logo-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none !important;
  flex-shrink: 0;
}

.inp-logo-link img,
.inp-logo-img,
.inp-logo-svg {
  height: 28px !important;
  width: auto !important;
  max-width: 200px !important;
  border-radius: 0;
}

.inp-logo-anchor {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none !important;
}

.inp-logo-icon {
  height: 40px !important;
  width: auto !important;
}

.inp-logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text-light) !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

.inp-logo-text strong {
  font-weight: 800;
}

.inp-site-name {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  color: var(--text-light) !important;
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1.2;
}

.inp-site-name:hover {
  color: var(--cyan) !important;
}

.inp-site-name .inp-accent {
  color: var(--cyan);
}

/* --- Navigation --- */

/* Old wp-block-navigation styles removed — using custom .inp-nav now */

/* --- Hero V2 (Split Layout) --- */

.inp-hero-v2 {
  background: var(--bg) !important;
  overflow: hidden;
}

.inp-hero-split {
  display: grid;
  grid-template-columns: 55% 40%;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 4rem 3rem;
  align-items: center;
  justify-content: center;
}

.inp-hero-text {
  max-width: 560px;
}

.inp-hero-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}

.inp-hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text-primary);
  margin: 0 0 1.25rem;
}

.inp-hero-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 2rem;
}

.inp-hero-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Plain-anchor pill buttons (e.g. /calendar/ subscribe buttons).
 * Scoped to a. so this DOES NOT match wp:button wrappers — the wp:button
 * variant is handled by the .wp-block-button.inp-btn-* > .wp-block-button__link
 * rules near the bottom of the file. */
a.inp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--red);
  color: white !important;
  padding: 0.8rem 1.75rem;
  border-radius: 980px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition:
    background 0.2s,
    transform 0.15s;
  box-shadow: 0 2px 12px rgba(238, 35, 36, 0.2);
}

a.inp-btn-primary:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(238, 35, 36, 0.3);
}

a.inp-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: #0a7d8d !important;
  padding: 0.8rem 1.75rem;
  border-radius: 980px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1.5px solid #0a7d8d;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.15s;
}

a.inp-btn-secondary:hover {
  background: #0a7d8d;
  color: white !important;
  transform: translateY(-2px);
}

a.inp-btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--text, #1f2937) !important;
  padding: 0.8rem 1.75rem;
  border-radius: 980px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1.5px solid rgba(31, 41, 55, 0.25);
  transition:
    border-color 0.2s,
    color 0.2s,
    transform 0.15s;
}

a.inp-btn-tertiary:hover {
  border-color: var(--text, #1f2937);
  transform: translateY(-2px);
}

.inp-hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inp-hero-image-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-alt);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.inp-hero-image-placeholder svg {
  opacity: 0.4;
}

.inp-hero-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
  display: block;
}

/* Vote CTA row (Register / Mail-in Ballot) */

.inp-vote-cta {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.inp-vote-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.25rem 0 0.75rem;
}

.inp-vote-cta .inp-section-label {
  color: var(--red);
}

.inp-vote-cta .wp-block-buttons {
  gap: 0.75rem !important;
  margin-top: 1.25rem;
}

.inp-vote-cta .wp-block-button__link {
  padding: 0.95rem 1.75rem !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.15s,
    box-shadow 0.2s;
}

.inp-vote-cta .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
}

/* This Week section */

.inp-this-week {
  background: var(--bg);
  padding-top: 3.5rem !important;
}

.inp-this-week .inp-section-label {
  color: var(--cyan);
}

.inp-this-week h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin: 0.25rem 0 0.5rem;
}

.inp-this-week .inp-this-week-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.inp-this-week .inp-this-week-list li {
  position: relative;
  padding: 1rem 0 1rem 2.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.inp-this-week .inp-this-week-list li:last-child {
  border-bottom: none;
}

.inp-this-week .inp-this-week-list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1.4rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
}

.inp-this-week .inp-this-week-list li a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 0.25rem;
}

.inp-this-week .inp-this-week-list li a:hover {
  color: var(--red);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .inp-vote-cta .wp-block-buttons {
    flex-direction: column;
  }
  .inp-vote-cta .wp-block-button {
    width: 100%;
  }
  .inp-vote-cta .wp-block-button__link {
    display: block;
    text-align: center;
  }
}

/* Proof Bar V2 */

.inp-proof-bar-v2 {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.inp-proof-bar-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 3rem;
}

.inp-proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.inp-proof-number {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.inp-proof-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.inp-proof-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
}

@media (max-width: 768px) {
  .inp-hero-split {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.5rem 2rem;
    gap: 2rem;
  }

  .inp-hero-image {
    order: -1;
  }

  .inp-hero-headline {
    font-size: clamp(2rem, 7vw, 2.75rem);
  }

  .inp-hero-buttons {
    flex-direction: column;
  }

  a.inp-btn-primary,
  a.inp-btn-secondary,
  a.inp-btn-tertiary {
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  .inp-proof-bar-inner {
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
  }

  .inp-proof-divider {
    display: none;
  }

  .inp-proof-item {
    min-width: 100px;
  }
}

/* --- Hero Section (Legacy) --- */

.inp-hero,
.inp-hero.wp-block-group,
.wp-block-group.inp-hero.is-layout-constrained {
  padding: clamp(1.5rem, 3vw, 2.5rem) 2rem clamp(2rem, 4vw, 3rem) !important;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--bg) !important;
  min-height: auto;
}

.inp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 20% 40%,
      rgba(87, 198, 215, 0.04) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 80% at 80% 60%,
      rgba(25, 67, 121, 0.03) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  z-index: 0;
  pointer-events: none;
}

.inp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}

.inp-hero-decor {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.inp-hero-line-left {
  position: absolute;
  left: 8%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--border) 30%,
    var(--border) 70%,
    transparent 100%
  );
  opacity: 0.3;
}

.inp-hero-line-right {
  position: absolute;
  right: 8%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--border) 30%,
    var(--border) 70%,
    transparent 100%
  );
  opacity: 0.3;
}

/* Hero label pill */
.inp-hero-label-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem;
  font-family: var(--font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  margin-bottom: 2.25rem !important;
  padding: 0.4375rem 1.125rem !important;
  border: 1px solid rgba(238, 35, 36, 0.25) !important;
  border-radius: 100px !important;
  background: rgba(238, 35, 36, 0.05) !important;
  position: relative;
  z-index: 2;
  text-align: center;
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
}

.inp-pulse-dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--red) !important;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.inp-scroll-hint {
  position: absolute !important;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.375rem;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 0.625rem !important;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.inp-scroll-mouse {
  width: 20px !important;
  height: 30px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  position: relative;
  display: block !important;
}

.inp-scroll-mouse::after {
  content: "" !important;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: var(--text-muted);
  border-radius: 2px;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%,
  100% {
    opacity: 1;
    top: 6px;
  }
  50% {
    opacity: 0.3;
    top: 14px;
  }
}

.inp-hero h1,
.inp-hero h1.wp-block-heading,
.inp-hero h1.has-text-align-center {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(2.75rem, 6vw, 4.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em;
  color: var(--text-primary) !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  z-index: 2;
}

.inp-hero h1 em,
.inp-hero h1.wp-block-heading em {
  font-style: normal !important;
  color: var(--red) !important;
}

.inp-hero .inp-tagline {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.65vw, 1.3125rem) !important;
  font-weight: 400;
  color: var(--text-muted) !important;
  line-height: 1.7;
  max-width: 48ch;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 2.5rem !important;
  position: relative;
  z-index: 2;
}

.inp-hero .inp-hero-ctas {
  position: relative;
  z-index: 2;
  margin-bottom: 3rem !important;
}

.inp-hero-proof-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.25rem !important;
  padding-top: 2.25rem !important;
  border-top: 1px solid var(--border) !important;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.inp-proof-stat {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.inp-proof-stat strong {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 1.375rem !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em;
  text-transform: none;
}

.inp-proof-sep {
  width: 1px !important;
  height: 24px !important;
  background: var(--border) !important;
  flex-shrink: 0;
  display: block !important;
}

.inp-meeting-card h3,
.inp-mission-column h3,
.inp-section--navy h3 {
  font-size: 1.5rem !important;
}

h3.wp-block-heading {
  font-size: clamp(1.25rem, 1.65vw, 1.5rem) !important;
}

/* --- Section Styles --- */

.inp-section {
  padding: clamp(2.5rem, 5vw, 3.5rem) 2rem;
  position: relative;
}

/* Every .inp-section that follows another .inp-section gets generous top padding,
   regardless of color combination. First section on a page keeps its smaller default
   (no preceding sibling = rule doesn't fire). */
.inp-section + .inp-section {
  padding-top: clamp(2.5rem, 5vw, 3.75rem) !important;
}

.inp-section--navy {
  background: var(--navy) !important;
  color: var(--text-light) !important;
}

.inp-section--navy h2,
.inp-section--navy h3,
.inp-section--navy h4,
.inp-section--navy strong,
.inp-section--navy li {
  color: var(--text-light) !important;
}

.inp-section--navy p {
  color: rgba(245, 245, 247, 0.85) !important;
}

.inp-section--navy a {
  color: var(--cyan) !important;
}

.inp-section--cream {
  background: var(--bg) !important;
}

.inp-section--cream-light {
  background: var(--bg-alt) !important;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Section labels — uppercase, small, Inter 600, 0.1em tracking */
.inp-section-label {
  font-family: var(--font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  margin-bottom: 0.875rem !important;
  display: block;
}

.inp-section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  position: relative;
}

.inp-section-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  background: linear-gradient(90deg, var(--red), var(--cyan));
  border-radius: 2px;
}

.inp-section h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 2.75vw, 2.0625rem) !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-primary) !important;
  margin-bottom: 1rem;
}

/* --- Meeting Card (dark navy bg, white text, cyan links) --- */

.inp-meeting-card {
  background: var(--navy) !important;
  color: var(--text-light) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px;
  padding: clamp(2rem, 3vw, 2.5rem);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.inp-meeting-card p,
.inp-meeting-card li,
.inp-meeting-card strong,
.inp-meeting-card span {
  color: var(--text-light) !important;
}

.inp-meeting-card a {
  color: var(--cyan) !important;
}

.inp-meeting-card a:hover {
  color: var(--cyan-light) !important;
}

.inp-meeting-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--red));
}

.inp-meeting-card .inp-dateline {
  font-family: var(--font-body);
  font-size: 0.6875rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  margin-bottom: 0.75rem !important;
}

.inp-meeting-card h3 {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 1rem !important;
  color: var(--text-light) !important;
}

.inp-meeting-card .inp-meeting-details {
  color: rgba(245, 245, 247, 0.6) !important;
  font-size: 1.03125rem !important;
  line-height: 1.7;
}

.inp-meeting-card .inp-meeting-details strong {
  color: var(--text-light) !important;
}

.inp-meeting-card .inp-meeting-details a {
  color: var(--cyan) !important;
  font-weight: 600;
}

.inp-meeting-card .inp-meeting-details a:hover {
  color: var(--cyan-light) !important;
}

/* --- Mission Block (on navy) --- */

.inp-mission-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inp-mission-column h3 {
  color: var(--text-light) !important;
}

.inp-mission-column p {
  color: rgba(245, 245, 247, 0.65) !important;
}

.inp-mission-highlight {
  color: var(--text-light) !important;
  font-style: italic;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  line-height: 1.6;
  padding-left: 1rem;
  border-left: 2px solid var(--cyan);
}

/* --- Stats Section --- */

.inp-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto !important;
  width: 100% !important;
}

.inp-stat-item {
  padding: 1.5rem 1rem;
}

.inp-stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  font-weight: 800;
  color: var(--cyan);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.03em;
}

.inp-stat-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.6);
}

.inp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  text-align: center;
}

.inp-stat {
  padding: 1.5rem 1rem;
}

.inp-stat .inp-stat-number {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: var(--cyan) !important;
  line-height: 1;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.03em;
}

.inp-stat .inp-stat-label {
  font-family: var(--font-body);
  font-size: 0.6875rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.6) !important;
}

/* --- Buttons (pill shape, red primary) --- */

.wp-block-button .wp-block-button__link {
  border-radius: 980px;
  box-shadow: 0 2px 12px rgba(238, 35, 36, 0.2);
  transition: all 0.25s ease !important;
}

.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(238, 35, 36, 0.3);
}

.wp-block-button.inp-btn-action .wp-block-button__link {
  background: var(--red) !important;
  color: var(--white) !important;
  box-shadow: 0 2px 12px rgba(238, 35, 36, 0.25);
}

.wp-block-button.inp-btn-action .wp-block-button__link:hover {
  background: var(--red-hover) !important;
  box-shadow: 0 4px 20px rgba(238, 35, 36, 0.35);
}

/* Outline button — cyan border */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 1.5px solid var(--cyan) !important;
  color: var(--cyan) !important;
  box-shadow: none;
  border-radius: 980px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--cyan) !important;
  color: var(--white) !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 4px 16px rgba(87, 198, 215, 0.2);
}

.inp-section--navy .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--text-light) !important;
  color: var(--text-light) !important;
}

.inp-section--navy
  .wp-block-button.is-style-outline
  .wp-block-button__link:hover {
  background: var(--text-light) !important;
  color: var(--navy) !important;
}

.inp-btn-large .wp-block-button__link {
  padding: 1.1rem 2.75rem !important;
  font-size: 0.9375rem !important;
  letter-spacing: 0.06em;
}

/* --- Blog Cards (12px radius, subtle border, hover shadow) --- */

.inp-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.inp-post-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.inp-post-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.inp-post-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.inp-post-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.inp-post-card .inp-post-meta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}

.inp-post-card h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.inp-post-card h3 a {
  color: var(--text-primary) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.inp-post-card h3 a:hover {
  color: var(--cyan) !important;
}

.inp-post-card .inp-excerpt {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* --- Latest Posts Block (WP core) --- */

.wp-block-latest-posts {
  padding: 0;
}

.wp-block-latest-posts__post-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
  letter-spacing: -0.02em;
}

.wp-block-latest-posts__post-title:hover {
  color: var(--cyan) !important;
}

.wp-block-latest-posts__post-date {
  color: var(--text-muted) !important;
  font-size: 0.875rem !important;
}

.wp-block-latest-posts__post-excerpt {
  color: var(--text-body) !important;
  font-size: 0.9375rem !important;
  line-height: 1.6;
}

.wp-block-latest-posts__featured-image img {
  border-radius: 12px;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* --- Category Filters (pill shape) --- */

.inp-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.inp-category-filters a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 980px;
  transition: all 0.2s ease;
}

.inp-category-filters a:hover,
.inp-category-filters a.active {
  color: var(--white);
  background: var(--red);
  border-color: var(--red);
}

/* --- Resource Cards --- */

.inp-resource-section {
  margin-bottom: 3rem;
}

.inp-resource-section h3,
.inp-section .inp-resource-section h3.wp-block-heading,
.inp-section .inp-resource-section > h3 {
  font-family: var(--font-display);
  font-size: 1.375rem !important;
  font-weight: 700;
  margin-top: 4rem !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.25 !important;
}

.inp-section .inp-resource-section > h3:first-of-type,
.inp-resource-section > h3:first-of-type {
  margin-top: 2rem !important;
}

.inp-resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  align-items: stretch;
}

/* Cards stack content top-down so titles align across the row even when
 * one card has less content. Without this, default block layout + WP's
 * is-layout-flow can cause asymmetric vertical positioning. */
.inp-resource-item {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.inp-qr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 600px;
  margin: 1.5rem auto 0;
}

.inp-qr-item {
  text-align: center;
}

.inp-qr-item .wp-block-image {
  margin-bottom: 0.5rem;
}

.inp-qr-item .wp-block-image img {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  image-rendering: pixelated;
}

.inp-qr-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0.25rem;
}

.inp-resource-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.inp-resource-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--red) 100%);
  opacity: 0.85;
}

.inp-resource-item:hover {
  border-color: var(--cyan);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.inp-resource-item h4 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.625rem;
}

.inp-resource-item h4 a {
  color: var(--text-primary) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.inp-resource-item h4 a:hover {
  color: var(--cyan) !important;
}

.inp-resource-item p {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0;
}

/* --- Action Items --- */

.inp-action-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.inp-action-item h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--text-primary);
}

.inp-action-item p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}

/* Cyan link color inside action-item cards — but NOT on button anchors
 * (those have their own background-aware text colors set by wp:button styles
 * or theme.json defaults). Scoping this exclusion prevents cyan text on red
 * "Sign the Petition" buttons in /amendment-petitions/ inp-action-item cards. */
.inp-action-item a:not(.wp-block-button__link) {
  color: var(--cyan) !important;
}

/* --- Accordion --- */

.inp-accordion {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.inp-accordion summary {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 1rem 1.25rem;
  cursor: pointer;
  background: var(--white);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.2s ease;
}

.inp-accordion summary:hover {
  background: var(--bg-alt);
}

.inp-accordion summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--cyan);
  font-weight: 300;
  transition: transform 0.2s ease;
}

.inp-accordion[open] summary::after {
  content: "\2212";
}

.inp-accordion .inp-accordion-content,
.inp-accordion > *:not(summary) {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--text-body);
  font-size: 0.9375rem;
  line-height: 1.65;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.inp-accordion > *:not(summary):first-of-type {
  padding-top: 1.25rem;
  margin-top: 0;
  border-top: 1px solid var(--border);
}

.inp-accordion > *:not(summary):last-child {
  padding-bottom: 1.5rem;
  margin-bottom: 0;
}

.inp-accordion ul {
  padding-left: 2.75rem;
  margin: 0.5rem 0;
}

.inp-accordion ul li {
  margin-bottom: 0.4rem;
}

.inp-accordion a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inp-accordion a:hover {
  color: var(--navy-light);
  text-decoration: none;
}

/* --styled modifier: accordion that wraps rich block content (headings, ordered
   lists, callouts, etc). The generic .inp-accordion > * rules above flatten
   everything to small body text — undo those overrides so nested blocks render
   like they would outside the accordion. */
.inp-accordion.inp-accordion--styled > *:not(summary) {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.inp-accordion.inp-accordion--styled > h2,
.inp-accordion.inp-accordion--styled > h3,
.inp-accordion.inp-accordion--styled > h4 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 1.25rem 0 0.5rem;
}
.inp-accordion.inp-accordion--styled > ol,
.inp-accordion.inp-accordion--styled > ul {
  padding-left: 2.75rem;
  font-size: 1rem;
  line-height: 1.6;
}
.inp-accordion.inp-accordion--styled > ol li,
.inp-accordion.inp-accordion--styled > ul li {
  margin-bottom: 0.5rem;
}
.inp-accordion.inp-accordion--styled > .wp-block-group {
  margin: 1rem 1.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Generic details/accordion blocks in WP — only when NOT inp-accordion */
details.wp-block-details:not(.inp-accordion) {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}

details.wp-block-details:not(.inp-accordion) summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg);
}

details.wp-block-details:not(.inp-accordion) > *:not(summary) {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
}

/* --- Team list (About page Meet the Team dropdown) ---
   Higher-specificity selectors so accordion + .inp-section h3 rules don't override. */

.inp-accordion ul.inp-team-list,
ul.inp-team-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0.5rem 0 1.5rem !important;
}
.inp-accordion ul.inp-team-list li,
ul.inp-team-list li {
  margin: 0 0 1rem 0 !important;
  padding: 0.875rem 1rem 0.875rem 1.125rem !important;
  list-style: none !important;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cyan);
  border-radius: 0 8px 8px 0;
}
.inp-accordion ul.inp-team-list li:last-child,
ul.inp-team-list li:last-child {
  margin-bottom: 0 !important;
}
.inp-accordion ul.inp-team-list li strong,
ul.inp-team-list li strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.inp-accordion ul.inp-team-list li span,
ul.inp-team-list li span {
  color: var(--text-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  display: block;
}

/* Steering committee gets red accent to differentiate from tech team */
.inp-accordion ul.inp-team-list.is-steering li,
ul.inp-team-list.is-steering li {
  border-left-color: var(--red);
}

/* Subhead inside the team accordion — must read as clear section header
   above the card grid (bigger than card titles, but smaller than H2 above). */
.inp-section .inp-accordion h3.inp-team-subhead,
.inp-section .inp-accordion h3.inp-team-subhead.wp-block-heading {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  margin: 0.5rem 0 1.25rem !important;
  padding: 0 0 0.5rem 0 !important;
  border-bottom: 3px solid var(--red) !important;
  border-top: none !important;
  display: inline-block !important;
  line-height: 1.15 !important;
}
.inp-section .inp-accordion h3.inp-team-subhead:not(:first-of-type),
.inp-section
  .inp-accordion
  h3.inp-team-subhead.wp-block-heading:not(:first-of-type) {
  margin-top: 2.5rem !important;
}

/* The team accordion specifically: strip outer container chrome so the cards
   don't sit inside a double-frame. Summary stays as a clean clickable button,
   content flows free below. Scoped via :has() to leave other accordions alone. */
.inp-accordion:has(.inp-team-list) {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}
.inp-accordion:has(.inp-team-list) > summary {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--white) !important;
  margin-bottom: 0.5rem;
}
.inp-accordion:has(.inp-team-list) > *:not(summary) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top: none !important;
}
.inp-accordion:has(.inp-team-list) > *:not(summary):first-of-type {
  padding-top: 1.5rem !important;
  margin-top: 0 !important;
  border-top: none !important;
}
.inp-accordion:has(.inp-team-list) > *:not(summary):last-child {
  padding-bottom: 0 !important;
}

/* --- Team Member card (inp/team-member pattern) ---
   Block-level replacement for the legacy hand-coded <ul class="inp-team-list">.
   Each pattern instance renders as one wp:group.inp-team-card matching the
   per-li visual from .inp-team-list li. Default = cyan border (Tech Team).
   The "Steering Committee" block style swaps to red. The cards live INSIDE the
   same .inp-accordion as the old list; the :has(.inp-team-card) rules below
   strip the outer chrome the same way .inp-team-list did. */

.inp-accordion .inp-team-card,
.inp-section .inp-team-card,
.inp-team-card.wp-block-group {
  margin: 0 0 1rem 0 !important;
  padding: 0.875rem 1rem 0.875rem 1.125rem !important;
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--cyan) !important;
  border-radius: 0 8px 8px 0 !important;
}
.inp-accordion .inp-team-card:last-of-type,
.inp-section .inp-team-card:last-of-type,
.inp-team-card.wp-block-group:last-of-type {
  margin-bottom: 0 !important;
}

.inp-accordion .inp-team-card .inp-team-card__name,
.inp-section .inp-team-card .inp-team-card__name,
.inp-team-card .inp-team-card__name {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  margin: 0 0 0.35rem 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  border: none !important;
  text-transform: none !important;
}

.inp-accordion .inp-team-card .inp-team-card__bio,
.inp-section .inp-team-card .inp-team-card__bio,
.inp-team-card .inp-team-card__bio {
  color: var(--text-body) !important;
  font-size: 0.9375rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Steering Committee block style — swap cyan bar for red. */
.inp-accordion .inp-team-card.is-style-inp-team-steering,
.inp-section .inp-team-card.is-style-inp-team-steering,
.inp-team-card.is-style-inp-team-steering.wp-block-group {
  border-left-color: var(--red) !important;
}

/* Strip outer accordion chrome when the accordion contains team cards
   (mirrors the :has(.inp-team-list) rules above for refactored markup).
   The :not(.inp-team-card):not(summary) child selector here protects the
   cards' OWN padding from being zeroed out — only the OTHER direct children
   (the h3.inp-team-subhead headings between groups) get the wrapper-padding
   reset that the old .inp-team-list layout depended on. */
.inp-accordion:has(.inp-team-card) {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}
.inp-accordion:has(.inp-team-card) > summary {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--white) !important;
  margin-bottom: 0.5rem;
}
.inp-accordion:has(.inp-team-card) > *:not(summary):not(.inp-team-card) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top: none !important;
}
.inp-accordion:has(.inp-team-card) > *:not(summary):first-of-type {
  margin-top: 0 !important;
  border-top: none !important;
}
.inp-accordion:has(.inp-team-card) > *:not(summary):last-child {
  margin-bottom: 0 !important;
}

/* --- Volunteer Guide --- */

.inp-guide-callout {
  background: var(--white);
  border: 2px solid var(--red);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
}

.inp-guide-callout h2 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.inp-guide-callout p {
  color: var(--text-body);
  line-height: 1.7;
}

.inp-guide-callout a {
  color: var(--cyan) !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--cyan);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.inp-guide-callout a:hover {
  color: var(--red) !important;
  border-bottom-color: var(--red);
}

.inp-guide-quicklinks {
  margin-top: 1rem;
}

.inp-guide-quicklinks h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.inp-guide-steps {
  padding-left: 1.5rem;
}

.inp-guide-steps li {
  margin-bottom: 0.75rem;
  line-height: 1.7;
  color: var(--text-body);
}

.inp-guide-steps li strong {
  color: var(--text-primary);
}

.inp-guide-steps li ul {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
}

.inp-guide-steps li ul li {
  margin-bottom: 0.375rem;
}

.inp-guide-checklist {
  list-style: none;
  padding-left: 0;
}

.inp-guide-checklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.625rem;
  line-height: 1.7;
  color: var(--text-body);
}

.inp-guide-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

.inp-guide-checklist li strong {
  color: var(--text-primary);
}

.inp-guide-checklist li code {
  background: var(--bg-alt);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.875em;
  color: var(--text-primary);
}

.inp-guide-warning {
  background: #fff5f5;
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  border-radius: 0 12px 12px 0;
  padding: 1.5rem;
}

.inp-guide-warning li {
  margin-bottom: 0.5rem;
  color: var(--text-body);
  line-height: 1.6;
}

.inp-guide-warning li strong {
  color: var(--text-primary);
}

.inp-guide-warning > .wp-block-paragraph {
  margin-top: 1rem;
  color: var(--red);
  font-weight: 600;
}

.inp-guide-table-wrap {
  overflow-x: auto;
}

.inp-guide-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.inp-guide-table thead th {
  background: var(--navy);
  color: var(--white);
  padding: 0.75rem 1rem;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inp-guide-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
  line-height: 1.6;
}

.inp-guide-table tbody tr:hover td {
  background: var(--bg-alt);
}

.inp-guide-motto {
  color: rgba(245, 245, 247, 0.6) !important;
  font-size: 0.9375rem;
  margin-top: 1rem;
}

/* --- Forms --- */

.inp-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.inp-form label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 0.375rem;
}

.inp-form input[type="text"],
.inp-form input[type="email"],
.inp-form input[type="tel"],
.inp-form textarea,
.inp-form select {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.inp-form input:focus,
.inp-form textarea:focus,
.inp-form select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(87, 198, 215, 0.15);
}

.inp-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* WPForms overrides */
.wpforms-container .wpforms-form .wpforms-field-label {
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dark) !important;
  font-family: var(--font-body) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
}

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(87, 198, 215, 0.15) !important;
}

.wpforms-container .wpforms-form .wpforms-submit-container button {
  background: var(--red) !important;
  color: var(--white) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 980px !important;
  border: none !important;
  padding: 0.875rem 2rem !important;
  cursor: pointer;
  transition: background-color 0.2s ease !important;
}

.wpforms-container .wpforms-form .wpforms-submit-container button:hover {
  background: var(--red-hover) !important;
}

/* --- Events Calendar Overrides --- */

.tribe-events {
  font-family: var(--font-body) !important;
}

.tribe-events .tribe-events-calendar-list__event {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.tribe-events .tribe-events-calendar-list__event-title a {
  color: var(--text-primary) !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
  text-decoration: none;
}

.tribe-events .tribe-events-calendar-list__event-title a:hover {
  color: var(--cyan) !important;
}

.tribe-events .tribe-events-calendar-list__event-datetime {
  color: var(--red) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
}

.tribe-events .tribe-events-calendar-list__event-description p {
  color: var(--text-body) !important;
}

/* --- Social Icons --- */

.inp-social-links {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.inp-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.inp-social-links a:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-2px);
}

/* --- Footer (navy bg) --- */

.inp-footer {
  background: var(--navy) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-top: none;
}

.inp-footer-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none !important;
  margin-bottom: 1rem;
}

.inp-footer-logo img {
  height: 28px !important;
  width: auto !important;
}

.inp-footer-brand {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9) !important;
  letter-spacing: -0.01em;
}

.inp-footer-brand strong {
  font-weight: 700;
}

.inp-footer-grid {
  display: grid;
  /* 5 columns by default; Brand col gets ~1.4x to fit its paragraph + email,
     remaining four columns share the rest evenly. minmax(0, *) prevents
     long link text from forcing a column wider than its share. */
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 960px) {
  .inp-footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.inp-footer h4 {
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  margin: 0 0 1rem !important;
  padding-bottom: 0.625rem !important;
  border-bottom: 1px solid rgba(87, 198, 215, 0.35) !important;
}

.inp-footer p,
.inp-footer li {
  color: rgba(245, 245, 247, 0.6) !important;
  font-size: 0.9375rem !important;
  line-height: 1.7 !important;
}

.inp-footer a {
  color: rgba(245, 245, 247, 0.6) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.inp-footer a:hover {
  color: var(--text-light) !important;
}

.inp-footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.inp-footer ul li {
  margin-bottom: 0.375rem !important;
}

.inp-footer .wp-block-button .wp-block-button__link {
  background: var(--red) !important;
  color: var(--white) !important;
  border-radius: 980px !important;
}

.inp-footer .wp-block-button .wp-block-button__link:hover {
  background: var(--red-hover) !important;
}

.inp-footer-bottom {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding: 1.5rem 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.inp-footer-bottom p {
  font-size: 0.8125rem !important;
  color: rgba(245, 245, 247, 0.7) !important;
}

/* --- CTA Section --- */

.inp-section--cta {
  border-top: 1px solid var(--border);
}

/* --- Animations --- */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inp-animate {
  animation: fadeInUp 0.6s ease forwards;
}

/* --- Utility --- */

.inp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.inp-narrow {
  max-width: 720px;
}

.inp-text-muted {
  color: var(--text-muted);
}

.inp-text-accent {
  color: var(--red);
}

.inp-text-teal {
  color: var(--cyan);
}

.inp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}

/* --- Responsive --- */

@media (max-width: 768px) {
  .inp-header-inner {
    padding: 0 1rem;
    height: 56px;
  }

  .inp-meeting-banner {
    font-size: 0.875rem;
    padding: 0.375rem 1rem;
  }

  .inp-meeting-banner p {
    font-size: 0.875rem !important;
  }

  .wp-block-navigation .wp-block-navigation-item a,
  .wp-block-navigation .wp-block-navigation-item__content {
    font-size: 0.625rem !important;
    padding: 0.375rem 0.5rem !important;
  }

  .inp-nav-donate a,
  .inp-nav-action a {
    padding: 0.375rem 0.75rem !important;
  }

  .inp-hero {
    min-height: auto !important;
    padding: 3rem 1.5rem !important;
  }

  .inp-hero h1 {
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }

  .inp-hero-proof-bar {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .inp-proof-sep {
    display: none !important;
  }

  .inp-hero-line-left,
  .inp-hero-line-right {
    display: none !important;
  }

  .inp-scroll-hint {
    display: none !important;
  }

  .inp-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .inp-footer-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 1rem;
  }

  .inp-footer-bottom {
    padding: 1.5rem 1rem 0;
    flex-direction: column;
    text-align: center;
  }

  .inp-post-grid {
    grid-template-columns: 1fr;
  }

  .inp-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .inp-footer-grid {
    grid-template-columns: 1fr;
  }

  .inp-logo-link img,
  .inp-logo-img {
    height: 28px;
  }

  .inp-site-name {
    font-size: 0.875rem !important;
  }
}

/* --- Google Calendar Embed --- */

.inp-gcal-embed {
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.inp-gcal-embed iframe {
  display: block;
}

.inp-gcal-fallback {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  margin: 0 !important;
  border-top: 1px solid var(--border);
}

.inp-gcal-fallback a {
  color: var(--cyan);
  text-decoration: underline;
}

.inp-gcal-fallback a:hover {
  color: var(--red);
}

/* --- Subscribe Section --- */

.inp-subscribe-section {
  text-align: center;
  margin-top: 2rem;
}

.inp-subscribe-text {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-body);
  margin-bottom: 1.25rem;
}

.inp-subscribe-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Event Cards --- */

.inp-event-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.inp-event-card {
  display: flex;
  gap: 1.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.inp-event-card:hover {
  border-color: var(--cyan);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.inp-event-date-badge {
  flex-shrink: 0;
  width: 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.25rem;
}

.inp-event-month {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.inp-event-day {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.03em;
}

.inp-event-details h3 {
  font-family: var(--font-display) !important;
  font-size: 1.1875rem !important;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
  letter-spacing: -0.02em;
}

.inp-event-meta {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem !important;
}

.inp-event-meta strong {
  color: var(--text-body);
}

.inp-event-details p {
  font-size: 0.9375rem;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.inp-event-actions {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.inp-event-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cyan) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.inp-event-link:hover {
  color: var(--red) !important;
}

.inp-event-link--muted {
  color: var(--text-muted) !important;
}

.inp-event-link--muted:hover {
  color: var(--text-primary) !important;
}

@media (max-width: 768px) {
  .inp-gcal-embed iframe {
    min-height: 500px;
  }

  .inp-subscribe-buttons {
    flex-direction: column;
    align-items: center;
  }

  .inp-event-card {
    flex-direction: column;
    gap: 0.75rem;
  }

  .inp-event-date-badge {
    flex-direction: row;
    width: auto;
    gap: 0.5rem;
  }
}

/* --- Blog Subtitle --- */

.inp-blog-subtitle {
  font-size: 1.0625rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 600px;
}

/* --- Pagination (pill shape) --- */

.inp-pagination {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.inp-pagination a,
.inp-pagination span,
.wp-block-query-pagination-numbers .page-numbers {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 980px;
  transition: all 0.2s ease;
}

.inp-pagination a:hover,
.wp-block-query-pagination-numbers .page-numbers:hover {
  color: var(--text-primary);
  border-color: var(--cyan);
}

.wp-block-query-pagination-numbers .page-numbers.current {
  color: var(--white);
  background: var(--red);
  border-color: var(--red);
}

/* --- Custom Nav (replaces wp:navigation block) --- */

.inp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.inp-nav {
  display: flex;
  align-items: center;
}

.inp-nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.inp-nav-links li {
  position: relative;
}

.inp-nav-links > li > a {
  color: rgba(245, 245, 247, 0.65);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  white-space: nowrap;
  display: block;
}

.inp-nav-links > li > a:hover,
.inp-nav-links > li > a:focus {
  color: var(--text-light);
}

/* Submenu dropdowns */
.inp-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: rgba(25, 67, 121, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  min-width: 220px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.inp-has-submenu:hover .inp-submenu {
  display: block;
}

.inp-submenu a {
  display: block;
  padding: 0.625rem 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(245, 245, 247, 0.7);
  text-decoration: none;
  transition:
    color 0.2s ease,
    background 0.2s ease;
  white-space: nowrap;
}

.inp-submenu a:hover {
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.08);
}

/* Donate CTA in nav */
.inp-nav-cta a {
  color: #ffffff !important;
  background: var(--red);
  border-radius: 980px;
  padding: 0.5rem 1.25rem !important;
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition:
    background 0.2s ease,
    transform 0.15s ease;
  margin-left: 0.375rem;
  display: block;
}

.inp-nav-cta a:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
}

/* Hamburger button — hidden on desktop. Min 44x44 tap target on mobile. */
.inp-hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 0.375rem 0.5rem;
  color: var(--text-light);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

/* Mobile overlay — hidden by default */
.inp-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navy-deep);
  z-index: 100000;
  padding: 2rem;
  overflow-y: auto;
  flex-direction: column;
}

.inp-mobile-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inp-mobile-links {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

.inp-mobile-links li a {
  display: block;
  padding: 0.75rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);
  text-decoration: none;
}

.inp-mobile-links li a:hover {
  color: var(--cyan);
}

.inp-mobile-sub a {
  padding-left: 1rem !important;
  font-size: 1rem !important;
  color: rgba(245, 245, 247, 0.6) !important;
}

.inp-mobile-sub a:hover {
  color: var(--text-light) !important;
}

.inp-mobile-cta {
  margin-top: 0.5rem;
}

.inp-mobile-cta a {
  display: block;
  text-align: center;
  background: var(--red);
  color: #ffffff !important;
  border-radius: 980px;
  padding: 0.875rem 1.5rem !important;
  font-weight: 700;
}

.inp-mobile-cta a:hover {
  background: var(--red-hover);
}

/* When menu is open */
body.inp-menu-open {
  overflow: hidden;
}
body.inp-menu-open .inp-mobile-overlay {
  display: flex;
}
body.inp-menu-open .inp-hamburger .inp-hamburger-open {
  display: none;
}
body.inp-menu-open .inp-hamburger .inp-hamburger-close {
  display: block !important;
}

/* Below 1100px — show hamburger, hide desktop links */
@media (max-width: 1100px) {
  .inp-nav {
    display: none;
  }
  .inp-hamburger {
    display: flex;
  }
}

/* --- Hero / Section Photos --- */
.inp-hero-photo {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.inp-hero-photo img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  max-height: 400px;
}

/* --- Image Carousel (CSS-only horizontal scroll) --- */
.inp-carousel {
  margin: 1rem 0 1.5rem;
  overflow: hidden;
  border-radius: 10px;
}

.inp-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.inp-carousel-track img {
  flex: 0 0 auto;
  width: 320px;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  scroll-snap-align: start;
}

.inp-carousel-track::-webkit-scrollbar {
  height: 6px;
}

.inp-carousel-track::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.inp-carousel-track::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* Single image (no carousel needed) */
.inp-event-image {
  margin: 1rem 0 1.5rem;
  border-radius: 10px;
  overflow: hidden;
}

.inp-event-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Two-image pair layout */
.inp-event-images-pair {
  display: flex;
  gap: 12px;
  margin: 1rem 0 1.5rem;
}

.inp-event-images-pair .inp-event-image {
  flex: 1;
  margin: 0;
}

/* --- Mobile Responsive Enhancements --- */

@media (max-width: 768px) {
  .inp-section {
    padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
  }

  .wp-block-columns {
    flex-direction: column !important;
  }

  .wp-block-column {
    flex-basis: 100% !important;
  }

  .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr !important;
  }

  .inp-post-card-body {
    padding: 1rem 1.25rem 1.25rem;
  }

  .inp-category-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }

  .inp-category-filters a {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Carousel responsive */
  .inp-carousel-track img {
    width: 260px;
    height: 195px;
  }

  .inp-event-images-pair {
    flex-direction: column;
  }

  .wpforms-container .wpforms-form .wpforms-field-row {
    flex-direction: column !important;
  }

  .wp-block-buttons {
    flex-direction: column !important;
  }

  .wp-block-button {
    width: 100%;
  }

  .wp-block-button .wp-block-button__link {
    width: 100%;
    text-align: center;
  }

  .inp-resource-grid {
    grid-template-columns: 1fr;
  }

  .inp-qr-grid {
    gap: 1.25rem;
    max-width: 100%;
  }

  .inp-qr-item .wp-block-image img {
    width: 160px;
    height: 160px;
  }

  .wp-block-post-navigation-link {
    font-size: 0.8125rem !important;
  }
}

@media (max-width: 480px) {
  .inp-hero-ctas {
    flex-direction: column !important;
  }

  .inp-hero-ctas .wp-block-button {
    width: 100%;
  }

  .inp-hero-ctas .wp-block-button__link {
    width: 100%;
    text-align: center;
  }

  .inp-section {
    padding: 1.5rem 1rem;
  }

  .inp-meeting-card {
    padding: 1.5rem;
  }

  .inp-blog-subtitle {
    font-size: 0.9375rem;
  }
}

/* --- Timeline (What We've Done) --- */

.inp-timeline-event {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

.inp-timeline-event:last-child {
  border-bottom: none;
}

.inp-timeline-event h3 {
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.inp-section--navy .inp-timeline-event {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* --- Video Cards (cyan left border accent) --- */

.inp-video-card {
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--cyan);
  margin-bottom: 1.5rem;
  background: rgba(87, 198, 215, 0.04);
  border-radius: 0 12px 12px 0;
}

.inp-video-card h3 {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.inp-video-source {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  margin-bottom: 0.5rem;
}

.inp-video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin-top: 1rem;
  border-radius: 8px;
}
.inp-video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.inp-video-unavailable {
  font-style: italic;
  color: #888;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}

/* --- Native YouTube embeds (block-editor wp:embed) ---
 * Replaces the legacy .inp-video-responsive / .inp-video-embed iframe-wrapper
 * pattern with first-class WP embed blocks. Volunteers can now paste a YouTube
 * URL into the editor instead of editing HTML.
 *
 * Visual targets:
 *   - Default 8px rounded corner on every YouTube embed (matches the old
 *     .inp-video-responsive look used on Food For Thought).
 *   - 12px rounded corner when wrapped in .inp-video-rounded-lg (matches the
 *     old inline 12px radius on MAGA Discussions). Wrap the wp:embed in a
 *     wp:group with className "inp-video-rounded-lg" to opt in.
 *
 * The legacy .inp-video-responsive / .inp-video-embed classes above are kept
 * intentionally — other content may still rely on them.
 */
.wp-block-embed-youtube {
  margin-top: 1rem;
  border-radius: 8px;
  overflow: hidden;
}
.inp-video-rounded-lg .wp-block-embed-youtube {
  border-radius: 12px;
}

/* --- Win Cards (Recent Wins) --- */

.inp-win-card {
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--white);
}

.inp-win-card h3 {
  margin-top: 0;
  color: var(--success);
}

/* --- Sub-page Nav (Take Action hub links) --- */

.inp-subpage-nav {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.5rem auto 0;
  max-width: 820px;
}

.inp-subpage-nav p {
  /* Each pill takes 1/4 of row width (4 per row), so 7 items = 4+3 with
   * second row centered by parent's justify-content: center */
  flex: 0 0 calc((100% - 3 * 0.75rem) / 4);
  max-width: calc((100% - 3 * 0.75rem) / 4);
  margin: 0;
  text-align: center;
}

@media (max-width: 768px) {
  .inp-subpage-nav p {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.inp-subpage-nav a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 1rem;
  border: 2px solid var(--cyan);
  border-radius: 980px;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cyan);
  transition:
    background 0.2s,
    color 0.2s;
}

.inp-subpage-nav a:hover {
  background: var(--cyan);
  color: var(--white);
}

/* --- Print --- */

@media print {
  body {
    background: white !important;
    color: black !important;
  }

  .inp-meeting-banner,
  .inp-header,
  .inp-footer {
    display: none;
  }
}

/* ============================================
   VISUAL CALENDAR — Month View
   ============================================ */

.inp-cal-container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-body);
}

/* --- Header: navy bar with month + arrows --- */

.inp-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  padding: 1rem 1.5rem;
}

.inp-cal-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
}

.inp-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.inp-cal-nav:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* --- Legend --- */

.inp-cal-legend {
  display: flex;
  gap: 1.25rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.inp-cal-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inp-cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.inp-cal-legend-dot.cal-meeting {
  background: var(--red);
}

.inp-cal-legend-dot.cal-special {
  background: var(--cyan);
}

.inp-cal-legend-dot.cal-community {
  background: var(--navy);
}

/* --- Grid --- */

.inp-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* --- Day labels (S M T W T F S) --- */

.inp-cal-day-labels {
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}

.inp-cal-day-label {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0.625rem 0;
}

/* --- Day cells --- */

.inp-cal-cell {
  min-height: 90px;
  padding: 0.5rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.inp-cal-cell:nth-child(7n) {
  border-right: none;
}

.inp-cal-cell--empty {
  background: var(--bg-alt);
}

.inp-cal-cell--today {
  background: rgba(87, 198, 215, 0.06);
}

.inp-cal-cell--today .inp-cal-date {
  background: var(--cyan);
  color: var(--white);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}

.inp-cal-date {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.125rem;
}

/* --- Event pills --- */

.inp-cal-events {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}

.inp-cal-pill {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.25rem 0.375rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.inp-cal-pill:hover {
  opacity: 0.85;
  transform: scale(1.02);
}

.inp-cal-pill.cal-meeting {
  background: var(--red);
  color: var(--white);
}

.inp-cal-pill.cal-special {
  background: var(--cyan);
  color: var(--white);
}

.inp-cal-pill.cal-community {
  background: var(--navy);
  color: var(--white);
}

/* --- Modal overlay --- */

.inp-cal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  transition:
    background 0.25s ease,
    backdrop-filter 0.25s ease;
  padding: 1.5rem;
}

.inp-cal-overlay--visible {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}

/* --- Modal card --- */

.inp-cal-modal {
  position: relative;
  background: var(--white);
  border-radius: 16px;
  padding: 2.5rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18);
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.inp-cal-overlay--visible .inp-cal-modal {
  transform: translateY(0);
  opacity: 1;
}

.inp-cal-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--bg-alt);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.inp-cal-modal-close:hover {
  background: var(--border);
  color: var(--text-primary);
}

.inp-cal-modal-type {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.inp-cal-modal-type.cal-meeting {
  background: var(--red);
}

.inp-cal-modal-type.cal-special {
  background: var(--cyan);
}

.inp-cal-modal-type.cal-community {
  background: var(--navy);
}

.inp-cal-modal-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  line-height: 1.25;
}

.inp-cal-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.inp-cal-modal-meta p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-body);
  margin: 0;
  line-height: 1.4;
}

.inp-cal-modal-meta svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

.inp-cal-modal-desc {
  font-size: 0.9375rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* --- Calendar Responsive --- */

@media (max-width: 768px) {
  .inp-cal-container {
    border-radius: 8px;
  }

  .inp-cal-header {
    padding: 0.75rem 1rem;
  }

  .inp-cal-title {
    font-size: 1rem;
  }

  .inp-cal-legend {
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    flex-wrap: wrap;
  }

  .inp-cal-legend-item {
    font-size: 0.6875rem;
  }

  .inp-cal-cell {
    min-height: 64px;
    padding: 0.25rem;
  }

  .inp-cal-date {
    font-size: 0.75rem;
  }

  .inp-cal-pill {
    font-size: 0.5rem;
    padding: 0.125rem 0.25rem;
  }

  .inp-cal-modal {
    padding: 1.75rem;
    border-radius: 12px;
  }

  .inp-cal-modal-title {
    font-size: 1.1875rem;
  }
}

@media (max-width: 480px) {
  .inp-cal-cell {
    min-height: 52px;
    padding: 0.1875rem;
  }

  .inp-cal-pill {
    font-size: 0;
    height: 6px;
    padding: 0;
    border-radius: 3px;
  }

  .inp-cal-date {
    font-size: 0.6875rem;
  }

  .inp-cal-cell--today .inp-cal-date {
    width: 22px;
    height: 22px;
    font-size: 0.625rem;
  }

  .inp-cal-legend {
    display: none;
  }
}

/* ============================================
   BLOG FILTER — Search + Tag/Category Pills
   ============================================ */

.inp-blog-title {
  margin-bottom: 0.25rem !important;
}

#inp-blog-filter {
  margin-bottom: 2rem;
}

/* Search bar */
.inp-blog-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}

.inp-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.inp-blog-search input {
  width: 100%;
  padding: 14px 48px 14px 46px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  -webkit-appearance: none;
}

.inp-blog-search input::placeholder {
  color: var(--text-muted);
}

.inp-blog-search input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(238, 35, 36, 0.1);
}

.inp-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--bg-alt);
  border: none;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.inp-search-clear:hover {
  background: var(--red);
  color: var(--white);
}

/* Filter rows */
.inp-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.inp-filter-row.inp-hidden {
  display: none;
}

.inp-filter-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 60px;
}

/* Pill container */
.inp-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Individual pill */
.inp-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.inp-filter-pill:hover {
  border-color: var(--red);
  color: var(--red);
}

.inp-filter-pill.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.inp-filter-pill.active:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: var(--white);
}

/* Result count */
.inp-filter-count {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* No results message */
.inp-filter-no-results {
  text-align: center;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 3rem 1rem;
  margin-top: 1rem;
}

/* Post card hide/show transitions (enhances existing .inp-post-card transition) */
.inp-post-card.inp-post-hidden {
  opacity: 0;
  pointer-events: none;
}

/* --- Blog Filter Responsive --- */

@media (max-width: 600px) {
  .inp-blog-search input {
    padding: 12px 44px 12px 42px;
    font-size: 0.9375rem;
  }

  .inp-filter-row {
    gap: 0.5rem;
  }

  .inp-filter-label {
    width: 100%;
    min-width: unset;
  }

  .inp-filter-pill {
    padding: 6px 12px;
    font-size: 0.75rem;
  }
}

@media print {
  #inp-blog-filter {
    display: none;
  }
}

/* --- Default padding for bare entry-content children ---
   Pages whose body content lives directly in .entry-content (not wrapped in
   .inp-section) would otherwise span full viewport width with no padding.
   Applies to direct children only; inp-section blocks keep their own padding. */
.entry-content
  > *:not(.inp-section):not(.alignfull):not([class*="inp-section--"]) {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

.entry-content > .alignwide:not(.inp-section) {
  max-width: 1200px;
}

/* === Hero / heading scale fixes (May 2026 Tisa feedback) === */

/* Hero h1 across all pages — was too big */
.entry-content .inp-section h1.wp-block-heading,
.entry-content .inp-section h1,
main .inp-section h1.wp-block-heading,
main .inp-section h1 {
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  line-height: 1.15 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.02em;
}

/* Hero subheading (large font paragraphs) — was too big + too loose */
.inp-section .has-large-font-size,
.inp-section p.has-large-font-size {
  font-size: 1.0625rem !important;
  line-height: 1.45 !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  color: var(--text-muted, #525258) !important;
}

/* Section padding — reduce vertical rhythm */
.inp-section {
  padding: clamp(1.5rem, 3vw, 2.5rem) 1.5rem !important;
}

/* Section H2 / H3 — tighter */
.inp-section h2.wp-block-heading,
.inp-section > h2 {
  line-height: 1.2 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
}

.inp-section h3.wp-block-heading,
.inp-section > h3,
.inp-action-item h3 {
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  font-size: clamp(1.125rem, 1.75vw, 1.375rem) !important;
}

/* Section eyebrow tighter */
.inp-section-label {
  margin-bottom: 0.5rem !important;
  margin-top: 0 !important;
}

/* Body paragraph line-height */
.inp-section p {
  line-height: 1.55 !important;
}

/* Action item cards — more compact */
.inp-action-item {
  padding: 1.25rem !important;
}

.inp-action-item p {
  margin: 0.25rem 0 0.75rem !important;
}

/* Navy section — fix dark-text-on-dark contrast */
.inp-section--navy h2,
.inp-section--navy h3,
.inp-section--navy h4,
.inp-section--navy strong,
.inp-section--navy li,
.inp-section--navy a {
  color: #ffffff !important;
}

.inp-section--navy p {
  color: rgba(255, 255, 255, 0.92) !important;
}

.inp-section--navy a {
  text-decoration: underline;
}

/* Iframe wrapper — ensure responsive */
.inp-iframe-wrap iframe {
  min-height: 1200px;
  width: 100%;
  border: 0;
  display: block;
}

@media (max-width: 768px) {
  .inp-iframe-wrap iframe {
    min-height: 1500px;
  }
}

/* Homepage — tighten gaps between top-level sections */
.wp-site-blocks > .wp-block-group + .wp-block-group {
  margin-top: 0 !important;
}

/* "Latest from blog" / archive teaser cards — for tighter spacing */
.wp-block-latest-posts {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* === Block Styles for Buttons (volunteer-safe options) === */
.wp-block-button.is-style-primary-red .wp-block-button__link {
  background-color: #ee2324 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700;
}
.wp-block-button.is-style-primary-red .wp-block-button__link:hover {
  background-color: #d41f20 !important;
}

.wp-block-button.is-style-secondary-navy .wp-block-button__link {
  background-color: transparent !important;
  color: #194379 !important;
  border: 2px solid #194379 !important;
  font-weight: 600;
}
.wp-block-button.is-style-secondary-navy .wp-block-button__link:hover {
  background-color: #194379 !important;
  color: #ffffff !important;
}

.wp-block-button.is-style-ghost .wp-block-button__link {
  background-color: transparent !important;
  color: #194379 !important;
  border: none !important;
  font-weight: 600;
  text-decoration: underline;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
  color: #ee2324 !important;
}

/* === Homepage 3-Column Action Grid (Call / Show Up / Join) === */
.inp-action-header {
  max-width: 720px;
  margin-bottom: 2.5rem !important;
}

.inp-section--navy .inp-action-header h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.75rem, 3.25vw, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-light) !important;
  margin-bottom: 0.75rem !important;
}

.inp-section--navy .inp-action-desc {
  font-size: 1.0625rem !important;
  line-height: 1.55;
  color: rgba(245, 245, 247, 0.72) !important;
  margin: 0 !important;
}

.inp-action-grid {
  margin-top: 0 !important;
}

.inp-action-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px;
  padding: 2rem 1.75rem !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
  position: relative;
  overflow: hidden;
}

.inp-action-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: var(--cyan);
  transition: height 0.25s ease;
}

.inp-action-card:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(87, 198, 215, 0.45) !important;
  transform: translateY(-2px);
}

.inp-action-card:hover::before {
  height: 100%;
}

.inp-section--navy .inp-action-num {
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--cyan) !important;
  text-transform: uppercase;
  margin-bottom: 1rem !important;
  opacity: 0.85;
}

.inp-section--navy .inp-action-verb {
  font-family: var(--font-display) !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--text-light) !important;
  margin-bottom: 0.625rem !important;
  text-transform: none;
}

.inp-section--navy .inp-action-body {
  font-size: 0.9375rem !important;
  line-height: 1.55;
  color: rgba(245, 245, 247, 0.7) !important;
  margin-bottom: 1.25rem !important;
  flex: 1;
}

.inp-section--navy .inp-action-cta {
  margin: 0 !important;
}

.inp-section--navy .inp-action-cta a {
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(87, 198, 215, 0.35);
  padding-bottom: 2px;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.inp-section--navy .inp-action-cta a:hover {
  color: var(--cyan-light) !important;
  border-bottom-color: var(--cyan-light);
}

@media (max-width: 781px) {
  .inp-action-grid {
    gap: 1rem !important;
  }
  .inp-action-card {
    padding: 1.5rem 1.25rem !important;
  }
}

/* --- Site Search --- */
.inp-search-toggle {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  margin-right: 0.5rem;
}
.inp-search-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.inp-search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(245, 240, 232, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 2rem;
  padding-top: 12vh;
  animation: inp-search-fade 0.18s ease-out;
}
@keyframes inp-search-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body.inp-search-open .inp-search-overlay {
  display: flex;
}

.inp-search-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(25, 67, 121, 0.08);
  border: none;
  border-radius: 50%;
  color: #194379;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.inp-search-close:hover {
  background: rgba(25, 67, 121, 0.16);
}

.inp-search-form {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(25, 67, 121, 0.12);
  border-radius: 12px;
  padding: 0.4rem;
  box-shadow: 0 4px 20px rgba(25, 67, 121, 0.08);
}
.inp-search-form input[type="search"] {
  flex: 1;
  border: none;
  font-size: 1.0625rem;
  padding: 0.625rem 0.875rem;
  background: transparent;
  outline: none;
  color: #194379;
}
.inp-search-form input[type="search"]::placeholder {
  color: rgba(25, 67, 121, 0.5);
}
.inp-search-form button[type="submit"] {
  background: #194379;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.15s;
}
.inp-search-form button[type="submit"]:hover {
  background: #0f2c52;
}

.inp-search-hint {
  margin: 1rem auto 0;
  max-width: 600px;
  color: rgba(25, 67, 121, 0.55);
  font-size: 0.8125rem;
  text-align: center;
}

/* Mobile search inside hamburger drawer */
.inp-mobile-search {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 1.5rem;
  background: #fff;
  border-radius: 8px;
  padding: 0.25rem;
}
.inp-mobile-search input[type="search"] {
  flex: 1;
  border: none;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  outline: none;
  color: #194379;
}
.inp-mobile-search button {
  background: transparent;
  border: none;
  color: #194379;
  cursor: pointer;
  padding: 0 0.5rem;
}

@media (max-width: 1100px) {
  .inp-search-toggle {
    display: none;
  }
}

/* ============================================
   v3.5.0 - Global Polish Pass (2026-05-13)
   Issues: card uniformity, blue-on-blue contrast,
   resources heading spacing, take-action images,
   iframe responsiveness, calendar spacing,
   card click affordance.
   Additive only. No existing rules altered.
   ============================================ */

/* --- 1. Card sizing uniformity ----------------------------- */
/* Forces equal-height/equal-width cards anywhere they appear
   in a WP columns layout, grid layout, or our custom card
   wrappers. The grid stays auto-fit so the row reflows on
   mobile, but every cell stretches to the tallest sibling. */

.inp-resource-grid,
.inp-post-grid,
.wp-block-post-template.is-layout-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}

.inp-resource-grid > *,
.inp-post-grid > *,
.wp-block-post-template.is-layout-grid > * {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  height: 100% !important;
  min-height: 220px !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

/* WP columns block: when used as a card row, make children
   stretch to equal height. Safe because flex-direction: column
   on a column block is already the default. */
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column,
.wp-block-columns > .wp-block-column.has-background,
.wp-block-columns > .wp-block-column.inp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Equal-height card rows — ALL card patterns we use. Force the grid wrapper
   to stretch flex children, force cards to be flex columns at full height,
   and push the final CTA (buttons or trailing link/paragraph) to the bottom
   so footers align across cards. */

/* Pattern 1: cards as direct children of .inp-action-grid (homepage cards) */
.inp-action-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 1.25rem !important;
}
.inp-action-grid > .inp-action-card {
  flex: 1 1 calc(33.333% - 1rem) !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 260px;
}
@media (max-width: 880px) {
  .inp-action-grid > .inp-action-card {
    flex-basis: calc(50% - 0.625rem) !important;
  }
}
@media (max-width: 600px) {
  .inp-action-grid > .inp-action-card {
    flex-basis: 100% !important;
  }
}

/* Pattern 2: cards inside wp-block-columns > wp-block-column (About, others)
   Convert the columns wrapper to CSS grid — flex's stretch is unreliable when
   children have nested flex containers + height:100% (computed heights drift). */
.wp-block-columns:has(> .wp-block-column > .inp-action-item),
.wp-block-columns:has(> .wp-block-column > .inp-action-card),
.wp-block-columns:has(> .wp-block-column > .inp-resource-item),
.wp-block-columns:has(> .wp-block-column > .wp-block-group.has-background) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: 1.5rem !important;
}
.wp-block-columns:has(> .wp-block-column > .inp-action-item) > .wp-block-column,
.wp-block-columns:has(> .wp-block-column > .inp-action-card) > .wp-block-column,
.wp-block-columns:has(> .wp-block-column > .inp-resource-item)
  > .wp-block-column,
.wp-block-columns:has(> .wp-block-column > .wp-block-group.has-background)
  > .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
  flex: unset !important;
  width: auto !important;
  height: auto !important;
}
.wp-block-columns > .wp-block-column > .wp-block-group.has-background,
.wp-block-columns > .wp-block-column > .inp-action-item,
.wp-block-columns > .wp-block-column > .inp-action-card,
.wp-block-columns > .wp-block-column > .inp-resource-item,
.wp-block-columns > .wp-block-column > .inp-meeting-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  min-height: 220px !important;
  padding: 1.5rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Push the final CTA (a button row, a link paragraph, or a bare <p>) to the
   bottom of every card so footers align. */
.inp-action-card > .wp-block-buttons:last-child,
.inp-action-card > p:last-child,
.inp-action-item > .wp-block-buttons:last-child,
.inp-action-item > p:last-child,
.inp-resource-item > .wp-block-buttons:last-child,
.inp-resource-item > p:last-child {
  margin-top: auto !important;
  margin-block-start: auto !important;
}

/* Push buttons/CTAs to the bottom of cards so footers align. */
.inp-resource-item,
.inp-post-card,
.inp-card,
.wp-block-column.has-background,
.wp-block-column > .wp-block-group.has-background {
  display: flex;
  flex-direction: column;
}

.inp-resource-item > *:not(:last-child),
.inp-post-card-body > *:not(:last-child),
.inp-card > *:not(:last-child) {
  flex: 0 0 auto;
}

.inp-resource-item > p,
.inp-post-card-body > .inp-excerpt,
.inp-card > p {
  flex: 1 1 auto;
}

/* Uniform card thumbnails: 16:9, never overflow. */
.inp-card img,
.inp-card .wp-block-image img,
.wp-block-column.has-background > .wp-block-image:first-child img,
.wp-block-column
  > .wp-block-group.has-background
  > .wp-block-image:first-child
  img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* --- 2. Blue-on-blue text contrast ------------------------- */
/* Theme palette navy slug = "surface" (#194379), deep navy slug
   = "surface-deep". Force white text inside any element with
   that background, including nested headings, paragraphs, list
   items, and links. */

.has-surface-background-color,
.has-surface-background-color *,
.has-surface-deep-background-color,
.has-surface-deep-background-color *,
[style*="background-color:#194379"],
[style*="background-color: #194379"],
[style*="background:#194379"],
[style*="background: #194379"],
[style*="background-color:#0F2D54"],
[style*="background-color: #0F2D54"] {
  color: #ffffff !important;
}

/* Links inside navy cards need a lighter accent (cyan), not the
   default body link color (which also resolves to cyan but with
   varying weight depending on parent). */
.has-surface-background-color a,
.has-surface-deep-background-color a,
[style*="background-color:#194379"] a,
[style*="background-color: #194379"] a,
[style*="background-color:#0F2D54"] a,
[style*="background-color: #0F2D54"] a {
  color: #57c6d7 !important;
  text-decoration: underline;
}

.has-surface-background-color a:hover,
.has-surface-deep-background-color a:hover,
[style*="background-color:#194379"] a:hover,
[style*="background-color: #194379"] a:hover {
  color: #7dd8e5 !important;
}

/* WP group block applied as a "stat card" (navy bg, big number). */
.wp-block-group.has-surface-background-color,
.wp-block-group.has-surface-deep-background-color {
  color: #ffffff !important;
}

/* --- 3. Heading-to-paragraph spacing on Resources ---------- */
/* Page ID 10 = Resources. Bumps every section heading after the
   first so the four resource sections (Mutual Aid, Safety Net,
   Civic, Library) breathe. */

.page-id-10 h3:not(:first-child),
.page-id-10 .wp-block-heading:not(:first-child) {
  margin-top: 2.5rem;
}

.page-id-10 h3 + p,
.page-id-10 .wp-block-heading + p {
  margin-top: 0.75rem;
}

/* --- 4. Take Action image side-by-side --------------------- */
/* Voter-reg + voter-suppression images render full-width by
   default. Cap them on Take Action specifically, and pair them
   if the user wraps them in .inp-side-by-side or a media-text
   block. Page ID 24 = Take Action. */

.page-id-24 .wp-block-image img {
  max-width: 100%;
  height: auto;
}

.page-id-24 .wp-block-image:not(.alignwide):not(.alignfull) {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.inp-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin: 1.5rem 0;
}

.inp-side-by-side img,
.inp-side-by-side .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .inp-side-by-side {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Take Action media-text blocks: tighten image sizing. */
.page-id-24 .wp-block-media-text .wp-block-media-text__media img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- 5. Iframe responsiveness (candidates tracker) --------- */
/* The Activate Pinellas candidate iframe defaults to a fixed
   pixel width and looks skinny. Force full container width with
   a tall minimum so the embedded list isn't cramped. */

iframe[src*="activatepinellas"],
iframe[src*="activate-usa"],
iframe.inp-officials-iframe {
  width: 100% !important;
  min-width: 100% !important;
  min-height: 800px;
  border: 0;
  display: block;
}

/* Any wrapper that may be constraining it. */
.inp-officials-embed,
.inp-candidates-embed {
  width: 100%;
  max-width: 100%;
}

/* --- 6. Calendar embed spacing ----------------------------- */
/* Page ID 22 = Calendar. Tighten the gap between the subheading
   and the Google Calendar iframe. */

.page-id-22 iframe[src*="calendar.google.com"] {
  margin-top: 0.5rem;
  width: 100%;
  min-height: 600px;
}

.page-id-22 .wp-block-heading + p,
.page-id-22 h2 + p,
.page-id-22 h3 + p {
  margin-bottom: 0.75rem;
}

.page-id-22 p + iframe,
.page-id-22 .wp-block-heading + iframe {
  margin-top: 0.5rem;
}

/* --- 7. Click affordance arrows on resource cards ---------- */
/* Adds a small navy arrow to card link text so older volunteers
   know cards are clickable. Skips arrows on the nav, footer,
   and buttons that already have their own affordance (red pill
   buttons read as buttons). */

.inp-resource-item h4 a::after,
.inp-post-card h3 a::after,
.inp-card a.card-link::after {
  content: " \2192";
  color: var(--red);
  font-weight: 900;
  display: inline-block;
  transition: transform 0.15s ease;
  margin-left: 0.25em;
}

.inp-resource-item:hover h4 a::after,
.inp-post-card:hover h3 a::after,
.inp-card:hover a.card-link::after {
  transform: translateX(3px);
}

/* Tactile hover on resource cards specifically: they already
   have a border-color shift, this adds a small lift. */
.inp-resource-item {
  transition:
    transform 0.15s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.inp-resource-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Volunteer-built cards (WP columns w/ background): make whole
   card feel clickable when it contains a button. */
.wp-block-column.has-background,
.wp-block-group.has-background.inp-card {
  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.wp-block-column.has-background:hover,
.wp-block-group.has-background.inp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ============================================
   v3.5.1 - Resources page review hotfix (2026-05-13)
   - Blue-on-blue: descendant selectors for inline styles
   - Cards: min-height + grid-auto-rows for cross-row uniformity
   - Heading-to-content: tighten first inp-section top padding
   ============================================ */

/* 1. Blue-on-blue inline style: also apply to descendants */
[style*="background-color:#194379"] *,
[style*="background-color: #194379"] *,
[style*="background:#194379"] *,
[style*="background: #194379"] *,
[style*="background-color:#0F2D54"] *,
[style*="background-color: #0F2D54"] *,
[style*="background-color:#0f2d54"] *,
[style*="background-color: #0f2d54"] * {
  color: #ffffff !important;
}

[style*="background-color:#194379"] strong,
[style*="background-color: #194379"] strong {
  color: #57c6d7 !important;
}

/* 2. Card grid: equal heights across rows (resource grid only) */
.inp-resource-grid {
  grid-auto-rows: 1fr;
}

.inp-resource-item {
  min-height: 180px;
}

/* 3. Tighten hero → first section padding on Resources */
.page-id-10 .inp-section:first-of-type,
.page-id-10 > .entry-content > .inp-section:first-of-type {
  padding-top: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Also tighten the hero group's bottom padding */
.page-id-10 .wp-block-group.has-global-padding:first-of-type {
  padding-bottom: 1rem !important;
}

/* ============================================
   v3.5.4 - Header/nav layout fix (2026-05-13)
   - Logo must NOT truncate "Indivisible North Pinellas"
   - Nav pushed right toward action buttons (not centered)
   - Tighter gaps between nav items so all 7 fit
   ============================================ */

.inp-logo-text {
  font-size: 1.125rem !important;
  white-space: nowrap;
  /* no max-width — let the full org name show */
}

@media (max-width: 1380px) {
  .inp-logo-text {
    font-size: 1rem !important;
  }
}

@media (max-width: 1200px) {
  .inp-logo-text {
    font-size: 0.95rem !important;
  }
}

/* Push nav right, glued against Join Us / Donate buttons. Tight + compact. */
.inp-nav {
  margin-left: auto !important;
  flex-shrink: 0;
}

.inp-nav-links,
.inp-nav-links.is-layout-flex {
  gap: 0 !important;
}

.inp-nav-links > li > a {
  padding: 0.45rem 0.55rem !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.inp-nav-links > li > a:hover,
.inp-nav-links > li > a:focus {
  color: #ffffff !important;
}

/* Donate / Join Us CTAs — smaller font, bolder weight, solid-white text
 * (overrides the .inp-nav-links > li > a rgba(255,255,255,0.9) above) */
.inp-nav-cta a,
.inp-nav-links > li.inp-nav-cta > a {
  padding: 0.45rem 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  margin-left: 0.25rem !important;
  color: #ffffff !important;
}

@media (max-width: 1380px) {
  .inp-nav-links > li > a {
    padding: 0.4rem 0.45rem !important;
    font-size: 0.75rem !important;
  }
}

/* ============================================
   NEWS & UPDATES — Magazine hero + grid layout
   ============================================ */

/* News header — single block layout, centered max-width container, all children
   left-aligned to the same edge. */
.inp-news-header {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.inp-news-header > * {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

.inp-news-list-section {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.inp-blog-title {
  text-align: left !important;
}

.inp-blog-deck {
  color: var(--text-muted);
  font-size: 1.0625rem;
  max-width: 720px;
}

/* Search bar */
.inp-news-search {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 540px;
  margin: 0 auto 1.25rem 0 !important;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 980px;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.inp-news-search:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.inp-news-search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}
.inp-news-search input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  font-family: var(--font-body);
}
.inp-news-search button {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 980px;
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease;
}
.inp-news-search button:hover {
  background: #0f2d54;
}

/* Category filter pills */
.inp-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}
.inp-pill {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  border-radius: 980px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: all 0.18s ease;
}
.inp-pill:hover {
  background: var(--bg-alt);
  border-color: var(--navy);
}
.inp-pill.is-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
@media (max-width: 600px) {
  /* Tighter pills so the filter row stops eating half the screen */
  .inp-category-pills {
    gap: 0.35rem;
    margin-top: 0.35rem;
  }
  .inp-pill {
    padding: 0.28rem 0.65rem;
    font-size: 0.6875rem;
    letter-spacing: 0.01em;
  }
}

/* Atlantic-style list: every post is image-left + headline-right */
.inp-news-list-section .wp-block-query,
.inp-news-list-section .wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block !important;
  gap: 0 !important;
}
.inp-news-list-section .wp-block-post-template > li {
  list-style: none;
}

.inp-news-row {
  display: grid !important;
  grid-template-columns: 240px 1fr;
  gap: 1.75rem;
  align-items: start;
  padding: 1.75rem 0 !important;
  border-bottom: 1px solid var(--border);
  transition: background 0.18s ease;
}
.inp-news-row:first-child {
  padding-top: 0.5rem !important;
}
.inp-news-row:hover .inp-news-row-title a {
  color: var(--red);
}

.inp-news-row-image {
  margin: 0 !important;
}
.inp-news-row-image img,
.inp-news-row-image a img,
.inp-news-row-image .wp-block-post-featured-image__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
.inp-news-row-body {
  padding: 0 !important;
}
.inp-news-row-body .inp-post-meta {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}
.inp-news-row-body .inp-post-meta a {
  color: var(--red);
  text-decoration: none;
}
.inp-news-row-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.625rem !important;
}
.inp-news-row-title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.18s ease;
}
.inp-news-row-excerpt {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 0.625rem !important;
}
.inp-news-row-date {
  color: var(--text-muted);
  font-size: 0.75rem !important;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .inp-news-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .inp-news-row-image img {
    aspect-ratio: 16 / 9;
  }
}

/* Scrolling ticker — sits below the hero on the homepage.
   Pattern mirrored from Activate Pinellas' pb-promo.

   Two markups supported:
   (A) Legacy .inp-promo / .inp-promo-track (hardcoded wp:html). Kept so older
       content still renders if anyone restores it.
   (B) Editable wp:list with className "inp-ticker-list". A tiny JS file
       (assets/ticker.js) wraps the <ul> in .inp-ticker > .inp-ticker-track,
       and clones the list once for a seamless loop. Volunteers edit the
       ticker as a normal bulleted list in the block editor.                  */
.inp-promo {
  background: var(--navy);
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding: 0.625rem 0;
}
.inp-promo-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
  width: max-content;
  animation: inp-ticker 90s linear infinite;
  will-change: transform;
}
.inp-promo:hover .inp-promo-track {
  animation-play-state: paused;
}
.inp-promo-item {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
}
.inp-promo-item a {
  color: var(--cyan) !important;
  text-decoration: none;
  margin-left: 0.5rem;
}
.inp-promo-item a:hover {
  text-decoration: underline;
}
.inp-promo-star {
  color: var(--red);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ---- New editable ticker (wp:list, className inp-ticker-list) ---- */

/* Wrapper added by assets/ticker.js around the list. */
.inp-ticker {
  background: var(--navy);
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding: 0.625rem 0;
}

/* Track holds the original list + one clone, side by side. */
.inp-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: inp-ticker 90s linear infinite;
  will-change: transform;
}
.inp-ticker:hover .inp-ticker-track {
  animation-play-state: paused;
}

/* The wp:list block itself — flat row, no bullets, no margins. */
.inp-ticker-list,
.wp-block-list.inp-ticker-list {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0 1rem 0 0;
  white-space: nowrap;
}

/* Each <li> is a single ticker item, styled like the old .inp-promo-item.
   The red star sits AFTER each item via ::after so volunteers don't need to
   add separators by hand. */
.inp-ticker-list > li {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  flex-shrink: 0;
  margin: 0;
  padding: 0 2rem 0 0;
}
.inp-ticker-list > li::after {
  content: "\2605"; /* red star separator */
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
}
.inp-ticker-list > li:last-child {
  padding-right: 0;
}
.inp-ticker-list > li:last-child::after {
  content: none;
}
/* On the cloned list, ALWAYS show the trailing star on the last item so the
   loop boundary between the two lists also gets a separator. */
.inp-ticker-list--clone > li:last-child {
  padding-right: 2rem;
}
.inp-ticker-list--clone > li:last-child::after {
  content: "\2605";
}

.inp-ticker-list a {
  color: var(--cyan) !important;
  text-decoration: none;
  margin-left: 0.5rem;
}
.inp-ticker-list a:hover {
  text-decoration: underline;
}

/* While the JS hasn't run yet (or on no-JS), make sure the list still looks
   like a single horizontal row instead of a stacked bullet list. */
ul.inp-ticker-list:not([data-inp-ticker-init]) {
  overflow: hidden;
}

@keyframes inp-ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .inp-promo-track,
  .inp-ticker-track {
    animation: none;
  }
  .inp-promo,
  .inp-ticker {
    overflow-x: auto;
  }
}

/* Quick-nav sub-page links (Resources page, etc.)
   Visually distinct from .inp-resource-item content cards:
   - left navy accent bar (vs. top cyan→red stripe on content cards)
   - right-side arrow (vs. inline-after-title on content cards)
   - tighter padding, smaller cards, denser grid
   - reads as "navigate to a sub-page" rather than "open a tool" */
.inp-quick-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 0.75rem;
  margin: 1.5rem 0 0.5rem;
  align-items: stretch;
}
@media (min-width: 768px) {
  .inp-quick-nav {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
  }
}
.inp-quick-nav .wp-block-buttons.inp-quick-link-wrap,
.inp-quick-nav .wp-block-button.inp-quick-link,
.inp-quick-nav .wp-block-button.inp-quick-link > .wp-block-button__link {
  height: 100%;
}
/* Legacy plain-anchor variant — scoped to a. so it doesn't double-style
 * the wp:button wrapper used by the new inp/nav-card pattern. Same defensive
 * fix applied to .inp-btn-primary/-secondary/-tertiary in the hero buttons
 * refactor (see lines ~283+ and ~5547+). Kept in case any non-pattern code
 * still emits <a class="inp-quick-link" href=...>. */
a.inp-quick-link {
  display: block;
  padding: 0.875rem 2.5rem 0.875rem 1.125rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
  position: relative;
  overflow: hidden;
}
/* Override: no top gradient stripe on nav cards (reserved for content cards) */
a.inp-quick-link::before {
  content: none;
}
/* Right-side arrow indicates "navigate to" */
a.inp-quick-link::after {
  content: "\2192";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.0625rem;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}
a.inp-quick-link strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  line-height: 1.25;
}
/* Override: remove inline arrow after title (now on the right side of card) */
a.inp-quick-link strong::after {
  content: none;
}
a.inp-quick-link span {
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  display: block;
}
a.inp-quick-link:hover {
  border-color: var(--border);
  border-left-color: var(--red);
  box-shadow: 0 4px 14px rgba(25, 67, 121, 0.1);
  transform: translateY(-1px);
}
a.inp-quick-link:hover::after {
  transform: translateY(-50%) translateX(3px);
  color: var(--red);
}
a.inp-quick-link:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

/* === wp:button-wrapped Nav Card (inp/nav-card pattern) ===
 * Volunteers add/edit sub-page nav cards via the block inserter -> INP -> Nav Card.
 * The card is a wp:button with class .inp-quick-link; the rules below mirror
 * the legacy a.inp-quick-link styling onto the inner .wp-block-button__link
 * so the inner link IS the card. Wrappers (.wp-block-buttons.inp-quick-link-wrap,
 * .wp-block-button.inp-quick-link) are kept neutral so they don't double-frame.
 *
 * Pattern: <Tisa wants volunteers to manage these in the editor.>
 * Visual MUST match the prior plain-anchor render on /resources/ exactly.
 */

/* Neutralize the wp:buttons wrapper — no flex centering, no padding.
 * Grid cell in .inp-quick-nav gives the card its width. */
.inp-quick-nav .wp-block-buttons.inp-quick-link-wrap {
  display: block;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* Neutralize the wp:button wrapper div — no inline-block, no padding, full width */
.inp-quick-nav .wp-block-button.inp-quick-link {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: inherit;
}

/* The inner link IS the visible card.
 * Important !important overrides because theme.json sets element.button
 * typography (uppercase, letter-spacing, font-size) + .wp-block-button
 * .wp-block-button__link (line ~1123) sets box-shadow/border-radius for
 * normal pill buttons. We want a flat card, not a pill. */
.wp-block-button.inp-quick-link > .wp-block-button__link {
  display: block;
  width: 100%;
  padding: 0.875rem 2.5rem 0.875rem 1.125rem !important;
  background: var(--white) !important;
  background-color: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--navy) !important;
  border-radius: 8px !important;
  text-decoration: none;
  color: var(--text-muted) !important;
  text-align: left;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
  position: relative;
  overflow: hidden;
  box-shadow: none !important;
}
/* Right-side arrow */
.wp-block-button.inp-quick-link > .wp-block-button__link::after {
  content: "\2192";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.0625rem;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}
/* <strong> = title — block-level, display font, bold, navy */
.wp-block-button.inp-quick-link > .wp-block-button__link strong {
  display: block;
  font-family: var(--font-display) !important;
  font-size: 0.9375rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.2rem;
  line-height: 1.25;
}
.wp-block-button.inp-quick-link > .wp-block-button__link:hover {
  border-color: var(--border) !important;
  border-left-color: var(--red) !important;
  box-shadow: 0 4px 14px rgba(25, 67, 121, 0.1) !important;
  transform: translateY(-1px);
  background: var(--white) !important;
  background-color: var(--white) !important;
  color: var(--text-muted) !important;
}
.wp-block-button.inp-quick-link > .wp-block-button__link:hover::after {
  transform: translateY(-50%) translateX(3px);
  color: var(--red);
}
.wp-block-button.inp-quick-link > .wp-block-button__link:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

/* Volunteer page hero — proper banner sizing */
.inp-volunteer-hero {
  margin: 1.5rem 0 2rem !important;
  max-width: 100% !important;
}
.inp-volunteer-hero img {
  width: 100% !important;
  max-height: 360px !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  border-radius: 12px !important;
  display: block;
}

/* --- Related Posts on single post pages (v3.7.8) --- */

.inp-related-section {
  background: var(--cream-light, #faf7f2);
  border-top: 1px solid var(--border);
}

.inp-related-section .inp-section-label,
.inp-related-section .inp-related-title,
.inp-related-section .wp-block-query,
.inp-related-section > .wp-block-buttons {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

.inp-related-section .inp-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}

.inp-related-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  margin: 0 auto 1.75rem !important;
  letter-spacing: -0.02em;
}

.inp-related-section .inp-related-card {
  text-align: left;
}

.inp-related-section .wp-block-post-template.inp-related-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
.inp-related-section .wp-block-post-template.inp-related-grid > li {
  list-style: none;
  margin: 0;
}

.inp-related-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
  height: 100%;
}
.inp-related-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.inp-related-card .wp-block-post-featured-image {
  margin: 0 !important;
}
.inp-related-card .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}
.inp-related-card-body {
  padding: 1rem 1.25rem 1.25rem !important;
}
.inp-related-card .inp-post-meta {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem !important;
}
.inp-related-card .inp-post-meta a {
  color: var(--red);
  text-decoration: none;
}
.inp-related-card-title {
  font-family: var(--font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 0.5rem !important;
  letter-spacing: -0.01em;
}
.inp-related-card-title a {
  color: var(--text-primary) !important;
  text-decoration: none;
  transition: color 0.18s ease;
}
.inp-related-card-title a:hover {
  color: var(--red) !important;
}
.inp-related-card .wp-block-post-date {
  color: var(--text-muted) !important;
  font-size: 0.8125rem !important;
}

@media (max-width: 900px) {
  .inp-related-section .wp-block-post-template.inp-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Nav active page indicator (v3.8.3) --- */
/* WordPress auto-adds .current-menu-item to the active page's <li>. Style it. */
.inp-nav-links .current-menu-item > a,
.inp-nav-links .current-menu-parent > a,
.inp-nav-links .current-menu-ancestor > a,
.inp-nav-links .current_page_item > a,
.inp-nav-links .current_page_parent > a,
.inp-nav-links .current_page_ancestor > a {
  color: #ffffff !important;
  position: relative;
}
.inp-nav-links .current-menu-item > a::after,
.inp-nav-links .current-menu-parent > a::after,
.inp-nav-links .current-menu-ancestor > a::after,
.inp-nav-links .current_page_item > a::after,
.inp-nav-links .current_page_parent > a::after,
.inp-nav-links .current_page_ancestor > a::after {
  content: "";
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--cyan, #57c6d7);
  border-radius: 1px;
}

/* Don't draw an underline under the CTA pills (Join Us / Donate) —
   they get a subtle ring instead so the pill shape is preserved. */
.inp-nav-links .inp-nav-cta.current-menu-item > a::after,
.inp-nav-links .inp-nav-cta.current_page_item > a::after {
  display: none;
}
.inp-nav-links .inp-nav-cta.current-menu-item > a,
.inp-nav-links .inp-nav-cta.current_page_item > a {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* Wider Join Us / Donate pills so "JOIN US" doesn't look squished
   next to "DONATE" (which renders slightly wider naturally). */
.inp-nav-cta a {
  min-width: 5.25rem;
  text-align: center;
}

/* Related posts ("Keep Reading") at the bottom of single post */
.inp-related-posts {
  margin-top: 3rem !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--border, #e5e7eb);
}
.inp-related-heading {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  margin: 0 0 1.5rem !important;
  letter-spacing: -0.02em;
}
.inp-related-grid {
  gap: 1.5rem !important;
}
.inp-related-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.inp-related-card .wp-block-post-featured-image {
  margin-bottom: 0.75rem !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f7f4ec !important;
}
.inp-related-card .wp-block-post-featured-image a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}
.inp-related-card .wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  display: block !important;
  padding: 4px;
  box-sizing: border-box;
}
.inp-related-cat {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red, #ee2324) !important;
  margin: 0 !important;
}
.inp-related-cat a {
  color: var(--red, #ee2324);
  text-decoration: none;
}
.inp-related-title {
  font-family: var(--font-display) !important;
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}
.inp-related-title a {
  color: inherit;
  text-decoration: none;
}
.inp-related-title a:hover {
  color: var(--red, #ee2324);
}
.inp-related-date {
  color: var(--text-muted, #6b7280) !important;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .inp-related-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Calendar page "What's Happening" volunteer-editable callout */
.inp-whats-new-callout {
  background: #fffbe6;
  border-left: 6px solid var(--yellow, #ddef08);
  border-radius: 8px;
  padding: 1.5rem 1.75rem !important;
  margin: 1.5rem auto 2.5rem !important;
  max-width: 1100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.inp-whats-new-callout .inp-whats-new-eyebrow {
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red, #ee2324);
  margin: 0 0 0.5rem !important;
}
.inp-whats-new-callout h2 {
  font-family: var(--font-display) !important;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  font-weight: 800 !important;
  margin: 0 0 0.75rem !important;
  color: var(--navy, #194379);
  line-height: 1.2;
}
.inp-whats-new-callout p {
  margin: 0 0 0.75rem !important;
  line-height: 1.55;
}
.inp-whats-new-callout p:last-child {
  margin-bottom: 0 !important;
}
.inp-whats-new-callout .inp-whats-new-meta {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  font-style: italic;
}

/* Calendar embed - trim padding */
.inp-section:has(.inp-gcal-embed) {
  padding-top: 0 !important;
  padding-bottom: 1rem !important;
}

/* CALENDAR PAGE: just tighten the yellow callout, let inp-page-intro use standard padding */
.page-id-22 .inp-whats-new-callout {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* (page.html no longer renders wp:post-title — no per-page hide needed) */

/* ====== STANDARDIZED PAGE HEADER (eyebrow + H1 + intro) ======
   Every live page (not homepage hero) uses .inp-page-intro as its first section.
   Tight top padding, consistent eyebrow + H1 + intro sizes. */
.inp-page-intro {
  padding-top: 1.25rem !important;
  padding-bottom: 0.5rem !important;
  /* Restore horizontal padding that has-global-padding wipes when post-content is top-level */
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
}
/* Also restore horizontal padding on ALL .inp-section blocks since has-global-padding is wiping it */
.wp-block-group.inp-section.has-global-padding {
  padding-left: clamp(1rem, 4vw, 2rem) !important;
  padding-right: clamp(1rem, 4vw, 2rem) !important;
}
.inp-page-intro .inp-section-label,
.inp-page-intro p.inp-section-label {
  margin: 0 auto 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red, #ee2324) !important;
}
.inp-page-intro h1,
.inp-page-intro .wp-block-heading {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 4.5vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 0 auto 0.5rem !important;
  letter-spacing: -0.02em;
  color: #000000 !important;
}
.inp-page-intro p.has-large-font-size {
  margin: 0.5rem auto 0 !important;
  font-size: clamp(1rem, 1.5vw, 1.125rem) !important;
  line-height: 1.55 !important;
  color: var(--text, #1f2937);
}

/* (removed) — `.inp-page-intro + .inp-section { padding-top: 0.5rem }` was crushing
   the second section's top padding sitewide. Universal `.inp-section + .inp-section`
   rule near line 880 now handles all stacked-section spacing consistently. */

/* ============================================
   Masonry cluster gallery — fills space with mixed aspect ratios
   Apply by adding className "is-style-inp-cluster" on wp:gallery
   ============================================ */
.wp-block-gallery.is-style-inp-cluster {
  display: block !important;
  column-count: 3;
  column-gap: 18px;
  margin: 2rem 0;
}
.wp-block-gallery.is-style-inp-cluster .wp-block-image,
.wp-block-gallery.is-style-inp-cluster figure.wp-block-image {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 18px 0 !important;
  padding-bottom: 0 !important;
  display: inline-block !important;
  width: 100% !important;
  max-width: 100% !important;
  vertical-align: top;
}
.wp-block-gallery.is-style-inp-cluster .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin: 0 !important;
}
@media (max-width: 900px) {
  .wp-block-gallery.is-style-inp-cluster {
    column-count: 2;
  }
}
@media (max-width: 540px) {
  .wp-block-gallery.is-style-inp-cluster {
    column-count: 1;
  }
}

/* ============================================
   Single-post visual hierarchy upgrade
   ============================================ */

/* Reading-time pill */
.inp-reading-time {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  letter-spacing: 0.01em;
}

/* Drop cap removed — Inter at large sizes doesn't have the display contrast a drop cap needs. */

/* H3 inside post content gets red accent bar + breathing room */
.single .wp-block-post-content h3.wp-block-heading,
.single-post .wp-block-post-content h3.wp-block-heading {
  position: relative;
  padding-left: 1.25rem;
  margin-top: 3.5rem !important;
  margin-bottom: 1.25rem !important;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  letter-spacing: -0.01em;
}
.single .wp-block-post-content h3.wp-block-heading::before,
.single-post .wp-block-post-content h3.wp-block-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 4px;
  background: var(--red, #ee2324);
  border-radius: 2px;
}

/* H2 inside post content - bigger, more space */
.single .wp-block-post-content h2.wp-block-heading,
.single-post .wp-block-post-content h2.wp-block-heading {
  margin-top: 4rem !important;
  margin-bottom: 1.5rem !important;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #000;
}

/* Pull quote — red top/bottom rule, centered, italic, large */
.single .wp-block-post-content .wp-block-pullquote,
.single-post .wp-block-post-content .wp-block-pullquote {
  border-top: 3px solid var(--red, #ee2324);
  border-bottom: 3px solid var(--red, #ee2324);
  border-left: none;
  border-right: none;
  padding: 2rem 1rem;
  margin: 3rem 0;
  text-align: center;
  background: transparent;
}
.single .wp-block-post-content .wp-block-pullquote p,
.single-post .wp-block-post-content .wp-block-pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy, #194379);
  margin: 0;
}
.single .wp-block-post-content .wp-block-pullquote cite,
.single-post .wp-block-post-content .wp-block-pullquote cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}

/* Callout box — for "Your Three Rights", policy summaries, etc.
 * Top padding tightened from 1.5rem to 0.75rem so the heading inside the
 * yellow box sits visually closer to the top edge (was ~24px gap, now ~12px). */
.inp-callout {
  background: #fef9c3;
  border-left: 5px solid #ddef08;
  padding: 0.75rem 1.75rem 1.5rem;
  margin: 2.5rem 0;
  border-radius: 6px;
}
.inp-callout > *:first-child {
  margin-top: 0 !important;
}
.inp-callout > *:last-child {
  margin-bottom: 0 !important;
}
.inp-callout h3,
.inp-callout h4 {
  padding-left: 0 !important;
  margin-top: 0 !important;
  font-family: var(--font-display);
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000 !important;
}
.inp-callout h3::before,
.inp-callout h4::before {
  display: none !important;
}
.inp-callout p {
  margin: 0.5rem 0;
  font-size: 1rem;
  line-height: 1.6;
}
.inp-callout strong {
  color: var(--red, #ee2324);
}

/* Urgent CTA variant for the inp/call-to-action pattern.
 * Volunteer picks the "Urgent (Action Alert)" block style on the wp:group
 * inside the pattern — adds a red top border, subtle red tint, and an
 * "ACTION ALERT" eyebrow above the heading. Block style is registered in
 * functions.php as 'inp-urgent' for core/group. */
.inp-action-item.is-style-inp-urgent {
  border-top: 4px solid var(--red, #ee2324);
  background: #fff5f5;
  position: relative;
}
.inp-action-item.is-style-inp-urgent::before {
  content: "ACTION ALERT";
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red, #ee2324);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Paragraph spacing inside post content — slightly more breathing room */
.single .wp-block-post-content > p,
.single-post .wp-block-post-content > p {
  margin: 0 0 1.25rem;
  line-height: 1.7;
  font-size: 1.0625rem;
}

/* === Hero pill buttons — also style wp:button wrappers ===
 * The hero originally used plain <a class="inp-btn-primary"> anchors (in wp:html).
 * Now it uses wp:button blocks with the same class so volunteers can edit copy
 * and URL through the editor UI. The rules below mirror the standalone anchor
 * styles above (lines ~279–347) onto .wp-block-button.inp-btn-* wrappers.
 * Visual must match the prior pill-shaped CTAs exactly.
 */
.wp-block-button.inp-btn-primary > .wp-block-button__link {
  background: var(--red) !important;
  color: white !important;
  padding: 0.8rem 1.75rem;
  border-radius: 980px !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 12px rgba(238, 35, 36, 0.2);
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
}
.wp-block-button.inp-btn-primary > .wp-block-button__link:hover {
  background: var(--red-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(238, 35, 36, 0.3);
}

.wp-block-button.inp-btn-secondary > .wp-block-button__link {
  background: transparent !important;
  color: #0a7d8d !important;
  padding: 0.8rem 1.75rem;
  border-radius: 980px !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1.5px solid #0a7d8d !important;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.15s;
}
.wp-block-button.inp-btn-secondary > .wp-block-button__link:hover {
  background: #0a7d8d !important;
  color: white !important;
  transform: translateY(-2px);
}

.wp-block-button.inp-btn-tertiary > .wp-block-button__link {
  background: transparent !important;
  color: var(--text, #1f2937) !important;
  padding: 0.8rem 1.75rem;
  border-radius: 980px !important;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1.5px solid rgba(31, 41, 55, 0.25) !important;
  transition:
    border-color 0.2s,
    color 0.2s,
    transform 0.15s;
}
.wp-block-button.inp-btn-tertiary > .wp-block-button__link:hover {
  border-color: var(--text, #1f2937) !important;
  transform: translateY(-2px);
}

/* Mobile — full-width pill buttons in hero (mirrors the rule at line ~565
 * for the plain anchors). */
@media (max-width: 768px) {
  .wp-block-button.inp-btn-primary > .wp-block-button__link,
  .wp-block-button.inp-btn-secondary > .wp-block-button__link,
  .wp-block-button.inp-btn-tertiary > .wp-block-button__link {
    text-align: center;
    justify-content: center;
    width: 100%;
  }
}

/* Neutralizer rule removed: the legacy .inp-btn-* rules above are now scoped
 * to a. selectors so they no longer match wp:button wrappers. The
 * .wp-block-button.inp-btn-* > .wp-block-button__link rules above style the
 * inner link as the pill; the wrapper has no class-based styling. */

/* ============================================================
 * inp-tight-top — opt-out of the universal stacked-section spacing
 * ============================================================
 * The sitewide rule .inp-section + .inp-section { padding-top: clamp(...)
 * !important } adds ~3.75rem between every stacked .inp-section. For cases
 * where two sections should sit closer (e.g. intro paragraph + immediate
 * follow-up CTA), add className "inp-tight-top" to the SECOND section. */
.inp-section.inp-tight-top {
  padding-top: 0 !important;
}

/* ============================================================
 * Gallery: Horizontal Carousel block style
 * ============================================================
 * Volunteer applies via right sidebar Styles panel ("Horizontal Carousel"
 * vs default "Default" grid). Same wp:gallery block, two display modes.
 * Default = flex-wrap: wrap → wrapped grid. This style → single horizontal
 * scrolling strip. Lightbox click-to-enlarge works for both modes. */

.wp-block-gallery.is-style-inp-carousel {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px !important;
  padding-bottom: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.05);
  /* Fills section width — at ~1100px desktop with 240px images + 12px gap,
   * ~4 photos visible at once. Volunteer scrolls for the rest. */
}

.wp-block-gallery.is-style-inp-carousel .wp-block-image {
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  scroll-snap-align: start;
  margin: 0 !important;
}

.wp-block-gallery.is-style-inp-carousel .wp-block-image img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.wp-block-gallery.is-style-inp-carousel::-webkit-scrollbar {
  height: 8px;
}
.wp-block-gallery.is-style-inp-carousel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}
.wp-block-gallery.is-style-inp-carousel::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.wp-block-gallery.is-style-inp-carousel::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
  .wp-block-gallery.is-style-inp-carousel .wp-block-image {
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
  }
  .wp-block-gallery.is-style-inp-carousel .wp-block-image img {
    height: 150px;
  }
}

/* --- Query Loop card layout (Past Meetings, etc.) ---
   When .inp-post-card sits inside a wp:post-template grid <li>,
   strip the LI padding/border so the card spans cell edge-to-edge.
   Padding lives on .inp-post-card-body so the featured image can
   reach the card border. CTA pins to the bottom. */
.wp-block-post-template.is-layout-grid > li:has(> .inp-post-card),
.wp-block-post-template.is-layout-grid
  > li:has(> .wp-block-group.inp-post-card) {
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.inp-post-card > figure.wp-block-post-featured-image,
.inp-post-card > .wp-block-post-featured-image {
  margin: 0 !important;
}

.inp-post-card > figure.wp-block-post-featured-image img,
.inp-post-card > .wp-block-post-featured-image img {
  border-radius: 0 !important;
  width: 100% !important;
  display: block;
}

.inp-post-card > .inp-post-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.5rem;
}

.inp-post-card-body > .wp-block-post-date {
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
  margin: 0 !important;
  order: 1;
}

.inp-post-card-body > .wp-block-post-date a {
  color: var(--red) !important;
  text-decoration: none !important;
}

.inp-post-card-body > .wp-block-post-title {
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.25rem !important;
  order: 2;
}

.inp-post-card-body > .wp-block-post-title a {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.inp-post-card-body > .wp-block-post-title a:hover {
  color: var(--cyan) !important;
}

/* Suppress the global ::after arrow on the title — the bottom
   "Read recap →" link already carries the click affordance. */
.inp-post-card-body > .wp-block-post-title a::after {
  content: none !important;
}

.inp-post-card-body > .wp-block-post-excerpt {
  font-size: 0.9375rem !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  flex: 1 1 auto;
  order: 3;
}

.inp-post-card-body > .wp-block-post-excerpt p {
  margin: 0 !important;
}

.inp-post-card-body > .wp-block-read-more {
  margin: 0 !important;
  margin-top: auto !important;
  padding-top: 0.75rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  color: var(--cyan) !important;
  text-decoration: none !important;
  order: 4;
  display: inline-block;
  align-self: flex-start;
}

.inp-post-card-body > .wp-block-read-more:hover {
  color: var(--navy) !important;
}

/* ============================================================
 * v3.10.43 — Audit punchlist 2026-05-20 additions
 * ============================================================ */

/* Screen-reader-only utility (a11y #13 — generic CTA arrow context) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Take Action wide horizontal rows (#18) — replaces narrow numbered cards.
 * Mobile first: stacked. Desktop: 80px number left, content middle, CTA right. */
.inp-take-action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.inp-take-action-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--red);
  border-radius: 14px 0 0 14px;
}
.inp-take-action-row .inp-tar-number {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}
.inp-take-action-row .inp-tar-body h3,
.inp-take-action-row .inp-tar-body .wp-block-heading {
  margin: 0 0 0.5rem !important;
  color: var(--navy) !important;
  font-size: 1.375rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}
.inp-take-action-row .inp-tar-body p {
  margin: 0 !important;
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.55;
}
.inp-take-action-row .inp-tar-cta {
  align-self: center;
}
@media (min-width: 768px) {
  .inp-take-action-row {
    grid-template-columns: 80px 1fr auto;
    gap: 1.75rem;
    align-items: center;
    padding: 2rem 2.25rem;
  }
}

/* This Week — 3 numbered cyan-numeral cards (#6).
 * Mirrors .inp-action-card but with a big cyan number top-left.
 * #33 — equal card heights. WP's default is-layout-flex applies
 * align-items: center to columns and won't stretch reliably even
 * with !important overrides, so force CSS grid on the parent. */
.inp-this-week-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}
@media (max-width: 781px) {
  .inp-this-week-grid {
    grid-template-columns: 1fr !important;
  }
}
.inp-this-week-grid > .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.inp-this-week-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem 1.5rem 1.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 200px;
  flex: 1 1 auto;
  height: 100%;
}
.inp-this-week-card .inp-twc-number {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}
.inp-this-week-card h3,
.inp-this-week-card .wp-block-heading {
  margin: 0 !important;
  color: var(--navy) !important;
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
.inp-this-week-card p {
  margin: 0 !important;
  color: var(--text-body);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Trust stats strip below hero (#25) — 3-stat horizontal row */
.inp-trust-stats {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.inp-trust-stats > p,
.inp-trust-stats .wp-block-paragraph {
  margin: 0 !important;
  color: var(--navy) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
.inp-trust-stats strong {
  color: var(--red);
  font-weight: 900;
}
@media (min-width: 768px) {
  .inp-trust-stats {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
  }
  .inp-trust-stats > p,
  .inp-trust-stats .wp-block-paragraph {
    font-size: 1.0625rem;
    flex: 1;
    position: relative;
  }
  .inp-trust-stats > p + p::before,
  .inp-trust-stats .wp-block-paragraph + .wp-block-paragraph::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: var(--red);
    opacity: 0.5;
  }
}

/* Voter Resources inline anchor pills (#19) — pill strip at each section top */
.inp-voter-anchor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem !important;
  padding: 0.75rem 0 !important;
  list-style: none;
}
.inp-voter-anchor-pills li {
  list-style: none;
}
.inp-voter-anchor-pills a,
.inp-voter-anchor-pills .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.875rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 980px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.inp-voter-anchor-pills a:hover,
.inp-voter-anchor-pills a:focus,
.inp-voter-anchor-pills .wp-block-button__link:hover,
.inp-voter-anchor-pills .wp-block-button__link:focus {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Single post meta sidebar rail (#21) — sticky on desktop, stacked on mobile */
.inp-post-meta-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg-alt);
  border-radius: 10px;
  font-size: 0.9375rem;
  margin: 2rem 0;
}
.inp-post-meta-rail h4 {
  margin: 0 0 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted) !important;
}
.inp-post-meta-rail .inp-pmr-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.inp-post-meta-rail .inp-pmr-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.inp-post-meta-rail .inp-pmr-share a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
@media (min-width: 1100px) {
  .inp-post-meta-rail {
    position: sticky;
    top: 6rem;
    margin: 0;
  }
}

/* Past Meetings pagination — red pill buttons (#24) */
.inp-pagination-pill .wp-block-query-pagination,
.inp-pagination-pill.wp-block-query-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 3rem 0 2rem;
}
.inp-pagination-pill .wp-block-query-pagination-previous,
.inp-pagination-pill .wp-block-query-pagination-next,
.inp-pagination-pill .wp-block-query-pagination-numbers a,
.inp-pagination-pill .wp-block-query-pagination-numbers .page-numbers,
.inp-pagination-pill.wp-block-query-pagination
  .wp-block-query-pagination-previous,
.inp-pagination-pill.wp-block-query-pagination .wp-block-query-pagination-next,
.inp-pagination-pill.wp-block-query-pagination
  .wp-block-query-pagination-numbers
  a,
.inp-pagination-pill.wp-block-query-pagination
  .wp-block-query-pagination-numbers
  .page-numbers {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 1rem !important;
  background: var(--red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 980px !important;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none !important;
  transition:
    background 0.15s,
    transform 0.1s;
}
.inp-pagination-pill .wp-block-query-pagination-previous:hover,
.inp-pagination-pill .wp-block-query-pagination-next:hover,
.inp-pagination-pill .wp-block-query-pagination-numbers a:hover {
  background: var(--red-hover) !important;
  transform: translateY(-1px);
}
.inp-pagination-pill .wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--navy) !important;
}

/* Single post template — wider content + meta rail (#21) */
.inp-single-wrap {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.inp-single-columns {
  align-items: flex-start;
}
.inp-single-content {
  min-width: 0;
}
.inp-single-rail {
  font-size: 0.9375rem;
}
@media (max-width: 1023px) {
  .inp-single-columns {
    flex-wrap: wrap;
  }
  .inp-single-rail {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* EveryAction required-field asterisk (#23) — scoped to Join page only.
 *
 * EveryAction labels wrap their inputs: <label>Field Name<input required/></label>
 * so a plain ::after lands at the END of the label (below the input).
 * Two-pronged fix:
 * 1) Inject asterisk at start of label via ::before — sits next to the label text.
 * 2) Target by EveryAction's per-field CSS classes (FirstName / LastName / etc.)
 *    so we don't accidentally mark Optional fields.
 */
body.page-id-12 .ngp-form .at-fieldset label.FirstName::before,
body.page-id-12 .ngp-form .at-fieldset label.LastName::before,
body.page-id-12 .ngp-form .at-fieldset label.PostalCode::before,
body.page-id-12 .ngp-form .at-fieldset label.City::before,
body.page-id-12 .ngp-form .at-fieldset label.StateProvince::before,
body.page-id-12 .ngp-form .at-fieldset label.EmailAddress::before,
body.page-id-12 form label.FirstName::before,
body.page-id-12 form label.LastName::before,
body.page-id-12 form label.PostalCode::before,
body.page-id-12 form label.City::before,
body.page-id-12 form label.StateProvince::before,
body.page-id-12 form label.EmailAddress::before,
body.page-id-12 .inp-everyaction-required::before {
  content: "* ";
  color: #ee2324;
  font-weight: 700;
  margin-right: 0.125em;
}

/* Hide the trailing ::after asterisks the :has() rule would otherwise create
 * (they appear below the input box because labels wrap inputs). */
body.page-id-12 form label:has(input[required])::after,
body.page-id-12 form label:has(select[required])::after,
body.page-id-12 form label:has(textarea[required])::after {
  content: none;
}

/* ============================================================
 * v3.10.46 — Audit punchlist Pass 2 (items #26-32)
 * ============================================================ */

/* #32 — Meeting banner: stack "Get Directions →" on its own full-width
 * line at narrow widths with min 44px tap target. */
.inp-meeting-banner-text {
  margin: 0 !important;
  padding: 0 !important;
  display: inline;
}
.inp-meeting-banner-directions {
  display: inline;
}
@media (max-width: 600px) {
  /* Compact, single flowing line(s) — no full-width button, smaller text. */
  .inp-meeting-banner {
    font-size: 0.6875rem !important;
    letter-spacing: 0.03em !important;
    padding: 0.4rem 0.85rem !important;
  }
  .inp-meeting-banner p {
    font-size: 0.6875rem !important;
    line-height: 1.35 !important;
  }
  .inp-meeting-banner-text {
    display: inline !important;
    text-align: center;
  }
  .inp-meeting-banner-info {
    display: inline;
  }
  .inp-meeting-banner-directions {
    display: inline !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 0 0 0.35rem !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    font-weight: 700 !important;
    white-space: nowrap;
  }
}

/* #31 — Scope overflow-x: clip to ticker wrapper only (was on body).
 * Ticker already has overflow:hidden so this is a belt-and-suspenders
 * — but the explicit clip on body-replacement is what this comment
 * tracks. The actual overflow:hidden lives at ~5031. */

/* #27 — Homepage "Latest from the Blog" cards: 16:9 image crop, equal
 * card heights, hover lift. Targets the wp:latest-posts grid output.
 * #34 — center the UL within its constrained section (was flush-left,
 * heading + button siblings center via is-layout-constrained auto-margins
 * but UL had margin: 0 0 1.5rem which killed the auto centering). */
ul.wp-block-latest-posts__list.is-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 1.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto 1.5rem !important;
}
@media (max-width: 900px) {
  ul.wp-block-latest-posts__list.is-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  ul.wp-block-latest-posts__list.is-grid {
    grid-template-columns: 1fr !important;
  }
}
ul.wp-block-latest-posts__list.is-grid > li {
  display: flex !important;
  flex-direction: column !important;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
ul.wp-block-latest-posts__list.is-grid > li:hover,
ul.wp-block-latest-posts__list.is-grid > li:focus-within {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
ul.wp-block-latest-posts__list.is-grid
  > li
  > .wp-block-latest-posts__featured-image {
  display: block;
  margin: 0 !important;
  width: 100%;
  overflow: hidden;
}
ul.wp-block-latest-posts__list.is-grid
  > li
  > .wp-block-latest-posts__featured-image
  img {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
ul.wp-block-latest-posts__list.is-grid
  > li
  > .wp-block-latest-posts__post-title {
  display: block;
  margin: 1rem 1.25rem 0.25rem !important;
  font-family: var(--font-display) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--navy) !important;
  text-decoration: none !important;
}
ul.wp-block-latest-posts__list.is-grid
  > li
  > .wp-block-latest-posts__post-title:hover {
  color: var(--cyan) !important;
}
ul.wp-block-latest-posts__list.is-grid
  > li
  > time.wp-block-latest-posts__post-date {
  display: block;
  margin: 0 1.25rem 0.5rem !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--red) !important;
}
ul.wp-block-latest-posts__list.is-grid
  > li
  > .wp-block-latest-posts__post-excerpt {
  margin: 0 1.25rem 1.25rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.55 !important;
  color: var(--text-muted) !important;
  flex: 1 1 auto;
}

/* #28 — Footer Connect column social icons (small inline SVG before each link).
 * Scoped to .inp-footer-connect to avoid bleeding into other footer columns. */
.inp-footer-connect ul li a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.inp-footer-connect ul li svg.inp-social-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.inp-footer-connect ul li a:hover svg.inp-social-icon {
  opacity: 1;
}

/* #26 — Mobile nav: expandable sub-nav for items with children.
 * The walker outputs <li class="inp-has-submenu inp-mobile-parent">
 *   <a>Parent</a>
 *   <button class="inp-mobile-subnav-toggle" ...>chevron</button>
 *   <ul class="inp-mobile-sublist" hidden> children </ul>
 * </li>
 * Tap = toggle hidden + aria-expanded. */
.inp-mobile-links li.inp-mobile-parent {
  position: relative;
}
.inp-mobile-links li.inp-mobile-parent > a {
  display: inline-block;
  padding-right: 56px; /* leave room for the toggle button */
}
.inp-mobile-subnav-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: rgba(245, 245, 247, 0.85);
  cursor: pointer;
  padding: 0;
  font-size: 0;
}
.inp-mobile-subnav-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: -4px;
  border-radius: 4px;
}
.inp-mobile-subnav-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
.inp-mobile-subnav-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
ul.inp-mobile-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.inp-mobile-sublist[hidden] {
  display: none;
}
ul.inp-mobile-sublist li a {
  display: block;
  padding: 0.5rem 0 0.5rem 1.5rem !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: rgba(245, 245, 247, 0.7) !important;
}
ul.inp-mobile-sublist li a:hover {
  color: var(--cyan) !important;
}

/* #29 — Calendar subscribe buttons equal visual weight.
 * Wrap them with .inp-subscribe-buttons (already on the page). Both pills,
 * same padding, same border treatment. Google = filled red, Apple = white
 * with red text + red border (still readable as "the other option"). */
.inp-subscribe-buttons
  .wp-block-button.inp-btn-primary
  > .wp-block-button__link,
.inp-subscribe-buttons
  .wp-block-button.inp-btn-secondary
  > .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 980px !important;
  letter-spacing: 0.02em !important;
  border: 2px solid var(--red) !important;
  text-align: center;
}
.inp-subscribe-buttons
  .wp-block-button.inp-btn-primary
  > .wp-block-button__link {
  background-color: var(--red) !important;
  color: #ffffff !important;
}
.inp-subscribe-buttons
  .wp-block-button.inp-btn-primary
  > .wp-block-button__link:hover {
  background-color: var(--red-hover) !important;
  border-color: var(--red-hover) !important;
}
.inp-subscribe-buttons
  .wp-block-button.inp-btn-secondary
  > .wp-block-button__link {
  background-color: #ffffff !important;
  color: var(--red) !important;
}
.inp-subscribe-buttons
  .wp-block-button.inp-btn-secondary
  > .wp-block-button__link:hover {
  background-color: var(--red) !important;
  color: #ffffff !important;
}
.inp-subscribe-buttons.wp-block-buttons {
  gap: 0.75rem !important;
  flex-wrap: wrap;
}

/* ============================================================
 * v3.10.50 — Audit punchlist Pass 4 (items #35, #37, #38)
 * ============================================================ */

/* #35 — Calendar "Get Ready Now" pill grid.
 * 4 navy-outline pills, 4-col on desktop, 2x2 on mobile, 1-col on small.
 * Replaces the cyan bulleted list that looked like an afterthought next to
 * the bold red-bordered Key 2026 Election Dates cards above. */
.inp-action-pill-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1rem auto 0 !important;
  padding: 0 !important;
  list-style: none !important;
  max-width: var(--wp--style--global--content-size, 100%);
}
.inp-action-pill-grid li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.inp-action-pill-grid li::marker {
  content: "";
}
.inp-action-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 64px;
  padding: 0.875rem 1rem;
  border: 2px solid var(--navy) !important;
  border-radius: 12px;
  background: #ffffff;
  color: var(--navy) !important;
  font-family: var(--font-body);
  font-weight: 700 !important;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none !important;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease;
  box-shadow: 0 1px 0 rgba(25, 67, 121, 0.04);
}
.inp-action-pill:hover,
.inp-action-pill:focus-visible {
  background: var(--navy) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(25, 67, 121, 0.22);
}
@media (max-width: 768px) {
  .inp-action-pill-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
  .inp-action-pill {
    font-size: 0.875rem;
    padding: 0.75rem 0.625rem;
    min-height: 56px;
  }
}

/* #37(b) — Donate via ActBlue button in Join "More ways to connect"
 * disclosure. The wp:button had no INP color class so it inherited the
 * default red bg + default cyan text color (link element) — illegible.
 * Force white text on red.
 * The button block now carries className "is-style-primary-red" via the
 * REST update, but we add a safety override here scoped to .inp-btn-large
 * (its existing class). */
.wp-block-button.inp-btn-large.is-style-primary-red .wp-block-button__link,
.wp-block-button.inp-btn-large .wp-block-button__link[href*="actblue"] {
  background-color: var(--red) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
}
.wp-block-button.inp-btn-large.is-style-primary-red
  .wp-block-button__link:hover,
.wp-block-button.inp-btn-large .wp-block-button__link[href*="actblue"]:hover {
  background-color: var(--red-hover) !important;
  color: #ffffff !important;
}

/* #37(c) — Wrap "More ways to connect" disclosure in cream-light section
 * with eyebrow + visible photo gallery above. Disclosure summary gets a
 * little more weight so it reads as a section, not an inline detail. */
.inp-more-ways-section .inp-section-label {
  text-align: center;
}
.inp-more-ways-section > .inp-accordion summary {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  padding: 1rem 1.25rem !important;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--navy) !important;
}
.inp-more-ways-section .inp-trust-gallery {
  margin: 0 0 1.5rem !important;
}

/* #38 — EveryAction form: hide its own ugly intro (header + 3 paragraphs)
 * scoped to the Join page so the form visually starts at "Contact Info".
 *
 * Selectors confirmed live 2026-05-20 via Playwright DOM walk:
 *   header.at-title             — "Sign-Up For Our Newsletter and other Communications"
 *   header.at-markup.HeaderHtml — wraps all 3 intro paragraphs as inner <div>s
 *                                 (red italic "Tap your phone…" instruction,
 *                                 "By completing this form…" body,
 *                                 "We meet at St. Mark's Lutheran…" contact info).
 *                                 EveryAction renders this as a single <header> with
 *                                 multiple <div> children, NOT separate elements.
 *
 * Replacement INP-branded content block sits ABOVE the form on the page itself
 * (added via REST), carrying the same useful contact info. The page-level
 * fallback styling lives in the markup classes (.inp-meeting-meta-card).
 */
body.page-id-12 .ngp-form .at-title,
body.page-id-12 .ngp-form header.at-title,
body.page-id-12 .ngp-form .at-form .at-title,
body.page-id-12 .ngp-form .at-markup.HeaderHtml,
body.page-id-12 .ngp-form header.at-markup.HeaderHtml {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* #38 replacement — INP-branded meeting/contact card above the form */
.inp-meeting-meta-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 0 auto 1.25rem !important;
  max-width: 720px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-body);
}
.inp-meeting-meta-card p {
  margin: 0 0 0.35rem !important;
}
.inp-meeting-meta-card p:last-child {
  margin-bottom: 0 !important;
}
.inp-meeting-meta-card a {
  color: var(--navy) !important;
  font-weight: 600;
  text-decoration: underline;
}
.inp-meeting-meta-card a:hover {
  color: var(--red) !important;
}
.inp-meeting-meta-card strong {
  color: var(--navy);
}

/* Callout/alert box used for "Need help? Start here." on Resources.
 * Compact navy callout, brand-matched spacing, no rogue dividers. */
.inp-alert-box {
  padding: 1rem 1.25rem !important;
  border-radius: 10px !important;
}
.inp-alert-box > * {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}
.inp-alert-box > *:last-child {
  margin-bottom: 0 !important;
}
/* High-specificity overrides: .inp-resource-section adds 4rem margin-top
 * + border-bottom to ALL h3s inside it. Beat that with .inp-section depth. */
.inp-section .inp-resource-section .inp-alert-box h2,
.inp-section .inp-resource-section .inp-alert-box h3,
.inp-section .inp-resource-section .inp-alert-box h4,
.inp-section .inp-resource-section .inp-alert-box h3.wp-block-heading,
.inp-alert-box h2.wp-block-heading,
.inp-alert-box h3.wp-block-heading,
.inp-alert-box h4.wp-block-heading,
.inp-alert-box h2,
.inp-alert-box h3,
.inp-alert-box h4 {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 0.35rem !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: none !important;
  text-decoration: none !important;
}
.inp-alert-box p {
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.inp-alert-box a {
  color: inherit !important;
  text-decoration: underline !important;
  font-weight: 600;
}

/* Join page polish 2026-05-20 evening:
 * - Breathing room above the meeting meta card (separates it from page hero)
 * - Center the 3-photo trust gallery (was flush-left in a wider container)
 * - Bigger + bolder "Already on our list?" portal link below the form
 */
body.page-id-12 .inp-meeting-meta-card {
  margin-top: 2.5rem !important;
}

body.page-id-12 .inp-trust-gallery,
body.page-id-12 .inp-more-ways-section .wp-block-gallery {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.page-id-12
  p.has-text-align-center.has-small-font-size
  a[href*="everyaction.com/p/"] {
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
}
body.page-id-12
  p.has-text-align-center.has-small-font-size:has(
    a[href*="everyaction.com/p/"]
  ) {
  font-size: 1.0625rem !important;
}

/* ==========================================================================
   FullCalendar widget (replaces Google iframe on /calendar/).
   Events sourced from the iCal proxy endpoint registered in functions.php.
   ========================================================================== */
#inp-fullcalendar {
  max-width: 1080px;
  margin: 2rem auto;
  font-family: var(--font-display, "Inter"), system-ui, sans-serif;
  padding: 0.5rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 18px rgba(25, 67, 121, 0.08);
}
#inp-fullcalendar {
  font-size: 0.9375rem;
  /* Override FullCalendar v6 CSS variables — this is the recommended way to
   * brand FC since per-property selectors lose to FC's own var-based rules. */
  --fc-button-text-color: #ffffff;
  --fc-button-bg-color: #194379; /* INP navy (default — overridden per-button below) */
  --fc-button-border-color: #194379;
  --fc-button-hover-bg-color: #ee2324;
  --fc-button-hover-border-color: #ee2324;
  --fc-button-active-bg-color: #194379;
  --fc-button-active-border-color: #194379;
  --fc-today-bg-color: rgba(87, 198, 215, 0.1);
  --fc-event-bg-color: #194379;
  --fc-event-border-color: #194379;
  --fc-event-text-color: #ffffff;
  --fc-list-event-hover-bg-color: rgba(87, 198, 215, 0.12);
  --fc-border-color: #e5e7eb;
}

/* ----- Toolbar title ----- */
#inp-fullcalendar .fc-toolbar {
  padding: 0.5rem 0.5rem 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
#inp-fullcalendar .fc-toolbar-title {
  color: #194379;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

/* ----- Toolbar buttons — match INP site button system (inp-btn-primary/secondary)
 * Prev/Next: navy filled circles with white chevrons
 * Today:    red filled pill (matches inp-btn-primary)
 * Month/List toggle: cyan-outline pill (matches inp-btn-secondary); fills cyan when active
 * --------------------------------------------------------------------------- */
#inp-fullcalendar .fc-button {
  font-family: var(--font-body, "Inter"), system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  border-radius: 980px !important;
  padding: 0.55rem 1.25rem !important;
  font-size: 0.875rem !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.15s !important;
  border-width: 1.5px !important;
}

/* Prev / Next — navy filled circles with white chevrons */
#inp-fullcalendar .fc-prev-button,
#inp-fullcalendar .fc-next-button {
  background: #194379 !important; /* INP navy */
  border-color: #194379 !important;
  color: #fff !important;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#inp-fullcalendar .fc-prev-button:hover,
#inp-fullcalendar .fc-next-button:hover,
#inp-fullcalendar .fc-prev-button:focus,
#inp-fullcalendar .fc-next-button:focus {
  background: #ee2324 !important; /* INP red on hover */
  border-color: #ee2324 !important;
  transform: translateY(-1px);
  outline: none;
}
#inp-fullcalendar .fc-prev-button .fc-icon,
#inp-fullcalendar .fc-next-button .fc-icon {
  color: #fff !important;
  font-size: 1.15rem;
}

/* Today button — matches .inp-btn-primary (red pill) */
#inp-fullcalendar .fc-today-button {
  background: #ee2324 !important;
  border-color: #ee2324 !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 12px rgba(238, 35, 36, 0.2) !important;
}
#inp-fullcalendar .fc-today-button:hover:not(:disabled),
#inp-fullcalendar .fc-today-button:focus:not(:disabled) {
  background: #c91d1f !important;
  border-color: #c91d1f !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(238, 35, 36, 0.3) !important;
}
#inp-fullcalendar .fc-today-button:disabled {
  background: #ee2324 !important;
  border-color: #ee2324 !important;
  color: #fff !important;
  opacity: 0.4 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Month / List toggle — navy outline pills, fill navy when active.
 * Drops the cyan accent — staying purely navy/red keeps the toolbar
 * consistent with the rest of the site (header nav, CTAs). */
#inp-fullcalendar .fc-dayGridMonth-button,
#inp-fullcalendar .fc-listMonth-button {
  background: transparent !important;
  border-color: #194379 !important;
  color: #194379 !important;
}
#inp-fullcalendar .fc-dayGridMonth-button:hover,
#inp-fullcalendar .fc-listMonth-button:hover,
#inp-fullcalendar .fc-dayGridMonth-button:focus,
#inp-fullcalendar .fc-listMonth-button:focus {
  background: #194379 !important;
  color: #fff !important;
  transform: translateY(-1px);
  outline: none;
}
/* Active state — navy filled (was cyan) */
#inp-fullcalendar .fc-button-active,
#inp-fullcalendar .fc-dayGridMonth-button.fc-button-active,
#inp-fullcalendar .fc-listMonth-button.fc-button-active {
  background: #194379 !important;
  border-color: #194379 !important;
  color: #fff !important;
}

/* Button-group spacing — the two segmented toggles share a group */
#inp-fullcalendar .fc-button-group .fc-button {
  border-radius: 980px !important;
  margin: 0 0.25rem;
}
#inp-fullcalendar .fc-button-group .fc-button:first-child,
#inp-fullcalendar .fc-button-group .fc-button:last-child {
  margin: 0 0.25rem;
}

/* ----- Day-of-week column header ----- */
#inp-fullcalendar .fc-col-header-cell-cushion {
  color: #194379;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.55rem 0.4rem;
}

/* ----- Day cells ----- */
#inp-fullcalendar .fc-daygrid-day {
  min-height: 110px;
}
#inp-fullcalendar .fc-day-today {
  background-color: rgba(87, 198, 215, 0.1) !important;
}
#inp-fullcalendar .fc-day-today .fc-daygrid-day-number {
  color: #ee2324;
  font-weight: 800;
}
#inp-fullcalendar .fc-daygrid-day-number {
  color: #194379;
  font-weight: 600;
  padding: 0.4rem 0.5rem 0.25rem;
  font-size: 0.85rem;
}
#inp-fullcalendar .fc-day-other .fc-daygrid-day-number {
  color: #b0b8c4;
  font-weight: 500;
}

/* ----- Day-grid events (the navy chips on the month view) -----
 * Time is hidden on the chip — it shows in the popup. Title gets 3 lines.
 * --------------------------------------------------------------------------- */
#inp-fullcalendar .fc-daygrid-event {
  background-color: #194379;
  border: 0;
  color: #fff !important;
  border-radius: 6px;
  font-size: 0.7rem; /* dropped 0.78 → 0.7 so more title fits per chip */
  font-weight: 600;
  padding: 4px 6px;
  cursor: pointer;
  line-height: 1.22;
  margin: 2px 4px;
  white-space: normal !important;
  overflow: hidden;
  max-height: 4.5em;
}
#inp-fullcalendar .fc-daygrid-event:hover {
  background-color: #c91d1f;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(25, 67, 121, 0.25);
}
/* INP-run events (Indivisible North Pinellas) — red variant */
#inp-fullcalendar .fc-daygrid-event.inp-event-ours {
  background-color: #ee2324 !important;
  box-shadow: 0 1px 4px rgba(238, 35, 36, 0.25);
}
#inp-fullcalendar .fc-daygrid-event.inp-event-ours:hover {
  background-color: #c91d1f !important;
}
/* List view also gets the red dot for INP-run events */
#inp-fullcalendar .fc-list-event.inp-event-ours .fc-list-event-dot {
  border-color: #ee2324 !important;
}

/* Legend below the calendar */
.inp-cal-legend {
  max-width: 1080px;
  margin: 0.5rem auto 2rem;
  padding: 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: #194379;
}
.inp-cal-legend span {
  display: inline-flex;
  align-items: center;
}
.inp-cal-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-right: 0.4rem;
  vertical-align: middle;
}
.inp-cal-legend-swatch--red {
  background: #ee2324;
}
.inp-cal-legend-swatch--navy {
  background: #194379;
}
/* Show the time on the chip as a compact bold prefix. The full date + range
 * is also in the popup, but visible on the grid is what folks scan first. */
#inp-fullcalendar .fc-daygrid-event .fc-event-time {
  display: inline !important;
  font-weight: 700 !important;
  margin-right: 4px;
  opacity: 0.92;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Inner title — 3-line clamp, full chip width */
#inp-fullcalendar .fc-daygrid-event .fc-event-main,
#inp-fullcalendar .fc-daygrid-event .fc-event-main-frame {
  display: block !important;
  overflow: hidden;
  width: 100%;
}
#inp-fullcalendar .fc-daygrid-event .fc-event-title,
#inp-fullcalendar .fc-daygrid-event .fc-event-title-container {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  line-height: 1.2;
}
/* Hide the bullet/dot when present — cleaner look */
#inp-fullcalendar .fc-daygrid-event-dot {
  display: none;
}
/* Event time inside the chip — same line as title, slightly faded */
#inp-fullcalendar .fc-event-time {
  font-weight: 700;
  opacity: 0.85;
  margin-right: 3px;
  font-variant-numeric: tabular-nums;
}
#inp-fullcalendar .fc-event-title {
  font-weight: 600;
}

/* ----- "More" link when there are >3 events in a day ----- */
#inp-fullcalendar .fc-daygrid-more-link {
  color: #ee2324 !important;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 2px 6px;
}

/* ----- List view -----
 * IMPORTANT: do NOT apply the navy bg to .fc-list-event rows — they are TABLE
 * rows with text inside, and a navy bg would hide the text. List rows stay
 * white with dark text and INP styling.
 * --------------------------------------------------------------------------- */
#inp-fullcalendar .fc-list-event {
  background: transparent !important;
}
#inp-fullcalendar .fc-list-event td {
  background: #fff !important;
  color: #194379 !important;
  padding: 0.85rem 0.75rem !important;
  border-color: #e5e7eb !important;
  font-size: 0.95rem;
}
#inp-fullcalendar .fc-list-event:hover td {
  background-color: rgba(87, 198, 215, 0.12) !important;
}
#inp-fullcalendar .fc-list-event-dot {
  border-color: #ee2324 !important;
  border-width: 6px !important;
}
#inp-fullcalendar .fc-list-event-time {
  color: #194379 !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#inp-fullcalendar .fc-list-event-title {
  color: #194379 !important;
}
#inp-fullcalendar .fc-list-event-title a {
  color: #194379 !important;
  font-weight: 600;
  text-decoration: none;
}
#inp-fullcalendar .fc-list-event-title a:hover {
  color: #ee2324 !important;
  text-decoration: underline;
}
/* Day separator rows in the list (Sunday, Monday, etc.) */
#inp-fullcalendar .fc-list-day-cushion,
#inp-fullcalendar .fc-list-day th {
  background: #194379 !important;
  color: #fff !important;
  padding: 0.65rem 0.85rem !important;
  font-weight: 700 !important;
}
#inp-fullcalendar .fc-list-day-cushion a,
#inp-fullcalendar .fc-list-day th a {
  color: #fff !important;
  text-decoration: none;
}
/* Empty list view message ("No events to display") */
#inp-fullcalendar .fc-list-empty {
  color: #194379 !important;
  background: #f7f8fa !important;
  padding: 2rem !important;
  font-weight: 600;
}

/* Error fallback when iCal fetch fails */
#inp-fullcalendar .inp-cal-error {
  padding: 2rem;
  background: #fff3f3;
  border-left: 4px solid #ee2324;
  border-radius: 6px;
  color: #194379;
}

/* ==========================================================================
   Event popup — INP-branded, replaces Google's "more details" link entirely
   ========================================================================== */
.inp-cal-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(25, 67, 121, 0.45);
  z-index: 9998;
  animation: inpFade 0.15s ease;
}
.inp-cal-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 2rem 2rem 1.5rem;
  max-width: 640px; /* up from 480 — fits more description */
  width: calc(100% - 2rem);
  max-height: 85vh;
  overflow-y: auto;
  z-index: 9999;
  border-top: 4px solid #ee2324;
  animation: inpFade 0.2s ease;
}
@keyframes inpFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.inp-cal-popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: transparent;
  border: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: #194379;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.inp-cal-popup-close:hover,
.inp-cal-popup-close:focus {
  color: #ee2324;
}
.inp-cal-popup-title {
  color: #194379;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 1.5rem 0.75rem 0 !important;
  line-height: 1.3;
}
.inp-cal-popup-date {
  color: #194379;
  font-weight: 700;
  margin: 0 0 0.25rem !important;
  font-size: 0.95rem;
}
.inp-cal-popup-time {
  color: #ee2324;
  font-weight: 600;
  margin: 0 0 0.75rem !important;
  font-size: 0.9rem;
}
.inp-cal-popup-location {
  margin: 0 0 1rem !important;
  font-size: 0.95rem;
}
.inp-cal-popup-location a {
  color: #57c6d7;
  font-weight: 600;
  text-decoration: none;
}
.inp-cal-popup-location a:hover {
  text-decoration: underline;
}
.inp-cal-popup-description {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #444;
  padding-top: 0.75rem;
  border-top: 1px solid #eee;
  white-space: pre-wrap; /* preserve newlines from stripped HTML */
  word-break: break-word;
}
.inp-cal-popup-description a {
  color: #57c6d7;
}
@media (max-width: 600px) {
  .inp-cal-popup {
    padding: 1.5rem 1rem 1rem;
  }
  .inp-cal-popup-title {
    font-size: 1.1rem;
  }
  #inp-fullcalendar .fc-toolbar {
    flex-direction: column;
    gap: 0.75rem;
  }
  #inp-fullcalendar .fc-toolbar-title {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Numbered steps inside accordions (.inp-numbered-steps)
   Replaces default <ol> markers with big cyan numerals to match the
   "This Week" / "Three things to do" treatment used elsewhere on Take Action.
   ========================================================================== */
.inp-numbered-steps {
  list-style: none !important;
  counter-reset: inp-step;
  margin: 1rem 0 1.5rem;
  padding: 0;
}
.inp-numbered-steps > li {
  counter-increment: inp-step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1rem;
  min-height: 2.25rem;
  line-height: 1.5;
}
.inp-numbered-steps > li::before {
  content: counter(inp-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -0.2rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  color: #57c6d7; /* INP cyan */
  letter-spacing: -0.03em;
}
.inp-numbered-steps > li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Phone callout (.inp-phone-callout) — navy card with white-on-navy treatment
   The links pop in cyan, the labels stay white-bold.
   Overrides the inline gray/red styles applied by the legacy block-editor markup.
   ========================================================================== */
.inp-phone-callout {
  background-color: #194379 !important; /* INP navy */
  border-radius: 10px !important;
  border-left: 4px solid #ee2324 !important; /* INP red accent */
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0 !important;
  color: #fff;
}
.inp-phone-callout h4 {
  color: #fff !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
}
.inp-phone-callout ul {
  margin: 0 !important;
  padding-left: 1.1rem !important;
  list-style: none !important;
}
.inp-phone-callout li {
  margin-bottom: 0.6rem !important;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  padding-left: 0 !important;
}
.inp-phone-callout li::marker {
  content: "";
}
.inp-phone-callout li:last-child {
  margin-bottom: 0 !important;
}
.inp-phone-callout li strong {
  color: #fff !important;
  font-weight: 700;
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.15rem;
}
.inp-phone-callout a {
  color: #57c6d7 !important; /* INP cyan */
  font-weight: 700 !important;
  text-decoration: none !important;
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
}
.inp-phone-callout a:hover,
.inp-phone-callout a:focus {
  color: #fff !important;
  text-decoration: underline !important;
}

/* When .inp-resource-grid has EXACTLY 3 items, the 3rd card orphans into row 2
 * (left-aligned in a 2-col layout). Center it for visual balance.
 * Uses grid-column span + max-width so card stays the same size, just centered. */
.inp-resource-grid > .inp-resource-item:nth-child(3):last-child {
  grid-column: 1 / -1;
  max-width: calc((100% - 1rem) / 2);
  margin-inline: auto;
}

/* ==========================================================================
   Wide variant of .inp-resource-item — lives OUTSIDE .inp-resource-grid so
   it doesn't stretch to match neighbours. Used for richer content blocks
   (e.g. "Discussions with MAGA Supporters" with a bulleted tips list).
   Constrained narrower than the grid, centered, with breathing room above.
   ========================================================================== */
.inp-resource-item--wide {
  max-width: 600px !important;
  margin: 3.5rem auto 0 !important;
  padding: 1.5rem 1.75rem !important;
}
.inp-resource-item--wide h3 {
  font-size: 1.25rem;
  margin: 0 0 0.5rem;
  text-align: left;
}
.inp-resource-item--wide > p:first-of-type {
  font-size: 0.9375rem;
  color: #444;
  margin: 0 0 0.75rem;
}
.inp-resource-item--wide ul {
  margin: 0;
  padding-left: 1.25rem;
}
.inp-resource-item--wide li {
  margin-bottom: 0.4rem;
  line-height: 1.45;
  font-size: 0.9rem;
}
.inp-resource-item--wide li strong {
  color: #194379;
}

@media (max-width: 600px) {
  .inp-resource-item--wide {
    padding: 1.25rem 1rem !important;
    margin-top: 2rem !important;
  }
  .inp-resource-item--wide h3 {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   Breadcrumb bar (Yoast SEO [wpseo_breadcrumb] shortcode wrapper)
   Lives at the top of every page, hidden on home. INP navy text, cyan chevrons.
   ========================================================================== */
.inp-breadcrumb-bar {
  background: #f7f8fa;
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 2rem;
  font-size: 13px;
  line-height: 1.4;
  color: #194379;
  /* Stick to the bottom of the sticky .inp-header. Travels with it on scroll.
   * top values match actual header height per viewport (measured live). */
  position: sticky;
  top: 70px;
  z-index: 90; /* below .inp-header (z:99) so it never covers nav */
}
@media (max-width: 1100px) {
  .inp-breadcrumb-bar {
    top: 60px;
  }
}
@media (max-width: 600px) {
  .inp-breadcrumb-bar {
    top: 54px;
  }
}
.inp-breadcrumb-bar #breadcrumbs,
.inp-breadcrumb-bar .breadcrumbs,
.inp-breadcrumb-bar > p {
  max-width: 1280px;
  margin: 0 auto;
}
.inp-breadcrumb-bar a {
  color: #194379;
  text-decoration: none;
  font-weight: 500;
}
.inp-breadcrumb-bar a:hover,
.inp-breadcrumb-bar a:focus {
  color: #ee2324;
  text-decoration: underline;
}
.inp-breadcrumb-bar .breadcrumb_last,
.inp-breadcrumb-bar [aria-current="page"] {
  color: #57c6d7;
  font-weight: 700;
}
/* Yoast separator (defaults to ›) — give it cyan accent + breathing room */
.inp-breadcrumb-bar span[class*="separator"],
.inp-breadcrumb-bar .breadcrumb-sep {
  color: #57c6d7;
  margin: 0 6px;
  font-weight: 400;
}
/* Hide on homepage — Yoast typically renders just "Home" which is pointless */
body.home .inp-breadcrumb-bar,
body.page-id-25 .inp-breadcrumb-bar {
  display: none;
}
/* Hide if the breadcrumb shortcode somehow renders empty */
.inp-breadcrumb-bar:empty,
.inp-breadcrumb-bar > p:empty {
  display: none;
}
@media (max-width: 600px) {
  .inp-breadcrumb-bar {
    padding: 8px 1rem;
    font-size: 12px;
  }
}

/* ─────────────────────────────────────────────
   .inp-call-card — callout card for action panels
   (Rep Contacts "When You Call" section)
   ───────────────────────────────────────────── */

.inp-section.inp-call-card,
.wp-block-group.inp-call-card.has-global-padding {
  background: #f7f4ec;
  border-left: 6px solid var(--navy);
  border-radius: 10px;
  padding: 1.25rem 2.25rem 1.75rem !important;
  box-shadow: 0 2px 14px rgba(25, 67, 121, 0.08);
  max-width: 760px;
  margin: 2.5rem auto 2.5rem;
}

.inp-section.inp-call-card > *:first-child,
.inp-section.inp-call-card .inp-section-label,
.wp-block-group.inp-call-card > p.inp-section-label:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.inp-section.inp-call-card .inp-section-label {
  color: var(--navy);
  margin-top: 0;
}

.inp-section.inp-call-card h2.wp-block-heading {
  font-size: 1.625rem !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.75rem !important;
}

.inp-section.inp-call-card p,
.inp-section.inp-call-card li {
  font-size: 1rem;
}

.inp-section.inp-call-card ul.wp-block-list {
  margin-top: 1rem;
}

.inp-section.inp-call-card .wp-block-buttons {
  margin-top: 1.5rem !important;
}

@media (max-width: 640px) {
  .inp-section.inp-call-card {
    padding: 1.5rem 1.5rem 1.75rem;
    margin: 0 1rem 2rem;
    border-left-width: 5px;
  }
  .inp-section.inp-call-card h2.wp-block-heading {
    font-size: 1.375rem !important;
  }
}

/* ─────────────────────────────────────────────
   Blog grid thumb — fixed 4:3 aspect ratio
   (prevents portrait posters getting squeezed into row height)
   ───────────────────────────────────────────── */
.inp-news-row {
  grid-template-columns: 240px 1fr !important;
}
.inp-news-row-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: #f7f4ec;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inp-news-row-image a,
.inp-news-row-image > * {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.inp-news-row-image img,
.inp-news-row-image .wp-block-post-featured-image__placeholder {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  padding: 4px;
  box-sizing: border-box;
}

/* ─────────────────────────────────────────────
   Single post — cap in-body image max-height
   so portrait images don't dominate the page
   ───────────────────────────────────────────── */
.inp-single-content .wp-block-image,
.inp-single-content figure.wp-block-image {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.inp-single-content .wp-block-image img,
.inp-single-content figure.wp-block-image img {
  max-height: 560px;
  max-width: 100%;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-radius: 6px;
}
/* Gallery + columns kids — keep their column behavior, just cap height */
.inp-single-content .wp-block-gallery img,
.inp-single-content .wp-block-columns img {
  max-height: 420px;
}

/* ─────────────────────────────────────────────
   Inline share at end of post (replaces meta-rail)
   ───────────────────────────────────────────── */
.inp-share-wrap {
  margin-top: 2.5rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid var(--border, #e5e7eb);
}
.inp-inline-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  font-size: 0.9375rem;
}
.inp-inline-share-label {
  font-weight: 700;
  color: var(--text-muted, #4b5563);
  margin-right: 0.25rem;
}
.inp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  background: #fff;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 999px;
  color: var(--navy);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.inp-share-btn:hover,
.inp-share-btn:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  text-decoration: none;
}

/* Hide the old meta-rail card if it ever reappears */
.inp-post-meta-rail {
  display: none !important;
}

@media (max-width: 640px) {
  /* Stack image on top (like the home page cards) instead of tiny thumb-left */
  .inp-news-row {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
  .inp-news-row-image {
    aspect-ratio: 16 / 9 !important;
  }
  .inp-news-row-image img,
  .inp-news-row-image .wp-block-post-featured-image__placeholder {
    object-fit: cover !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }
  .inp-inline-share {
    gap: 0.5rem;
  }
  .inp-share-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
  }
}