/* @import statements hoisted from the tenant's custom CSS — they
               must precede every other rule in this stylesheet or browsers
               silently drop them. */
            

            /* Theme variables and custom CSS.
               themeStyles (:root brand vars) is emitted in BOTH native and
               advanced modes so page-builder components keep brand colors/fonts.
               In advanced mode the imported custom_css is injected afterwards and
               overrides the imported markup's look. */
            :root {
  --color-primary: #AFCB30;
  --color-secondary: #212E60;
  --color-accent: #BDDDE1;
  --color-secondaryAccent: #8b5cf6;
  --color-background: #F7F9FC;
  --color-surface: #f8fafc;
  --color-text: #141C3A;
  --color-textSecondary: #6b7280;
  --color-heading: var(--color-text);
  --heading-h1-size: 2.5rem;
  --heading-h1-color: var(--color-heading, var(--color-text));
  --heading-h2-size: 2rem;
  --heading-h2-color: var(--color-heading, var(--color-text));
  --heading-h3-size: 1.75rem;
  --heading-h3-color: var(--color-heading, var(--color-text));
  --heading-h4-size: 1.5rem;
  --heading-h4-color: var(--color-heading, var(--color-text));
  --heading-h5-size: 1.25rem;
  --heading-h5-color: var(--color-heading, var(--color-text));
  --heading-h6-size: 1rem;
  --heading-h6-color: var(--color-heading, var(--color-text));
  --color-border: #e5e7eb;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Montserrat', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --content-max-width: 100%;
}

            /* Site-level custom CSS (sanitized). Only applied in advanced mode;
               native mode stores but does not apply. */
            /* ================================================================
   CT COLT — Recur central-renderer custom CSS
   Harvested from artifacts/ctcolt/src/index.css (Tailwind tokens)
   Brand: navy #212E60 · lime #AFCB30 · light blue #BDDDE1
   Font: Montserrat (300–800)
   ================================================================ */

:root {
  --ct-navy: #212E60;
  --ct-navy-dark: hsl(227 49% 15%);
  --ct-lime: #AFCB30;
  --ct-lime-hover: #9ab825;
  --ct-blue: #BDDDE1;
  --ct-bg: hsl(220 33% 98%);          /* #F7F9FC */
  --ct-border: hsl(220 20% 88%);
  --ct-card-border: hsl(220 20% 92%);
  --ct-muted: hsl(220 20% 94%);
  --ct-muted-fg: hsl(227 20% 45%);
  --ct-radius: 0.75rem;               /* 12px base */
  --ct-radius-md: calc(0.75rem - 2px);
  --ct-shadow-card: 0 2px 8px rgba(33, 46, 96, 0.07);
  --ct-shadow-card-hover: 0 6px 24px rgba(33, 46, 96, 0.12);
  --ct-shadow-sm: 0px 2px 4px -1px rgba(33, 46, 96, 0.1), 0px 2px 4px -2px rgba(33, 46, 96, 0.1);
  --ct-shadow-md: 0px 10px 15px -3px rgba(33, 46, 96, 0.1), 0px 4px 6px -4px rgba(33, 46, 96, 0.1);
  --ct-shadow-lg: 0px 20px 25px -5px rgba(33, 46, 96, 0.1), 0px 8px 10px -6px rgba(33, 46, 96, 0.1);
  --ct-content-max: 1200px;

  /* Full Tailwind type scale from the source site (the theme surface only
     accepts xs–3xl, so the larger sizes live here for page CSS to use). */
  --ct-text-xs: 0.75rem;    --ct-leading-xs: calc(1 / 0.75);
  --ct-text-sm: 0.875rem;   --ct-leading-sm: calc(1.25 / 0.875);
  --ct-text-base: 1rem;     --ct-leading-base: 1.5;
  --ct-text-lg: 1.125rem;   --ct-leading-lg: calc(1.75 / 1.125);
  --ct-text-xl: 1.25rem;    --ct-leading-xl: calc(1.75 / 1.25);
  --ct-text-2xl: 1.5rem;    --ct-leading-2xl: calc(2 / 1.5);
  --ct-text-3xl: 1.875rem;  --ct-leading-3xl: calc(2.25 / 1.875);
  --ct-text-4xl: 2.25rem;   --ct-leading-4xl: calc(2.5 / 2.25);
  --ct-text-5xl: 3rem;      --ct-leading-5xl: 1;
  --ct-text-6xl: 3.75rem;   --ct-leading-6xl: 1;
  --ct-text-7xl: 4.5rem;    --ct-leading-7xl: 1;
  --ct-text-8xl: 6rem;      --ct-leading-8xl: 1;
  --ct-text-9xl: 8rem;      --ct-leading-9xl: 1;
}

/* Heading scale (source: text-4xl/5xl heroes, 3xl section titles, mobile step-down) */
h1 { font-size: var(--ct-text-4xl); line-height: var(--ct-leading-4xl); }
h2 { font-size: var(--ct-text-3xl); line-height: var(--ct-leading-3xl); }
h3 { font-size: var(--ct-text-2xl); line-height: var(--ct-leading-2xl); }
h4 { font-size: var(--ct-text-xl); line-height: var(--ct-leading-xl); }

@media (min-width: 768px) {
  h1 { font-size: var(--ct-text-5xl); line-height: var(--ct-leading-5xl); }
}

/* ---------- Base ---------- */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--ct-bg);
  color: var(--ct-navy-dark);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.puck-heading, .puck-card-title, .puck-cta-title, .puck-hero h1 {
  font-family: 'Montserrat', sans-serif;
  color: var(--ct-navy);
  font-weight: 700;
  line-height: 1.2;
}

a { color: var(--ct-navy); }
a:hover { color: var(--ct-lime-hover); }

/* ---------- Content width cap (theme contentWidth is "full") ----------
   Heroes stay edge-to-edge; regular top-level blocks cap at 1200px. */
