/**
 * KCA Site — global stylesheet.
 *
 * Site-wide visual fixes and polish (Step 7b Claude Design pass) that belong
 * at the theme/site layer, not repeated inline in page block markup. Enqueued
 * by kca-site.php on every front-end page load. Brand palette per the KCA
 * Brand Kit: teal #009cbd, green #3a913f, navy #1a2e4a, light panel #f4f4f4.
 *
 * Data-driven page card styles (.kca-board-card, .kca-gov-card, etc.) moved
 * here 2026-07-14 from kca-site-renderers.php's own inline <style> block —
 * Pre-Launch Screen CSP finding (S2): that block was byte-identical on every
 * page it appeared on (confirmed before moving, not assumed), so it needed no
 * per-page nonce, just a move to this already-`<link>`-loaded file.
 * kca_site_render_styles() is now a no-op stub kept only so its ~26 call
 * sites in kca-site-renderers.php don't need touching.
 */

/* ---------------------------------------------------------------------------
 * Footer contrast fix. Kadence's default widget-area text/link colors
 * (palette4/5, meant for light backgrounds) were never overridden for the
 * dark navy footer (palette3) set during the Step 5 foundation pass, so
 * footer copy and links were rendering nearly invisible against the navy
 * background — one link color matched the background exactly. Force a
 * light, legible palette for everything inside the footer.
 * ------------------------------------------------------------------------- */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer .footer-widget-area {
    color: #e6ebf2 !important;
}
.site-footer a {
    color: #ffffff !important;
}
.site-footer a:hover,
.site-footer a:focus {
    color: #009cbd !important;
}

/* ---------------------------------------------------------------------------
 * Header and footer typography — from the "KCA Header"/"KCA Footer" Claude
 * Design bundles Travis provided (unpacked and inspected via a headless
 * Chrome + CDP session, since both ship as self-contained JS bundles rather
 * than static HTML). Applies the Barlow type system to the site chrome that
 * wraps every page. Kadence's free-tier Customizer has no per-nav-item
 * typography control, so this is CSS rather than a theme_mod, same as the
 * icon-badge/connector-row work earlier in this design pass.
 * ------------------------------------------------------------------------- */
.site-title {
    font: 700 20px/1.1 'Barlow', sans-serif !important;
    color: #1a2e4a;
}
.main-navigation a {
    font: 500 15px/1 'Barlow', sans-serif !important;
}
.secondary-navigation a {
    font: 700 14px/1 'Barlow', sans-serif !important;
}
/* Header dropdown "Members Only" grouping (kca_site_nav_members_divider() in
 * kca-site-renderers.php) — a non-clickable divider label above the group of
 * gated items in a dropdown, replacing the earlier per-item badge. The
 * indent on .kca-members-only-item is relative to the theme's default 1em
 * horizontal link padding on dropdown items (header.min.css), so it reads as
 * nested under the label without needing a real 3rd menu level/flyout. */
.kca-members-divider-label {
    display: block;
    padding: 10px 12px 2px;
    color: #3a913f;
    font: 700 11px/1 'Barlow', sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.kca-members-only-item > a {
    padding-left: 28px !important;
}
/* Kadence renders the utility-bar social icons twice — once under
 * .header-social-inner-wrap for desktop, once under a separate
 * .header-mobile-social-inner-wrap for the mobile row — each with its own
 * "social-style-filled" default (opaque background from --global-palette7).
 * Both need the override or the mobile icons render as solid white squares
 * (white icon on the theme's default white button background). */
.header-social-inner-wrap a.social-button,
.header-mobile-social-inner-wrap a.social-button {
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}
.site-footer {
    font-family: 'Barlow', sans-serif;
}
.footer-widget1 .textwidget strong {
    font: 700 18px/1.2 'Barlow', sans-serif;
    color: #ffffff;
    display: inline-block;
    margin-bottom: 4px;
}
.footer-widget1 .textwidget {
    font: 400 15px/1.6 'Barlow', sans-serif;
}
.footer-navigation a {
    font: 500 15px/1 'Barlow', sans-serif !important;
}
.site-footer .footer-html-inner {
    font: 400 14px/1 'Barlow', sans-serif !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ---------------------------------------------------------------------------
 * Button modernization — rounded pill shape with a hover lift, matching the
 * reference design's button treatment. Applies to native Kadence/WordPress
 * buttons (block-authored pages) and mirrors the .kca-btn treatment used by
 * the shortcode-rendered pages, so buttons look consistent everywhere.
 * ------------------------------------------------------------------------- */
button,
.button,
.wp-block-button__link,
.wp-element-button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border-radius: 999px;
    padding: 0.7em 1.6em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
button:hover,
.button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -8px rgba(26, 46, 74, 0.35);
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
    padding: 0.65em 1.55em;
}

/* ---------------------------------------------------------------------------
 * .btn-primary contrast fix — white text on the brand green (#3a913f) is
 * only 3.96:1, below WCAG AA's 4.5:1 floor for this button text's size
 * (flagged by Lighthouse's accessibility audit, Jul 2026 pre-launch screen).
 * Darkening the fill to #2f7a36 keeps it unmistakably "the KCA green" while
 * giving white text ~5.3:1. Hover keeps the brighter brand green since
 * hover states aren't part of the static-page contrast audit.
 * ------------------------------------------------------------------------- */
.btn.btn-primary {
    background-color: #2f7a36 !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: #3a913f !important;
}

/* ---------------------------------------------------------------------------
 * Light card polish — the #f4f4f4 panel background is this project's
 * established "card" token (Home's "Stay Connected"/"What's New" rows, Why
 * Join's benefit tiles, etc.). Give those panels a soft shadow and a gentle
 * hover lift instead of a flat, static block. Brand-color hero bands
 * (#009cbd / #3a913f) are untouched — this only targets the light-gray tone.
 * ------------------------------------------------------------------------- */
.entry-content .wp-block-group[style*="background-color:#f4f4f4"],
.entry-content .wp-block-column[style*="background-color:#f4f4f4"] {
    border-radius: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 10px -4px rgba(26, 46, 74, 0.12);
}
.entry-content .wp-block-group[style*="background-color:#f4f4f4"]:hover,
.entry-content .wp-block-column[style*="background-color:#f4f4f4"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 26px -10px rgba(26, 46, 74, 0.22);
}

/* ---------------------------------------------------------------------------
 * Utility bar mobile link spacing — matches the desktop Sign In / Join
 * treatment now that the mobile-html placeholder bug (kca_site_enqueue's
 * companion theme_mod fix) renders real links instead of "Insert HTML here".
 * ------------------------------------------------------------------------- */
.kca-topbar-mobile-links {
    display: flex;
    gap: 16px;
}
.kca-topbar-mobile-links a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}
.kca-topbar-mobile-links a:hover {
    color: #009cbd;
}

/* ---------------------------------------------------------------------------
 * Main header row — pull the nav in closer to the logo instead of letting a
 * left/right grid split it to the far edges of the container, which read as
 * an oversized gap between the two.
 * ------------------------------------------------------------------------- */
