/*
Theme Name:  US Benefit Guide — Kadence Child
Theme URI:   https://usbenefitguide.com/
Description: Kadence child theme that replicates the exact design of USBenefitGuide.com — brand colours, typography, mega-menu, hero, cards, footer and all UI components.
Author:      US Benefit Guide Team
Template:    kadence
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:     Private
Text Domain: kadence-usbg-child
*/

/* =====================================================================
   0. IMPORT PARENT (Kadence) STYLES
   ===================================================================== */
@import url("../kadence/style.css");

/* =====================================================================
   1. CSS CUSTOM PROPERTIES  (Brand tokens — mirrors original theme)
   ===================================================================== */
:root {
    /* ── Brand colours ── */
    --c-blue:         #008254;
    --c-blue-dark:    #006B46;
    --c-blue-light:   #ECFDF5;
    --c-blue-glow:    rgba(0,130,84,0.15);
    --c-green:        #16A34A;
    --c-green-dark:   #15803D;
    --c-accent:       #A8EA4C;
    --c-red:          #EF4444;
    --c-red-dark:     #DC2626;

    /* ── Neutrals ── */
    --c-navy:         #111827;
    --c-navy-light:   #1F2937;
    --c-text:         #111827;
    --c-text-secondary:#6B7280;
    --c-text-muted:   #6B7280;
    --c-border:       #B7ECDA;
    --c-bg:           #EEFbf7;
    --c-bg-alt:       #EEFbf7;
    --c-bg-dark:      #111827;
    --c-white:        #ffffff;

    /* ── Shadows ── */
    --c-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --c-shadow:    0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
    --c-shadow-lg: 0 4px 6px rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.06);

    /* ── Geometry ── */
    --c-radius:    12px;
    --c-radius-lg: 20px;

    /* ── Typography ── */
    --c-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
              'Segoe UI', Roboto, sans-serif;
    --c-max: 1200px;
    --c-max-narrow: 800px;
    --c-transition: .25s cubic-bezier(.4,0,.2,1);
    --c-header-h: 72px;

    /* ── Map to Kadence palette slots ── */
    --global-palette1: #008254;
    --global-palette2: #006B46;
    --global-palette3: #16A34A;
    --global-palette4: #ECFDF5;
    --global-palette5: #111827;
    --global-palette6: #6B7280;
    --global-palette7: #B7ECDA;
    --global-palette8: #EEFbf7;
}

/* =====================================================================
   2. BASE / RESET OVERRIDES
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--c-font) !important;
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--c-blue); text-decoration: none; transition: color var(--c-transition); }
a:hover { color: var(--c-blue-dark); }
img { max-width: 100%; height: auto; display: block; }

h1,h2,h3,h4,h5,h6 {
    font-family: var(--c-font) !important;
    font-weight: 700;
    line-height: 1.25;
    color: var(--c-text);
    margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem,5vw,3.2rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.6rem,4vw,2.4rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.2rem,2.5vw,1.5rem); }
p  { margin: 0 0 1em; }

/* =====================================================================
   3. LAYOUT HELPERS
   ===================================================================== */
.c-container { max-width: var(--c-max); margin: 0 auto; padding: 0 24px; }
.c-narrow    { max-width: var(--c-max-narrow); margin: 0 auto; }
.c-section   { padding: 80px 0; }
.c-section-alt  { background: #ffffff; }
.c-section-dark { background: var(--c-bg-dark); color: var(--c-white); }
.c-section-dark h2,.c-section-dark h3 { color: var(--c-white); }
.c-section-dark p { color: rgba(255,255,255,.75); }
.c-text-center { text-align: center; }

/* =====================================================================
   4. ANIMATIONS
   ===================================================================== */
@keyframes float     { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
@keyframes fadeInUp  { from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)} }
@keyframes blobFloat { 0%,100%{transform:translate(0,0)scale(1)}25%{transform:translate(25px,-18px)scale(1.03)}50%{transform:translate(-18px,25px)scale(.97)}75%{transform:translate(12px,12px)scale(1.01)} }
@keyframes scrollLogos { 0%{transform:translateX(0)}100%{transform:translateX(-50%)} }