.puck-grid, .puck-flex, .puck-columns, .puck-text, .puck-heading, .puck-card,
.puck-image,
.puck-cta, .puck-stats, .puck-custom-content,
.recur-product-list, .recur-event-list, .recur-event-calendar,
.recur-single-product, .recur-single-event, .recur-blog-list,
.recur-donation,
.puck-contact-widget {
  max-width: var(--ct-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Buttons ---------- */
.puck-button, .puck-hero-cta, .puck-cta-primary, .puck-cta-secondary {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  border-radius: var(--ct-radius-md);
  transition: background-color 0.15s ease, box-shadow 0.2s ease, color 0.15s ease;
  text-decoration: none;
}

.puck-button-primary, .puck-hero-cta-primary, .puck-cta-primary {
  background-color: var(--ct-lime);
  color: var(--ct-navy);
  border: none;
  padding: 0.75rem 1.5rem;
}

.puck-button-primary:hover, .puck-hero-cta-primary:hover, .puck-cta-primary:hover {
  background-color: var(--ct-lime-hover);
  color: var(--ct-navy);
  box-shadow: var(--ct-shadow-sm);
}

.puck-button-secondary, .puck-cta-secondary {
  background-color: var(--ct-navy);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
}

.puck-button-secondary:hover, .puck-cta-secondary:hover {
  background-color: hsl(227 49% 20%);
  color: #ffffff;
  box-shadow: var(--ct-shadow-sm);
}

/* ---------- Hero CTA buttons (carousel hero only) ----------
   Wrapper: the renderer emits div.puck-hero-cta as display:block; make it
   flex-centered so the two buttons sit side-by-side with a controlled gap.
   Buttons: source uses h-14 px-8 (56px height, 0 vertical padding, 32px
   horizontal). We replicate that with height + inline-flex instead of 
   padding-based height so sizes match exactly. !important is needed because
   the renderer's own stylesheet rules share the same selectors. */
.puck-hero-cta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.puck-hero-cta-primary {
  background-color: var(--ct-lime) !important;
  color: var(--ct-navy) !important;
  border: none !important;
  height: 3.5rem !important;
  padding: 0 2rem !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  border-radius: var(--ct-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
.puck-hero-cta-primary:hover {
  background-color: var(--ct-lime-hover) !important;
  color: var(--ct-navy) !important;
  box-shadow: var(--ct-shadow-sm) !important;
}

.puck-hero-cta-secondary {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  height: 3.5rem !important;
  padding: 0 2rem !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  border-radius: var(--ct-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.puck-hero-cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* ---------- Cards ---------- */
.puck-card {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: var(--ct-shadow-card);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  padding: 1.5rem !important;
}
/* Ensure padding reaches content even when Recur wraps in an inner div */
.puck-card > div { padding: 0 !important; }
.puck-card-title  { padding: 0 !important; margin: 0 0 0.5rem !important; }
.puck-card-description { padding: 0 !important; margin: 0 0 1.25rem !important; }
.puck-card-button,
.puck-card a.puck-button { margin-top: auto !important; }

.puck-card:hover {
  box-shadow: var(--ct-shadow-card-hover);
  border-color: var(--ct-lime);
}

.puck-card-title { color: var(--ct-navy); font-weight: 700; margin-bottom: 0.75rem; }
/* Nav cards — Recur may render the whole card or just the title as \003c a>.
   Strip underline everywhere, keep navy, turn lime on hover. */
a.puck-card,
.puck-card a {
  text-decoration: none !important;
}
a.puck-card .puck-card-title,
.puck-card a .puck-card-title,
.puck-card-title a {
  color: var(--ct-navy) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
a.puck-card:hover .puck-card-title,
.puck-card:hover a .puck-card-title,
.puck-card:hover .puck-card-title a {
  color: var(--ct-lime-hover) !important;
}
.puck-card-eyebrow { color: var(--ct-lime-hover); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
.puck-card-description { color: var(--ct-muted-fg); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.25rem; }
.puck-card-meta-label { color: var(--ct-muted-fg); }
.puck-card-meta-value { color: var(--ct-navy); font-weight: 600; }
.puck-card-avatar-img { border-radius: 9999px; object-fit: cover; }

.puck-card-button,
.puck-card a.puck-button {
  background-color: var(--ct-lime);
  color: var(--ct-navy);
  border: none;
  border-radius: var(--ct-radius-md);
  font-weight: 700;
  transition: background-color 0.15s ease;
}
.puck-card-button:hover { background-color: var(--ct-lime-hover); }

/* ── Blog listing ─────────────────────────────────────────────────────────── */
.ct-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 900px) { .ct-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .ct-blog-grid { grid-template-columns: 1fr; } }

a.ct-blog-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: var(--ct-shadow-card);
  padding: 1.5rem;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  gap: 0.5rem;
}
a.ct-blog-card:hover {
  box-shadow: var(--ct-shadow-card-hover);
  border-color: var(--ct-lime);
}
.ct-blog-card-date {
  font-size: 0.78rem;
  color: var(--ct-muted-fg);
  font-weight: 600;
}
.ct-blog-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ct-navy);
  line-height: 1.4;
}
a.ct-blog-card:hover .ct-blog-card-title { color: var(--ct-lime-hover); }
.ct-blog-card-excerpt {
  font-size: 0.875rem;
  color: var(--ct-muted-fg);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ct-blog-card-cta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ct-lime-hover);
  margin-top: 0.5rem;
}
.ct-blog-more {
  text-align: center;
  margin: 1.5rem 0;
}
.ct-blog-more button {
  background: var(--ct-navy);
  color: #fff;
  border: none;
  border-radius: var(--ct-radius-md);
  padding: 0.65rem 2rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ct-blog-more button:hover { background: var(--ct-lime-hover); color: var(--ct-navy); }

/* Board member cards — role rendered inside description as .ct-board-role span,
   appearing directly under the name in lime green. Email shown as a small
   underlined text link. Scoped via :has(.puck-card-avatar). */
.ct-board-role {
  display: block;
  color: var(--ct-lime-hover);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
/* Email link: small underlined text link, no button chrome.
   Board cards render with class puck-card--board (variant:"board"). */
.puck-card--board .puck-card-button,
.puck-card--board .puck-card a.puck-button {
  background: none !important;
  color: var(--ct-lime-hover) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 0.25rem;
}
.puck-card--board .puck-card-button:hover,
.puck-card--board .puck-card a.puck-button:hover {
  background: none !important;
  color: var(--ct-navy) !important;
}

/* Pillar cards (icon variant) — source: pt-8/px-6/pb-8, icon circle with bg,
   clear vertical rhythm. Renderer emits 0px padding as computed style; we 
   override it and ensure the icon, title, description, and button have proper
   spacing. The icon is a Google Material Symbol (text content in a \003c span>).
   Each card uses a specific color variant (pillar-teal / pillar-lime / pillar-navy)
   so color is keyed directly on the card element — no nth-child needed. */
.puck-card--pillar-teal,
.puck-card--pillar-lime,
.puck-card--pillar-navy {
  padding: 2rem 1.5rem !important;
}
.puck-card--pillar-teal .material-symbols-rounded,
.puck-card--pillar-teal .material-icons,
.puck-card--pillar-lime .material-symbols-rounded,
.puck-card--pillar-lime .material-icons,
.puck-card--pillar-navy .material-symbols-rounded,
.puck-card--pillar-navy .material-icons {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  margin: 0 auto 0.5rem;
}

/* Per-pillar icon circle colors */
.puck-card--pillar-teal .material-symbols-rounded,
.puck-card--pillar-teal .material-icons {
  background: #0d9488 !important; /* vibrant teal */
  color: #ffffff !important;
}
.puck-card--pillar-lime .material-symbols-rounded,
.puck-card--pillar-lime .material-icons {
  background: var(--ct-lime) !important; /* lime */
  color: var(--ct-navy) !important;
}
.puck-card--pillar-navy .material-symbols-rounded,
.puck-card--pillar-navy .material-icons {
  background: var(--ct-navy) !important; /* navy */
  color: #ffffff !important;
}
/* Inner content wrapper the renderer adds inside pillar cards.
   SAFE IN CONTEXT: the renderer reliably wraps card content in a single
   direct-child div; this selector just zeroes its built-in padding so the
   padding we set on the card element itself (above) is the only source of
   spacing. If the renderer ever removes that inner wrapper the rule simply
   becomes a no-op — no visual regression. If it adds an extra outer wrapper
   the card padding still applies correctly; only the inner reset is lost,
   which is minor. */
.puck-card--pillar-teal > div,
.puck-card--pillar-lime > div,
.puck-card--pillar-navy > div {
  padding: 0;
}
.puck-card--pillar-teal .puck-card-title,
.puck-card--pillar-lime .puck-card-title,
.puck-card--pillar-navy .puck-card-title {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}
.puck-card--pillar-teal .puck-card-description,
.puck-card--pillar-lime .puck-card-description,
.puck-card--pillar-navy .puck-card-description {
  margin-bottom: 1.25rem;
}

/* ---------- Hero ---------- */
.puck-hero { font-family: 'Montserrat', sans-serif; }

/* Force the entire hero content block to white so inherited body color
   (dark navy) doesn't bleed into the subtitle or any other text. */
.puck-hero-content { color: #ffffff; }

.puck-hero-eyebrow { color: var(--ct-lime); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

/* h1: source = text-4xl/6xl/7xl font-bold tracking-tight leading-tight */
.puck-hero-title,
.puck-hero h1,
.puck-hero-content h1 {
  color: #ffffff !important;
  font-size: 2.25rem;       /* text-4xl (mobile) */
  font-weight: 700 !important;
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 1.25;        /* leading-tight */
}
@media (min-width: 768px) {
  .puck-hero-title,
  .puck-hero h1,
  .puck-hero-content h1 { font-size: 3.75rem; } /* text-6xl */
}
@media (min-width: 1024px) {
  .puck-hero-title,
  .puck-hero h1,
  .puck-hero-content h1 { font-size: 4.5rem; }  /* text-7xl */
}

/* Subtitle: source = text-white/90 text-xl/2xl font-medium */
.puck-hero-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.25rem;  /* text-xl (mobile) */
  font-weight: 500;    /* font-medium */
  line-height: 1.5;
}
@media (min-width: 768px) {
  .puck-hero-subtitle { font-size: 1.5rem; } /* text-2xl */
}

/* ---------- Carousel prev/next arrow buttons ----------
   Renderer positions them (48×48px, top: 50%) but adds no background or color.
   Source site: rounded-full bg-white/10 hover:bg-white/20 text-white 
   backdrop-blur-sm (Tailwind). The SVG stroke is hardcoded #333 so we 
   override it via the child svg selector. */
.puck-hero--carousel .carousel-nav {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}
.puck-hero--carousel .carousel-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}
.puck-hero--carousel .carousel-nav svg {
  stroke: #ffffff !important;
}

/* ---------- CTA band (native CTA block, matches old .ct-cta-band) ---------- */
.puck-cta {
  background: linear-gradient(135deg, var(--ct-navy), var(--ct-navy-dark));
  border-radius: var(--ct-radius);
  color: #ffffff;
  text-align: center;
  padding: 4rem 1.5rem !important;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  box-sizing: border-box;
}
.puck-cta-title { color: #ffffff !important; font-size: var(--ct-text-3xl); margin: 0 0 1rem; }
.puck-cta-description { color: rgba(255, 255, 255, 0.85); max-width: 640px; margin: 0 auto 2rem; }
/* Actions stack vertically, centered (old .ct-cta-band-actions) */
.puck-cta-buttons, .puck-cta-actions {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
/* Secondary renders as the light-blue text link (old .ct-cta-band-link) */
.puck-cta-secondary, .puck-cta .puck-cta-secondary {
  background: none !important;
  color: var(--ct-blue) !important;
  font-weight: 600;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.puck-cta-secondary:hover { text-decoration: underline; background: none !important; }

/* ---------- Mission panel as native Card (About page) ----------
   Replicates .ct-mission-panel: flat light-gray panel, no border/shadow/hover,
   larger relaxed text. Empty title collapses. */
.puck-card--mission {
  background: hsl(220 33% 96%) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--ct-radius) !important;
  padding: 2rem !important;
}
.puck-card--mission:hover { box-shadow: none !important; border: none !important; }
.puck-card--mission .puck-card-title:empty { display: none; }
.puck-card--mission .puck-card-description {
  color: var(--ct-navy-dark);
  font-size: var(--ct-text-lg);
  line-height: 1.7;
  margin: 0 !important;
}

/* ---------- Board member cards as native Cards (Organization page) ----------
   Replicates .ct-bcard: square flush top photo, padded body, lime uppercase
   role, muted district, clamped bio, lime text-link email button.
   Description spans carry role/district/bio (Card description strips \003c p>/\003c a>,
   keeps \003c span> — probe-verified). */
.puck-card--board-lg, .puck-card--board-sm {
  padding: 0 !important;
  overflow: hidden;
  border: 1.5px solid rgba(220, 225, 235, 0.5);
  border-radius: 16px;
}
/* Renderer wraps the card image in an inline-styled div with height:200px —
   force the wrapper square (like old .ct-bcard-photo). */
.puck-card--board-lg > div:has(> img), .puck-card--board-sm > div:has(> img) {
  height: auto !important;
  aspect-ratio: 1 / 1;
  background: var(--ct-muted);
}
.puck-card--board-lg img, .puck-card--board-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.puck-card--board-lg .puck-card-title { padding: 1.5rem 1.5rem 0 !important; font-size: 1.25rem; margin: 0 0 0.25rem !important; line-height: 1.3; }
.puck-card--board-sm .puck-card-title { padding: 1rem 1rem 0 !important; font-size: 1.125rem; margin: 0 0 0.25rem !important; line-height: 1.3; }
.puck-card--board-lg .puck-card-description { padding: 0 1.5rem !important; margin: 0 !important; }
.puck-card--board-sm .puck-card-description { padding: 0 1rem !important; margin: 0 !important; }
.puck-card--board-lg .puck-card-description .ct-board-role,
.puck-card--board-sm .puck-card-description .ct-board-role {
  display: block;
  color: var(--ct-lime-hover);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.25rem;
}
.puck-card--board-lg .ct-bcard-district, .puck-card--board-sm .ct-bcard-district { display: block; }
.puck-card--board-lg .ct-bcard-bio {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 0.5rem;
}
/* Email button -> lime text link (like old .ct-bcard-email) */
.puck-card--board-lg .puck-card-button, .puck-card--board-lg a.puck-button,
.puck-card--board-sm .puck-card-button, .puck-card--board-sm a.puck-button {
  background: none !important;
  color: var(--ct-lime-hover) !important;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0.5rem 1.5rem 1.5rem !important;
}
.puck-card--board-sm .puck-card-button, .puck-card--board-sm a.puck-button {
  font-size: 0.75rem;
  margin: 0.4rem 1rem 1rem !important;
}
.puck-card--board-lg .puck-card-button:hover, .puck-card--board-lg a.puck-button:hover,
.puck-card--board-sm .puck-card-button:hover, .puck-card--board-sm a.puck-button:hover {
  background: none !important;
  color: var(--ct-navy) !important;
  text-decoration: underline;
}

/* ---------- Rates panels as native Cards (Membership) ----------
   Replicates .ct-panel + .ct-lime-title + .ct-price-row. Description carries
   nested spans (sanitizer keeps span/strong, drops br/small — notes ride in
   .ct-price-note spans). */
.puck-card--rates .puck-card-title {
  color: var(--ct-lime-hover);
  border-bottom: 3px solid var(--ct-lime);
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.puck-card--rates .puck-card-description { margin: 0 !important; }
.puck-card--rates .ct-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ct-card-border);
}
.puck-card--rates .ct-price-row:last-child { border-bottom: 0; }
.puck-card--rates .ct-price-label { color: var(--ct-navy); font-weight: 500; }
.puck-card--rates .ct-price-note {
  display: block;
  color: var(--ct-muted-fg);
  font-weight: 400;
  font-size: var(--ct-text-sm);
}
.puck-card--rates .ct-price-row strong {
  color: var(--ct-navy);
  font-size: var(--ct-text-xl);
  white-space: nowrap;
}

/* ---------- Resources / inquiry panels as native Cards (Organization) ---------- */
.puck-card--resources .puck-card-description { color: var(--ct-muted-fg); }
.puck-card--inquiry { text-align: center; }
.puck-card--inquiry .puck-card-title:empty { display: none; }
.puck-card--inquiry .puck-card-description {
  font-size: var(--ct-text-lg);
  color: var(--ct-muted-fg);
  max-width: 720px;
  margin: 0 auto 0.75rem !important;
}
/* Inquiry mailto button -> navy inline text link (old .ct-inline-link) */
.puck-card--inquiry .puck-card-button, .puck-card--inquiry a.puck-button {
  background: none !important;
  color: var(--ct-navy) !important;
  font-weight: 700;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.puck-card--inquiry .puck-card-button:hover, .puck-card--inquiry a.puck-button:hover {
  background: none !important;
  text-decoration: underline;
  color: var(--ct-navy) !important;
}

/* ---------- Stats ---------- */
.puck-stats { color: var(--ct-navy); }

/* ================================================================
   Recur widget styling (runtime-built markup) — ported from the
   existing head overrides in artifacts/ctcolt/src/index.css
   ================================================================ */

.recur-widget { font-family: inherit !important; }

/* --- 2-column card grid --- */
.recur-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 640px) {
  .recur-list { grid-template-columns: 1fr !important; }
}

/* --- Card: vertical layout --- */
.recur-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 28px 28px 24px !important;
  border-radius: 16px !important;
  border: 1.5px solid #e5e7eb !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(33,46,96,0.07) !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
  gap: 0 !important;
}

.recur-row:hover {
  box-shadow: 0 6px 24px rgba(33,46,96,0.12) !important;
  border-color: #AFCB30 !important;
}

.recur-row img,
.recur-row .placeholder { display: none !important; }

.recur-row .content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 24px !important;
}

.recur-row h4 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #212E60 !important;
  margin-bottom: 8px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.3 !important;
}

.recur-row .price {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #212E60 !important;
  line-height: 1 !important;
  margin: 4px 0 16px !important;
}

.recur-row .excerpt {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 !important;
}

.recur-row .meta {
  font-size: 0.8rem !important;
  color: #9ca3af !important;
  margin-top: 2px !important;
}

.recur-row a.btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px 24px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  transition: background-color 0.15s !important;
}

.recur-row a.btn:hover { background-color: #9ab825 !important; }

/* --- Grid cards (ProductList / EventList grid view) --- */
.recur-grid { gap: 24px !important; }

/* Cap product grids to 3 columns — Recur defaults to 1 col/item which
   creates a cramped 5-col layout for membership tiers.
   Target both the inner .recur-grid class AND any direct-child div wrapper
   that the central renderer might use instead. */
.recur-product-list .recur-grid,
.recur-single-product .recur-grid,
.recur-product-list > div:not([class*="title"]):not([class*="heading"]) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
@media (max-width: 900px) {
  .recur-product-list .recur-grid,
  .recur-single-product .recur-grid,
  .recur-product-list > div:not([class*="title"]):not([class*="heading"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .recur-product-list .recur-grid,
  .recur-single-product .recur-grid,
  .recur-product-list > div:not([class*="title"]):not([class*="heading"]) {
    grid-template-columns: 1fr !important;
  }
}

.recur-grid-item,
.recur-grid-classic {
  border-radius: 12px !important;
  border: 1.5px solid #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(33,46,96,0.06) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
  background: #ffffff !important;
}

/* Internal padding for grid-view product cards */
.recur-product-list .recur-grid-item,
.recur-product-list .recur-grid-classic {
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Title: give it room to breathe above the price */
.recur-product-list .recur-grid-item h3,
.recur-product-list .recur-grid-classic h3,
.recur-product-list .recur-grid-item .title,
.recur-product-list .recur-grid-classic .title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #212E60 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.5rem !important;
}

/* Price: lime, bold, with margin below */
.recur-grid-item .price,
.recur-grid-classic .price {
  color: #212E60 !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}

/* Description: muted, readable line-height, grows to fill card height */
.recur-product-list .recur-grid-item .excerpt,
.recur-product-list .recur-grid-classic .excerpt,
.recur-product-list .recur-grid-item p,
.recur-product-list .recur-grid-classic p {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  flex: 1 !important;
  margin-bottom: 1.25rem !important;
}

/* CTA button: pushed to bottom, full-width pill */
.recur-product-list .recur-grid-item .btn,
.recur-product-list .recur-grid-classic .btn,
.recur-product-list .recur-grid-item a.btn,
.recur-product-list .recur-grid-classic a.btn {
  margin-top: auto !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  border-radius: 50px !important;
  font-size: 0.9375rem !important;
}

.recur-grid-item:hover,
.recur-grid-classic:hover {
  box-shadow: 0 4px 16px rgba(33,46,96,0.12) !important;
  border-color: #AFCB30 !important;
}

.recur-grid-item .price,
.recur-grid-classic .price {
  color: #AFCB30 !important;
  font-weight: 700 !important;
}

.recur-grid-item .btn,
.recur-grid-classic .btn,
.recur-grid-item a.btn,
.recur-grid-classic a.btn {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

/* --- Central-renderer product/event card equivalents --- */
.recur-product-card,
.recur-event-card {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(33,46,96,0.06) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
  padding: 1.5rem !important;
}

.recur-product-card:hover,
.recur-event-card:hover {
  box-shadow: 0 4px 16px rgba(33,46,96,0.12) !important;
  border-color: #AFCB30 !important;
}

.recur-product-card-title,
.recur-event-card-title {
  color: #212E60 !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.recur-product-card-price {
  color: #212E60 !important;
  font-weight: 800 !important;
}

.recur-product-card-description,
.recur-event-card-description {
  color: #6b7280 !important;
  line-height: 1.5 !important;
}

.recur-product-card-button,
.recur-event-card-button,
.recur-event-modal-button {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

.recur-product-card-button:hover,
.recur-event-card-button:hover,
.recur-event-modal-button:hover { background-color: #9ab825 !important; }

.recur-product-list-title,
.recur-event-list-title {
  color: #212E60 !important;
  font-weight: 700 !important;
}

.recur-event-card-date { font-weight: 700 !important; color: #212E60 !important; }

/* --- Event date box --- */
.date-box { border-radius: 8px !important; overflow: hidden !important; }
.date-box .month { background-color: #212E60 !important; color: #ffffff !important; font-weight: 700 !important; }
.date-box .day { font-weight: 700 !important; color: #212E60 !important; }

/* --- Modal --- */
.recur-modal {
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}

.recur-modal-title, .recur-event-modal-title { color: #212E60 !important; font-weight: 700 !important; }
.recur-modal .price { color: #212E60 !important; font-weight: 700 !important; }

.recur-modal .btn,
.recur-modal a.btn,
.recur-modal-body .btn,
.recur-modal-body a.btn {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
}

/* --- Donation widget centering --- */
.donation-widget.recur-donation,
.recur-donation {
  max-width: 520px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: var(--ct-shadow-card) !important;
  padding: 2rem !important;
}

/* --- Donation form --- */
.donation-amount-btn {
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: border-color 0.15s, background 0.15s !important;
}

.donation-amount-btn:hover,
.donation-amount-btn.active {
  border-color: #AFCB30 !important;
  background-color: #AFCB30 !important;
  color: #212E60 !important;
}

.donation-submit-btn,
.donation-continue-btn {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

.donation-submit-btn:hover,
.donation-continue-btn:hover { background-color: #9ab825 !important; }

/* --- Contact form --- */
.contact-submit-btn {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

.contact-submit-btn:hover { background-color: #9ab825 !important; }

/* --- Pagination --- */
.recur-pagination-btn {
  border-radius: 8px !important;
  border: 1.5px solid #e5e7eb !important;
  font-weight: 600 !important;
  transition: border-color 0.15s !important;
}

.recur-pagination-btn:hover {
  border-color: #AFCB30 !important;
  color: #212E60 !important;
}

/* --- MembershipList: the Recur loader may replace its data-recur-widget
   placeholder, so use the durable CT COLT wrapper around it as the scope.
   Its fixed-width two-column plan grid centers inside normal page content. */
.ct-membership-widget .recur-paginated-content {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.ct-membership-widget [data-recur-widget="MembershipList"] > .recur-widget {
  display: block !important;
  width: min(960px, 100%) !important;
  max-width: 960px !important;
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ct-membership-widget .recur-list {
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
  .ct-membership-widget .recur-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .ct-membership-widget .recur-list {
    grid-template-columns: 1fr !important;
  }
}
.ct-membership-widget .recur-row .meta {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #212E60 !important;
  line-height: 1 !important;
  margin: 8px 0 14px !important;
}

/* --- Form inputs (contact/donation) --- */
.recur-widget input[type="text"],
.recur-widget input[type="email"],
.recur-widget input[type="tel"],
.recur-widget input[type="number"],
.recur-widget textarea,
.puck-contact-widget input,
.puck-contact-widget textarea {
  border: 1.5px solid hsl(220 20% 88%) !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
}

.recur-widget input:focus,
.recur-widget textarea:focus,
.puck-contact-widget input:focus,
.puck-contact-widget textarea:focus {
  outline: 2px solid #AFCB30 !important;
  outline-offset: 0 !important;
  border-color: #AFCB30 !important;
}

/* ---------- Accordion pattern (site-wide, used by page tasks) ----------
   Pages implement accordions as Embed blocks:
   \003c details class="ct-accordion">\003c summary>…\003c /summary>\003c div class="ct-accordion-body">…\003c /div>\003c /details> */
details.ct-accordion {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  box-sizing: border-box;
  max-width: var(--ct-content-max);
  margin: 0 auto 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

details.ct-accordion:hover { border-color: var(--ct-lime); }
details.ct-accordion[open] { box-shadow: var(--ct-shadow-card); }

details.ct-accordion > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--ct-navy);
  position: relative;
  padding-right: 44px;
}

details.ct-accordion > summary::-webkit-details-marker { display: none; }

details.ct-accordion > summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ct-muted-fg);
  transition: transform 0.2s ease;
}

details.ct-accordion[open] > summary::after { content: "−"; color: var(--ct-lime-hover); }

details.ct-accordion .ct-accordion-body {
  padding: 0 20px 18px;
  color: var(--ct-muted-fg);
  line-height: 1.6;
}

/* ================================================================
   Site chrome — header & footer surfaces (Task: header/footer)
   ================================================================ */

/* ---------- Header shell: sticky white bar + navy utility bar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  padding: 0;
  border-bottom: 1px solid var(--ct-border);
  box-shadow: 0 1px 2px rgba(33, 46, 96, 0.05);
}

/* Row 1 = navy utility bar.
   STRUCTURAL ASSUMPTION: the Recur header renderer emits rows in a fixed order —
   utility bar first, main white bar second. :first-child / :nth-child(2) target
   them by position because the renderer does not emit distinct row-level classes
   we can key off. If the renderer inserts a new row before the utility bar these
   rules will apply to the wrong row. Monitor after Recur renderer updates. */
.site-header .header-grid-row:first-child {
  background: var(--ct-navy);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
}

.site-header .header-grid-row:first-child .header-grid-zone {
  max-width: none;
}

.ct-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  height: 36px;
  max-width: var(--ct-content-max);
  margin: 0 auto;
  padding: 0 1rem;
}

.ct-utility a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ct-utility a:hover { color: #ffffff; }
.ct-utility svg { width: 12px; height: 12px; }

/* ---------- Language picker (Google Translate widget, custom UI) ---------- */
/* Suppress every piece of Google's injected UI and layout push-down. */
.goog-te-banner-frame, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
.skiptranslate { display: none !important; }
#gt_hidden { display: none !important; }
/* Google's default gadget dropdown + "Powered by Google" branding */
#goog-gt-tt, .goog-te-gadget, .goog-logo-link,
#google_translate_element { display: none !important; }
/* Google's hover tooltip/highlight on translated text */
.goog-text-highlight { background: none !important; box-shadow: none !important; }

.ct-lang { position: relative; display: inline-flex; }

.ct-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ct-lang-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.ct-lang-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ct-lang-btn .ct-lang-chevron { width: 10px; height: 10px; opacity: 0.6; transition: transform 0.15s ease; }
.ct-lang-btn[aria-expanded="true"] .ct-lang-chevron { transform: rotate(180deg); }

.ct-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 208px;
  background: #ffffff;
  border: 1px solid var(--ct-border);
  border-radius: 8px;
  box-shadow: var(--ct-shadow-lg);
  padding: 4px 0;
  z-index: 1000;
}

.ct-lang-menu[hidden] { display: none; }

.ct-lang-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  color: var(--ct-navy-dark);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ct-lang-option:hover {
  background: var(--ct-muted);
  color: var(--ct-navy);
}

.ct-lang-option.is-selected {
  color: var(--ct-navy);
  font-weight: 600;
  background: rgba(33, 46, 96, 0.05);
}

/* Row 2 = main white bar.
   STRUCTURAL ASSUMPTION: see :first-child comment above — nth-child(2) targets
   the main logo/nav row by position. Safe as long as the renderer keeps the
   two-row header layout. */
.site-header .header-grid-row:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 80px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Brand lockup — native `logo` header section. The logo type renders
   text-only when a `text` key is present, so the wordmark is added here
   via ::after (plain text "CT COLT"), replicating the old .ct-brand lockup. */
.site-header .header-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: 2rem;
}
.site-header .header-logo-img {
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
}
.site-header .header-logo-link::after {
  content: "CT COLT";
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ct-navy);
}
@media (max-width: 640px) {
  .site-header .header-logo-link::after { display: none; }
}

/* Brand lockup (custom section) */
.ct-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: 2rem; /* push nav away from wordmark regardless of zone gap */
}

.ct-brand img { height: 48px; width: auto; }

.ct-brand .ct-wordmark {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ct-navy);
}

@media (max-width: 640px) {
  .ct-brand .ct-wordmark { display: none; }
}

/* Nav links */
.site-header .header-nav .nav-menu {
  gap: 0.125rem;   /* gap is now minimal — padding on each item provides breathing room */
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* Let the nav zone breathe so all 7 items sit on one row */
.site-header .header-grid-zone--center { flex: 1 1 auto; min-width: 0; }

.site-header .nav-link,
.site-header .nav-link-dropdown,
.site-header .nav-menu a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ct-navy-dark);
  padding: 0.375rem 0.75rem;   /* horizontal breathing room inside each nav tab */
  border-radius: 6px;
}

/* Replace filled ▼ with a thin border-chevron matching the reference design */
.site-header .dropdown-arrow {
  font-size: 0 !important;   /* hide the ▼ character */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-left: 2px;
}
.site-header .dropdown-arrow::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px; /* optical center — shift up half the diagonal */
}

.site-header .nav-link:hover,
.site-header .nav-link-dropdown:hover,
.site-header .nav-menu a:hover {
  color: var(--ct-lime-hover);
  background: none;
  opacity: 1;
}

/* Dropdown menus */
.site-header .nav-dropdown,
.site-header .dropdown-menu,
.site-header .nav-submenu {
  background: #ffffff;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-lg);
  min-width: 200px;
  padding: 8px 0;
}

.site-header .nav-dropdown a,
.site-header .dropdown-menu a,
.site-header .nav-submenu a {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: var(--ct-navy-dark);
}

.site-header .nav-dropdown a:hover,
.site-header .dropdown-menu a:hover,
.site-header .nav-submenu a:hover {
  background: var(--ct-muted);
  color: var(--ct-lime-hover);
}

/* Header CTA button */
.header-cta-button {
  display: inline-block;
  background-color: var(--ct-lime);
  color: var(--ct-navy) !important;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 10px 24px;
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-sm);
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.2s ease;
}

.header-cta-button:hover {
  background-color: var(--ct-lime-hover);
  box-shadow: var(--ct-shadow-md);
  opacity: 1;
}

/* Mobile toggle */
.mobile-menu-toggle { color: var(--ct-navy-dark); }

/* Keep the utility bar (language picker + Member Login) visible on mobile,
   just tighter. */
@media (max-width: 640px) {
  .ct-utility { gap: 0.75rem; padding: 0 0.75rem; }
}

/* ---------- Footer: navy 4-column + sponsor strip ---------- */
.site-footer {
  background: var(--ct-navy);
  color: rgba(255, 255, 255, 0.8);
  border-top: none;
  margin-top: 4rem;
  padding: 3rem 1rem 1rem;
  font-size: 0.875rem;
}

/* Center the footer content grid within the full-width navy band.
   The renderer's built-in rule sets max-width but omits margin: auto,
   so the 4-column grid was sitting left-aligned. */
.site-footer .site-footer-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.site-footer a { color: rgba(255, 255, 255, 0.8); }
.site-footer a:hover { color: var(--ct-lime); opacity: 1; }

.site-footer .site-footer-title {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.site-footer .site-footer-title:empty { display: none; }

.site-footer .site-footer-links { display: flex; flex-direction: column; gap: 0.5rem; padding: 0; }

/* Column 1: logo pill + mission + socials */
.ct-footer-logo-pill {
  background: #ffffff;
  padding: 16px;
  border-radius: 8px;
  display: inline-block;
}

.ct-footer-logo-pill img { height: 64px; width: auto; display: block; }

.ct-footer-mission {
  margin-top: 1rem;
  max-width: 20rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.ct-footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0.75rem;
}

.ct-footer-social a { color: rgba(255, 255, 255, 0.6); display: inline-flex; }
.ct-footer-social a:hover { color: var(--ct-lime); }
.ct-footer-social svg { width: 20px; height: 20px; }

/* Contact / affiliations / join column bits */
.ct-footer-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ct-footer-subhead { color: #ffffff; font-weight: 600; font-size: 0.875rem; margin: 1.5rem 0 0.5rem; }

.ct-footer-join-btn {
  display: inline-block;
  background-color: var(--ct-lime);
  color: var(--ct-navy) !important;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: var(--ct-radius-md);
  text-decoration: none;
  margin-top: 0.75rem;
  transition: background-color 0.15s ease;
}

.ct-footer-join-btn:hover { background-color: var(--ct-lime-hover); }

/* Sponsor strip: full-width row under the 4 columns */
.site-footer .site-footer-section:has(.ct-sponsors) {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
  padding-top: 2rem;
}

.ct-sponsors-heading {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
}

.ct-sponsors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.ct-sponsor {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.ct-sponsor:hover { opacity: 1; }
.ct-sponsor img { height: 100%; width: auto; max-width: 220px; object-fit: contain; }

@media (min-width: 641px) { .ct-sponsor { height: 9rem; } }

/* Legal row (renderer's built-in bottom bar) — suppress Recur's auto text,
   replace with CT COLT's own copyright via ::before pseudo-element. */
.site-footer .footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
  padding-top: 2rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}
/* STRUCTURAL ASSUMPTION: > * hides the renderer's auto-generated direct
   children (copyright text, legal links) so our ::before pseudo-element can
   replace them. visibility:hidden cascades to any deeper descendants, so an
   extra wrapper level would not cause text to leak through. The risk is that
   the renderer might stop emitting direct children (breaking the assumption
   that there is anything to hide) — in that case the ::before still shows. */
.site-footer .footer-bottom-bar > * { visibility: hidden; font-size: 0; }
.site-footer .footer-bottom-bar::before {
  content: "© 2026 Connecticut Council of Language Teachers. All rights reserved.";
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

/* Zone alignment in the main header row: brand left, nav center, CTA right.
   STRUCTURAL ASSUMPTION: nth-child(2) targets the main white bar by position
   (same assumption as the Row 2 rule above). :first-child / :last-child on
   .header-grid-zone within that row assume the renderer always emits exactly
   three zones in order (brand | nav | CTA). The center zone is also identified
   by its class (.header-grid-zone--center) which is safer. If zone count or
   order changes, the :first-child / :last-child rules may misfire — test after
   any Recur header renderer update. */
.site-header .header-grid-row:nth-child(2) .header-grid-zone {
  display: flex;
  align-items: center;
}

.site-header .header-grid-row:nth-child(2) .header-grid-zone:first-child {
  justify-content: flex-start;
  flex: 0 0 auto;
}

.site-header .header-grid-row:nth-child(2) .header-grid-zone--center {
  flex: 1;
  justify-content: center;
}

.site-header .header-grid-row:nth-child(2) .header-grid-zone:last-child {
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* Ensure header rows stretch full width (renderer centers shrink-wrapped rows) */
.site-header .header-grid {
  max-width: none;
  width: 100%;
  align-items: stretch;
  gap: 0;
}

.site-header .header-grid-row {
  width: 100%;
  box-sizing: border-box;
}

/* STRUCTURAL ASSUMPTION: nth-child(2) = main white bar (see Row 2 comment). */
.site-header .header-grid-row:nth-child(2) {
  justify-content: space-between;
}

/* ============================================================
   PAGES CLUSTER 1: home / about / organization / membership /
   announcements. Embed-block patterns use .ct-* classes below.
   ============================================================ */

/* -- shared helpers -- */
.ct-center { text-align: center; }
.ct-eyebrow {
  font-size: var(--ct-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ct-lime-hover);
  margin: 0 0 0.5rem;
}
.ct-lead { font-size: var(--ct-text-lg); line-height: var(--ct-leading-lg); color: var(--ct-muted-fg); }
.ct-inline-link { color: var(--ct-navy); font-weight: 700; text-decoration: none; }
.ct-inline-link:hover { text-decoration: underline; }

/* buttons used inside Embed markup */
.ct-btn-lime, .ct-btn-outline {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: var(--ct-radius-md);
  font-weight: 700;
  font-size: var(--ct-text-base);
  text-decoration: none;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ct-btn-lime { background: var(--ct-lime); color: var(--ct-navy); }
.ct-btn-lime:hover { background: var(--ct-lime-hover); }
.ct-btn-outline { border: 2px solid var(--ct-navy); color: var(--ct-navy); background: transparent; }
.ct-btn-outline:hover { background: var(--ct-navy); color: #fff; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1.5rem auto; }

/* generic panel (mission, affiliations, resources, price cards) */
.ct-panel {
  background: #fff;
  border: 1px solid var(--ct-card-border);
  border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow-card);
  padding: 2rem;
  height: 100%;
  box-sizing: border-box;
}
.ct-panel h3 { margin: 0 0 1rem; color: var(--ct-navy); font-size: var(--ct-text-xl); }
.ct-panel h3.ct-lime-title { color: var(--ct-lime-hover); }
.ct-panel p { color: var(--ct-muted-fg); }
.ct-mission-panel {
  font-size: var(--ct-text-lg);
  line-height: 1.7;
  color: var(--ct-navy-dark);
  background: hsl(220 33% 96%) !important;
  border: none !important;
  border-radius: var(--ct-radius) !important;
  box-shadow: none !important;
  padding: 2rem !important;
  margin: 0.5rem 0 1.5rem !important;
}
.ct-lime-title { border-bottom: 3px solid var(--ct-lime); padding-bottom: 0.5rem; }

/* link lists (affiliations) */
/* !important + li reset: the native Text puck's own list styles re-add
   bullets/indent when the list rides inside .puck-text (About page). */
.ct-linklist, .puck-text ul.ct-linklist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ct-linklist li { list-style: none !important; margin: 0; padding: 0; }
.ct-linklist li::marker { content: none; }
.ct-linklist li + li { border-top: 1px solid var(--ct-card-border); }
.ct-linklist a {
  display: block;
  padding: 0.65rem 0.25rem;
  color: var(--ct-navy);
  font-weight: 500;
  text-decoration: none;
}
.ct-linklist a:hover { color: var(--ct-lime-hover); }

/* price rows (membership) */
.ct-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ct-card-border);
}
.ct-price-row:last-child { border-bottom: 0; }
.ct-price-row span { color: var(--ct-navy); font-weight: 500; }
.ct-price-row small { color: var(--ct-muted-fg); font-weight: 400; }
.ct-price-row strong { color: var(--ct-navy); font-size: var(--ct-text-xl); white-space: nowrap; }

/* minutes grid (organization) — explicit 2-column with folder icon */
/* 2fr/1fr wrapper for the Board Minutes & Resources two-column row */


.ct-minutes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.ct-minutes a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  background: #fff;
  color: var(--ct-navy);
  font-weight: 600;
  font-size: var(--ct-text-sm);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.ct-minutes a:hover { border-color: var(--ct-lime); color: var(--ct-lime-hover); }

/* social band (home) — full-width navy strip */
.ct-social-band {
  background: var(--ct-navy);
  color: #fff;
  text-align: center;
  padding: 4rem 1.5rem;
  border-radius: var(--ct-radius);
  margin: 1rem auto;
  max-width: var(--ct-content-max);
  box-sizing: border-box;
}
.ct-social-band h2 { color: #fff; margin: 0 0 0.5rem; font-size: var(--ct-text-3xl); }
.ct-social-band p { color: rgba(255,255,255,0.8); margin: 0 0 2rem; }
.ct-social-band-icons { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.ct-social-band-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 600;
  font-size: var(--ct-text-sm);
  text-decoration: none;
}
.ct-social-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  transition: background-color .15s ease, color .15s ease;
}
.ct-social-band-icons a:hover .ct-social-circle { background: var(--ct-lime); color: var(--ct-navy); }

/* CTA band (home) */
.ct-cta-band {
  background: linear-gradient(135deg, var(--ct-navy), var(--ct-navy-dark));
  color: #fff;
  text-align: center;
  padding: 4rem 1.5rem;
  border-radius: var(--ct-radius);
  margin: 1.5rem auto 3rem;
  max-width: var(--ct-content-max);
  box-sizing: border-box;
}
.ct-cta-band h2 { color: #fff; font-size: var(--ct-text-3xl); margin: 0 0 1rem; }
.ct-cta-band p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto 2rem; }
.ct-cta-band-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ct-cta-band-link { color: var(--ct-blue); font-weight: 600; text-decoration: none; }
.ct-cta-band-link:hover { text-decoration: underline; }

/* announcement cards */
.ct-annc {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--ct-card-border);
  border-radius: 1rem;
  box-shadow: var(--ct-shadow-card);
  padding: 2rem;
  max-width: 56rem;
  margin: 0 auto 2rem;
  box-sizing: border-box;
}
.ct-annc-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(175, 203, 48, 0.18);
  color: var(--ct-lime-hover);
  font-size: 1.25rem;
}
.ct-annc-body h2 { color: var(--ct-navy); font-size: var(--ct-text-2xl); margin: 0 0 1rem; }
.ct-annc-body p { color: var(--ct-muted-fg); line-height: 1.65; }
.ct-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.ct-jobs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-bg);
  color: var(--ct-navy);
  font-weight: 500;
  font-size: var(--ct-text-sm);
  text-decoration: none;
}
.ct-jobs a:hover { border-color: var(--ct-lime); color: var(--ct-lime-hover); }
/* Job links centered inside the card (pending fix folded into the native
   conversion 2026-08-17): label + arrow grouped and centered in each chip. */
.ct-jobs a { justify-content: center; }
.ct-jobs a::after { content: "\2197"; opacity: 0.5; }

/* ---------- Announcement cards as native Cards ----------
   Replicates .ct-annc: white card, lime icon circle left, body right.
   Renderer emits layout "icon" as an inline-styled centered column
   (icon span + body div as siblings); !important flips it to a row and
   beats the inline styles. Paragraphs are block spans (.ct-annc-p) since
   the Card description sanitizer strips \003c p>. */
.puck-card--annc {
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 1.25rem !important;
  max-width: 56rem;
  margin: 0 auto 2rem;
  border-radius: 1rem;
  padding: 2rem !important;
}
.puck-card--annc .material-symbols-rounded,
.puck-card--annc .material-icons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(175, 203, 48, 0.18);
  color: var(--ct-lime-hover);
  font-size: 1.5rem;
}
.puck-card--annc .puck-card-title {
  font-size: var(--ct-text-2xl);
  margin: 0 0 1rem !important;
}
.puck-card--annc .puck-card-description { margin: 0 !important; }
.puck-card--annc .ct-annc-p {
  display: block;
  color: var(--ct-muted-fg);
  line-height: 1.65;
  margin: 0 0 1em;
}
.puck-card--annc .ct-annc-p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .puck-card--annc { flex-direction: column !important; padding: 1.5rem !important; }
}

/* card variants */
.puck-card--pillar { text-align: center; }
.puck-card--board .puck-card-eyebrow { color: var(--ct-lime-hover); }

/* mobile */
@media (max-width: 640px) {
  .ct-annc { flex-direction: column; padding: 1.5rem; }
  .ct-panel { padding: 1.5rem; }
  .ct-social-band-icons { gap: 1.5rem; }
}

/* Full-bleed heroes: the renderer wraps page content in main { padding: 2rem }
   but its only built-in breakout rule cancels the top padding only
   (#puck-content > .puck-hero:first-child { margin-top: -2rem }).
   Left/right bleed requires negative margins + width compensation.
   Applies to ALL hero variants so every page hero reaches the screen edge.
   INTENTIONAL DIRECT-CHILD COMBINATOR: the > on #puck-content and main is
   deliberate — it targets only top-level heroes placed directly inside the
   content root, not heroes nested inside grid/flex wrapper blocks. Removing
   the > would bleed any hero anywhere on the page, which is wrong. The
   assumption is that the renderer's content root stays one level above .puck-hero;
   if the renderer adds an intermediate wrapper (e.g. a section element) the
   #puck-content > rule would stop matching and heroes would lose their bleed.
   The plain `main .puck-hero:first-child` fallback (no >) is kept as a safety
   net; :first-child is positional but acceptable here because a hero almost
   always leads the page. */
#puck-content > .puck-hero,
main > .puck-hero,
main .puck-hero:first-child {
  margin-left: -2rem;
  margin-right: -2rem;
  width: calc(100% + 4rem);
}

/* Single-style heroes: the renderer's inline background color is stripped by
   the style scrubber (plain-color backgrounds don't survive), so the navy
   page-hero background + white text must come from here. The home carousel
   hero (.puck-hero--carousel) keeps its photo slides and is unaffected. */
.puck-hero--standard {
  padding: 4rem 1.5rem;
  box-sizing: border-box;
}
/* Navy gradient only when the hero has no authored background image
   (e.g. the /store photo hero sets an inline background-image). */
.puck-hero--standard:not([style*="url("]) {
  background: linear-gradient(135deg, var(--ct-navy), var(--ct-navy-dark)) !important;
}
.puck-hero--standard .puck-hero-title,
.puck-hero--standard h1 { color: #fff !important; }
.puck-hero--standard .puck-hero-subtitle { color: rgba(255, 255, 255, 0.9) !important; font-size: var(--ct-text-xl); }
.puck-hero-eyebrow {
  background: rgba(175, 203, 48, 0.25);
  color: #fff;
  border-radius: 9999px;
  padding: 0.35rem 1rem;
  font-weight: 600;
  font-size: var(--ct-text-sm);
  margin-bottom: 1rem;
}

/* Bare headings & standalone-button rows: the renderer emits Heading blocks as
   bare \003c h1>-\003c h6> (no wrapper class) and Button rows as .puck-button-container,
   neither of which is width-capped. Cap them like other top-level blocks. */
main h1, main h2, main h3, main h4, main h5, main h6 {
  max-width: var(--ct-content-max);
  margin-left: auto;
  margin-right: auto;
}
.puck-hero--standard h1, .puck-hero--carousel h1 { max-width: none; }
.puck-button-container { max-width: var(--ct-content-max); margin-left: auto; margin-right: auto; }
/* Standalone .puck-button loses its variant styling to the scrubber — give it
   the primary look as a fallback (authored buttons use .ct-btn-* instead). */
.puck-button {
  display: inline-block;
  background: var(--ct-lime);
  color: var(--ct-navy);
  padding: 0.75rem 1.5rem;
}
.puck-button:hover { background: var(--ct-lime-hover); color: var(--ct-navy); }

/* The Membership account-status action is intentionally descriptive. The
   native renderer strips custom Button classes, so target its unique in-page
   destination and let it wrap on phones instead of expanding the page width. */
@media (max-width: 640px) {
  main section.text-center.space-y-4 > div.flex.flex-wrap.justify-center.gap-4.pt-4 > a[href="https://member.getrecur.com/ctcolt"] {
    white-space: normal !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
}

/* Embed-authored button rows */
.ct-btnrow { display: flex; max-width: var(--ct-content-max); margin: 0.5rem auto; }
.ct-btnrow-left { justify-content: flex-start; }
.ct-btnrow-center { justify-content: center; }
.ct-btn-navy {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: var(--ct-radius-md);
  font-weight: 700;
  text-decoration: none;
  background: var(--ct-navy);
  color: #fff;
  transition: background-color .15s ease;
}
.ct-btn-navy:hover { background: var(--ct-navy-dark); color: #fff; }

/* Board people-cards: renderer's default card image wrapper is a fixed 200px
   strip (inline height survives the scrubber), which crops headshots badly.
   Restore the source site's square crop on the board variant.
   STRUCTURAL ASSUMPTION: > div:first-child targets the renderer-generated image
   wrapper — the first direct child div of the card element. The :has(> img)
   guard scopes the rule to only fire when that div directly contains an \003c img>,
   which limits false positives if the renderer restructures. If the renderer
   wraps the image in an extra element (making it a grandchild) the :has(> img)
   guard will stop matching and the square-crop override will silently drop off.
   No class-based alternative is available because the renderer does not emit a
   distinct class on the image wrapper. Verify square headshots after Recur
   renderer updates. */
.puck-card--board > div:first-child:has(> img) {
  height: auto !important;
  aspect-ratio: 1 / 1;
}
.puck-card--board > div:first-child:has(> img) > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.ct-note {
  background: rgba(189, 221, 225, 0.35);
  padding: 1rem;
  border-radius: var(--ct-radius-md);
  color: var(--ct-navy);
  font-size: var(--ct-text-sm);
}

/* ===================== PAGES CLUSTER 2 (Events) ===================== */
.ct-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: var(--ct-radius-md); overflow: hidden; box-shadow: 0 6px 24px rgba(33, 46, 96, 0.12); }
.ct-gallery img { width: 100%; height: 8rem; object-fit: cover; display: block; }
.ct-gallery .ct-gallery-wide { grid-column: 1 / -1; height: 12rem; }

.ct-callout { display: block; margin-top: 1rem; padding: 1rem; background: var(--ct-muted); border-radius: var(--ct-radius-md); }
.ct-callout h4 { margin: 0 0 0.5rem; color: var(--ct-navy); }
.ct-callout-amber { background: #fffbeb; color: #78350f; }
.ct-callout-amber p { color: #78350f; }

.ct-schedule { list-style: none; padding: 0; margin: 1rem 0 0; }
.ct-schedule li { display: flex; gap: 1rem; padding: 0.35rem 0; font-weight: 500; }
.ct-schedule li strong { width: 7rem; flex-shrink: 0; color: var(--ct-navy); }

.ct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: var(--ct-content-max); margin: 0 auto 1.5rem; }
.ct-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: 1.25rem 1rem; background: rgba(189, 221, 225, 0.18); border-radius: var(--ct-radius-md); color: var(--ct-muted-fg); }
.ct-stat .ct-stat-label { font-weight: 700; color: var(--ct-navy); }

.ct-checklist { list-style: none; padding: 0; margin: 1rem 0 0; }
.ct-checklist li { position: relative; padding: 0.3rem 0 0.3rem 2rem; color: var(--ct-muted-fg); }
.ct-checklist li::before { content: "✓"; position: absolute; left: 0.25rem; top: 0.3rem; font-weight: 800; color: var(--ct-lime); }

.ct-list { padding-left: 1.4rem; margin: 0.75rem 0 0; }
.ct-list li { margin: 0.4rem 0; color: var(--ct-muted-fg); }

.ct-panel h4 { margin: 1.1rem 0 0.25rem; color: var(--ct-navy); }

.ct-coord-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 640px; margin: 1.25rem auto; }
.ct-coord { background: #ffffff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md); padding: 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.ct-coord strong { color: var(--ct-navy); font-size: 1.05rem; }
.ct-coord span { font-size: var(--ct-text-sm); color: var(--ct-muted-fg); }
.ct-coord a { color: var(--ct-lime-dark, #7a9422); font-weight: 600; text-decoration: none; }
.ct-coord a:hover { text-decoration: underline; }

.ct-small-muted { font-size: var(--ct-text-sm); color: var(--ct-muted-fg); }

.ct-join-panel { max-width: 780px; margin-left: auto; margin-right: auto; }
.ct-join-panel h2 { margin-top: 0; color: var(--ct-navy); }

/* Card variants for cluster 2 */
.puck-card--session-upcoming { border-color: var(--ct-lime) !important; box-shadow: 0 6px 24px rgba(33, 46, 96, 0.12) !important; }
.puck-card--session { opacity: 0.85; }
.puck-card--video .puck-card-description:empty { display: none; }

@media (max-width: 767px) {
  .ct-stats { grid-template-columns: repeat(2, 1fr); }
  .ct-coord-grid { grid-template-columns: 1fr; }
  .ct-gallery img { height: 7rem; }
}

/* ===================== PAGES CLUSTER 3 (Awards & Scholarships) ===================== */
.ct-note-panel { max-width: 880px; margin-left: auto; margin-right: auto; }
/* Panel image (Seal of Biliteracy items) — was inline-styled in the old Embed;
   the Text sanitizer strips inline styles, so the sizing lives here. */
.ct-note-panel img { max-height: 12rem; margin: 0 auto 1.5rem; display: block; }
.ct-note-panel p { color: var(--ct-muted-fg); margin: 0.25rem 0; }
.ct-note-panel .ct-btnrow { margin-top: 1rem; }

.ct-award { max-width: 880px; margin-left: auto; margin-right: auto; }
.ct-award h2 { margin-top: 0; color: var(--ct-navy); font-size: 1.5rem; }
.ct-award h3 { color: var(--ct-navy); margin: 1.25rem 0 0.35rem; font-size: 1.1rem; }
.ct-award p { color: var(--ct-muted-fg); margin: 0.5rem 0; }
.ct-award .ct-btnrow { margin-top: 1.25rem; }

.ct-theme { font-size: 1.25rem; font-style: italic; font-weight: 500; color: var(--ct-lime-dark, #7a9422); margin: 0.5rem 0; }

.ct-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1rem 0; }
.ct-two-col h4, .ct-two-col h5 { color: var(--ct-navy); margin: 0 0 0.4rem; }

.ct-cat { background: var(--ct-muted); border-radius: var(--ct-radius-md); padding: 1rem; }
.ct-cat .ct-cat-name { font-weight: 700; color: var(--ct-navy); margin: 0 0 0.25rem; }
.ct-cat p { margin: 0.25rem 0; font-size: var(--ct-text-sm); }

.ct-yearrow { flex-wrap: wrap; }
.ct-yearrow .ct-btn-outline { padding: 0.4rem 1rem; }

@media (max-width: 767px) {
  .ct-two-col { grid-template-columns: 1fr; }
}

/* ============ PAGES CLUSTER 4 (advocacy / journal / newsletter / blog) ============ */
.ct-linkgrid { display: grid; gap: 0.75rem; }
.ct-linkgrid-3 { grid-template-columns: repeat(3, 1fr); }
.ct-linkgrid-4 { grid-template-columns: repeat(4, 1fr); }
.ct-linktile {
  display: block; padding: 0.85rem 1rem; text-align: center;
  border: 1px solid rgba(11, 31, 59, 0.15); border-radius: 0.5rem;
  color: var(--ct-navy); font-weight: 600; font-size: var(--ct-text-sm);
  text-decoration: none; background: #fff;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ct-linktile:hover { border-color: var(--ct-lime); color: var(--ct-lime-dark, var(--ct-navy)); }
@media (max-width: 767px) {
  .ct-linkgrid-3, .ct-linkgrid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============ PAGES CLUSTER 5 (get-involved / seal / store / donate / contact) ============ */
.ct-linkgrid-2 { grid-template-columns: repeat(2, 1fr); }
.ct-restile { text-align: left; }
.ct-restile .ct-tile-desc {
  display: block; margin-top: 0.25rem;
  font-weight: 400; font-size: 0.85rem; color: rgba(11, 31, 59, 0.65);
}
.ct-volgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ct-voltile {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1.25rem; background: rgba(33, 46, 96, 0.04); border-radius: 0.75rem;
}
.ct-voltile .material-symbols-outlined { color: var(--ct-lime); font-size: 1.6rem; flex: none; }
.ct-voltile h4 { margin: 0 0 0.25rem; color: var(--ct-navy); font-size: 1.05rem; }
.ct-voltile p { margin: 0; color: rgba(11, 31, 59, 0.7); font-size: 0.95rem; }
.ct-emailcard { background: rgba(33, 46, 96, 0.05); border-radius: 0.5rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.ct-emailcard h4 { margin: 0 0 0.2rem; color: var(--ct-navy); font-size: 1rem; }
.ct-emailcard a { color: var(--ct-lime-dark, var(--ct-navy)); font-weight: 600; text-decoration: none; }
.ct-emailcard a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .ct-linkgrid-2, .ct-volgrid { grid-template-columns: 1fr; }
}

/* --- Cluster 5: native contact form --- */
.ct-contactform form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; position: relative; }
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ct-contactform input, .ct-contactform textarea {
  width: 100%; box-sizing: border-box; padding: 0.65rem 0.9rem;
  border: 1px solid rgba(11, 31, 59, 0.2); border-radius: 0.5rem;
  font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--ct-navy);
}
.ct-contactform input:focus, .ct-contactform textarea:focus {
  outline: none; border-color: var(--ct-lime); box-shadow: 0 0 0 3px rgba(175, 203, 48, 0.25);
}
.ct-challenge-label { font-size: 0.9rem; font-weight: 600; color: var(--ct-navy); margin-bottom: -0.35rem; }
.ct-form-error { color: #b3261e; font-size: 0.9rem; }
.ct-form-success { color: var(--ct-navy); font-weight: 600; padding: 1rem 0; }
.ct-contactform .contact-submit-btn {
  background: var(--ct-lime) !important; color: var(--ct-navy) !important;
  border: none; border-radius: 50px; font-weight: 700; padding: 0.75rem 1.5rem; cursor: pointer;
}
@media (max-width: 560px) { .ct-form-row { grid-template-columns: 1fr; } }

/* ============ ORGANIZATION PAGE — custom board member cards ============ */
/* Replicates the dev app's Card + CardContent layout exactly:
   square photo (aspect-ratio 1/1, object-cover), rounded card with shadow,
   p-6 body for exec / p-4 body for coordinators. */

 /* text-lg */


.ct-bcard-role-xs { font-size: 0.7rem; }

.ct-bcard-district {
  font-size: 0.875rem;       /* text-sm */
  color: var(--ct-muted-fg);
  margin: 0 0 1rem;
}
.ct-bcard-district-sm {
  font-size: 0.75rem;        /* text-xs */
  margin-bottom: 0.75rem;
}

.ct-bcard-bio {
  font-size: 0.875rem;
  color: rgba(20, 28, 58, 0.8);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 1rem;
}

/* ============ ORGANIZATION PAGE — section headings ============ */
/* Replicates the dev app's h2 style: text-3xl font-bold border-b pb-4 mb-10 */


/* ============ HEADING / TITLE COLOR OVERRIDES ============
   Recur's renderer injects inline styles or theme-level rules that default
   Heading blocks (.puck-heading) and card titles (.puck-card-title) to the
   site primary colour (lime). The rules below restore the intended navy with
   !important so they win over any inline style.
   Intentional white headings live inside Embed blocks (.ct-cta-band h2,
   .ct-social-band h2) as plain \003c h2> tags — not .puck-heading elements — so
   they are unaffected. Hero white text already uses .puck-hero-title with
   its own !important rule and is also unaffected. */
.puck-heading   { color: var(--ct-navy) !important; }
.puck-card-title { color: var(--ct-navy) !important; }
.ct-annc-body h2 { color: var(--ct-navy) !important; }

/* Center-aligned Heading blocks render as bare \003c h2>/\003c h3> elements (no
   .puck-heading class), with an inline color from the renderer's theme.
   Using #puck-content (ID selector) gives us specificity 0,1,0,1 which
   beats the renderer's class-only rules regardless of !important source
   order. The dark-section exceptions have specificity 0,1,1,1 which
   outranks the base rule so white headings inside .ct-cta-band and
   .ct-social-band are preserved. */
#puck-content h2 { color: var(--ct-navy) !important; }
#puck-content h3 { color: var(--ct-navy) !important; }
#puck-content h4 { color: var(--ct-navy) !important; }
#puck-content .puck-heading { color: var(--ct-navy) !important; }

/* Headings inside Grid zone columns may not inherit #puck-content ancestry
   in the Recur renderer — add a broad main-scoped fallback that covers
   them. Specificity 0,0,0,2 (two type selectors) loses to any
   class-selector override, so .ct-cta-band / .ct-social-band white rules
   still win without needing !important here. */
main h2 { color: var(--ct-navy) !important; }
main h3 { color: var(--ct-navy) !important; }
main h4 { color: var(--ct-navy) !important; }

/* Utility heading classes for embed blocks — used instead of \003c h2> elements
   because Recur's renderer overrides inline color on semantic heading tags
   via JavaScript. Using a \003c div class="ct-heading-2"> avoids that override
   while preserving the visual appearance. */
.ct-heading-2 {
  font-size: var(--ct-text-3xl);
  line-height: var(--ct-leading-3xl);
  font-weight: 700;
  color: var(--ct-navy) !important;
  margin: 0 0 1rem;
}
.ct-heading-3 {
  font-size: var(--ct-text-2xl);
  line-height: var(--ct-leading-2xl);
  font-weight: 700;
  color: var(--ct-navy) !important;
  margin: 0 0 0.75rem;
}
.ct-heading-center { text-align: center; }

/* White-on-dark heading exceptions — higher specificity wins */
#puck-content .ct-cta-band h2,
#puck-content .ct-cta-band h3,
#puck-content .puck-cta h2,
#puck-content .puck-cta h3,
#puck-content .puck-cta-title,
#puck-content .ct-social-band h2,
#puck-content .puck-hero-content h2,
#puck-content .puck-hero-content h3 { color: #ffffff !important; }

/* ============================================================
   Native puck data widgets — additions only. Event/product card
   classes are already styled at ~line 700; do NOT restyle them
   here (equal-specificity later rules would override, e.g. the
   navy bold .recur-event-card-date). This section adds grid gaps
   and BlogList card styling only.
   ============================================================ */
.recur-event-list-grid,
.recur-product-list-grid,
.recur-blog-list-grid { gap: 24px !important; }
/* Blog cards need a readable single-column flow on phones. The renderer's
   desktop column setting otherwise stays active at this breakpoint. */
@media (max-width: 600px) {
  .recur-blog-list-grid { grid-template-columns: 1fr !important; }
}

.recur-blog-card {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(33,46,96,0.07) !important;
  background: #ffffff !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
.recur-blog-card:hover {
  box-shadow: 0 6px 24px rgba(33,46,96,0.12) !important;
  border-color: #AFCB30 !important;
}
.recur-blog-card-title {
  color: #212E60 !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
/* Title links: no underline (match old .ct-blog-card), lime on hover */
.recur-blog-card a,
.recur-blog-card-title a,
a.recur-blog-card-title {
  text-decoration: none !important;
}
.recur-blog-card:hover .recur-blog-card-title,
.recur-blog-card .recur-blog-card-title a:hover {
  color: #9ab825 !important;
}
.recur-blog-card-date { color: #6b7280 !important; }
.recur-blog-card-button {
  display: inline-block !important;
  background: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 12px 28px !important;
  text-decoration: none !important;
  transition: background-color 0.15s !important;
}
.recur-blog-card-button:hover { background: #9ab825 !important; }

/* ---------- Events page intro (native Text; sanitizer strips inline styles) ---------- */
.ct-events-intro {
  color: var(--ct-muted-fg);
  max-width: 42rem;
  margin: 0 auto 2rem;
}

/* Native EventList on /events: cap card column width and center it, matching
   the old widget's ~640px centered stacked cards. */
.recur-event-list { max-width: 42rem; }

/* ---------- Professional Learning Series session cards ----------
   Native Text pucks (.ct-panel markup, exception #7); sanitizer strips inline
   styles so the old inline card styling lives here as classes. */
.ct-session { margin-bottom: 1rem; }
.ct-session--upcoming { border-color: var(--ct-lime); box-shadow: 0 6px 24px rgba(33,46,96,0.12); }
.ct-session--completed { opacity: 0.85; }
/* .ct-panel p (0,1,1) would out-rank a bare class — scope under .ct-session. */
.ct-session .ct-session-meta { font-size: 0.85rem; font-weight: 700; color: var(--ct-lime-hover); margin: 0 0 0.4rem; }
.ct-session .ct-session-title { font-size: 1.1rem; font-weight: 700; color: var(--ct-navy); margin: 0 0 0.5rem; }
.ct-session .ct-session-presenter { color: var(--ct-muted-fg); margin: 0; }
.ct-session-register { margin-top: 1rem; }



            /* Base styles */
            * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
            }
            
            body {
              font-family: Montserrat;
              line-height: 1.6;
              color: var(--color-text, #333);
              background-color: var(--color-background, #ffffff);
            }

            /* Global image safety — prevents oversized AMS/Quill images from breaking layouts */
            img {
              max-width: 100%;
              height: auto;
            }

            /* Public search: uses theme tokens and stays compact in either
               chrome region while allowing the full results page to breathe. */
            .site-search { position:relative; display:flex; align-items:center; gap:.4rem; min-width:0; }
            .site-search-input, .public-search-form input { min-width:0; width:100%; padding:.5rem .65rem; border:1px solid var(--color-border,#d1d5db); border-radius:.375rem; color:var(--color-text,#111827); background:var(--color-background,#fff); font:inherit; }
            .site-search-input[data-input-background="transparent"] { background:transparent; }
            .site-search-button, .public-search-form button { border:0; border-radius:.375rem; padding:.5rem .7rem; background:var(--color-primary,#2563eb); color:var(--color-on-primary,#fff); font:inherit; cursor:pointer; }
            .site-search-icon-button { min-width:2.4rem; min-height:2.4rem; padding:.35rem; font-size:1.35rem; line-height:1; }
            .site-search-suggestions { position:absolute; z-index:100; top:calc(100% + .3rem); left:0; right:0; max-height:18rem; overflow:auto; margin:0; padding:.25rem; list-style:none; border:1px solid var(--color-border,#d1d5db); border-radius:.375rem; background:var(--color-background,#fff); box-shadow:0 8px 20px rgba(0,0,0,.15); }
            .site-search-suggestion { padding:.55rem .65rem; cursor:pointer; color:var(--color-text,#111827); border-radius:.25rem; }
            .site-search-suggestion[aria-selected="true"], .site-search-suggestion:hover { background:var(--color-surface,#f3f4f6); }
            .public-search-page { max-width:900px; margin:0 auto; padding:3rem 1.25rem; color:var(--color-text,#111827); }
            .public-search-page h1 { margin:0 0 1rem; font-size:2rem; }
            .public-search-form { display:flex; gap:.6rem; align-items:end; flex-wrap:wrap; margin-bottom:1.5rem; }
            .public-search-form label { width:100%; font-weight:600; }
            .public-search-form input { flex:1 1 18rem; }
            .public-search-results { display:grid; gap:1rem; padding:0; list-style:none; }
            .public-search-result { padding:1rem; border:1px solid var(--color-border,#e5e7eb); border-radius:.5rem; }
            .public-search-result h2 { margin:.35rem 0; font-size:1.2rem; }.public-search-result p { margin:.35rem 0 .65rem; color:var(--color-textSecondary,#4b5563); }
            .public-search-result a, .public-search-pages a { color:var(--color-primary,#2563eb); }.public-search-type,.public-search-strength { font-size:.8rem; }.public-search-strength { float:right; color:var(--color-textSecondary,#4b5563); }
            .public-search-pages { display:flex; justify-content:center; gap:1rem; margin-top:1.5rem; }
            @media (max-width: 640px) { .site-search { width:100%; }.public-search-form { align-items:stretch; }.public-search-form button { width:100%; } }
            
            /* Quill alignment styles for rich text content */
            .ql-align-center {
              text-align: center;
            }
            .ql-align-right {
              text-align: right;
            }
            .ql-align-justify {
              text-align: justify;
            }
            .ql-indent-1 { padding-left: 3em; }
            .ql-indent-2 { padding-left: 6em; }
            .ql-indent-3 { padding-left: 9em; }
            .ql-indent-4 { padding-left: 12em; }
            .ql-indent-5 { padding-left: 15em; }
            
            /* Quill font families - matches Quill whitelist */
            .ql-font-arial { font-family: Arial, sans-serif; }
            .ql-font-helvetica { font-family: Helvetica, sans-serif; }
            .ql-font-georgia { font-family: Georgia, serif; }
            .ql-font-times-new-roman { font-family: 'Times New Roman', serif; }
            .ql-font-courier-new { font-family: 'Courier New', monospace; }
            .ql-font-verdana { font-family: Verdana, sans-serif; }
            .ql-font-comic-sans { font-family: 'Comic Sans MS', cursive; }
            .ql-font-lucida { font-family: 'Lucida Console', monospace; }
            .ql-font-inter { font-family: 'Inter', sans-serif; }
            .ql-font-poppins { font-family: 'Poppins', sans-serif; }
            .ql-font-permanent-marker { font-family: 'Permanent Marker', cursive; }
            .ql-font-theme-body { font-family: var(--font-primary, system-ui, sans-serif); }
            .ql-font-theme-header { font-family: var(--font-secondary, var(--font-primary, system-ui)); }
            .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
            .ql-font-monospace { font-family: 'Courier New', Consolas, monospace; }
            
            /* Quill code blocks */
            pre.ql-syntax,
            .rich-text-content pre,
            .puck-text pre {
              background-color: var(--color-surface, #f5f5f5);
              color: var(--color-text, #333);
              padding: 12px 16px;
              border-radius: 6px;
              overflow-x: auto;
              font-family: 'Courier New', Consolas, monospace;
              font-size: 0.9em;
              line-height: 1.5;
              margin: 16px 0;
              white-space: pre-wrap;
              word-wrap: break-word;
            }
            
            /* Quill inline code */
            .rich-text-content code,
            .puck-text code {
              background-color: var(--color-surface, #f0f0f0);
              padding: 2px 6px;
              border-radius: 3px;
              font-family: 'Courier New', Consolas, monospace;
              font-size: 0.9em;
            }
            
            /* Quill blockquote */
            .rich-text-content blockquote,
            .puck-text blockquote,
            blockquote.ql-blockquote {
              border-left: 4px solid var(--color-primary, #3b82f6);
              padding-left: 16px;
              margin: 16px 0;
              font-style: italic;
              color: var(--color-text-secondary, #666);
            }
            
            /* Quill paragraph spacing */
            p {
              margin-bottom: 15px;
            }
            p:last-child {
              margin-bottom: 0;
            }
            
            /* Rich text content - Quill formatting styles */
            .rich-text-content ul,
            .puck-text ul {
              margin: 15px 0;
              padding-left: 1.5em;
              list-style-type: disc;
              list-style-position: outside;
            }
            
            .rich-text-content ol,
            .puck-text ol {
              margin: 15px 0;
              padding-left: 1.5em;
              list-style-type: decimal;
              list-style-position: outside;
            }
            
            .rich-text-content li,
            .puck-text li {
              margin-bottom: 8px;
              display: list-item;
              padding-left: 0.5em;
            }
            
            /* Nested lists */
            .rich-text-content ul ul,
            .puck-text ul ul {
              list-style-type: circle;
              margin-top: 8px;
              margin-bottom: 8px;
            }
            
            .rich-text-content ul ul ul,
            .puck-text ul ul ul {
              list-style-type: square;
            }
            
            .rich-text-content ol ol,
            .puck-text ol ol {
              list-style-type: lower-alpha;
              margin-top: 8px;
              margin-bottom: 8px;
            }
            
            .rich-text-content ol ol ol,
            .puck-text ol ol ol {
              list-style-type: lower-roman;
            }
            
            /* Responsive Grid - matches Puck editor behavior */
            /* Uses CSS variable for column count set via inline style */
            .puck-grid {
              display: grid;
              gap: 1rem;
            }
            .puck-grid.responsive-grid {
              grid-template-columns: 1fr;  /* Mobile: single column */
            }
            @media (min-width: 768px) {
              .puck-grid.responsive-grid {
                grid-template-columns: var(--grid-template, repeat(var(--grid-columns, 2), 1fr));
              }
            }
            .puck-grid-column {
              /* Structural child wrapper: content components own appearance. */
            }
            
            /* Header Navigation */
            .site-header {
              position: relative;
              
              background: var(--color-surface, #f5f5f5);
              
              padding: 1rem;
              border-bottom: 1px solid var(--color-border, #ddd);
              
              
            }
            
            /* Background image layer — sits above bg color, below all content (same as React approach) */
            
            
            .site-header nav > ul {
              list-style: none;
              display: flex;
              flex-direction: row;
              gap: 2rem;
              max-width: var(--header-max-width, var(--content-max-width, 1200px));
              margin: 0 auto;
              align-items: center;
              justify-content: center;
            }
            
            .site-header nav a,
            .site-header nav a:link,
            .site-header nav a:visited,
            .site-header nav a:hover,
            .site-header nav a:active,
            .site-header .nav-link,
            .site-header .nav-link-dropdown,
            .site-header .nav-menu a {
              color: var(--color-text, #333);
              text-decoration: none;
            }
            
            .site-header nav a:hover,
            .site-header .nav-link:hover,
            .site-header .nav-link-dropdown:hover {
              opacity: 0.8;
              
              text-decoration: none;
            }
            
            /* Navigation Style variants */
            .site-header .nav-link,
                  .site-header .nav-link-dropdown {
                    padding: 0.5rem 1rem;
                    border-radius: 0.375rem;
                    transition: background-color 0.2s ease;
                  }
                  .site-header .nav-link:hover,
                  .site-header .nav-link-dropdown:hover {
                    background-color: rgba(0,0,0,0.05);
                    opacity: 1;
                  }
            
            /* Footer */
            .site-footer {
              background: var(--color-surface, #f5f5f5);
              color: var(--color-text, #333);
              padding: 2rem 1rem 1rem;
              margin-top: 4rem;
              border-top: 1px solid var(--color-border, #ddd);
              
            }
            
            .site-footer a {
              color: var(--color-primary, #1976d2);
              text-decoration: none;
            }
            
            .site-footer a:hover {
              opacity: 0.8;
            }
            
            /* Ensure all footer navigation links have no underline */
            .site-footer ul a,
            .site-footer nav a,
            .site-footer li a {
              text-decoration: none;
            }
            
            /* Main content */
            main {
              max-width: var(--content-max-width, 1200px);
              margin: 0 auto;
              padding: 2rem;
            }

            /* A leading hero sits flush beneath the site header by cancelling main's
               2rem top padding. This applies in every content-width mode (not just
               full width). Only the FIRST child matches, so a hero placed lower on the
               page is never pulled upward. */
            #puck-content > .puck-hero:first-child {
              margin-top: -2rem;
            }
            
            h1, h2, h3, h4, h5, h6 {
              color: var(--color-heading, var(--color-text, #333));
              /* Parity with the editor/preview: .puck-root h1–h6 use the theme's
                 header font (--font-secondary). Without this, published headings
                 silently fall back to the body font. */
              font-family: var(--font-secondary, var(--font-primary, system-ui));
            }

            h1 {
              margin-bottom: 1rem;
            }
            
            .published-note {
              color: var(--color-textSecondary, #666);
              font-size: 0.875rem;
              margin-bottom: 2rem;
            }
            
            .content-preview {
              background: var(--color-surface, #f9f9f9);
              padding: 2rem;
              border-radius: 8px;
              border: 1px solid var(--color-border, #ddd);
            }
            
            /* @pqina/flip v1.8.4 - Vendor CSS for Flip Counter */
            .tick{box-sizing:border-box;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:default;position:relative;z-index:1;line-height:1.4}.tick *{box-sizing:inherit}.tick [data-view]{max-width:100%}.tick span[data-view]{display:inline-block}.tick .tick-credits{position:absolute;right:0;bottom:0;opacity:.4;text-decoration:none;font-size:11px;color:inherit}.tick [data-layout~=pad]{margin:-.25em}.tick [data-layout~=pad]>*{margin:.25em}.tick [data-layout~=horizontal]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}.tick [data-layout~=horizontal][data-layout~=baseline]{-ms-flex-align:baseline;align-items:baseline}.tick [data-layout~=horizontal][data-layout~=center]{-ms-flex-pack:center;justify-content:center}.tick [data-layout~=horizontal][data-layout~=right]{-ms-flex-pack:end;justify-content:flex-end}.tick [data-layout~=horizontal][data-layout~=left]{-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=horizontal][data-layout~=fill],.tick [data-layout~=horizontal][data-layout~=stretch]{-ms-flex-line-pack:stretch;align-content:stretch;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.tick [data-layout~=horizontal][data-layout~=fill]>*,.tick [data-layout~=horizontal][data-layout~=stretch]>*{-ms-flex:1 0 0px;flex:1 0 0;width:100%}.tick [data-layout~=horizontal][data-layout~=multi-line]{-ms-flex-wrap:wrap;flex-wrap:wrap}.tick [data-layout~=horizontal][data-layout~=fit]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-line-pack:center;align-content:center;white-space:nowrap;-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=vertical]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.tick [data-layout~=vertical][data-layout~=top]{-ms-flex-pack:start;justify-content:flex-start}.tick [data-layout~=vertical][data-layout~=bottom]{-ms-flex-pack:end;justify-content:flex-end;min-height:100%}.tick [data-layout~=vertical][data-layout~=middle]{-ms-flex-pack:center;justify-content:center;min-height:100%}.tick [data-layout~=vertical][data-layout~=left]{-ms-flex-align:start;align-items:flex-start}.tick [data-layout~=vertical][data-layout~=right]{-ms-flex-align:end;align-items:flex-end}.tick [data-layout~=vertical][data-layout~=center]{text-align:center}.tick [data-layout~=vertical][data-layout~=fill],.tick [data-layout~=vertical][data-layout~=stretch]{-ms-flex-align:stretch;align-items:stretch;min-height:100%}.tick [data-layout~=vertical][data-layout~=fill]>*,.tick [data-layout~=vertical][data-layout~=stretch]>*{-ms-flex:1 0 0px;flex:1 0 0}.tick [data-layout~=vertical]>*+*{margin-top:.5em}.tick [data-layout~=overlay]{position:relative}.tick [data-layout~=overlay]>*{margin:0}.tick [data-layout~=overlay][data-layout~=center]{text-align:center}.tick [data-layout~=overlay][data-layout~=left]{text-align:left}.tick [data-layout~=overlay][data-layout~=right]{text-align:right}.tick [data-layout~=overlay]>[data-overlay=fill],.tick [data-layout~=overlay]>[data-overlay=stretch]{position:absolute;left:0;right:0;top:0;bottom:0}.tick [data-layout~=overlay]>[data-overlay=center]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:absolute;left:0;right:0;top:0;bottom:0}.tick-flip{position:relative;text-align:center}.tick-flip *{border-radius:inherit;white-space:pre;letter-spacing:inherit;text-indent:inherit}.tick-flip-front{border-bottom-left-radius:0;border-bottom-right-radius:0}.tick-flip-back{border-top-left-radius:0;border-top-right-radius:0}.tick-flip-spacer{display:block;visibility:hidden}.tick-flip-shadow{position:absolute;left:1px;right:1px;top:1px;bottom:1px;color:transparent!important;background:transparent!important}.tick-flip-shadow-top{bottom:calc(50% - 1px)}.tick-flip-shadow-bottom{top:calc(50% + 1px)}.tick-flip-card-shadow{position:absolute;left:.15em;right:.15em;bottom:.125em;height:.5em;background-color:transparent;border-radius:0;opacity:0;transform-origin:0 100%;box-shadow:0 .125em .25em rgba(0,0,0,.5),0 .125em .5em rgba(0,0,0,.75);z-index:0}.tick-flip-card{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;perspective:4em}.tick-flip-panel-back,.tick-flip-panel-front{position:absolute;left:0;width:100%;height:51%;backface-visibility:hidden;transform-style:preserve-3d}.tick-flip-panel-back-text,.tick-flip-panel-front-text{position:absolute;left:-1px;top:0;right:-1px;height:100%;overflow:hidden}.tick-flip-panel-text-wrapper{position:absolute;left:0;top:0;right:0;height:100%}.tick-flip-panel-back-text .tick-flip-panel-text-wrapper{height:200%;top:-100%}.tick-flip-panel-front{transform-origin:center bottom;top:0;z-index:2;box-shadow:inset 0 1px hsla(0,0%,100%,.05)}.tick-flip-panel-back{transform-origin:center top;top:50%;z-index:1;box-shadow:inset 0 -1px rgba(0,0,0,.1)}.tick-flip-panel-back:after{z-index:1;content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-image:linear-gradient(180deg,rgba(0,0,0,.3) 1px,rgba(0,0,0,.15) 0,transparent 30%)}.tick-flip-panel-back-shadow{z-index:2}.tick-flip-panel-back-highlight{z-index:3}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.tick-flip-panel-back-highlight,.tick-flip-panel-back-shadow,.tick-flip-panel-front-shadow{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0}.tick-flip-panel-front-shadow{background-image:linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.3))}.tick-flip-panel-back-shadow{background-image:linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.5))}.tick-flip-panel-back-highlight{background-image:linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,.3))}.tick [data-style*="shadow:inner"],.tick [data-style*="shadow:inner"] .tick-flip-card-shadow,.tick [data-style*="shadow:none"] .tick-flip-card-shadow,.tick [data-style*="shadow:none"] .tick-flip-panel-back,.tick [data-style*="shadow:none"] .tick-flip-panel-front,.tick [data-style*="shadow:none"] .tick-flip-shadow{box-shadow:none}.tick [data-style*="shadow:none"] .tick-flip-back:after,.tick [data-style*="shadow:none"] .tick-flip-panel-back-shadow,.tick [data-style*="shadow:none"] .tick-flip-panel-back-text:after,.tick [data-style*="shadow:none"] .tick-flip-panel-front-shadow{background-image:none}.tick [data-style*="rounded:none"]{border-radius:0}.tick [data-style*="rounded:panels"] .tick-flip-front,.tick [data-style*="rounded:panels"] .tick-flip-shadow-bottom{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.tick [data-style*="rounded:panels"] .tick-flip-back,.tick [data-style*="rounded:panels"] .tick-flip-panel-back:after,.tick [data-style*="rounded:panels"] .tick-flip-shadow-top{border-top-left-radius:inherit;border-top-right-radius:inherit}.tick-flip{margin-left:.0625em;margin-right:.0625em;min-width:1.125em;border-radius:.125em;letter-spacing:.25em;text-indent:.25em}.tick-flip-panel{color:#edebeb;background-color:#333232}.tick-flip-shadow{box-shadow:0 .125em .3125em rgba(0,0,0,.25),0 .02125em .06125em rgba(0,0,0,.25)}
            
            /* Custom Flip Counter Styling */
            .tick {
              font-size: 1rem;
              white-space: nowrap;
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            }

            .tick-flip, .tick-text-inline {
              font-size: 2.5em;
            }

            .tick-label {
              margin-top: 1em;
              font-size: 1em;
              color: var(--color-textSecondary, #696996);
              text-transform: uppercase;
              letter-spacing: 0.1em;
            }

            .tick-char {
              width: 1.5em;
            }

            .tick-text-inline {
              display: inline-block;
              text-align: center;
              min-width: 1em;
              color: var(--color-text, #15151e);
            }

            .tick-text-inline + .tick-text-inline {
              margin-left: -0.325em;
            }

            .tick-group {
              margin: 0 0.5em;
              text-align: center;
            }

            /* Flip Clock Panel - Classic Segmented Display Style */
            .tick-flip-panel {
              color: #ffffff !important;
              background-color: #2b2b2b !important;
              border-radius: 0.15em !important;
              box-shadow: 
                0 0.05em 0 rgba(0, 0, 0, 0.6),
                0 0.15em 0.15em rgba(0, 0, 0, 0.4) !important;
            }

            /* Add subtle gradient for 3D depth effect */
            .tick-flip-panel::before {
              background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0) 50%,
                rgba(0, 0, 0, 0.2) 100%
              ) !important;
            }

            /* Flip card container with shadow */
            .tick-flip {
              border-radius: 0.15em !important;
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
              font-weight: 600 !important;
              box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3) !important;
            }

            /* Middle divider line between flip panels for segmented look */
            .tick-flip::after {
              background: #1a1a1a !important;
              height: 0.05em !important;
            }

            /* Text positioning and line height */
            .tick-flip-panel-text-wrapper {
              line-height: 1.5 !important;
            }

            /* Spacing between individual digit cards */
            .tick-flip + .tick-flip {
              margin-left: 0.1em;
            }
            
            /* Navigation Dropdown Styles */
            .nav-menu {
              position: relative;
            }
            
            .nav-item-dropdown {
              position: relative;
            }
            
            .nav-link, .nav-link-dropdown {
              color: var(--color-text, #333);
              font-family: Montserrat;
              text-decoration: none;
              padding: 0.5rem 0.75rem;
              display: inline-flex;
              align-items: center;
              position: relative;
              border-radius: 4px;
              transition: background-color 0.2s, color 0.2s, border-color 0.2s;
              cursor: pointer;
              font-weight: 500;
            }
            
            /* Navigation underline element for underline style */
            .nav-link .nav-underline, .nav-link-dropdown .nav-underline {
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              height: 2px;
              width: 0%;
              background-color: var(--color-text, #333);
              transition: width 0.2s ease;
            }
            
            /* Default style hover */
            
            .nav-link:hover, .nav-link-dropdown:hover {
              background-color: rgba(0,0,0,0.05);
              
            }
            
            
            /* Underline style hover */
            
            
            /* Pill style hover */
            
            
            /* Bar style hover */
            
            
            .dropdown-arrow {
              font-size: 0.7em;
              margin-left: 0.3rem;
              transition: transform 0.2s;
            }
            
            .nav-item-dropdown.active .dropdown-arrow {
              transform: rotate(180deg);
            }
            
            .nav-dropdown {
              display: none;
              position: absolute;
              top: 100%;
              left: 0;
              min-width: 200px;
              background: #ffffff;
              border: 1px solid var(--color-border, #e5e7eb);
              border-radius: 4px;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              padding: 0.5rem 0;
              margin-top: 0.25rem;
              list-style: none;
              z-index: 1000;
            }
            
            /* Dropdown visibility controlled by JavaScript with delay support */
            .nav-item-dropdown.active .nav-dropdown {
              display: block;
            }
            
            .nav-dropdown li {
              margin: 0;
            }
            
            .site-header .nav-dropdown a,
            .site-header .nav-dropdown a:link,
            .site-header .nav-dropdown a:visited,
            .site-header .nav-dropdown a:active {
              color: #333333;
              font-family: Montserrat;
              text-decoration: none;
              padding: 0.5rem 1rem;
              display: block;
              transition: background-color 0.2s, color 0.2s;
              font-weight: 400;
            }
            
            .site-header .nav-dropdown a:hover {
              background-color: rgba(0,0,0,0.05);
              color: #111111;
            }
            
            /* Nested dropdown (fly-out) styles */
            .nav-item-nested {
              position: relative;
            }
            
            .nav-item-nested .dropdown-arrow {
              transform: rotate(0deg);
            }
            
            /* Nested dropdowns fly out to the right - HIDDEN by default */
            .nav-item-nested > .nav-dropdown {
              display: none !important;
              top: 0;
              left: 100%;
              margin-top: 0;
              margin-left: 0;
            }
            
            /* Show nested dropdown ONLY on direct hover (CSS-based, no JS active class) */
            .nav-item-nested:hover > .nav-dropdown {
              display: block !important;
            }
            
            /* Note: Click mode and hover delays are now fully handled by JavaScript */
            
            /* Mobile Navigation Styles */
            .mobile-menu-toggle {
              display: none;
              background: none;
              border: none;
              cursor: pointer;
              padding: 0.5rem;
              color: var(--color-text, #333);
              font-size: 1.5rem;
              line-height: 1;
            }
            
            .mobile-nav {
              display: none;
            }
            
            @media (max-width: 768px) {
              .mobile-menu-toggle {
                display: block;
                margin-left: auto;
              }
              
              .desktop-nav {
                display: none !important;
              }
              
              .mobile-nav {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: var(--color-surface, #ffffff);
                color: var(--color-text, #333);
                z-index: 9999;
                overflow-y: auto;
              }
              
              .mobile-nav.active {
                display: block;
              }
              
              .mobile-nav-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1rem;
                border-bottom: 1px solid var(--color-border, #ddd);
              }
              
              .mobile-nav-close {
                background: none;
                border: none;
                cursor: pointer;
                padding: 0.5rem;
                color: var(--color-text, #333);
                font-size: 1.5rem;
                line-height: 1;
              }
              
              .mobile-nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
              }
              
              .mobile-nav ul li {
                border-bottom: 1px solid var(--color-border, #ddd);
              }
              
              .mobile-nav ul li a {
                display: block;
                padding: 1rem;
                color: var(--color-text, #333);
                text-decoration: none;
                font-size: 1.1rem;
              }
              
              .mobile-nav ul li a:active {
                background: rgba(0,0,0,0.05);
                
              }
              
              /* Nested sublists — real hierarchy: indented, slightly smaller,
                 with a left guide border so parent/child structure is visible */
              .mobile-nav ul ul.mobile-nav-sub {
                margin: 0 0 0 1rem;
                padding: 0;
                border-left: 2px solid var(--color-border, #ddd);
              }
              
              .mobile-nav ul ul.mobile-nav-sub li {
                border-bottom: none;
              }
              
              .mobile-nav ul ul.mobile-nav-sub li a {
                padding: 0.65rem 1rem;
                font-size: 1rem;
              }
            }
            
            /* ----------------------------------------------
               Custom Quill Blot Styles for Rich Text Content
               ---------------------------------------------- */
            
            /* Floatable Image Styles */
            .ql-floatable-image {
              display: inline-block;
              max-width: 100%;
              margin: 12px 0;
              vertical-align: top;
            }
            
            .ql-floatable-image img {
              display: block;
              max-width: 100%;
              height: auto;
              border-radius: 8px;
            }
            
            .ql-floatable-image.float-left {
              float: left;
              margin: 0 20px 12px 0;
              max-width: 50%;
              clear: none;
            }
            
            .ql-floatable-image.float-right {
              float: right;
              margin: 0 0 12px 20px;
              max-width: 50%;
              clear: none;
            }
            
            .ql-floatable-image.float-none {
              float: none;
              display: block;
              margin: 12px auto;
              max-width: 100%;
            }
            
            .ql-floatable-image.width-small { max-width: 25% !important; }
            .ql-floatable-image.width-medium { max-width: 50% !important; }
            .ql-floatable-image.width-large { max-width: 75% !important; }
            .ql-floatable-image.width-full { max-width: 100% !important; }
            
            /* Video Embed Styles */
            .ql-video-embed {
              display: block;
              margin: 16px 0;
              max-width: 100%;
              clear: both;
            }
            
            .ql-video-embed .video-embed-wrapper {
              position: relative;
              padding-bottom: 56.25%;
              height: 0;
              overflow: hidden;
              border-radius: 8px;
            }
            
            .ql-video-embed .video-embed-wrapper iframe,
            .ql-video-embed .video-embed-wrapper video {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
            
            .ql-video-embed.float-left {
              float: left;
              margin: 0 20px 12px 0;
              clear: none;
            }
            
            .ql-video-embed.float-right {
              float: right;
              margin: 0 0 12px 20px;
              clear: none;
            }
            
            .ql-video-embed.float-none {
              float: none;
              margin: 16px auto;
            }
            
            .ql-video-embed.width-small { width: 200px !important; min-width: 200px !important; }
            .ql-video-embed.width-medium { width: 320px !important; min-width: 320px !important; }
            .ql-video-embed.width-large { width: 480px !important; min-width: 480px !important; }
            .ql-video-embed.width-full { width: 100% !important; max-width: 100% !important; float: none !important; margin: 16px auto !important; }
            
            /* File Card Styles */
            .ql-file-card {
              display: inline-flex;
              align-items: center;
              gap: 12px;
              padding: 12px 16px;
              background: var(--color-surface, #f8fafc);
              border: 1px solid var(--color-border, #e2e8f0);
              border-radius: 8px;
              text-decoration: none;
              color: var(--color-text, inherit);
              margin: 8px 0;
              max-width: 320px;
              transition: all 0.2s ease;
              box-sizing: border-box;
            }
            
            .ql-file-card:hover {
              background: var(--color-surface, #f1f5f9);
              border-color: var(--color-text, #cbd5e1);
              opacity: 0.9;
            }
            
            .ql-file-card .file-icon {
              width: 40px;
              height: 40px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;
              flex-shrink: 0;
            }
            
            .ql-file-card .file-icon.pdf { background: #fef2f2; color: #dc2626; }
            .ql-file-card .file-icon.doc { background: #eff6ff; color: #2563eb; }
            .ql-file-card .file-icon.spreadsheet { background: #f0fdf4; color: #16a34a; }
            .ql-file-card .file-icon.default { background: var(--color-surface, #f8fafc); color: var(--color-textSecondary, #64748b); }
            
            .ql-file-card .file-info {
              flex: 1;
              min-width: 0;
              overflow: hidden;
            }
            
            .ql-file-card .file-name {
              font-weight: 600;
              font-size: 14px;
              color: var(--color-text, #1e293b);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .ql-file-card .file-size {
              font-size: 12px;
              color: var(--color-textSecondary, #64748b);
              margin-top: 2px;
            }
            
            .ql-file-card.float-left {
              float: left;
              margin: 8px 16px 8px 0;
            }
            
            .ql-file-card.float-right {
              float: right;
              margin: 8px 0 8px 16px;
            }
            
            /* Mobile Responsive Styles for Quill Blots */
            @media (max-width: 768px) {
              /* File cards on mobile - stacked treatment */
              .ql-file-card {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                max-width: 120px !important;
                width: auto !important;
                box-sizing: border-box !important;
                padding: 12px !important;
                gap: 6px !important;
                text-align: center !important;
              }
              
              .ql-file-card.float-left,
              .ql-file-card.float-right {
                float: none !important;
                margin: 8px 0 !important;
              }
              
              .ql-file-card .file-icon {
                width: 40px !important;
                height: 40px !important;
                font-size: 18px !important;
                border-radius: 8px !important;
              }
              
              .ql-file-card .file-info {
                min-width: 0 !important;
                width: 100% !important;
                overflow: hidden !important;
                text-align: center !important;
              }
              
              .ql-file-card .file-name {
                max-width: 100% !important;
                font-size: 11px !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                white-space: nowrap !important;
                display: block !important;
              }
              
              .ql-file-card .file-size {
                display: none !important;
              }
              
              /* Floatable images on mobile - remove float and constrain */
              .ql-floatable-image {
                max-width: 100% !important;
                box-sizing: border-box;
              }
              
              .ql-floatable-image.float-left,
              .ql-floatable-image.float-right {
                float: none !important;
                margin: 12px 0 !important;
                max-width: 100% !important;
              }
              
              .ql-floatable-image img {
                max-width: 100% !important;
                height: auto !important;
              }
              
              /* Video embeds on mobile */
              .ql-video-embed.float-left,
              .ql-video-embed.float-right {
                float: none !important;
                margin: 16px 0 !important;
                width: 100% !important;
              }
              
              /* Text content word wrapping */
              .rich-text-content,
              .puck-text {
                max-width: 100% !important;
                overflow-wrap: break-word !important;
                word-wrap: break-word !important;
                word-break: break-word !important;
              }
            }
            
            /* Pull Quote Styles */
            .ql-pull-quote {
              display: block;
              margin: 24px 0;
              padding: 0;
              position: relative;
            }
            
            .ql-pull-quote .pull-quote-wrapper {
              padding: 20px 24px;
              background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
              border-left: 4px solid #3b82f6;
              border-radius: 0 8px 8px 0;
              position: relative;
            }
            
            .ql-pull-quote .pull-quote-mark {
              font-size: 48px;
              line-height: 1;
              color: #3b82f6;
              opacity: 0.3;
              font-family: Georgia, serif;
              position: absolute;
            }
            
            .ql-pull-quote .pull-quote-mark.open {
              top: 8px;
              left: 12px;
            }
            
            .ql-pull-quote .pull-quote-mark.close {
              bottom: 0;
              right: 16px;
            }
            
            .ql-pull-quote .pull-quote-text {
              font-size: 1.25rem;
              font-style: italic;
              font-weight: 500;
              line-height: 1.6;
              color: #334155;
              text-align: center;
              margin: 0;
              padding: 8px 32px;
            }
            
            .ql-pull-quote.float-left {
              float: left;
              margin: 8px 24px 16px 0;
              clear: none;
            }
            
            .ql-pull-quote.float-right {
              float: right;
              margin: 8px 0 16px 24px;
              clear: none;
            }
            
            .ql-pull-quote.float-none {
              float: none;
              margin: 24px auto;
            }
            
            .ql-pull-quote.width-small { width: 200px !important; min-width: 200px !important; }
            .ql-pull-quote.width-medium { width: 280px !important; min-width: 280px !important; }
            .ql-pull-quote.width-large { width: 360px !important; min-width: 360px !important; }
            .ql-pull-quote.width-full { width: 100% !important; max-width: 100% !important; float: none !important; margin: 24px auto !important; }
            
            /* Clear floats after rich text content */
            .text-content::after,
            .rich-text-content::after {
              content: "";
              display: table;
              clear: both;
            }

            /* Render class contract (Task #156): default component structure on
               documented stable classes. Emitted here — after all base styles,
               immediately before the site's custom CSS — so custom CSS overrides
               it at equal specificity. Reproduces the renderer's previous inline
               defaults so sites without custom CSS are unchanged. */
            /* Render class contract v1.9.0 — site chrome structural-only (designer-owned appearance). */
.site-header .header-logo {
  flex-shrink: 0;
}
.site-header .header-logo-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-header .header-logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.site-header .header-nav {
  flex: 1;
}
.site-header .nav-menu {
  list-style: none;
  display: flex;
  width: 100%;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-header .header-cta {
  flex-shrink: 0;
}
.site-header .header-cta-button {
  display: inline-block;
}
.site-header .header-social {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.site-header .header-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.site-header .header-contact {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-header .header-grid {
  max-width: var(--header-max-width, var(--content-max-width, 1200px));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-header .header-grid-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
}
.site-header .header-grid-zone {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-header .header-grid-zone--center {
  flex: 1;
}
.site-header .header-flex {
  max-width: var(--header-max-width, var(--content-max-width, 1200px));
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.site-footer .site-footer-content {
  max-width: var(--footer-max-width, var(--content-max-width, 1200px));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.site-footer .site-footer-logo {
  width: 100%;
  max-width: 150px;
  height: auto;
}
.site-footer .site-footer-links {
  list-style: none;
}
.site-footer .site-footer-social {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.site-footer .site-footer-empty {
  text-align: center;
}
.site-footer .footer-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.site-footer .footer-bottom-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
            /* Render class contract v1.9.0 — structural-only (designer-owned appearance). */
.puck-card {
  display: block;
  overflow: hidden;
}
.puck-grid-heading {
  text-align: center;
}
.puck-grid-subheading {
  text-align: center;
}
.puck-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.puck-columns-col {
  min-width: 200px;
}
.puck-column {
  min-width: 150px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
}
.puck-button-container {
  display: flex;
  align-self: flex-start;
  width: 100%;
}
.puck-button {
  display: inline-block;
}
.puck-stats-title {
  text-align: center;
}
.puck-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.puck-stat-card {
  text-align: center;
}
.puck-hero--standard {
  display: flex;
  align-items: center;
  justify-content: center;
}
.puck-hero--carousel {
  position: relative;
  overflow: hidden;
}
.puck-hero--video {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.puck-hero--split {
  display: flex;
  flex-wrap: wrap;
}
.puck-hero--minimal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.puck-hero--offset {
  position: relative;
  display: flex;
}
.puck-hero-content {
  max-width: 800px;
}
.puck-hero--video .puck-hero-content {
  position: relative;
  z-index: 2;
}
.puck-hero--split .puck-hero-content {
  max-width: 500px;
}
.puck-hero--minimal .puck-hero-content {
  max-width: 600px;
}
.puck-hero--offset .puck-hero-content {
  max-width: 500px;
}
.puck-hero-eyebrow {
  display: inline-block;
}
.puck-hero--minimal .puck-hero-subtitle {
  max-width: 500px;
}
.puck-hero-cta-primary {
  display: inline-block;
}
.puck-hero-cta-secondary {
  display: inline-block;
}
.puck-hero--carousel .carousel-slide {
  align-items: center;
  justify-content: center;
}
.puck-hero--carousel .carousel-slides {
  position: relative;
}
.puck-hero--carousel .carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.puck-hero--carousel .carousel-prev {
  left: 1rem;
}
.puck-hero--carousel .carousel-next {
  right: 1rem;
}
.puck-hero--carousel .carousel-dots {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}
.puck-hero--carousel .carousel-dot {
  width: 12px;
  height: 12px;
}
.puck-hero-video-el {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.puck-hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.puck-hero-split-panel {
  flex: 1;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.puck-hero-split-image {
  flex: 1;
  min-width: 300px;
}
.puck-grid-preset {
  display: grid;
}
.puck-flex {
  display: flex;
}
.puck-flex-item {
  flex-shrink: 0;
}
.puck-video {
  display: flex;
}
.puck-video-inner {
  max-width: 100%;
}
.puck-video-media {
  width: 100%;
  display: block;
}
.puck-cta {
  text-align: center;
}
.puck-cta-description {
  max-width: 600px;
  white-space: pre-wrap;
}
.puck-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.puck-cta-primary {
  display: inline-block;
}
.puck-cta-secondary {
  display: inline-block;
}
.puck-image {
  display: flex;
  max-width: 100%;
}
.puck-image-img {
  display: block;
  max-width: 100%;
}
.puck-image-caption {
  text-align: center;
}
.puck-image-viewer-trigger {
  display: block;
}
.puck-image-viewer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.puck-image-viewer-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.puck-image-viewer-close {
  position: absolute;
  top: 16px;
  right: 16px;
}
.puck-image-viewer-previous, .puck-image-viewer-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.puck-image-viewer-previous {
  left: 16px;
}
.puck-image-viewer-next {
  right: 16px;
}
.puck-card-icon-horizontal .puck-card-title {
  text-align: left;
}
.puck-card-description {
  white-space: pre-wrap;
}
.puck-card-featured-overlay {
  position: absolute;
  inset: 0;
}
.puck-card-featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.puck-card-meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.puck-card-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.puck-card-meta-label {
  flex-shrink: 0;
}
.puck-card-avatar {
  width: 120px;
  height: 120px;
  overflow: hidden;
  flex-shrink: 0;
}
.puck-card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

            /* Member Directory runtime widget appearance. Emitted in FULL for
               all site modes (no structuralOnly variant): the directory is
               built at runtime by an inline script, so on designer-owned
               sites the client inline-style stripper removes its decoration
               and this stylesheet becomes the sole source of its appearance.
               Sits before custom CSS so designer CSS can still override. */
            /* Render class contract v1.9.0 — Member Directory runtime widget (theme-token appearance; overridable by custom CSS below). */
.recur-member-dir-title {
  font-size: 1.875rem;
  font-weight: bold;
  margin: 0 0 16px;
  color: var(--color-text, #333);
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-search {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border, #e5e5e5);
  background: var(--color-surface, #fff);
  color: var(--color-text, #333);
  font-size: 0.9375rem;
  margin-bottom: 16px;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-chip {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border, #e5e5e5);
  background: var(--color-surface, #f5f5f5);
  color: var(--color-text, #333);
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-chip-active {
  background: var(--color-primary, #1976d2);
  color: var(--color-background, #fff);
}
.recur-member-dir-clear {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: transparent;
  color: var(--color-textSecondary, #666);
  border: none;
  cursor: pointer;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-card {
  background: var(--color-surface, #fff);
  border-radius: 12px;
  border: 1px solid var(--color-border, #e5e5e5);
  padding: 20px;
  cursor: pointer;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-row {
  background: var(--color-surface, #fff);
  border-radius: 10px;
  border: 1px solid var(--color-border, #e5e5e5);
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-avatar {
  border-radius: 50%;
  background: var(--color-primary, #1976d2);
  color: var(--color-background, #fff);
  font-weight: 600;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-name {
  font-weight: 600;
  color: var(--color-text, #333);
  line-height: 1.3;
}
.recur-member-dir-meta {
  font-size: 0.8125rem;
  color: var(--color-textSecondary, #666);
}
.recur-member-dir-tag {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--color-surface, #f5f5f5);
  color: var(--color-text, #333);
  border: 1px solid var(--color-border, #e5e5e5);
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-empty {
  padding: 40px;
  color: var(--color-textSecondary, #666);
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-page-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: var(--color-text, #333);
  color: var(--color-surface, #fff);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-page-btn[disabled] {
  cursor: not-allowed;
  background: var(--color-border, #e5e5e5);
  color: var(--color-textSecondary, #999);
}
.recur-member-dir-page-label {
  font-size: 0.875rem;
  color: var(--color-text, #333);
}
.recur-member-dir-modal-backdrop {
  background: rgba(0, 0, 0, 0.55);
  padding: 20px;
  font-family: var(--font-primary, inherit);
}
.recur-member-dir-modal {
  background: var(--color-surface, #fff);
  color: var(--color-text, #333);
  border-radius: 12px;
  border: 1px solid var(--color-border, #e5e5e5);
}
.recur-member-dir-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-textSecondary, #666);
  border-radius: 6px;
}
.recur-member-dir-modal-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0;
}
.recur-member-dir-link {
  color: var(--color-primary, #1976d2);
}
.recur-member-dir-meta-sm {
  font-size: 0.75rem;
}
.recur-member-dir-card .recur-member-dir-name {
  font-size: 1rem;
}
.recur-member-dir-row .recur-member-dir-name {
  font-size: 0.9375rem;
}
.recur-member-dir-card .recur-member-dir-avatar {
  font-size: 27px;
}
.recur-member-dir-row .recur-member-dir-avatar {
  font-size: 17px;
}
.recur-member-dir-modal .recur-member-dir-avatar {
  font-size: 24px;
}
.recur-member-dir-chip[data-md-view] {
  border-radius: 6px;
}
.recur-member-dir-modal-body {
  padding: 28px 32px;
}
.recur-member-dir-modal-header {
  margin-bottom: 16px;
}
.recur-member-dir-modal-meta {
  font-size: 0.875rem;
  color: var(--color-textSecondary, #666);
}
.recur-member-dir-modal-location {
  font-size: 0.875rem;
  color: var(--color-textSecondary, #666);
  margin-bottom: 10px;
}
.recur-member-dir-modal-tags {
  margin-bottom: 14px;
}
.recur-member-dir-modal-bio {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.recur-member-dir-modal-contact {
  font-size: 0.875rem;
}
.recur-member-dir-modal-phone {
  color: var(--color-textSecondary, #666);
}

            /* Newsletter signup runtime widget (footer section + modal).
               Same always-emitted-in-full rule as the member directory: the
               modal is built at runtime by an inline script, so this
               stylesheet is the sole source of its appearance on
               designer-owned sites. Sits before custom CSS so designer CSS
               can still override. */
            /* Render class contract v1.9.0 — Newsletter signup runtime widget (theme-token appearance; overridable by custom CSS below). */
.recur-nl-description {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.9;
}
.recur-nl-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 320px;
}
.recur-nl-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 9999px;
  font-size: 0.9rem;
  background: #ffffff;
  color: #111827;
}
.recur-nl-button {
  padding: 10px 22px;
  border: none;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-primary, #2563eb);
  color: var(--color-buttonText, #ffffff);
}
.recur-nl-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.recur-nl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  padding: 16px;
}
.recur-nl-modal {
  background: #ffffff;
  color: #111827;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  text-align: left;
}
.recur-nl-modal-title {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
  font-weight: 700;
  padding-right: 32px;
}
.recur-nl-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: 4px;
}
.recur-nl-field {
  margin: 12px 0;
}
.recur-nl-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.recur-nl-field input[type="text"], .recur-nl-field input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.9rem;
  background: #ffffff;
  color: #111827;
}
.recur-nl-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  font-size: 0.85rem;
  line-height: 1.4;
}
.recur-nl-error {
  color: #b91c1c;
  font-size: 0.85rem;
  margin: 8px 0;
}
.recur-nl-success {
  color: #15803d;
  font-size: 0.95rem;
  margin: 8px 0;
  line-height: 1.5;
}
.recur-nl-submit {
  width: 100%;
  padding: 10px 16px;
  border: none;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-primary, #2563eb);
  color: var(--color-buttonText, #ffffff);
  margin-top: 8px;
}
.recur-nl-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

            /* Tenant-provided custom CSS (advanced styling mode only). Sanitized
               to neutralize style-tag escape attempts. In native mode the value
               is stored but intentionally not applied.
               NOTE: do not write the literal closing-style token in this comment
               — the HTML parser will close the surrounding <style> block early
               and dump the rest of the comment into the page. */
            /* ================================================================
   CT COLT — Recur central-renderer custom CSS
   Harvested from artifacts/ctcolt/src/index.css (Tailwind tokens)
   Brand: navy #212E60 · lime #AFCB30 · light blue #BDDDE1
   Font: Montserrat (300–800)
   ================================================================ */

:root {
  --ct-navy: #212E60;
  --ct-navy-dark: hsl(227 49% 15%);
  --ct-lime: #AFCB30;
  --ct-lime-hover: #9ab825;
  --ct-blue: #BDDDE1;
  --ct-bg: hsl(220 33% 98%);          /* #F7F9FC */
  --ct-border: hsl(220 20% 88%);
  --ct-card-border: hsl(220 20% 92%);
  --ct-muted: hsl(220 20% 94%);
  --ct-muted-fg: hsl(227 20% 45%);
  --ct-radius: 0.75rem;               /* 12px base */
  --ct-radius-md: calc(0.75rem - 2px);
  --ct-shadow-card: 0 2px 8px rgba(33, 46, 96, 0.07);
  --ct-shadow-card-hover: 0 6px 24px rgba(33, 46, 96, 0.12);
  --ct-shadow-sm: 0px 2px 4px -1px rgba(33, 46, 96, 0.1), 0px 2px 4px -2px rgba(33, 46, 96, 0.1);
  --ct-shadow-md: 0px 10px 15px -3px rgba(33, 46, 96, 0.1), 0px 4px 6px -4px rgba(33, 46, 96, 0.1);
  --ct-shadow-lg: 0px 20px 25px -5px rgba(33, 46, 96, 0.1), 0px 8px 10px -6px rgba(33, 46, 96, 0.1);
  --ct-content-max: 1200px;

  /* Full Tailwind type scale from the source site (the theme surface only
     accepts xs–3xl, so the larger sizes live here for page CSS to use). */
  --ct-text-xs: 0.75rem;    --ct-leading-xs: calc(1 / 0.75);
  --ct-text-sm: 0.875rem;   --ct-leading-sm: calc(1.25 / 0.875);
  --ct-text-base: 1rem;     --ct-leading-base: 1.5;
  --ct-text-lg: 1.125rem;   --ct-leading-lg: calc(1.75 / 1.125);
  --ct-text-xl: 1.25rem;    --ct-leading-xl: calc(1.75 / 1.25);
  --ct-text-2xl: 1.5rem;    --ct-leading-2xl: calc(2 / 1.5);
  --ct-text-3xl: 1.875rem;  --ct-leading-3xl: calc(2.25 / 1.875);
  --ct-text-4xl: 2.25rem;   --ct-leading-4xl: calc(2.5 / 2.25);
  --ct-text-5xl: 3rem;      --ct-leading-5xl: 1;
  --ct-text-6xl: 3.75rem;   --ct-leading-6xl: 1;
  --ct-text-7xl: 4.5rem;    --ct-leading-7xl: 1;
  --ct-text-8xl: 6rem;      --ct-leading-8xl: 1;
  --ct-text-9xl: 8rem;      --ct-leading-9xl: 1;
}

/* Heading scale (source: text-4xl/5xl heroes, 3xl section titles, mobile step-down) */
h1 { font-size: var(--ct-text-4xl); line-height: var(--ct-leading-4xl); }
h2 { font-size: var(--ct-text-3xl); line-height: var(--ct-leading-3xl); }
h3 { font-size: var(--ct-text-2xl); line-height: var(--ct-leading-2xl); }
h4 { font-size: var(--ct-text-xl); line-height: var(--ct-leading-xl); }

@media (min-width: 768px) {
  h1 { font-size: var(--ct-text-5xl); line-height: var(--ct-leading-5xl); }
}

/* ---------- Base ---------- */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--ct-bg);
  color: var(--ct-navy-dark);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.puck-heading, .puck-card-title, .puck-cta-title, .puck-hero h1 {
  font-family: 'Montserrat', sans-serif;
  color: var(--ct-navy);
  font-weight: 700;
  line-height: 1.2;
}

a { color: var(--ct-navy); }
a:hover { color: var(--ct-lime-hover); }

/* ---------- Content width cap (theme contentWidth is "full") ----------
   Heroes stay edge-to-edge; regular top-level blocks cap at 1200px. */
.puck-grid, .puck-flex, .puck-columns, .puck-text, .puck-heading, .puck-card,
.puck-image,
.puck-cta, .puck-stats, .puck-custom-content,
.recur-product-list, .recur-event-list, .recur-event-calendar,
.recur-single-product, .recur-single-event, .recur-blog-list,
.recur-donation,
.puck-contact-widget {
  max-width: var(--ct-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Buttons ---------- */
.puck-button, .puck-hero-cta, .puck-cta-primary, .puck-cta-secondary {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  border-radius: var(--ct-radius-md);
  transition: background-color 0.15s ease, box-shadow 0.2s ease, color 0.15s ease;
  text-decoration: none;
}

.puck-button-primary, .puck-hero-cta-primary, .puck-cta-primary {
  background-color: var(--ct-lime);
  color: var(--ct-navy);
  border: none;
  padding: 0.75rem 1.5rem;
}

.puck-button-primary:hover, .puck-hero-cta-primary:hover, .puck-cta-primary:hover {
  background-color: var(--ct-lime-hover);
  color: var(--ct-navy);
  box-shadow: var(--ct-shadow-sm);
}

.puck-button-secondary, .puck-cta-secondary {
  background-color: var(--ct-navy);
  color: #ffffff;
  border: none;
  padding: 0.75rem 1.5rem;
}

.puck-button-secondary:hover, .puck-cta-secondary:hover {
  background-color: hsl(227 49% 20%);
  color: #ffffff;
  box-shadow: var(--ct-shadow-sm);
}

/* ---------- Hero CTA buttons (carousel hero only) ----------
   Wrapper: the renderer emits div.puck-hero-cta as display:block; make it
   flex-centered so the two buttons sit side-by-side with a controlled gap.
   Buttons: source uses h-14 px-8 (56px height, 0 vertical padding, 32px
   horizontal). We replicate that with height + inline-flex instead of 
   padding-based height so sizes match exactly. !important is needed because
   the renderer's own stylesheet rules share the same selectors. */
.puck-hero-cta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.puck-hero-cta-primary {
  background-color: var(--ct-lime) !important;
  color: var(--ct-navy) !important;
  border: none !important;
  height: 3.5rem !important;
  padding: 0 2rem !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  border-radius: var(--ct-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
.puck-hero-cta-primary:hover {
  background-color: var(--ct-lime-hover) !important;
  color: var(--ct-navy) !important;
  box-shadow: var(--ct-shadow-sm) !important;
}

.puck-hero-cta-secondary {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  height: 3.5rem !important;
  padding: 0 2rem !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  border-radius: var(--ct-radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.puck-hero-cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* ---------- Cards ---------- */
.puck-card {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: var(--ct-shadow-card);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  padding: 1.5rem !important;
}
/* Ensure padding reaches content even when Recur wraps in an inner div */
.puck-card > div { padding: 0 !important; }
.puck-card-title  { padding: 0 !important; margin: 0 0 0.5rem !important; }
.puck-card-description { padding: 0 !important; margin: 0 0 1.25rem !important; }
.puck-card-button,
.puck-card a.puck-button { margin-top: auto !important; }

.puck-card:hover {
  box-shadow: var(--ct-shadow-card-hover);
  border-color: var(--ct-lime);
}

.puck-card-title { color: var(--ct-navy); font-weight: 700; margin-bottom: 0.75rem; }
/* Nav cards — Recur may render the whole card or just the title as \003c a>.
   Strip underline everywhere, keep navy, turn lime on hover. */
a.puck-card,
.puck-card a {
  text-decoration: none !important;
}
a.puck-card .puck-card-title,
.puck-card a .puck-card-title,
.puck-card-title a {
  color: var(--ct-navy) !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}
a.puck-card:hover .puck-card-title,
.puck-card:hover a .puck-card-title,
.puck-card:hover .puck-card-title a {
  color: var(--ct-lime-hover) !important;
}
.puck-card-eyebrow { color: var(--ct-lime-hover); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; }
.puck-card-description { color: var(--ct-muted-fg); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.25rem; }
.puck-card-meta-label { color: var(--ct-muted-fg); }
.puck-card-meta-value { color: var(--ct-navy); font-weight: 600; }
.puck-card-avatar-img { border-radius: 9999px; object-fit: cover; }

.puck-card-button,
.puck-card a.puck-button {
  background-color: var(--ct-lime);
  color: var(--ct-navy);
  border: none;
  border-radius: var(--ct-radius-md);
  font-weight: 700;
  transition: background-color 0.15s ease;
}
.puck-card-button:hover { background-color: var(--ct-lime-hover); }

/* ── Blog listing ─────────────────────────────────────────────────────────── */
.ct-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (max-width: 900px) { .ct-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .ct-blog-grid { grid-template-columns: 1fr; } }

a.ct-blog-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: var(--ct-shadow-card);
  padding: 1.5rem;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  gap: 0.5rem;
}
a.ct-blog-card:hover {
  box-shadow: var(--ct-shadow-card-hover);
  border-color: var(--ct-lime);
}
.ct-blog-card-date {
  font-size: 0.78rem;
  color: var(--ct-muted-fg);
  font-weight: 600;
}
.ct-blog-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ct-navy);
  line-height: 1.4;
}
a.ct-blog-card:hover .ct-blog-card-title { color: var(--ct-lime-hover); }
.ct-blog-card-excerpt {
  font-size: 0.875rem;
  color: var(--ct-muted-fg);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ct-blog-card-cta {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ct-lime-hover);
  margin-top: 0.5rem;
}
.ct-blog-more {
  text-align: center;
  margin: 1.5rem 0;
}
.ct-blog-more button {
  background: var(--ct-navy);
  color: #fff;
  border: none;
  border-radius: var(--ct-radius-md);
  padding: 0.65rem 2rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ct-blog-more button:hover { background: var(--ct-lime-hover); color: var(--ct-navy); }

/* Board member cards — role rendered inside description as .ct-board-role span,
   appearing directly under the name in lime green. Email shown as a small
   underlined text link. Scoped via :has(.puck-card-avatar). */
.ct-board-role {
  display: block;
  color: var(--ct-lime-hover);
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
/* Email link: small underlined text link, no button chrome.
   Board cards render with class puck-card--board (variant:"board"). */
.puck-card--board .puck-card-button,
.puck-card--board .puck-card a.puck-button {
  background: none !important;
  color: var(--ct-lime-hover) !important;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 0.25rem;
}
.puck-card--board .puck-card-button:hover,
.puck-card--board .puck-card a.puck-button:hover {
  background: none !important;
  color: var(--ct-navy) !important;
}

/* Pillar cards (icon variant) — source: pt-8/px-6/pb-8, icon circle with bg,
   clear vertical rhythm. Renderer emits 0px padding as computed style; we 
   override it and ensure the icon, title, description, and button have proper
   spacing. The icon is a Google Material Symbol (text content in a \003c span>).
   Each card uses a specific color variant (pillar-teal / pillar-lime / pillar-navy)
   so color is keyed directly on the card element — no nth-child needed. */
.puck-card--pillar-teal,
.puck-card--pillar-lime,
.puck-card--pillar-navy {
  padding: 2rem 1.5rem !important;
}
.puck-card--pillar-teal .material-symbols-rounded,
.puck-card--pillar-teal .material-icons,
.puck-card--pillar-lime .material-symbols-rounded,
.puck-card--pillar-lime .material-icons,
.puck-card--pillar-navy .material-symbols-rounded,
.puck-card--pillar-navy .material-icons {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  margin: 0 auto 0.5rem;
}

/* Per-pillar icon circle colors */
.puck-card--pillar-teal .material-symbols-rounded,
.puck-card--pillar-teal .material-icons {
  background: #0d9488 !important; /* vibrant teal */
  color: #ffffff !important;
}
.puck-card--pillar-lime .material-symbols-rounded,
.puck-card--pillar-lime .material-icons {
  background: var(--ct-lime) !important; /* lime */
  color: var(--ct-navy) !important;
}
.puck-card--pillar-navy .material-symbols-rounded,
.puck-card--pillar-navy .material-icons {
  background: var(--ct-navy) !important; /* navy */
  color: #ffffff !important;
}
/* Inner content wrapper the renderer adds inside pillar cards.
   SAFE IN CONTEXT: the renderer reliably wraps card content in a single
   direct-child div; this selector just zeroes its built-in padding so the
   padding we set on the card element itself (above) is the only source of
   spacing. If the renderer ever removes that inner wrapper the rule simply
   becomes a no-op — no visual regression. If it adds an extra outer wrapper
   the card padding still applies correctly; only the inner reset is lost,
   which is minor. */
.puck-card--pillar-teal > div,
.puck-card--pillar-lime > div,
.puck-card--pillar-navy > div {
  padding: 0;
}
.puck-card--pillar-teal .puck-card-title,
.puck-card--pillar-lime .puck-card-title,
.puck-card--pillar-navy .puck-card-title {
  font-size: 1.125rem;
  margin-bottom: 0.75rem;
}
.puck-card--pillar-teal .puck-card-description,
.puck-card--pillar-lime .puck-card-description,
.puck-card--pillar-navy .puck-card-description {
  margin-bottom: 1.25rem;
}

/* ---------- Hero ---------- */
.puck-hero { font-family: 'Montserrat', sans-serif; }

/* Force the entire hero content block to white so inherited body color
   (dark navy) doesn't bleed into the subtitle or any other text. */
.puck-hero-content { color: #ffffff; }

.puck-hero-eyebrow { color: var(--ct-lime); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

/* h1: source = text-4xl/6xl/7xl font-bold tracking-tight leading-tight */
.puck-hero-title,
.puck-hero h1,
.puck-hero-content h1 {
  color: #ffffff !important;
  font-size: 2.25rem;       /* text-4xl (mobile) */
  font-weight: 700 !important;
  letter-spacing: -0.025em; /* tracking-tight */
  line-height: 1.25;        /* leading-tight */
}
@media (min-width: 768px) {
  .puck-hero-title,
  .puck-hero h1,
  .puck-hero-content h1 { font-size: 3.75rem; } /* text-6xl */
}
@media (min-width: 1024px) {
  .puck-hero-title,
  .puck-hero h1,
  .puck-hero-content h1 { font-size: 4.5rem; }  /* text-7xl */
}

/* Subtitle: source = text-white/90 text-xl/2xl font-medium */
.puck-hero-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.25rem;  /* text-xl (mobile) */
  font-weight: 500;    /* font-medium */
  line-height: 1.5;
}
@media (min-width: 768px) {
  .puck-hero-subtitle { font-size: 1.5rem; } /* text-2xl */
}

/* ---------- Carousel prev/next arrow buttons ----------
   Renderer positions them (48×48px, top: 50%) but adds no background or color.
   Source site: rounded-full bg-white/10 hover:bg-white/20 text-white 
   backdrop-blur-sm (Tailwind). The SVG stroke is hardcoded #333 so we 
   override it via the child svg selector. */
.puck-hero--carousel .carousel-nav {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s ease;
}
.puck-hero--carousel .carousel-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}
.puck-hero--carousel .carousel-nav svg {
  stroke: #ffffff !important;
}

/* ---------- CTA band (native CTA block, matches old .ct-cta-band) ---------- */
.puck-cta {
  background: linear-gradient(135deg, var(--ct-navy), var(--ct-navy-dark));
  border-radius: var(--ct-radius);
  color: #ffffff;
  text-align: center;
  padding: 4rem 1.5rem !important;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
  box-sizing: border-box;
}
.puck-cta-title { color: #ffffff !important; font-size: var(--ct-text-3xl); margin: 0 0 1rem; }
.puck-cta-description { color: rgba(255, 255, 255, 0.85); max-width: 640px; margin: 0 auto 2rem; }
/* Actions stack vertically, centered (old .ct-cta-band-actions) */
.puck-cta-buttons, .puck-cta-actions {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
/* Secondary renders as the light-blue text link (old .ct-cta-band-link) */
.puck-cta-secondary, .puck-cta .puck-cta-secondary {
  background: none !important;
  color: var(--ct-blue) !important;
  font-weight: 600;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.puck-cta-secondary:hover { text-decoration: underline; background: none !important; }

/* ---------- Mission panel as native Card (About page) ----------
   Replicates .ct-mission-panel: flat light-gray panel, no border/shadow/hover,
   larger relaxed text. Empty title collapses. */
.puck-card--mission {
  background: hsl(220 33% 96%) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--ct-radius) !important;
  padding: 2rem !important;
}
.puck-card--mission:hover { box-shadow: none !important; border: none !important; }
.puck-card--mission .puck-card-title:empty { display: none; }
.puck-card--mission .puck-card-description {
  color: var(--ct-navy-dark);
  font-size: var(--ct-text-lg);
  line-height: 1.7;
  margin: 0 !important;
}

/* ---------- Board member cards as native Cards (Organization page) ----------
   Replicates .ct-bcard: square flush top photo, padded body, lime uppercase
   role, muted district, clamped bio, lime text-link email button.
   Description spans carry role/district/bio (Card description strips \003c p>/\003c a>,
   keeps \003c span> — probe-verified). */
.puck-card--board-lg, .puck-card--board-sm {
  padding: 0 !important;
  overflow: hidden;
  border: 1.5px solid rgba(220, 225, 235, 0.5);
  border-radius: 16px;
}
/* Renderer wraps the card image in an inline-styled div with height:200px —
   force the wrapper square (like old .ct-bcard-photo). */
.puck-card--board-lg > div:has(> img), .puck-card--board-sm > div:has(> img) {
  height: auto !important;
  aspect-ratio: 1 / 1;
  background: var(--ct-muted);
}
.puck-card--board-lg img, .puck-card--board-sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.puck-card--board-lg .puck-card-title { padding: 1.5rem 1.5rem 0 !important; font-size: 1.25rem; margin: 0 0 0.25rem !important; line-height: 1.3; }
.puck-card--board-sm .puck-card-title { padding: 1rem 1rem 0 !important; font-size: 1.125rem; margin: 0 0 0.25rem !important; line-height: 1.3; }
.puck-card--board-lg .puck-card-description { padding: 0 1.5rem !important; margin: 0 !important; }
.puck-card--board-sm .puck-card-description { padding: 0 1rem !important; margin: 0 !important; }
.puck-card--board-lg .puck-card-description .ct-board-role,
.puck-card--board-sm .puck-card-description .ct-board-role {
  display: block;
  color: var(--ct-lime-hover);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.25rem;
}
.puck-card--board-lg .ct-bcard-district, .puck-card--board-sm .ct-bcard-district { display: block; }
.puck-card--board-lg .ct-bcard-bio {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 0.5rem;
}
/* Email button -> lime text link (like old .ct-bcard-email) */
.puck-card--board-lg .puck-card-button, .puck-card--board-lg a.puck-button,
.puck-card--board-sm .puck-card-button, .puck-card--board-sm a.puck-button {
  background: none !important;
  color: var(--ct-lime-hover) !important;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0.5rem 1.5rem 1.5rem !important;
}
.puck-card--board-sm .puck-card-button, .puck-card--board-sm a.puck-button {
  font-size: 0.75rem;
  margin: 0.4rem 1rem 1rem !important;
}
.puck-card--board-lg .puck-card-button:hover, .puck-card--board-lg a.puck-button:hover,
.puck-card--board-sm .puck-card-button:hover, .puck-card--board-sm a.puck-button:hover {
  background: none !important;
  color: var(--ct-navy) !important;
  text-decoration: underline;
}

/* ---------- Rates panels as native Cards (Membership) ----------
   Replicates .ct-panel + .ct-lime-title + .ct-price-row. Description carries
   nested spans (sanitizer keeps span/strong, drops br/small — notes ride in
   .ct-price-note spans). */
.puck-card--rates .puck-card-title {
  color: var(--ct-lime-hover);
  border-bottom: 3px solid var(--ct-lime);
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.puck-card--rates .puck-card-description { margin: 0 !important; }
.puck-card--rates .ct-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ct-card-border);
}
.puck-card--rates .ct-price-row:last-child { border-bottom: 0; }
.puck-card--rates .ct-price-label { color: var(--ct-navy); font-weight: 500; }
.puck-card--rates .ct-price-note {
  display: block;
  color: var(--ct-muted-fg);
  font-weight: 400;
  font-size: var(--ct-text-sm);
}
.puck-card--rates .ct-price-row strong {
  color: var(--ct-navy);
  font-size: var(--ct-text-xl);
  white-space: nowrap;
}

/* ---------- Resources / inquiry panels as native Cards (Organization) ---------- */
.puck-card--resources .puck-card-description { color: var(--ct-muted-fg); }
.puck-card--inquiry { text-align: center; }
.puck-card--inquiry .puck-card-title:empty { display: none; }
.puck-card--inquiry .puck-card-description {
  font-size: var(--ct-text-lg);
  color: var(--ct-muted-fg);
  max-width: 720px;
  margin: 0 auto 0.75rem !important;
}
/* Inquiry mailto button -> navy inline text link (old .ct-inline-link) */
.puck-card--inquiry .puck-card-button, .puck-card--inquiry a.puck-button {
  background: none !important;
  color: var(--ct-navy) !important;
  font-weight: 700;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.puck-card--inquiry .puck-card-button:hover, .puck-card--inquiry a.puck-button:hover {
  background: none !important;
  text-decoration: underline;
  color: var(--ct-navy) !important;
}

/* ---------- Stats ---------- */
.puck-stats { color: var(--ct-navy); }

/* ================================================================
   Recur widget styling (runtime-built markup) — ported from the
   existing head overrides in artifacts/ctcolt/src/index.css
   ================================================================ */

.recur-widget { font-family: inherit !important; }

/* --- 2-column card grid --- */
.recur-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 640px) {
  .recur-list { grid-template-columns: 1fr !important; }
}

/* --- Card: vertical layout --- */
.recur-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 28px 28px 24px !important;
  border-radius: 16px !important;
  border: 1.5px solid #e5e7eb !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(33,46,96,0.07) !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
  gap: 0 !important;
}

.recur-row:hover {
  box-shadow: 0 6px 24px rgba(33,46,96,0.12) !important;
  border-color: #AFCB30 !important;
}

.recur-row img,
.recur-row .placeholder { display: none !important; }

.recur-row .content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 24px !important;
}

.recur-row h4 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #212E60 !important;
  margin-bottom: 8px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.3 !important;
}

.recur-row .price {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #212E60 !important;
  line-height: 1 !important;
  margin: 4px 0 16px !important;
}

.recur-row .excerpt {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 !important;
}

.recur-row .meta {
  font-size: 0.8rem !important;
  color: #9ca3af !important;
  margin-top: 2px !important;
}

.recur-row a.btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px 24px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  transition: background-color 0.15s !important;
}

.recur-row a.btn:hover { background-color: #9ab825 !important; }

/* --- Grid cards (ProductList / EventList grid view) --- */
.recur-grid { gap: 24px !important; }

/* Cap product grids to 3 columns — Recur defaults to 1 col/item which
   creates a cramped 5-col layout for membership tiers.
   Target both the inner .recur-grid class AND any direct-child div wrapper
   that the central renderer might use instead. */
.recur-product-list .recur-grid,
.recur-single-product .recur-grid,
.recur-product-list > div:not([class*="title"]):not([class*="heading"]) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
@media (max-width: 900px) {
  .recur-product-list .recur-grid,
  .recur-single-product .recur-grid,
  .recur-product-list > div:not([class*="title"]):not([class*="heading"]) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .recur-product-list .recur-grid,
  .recur-single-product .recur-grid,
  .recur-product-list > div:not([class*="title"]):not([class*="heading"]) {
    grid-template-columns: 1fr !important;
  }
}

.recur-grid-item,
.recur-grid-classic {
  border-radius: 12px !important;
  border: 1.5px solid #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(33,46,96,0.06) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
  background: #ffffff !important;
}

/* Internal padding for grid-view product cards */
.recur-product-list .recur-grid-item,
.recur-product-list .recur-grid-classic {
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Title: give it room to breathe above the price */
.recur-product-list .recur-grid-item h3,
.recur-product-list .recur-grid-classic h3,
.recur-product-list .recur-grid-item .title,
.recur-product-list .recur-grid-classic .title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #212E60 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.5rem !important;
}

/* Price: lime, bold, with margin below */
.recur-grid-item .price,
.recur-grid-classic .price {
  color: #212E60 !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
  margin-bottom: 0.75rem !important;
  display: block !important;
}

/* Description: muted, readable line-height, grows to fill card height */
.recur-product-list .recur-grid-item .excerpt,
.recur-product-list .recur-grid-classic .excerpt,
.recur-product-list .recur-grid-item p,
.recur-product-list .recur-grid-classic p {
  font-size: 0.875rem !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
  flex: 1 !important;
  margin-bottom: 1.25rem !important;
}

/* CTA button: pushed to bottom, full-width pill */
.recur-product-list .recur-grid-item .btn,
.recur-product-list .recur-grid-classic .btn,
.recur-product-list .recur-grid-item a.btn,
.recur-product-list .recur-grid-classic a.btn {
  margin-top: auto !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding: 0.75rem 1rem !important;
  border-radius: 50px !important;
  font-size: 0.9375rem !important;
}

.recur-grid-item:hover,
.recur-grid-classic:hover {
  box-shadow: 0 4px 16px rgba(33,46,96,0.12) !important;
  border-color: #AFCB30 !important;
}

.recur-grid-item .price,
.recur-grid-classic .price {
  color: #AFCB30 !important;
  font-weight: 700 !important;
}

.recur-grid-item .btn,
.recur-grid-classic .btn,
.recur-grid-item a.btn,
.recur-grid-classic a.btn {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

/* --- Central-renderer product/event card equivalents --- */
.recur-product-card,
.recur-event-card {
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(33,46,96,0.06) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
  padding: 1.5rem !important;
}

.recur-product-card:hover,
.recur-event-card:hover {
  box-shadow: 0 4px 16px rgba(33,46,96,0.12) !important;
  border-color: #AFCB30 !important;
}

.recur-product-card-title,
.recur-event-card-title {
  color: #212E60 !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.recur-product-card-price {
  color: #212E60 !important;
  font-weight: 800 !important;
}

.recur-product-card-description,
.recur-event-card-description {
  color: #6b7280 !important;
  line-height: 1.5 !important;
}

.recur-product-card-button,
.recur-event-card-button,
.recur-event-modal-button {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

.recur-product-card-button:hover,
.recur-event-card-button:hover,
.recur-event-modal-button:hover { background-color: #9ab825 !important; }

.recur-product-list-title,
.recur-event-list-title {
  color: #212E60 !important;
  font-weight: 700 !important;
}

.recur-event-card-date { font-weight: 700 !important; color: #212E60 !important; }

/* --- Event date box --- */
.date-box { border-radius: 8px !important; overflow: hidden !important; }
.date-box .month { background-color: #212E60 !important; color: #ffffff !important; font-weight: 700 !important; }
.date-box .day { font-weight: 700 !important; color: #212E60 !important; }

/* --- Modal --- */
.recur-modal {
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}

.recur-modal-title, .recur-event-modal-title { color: #212E60 !important; font-weight: 700 !important; }
.recur-modal .price { color: #212E60 !important; font-weight: 700 !important; }

.recur-modal .btn,
.recur-modal a.btn,
.recur-modal-body .btn,
.recur-modal-body a.btn {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
}

/* --- Donation widget centering --- */
.donation-widget.recur-donation,
.recur-donation {
  max-width: 520px !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: var(--ct-shadow-card) !important;
  padding: 2rem !important;
}

/* --- Donation form --- */
.donation-amount-btn {
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: border-color 0.15s, background 0.15s !important;
}

.donation-amount-btn:hover,
.donation-amount-btn.active {
  border-color: #AFCB30 !important;
  background-color: #AFCB30 !important;
  color: #212E60 !important;
}

.donation-submit-btn,
.donation-continue-btn {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

.donation-submit-btn:hover,
.donation-continue-btn:hover { background-color: #9ab825 !important; }

/* --- Contact form --- */
.contact-submit-btn {
  background-color: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background-color 0.15s !important;
}

.contact-submit-btn:hover { background-color: #9ab825 !important; }

/* --- Pagination --- */
.recur-pagination-btn {
  border-radius: 8px !important;
  border: 1.5px solid #e5e7eb !important;
  font-weight: 600 !important;
  transition: border-color 0.15s !important;
}

.recur-pagination-btn:hover {
  border-color: #AFCB30 !important;
  color: #212E60 !important;
}

/* --- MembershipList: the Recur loader may replace its data-recur-widget
   placeholder, so use the durable CT COLT wrapper around it as the scope.
   Its fixed-width two-column plan grid centers inside normal page content. */
.ct-membership-widget .recur-paginated-content {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
.ct-membership-widget [data-recur-widget="MembershipList"] > .recur-widget {
  display: block !important;
  width: min(960px, 100%) !important;
  max-width: 960px !important;
  box-sizing: border-box;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ct-membership-widget .recur-list {
  width: 100% !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 900px) {
  .ct-membership-widget .recur-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .ct-membership-widget .recur-list {
    grid-template-columns: 1fr !important;
  }
}
.ct-membership-widget .recur-row .meta {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #212E60 !important;
  line-height: 1 !important;
  margin: 8px 0 14px !important;
}

/* --- Form inputs (contact/donation) --- */
.recur-widget input[type="text"],
.recur-widget input[type="email"],
.recur-widget input[type="tel"],
.recur-widget input[type="number"],
.recur-widget textarea,
.puck-contact-widget input,
.puck-contact-widget textarea {
  border: 1.5px solid hsl(220 20% 88%) !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
}

.recur-widget input:focus,
.recur-widget textarea:focus,
.puck-contact-widget input:focus,
.puck-contact-widget textarea:focus {
  outline: 2px solid #AFCB30 !important;
  outline-offset: 0 !important;
  border-color: #AFCB30 !important;
}

/* ---------- Accordion pattern (site-wide, used by page tasks) ----------
   Pages implement accordions as Embed blocks:
   \003c details class="ct-accordion">\003c summary>…\003c /summary>\003c div class="ct-accordion-body">…\003c /div>\003c /details> */
details.ct-accordion {
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  box-sizing: border-box;
  max-width: var(--ct-content-max);
  margin: 0 auto 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

details.ct-accordion:hover { border-color: var(--ct-lime); }
details.ct-accordion[open] { box-shadow: var(--ct-shadow-card); }

details.ct-accordion > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--ct-navy);
  position: relative;
  padding-right: 44px;
}

details.ct-accordion > summary::-webkit-details-marker { display: none; }

details.ct-accordion > summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ct-muted-fg);
  transition: transform 0.2s ease;
}

details.ct-accordion[open] > summary::after { content: "−"; color: var(--ct-lime-hover); }

details.ct-accordion .ct-accordion-body {
  padding: 0 20px 18px;
  color: var(--ct-muted-fg);
  line-height: 1.6;
}

/* ================================================================
   Site chrome — header & footer surfaces (Task: header/footer)
   ================================================================ */

/* ---------- Header shell: sticky white bar + navy utility bar ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  padding: 0;
  border-bottom: 1px solid var(--ct-border);
  box-shadow: 0 1px 2px rgba(33, 46, 96, 0.05);
}

/* Row 1 = navy utility bar.
   STRUCTURAL ASSUMPTION: the Recur header renderer emits rows in a fixed order —
   utility bar first, main white bar second. :first-child / :nth-child(2) target
   them by position because the renderer does not emit distinct row-level classes
   we can key off. If the renderer inserts a new row before the utility bar these
   rules will apply to the wrong row. Monitor after Recur renderer updates. */
.site-header .header-grid-row:first-child {
  background: var(--ct-navy);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
}

.site-header .header-grid-row:first-child .header-grid-zone {
  max-width: none;
}

.ct-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  height: 36px;
  max-width: var(--ct-content-max);
  margin: 0 auto;
  padding: 0 1rem;
}

.ct-utility a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ct-utility a:hover { color: #ffffff; }
.ct-utility svg { width: 12px; height: 12px; }

/* ---------- Language picker (Google Translate widget, custom UI) ---------- */
/* Suppress every piece of Google's injected UI and layout push-down. */
.goog-te-banner-frame, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
.skiptranslate { display: none !important; }
#gt_hidden { display: none !important; }
/* Google's default gadget dropdown + "Powered by Google" branding */
#goog-gt-tt, .goog-te-gadget, .goog-logo-link,
#google_translate_element { display: none !important; }
/* Google's hover tooltip/highlight on translated text */
.goog-text-highlight { background: none !important; box-shadow: none !important; }

.ct-lang { position: relative; display: inline-flex; }

.ct-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ct-lang-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.ct-lang-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.ct-lang-btn .ct-lang-chevron { width: 10px; height: 10px; opacity: 0.6; transition: transform 0.15s ease; }
.ct-lang-btn[aria-expanded="true"] .ct-lang-chevron { transform: rotate(180deg); }

.ct-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 208px;
  background: #ffffff;
  border: 1px solid var(--ct-border);
  border-radius: 8px;
  box-shadow: var(--ct-shadow-lg);
  padding: 4px 0;
  z-index: 1000;
}

.ct-lang-menu[hidden] { display: none; }

.ct-lang-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  color: var(--ct-navy-dark);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ct-lang-option:hover {
  background: var(--ct-muted);
  color: var(--ct-navy);
}

.ct-lang-option.is-selected {
  color: var(--ct-navy);
  font-weight: 600;
  background: rgba(33, 46, 96, 0.05);
}

/* Row 2 = main white bar.
   STRUCTURAL ASSUMPTION: see :first-child comment above — nth-child(2) targets
   the main logo/nav row by position. Safe as long as the renderer keeps the
   two-row header layout. */
.site-header .header-grid-row:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 80px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Brand lockup — native `logo` header section. The logo type renders
   text-only when a `text` key is present, so the wordmark is added here
   via ::after (plain text "CT COLT"), replicating the old .ct-brand lockup. */
.site-header .header-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: 2rem;
}
.site-header .header-logo-img {
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
}
.site-header .header-logo-link::after {
  content: "CT COLT";
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ct-navy);
}
@media (max-width: 640px) {
  .site-header .header-logo-link::after { display: none; }
}

/* Brand lockup (custom section) */
.ct-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: 2rem; /* push nav away from wordmark regardless of zone gap */
}

.ct-brand img { height: 48px; width: auto; }

.ct-brand .ct-wordmark {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ct-navy);
}

@media (max-width: 640px) {
  .ct-brand .ct-wordmark { display: none; }
}

/* Nav links */
.site-header .header-nav .nav-menu {
  gap: 0.125rem;   /* gap is now minimal — padding on each item provides breathing room */
  flex-wrap: nowrap;
  white-space: nowrap;
}
/* Let the nav zone breathe so all 7 items sit on one row */
.site-header .header-grid-zone--center { flex: 1 1 auto; min-width: 0; }

.site-header .nav-link,
.site-header .nav-link-dropdown,
.site-header .nav-menu a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ct-navy-dark);
  padding: 0.375rem 0.75rem;   /* horizontal breathing room inside each nav tab */
  border-radius: 6px;
}

/* Replace filled ▼ with a thin border-chevron matching the reference design */
.site-header .dropdown-arrow {
  font-size: 0 !important;   /* hide the ▼ character */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-left: 2px;
}
.site-header .dropdown-arrow::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px; /* optical center — shift up half the diagonal */
}

.site-header .nav-link:hover,
.site-header .nav-link-dropdown:hover,
.site-header .nav-menu a:hover {
  color: var(--ct-lime-hover);
  background: none;
  opacity: 1;
}

/* Dropdown menus */
.site-header .nav-dropdown,
.site-header .dropdown-menu,
.site-header .nav-submenu {
  background: #ffffff;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-lg);
  min-width: 200px;
  padding: 8px 0;
}

.site-header .nav-dropdown a,
.site-header .dropdown-menu a,
.site-header .nav-submenu a {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: var(--ct-navy-dark);
}

.site-header .nav-dropdown a:hover,
.site-header .dropdown-menu a:hover,
.site-header .nav-submenu a:hover {
  background: var(--ct-muted);
  color: var(--ct-lime-hover);
}

/* Header CTA button */
.header-cta-button {
  display: inline-block;
  background-color: var(--ct-lime);
  color: var(--ct-navy) !important;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 10px 24px;
  border-radius: var(--ct-radius-md);
  box-shadow: var(--ct-shadow-sm);
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.2s ease;
}

.header-cta-button:hover {
  background-color: var(--ct-lime-hover);
  box-shadow: var(--ct-shadow-md);
  opacity: 1;
}

/* Mobile toggle */
.mobile-menu-toggle { color: var(--ct-navy-dark); }

/* Keep the utility bar (language picker + Member Login) visible on mobile,
   just tighter. */
@media (max-width: 640px) {
  .ct-utility { gap: 0.75rem; padding: 0 0.75rem; }
}

/* ---------- Footer: navy 4-column + sponsor strip ---------- */
.site-footer {
  background: var(--ct-navy);
  color: rgba(255, 255, 255, 0.8);
  border-top: none;
  margin-top: 4rem;
  padding: 3rem 1rem 1rem;
  font-size: 0.875rem;
}

/* Center the footer content grid within the full-width navy band.
   The renderer's built-in rule sets max-width but omits margin: auto,
   so the 4-column grid was sitting left-aligned. */
.site-footer .site-footer-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.site-footer a { color: rgba(255, 255, 255, 0.8); }
.site-footer a:hover { color: var(--ct-lime); opacity: 1; }

.site-footer .site-footer-title {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.site-footer .site-footer-title:empty { display: none; }

.site-footer .site-footer-links { display: flex; flex-direction: column; gap: 0.5rem; padding: 0; }

/* Column 1: logo pill + mission + socials */
.ct-footer-logo-pill {
  background: #ffffff;
  padding: 16px;
  border-radius: 8px;
  display: inline-block;
}

.ct-footer-logo-pill img { height: 64px; width: auto; display: block; }

.ct-footer-mission {
  margin-top: 1rem;
  max-width: 20rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.ct-footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0.75rem;
}

.ct-footer-social a { color: rgba(255, 255, 255, 0.6); display: inline-flex; }
.ct-footer-social a:hover { color: var(--ct-lime); }
.ct-footer-social svg { width: 20px; height: 20px; }

/* Contact / affiliations / join column bits */
.ct-footer-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ct-footer-subhead { color: #ffffff; font-weight: 600; font-size: 0.875rem; margin: 1.5rem 0 0.5rem; }

.ct-footer-join-btn {
  display: inline-block;
  background-color: var(--ct-lime);
  color: var(--ct-navy) !important;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: var(--ct-radius-md);
  text-decoration: none;
  margin-top: 0.75rem;
  transition: background-color 0.15s ease;
}

.ct-footer-join-btn:hover { background-color: var(--ct-lime-hover); }

/* Sponsor strip: full-width row under the 4 columns */
.site-footer .site-footer-section:has(.ct-sponsors) {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
  padding-top: 2rem;
}

.ct-sponsors-heading {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
}

.ct-sponsors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.ct-sponsor {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.ct-sponsor:hover { opacity: 1; }
.ct-sponsor img { height: 100%; width: auto; max-width: 220px; object-fit: contain; }

@media (min-width: 641px) { .ct-sponsor { height: 9rem; } }

/* Legal row (renderer's built-in bottom bar) — suppress Recur's auto text,
   replace with CT COLT's own copyright via ::before pseudo-element. */
.site-footer .footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
  padding-top: 2rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}
/* STRUCTURAL ASSUMPTION: > * hides the renderer's auto-generated direct
   children (copyright text, legal links) so our ::before pseudo-element can
   replace them. visibility:hidden cascades to any deeper descendants, so an
   extra wrapper level would not cause text to leak through. The risk is that
   the renderer might stop emitting direct children (breaking the assumption
   that there is anything to hide) — in that case the ::before still shows. */
.site-footer .footer-bottom-bar > * { visibility: hidden; font-size: 0; }
.site-footer .footer-bottom-bar::before {
  content: "© 2026 Connecticut Council of Language Teachers. All rights reserved.";
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

/* Zone alignment in the main header row: brand left, nav center, CTA right.
   STRUCTURAL ASSUMPTION: nth-child(2) targets the main white bar by position
   (same assumption as the Row 2 rule above). :first-child / :last-child on
   .header-grid-zone within that row assume the renderer always emits exactly
   three zones in order (brand | nav | CTA). The center zone is also identified
   by its class (.header-grid-zone--center) which is safer. If zone count or
   order changes, the :first-child / :last-child rules may misfire — test after
   any Recur header renderer update. */
.site-header .header-grid-row:nth-child(2) .header-grid-zone {
  display: flex;
  align-items: center;
}

.site-header .header-grid-row:nth-child(2) .header-grid-zone:first-child {
  justify-content: flex-start;
  flex: 0 0 auto;
}

.site-header .header-grid-row:nth-child(2) .header-grid-zone--center {
  flex: 1;
  justify-content: center;
}

.site-header .header-grid-row:nth-child(2) .header-grid-zone:last-child {
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* Ensure header rows stretch full width (renderer centers shrink-wrapped rows) */
.site-header .header-grid {
  max-width: none;
  width: 100%;
  align-items: stretch;
  gap: 0;
}

.site-header .header-grid-row {
  width: 100%;
  box-sizing: border-box;
}

/* STRUCTURAL ASSUMPTION: nth-child(2) = main white bar (see Row 2 comment). */
.site-header .header-grid-row:nth-child(2) {
  justify-content: space-between;
}

/* ============================================================
   PAGES CLUSTER 1: home / about / organization / membership /
   announcements. Embed-block patterns use .ct-* classes below.
   ============================================================ */

/* -- shared helpers -- */
.ct-center { text-align: center; }
.ct-eyebrow {
  font-size: var(--ct-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ct-lime-hover);
  margin: 0 0 0.5rem;
}
.ct-lead { font-size: var(--ct-text-lg); line-height: var(--ct-leading-lg); color: var(--ct-muted-fg); }
.ct-inline-link { color: var(--ct-navy); font-weight: 700; text-decoration: none; }
.ct-inline-link:hover { text-decoration: underline; }

/* buttons used inside Embed markup */
.ct-btn-lime, .ct-btn-outline {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: var(--ct-radius-md);
  font-weight: 700;
  font-size: var(--ct-text-base);
  text-decoration: none;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ct-btn-lime { background: var(--ct-lime); color: var(--ct-navy); }
.ct-btn-lime:hover { background: var(--ct-lime-hover); }
.ct-btn-outline { border: 2px solid var(--ct-navy); color: var(--ct-navy); background: transparent; }
.ct-btn-outline:hover { background: var(--ct-navy); color: #fff; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1.5rem auto; }

/* generic panel (mission, affiliations, resources, price cards) */
.ct-panel {
  background: #fff;
  border: 1px solid var(--ct-card-border);
  border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow-card);
  padding: 2rem;
  height: 100%;
  box-sizing: border-box;
}
.ct-panel h3 { margin: 0 0 1rem; color: var(--ct-navy); font-size: var(--ct-text-xl); }
.ct-panel h3.ct-lime-title { color: var(--ct-lime-hover); }
.ct-panel p { color: var(--ct-muted-fg); }
.ct-mission-panel {
  font-size: var(--ct-text-lg);
  line-height: 1.7;
  color: var(--ct-navy-dark);
  background: hsl(220 33% 96%) !important;
  border: none !important;
  border-radius: var(--ct-radius) !important;
  box-shadow: none !important;
  padding: 2rem !important;
  margin: 0.5rem 0 1.5rem !important;
}
.ct-lime-title { border-bottom: 3px solid var(--ct-lime); padding-bottom: 0.5rem; }

/* link lists (affiliations) */
/* !important + li reset: the native Text puck's own list styles re-add
   bullets/indent when the list rides inside .puck-text (About page). */
.ct-linklist, .puck-text ul.ct-linklist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ct-linklist li { list-style: none !important; margin: 0; padding: 0; }
.ct-linklist li::marker { content: none; }
.ct-linklist li + li { border-top: 1px solid var(--ct-card-border); }
.ct-linklist a {
  display: block;
  padding: 0.65rem 0.25rem;
  color: var(--ct-navy);
  font-weight: 500;
  text-decoration: none;
}
.ct-linklist a:hover { color: var(--ct-lime-hover); }

/* price rows (membership) */
.ct-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ct-card-border);
}
.ct-price-row:last-child { border-bottom: 0; }
.ct-price-row span { color: var(--ct-navy); font-weight: 500; }
.ct-price-row small { color: var(--ct-muted-fg); font-weight: 400; }
.ct-price-row strong { color: var(--ct-navy); font-size: var(--ct-text-xl); white-space: nowrap; }

/* minutes grid (organization) — explicit 2-column with folder icon */
/* 2fr/1fr wrapper for the Board Minutes & Resources two-column row */


.ct-minutes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.ct-minutes a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  background: #fff;
  color: var(--ct-navy);
  font-weight: 600;
  font-size: var(--ct-text-sm);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.ct-minutes a:hover { border-color: var(--ct-lime); color: var(--ct-lime-hover); }

/* social band (home) — full-width navy strip */
.ct-social-band {
  background: var(--ct-navy);
  color: #fff;
  text-align: center;
  padding: 4rem 1.5rem;
  border-radius: var(--ct-radius);
  margin: 1rem auto;
  max-width: var(--ct-content-max);
  box-sizing: border-box;
}
.ct-social-band h2 { color: #fff; margin: 0 0 0.5rem; font-size: var(--ct-text-3xl); }
.ct-social-band p { color: rgba(255,255,255,0.8); margin: 0 0 2rem; }
.ct-social-band-icons { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.ct-social-band-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 600;
  font-size: var(--ct-text-sm);
  text-decoration: none;
}
.ct-social-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  transition: background-color .15s ease, color .15s ease;
}
.ct-social-band-icons a:hover .ct-social-circle { background: var(--ct-lime); color: var(--ct-navy); }

/* CTA band (home) */
.ct-cta-band {
  background: linear-gradient(135deg, var(--ct-navy), var(--ct-navy-dark));
  color: #fff;
  text-align: center;
  padding: 4rem 1.5rem;
  border-radius: var(--ct-radius);
  margin: 1.5rem auto 3rem;
  max-width: var(--ct-content-max);
  box-sizing: border-box;
}
.ct-cta-band h2 { color: #fff; font-size: var(--ct-text-3xl); margin: 0 0 1rem; }
.ct-cta-band p { color: rgba(255,255,255,0.85); max-width: 640px; margin: 0 auto 2rem; }
.ct-cta-band-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ct-cta-band-link { color: var(--ct-blue); font-weight: 600; text-decoration: none; }
.ct-cta-band-link:hover { text-decoration: underline; }

/* announcement cards */
.ct-annc {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--ct-card-border);
  border-radius: 1rem;
  box-shadow: var(--ct-shadow-card);
  padding: 2rem;
  max-width: 56rem;
  margin: 0 auto 2rem;
  box-sizing: border-box;
}
.ct-annc-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(175, 203, 48, 0.18);
  color: var(--ct-lime-hover);
  font-size: 1.25rem;
}
.ct-annc-body h2 { color: var(--ct-navy); font-size: var(--ct-text-2xl); margin: 0 0 1rem; }
.ct-annc-body p { color: var(--ct-muted-fg); line-height: 1.65; }
.ct-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.ct-jobs a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ct-border);
  border-radius: var(--ct-radius-md);
  background: var(--ct-bg);
  color: var(--ct-navy);
  font-weight: 500;
  font-size: var(--ct-text-sm);
  text-decoration: none;
}
.ct-jobs a:hover { border-color: var(--ct-lime); color: var(--ct-lime-hover); }
/* Job links centered inside the card (pending fix folded into the native
   conversion 2026-08-17): label + arrow grouped and centered in each chip. */
.ct-jobs a { justify-content: center; }
.ct-jobs a::after { content: "\2197"; opacity: 0.5; }

/* ---------- Announcement cards as native Cards ----------
   Replicates .ct-annc: white card, lime icon circle left, body right.
   Renderer emits layout "icon" as an inline-styled centered column
   (icon span + body div as siblings); !important flips it to a row and
   beats the inline styles. Paragraphs are block spans (.ct-annc-p) since
   the Card description sanitizer strips \003c p>. */
.puck-card--annc {
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 1.25rem !important;
  max-width: 56rem;
  margin: 0 auto 2rem;
  border-radius: 1rem;
  padding: 2rem !important;
}
.puck-card--annc .material-symbols-rounded,
.puck-card--annc .material-icons {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(175, 203, 48, 0.18);
  color: var(--ct-lime-hover);
  font-size: 1.5rem;
}
.puck-card--annc .puck-card-title {
  font-size: var(--ct-text-2xl);
  margin: 0 0 1rem !important;
}
.puck-card--annc .puck-card-description { margin: 0 !important; }
.puck-card--annc .ct-annc-p {
  display: block;
  color: var(--ct-muted-fg);
  line-height: 1.65;
  margin: 0 0 1em;
}
.puck-card--annc .ct-annc-p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .puck-card--annc { flex-direction: column !important; padding: 1.5rem !important; }
}

/* card variants */
.puck-card--pillar { text-align: center; }
.puck-card--board .puck-card-eyebrow { color: var(--ct-lime-hover); }

/* mobile */
@media (max-width: 640px) {
  .ct-annc { flex-direction: column; padding: 1.5rem; }
  .ct-panel { padding: 1.5rem; }
  .ct-social-band-icons { gap: 1.5rem; }
}

/* Full-bleed heroes: the renderer wraps page content in main { padding: 2rem }
   but its only built-in breakout rule cancels the top padding only
   (#puck-content > .puck-hero:first-child { margin-top: -2rem }).
   Left/right bleed requires negative margins + width compensation.
   Applies to ALL hero variants so every page hero reaches the screen edge.
   INTENTIONAL DIRECT-CHILD COMBINATOR: the > on #puck-content and main is
   deliberate — it targets only top-level heroes placed directly inside the
   content root, not heroes nested inside grid/flex wrapper blocks. Removing
   the > would bleed any hero anywhere on the page, which is wrong. The
   assumption is that the renderer's content root stays one level above .puck-hero;
   if the renderer adds an intermediate wrapper (e.g. a section element) the
   #puck-content > rule would stop matching and heroes would lose their bleed.
   The plain `main .puck-hero:first-child` fallback (no >) is kept as a safety
   net; :first-child is positional but acceptable here because a hero almost
   always leads the page. */
#puck-content > .puck-hero,
main > .puck-hero,
main .puck-hero:first-child {
  margin-left: -2rem;
  margin-right: -2rem;
  width: calc(100% + 4rem);
}

/* Single-style heroes: the renderer's inline background color is stripped by
   the style scrubber (plain-color backgrounds don't survive), so the navy
   page-hero background + white text must come from here. The home carousel
   hero (.puck-hero--carousel) keeps its photo slides and is unaffected. */
.puck-hero--standard {
  padding: 4rem 1.5rem;
  box-sizing: border-box;
}
/* Navy gradient only when the hero has no authored background image
   (e.g. the /store photo hero sets an inline background-image). */
.puck-hero--standard:not([style*="url("]) {
  background: linear-gradient(135deg, var(--ct-navy), var(--ct-navy-dark)) !important;
}
.puck-hero--standard .puck-hero-title,
.puck-hero--standard h1 { color: #fff !important; }
.puck-hero--standard .puck-hero-subtitle { color: rgba(255, 255, 255, 0.9) !important; font-size: var(--ct-text-xl); }
.puck-hero-eyebrow {
  background: rgba(175, 203, 48, 0.25);
  color: #fff;
  border-radius: 9999px;
  padding: 0.35rem 1rem;
  font-weight: 600;
  font-size: var(--ct-text-sm);
  margin-bottom: 1rem;
}

/* Bare headings & standalone-button rows: the renderer emits Heading blocks as
   bare \003c h1>-\003c h6> (no wrapper class) and Button rows as .puck-button-container,
   neither of which is width-capped. Cap them like other top-level blocks. */
main h1, main h2, main h3, main h4, main h5, main h6 {
  max-width: var(--ct-content-max);
  margin-left: auto;
  margin-right: auto;
}
.puck-hero--standard h1, .puck-hero--carousel h1 { max-width: none; }
.puck-button-container { max-width: var(--ct-content-max); margin-left: auto; margin-right: auto; }
/* Standalone .puck-button loses its variant styling to the scrubber — give it
   the primary look as a fallback (authored buttons use .ct-btn-* instead). */
.puck-button {
  display: inline-block;
  background: var(--ct-lime);
  color: var(--ct-navy);
  padding: 0.75rem 1.5rem;
}
.puck-button:hover { background: var(--ct-lime-hover); color: var(--ct-navy); }

/* The Membership account-status action is intentionally descriptive. The
   native renderer strips custom Button classes, so target its unique in-page
   destination and let it wrap on phones instead of expanding the page width. */
@media (max-width: 640px) {
  main section.text-center.space-y-4 > div.flex.flex-wrap.justify-center.gap-4.pt-4 > a[href="https://member.getrecur.com/ctcolt"] {
    white-space: normal !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
}

/* Embed-authored button rows */
.ct-btnrow { display: flex; max-width: var(--ct-content-max); margin: 0.5rem auto; }
.ct-btnrow-left { justify-content: flex-start; }
.ct-btnrow-center { justify-content: center; }
.ct-btn-navy {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: var(--ct-radius-md);
  font-weight: 700;
  text-decoration: none;
  background: var(--ct-navy);
  color: #fff;
  transition: background-color .15s ease;
}
.ct-btn-navy:hover { background: var(--ct-navy-dark); color: #fff; }

/* Board people-cards: renderer's default card image wrapper is a fixed 200px
   strip (inline height survives the scrubber), which crops headshots badly.
   Restore the source site's square crop on the board variant.
   STRUCTURAL ASSUMPTION: > div:first-child targets the renderer-generated image
   wrapper — the first direct child div of the card element. The :has(> img)
   guard scopes the rule to only fire when that div directly contains an \003c img>,
   which limits false positives if the renderer restructures. If the renderer
   wraps the image in an extra element (making it a grandchild) the :has(> img)
   guard will stop matching and the square-crop override will silently drop off.
   No class-based alternative is available because the renderer does not emit a
   distinct class on the image wrapper. Verify square headshots after Recur
   renderer updates. */
.puck-card--board > div:first-child:has(> img) {
  height: auto !important;
  aspect-ratio: 1 / 1;
}
.puck-card--board > div:first-child:has(> img) > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.ct-note {
  background: rgba(189, 221, 225, 0.35);
  padding: 1rem;
  border-radius: var(--ct-radius-md);
  color: var(--ct-navy);
  font-size: var(--ct-text-sm);
}

/* ===================== PAGES CLUSTER 2 (Events) ===================== */
.ct-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: var(--ct-radius-md); overflow: hidden; box-shadow: 0 6px 24px rgba(33, 46, 96, 0.12); }
.ct-gallery img { width: 100%; height: 8rem; object-fit: cover; display: block; }
.ct-gallery .ct-gallery-wide { grid-column: 1 / -1; height: 12rem; }

.ct-callout { display: block; margin-top: 1rem; padding: 1rem; background: var(--ct-muted); border-radius: var(--ct-radius-md); }
.ct-callout h4 { margin: 0 0 0.5rem; color: var(--ct-navy); }
.ct-callout-amber { background: #fffbeb; color: #78350f; }
.ct-callout-amber p { color: #78350f; }

.ct-schedule { list-style: none; padding: 0; margin: 1rem 0 0; }
.ct-schedule li { display: flex; gap: 1rem; padding: 0.35rem 0; font-weight: 500; }
.ct-schedule li strong { width: 7rem; flex-shrink: 0; color: var(--ct-navy); }

.ct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: var(--ct-content-max); margin: 0 auto 1.5rem; }
.ct-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: 1.25rem 1rem; background: rgba(189, 221, 225, 0.18); border-radius: var(--ct-radius-md); color: var(--ct-muted-fg); }
.ct-stat .ct-stat-label { font-weight: 700; color: var(--ct-navy); }

.ct-checklist { list-style: none; padding: 0; margin: 1rem 0 0; }
.ct-checklist li { position: relative; padding: 0.3rem 0 0.3rem 2rem; color: var(--ct-muted-fg); }
.ct-checklist li::before { content: "✓"; position: absolute; left: 0.25rem; top: 0.3rem; font-weight: 800; color: var(--ct-lime); }

.ct-list { padding-left: 1.4rem; margin: 0.75rem 0 0; }
.ct-list li { margin: 0.4rem 0; color: var(--ct-muted-fg); }

.ct-panel h4 { margin: 1.1rem 0 0.25rem; color: var(--ct-navy); }

.ct-coord-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 640px; margin: 1.25rem auto; }
.ct-coord { background: #ffffff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-md); padding: 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.ct-coord strong { color: var(--ct-navy); font-size: 1.05rem; }
.ct-coord span { font-size: var(--ct-text-sm); color: var(--ct-muted-fg); }
.ct-coord a { color: var(--ct-lime-dark, #7a9422); font-weight: 600; text-decoration: none; }
.ct-coord a:hover { text-decoration: underline; }

.ct-small-muted { font-size: var(--ct-text-sm); color: var(--ct-muted-fg); }

.ct-join-panel { max-width: 780px; margin-left: auto; margin-right: auto; }
.ct-join-panel h2 { margin-top: 0; color: var(--ct-navy); }

/* Card variants for cluster 2 */
.puck-card--session-upcoming { border-color: var(--ct-lime) !important; box-shadow: 0 6px 24px rgba(33, 46, 96, 0.12) !important; }
.puck-card--session { opacity: 0.85; }
.puck-card--video .puck-card-description:empty { display: none; }

@media (max-width: 767px) {
  .ct-stats { grid-template-columns: repeat(2, 1fr); }
  .ct-coord-grid { grid-template-columns: 1fr; }
  .ct-gallery img { height: 7rem; }
}

/* ===================== PAGES CLUSTER 3 (Awards & Scholarships) ===================== */
.ct-note-panel { max-width: 880px; margin-left: auto; margin-right: auto; }
/* Panel image (Seal of Biliteracy items) — was inline-styled in the old Embed;
   the Text sanitizer strips inline styles, so the sizing lives here. */
.ct-note-panel img { max-height: 12rem; margin: 0 auto 1.5rem; display: block; }
.ct-note-panel p { color: var(--ct-muted-fg); margin: 0.25rem 0; }
.ct-note-panel .ct-btnrow { margin-top: 1rem; }

.ct-award { max-width: 880px; margin-left: auto; margin-right: auto; }
.ct-award h2 { margin-top: 0; color: var(--ct-navy); font-size: 1.5rem; }
.ct-award h3 { color: var(--ct-navy); margin: 1.25rem 0 0.35rem; font-size: 1.1rem; }
.ct-award p { color: var(--ct-muted-fg); margin: 0.5rem 0; }
.ct-award .ct-btnrow { margin-top: 1.25rem; }

.ct-theme { font-size: 1.25rem; font-style: italic; font-weight: 500; color: var(--ct-lime-dark, #7a9422); margin: 0.5rem 0; }

.ct-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 1rem 0; }
.ct-two-col h4, .ct-two-col h5 { color: var(--ct-navy); margin: 0 0 0.4rem; }

.ct-cat { background: var(--ct-muted); border-radius: var(--ct-radius-md); padding: 1rem; }
.ct-cat .ct-cat-name { font-weight: 700; color: var(--ct-navy); margin: 0 0 0.25rem; }
.ct-cat p { margin: 0.25rem 0; font-size: var(--ct-text-sm); }

.ct-yearrow { flex-wrap: wrap; }
.ct-yearrow .ct-btn-outline { padding: 0.4rem 1rem; }

@media (max-width: 767px) {
  .ct-two-col { grid-template-columns: 1fr; }
}

/* ============ PAGES CLUSTER 4 (advocacy / journal / newsletter / blog) ============ */
.ct-linkgrid { display: grid; gap: 0.75rem; }
.ct-linkgrid-3 { grid-template-columns: repeat(3, 1fr); }
.ct-linkgrid-4 { grid-template-columns: repeat(4, 1fr); }
.ct-linktile {
  display: block; padding: 0.85rem 1rem; text-align: center;
  border: 1px solid rgba(11, 31, 59, 0.15); border-radius: 0.5rem;
  color: var(--ct-navy); font-weight: 600; font-size: var(--ct-text-sm);
  text-decoration: none; background: #fff;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ct-linktile:hover { border-color: var(--ct-lime); color: var(--ct-lime-dark, var(--ct-navy)); }
@media (max-width: 767px) {
  .ct-linkgrid-3, .ct-linkgrid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ============ PAGES CLUSTER 5 (get-involved / seal / store / donate / contact) ============ */
.ct-linkgrid-2 { grid-template-columns: repeat(2, 1fr); }
.ct-restile { text-align: left; }
.ct-restile .ct-tile-desc {
  display: block; margin-top: 0.25rem;
  font-weight: 400; font-size: 0.85rem; color: rgba(11, 31, 59, 0.65);
}
.ct-volgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ct-voltile {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1.25rem; background: rgba(33, 46, 96, 0.04); border-radius: 0.75rem;
}
.ct-voltile .material-symbols-outlined { color: var(--ct-lime); font-size: 1.6rem; flex: none; }
.ct-voltile h4 { margin: 0 0 0.25rem; color: var(--ct-navy); font-size: 1.05rem; }
.ct-voltile p { margin: 0; color: rgba(11, 31, 59, 0.7); font-size: 0.95rem; }
.ct-emailcard { background: rgba(33, 46, 96, 0.05); border-radius: 0.5rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.ct-emailcard h4 { margin: 0 0 0.2rem; color: var(--ct-navy); font-size: 1rem; }
.ct-emailcard a { color: var(--ct-lime-dark, var(--ct-navy)); font-weight: 600; text-decoration: none; }
.ct-emailcard a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .ct-linkgrid-2, .ct-volgrid { grid-template-columns: 1fr; }
}

/* --- Cluster 5: native contact form --- */
.ct-contactform form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; position: relative; }
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ct-contactform input, .ct-contactform textarea {
  width: 100%; box-sizing: border-box; padding: 0.65rem 0.9rem;
  border: 1px solid rgba(11, 31, 59, 0.2); border-radius: 0.5rem;
  font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--ct-navy);
}
.ct-contactform input:focus, .ct-contactform textarea:focus {
  outline: none; border-color: var(--ct-lime); box-shadow: 0 0 0 3px rgba(175, 203, 48, 0.25);
}
.ct-challenge-label { font-size: 0.9rem; font-weight: 600; color: var(--ct-navy); margin-bottom: -0.35rem; }
.ct-form-error { color: #b3261e; font-size: 0.9rem; }
.ct-form-success { color: var(--ct-navy); font-weight: 600; padding: 1rem 0; }
.ct-contactform .contact-submit-btn {
  background: var(--ct-lime) !important; color: var(--ct-navy) !important;
  border: none; border-radius: 50px; font-weight: 700; padding: 0.75rem 1.5rem; cursor: pointer;
}
@media (max-width: 560px) { .ct-form-row { grid-template-columns: 1fr; } }

/* ============ ORGANIZATION PAGE — custom board member cards ============ */
/* Replicates the dev app's Card + CardContent layout exactly:
   square photo (aspect-ratio 1/1, object-cover), rounded card with shadow,
   p-6 body for exec / p-4 body for coordinators. */

 /* text-lg */


.ct-bcard-role-xs { font-size: 0.7rem; }

.ct-bcard-district {
  font-size: 0.875rem;       /* text-sm */
  color: var(--ct-muted-fg);
  margin: 0 0 1rem;
}
.ct-bcard-district-sm {
  font-size: 0.75rem;        /* text-xs */
  margin-bottom: 0.75rem;
}

.ct-bcard-bio {
  font-size: 0.875rem;
  color: rgba(20, 28, 58, 0.8);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 1rem;
}

/* ============ ORGANIZATION PAGE — section headings ============ */
/* Replicates the dev app's h2 style: text-3xl font-bold border-b pb-4 mb-10 */


/* ============ HEADING / TITLE COLOR OVERRIDES ============
   Recur's renderer injects inline styles or theme-level rules that default
   Heading blocks (.puck-heading) and card titles (.puck-card-title) to the
   site primary colour (lime). The rules below restore the intended navy with
   !important so they win over any inline style.
   Intentional white headings live inside Embed blocks (.ct-cta-band h2,
   .ct-social-band h2) as plain \003c h2> tags — not .puck-heading elements — so
   they are unaffected. Hero white text already uses .puck-hero-title with
   its own !important rule and is also unaffected. */
.puck-heading   { color: var(--ct-navy) !important; }
.puck-card-title { color: var(--ct-navy) !important; }
.ct-annc-body h2 { color: var(--ct-navy) !important; }

/* Center-aligned Heading blocks render as bare \003c h2>/\003c h3> elements (no
   .puck-heading class), with an inline color from the renderer's theme.
   Using #puck-content (ID selector) gives us specificity 0,1,0,1 which
   beats the renderer's class-only rules regardless of !important source
   order. The dark-section exceptions have specificity 0,1,1,1 which
   outranks the base rule so white headings inside .ct-cta-band and
   .ct-social-band are preserved. */
#puck-content h2 { color: var(--ct-navy) !important; }
#puck-content h3 { color: var(--ct-navy) !important; }
#puck-content h4 { color: var(--ct-navy) !important; }
#puck-content .puck-heading { color: var(--ct-navy) !important; }

/* Headings inside Grid zone columns may not inherit #puck-content ancestry
   in the Recur renderer — add a broad main-scoped fallback that covers
   them. Specificity 0,0,0,2 (two type selectors) loses to any
   class-selector override, so .ct-cta-band / .ct-social-band white rules
   still win without needing !important here. */
main h2 { color: var(--ct-navy) !important; }
main h3 { color: var(--ct-navy) !important; }
main h4 { color: var(--ct-navy) !important; }

/* Utility heading classes for embed blocks — used instead of \003c h2> elements
   because Recur's renderer overrides inline color on semantic heading tags
   via JavaScript. Using a \003c div class="ct-heading-2"> avoids that override
   while preserving the visual appearance. */
.ct-heading-2 {
  font-size: var(--ct-text-3xl);
  line-height: var(--ct-leading-3xl);
  font-weight: 700;
  color: var(--ct-navy) !important;
  margin: 0 0 1rem;
}
.ct-heading-3 {
  font-size: var(--ct-text-2xl);
  line-height: var(--ct-leading-2xl);
  font-weight: 700;
  color: var(--ct-navy) !important;
  margin: 0 0 0.75rem;
}
.ct-heading-center { text-align: center; }

/* White-on-dark heading exceptions — higher specificity wins */
#puck-content .ct-cta-band h2,
#puck-content .ct-cta-band h3,
#puck-content .puck-cta h2,
#puck-content .puck-cta h3,
#puck-content .puck-cta-title,
#puck-content .ct-social-band h2,
#puck-content .puck-hero-content h2,
#puck-content .puck-hero-content h3 { color: #ffffff !important; }

/* ============================================================
   Native puck data widgets — additions only. Event/product card
   classes are already styled at ~line 700; do NOT restyle them
   here (equal-specificity later rules would override, e.g. the
   navy bold .recur-event-card-date). This section adds grid gaps
   and BlogList card styling only.
   ============================================================ */
.recur-event-list-grid,
.recur-product-list-grid,
.recur-blog-list-grid { gap: 24px !important; }
/* Blog cards need a readable single-column flow on phones. The renderer's
   desktop column setting otherwise stays active at this breakpoint. */
@media (max-width: 600px) {
  .recur-blog-list-grid { grid-template-columns: 1fr !important; }
}

.recur-blog-card {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(33,46,96,0.07) !important;
  background: #ffffff !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}
.recur-blog-card:hover {
  box-shadow: 0 6px 24px rgba(33,46,96,0.12) !important;
  border-color: #AFCB30 !important;
}
.recur-blog-card-title {
  color: #212E60 !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
/* Title links: no underline (match old .ct-blog-card), lime on hover */
.recur-blog-card a,
.recur-blog-card-title a,
a.recur-blog-card-title {
  text-decoration: none !important;
}
.recur-blog-card:hover .recur-blog-card-title,
.recur-blog-card .recur-blog-card-title a:hover {
  color: #9ab825 !important;
}
.recur-blog-card-date { color: #6b7280 !important; }
.recur-blog-card-button {
  display: inline-block !important;
  background: #AFCB30 !important;
  color: #212E60 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 12px 28px !important;
  text-decoration: none !important;
  transition: background-color 0.15s !important;
}
.recur-blog-card-button:hover { background: #9ab825 !important; }

/* ---------- Events page intro (native Text; sanitizer strips inline styles) ---------- */
.ct-events-intro {
  color: var(--ct-muted-fg);
  max-width: 42rem;
  margin: 0 auto 2rem;
}

/* Native EventList on /events: cap card column width and center it, matching
   the old widget's ~640px centered stacked cards. */
.recur-event-list { max-width: 42rem; }

/* ---------- Professional Learning Series session cards ----------
   Native Text pucks (.ct-panel markup, exception #7); sanitizer strips inline
   styles so the old inline card styling lives here as classes. */
.ct-session { margin-bottom: 1rem; }
.ct-session--upcoming { border-color: var(--ct-lime); box-shadow: 0 6px 24px rgba(33,46,96,0.12); }
.ct-session--completed { opacity: 0.85; }
/* .ct-panel p (0,1,1) would out-rank a bare class — scope under .ct-session. */
.ct-session .ct-session-meta { font-size: 0.85rem; font-weight: 700; color: var(--ct-lime-hover); margin: 0 0 0.4rem; }
.ct-session .ct-session-title { font-size: 1.1rem; font-weight: 700; color: var(--ct-navy); margin: 0 0 0.5rem; }
.ct-session .ct-session-presenter { color: var(--ct-muted-fg); margin: 0; }
.ct-session-register { margin-top: 1rem; }


            /* PROTECTED footer bottom bar + Recur attribution (Task: protect
               bottom-bar styling from custom CSS). Emitted AFTER the tenant's
               custom CSS and with !important on every declaration so no
               custom CSS can restyle, shrink, hide, or recolor the bottom bar
               or the "Built by"/"Powered by" badge. Emitted in FULL for all
               site modes, including designer-owned (advanced custom-CSS). */
            /* Render class contract v1.9.0 — PROTECTED footer bottom bar + Recur attribution (emitted after custom CSS; not overridable). */
.site-footer .footer-bottom-bar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
  border-top: 1px solid var(--color-border, #ddd) !important;
  padding: 0.5rem 0 0 !important;
  font-size: 0.6875rem !important;
  color: inherit !important;
  position: static !important;
  transform: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.site-footer .footer-bottom-bar .footer-bottom-bar-link {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  gap: 0.375rem !important;
  color: #4d4d4d !important;
  background: #ffffff !important;
  border-radius: 3px !important;
  padding: 2px 8px !important;
  text-decoration: none !important;
  font-size: 0.6875rem !important;
  position: static !important;
  transform: none !important;
  filter: none !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  clip-path: none !important;
  transition: opacity 0.2s !important;
}
.site-footer .footer-bottom-bar .footer-bottom-bar-link svg {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 25px !important;
  width: auto !important;
  vertical-align: middle !important;
}
.site-footer .footer-bottom-bar .footer-bottom-bar-link:hover {
  opacity: 0.8 !important;
}