/**
 * 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.) live in
 * kca-site-renderers.php's own <style> block, not here — keep changes to
 * those in that file so shortcode output stays self-contained.
 */

/* ---------------------------------------------------------------------------
 * 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-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;
}

/* ---------------------------------------------------------------------------
 * 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('https://kca-board-review.pages.dev/wp-content/plugins/kca-site/assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://kca-board-review.pages.dev/wp-content/plugins/kca-site/assets/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://kca-board-review.pages.dev/wp-content/plugins/kca-site/assets/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://kca-board-review.pages.dev/wp-content/plugins/kca-site/assets/fonts/barlow-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://kca-board-review.pages.dev/wp-content/plugins/kca-site/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('https://kca-board-review.pages.dev/wp-content/plugins/kca-site/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('https://kca-board-review.pages.dev/wp-content/plugins/kca-site/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; }

/* ---------------------------------------------------------------------------
 * 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); }

/* ---------------------------------------------------------------------------
 * 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;
}