.c-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.c-reveal.visible { opacity: 1; transform: translateY(0); }
.c-reveal-delay-1 { transition-delay: .1s; }
.c-reveal-delay-2 { transition-delay: .2s; }
.c-reveal-delay-3 { transition-delay: .3s; }
.c-reveal-delay-4 { transition-delay: .4s; }

/* =====================================================================
   5. BUTTONS
   ===================================================================== */
.c-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px; font-size: 15px; font-weight: 600;
    font-family: var(--c-font); border-radius: 10px;
    border: 2px solid transparent; cursor: pointer;
    transition: all var(--c-transition);
    text-decoration: none; line-height: 1.4;
}
.c-btn-primary  { background: var(--c-green); color: #fff !important; border-color: var(--c-green); }
.c-btn-primary:hover { background: var(--c-green-dark); border-color: var(--c-green-dark); color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,163,74,.35); }
.c-btn-secondary { background: transparent; color: var(--c-text) !important; border-color: var(--c-border); }
.c-btn-secondary:hover { border-color: var(--c-blue); color: var(--c-blue) !important; background: var(--c-blue-light); }
.c-btn-red  { background: var(--c-red); color: #fff !important; border-color: var(--c-red); }
.c-btn-red:hover { background: var(--c-red-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(239,68,68,.3); }
.c-btn-white { background: #fff; color: var(--c-blue) !important; border-color: #fff; }
.c-btn-white:hover { background: var(--c-bg-alt); transform: translateY(-2px); }
.c-btn-ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.3); }
.c-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.c-btn-hero { background: #fff; color: #008254 !important; border: 2px solid #fff; font-weight: 700; }
.c-btn-hero:hover { background: #ECFDF5; color: #006B46 !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.c-btn-hero-outline { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.4); }
.c-btn-hero-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff !important; transform: translateY(-2px); }
.c-btn svg,.c-btn-arrow { transition: transform var(--c-transition); }
.c-btn:hover .c-btn-arrow { transform: translateX(4px); }
.c-btn-sm { padding: 9px 18px; font-size: 14px; }
.c-btn-lg { padding: 16px 36px; font-size: 16px; }

/* Kadence button overrides */
.wp-block-button__link,
.kb-button {
    font-family: var(--c-font) !important;
    border-radius: 10px !important;
}

/* =====================================================================
   6. DISCLAIMER BAR
   ===================================================================== */
.c-disclaimer-bar {
    background: #111827;
    color: rgba(255,255,255,.7);
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 16px;
    letter-spacing: .3px;
}

/* =====================================================================
   7. HEADER  (overrides Kadence header)
   ===================================================================== */
.c-header,
.site-header,
#masthead {
    position: sticky !important;
    top: 0 !important;
    z-index: 1010 !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--c-border) !important;
    height: var(--c-header-h) !important;
    box-shadow: none !important;
}
.c-header-inner { display: flex; align-items: center; height: 100%; }
.c-logo img    { height: 44px; width: auto; }

/* ── Navigation ── */
.c-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.c-nav li  { position: relative; }
.c-nav > ul > li > a {
    display: flex; align-items: center; gap: 4px;
    padding: 8px 14px; font-size: 15px; font-weight: 500;
    color: var(--c-text-secondary); border-radius: 8px;
    transition: all var(--c-transition);
}
.c-nav > ul > li > a:hover,
.c-nav > ul > li.current-menu-item > a {
    color: var(--c-blue);
    background: var(--c-blue-light);
}
.c-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.c-menu-toggle {
    display: none; background: none; border: none;
    font-size: 22px; cursor: pointer; padding: 8px;
    color: var(--c-text); line-height: 1;
}
@media (max-width:991px) {
    .c-menu-toggle { display: flex; position: relative; z-index: 1011; }
    .c-nav {
        display: none; position: fixed; top: 0; left: 0; right: 0;
        width: 100%; max-height: 100vh; background: #fff;
        z-index: 1009; padding: 72px 24px 32px; overflow-y: auto;
        box-shadow: 0 8px 40px rgba(0,0,0,.15);
    }
    .c-nav.open { display: block; animation: fadeInUp .3s ease; }
    .c-nav ul   { flex-direction: column; }
    .c-header-actions .c-btn { display: none; }
    .c-header-cta { display: none !important; }
}