.site-main-header-wrap .site-main-header-inner-wrap {
    grid-template-columns: auto 1fr;
    column-gap: 40px;
}
.site-main-header-wrap .site-header-main-section-right {
    justify-content: flex-start;
}

/* ---------------------------------------------------------------------------
 * Equal-height card rows (Stay Connected, What's New for Members) — pin each
 * card's button to the bottom of its column so buttons line up horizontally
 * regardless of how many lines the body copy above them wraps to.
 * ------------------------------------------------------------------------- */
.kca-align-buttons .wp-block-column {
    display: flex;
    flex-direction: column;
}
.kca-align-buttons .wp-block-column .wp-block-buttons {
    margin-top: auto;
}

/* ---------------------------------------------------------------------------
 * Footer link column — single vertical list instead of the default flex-wrap
 * (which packed two short links per row) so it reads as one list lined up
 * next to the address column.
 * ------------------------------------------------------------------------- */
.footer-navigation {
    justify-content: flex-end;
}
.footer-navigation ul.menu {
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

/* ---------------------------------------------------------------------------
 * Type scale — Claude Design spec, Step 7b Phase 2. Barlow Condensed for
 * display/headings (bold, uppercase, tracked), Barlow for body. Self-hosted
 * (assets/fonts/, relative to this stylesheet) rather than a Google Fonts
 * CDN request — matches this project's pattern of trimming third-party
 * dependencies (Jetpack, Advanced iFrame, etc. were dropped for the same
 * reason). Scoped to the five priority pages via body.page-id-* below and
 * the .kca- component classes shared with kca-site-renderers.php — this is
 * deliberately NOT a global h1–h6 override, so it doesn't change typography
 * on the ~50 other already-built pages outside this design pass.
 * ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/barlow-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/barlow-condensed-800.woff2') format('woff2');
}

.kca-redesign,
.entry-content { font-family: 'Barlow', sans-serif; color: #2c3440; }
.kca-redesign p, .kca-redesign li,
.entry-content p, .entry-content li { font-family: 'Barlow', sans-serif; }

/* ---------------------------------------------------------------------------
 * Custom 404 page (kca_site_render_404() in kca-site-404.php) — from the
 * "Custom 404 page design" Claude Design bundle Travis provided, re-colored
 * to this project's actual brand tokens (the bundle used slightly different
 * hex values than the rest of the site: #1E86AC/#2BA7D1/#3E9F47/#1B3B7A
 * instead of the established #009cbd/#3a913f/#1a2e4a). Escapes Kadence's
 * `.content-container` max-width the same negative-margin trick the
 * homepage hero uses, since this needs a full-bleed panel rather than a
 * boxed error message inside the theme's default content column.
 * ------------------------------------------------------------------------- */
.kca-404 {
    position: relative;
    overflow: hidden;
    background: #F7F9FB;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 88px 24px;
    text-align: center;
}
.kca-404::before,
.kca-404::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.kca-404::before { width: 520px; height: 520px; background: #009cbd; opacity: .16; right: -140px; top: -100px; }
.kca-404::after { width: 420px; height: 420px; background: #3a913f; opacity: .13; left: -160px; bottom: -200px; }
.kca-404-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.kca-404-eyebrow {
    font: 700 14px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #009cbd;
    margin-bottom: 14px;
}
.kca-404-code {
    font: 800 clamp(96px, 16vw, 180px)/0.9 'Barlow Condensed', sans-serif;
    letter-spacing: .02em;
    color: #1a2e4a;
    margin: 0 0 8px;
}
.kca-404 h1 {
    font: 800 clamp(28px, 4vw, 40px)/1.05 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #3a913f;
    margin: 0 0 20px;
}
.kca-404-lead { font-size: 18px; line-height: 1.55; color: #3A4A54; max-width: 520px; margin: 0 auto 32px; }
.kca-404-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; }
.kca-404-actions a {
    display: inline-block;
    font: 700 15px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 14px 24px;
    border-radius: 10px;
}
.kca-404-primary { background: #3a913f; color: #fff !important; }
.kca-404-secondary { background: #fff; color: #1a2e4a !important; border: 2px solid #1a2e4a; }
.kca-404-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    font: 700 14px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.kca-404-links a { color: #1a2e4a !important; }
/* Usability finding U8 — search field added back to the custom 404 panel. */
.kca-404-search { max-width: 420px; margin: 0 auto 44px; }
.kca-404-search-label {
    font: 700 14px/1 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1a2e4a;
    margin: 0 0 10px;
}
.kca-404-search .search-form { position: relative; display: flex; gap: 8px; }
/* The <label> wrapping the input is the actual flex child here (the input
   is one level deeper), so flex:1 has to go on the label itself, not just
   the input inside it — putting it only on .search-field left the label
   sized to its own content, leaving a stray gap before the submit button. */
.kca-404-search .search-form > label { flex: 1; min-width: 0; }
.kca-404-search .search-field {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #d7dee3;
    border-radius: 10px;
    font-size: 15px;
    box-sizing: border-box;
}
.kca-404-search .search-field:focus { outline: none; border-color: #009cbd; }
/* Confirmed live: this theme's default .search-submit is a small, deliberately
   near-invisible square input (fixed 50px width, transparent text) — Kadence's
   own pattern relies entirely on the .kadence-search-icon-wrap SVG overlaid on
   top of it for the visible affordance, everywhere else this component is
   used on the site (confirmed: header search works exactly this way already).
   First attempt tried to reskin the raw <input type=submit> into a labeled
   teal button and hid the icon overlay — the input's own width/padding are
   pinned by a more specific theme rule than a two-class selector can beat, so
   the button rendered with clipped, invisible text no matter how much CSS was
   thrown at it. Simpler and consistent with the rest of the site: keep the
   theme's own icon button, just recolor it to the brand teal via currentColor
   rather than fighting the pattern. */
.kca-404-search .search-submit { cursor: pointer; }
.kca-404-search .kadence-search-icon-wrap { color: #009cbd; }

/* ---------------------------------------------------------------------------
 * Page title banner — every interior page opens with the same block (teal
 * #009cbd background, centered white H1, as the first block in the page).
 * Round its corners and give the heading the same Barlow Condensed display
 * treatment as the Home hero, without having to touch every page's content.
 * ------------------------------------------------------------------------- */
.entry-content > .wp-block-group.has-background:first-child {
    border-radius: 20px;
}
.entry-content > .wp-block-group.has-background:first-child h1:not(.kca-display) {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
    line-height: 1.05;
    font-size: clamp(28px, 3.6vw, 40px);
}

.kca-eyebrow {
    display: block;
    font: 700 13px/1 'Barlow', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.kca-display {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
    /* Forces its own compositing layer. Without this, a known Chrome text-
       rasterization bug can "ghost"/double-paint condensed-uppercase headings
       that sit directly after a CSS Grid of rounded, shadowed, hover-
       transitioning cards (reproduced on Mission & Vision's "Strategic
       Goals" heading, confirmed independent of any screenshot tooling). */
    transform: translateZ(0);
    backface-visibility: hidden;
}
h1.kca-display { font-size: clamp(38px, 5.2vw, 64px); }
h2.kca-display { font-size: clamp(28px, 3.4vw, 40px); }
h3.kca-display { font-size: clamp(20px, 2.2vw, 26px); }

/* ---------------------------------------------------------------------------
 * Section headings (Pre-Launch Screen finding SEO2) — the H2 that now sits
 * between each page's H1 (in the page's own hero markup) and the H3 card
 * titles a shortcode renders (Events, Committees, Districts, News, Courses).
 * var(--kca-navy) resolves against whichever page embeds this shortcode: all
 * five target pages define that custom property in their own <style> block,
 * so this picks up each page's navy without needing page-specific overrides;
 * the fallback matches the strategic-plan page's existing h2.kca-display navy.
 * ------------------------------------------------------------------------- */
.kca-section-heading { color: var(--kca-navy, #1a2e4a); margin: 0 0 24px; }

/* ---------------------------------------------------------------------------
 * Icon badges — self-hosted Lucide SVGs via kca_site_icon(). Color/tint are
 * set per-instance via inline style (background + color), since each badge
 * uses a different brand color depending on context.
 * ------------------------------------------------------------------------- */
.kca-icon-badge {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.kca-icon-badge-sm {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
}
.kca-icon-ring {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #fff;
    border-width: 2px;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

/* ---------------------------------------------------------------------------
 * Numbered connector row — a row of numbered circles/icon cards linked by a
 * thin horizontal line behind them (Mission & Vision's Core Values, Why
 * Join's membership-benefit row).
 * ------------------------------------------------------------------------- */
.kca-connector {
    position: relative;
}
.kca-connector::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e2e6ea;
    z-index: 0;
}
.kca-connector-item {
    position: relative;
    z-index: 1;
}
.kca-num-circle {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #1a2e4a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 18px/1 'Barlow Condensed', sans-serif;
    margin: 0 auto 20px;
}

/* ---------------------------------------------------------------------------
 * Testimonial band — solid-color section with translucent quote cards.
 * ------------------------------------------------------------------------- */
.kca-testimonial-band {
    background: #3a913f;
    padding: 64px 40px;
    border-radius: 20px;
}
.kca-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    contain: paint;
}
.kca-testimonial-card {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 28px;
}
.kca-testimonial-card p {
    font: 400 16px/1.65 'Barlow', sans-serif;
    color: #fff;
    font-style: italic;
    margin: 0 0 20px;
}
.kca-testimonial-card .kca-t-name {
    font: 700 14px/1.3 'Barlow', sans-serif;
    color: #fff;
}
.kca-testimonial-card .kca-t-city {
    font: 400 13px/1.3 'Barlow', sans-serif;
    color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------------
 * "Most Popular" pricing badge — pill that overlaps the card's top edge.
 * ------------------------------------------------------------------------- */
.kca-pricing-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #1a2e4a;
    color: #fff;
    font: 700 11px/1 'Barlow', sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(26, 46, 74, 0.35);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Responsive grid utilities shared by the icon-badge/connector-row sections.
 * ------------------------------------------------------------------------- */
.kca-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; contain: paint; }
.kca-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; contain: paint; }
.kca-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; contain: paint; }

@media (max-width: 900px) {
    .kca-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .kca-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 782px) {
    .kca-connector::before { display: none; }
    .kca-testimonial-grid { grid-template-columns: 1fr; }
    .kca-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .kca-grid-4, .kca-grid-5 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * Full-bleed landing pages (Why Join KCA's .kca-join-lp block) break their
 * own section backgrounds out to the viewport edge, but the theme still
 * wraps every page's content in a white "content card" (article.content-bg)
 * with 32px top/bottom padding on .entry-content-wrap. Since that card is
 * narrower than the full-bleed content, its padding shows as a stray white
 * bar above and below the page. Drop the card chrome only on pages that
 * contain a full-bleed block, so it blends into the surrounding page
 * background instead.
 * ------------------------------------------------------------------------- */
article.content-bg:has(.kca-join-lp) {
    background: transparent;
}
article.content-bg:has(.kca-join-lp) .entry-content-wrap {
    padding-top: 0;
    padding-bottom: 0;
}
.content-area:has(.kca-join-lp) {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Data-driven page card styles, moved from kca-site-renderers.php's
 * kca_site_render_styles() (Pre-Launch Screen CSP finding S2, 2026-07-14).
 * ------------------------------------------------------------------------- */
.kca-block { margin: 0 auto 2.5em; max-width: 1080px; }
.kca-block a { text-decoration: none; }
.kca-empty { color: #666; font-style: italic; padding: 1em 0; }

/* Board of Directors — Step 7b Claude Design pass: Barlow Condensed section
   headers with a fade-out gradient rule, icon badges (star = officers, navy;
   map-pin = directors, green). Fields are unchanged, DB-driven. */
.kca-board-group { margin-bottom: 2.5em; }
.kca-board-group > h2 { font: 800 30px/1 'Barlow Condensed', sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #1a2e4a; margin: 0 0 24px; display: flex; align-items: baseline; gap: 16px; }
.kca-board-group > h2::after { content: ''; flex: 1; height: 3px; }
.kca-board-group.officers > h2::after { background: linear-gradient(90deg, #009cbd, #e2e6ea); }
.kca-board-group.directors > h2::after { background: linear-gradient(90deg, #3a913f, #e2e6ea); }
.kca-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; contain: paint; }
.kca-board-card { background: #f4f4f4; border-top: 4px solid #1a2e4a; border-radius: 14px; padding: 24px 22px; box-shadow: 0 2px 10px -4px rgba(26,46,74,.12); transition: transform .15s ease, box-shadow .15s ease; }
.kca-board-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-board-group.directors .kca-board-card { border-top-color: #3a913f; }
.kca-board-icon { background: rgba(26,46,74,.1); }
.kca-board-icon svg { color: #1a2e4a; }
.kca-board-group.directors .kca-board-icon { background: rgba(58,145,63,.1); }
.kca-board-group.directors .kca-board-icon svg { color: #3a913f; }
.kca-board-card .kca-name { font: 700 17px/1.25 'Barlow', sans-serif; color: #1a2e4a; display: block; }
.kca-board-card .kca-title { font: 700 13px/1.4 'Barlow', sans-serif; color: #3a913f; text-transform: uppercase; letter-spacing: .03em; margin: 2px 0 10px; }
.kca-board-group.directors .kca-board-card .kca-title { color: #009cbd; }
.kca-board-card .kca-meta { display: block; font: 400 14px/1.5 'Barlow', sans-serif; color: #5b6773; margin-top: 3px; }
.kca-board-card .kca-meta a { color: #009cbd; }

/* Corporate members / partners */
.kca-corp-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.kca-corp-cell { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e3e6ea; border-radius: 6px; padding: 22px; min-height: 70px; flex: 0 1 calc(50% - 10px); transition: transform .15s ease, box-shadow .15s ease; }
.kca-corp-cell:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-corp-cell img { max-width: 100%; max-height: 45px; height: auto; width: auto; }
@media (min-width: 700px) { .kca-corp-cell { flex: 0 1 calc(33.333% - 14px); } }

/* Featured sponsor banner */
.kca-sponsor { margin: 0 auto 1.5em; max-width: 1080px; text-align: center; }
.kca-sponsor a { display: block; }
.kca-sponsor img { display: block; max-width: 480px; width: 100%; height: auto; margin: 0 auto; border-radius: 8px; }
.kca-sponsor .kca-sponsor-label { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: .75em; color: #666; margin-bottom: 6px; }

/* Events */
.kca-event-hero { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 1.5em; }
.kca-event-hero img { width: 100%; height: auto; display: block; }
.kca-event-hero .kca-event-hero-body { padding: 16px 20px; background: #1a2e4a; color: #fff; }
/* Pre-Launch Screen finding U5 — explains why this event repeats below in the full grid. */
.kca-event-hero-label { display: block; font: 700 11px/1 'Barlow', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #3a913f; margin-bottom: 8px; }
.kca-event-hero .kca-event-hero-body h3 { color: #fff; margin: 0 0 6px; }
.kca-event-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; padding: 20px 22px; margin-bottom: 18px; transition: transform .15s ease, box-shadow .15s ease; }
.kca-event-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-event-card h3 { color: #1a2e4a; margin: 0 0 6px; }
.kca-event-line { color: #333; margin: 3px 0; }
.kca-event-line strong { color: #1a2e4a; }
.kca-ce-pill { display: inline-block; background: #3a913f; color: #fff; font-size: .78em; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin: 6px 0; text-transform: uppercase; letter-spacing: .04em; }
.kca-price-table { border-collapse: collapse; margin: 12px 0; width: 100%; max-width: 420px; }
.kca-price-table td { border: 1px solid #e3e6ea; padding: 6px 12px; font-size: .95em; }
.kca-price-table td:first-child { color: #1a2e4a; font-weight: 600; }
.kca-price-table td:last-child { text-align: right; }
.kca-btn { display: inline-block; background: #009cbd; color: #fff !important; font-weight: 600; padding: 10px 24px; border-radius: 999px; margin-top: 10px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.kca-btn:hover { background: #3a913f; transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(26,46,74,.35); }
.kca-btn-alert { background: #c0392b; }
.kca-btn-alert:hover { background: #a93226; }

/* Gov affairs feed + action center */
.kca-cat-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 1.5em; }
.kca-cat-tab { cursor: pointer; border-width: 2px; border-style: solid; border-radius: 999px; padding: 10px 22px; font: 700 13px/1 'Barlow', sans-serif; letter-spacing: .04em; text-transform: uppercase; transition: background .14s ease, color .14s ease, border-color .14s ease; border-color: #e2e6ea; background: #fff; color: #1a2e4a; }
.kca-cat-tab.is-active { border-color: #009cbd; background: #009cbd; color: #fff; }
.kca-gov-card { background: #fff; border: 1px solid #e2e6ea; border-radius: 14px; padding: 28px 30px; margin-bottom: 20px; display: flex; gap: 22px; transition: transform .15s ease, box-shadow .15s ease; }
.kca-gov-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-gov-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.kca-gov-icon.cat-legislative { background: rgba(0,156,189,.12); }
.kca-gov-icon.cat-legislative svg { color: #009cbd; }
.kca-gov-icon.cat-ksbha { background: rgba(58,145,63,.12); }
.kca-gov-icon.cat-ksbha svg { color: #3a913f; }
.kca-gov-icon.cat-hcsf { background: rgba(26,46,74,.1); }
.kca-gov-icon.cat-hcsf svg { color: #1a2e4a; }
.kca-gov-icon.cat-regulatory { background: rgba(0,156,189,.12); }
.kca-gov-icon.cat-regulatory svg { color: #009cbd; }
.kca-gov-list { contain: paint; }
.kca-gov-card h3 { font: 700 21px/1.25 'Barlow', sans-serif; color: #1a2e4a; margin: 0 0 8px; }
.kca-gov-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.kca-gov-meta .kca-gov-date { font: 400 13px/1 'Barlow', sans-serif; color: #8a949e; }
.kca-gov-badge { display: inline-block; font: 700 11px/1 'Barlow', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.cat-legislative .kca-gov-badge, .kca-gov-badge.cat-legislative { background: rgba(0,156,189,.12); color: #009cbd; }
.kca-gov-badge.cat-ksbha { background: rgba(58,145,63,.12); color: #3a913f; }
.kca-gov-badge.cat-hcsf { background: rgba(26,46,74,.1); color: #1a2e4a; }
.kca-gov-badge.cat-regulatory { background: rgba(0,156,189,.12); color: #009cbd; }
.kca-gov-body { font: 400 15px/1.6 'Barlow', sans-serif; color: #5b6773; }
/* Collapsed full text on gov-affairs cards. Native <details>, no JS — same
   approach as the FAQ accordion. The chevron is a rotated CSS box so there is
   no extra icon request. */
.kca-gov-more { margin-top: 2px; }
.kca-gov-more > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font: 700 12px/1 'Barlow', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #009cbd; padding: 8px 0; }
.kca-gov-more > summary::-webkit-details-marker { display: none; }
.kca-gov-more > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.kca-gov-more[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.kca-gov-more > summary:hover { color: #1a2e4a; }
.kca-gov-more > summary:focus-visible { outline: 2px solid #009cbd; outline-offset: 3px; border-radius: 3px; }
.kca-gov-more .kca-gov-body { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .kca-gov-more > summary::after { transition: none; } }
/* The card sets display:flex, which beats the UA's [hidden]{display:none}.
   Without this rule the reveal script would hide nothing at all. */
.kca-gov-card[hidden] { display: none; }
.kca-gov-count { font: 400 13px/1 'Barlow', sans-serif; color: #8a949e; margin: 4px 0 12px; }
.kca-gov-more-btn { display: block; width: 100%; background: #fff; border: 1px solid #e2e6ea; border-radius: 12px; padding: 14px 20px; cursor: pointer; font: 700 13px/1 'Barlow', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: #009cbd; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.kca-gov-more-btn:hover { background: #f7fafb; border-color: #009cbd; color: #1a2e4a; }
.kca-gov-more-btn:focus-visible { outline: 2px solid #009cbd; outline-offset: 2px; }
.kca-gov-card:focus { outline: 2px solid #009cbd; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .kca-gov-more-btn { transition: none; } }
.kca-alert-card { background: #fff; border: 1px solid #f0c6c0; border-left: 5px solid #c0392b; border-radius: 6px; padding: 18px 20px; margin-bottom: 16px; transition: transform .15s ease, box-shadow .15s ease; }
.kca-alert-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-alert-badge { display: inline-block; background: #c0392b; color: #fff; font-size: .74em; font-weight: 700; padding: 3px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.kca-alert-card h3 { color: #1a2e4a; margin: 0 0 6px; }
.kca-ac-legfind { background: #f4f4f4; border-radius: 10px; padding: 22px 24px; margin-bottom: 28px; }
.kca-ac-legfind h3 { color: #1a2e4a; margin: 0 0 10px; }
.kca-ac-legfind-form { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
/* Pre-Launch Screen finding U4 — flex-basis 100% pushes the label onto its own line, input+button wrap below it. */
.kca-ac-legfind-form label { flex-basis: 100%; font-weight: 600; color: #1a2e4a; margin-bottom: 2px; }
.kca-ac-legfind-form input[type=text] { flex: 1; min-width: 240px; padding: 14px 22px; border: 1px solid #e2e6ea; border-radius: 999px; font: 400 15px 'Barlow', sans-serif; color: #1a2e4a; }
.kca-ac-legfind-form input[type=text]:focus { outline: none; border-color: #009cbd; }
.kca-ac-legfind-status { color: #666; font-style: italic; margin: 10px 0 0; }
.kca-ac-legfind-error { background: #fdecea; color: #c0392b; border: 1px solid #f0c6c0; border-radius: 6px; padding: 12px 16px; margin: 10px 0 0; }
/* Shared by both legfind forms (Governmental Affairs and Action Center) — Pre-Launch Screen finding S4. */
.kca-legfind-privacy { color: #6b7c86; font-size: .85em; margin: 10px 0 0; }
.kca-alert-contact { margin-top: 14px; }
.kca-alert-contact-hint { color: #8a949e; font-size: .88em; font-style: italic; margin: 0; }
.kca-alert-contact-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.kca-alert-contact-btns .kca-btn { margin-top: 0; }

/* News cards */
.kca-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.kca-news-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.kca-news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-news-card .kca-news-thumb { display: block; aspect-ratio: 16 / 9; background: #eef1f4 center/contain no-repeat; }
.kca-news-card .kca-news-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.kca-news-card h3 { font-size: 1.08em; margin: 0 0 8px; line-height: 1.3; }
.kca-news-card h3 a { color: #1a2e4a; }
.kca-news-card h3 a:hover { color: #009cbd; }
/* Whole-card link — the title's <a> is stretched over the card so a click
 * anywhere (image, excerpt, "Read more") follows it, without adding a second
 * link or any JS. Needs position:relative on the card and a stacking context
 * on the badge/date so they stay above the overlay and keep their own hover.
 * The focus ring is moved onto the card because the <a> itself is now a
 * zero-area target visually — without this, keyboard focus would ring only
 * the title text while the click target is the whole card. */
.kca-news-card { position: relative; }
.kca-news-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kca-news-card:focus-within { outline: 2px solid #009cbd; outline-offset: 2px; }
.kca-news-card h3 a:focus { outline: none; }
.kca-news-card:hover .kca-news-more { text-decoration: underline; }
.kca-news-date { font-size: .82em; color: #777; margin-bottom: 8px; }
.kca-members-badge { display: inline-block; background: #3a913f; color: #fff; font-size: .68em; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; margin-left: 8px; vertical-align: middle; }
.kca-news-excerpt { color: #444; font-size: .93em; flex: 1; }
.kca-news-more { margin-top: 12px; color: #009cbd; font-weight: 600; }
.kca-news-search { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1em; }
.kca-news-search input[type=text] { flex: 1; min-width: 240px; padding: 14px 22px; border: 1px solid #e2e6ea; border-radius: 999px; font: 400 15px 'Barlow', sans-serif; color: #1a2e4a; }
.kca-news-search input[type=text]:focus { outline: none; border-color: #009cbd; }
.kca-news-search-status { color: #666; font-style: italic; margin: 0 0 1.2em; }
.kca-news-search-status a { color: #009cbd; }
/* paginate_links() (type=list) wraps the page links in <ul class="page-numbers"><li>...
 * — note the "page-numbers" class lands on the <ul> itself as well as each
 * link/span inside it, so the <ul>'s own rule has to explicitly cancel the
 * border/radius the shared .page-numbers rule below gives every button, or
 * the whole row gets boxed in a second time. The flex/gap/centering also has
 * to live on that <ul>, not the outer <nav>, or the <li>s stay block-stacked
 * with default browser bullets and indent. */
.kca-pagination { margin-top: 2em; }
.kca-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; border: none; border-radius: 0; }
.kca-pagination .page-numbers { padding: 8px 14px; border: 1px solid #e3e6ea; border-radius: 6px; color: #009cbd; }
.kca-pagination .page-numbers.current { background: #009cbd; color: #fff; border-color: #009cbd; }
.kca-pagination .page-numbers.dots { border-color: transparent; padding-left: 4px; padding-right: 4px; }

/* Committees */
.kca-committee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.kca-committee-card { background: #fff; border: 1px solid #e3e6ea; border-top: 4px solid #3a913f; border-radius: 6px; padding: 18px 20px; transition: transform .15s ease, box-shadow .15s ease; }
.kca-committee-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-committee-card h3 { color: #1a2e4a; margin: 0 0 6px; }
.kca-committee-desc { color: #444; font-size: .92em; margin-bottom: 10px; }
.kca-committee-members { list-style: none; margin: 0; padding: 0; }
.kca-committee-members li { padding: 4px 0; border-top: 1px solid #f0f2f4; color: #333; }
.kca-committee-members li:first-child { border-top: none; }
.kca-committee-role { color: #3a913f; font-weight: 600; font-size: .85em; margin-left: 6px; }

/* Staff Contacts */
.kca-staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; justify-content: center; }
.kca-staff-card { background: #fff; border: 1px solid #e3e6ea; border-top: 4px solid #1a2e4a; border-radius: 6px; padding: 18px 20px; transition: transform .15s ease, box-shadow .15s ease; }
.kca-staff-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-staff-card h3 { color: #1a2e4a; margin: 0 0 8px; }
.kca-staff-card p { color: #444; margin: 0; }
.kca-staff-card a { color: #009cbd; }

/* Classifieds */
.kca-classified-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.kca-classified-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.kca-classified-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-classified-thumb { display: block; aspect-ratio: 16 / 9; background: #eef1f4 center/contain no-repeat; }
.kca-classified-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
@media (min-width: 640px) {
	.kca-classified-card { flex-direction: row; }
	.kca-classified-card .kca-classified-thumb { flex: 0 0 260px; aspect-ratio: auto; }
}
.kca-classified-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.kca-classified-tag { display: inline-block; background: #eef1f4; color: #1a2e4a; font-size: .72em; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.kca-classified-card h3 { font-size: 1.08em; margin: 0 0 2px; line-height: 1.3; color: #1a2e4a; }
.kca-classified-date { font-size: .82em; color: #777; margin-bottom: 6px; }
.kca-classified-text { color: #444; font-size: .93em; flex: 1; }
.kca-classified-text p { margin: 0 0 10px; }
.kca-classified-contact { font-size: .9em; color: #333; margin-top: 8px; }
.kca-classified-contact strong { color: #1a2e4a; }
/* Classifieds contact email (kca_site_linkify_emails). The attribute selector
 * is load-bearing, not decoration: the Classifieds page carries its own inline
 * <style> with `.kca-join-lp a { color: ...; text-decoration: none }`, which is
 * the same specificity as `.kca-classified-contact a` and loads later, so it
 * would win the tie and strip the underline. Matching on [href^="mailto:"]
 * adds the weight needed for the link to actually look like a link. */
.kca-classified-contact a[href^="mailto:"] { color: #009cbd; text-decoration: underline; }
.kca-classified-contact a[href^="mailto:"]:hover { color: #3a913f; }
.kca-classified-card .kca-btn { align-self: flex-start; margin-top: 12px; }

/* Course Catalog */
.kca-course-search { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1em; }
.kca-course-search input[type=text] { flex: 1; min-width: 240px; padding: 14px 22px; border: 1px solid #e2e6ea; border-radius: 999px; font: 400 15px 'Barlow', sans-serif; color: #1a2e4a; }
.kca-course-search input[type=text]:focus { outline: none; border-color: #009cbd; }
.kca-course-search-status { color: #666; font-style: italic; margin: 0 0 1.2em; }
.kca-course-search-status a { color: #009cbd; }
.kca-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.kca-course-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.kca-course-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-course-thumb { display: block; aspect-ratio: 16 / 9; background: #eef1f4 center/contain no-repeat; }
.kca-course-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.kca-course-type { display: inline-block; background: #eef1f4; color: #1a2e4a; font-size: .72em; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; align-self: flex-start; margin-bottom: 4px; }
.kca-course-card h3 { font-size: 1.08em; margin: 0 0 2px; line-height: 1.3; color: #1a2e4a; }
.kca-course-line { font-size: .88em; color: #555; }
.kca-course-desc { color: #444; font-size: .93em; flex: 1; margin: 6px 0; }
.kca-course-price { font-weight: 700; color: #1a2e4a; margin-top: 6px; }
.kca-course-card .kca-btn { align-self: flex-start; margin-top: 12px; }

/* Districts */
.kca-district-map-link { display: block; text-align: center; margin: 1.5em 0; }
.kca-district-map-intro { font-size: .92em; color: #555; margin: 0 0 14px; }
.kca-district-map-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 20px; align-items: start; margin-bottom: 28px; }
.kca-district-map-card { background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; padding: 16px; box-sizing: border-box; }
.kca-district-map-card svg { width: 100%; height: auto; display: block; overflow: visible; }
.kca-district-map-hoverbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; min-height: 20px; flex-wrap: wrap; }
.kca-district-map-hoverinfo { font-weight: 700; font-size: .95em; color: #1a2e4a; }
.kca-district-map-hint { font-size: .82em; color: #6b7c86; }
.kca-legend-heading { font-weight: 700; font-size: .82em; text-transform: uppercase; letter-spacing: .04em; color: #6b7c86; padding: 0 4px 6px; }
.kca-district-map-legend { display: flex; flex-direction: column; gap: 8px; }
.kca-legend-row { padding: 10px 12px; border-radius: 8px; border: 1px solid #e3e6ea; background: #fff; cursor: pointer; transition: background .12s ease, box-shadow .12s ease; }
.kca-legend-row:hover { background: #f4f7f8; }
.kca-legend-row-top { display: flex; align-items: center; gap: 10px; }
.kca-legend-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; flex-shrink: 0; }
.kca-legend-label { font-weight: 700; font-size: .95em; color: #1a2e4a; }
.kca-legend-count { margin-left: auto; font-size: .82em; color: #6b7c86; }
.kca-legend-chips { margin: 10px 0 2px; padding-top: 10px; border-top: 1px solid #eef1f4; display: none; flex-wrap: wrap; gap: 6px; }
.kca-legend-chip { font-size: .8em; color: #3a4a54; background: #f7f9fb; border: 1px solid #eef1f4; border-radius: 6px; padding: 3px 8px; }
@media (max-width: 720px) { .kca-district-map-wrap { grid-template-columns: 1fr; } }
.kca-district-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.kca-district-card { background: #fff; border: 1px solid #e3e6ea; border-top: 4px solid #009cbd; border-radius: 6px; padding: 18px 20px; transition: transform .15s ease, box-shadow .15s ease; }
.kca-district-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-district-card h3 { color: #1a2e4a; margin: 0 0 10px; }
.kca-district-officer { padding: 6px 0; border-top: 1px solid #f0f2f4; }
.kca-district-officer:first-child { border-top: none; }
.kca-district-officer .kca-role { display: block; font-weight: 700; color: #009cbd; font-size: .82em; text-transform: uppercase; letter-spacing: .03em; }
.kca-district-officer .kca-officer-name { font-weight: 600; color: #1a2e4a; }
.kca-district-officer .kca-officer-meta { display: block; font-size: .88em; color: #333; }
.kca-district-officer .kca-officer-meta a { color: #009cbd; }

/* Strategic Plan (Mission & Vision page) — Step 7b Claude Design pass:
   Barlow/Barlow Condensed type scale, icon-ring + connector line on Core
   Values, matching the icon-badge/connector system in kca-site.css. */
.kca-sp-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.kca-sp-mv-card { border-radius: 14px; padding: 32px; color: #fff; box-shadow: 0 2px 10px -4px rgba(26,46,74,.12); transition: transform .15s ease, box-shadow .15s ease; }
.kca-sp-mv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.28); }
.kca-sp-mv-card.mission { background-color: #3a913f; }
.kca-sp-mv-card.vision { background-color: #009cbd; }
.kca-sp-mv-card .kca-sp-label { font: 700 13px/1 'Barlow', sans-serif; color: rgba(255,255,255,.75); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.kca-sp-mv-card h3 { font: 700 24px/1.35 'Barlow', sans-serif; color: #fff; margin: 0; }
.kca-sp-section-header { text-align: center; margin-bottom: 44px; }
.kca-sp-section-header h2 { font: 800 40px/1.05 'Barlow Condensed', sans-serif; letter-spacing: .01em; color: #1a2e4a; text-transform: uppercase; margin: 0 0 8px; }
.kca-sp-subline { font: 700 13px/1 'Barlow', sans-serif; color: #009cbd; text-transform: uppercase; letter-spacing: .16em; }
.kca-sp-divider { display: none; }
.kca-sp-values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 48px; text-align: center; contain: paint; }
.kca-sp-value-icon-ring { border-color: #3a913f; }
.kca-sp-values-grid .kca-sp-value-icon-wrap:nth-child(even) .kca-sp-value-icon-ring { border-color: #009cbd; }
.kca-sp-value-icon-ring i, .kca-sp-value-icon-ring svg { color: #3a913f; }
.kca-sp-values-grid .kca-sp-value-icon-wrap:nth-child(even) .kca-sp-value-icon-ring svg { color: #009cbd; }
.kca-sp-value-card { background: #f4f4f4; border-radius: 14px; padding: 24px 18px; border-top: 4px solid #3a913f; text-align: left; height: 100%; box-sizing: border-box; transition: transform .15s ease, box-shadow .15s ease; }
.kca-sp-value-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.18); }
.kca-sp-value-icon-wrap:nth-child(even) .kca-sp-value-card { border-top-color: #009cbd; }
.kca-sp-value-num { font: 700 12px/1 'Barlow Condensed', sans-serif; color: #009cbd; letter-spacing: .1em; margin-bottom: 10px; }
.kca-sp-value-icon-wrap:nth-child(even) .kca-sp-value-num { color: #3a913f; }
.kca-sp-value-card h4 { font: 700 17px/1.25 'Barlow', sans-serif; color: #1a2e4a; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 8px; }
.kca-sp-value-card .kca-sp-tagline { font: 700 13.5px/1.4 'Barlow', sans-serif; color: #1a2e4a; margin-bottom: 8px; }
.kca-sp-value-card p { font: 400 13.5px/1.55 'Barlow', sans-serif; color: #5b6773; margin: 0; }
.kca-sp-goal { border-radius: 14px; margin-bottom: 14px; border: 1px solid #e2e6ea; display: flex; align-items: center; gap: 24px; padding: 22px 28px; background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.kca-sp-goal:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.18); }
.kca-sp-goal-num { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; font: 800 22px/1 'Barlow Condensed', sans-serif; color: #f4f4f4; background: #1a2e4a; display: flex; align-items: center; justify-content: center; }
.kca-sp-goal-body h3 { font: 700 17px/1.2 'Barlow', sans-serif; color: #1a2e4a; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 4px; }
.kca-sp-goal-body p { font: 400 15px/1.5 'Barlow', sans-serif; color: #5b6773; margin: 0; }
@media (max-width: 900px) {
  .kca-sp-values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .kca-sp-mv-grid { grid-template-columns: 1fr; }
  .kca-sp-values-grid { grid-template-columns: 1fr; }
  .kca-sp-goal { flex-direction: column; align-items: flex-start; }
}

/* Find Your Legislator */
.kca-legfind-form { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 1.2em; }
/* Pre-Launch Screen finding U4 — flex-basis 100% pushes the label onto its own line, input+button wrap below it. */
.kca-legfind-form label { flex-basis: 100%; font-weight: 600; color: #1a2e4a; margin-bottom: 2px; }
.kca-legfind-form input[type=text] { flex: 1; min-width: 240px; padding: 14px 22px; border: 1px solid #e2e6ea; border-radius: 999px; font: 400 15px 'Barlow', sans-serif; color: #1a2e4a; }
.kca-legfind-form input[type=text]:focus { outline: none; border-color: #009cbd; }
.kca-legfind-status { color: #666; font-style: italic; margin-bottom: 1em; }
.kca-legfind-error { background: #fdecea; color: #c0392b; border: 1px solid #f0c6c0; border-radius: 6px; padding: 12px 16px; margin-bottom: 1em; }
.kca-legfind-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.kca-legfind-card { background: #fff; border: 1px solid #e3e6ea; border-top: 4px solid #009cbd; border-radius: 6px; padding: 18px 20px; display: flex; gap: 14px; transition: transform .15s ease, box-shadow .15s ease; }
.kca-legfind-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -10px rgba(26,46,74,.22); }
.kca-legfind-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.kca-legfind-card h3 { color: #1a2e4a; margin: 0 0 2px; font-size: 1.05em; }
.kca-legfind-chamber { color: #3a913f; font-weight: 600; font-size: .9em; margin-bottom: 6px; display: block; }
.kca-legfind-meta { display: block; font-size: .9em; color: #333; margin-top: 2px; }
.kca-legfind-meta a { color: #009cbd; }

/* ---------------------------------------------------------------------------
 * Share buttons (single post) and Contact form, moved from kca-site.php's
 * own inline <style> printers (Pre-Launch Screen CSP finding S2, 2026-07-14) —
 * both were fixed, non-per-request CSS, same treatment as the renderer styles
 * above.
 * ------------------------------------------------------------------------- */
.kca-share-buttons { margin: 1.5em 0; display: flex; align-items: center; gap: 0.75em; flex-wrap: wrap; }
.kca-share-label { font-weight: 600; color: #1a2e4a; }
.kca-share-link { padding: 0.4em 0.9em; border-radius: 4px; background: #009cbd; color: #fff; text-decoration: none; font-size: 0.9em; }
.kca-share-link:hover { background: #3a913f; color: #fff; }

.kca-contact-form-wrap { max-width: 640px; }
.kca-contact-hp { position: absolute; left: -9999px; top: -9999px; }
.kca-form-row { margin-bottom: 16px; }
.kca-form-row label { display: block; font-weight: 600; color: #1a2e4a; margin-bottom: 6px; }
.kca-required { color: #c0392b; }
.kca-contact-form input[type=text], .kca-contact-form input[type=email], .kca-contact-form input[type=tel], .kca-contact-form textarea {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d8dde5; border-radius: 6px; font-size: 1em; font-family: inherit;
}
.kca-contact-form input:focus, .kca-contact-form textarea:focus { outline: none; border-color: #009cbd; }
.kca-form-message { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-weight: 600; }
.kca-form-success { background: #eaf4eb; color: #2d7032; border: 1px solid #a8d0aa; }
.kca-form-error { background: #fdecea; color: #c0392b; border: 1px solid #f0c6c0; }

/* ---------------------------------------------------------------------------
 * Header nav — CARE pillar grouping (Travis, 2026-07-21 visual QA). The four
 * mission-pillar items (Community, Advocacy, Resources, Education) sit inside
 * one tinted band so they read as a set — the CARE acronym — while Home and
 * News stay plain links outside it. No menu-item or DB change: those four are
 * the only top-level items with a dropdown, so `li.menu-item-has-children` is
 * an exact match for the set, and the run's rounded ends are found
 * structurally (first item after a childless one, last item before one)
 * rather than by nth-child, so adding a pillar sub-page can't break it.
 * Label text is untouched — same case, same navy — so the accessible name and
 * the existing hover underline behave exactly as before.
 * Desktop only, per Travis: below Kadence's 1024px toggle the nav collapses to
 * #mobile-menu, which this doesn't touch.
 * ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    #primary-menu > li.menu-item-has-children > a {
        height: auto;
        padding-top: 9px;
        padding-bottom: 9px;
        background: #eef6f9;
    }
    #primary-menu > li:not(.menu-item-has-children) + li.menu-item-has-children > a {
        border-top-left-radius: 999px;
        border-bottom-left-radius: 999px;
        padding-left: 20px;
    }
    #primary-menu > li.menu-item-has-children:has(+ li:not(.menu-item-has-children)) > a {
        border-top-right-radius: 999px;
        border-bottom-right-radius: 999px;
        padding-right: 20px;
    }
}

/* ---------------------------------------------------------------------------
 * Partner band — a single linked partner image (plus optional title) sitting
 * directly under a page hero. Added 2026-07-21 for Statusfi on Federal &
 * State Regulations and Gold Star Medical Billing on Insurance Columns
 * (Travis, visual QA). Lives here rather than in each page's inline <style>
 * because two pages share it — the .kca-join-lp pages' own blocks are
 * per-page by design, and duplicating this in both would guarantee drift.
 * Hover lift matches the .ben / .step / .faq-item cards on those same pages.
 * ------------------------------------------------------------------------- */
.kca-join-lp .kca-partner-band { background: #fff; padding: 30px 0 0; }
.kca-join-lp .kca-partner-card {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    max-width: 520px; margin: 0 auto; padding: 24px 26px; text-align: center;
    border: 1px solid #e6edf2; border-radius: 14px; background: #fff;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.kca-join-lp .kca-partner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 39, 85, .08), 0 1px 2px rgba(16, 39, 85, .04);
}
.kca-join-lp .kca-partner-card img { width: 100%; max-width: 360px; height: auto; }
.kca-join-lp .kca-partner-title {
    font: 700 17px/1.2 'Barlow Condensed', sans-serif;
    text-transform: uppercase; letter-spacing: .04em; color: #1B3B7A;
}

/* ---------------------------------------------------------------------------
 * Governance page — Bylaws / Policies & Procedures accordions, the section
 * filter, and the Board minutes archive. Lives here rather than in the page's
 * inline <style> because three shortcode outputs share it and the page is
 * expected to grow (a third governance document is a new taxonomy term, no
 * new CSS). Visual language deliberately matches the FAQ page's .faq-item —
 * members meet the same interaction on both.
 * ------------------------------------------------------------------------- */
.kca-join-lp .kca-gov-filter { margin: 0 0 18px; }
.kca-join-lp .kca-gov-filter-input {
    width: 100%; padding: 13px 20px; border: 1px solid #E6EDF2; border-radius: 999px;
    font: 400 15px 'Barlow', sans-serif; color: #1E2A32; background: #fff;
}
.kca-join-lp .kca-gov-filter-input:focus { outline: none; border-color: #009CBD; }
.kca-join-lp .kca-gov-filter-status { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: #6B7C86; }

.kca-join-lp .kca-gov-accordion { display: flex; flex-direction: column; gap: 12px; }
.kca-join-lp .kca-gov-item {
    background: #F7F9FB; border: 1px solid #E6EDF2; border-radius: 14px; overflow: hidden;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.kca-join-lp .kca-gov-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 39, 85, .08), 0 1px 2px rgba(16, 39, 85, .04);
}
.kca-join-lp .kca-gov-item[open] { background: #fff; border-color: #009CBD; }
.kca-join-lp .kca-gov-item > summary {
    display: flex; align-items: center; gap: 14px; padding: 16px 22px;
    cursor: pointer; list-style: none; position: relative;
}
.kca-join-lp .kca-gov-item > summary::-webkit-details-marker { display: none; }
.kca-join-lp .kca-gov-heading {
    flex: 1; font: 700 17px/1.25 'Barlow Condensed', sans-serif;
    text-transform: uppercase; letter-spacing: .03em; color: #1B3B7A;
}
.kca-join-lp .kca-gov-item > summary:hover .kca-gov-heading { color: #007D99; }
.kca-join-lp .kca-gov-approved {
    flex-shrink: 0; font: 400 13px 'Barlow', sans-serif; color: #6B7C86; white-space: nowrap;
}
/* Plus/minus built from the summary's own box, same construction as the FAQ
 * page's .faq-toggle — no icon file, no font, and it rotates rather than
 * swapping glyphs so it animates. */
.kca-join-lp .kca-gov-toggle { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.kca-join-lp .kca-gov-toggle::before,
.kca-join-lp .kca-gov-toggle::after {
    content: ""; position: absolute; top: 50%; left: 50%; background: #1B3B7A;
    transform: translate(-50%, -50%); transition: transform 200ms ease, opacity 200ms ease;
}
.kca-join-lp .kca-gov-toggle::before { width: 14px; height: 2px; border-radius: 1px; }
.kca-join-lp .kca-gov-toggle::after { width: 2px; height: 14px; border-radius: 1px; }
.kca-join-lp .kca-gov-item[open] .kca-gov-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.kca-join-lp .kca-gov-body { padding: 0 22px 22px; }
.kca-join-lp .kca-gov-body > *:first-child { margin-top: 0; }
.kca-join-lp .kca-gov-body > *:last-child { margin-bottom: 0; }
.kca-join-lp .kca-gov-meeting-date {
    font: 400 14px 'Barlow', sans-serif; color: #6B7C86;
    margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #E6EDF2;
}
.kca-join-lp .kca-gov-year {
    font: 700 20px 'Barlow Condensed', sans-serif; text-transform: uppercase;
    letter-spacing: .04em; color: #1B3B7A; margin: 32px 0 14px;
}
.kca-join-lp .kca-gov-year:first-child { margin-top: 0; }

@media (max-width: 560px) {
    .kca-join-lp .kca-gov-item > summary { padding: 14px 18px; flex-wrap: wrap; gap: 8px; }
    .kca-join-lp .kca-gov-heading { flex-basis: calc(100% - 36px); font-size: 16px; }
    .kca-join-lp .kca-gov-approved { flex-basis: 100%; }
    .kca-join-lp .kca-gov-body { padding: 0 18px 18px; }
}

/* Proposed amendments — deliberately NOT the calm gray-blue of the adopted
 * sections. Amber left border, amber tint, "PROPOSED" eyebrow: a member who
 * lands mid-page should be able to tell at a glance that this text is not in
 * force. Contrast checked against the tint, not against white. */
.kca-join-lp .kca-gov-proposed-block { margin: 0 0 26px; }
.kca-join-lp .kca-gov-proposed-lead {
    font: 400 15px/1.55 'Barlow', sans-serif; color: #6B4A0B;
    background: #FDF1D6; border-radius: 10px; padding: 14px 18px; margin: 0 0 14px;
}
.kca-join-lp .kca-gov-proposed-lead strong { color: #8A6208; }
.kca-join-lp .kca-gov-proposed {
    border: 1px solid #F0D9A4; border-left: 4px solid #F4B942; border-radius: 0 10px 10px 0;
    background: #FFFCF5; padding: 18px 22px; margin: 0 0 12px;
}
.kca-join-lp .kca-gov-proposed::before {
    content: "Proposed"; display: inline-block; margin-bottom: 8px;
    font: 700 11px 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .08em;
    color: #8A6208; background: #FAE3B0; border-radius: 4px; padding: 3px 9px;
}
.kca-join-lp .kca-gov-proposed-title {
    font: 700 18px/1.25 'Barlow Condensed', sans-serif; text-transform: uppercase;
    letter-spacing: .03em; color: #1B3B7A; margin: 0 0 4px;
}
.kca-join-lp .kca-gov-proposed-vote {
    font: 700 14px 'Barlow', sans-serif; color: #8A6208; margin: 0 0 12px;
}
.kca-join-lp .kca-gov-proposed-body > *:last-child { margin-bottom: 0; }