/* =====================================================================
   8. MEGA MENU
   ===================================================================== */
.c-nav > ul > li.c-has-mega { position: static; }
.c-mega-menu {
    display: none;
    position: absolute; top: calc(100% - 4px); left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--c-border);
    box-shadow: var(--c-shadow-lg); padding: 28px 0 32px; z-index: 100;
}
.c-nav > ul > li.c-has-mega:hover .c-mega-menu,
.c-mega-menu:hover { display: block; }
.c-mega-inner {
    max-width: var(--c-max); margin: 0 auto; padding: 0 24px;
    display: grid; grid-template-columns: repeat(4,1fr); gap: 24px;
}
.c-mega-col h4 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .8px;
    color: var(--c-text-muted); margin-bottom: 12px; font-weight: 700;
}
.c-mega-link {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    transition: background var(--c-transition); margin-bottom: 2px;
}
.c-mega-link:hover { background: var(--c-bg-alt); }
.c-mega-link .ml-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0; background: var(--c-blue-light);
}
.c-mega-link .ml-text  { font-size: 14px; font-weight: 600; color: var(--c-text); }
.c-mega-link .ml-desc  { font-size: 12px; color: var(--c-text-muted); }
.c-mega-link-sm {
    display: block; padding: 6px 10px; font-size: 14px; font-weight: 500;
    color: var(--c-text-secondary); border-radius: 6px;
    transition: all var(--c-transition);
}
.c-mega-link-sm:hover { background: var(--c-bg-alt); color: var(--c-blue); padding-left: 14px; }
.c-mega-highlight { background: var(--c-bg-alt); border-radius: var(--c-radius-lg); padding: 20px; }
.c-mega-highlight h4  { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.c-mega-highlight p   { font-size: 13px; color: var(--c-text-muted); margin: 0; }
.c-nav-arrow { font-size: 10px; margin-left: 2px; }

@media (max-width:991px) {
    .c-mega-menu { position: static; box-shadow: none; border: none; padding: 0; background: var(--c-bg-alt); border-radius: 12px; margin: 0 0 8px; }
    .c-mega-inner { grid-template-columns: 1fr !important; gap: 2px; padding: 12px !important; max-height: 60vh; overflow-y: auto; }
    .c-mega-col h4 { display: block; font-size: 11px; margin: 12px 0 6px; padding-left: 10px; }
    .c-mega-link { padding: 12px 14px; border-radius: 10px; }
    .c-mega-link-sm { padding: 12px 14px; font-size: 15px; border-radius: 8px; }
    .c-nav-mobile-cta { display: block; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-border); }
    .c-nav-mobile-cta .c-btn { display: flex; width: 100%; justify-content: center; padding: 14px; font-size: 16px; }
}
@media (min-width:992px) { .c-nav-mobile-cta { display: none; } }

/* =====================================================================
   9. SEARCH OVERLAY
   ===================================================================== */
.c-search-toggle { background: none; border: none; cursor: pointer; color: var(--c-text-secondary); padding: 8px; display: flex; align-items: center; transition: color var(--c-transition); }
.c-search-toggle:hover { color: var(--c-blue); }
.c-search-overlay { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--c-border); box-shadow: var(--c-shadow-lg); padding: 20px 0; z-index: 100; }
.c-search-overlay.open { display: block; }
.c-search-form { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--c-radius-lg); transition: border-color var(--c-transition); }
.c-search-form:focus-within { border-color: var(--c-blue); }
.c-search-input { flex: 1; border: none; background: none; font-size: 17px; font-family: var(--c-font); color: var(--c-text); outline: none; }
.c-search-input::placeholder { color: var(--c-text-muted); }
.c-search-close { background: none; border: none; font-size: 24px; color: var(--c-text-muted); cursor: pointer; padding: 4px 8px; line-height: 1; }
.c-search-suggestions { margin-top: 16px; display: flex; gap: 32px; flex-wrap: wrap; }
.c-search-group { display: flex; flex-direction: column; gap: 6px; }
.c-search-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--c-text-muted); margin-bottom: 4px; }
.c-search-group a { font-size: 14px; color: var(--c-text-secondary); padding: 4px 0; }
.c-search-group a:hover { color: var(--c-blue); }

/* =====================================================================
   10. HERO — FULL BACKGROUND IMAGE
   ===================================================================== */
.c-hero, .c-hero-bg-image {
    position: relative; min-height: 520px;
    display: flex; align-items: center;
    padding: 100px 0 200px; overflow: hidden;
    background: var(--c-navy);
}
.c-hero-slider { position: absolute; inset: 0; z-index: 0; }
.c-hero-slide  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: 0; transition: opacity 1.2s ease-in-out; }
.c-hero-slide.active { opacity: 1; }
.c-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(104deg, #008254 40%, rgba(168,234,76,0) 90%, transparent 100%),
                linear-gradient(275deg, rgba(0,72,47,0) 100%, #00482f 100%);
}
.c-hero .c-container, .c-hero-bg-image .c-container { position: relative; z-index: 2; }
.c-hero-content { max-width: 540px; text-align: left; margin-right: auto; }
.c-hero-badge-pill {
    display: inline-block; background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px); color: #fff; font-size: 13px;
    font-weight: 600; padding: 6px 18px; border-radius: 30px;
    margin-bottom: 20px; border: 1px solid rgba(255,255,255,.12);
}
.c-hero h1, .c-hero-bg-image h1 { color: #fff !important; margin-bottom: 16px; text-align: left; }
.c-hero-sub  { font-size: 1.1rem; color: rgba(255,255,255,.85) !important; line-height: 1.65; margin-bottom: 28px; }
.c-hero-micro { font-size: 13px; color: rgba(255,255,255,.55) !important; margin-bottom: 20px; font-weight: 500; }
.c-hero-actions { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.c-hero-trust { display: flex; gap: 20px; flex-wrap: wrap; }
.c-hero-trust-item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,.7) !important; font-weight: 500; }

@media (max-width:768px) {
    .c-hero, .c-hero-bg-image { min-height: auto; padding: 70px 0 140px; text-align: center; }
    .c-hero-overlay { background: linear-gradient(180deg,#008254 50%,rgba(0,130,84,.85) 80%,transparent 100%), linear-gradient(275deg,rgba(0,72,47,0) 60%,#00482f 100%); opacity: .95; }
    .c-hero h1, .c-hero-bg-image h1 { font-size: 1.8rem; text-align: center; }
    .c-hero-content { text-align: center; }
    .c-hero-actions { justify-content: center; }
    .c-hero-trust   { justify-content: center; flex-wrap: wrap; }
}

/* =====================================================================
   11. QUICK ACTIONS (overlaps hero)
   ===================================================================== */
.c-quick-overlap { position: relative; z-index: 10; margin-top: -180px; padding-top: 0; padding-bottom: 56px; }
.c-quick-overlap-card { background: #fff; border-radius: 16px; padding: 36px; box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04); }
.c-quick-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; margin-top: 24px; }
.c-quick-card {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 24px 12px 20px;
    border-radius: var(--c-radius-lg); background: #fff;
    border: 1px solid var(--c-border); transition: all var(--c-transition); text-decoration: none; color: var(--c-text);
}
.c-quick-card:hover { border-color: var(--q-color, var(--c-blue)); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.c-quick-icon  { font-size: 32px; line-height: 1; margin-bottom: 10px; }
.c-quick-label { font-size: 15px; font-weight: 700; color: #1A1A1A; margin-bottom: 4px; }
.c-quick-desc  { font-size: 12px; color: var(--c-text-muted); line-height: 1.3; min-height: 32px; display: flex; align-items: center; justify-content: center; }
.c-quick-card:hover .c-quick-label { color: var(--q-color, var(--c-blue)); }

@media (max-width:991px) { .c-quick-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width:480px) {
    .c-quick-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
    .c-quick-overlap { margin-top: -80px; }
    .c-quick-overlap-card { padding: 20px 16px; }
}

/* =====================================================================
   12. PERSONA BLOCK
   ===================================================================== */
.c-persona-block { display: flex; align-items: center; gap: 40px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--c-radius-lg); padding: 32px 36px; }
.c-persona-left { flex-shrink: 0; max-width: 280px; }
.c-persona-left h2 { font-size: 1.3rem; color: #1A1A1A; margin-bottom: 6px; }
.c-persona-left p  { font-size: 14px; color: var(--c-text-secondary); margin: 0; }
.c-persona-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.c-persona-btn { padding: 9px 20px; border: 1px solid var(--c-border); border-radius: 30px; font-size: 14px; font-weight: 600; color: var(--c-text-secondary); background: #fff; text-decoration: none; transition: all var(--c-transition); white-space: nowrap; }
.c-persona-btn:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-light); }
.c-persona-btn-urgent { border-color: var(--c-red); color: var(--c-red); }
.c-persona-btn-urgent:hover { background: rgba(239,68,68,.08); border-color: var(--c-red); color: var(--c-red); }

@media (max-width:768px) { .c-persona-block { flex-direction: column; text-align: center; padding: 24px; gap: 20px; } .c-persona-left { max-width: 100%; } .c-persona-buttons { justify-content: center; } }

/* =====================================================================
   13. TOOLS ROW
   ===================================================================== */
.c-tools-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.c-tool-featured { position: relative; background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-blue-dark) 100%); border-radius: var(--c-radius-lg); padding: 36px; color: #fff; text-decoration: none; display: flex; flex-direction: column; overflow: hidden; transition: transform var(--c-transition); }
.c-tool-featured:hover { transform: translateY(-4px); color: #fff; }
.c-tool-badge { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.2); padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.c-tool-f-icon { font-size: 40px; margin-bottom: 16px; line-height: 1; }
.c-tool-featured h3 { color: #fff; font-size: 1.3rem; margin-bottom: 8px; }
.c-tool-featured p  { color: rgba(255,255,255,.8); font-size: 15px; margin: 0 0 auto; line-height: 1.5; }
.c-tool-time  { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 12px; }
.c-tool-after { display: block; font-size: 12px; color: rgba(255,255,255,.5); margin-top: 10px; font-style: italic; }
.c-tool-side  { display: flex; flex-direction: column; gap: 12px; }
.c-tool-mini  { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--c-radius-lg); text-decoration: none; color: var(--c-text); transition: all var(--c-transition); }
.c-tool-mini:hover { border-color: var(--c-blue); transform: translateY(-2px); box-shadow: var(--c-shadow-sm); }
.c-tool-mini-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.c-tool-mini strong { display: block; font-size: 15px; color: #1A1A1A; margin-bottom: 2px; }
.c-tool-mini span   { font-size: 13px; color: var(--c-text-muted); }
.c-tool-mini .c-btn-arrow { margin-left: auto; color: var(--c-text-muted); flex-shrink: 0; transition: all var(--c-transition); }
.c-tool-mini:hover .c-btn-arrow { color: var(--c-blue); transform: translateX(4px); }

@media (max-width:768px) { .c-tools-row { grid-template-columns: 1fr; } .c-tool-featured { padding: 28px; } }

/* =====================================================================
   14. TOP PROGRAMS GRID
   ===================================================================== */
.c-programs-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 24px; }
.c-program-card { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--c-radius-lg); text-decoration: none; color: var(--c-text); transition: all var(--c-transition); }
.c-program-card:hover { border-color: var(--c-blue); transform: translateY(-2px); box-shadow: var(--c-shadow-sm); }
.c-program-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.c-program-info { flex: 1; min-width: 0; }
.c-program-info strong   { display: block; font-size: 15px; color: #1A1A1A; margin-bottom: 2px; }
.c-program-gives { display: block; font-size: 14px; color: var(--c-blue); font-weight: 600; }
.c-program-who   { display: block; font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.c-program-card .c-btn-arrow { color: var(--c-text-muted); flex-shrink: 0; font-size: 16px; transition: all var(--c-transition); }
.c-program-card:hover .c-btn-arrow { color: var(--c-blue); transform: translateX(4px); }

@media (max-width:768px) { .c-programs-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   15. HOW IT WORKS — STEPS
   ===================================================================== */
.c-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; position: relative; }
.c-steps::before { content: ''; position: absolute; top: 42px; left: 16.67%; right: 16.67%; height: 2px; background: var(--c-border); z-index: 0; }
.c-step { text-align: center; position: relative; z-index: 1; padding: 0 20px; }
.c-step-num { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; margin: 0 auto 20px; border: 1px solid var(--c-border); background: #fff; color: var(--c-blue); transition: all .3s ease; }
.c-step:hover .c-step-num { border-color: var(--c-blue); background: var(--c-blue); color: #fff; transform: scale(1.1); }
.c-step h3 { font-size: 1.1rem; margin-bottom: 8px; }
.c-step p  { font-size: 14px; color: var(--c-text-secondary); line-height: 1.6; }
.c-step-micro { font-size: 13px; color: var(--c-text-muted); margin-top: 12px; }

@media (max-width:768px) { .c-steps { grid-template-columns: 1fr; gap: 32px; } .c-steps::before { display: none; } }

/* =====================================================================
   16. TRUST BAR & LOGOS
   ===================================================================== */
.c-trust-bar { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.c-trust-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-text-secondary); font-weight: 500; }
.c-trust-logos { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; opacity: .5; }
.c-trust-logos img { height: 28px; width: auto; }

@media (max-width:768px) { .c-trust-bar { gap: 16px; flex-direction: column; align-items: center; } }

/* =====================================================================
   17. POST CARDS (4-col grid)
   ===================================================================== */
.c-posts-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.c-posts-grid-4 { grid-template-columns: repeat(4,1fr); }
.c-card { background: #fff; border: 1px solid var(--c-border); border-radius: 16px; overflow: hidden; transition: all .3s cubic-bezier(.4,0,.2,1); box-shadow: var(--c-shadow-sm); }
.c-card:hover { box-shadow: var(--c-shadow); transform: translateY(-6px); }
.c-card-img { aspect-ratio: 16/10; overflow: hidden; border-radius: 24px 24px 0 0; }
.c-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.c-card:hover .c-card-img img { transform: scale(1.08); }
.c-card-body  { padding: 24px 28px 28px; }
.c-card-cat   { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--c-blue); margin-bottom: 10px; }
.c-card-title { font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.c-card-title a { color: var(--c-text); transition: color var(--c-transition); }
.c-card-title a:hover { color: var(--c-blue); }
.c-card-excerpt { font-size: 14px; color: var(--c-text-secondary); line-height: 1.65; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.c-card-meta  { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-muted); }
.c-card-read  { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--c-blue); display: inline-flex; align-items: center; gap: 4px; }
.c-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.c-section-header .c-section-title { margin-bottom: 0; }
.c-view-all   { font-size: 14px; font-weight: 600; color: var(--c-blue); display: inline-flex; align-items: center; gap: 4px; }

@media (max-width:991px) { .c-posts-grid, .c-posts-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px) { .c-posts-grid, .c-posts-grid-4 { grid-template-columns: 1fr; } }

/* =====================================================================
   18. SECTION TITLE HELPERS
   ===================================================================== */
.c-section-title { font-size: clamp(1.4rem,3vw,1.8rem); color: #1A1A1A; margin-bottom: 8px; letter-spacing: -.02em; }
.c-section-sub   { font-size: 1rem; color: var(--c-text-secondary); margin-bottom: 32px; }
.c-section-hint  { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--c-blue); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.c-section-hint::before { content: ''; display: inline-block; width: 20px; height: 2px; background: var(--c-blue); }
.c-section-note  { font-size: 14px; color: var(--c-text-secondary); margin-top: 24px; text-align: center; }
.c-section-note a { color: var(--c-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* =====================================================================
   19. FINAL CTA BLOCK
   ===================================================================== */
.c-cta-final { text-align: center; max-width: 600px; margin: 0 auto; }
.c-cta-final h2 { font-size: clamp(1.4rem,3vw,1.8rem); color: #1A1A1A; margin-bottom: 8px; }
.c-cta-final p  { color: var(--c-text-secondary); margin-bottom: 24px; }
.c-cta-micro    { font-size: 13px; color: var(--c-text-muted); margin-top: 14px; }

/* =====================================================================
   20. FOOTER
   ===================================================================== */
.c-footer, footer.site-footer {
    background: var(--c-bg-dark) !important;
    color: rgba(255,255,255,.65);
    padding: 64px 0 0;
}
.c-footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
.c-footer-about-col { grid-column: span 1; }
.c-footer h4  { color: #fff; font-size: 14px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .5px; }
.c-footer ul  { list-style: none; padding: 0; margin: 0; }
.c-footer li  { margin-bottom: 8px; }
.c-footer a   { color: #D1D5DB; font-size: 14px; transition: color var(--c-transition); }
.c-footer a:hover { color: #A7F3D0; }
.c-footer-about { font-size: 14px; line-height: 1.7; max-width: 280px; }
.c-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 13px; color: rgba(255,255,255,.4); }
.c-footer-bottom a { color: rgba(255,255,255,.4); }
.c-footer-bottom a:hover { color: #fff; }
.c-footer-searches { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); margin-top: 32px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.c-footer-searches-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.4); white-space: nowrap; }
.c-footer-searches a { font-size: 13px; color: rgba(255,255,255,.5); transition: color var(--c-transition); }
.c-footer-searches a:hover { color: rgba(255,255,255,.9); }
.c-footer-searches a::after { content: " \00b7"; margin-left: 12px; color: rgba(255,255,255,.2); }
.c-footer-searches a:last-child::after { display: none; }

@media (max-width:991px) { .c-footer-grid { grid-template-columns: 1fr 1fr; } .c-footer-about-col { grid-column: span 2; } }
@media (max-width:600px)  { .c-footer-grid { grid-template-columns: 1fr; } .c-footer-about-col { grid-column: span 1; } .c-footer-bottom { flex-direction: column; gap: 8px; text-align: center; } }

/* =====================================================================
   21. BACK TO TOP
   ===================================================================== */
.c-back-top { position: fixed; bottom: 92px; right: 29px; width: 42px; height: 42px; border-radius: 50%; background: var(--c-navy); color: #fff; border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--c-shadow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .3s ease; z-index: 997; }
.c-back-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.c-back-top:hover { background: var(--c-blue-dark); transform: translateY(-3px); }

/* =====================================================================
   22. MOBILE STICKY CTA BAR
   ===================================================================== */
.c-mobile-cta { display: none; }
@media (max-width:991px) {
    .c-mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 950; background: #fff; border-top: 1px solid var(--c-border); padding: 10px 16px; box-shadow: 0 -2px 12px rgba(0,0,0,.08); gap: 10px; align-items: center; }
    .c-mobile-cta .c-btn { flex: 1; text-align: center; justify-content: center; padding: 12px 16px; font-size: 15px; }
    body { padding-bottom: 70px; }
}

/* =====================================================================
   23. PROFILE DROPDOWN
   ===================================================================== */
.c-profile-wrap { position: relative; }
.c-profile-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--c-border); background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, box-shadow .15s; padding: 0; }
.c-profile-btn:hover { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(0,130,84,.1); }
.c-profile-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; }
.c-profile-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.c-profile-guest-header { padding: 16px; border-bottom: 1px solid var(--c-border); }
.c-profile-guest-header p { font-size: 13px; color: var(--c-text-muted); margin: 0; line-height: 1.5; }
.c-profile-links { padding: 8px; }
.c-profile-links a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--c-text); text-decoration: none; border-radius: 8px; transition: background .1s; }
.c-profile-links a:hover { background: var(--c-bg); color: var(--c-navy); text-decoration: none; }
.c-profile-links a svg { color: var(--c-text-muted); flex-shrink: 0; }
.c-profile-login-link { font-weight: 600 !important; color: var(--c-blue) !important; }
.c-profile-login-link svg { color: var(--c-blue) !important; }
.c-profile-divider { height: 1px; background: var(--c-border); margin: 4px 0; }

/* =====================================================================
   24. SINGLE POST LAYOUT
   ===================================================================== */
.c-post-content { max-width: 720px; font-size: 17px; line-height: 1.75; }
.c-post-content h2 { font-size: 1.5rem; margin-top: 2.2em; padding-bottom: .4em; border-bottom: 2px solid var(--c-border); }
.c-post-content h3 { font-size: 1.2rem; margin-top: 1.8em; }
.c-post-content a  { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(0,130,84,.3); }
.c-post-content a:hover { text-decoration-color: var(--c-blue); }
.c-post-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; border-radius: var(--c-radius); overflow: hidden; border: 1px solid var(--c-border); }
.c-post-content th, .c-post-content td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--c-border); }
.c-post-content th { background: var(--c-blue); color: #fff; font-weight: 600; }
.c-post-content tr:nth-child(even) { background: var(--c-bg-alt); }
.c-post-content blockquote { border-left: 4px solid var(--c-blue); margin: 1.8em 0; padding: 20px 28px; background: var(--c-blue-light); border-radius: 0 var(--c-radius) var(--c-radius) 0; }
.c-post-content img { border-radius: var(--c-radius); max-width: 100%; height: auto; }

/* =====================================================================
   25. KADENCE-SPECIFIC OVERRIDES
   ===================================================================== */
/* Global palette mapping */
.wp-block-button.is-style-fill .wp-block-button__link { background-color: var(--c-green) !important; }
.wp-block-button.is-style-outline .wp-block-button__link { color: var(--c-green) !important; border-color: var(--c-green) !important; }

/* Kadence header builder */
.header-wrap { background: transparent !important; }
.site-header .header-inner-wrap { max-width: var(--c-max) !important; }

/* Kadence row block background */
.kb-row-layout-inner { background: transparent; }

/* Override Kadence default body font */
body, .entry-content, .kb-advancedheading-text { font-family: var(--c-font) !important; }

/* Kadence pagination */
.kadence-pagination .page-numbers { border-radius: 8px !important; font-family: var(--c-font) !important; }
.kadence-pagination .page-numbers.current { background: var(--c-blue) !important; border-color: var(--c-blue) !important; color: #fff !important; }

/* Kadence search widget */
.wp-block-search .wp-block-search__button { background: var(--c-blue) !important; border-color: var(--c-blue) !important; font-family: var(--c-font) !important; }
.wp-block-search .wp-block-search__input { border-color: var(--c-border) !important; font-family: var(--c-font) !important; border-radius: 10px !important; }
.wp-block-search .wp-block-search__input:focus { border-color: var(--c-blue) !important; box-shadow: 0 0 0 4px var(--c-blue-glow) !important; }

/* Kadence table of contents */
.kb-table-of-content-nav .kb-table-of-content-list a { color: var(--c-text-secondary) !important; }
.kb-table-of-content-nav .kb-table-of-content-list a:hover { color: var(--c-blue) !important; }

/* =====================================================================
   26. UTILITIES
   ===================================================================== */
.c-section-title  { margin-bottom: 12px; }
.c-badge          { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px; }
.c-badge-blue     { background: var(--c-blue-light); color: var(--c-blue); }
.c-badge-red      { background: rgba(239,68,68,.1); color: var(--c-red); }
.screen-reader-text { clip: rect(1px,1px,1px,1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }