/* =========================================================
   eCitizen-style theme (preview, October 2026)
   Colours matched to accounts.ecitizen.go.ke: white header, cool greys, deep teal bands,
   green "Register" buttons, blue text links and a near-black footer.
   eCitizen's green (#5EB164) is too light for white text, so buttons use #3F8344 (same hue, AA contrast);
   the light green is kept for icons and small accents.
   Loaded after css/style.css (and css/portal.css), so it only overrides.
   ========================================================= */
@font-face {
    font-family: "Lexend";
    src: url("../fonts/lexend-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Fallback while Lexend downloads: Arial (or Roboto on Android) resized to Lexend's
   measurements, so the text takes the same space and nothing jumps when Lexend arrives. */
@font-face {
    font-family: "Lexend Fallback";
    src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"),
         local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"), local("Helvetica Neue"), local("Helvetica");
    size-adjust: 110.6%;
    ascent-override: 90.4%;
    descent-override: 22.6%;
    line-gap-override: 0%;
}
:root {
    --green:       #3F8344;   /* buttons */
    --green-deep:  #2F6A34;   /* hover */
    --green-night: #1B454B;   /* deep teal: banners and dark bands */
    --green-rgb:   63, 131, 68;
    --leaf:        #E6F2E7;   /* pale green: menu highlight and hover (was eCitizen's #5EB164, too strong behind text) */
    --accent:      #5EB164;   /* eCitizen's light green: thin accent lines only */
    --teal:        #1B454B;
    --teal-deep:   #12343A;
    --link:        #2563EB;   /* text links, "View all" */
    --mint:        #7ECF92;   /* accent on dark backgrounds */
    --red:         #C62828;   /* Get help and urgent things */
    --urgent:      #C62828;
    --ink:         #111827;
    --muted:       #4B5563;
    --stone:       #F3F4F6;   /* grey sections */
    --line:        #E5E7EB;
    --line-soft:   #F3F4F6;
    --msitu:       #1B454B;
    --msitu-2:     #111827;   /* headings are near-black, like eCitizen */
    --mahindi:     #7ECF92;
    --damu:        #2563EB;
    --charcoal:    #282F28;
    --footer:      #282F28;
    --radius:      12px;
    --shadow:      0 1px 2px rgba(17, 24, 39, .05);
    --font-display: "Lexend", "Lexend Fallback", "Segoe UI", Roboto, Arial, sans-serif;
    --font-body:    "Lexend", "Lexend Fallback", "Segoe UI", Roboto, Arial, sans-serif;
    --font-brand:   "Lexend", "Lexend Fallback", "Segoe UI", Roboto, Arial, sans-serif;
}
body { font-family: var(--font-body); color: var(--ink); letter-spacing: .005em; }
h1, h2, h3, h4, .section-title { font-family: var(--font-display); color: var(--ink); letter-spacing: .01em; font-weight: 600; }
a { color: var(--link); }
a:hover { color: #1D4ED8; }
.eyebrow { color: var(--green); letter-spacing: .02em; }

/* Buttons: rounded pills, normal case */
.btn { border-radius: 999px; text-transform: none; letter-spacing: .01em; font-weight: 500; }
.btn-gold, .btn-damu, .btn-maize { background: var(--green); border-color: var(--green); color: #fff; }
.btn-gold:hover, .btn-gold:focus, .btn-damu:hover, .btn-damu:focus, .btn-maize:hover, .btn-maize:focus { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.btn-ghost { background: #fff; border-color: #fff; color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus { background: #F3F4F6; border-color: #F3F4F6; color: var(--ink); }
.btn-outline-ink { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline-ink:hover, .btn-outline-ink:focus { border-color: var(--ink); color: var(--ink); background: #fff; }
.btn-help, .topbar .topbar-help { border-radius: 999px !important; }

/* Header: white, light grey top bar */
.topbar { background: var(--stone); color: var(--muted); border-bottom: 1px solid var(--line); }
.topbar a { color: var(--ink); font-weight: 500; }
.topbar a:hover, .topbar a:focus { color: var(--ink); }
.topbar-contact span { color: var(--muted); }
.site-nav { border-bottom: 1px solid var(--line); box-shadow: none; }
.site-nav .nav-link { color: var(--ink); font-weight: 500; }
.site-nav .nav-link.active, .site-nav .nav-link:hover { color: var(--green); }
.brand-text { color: var(--ink); font-weight: 600; }

/* Photo banners: a dark see-through layer over the photo (or the landscape drawing until photos arrive) */
/* Page banners: the photo (once downloaded) sits on top of the landscape drawing, so a picture always shows */
.hero .carousel-item, .page-hero {
    background:
        linear-gradient(90deg, rgba(17, 24, 39, .84) 0%, rgba(17, 24, 39, .6) 50%, rgba(17, 24, 39, .3) 100%),
        var(--slide-photo, var(--banner-photo, none)) center / cover no-repeat,
        url("../images/hero-landscape.svg") 70% 60% / cover no-repeat,
        var(--teal) !important;
}
@media (max-width: 767px) {
    .page-hero { background:
        linear-gradient(180deg, rgba(17, 24, 39, .55) 0%, rgba(17, 24, 39, .82) 100%),
        var(--banner-photo, none) center / cover no-repeat,
        url("../images/hero-landscape.svg") 70% 60% / cover no-repeat,
        var(--teal) !important; }
}
/* Home slides: darker on the left where the words are, the picture shows on the right */
.u-hero .carousel-item {
    background:
        linear-gradient(90deg, rgba(17, 24, 39, .86) 0%, rgba(17, 24, 39, .62) 42%, rgba(17, 24, 39, .12) 78%, rgba(17, 24, 39, 0) 100%),
        var(--slide-photo, url("../images/hero-landscape.svg")) 70% center / cover no-repeat,
        var(--teal) !important;
}
@media (max-width: 767px) {
    .u-hero .carousel-item {
        background:
            linear-gradient(180deg, rgba(17, 24, 39, .35) 0%, rgba(17, 24, 39, .72) 40%, rgba(17, 24, 39, .86) 100%),
            var(--slide-photo, url("../images/hero-landscape.svg")) 72% center / cover no-repeat,
            var(--teal) !important;
    }
}
.u-hero, .page-hero { background-color: var(--teal); }
.u-hero h1, .u-hero h2, .page-hero h1 { font-weight: 500; letter-spacing: .02em; }
.u-slide-label, .hero-place { color: #fff; opacity: .9; }
.u-slide-lead, .hero-lead { color: #F3F4F6; }

/* Cards: white, thin grey border, no heavy shadow */
.h-card, .portfolio, .path-card, .form-card, .fact-panel, .mv-card, .u-board, .u-quick-list a, .benefit {
    border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: none !important; }
.h-card h3, .portfolio h2, .path-card h3 { color: var(--ink); font-weight: 600; }
.h-card > a:last-child, .u-head-row > a { color: var(--link); font-weight: 500; }
.h-ico { --c: var(--teal); }
.u-quick-list strong { color: var(--ink); }

/* Grey sections */
.section-soft { background: var(--stone) !important; }
.home > .section:not(.section-soft) { background: #fff !important; }   /* home sections alternate white and grey */
.home > .section.u-finder { background: var(--teal, #1B454B) !important; }   /* the help finder stays dark: white text */

/* Action buttons in the page banners */
.hero-actions { margin-top: 1.5rem; }
.page-hero .hero-actions .btn { min-height: 48px; }
@media (max-width: 575px) { .hero-actions .btn { width: 100%; justify-content: center; } }

/* Deep teal bands */
.section-dark, .objective-band, .cta, .donate-band, .host-band, .section-green, .u-next { background: var(--teal) !important; }

/* Footer: near-black, like eCitizen */
.site-footer { background: var(--footer) !important; color: #D1D5DB; border-top: 0; }
.site-footer a { color: #fff; }
.footer-motto { color: var(--mint) !important; }

/* Members and committee areas */
.app-top, .pt-head, .auth-intro, .profile-band, .drawer-head { background: var(--teal) !important; }
.side button.on, .drawer-nav button.on { box-shadow: inset 4px 0 0 var(--green) !important; }
.tabbar button.on { color: var(--green) !important; }

/* ---------- Icons (two-tone set, October 2026) ---------- */
.h-ico svg { color: #fff; }
.h-ico-maize svg { color: var(--teal, #1B454B); }
.h-contact svg { color: var(--damu); }
.u-tiles svg { box-sizing: border-box; width: 46px; height: 46px; padding: 9px; border-radius: 12px; color: #1D4ED8; background: #E5EDFD; }
.u-tiles svg.ut-green { color: #2F6B34; background: #E6F2E7; }
.u-tiles svg.ut-teal  { color: #1B454B; background: #E0EEEF; }
.u-tiles svg.ut-red   { color: #B71C1C; background: #FBE7E7; }
.u-tiles svg.ut-amber { color: #A0520B; background: #FDF0DC; }
.u-tiles a:hover svg { transform: scale(1.06); }
.u-tiles svg { transition: transform .15s ease; }
@media (max-width: 575.98px) { .u-tiles svg { width: 40px; height: 40px; padding: 8px; } }
.auth-points svg { box-sizing: border-box; width: 46px; height: 46px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #C3E6C5; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .u-tiles svg { transition: none; } }

/* ---------- Closing call-to-action band (was unstyled: dark text on teal) ---------- */
.cta { padding: 3.5rem 0; color: #E5ECE6; }
.cta h2 { margin-bottom: .5rem; }
.cta p { color: #D6E3DF; max-width: 40rem; margin: 0 auto 1.5rem; }
.cta .cta-actions { justify-content: center; }

/* ---------- Membership: "What members receive" as white cards on grey ---------- */
#benefits .benefits { gap: 1rem; }
#benefits .benefit { background: #fff; padding: 1.25rem 1.3rem; border-top: 1px solid var(--line); }
#benefits .benefit h3 { display: block; color: var(--ink); font-size: 1.12rem; font-weight: 600; line-height: 1.35; }
#benefits .benefit h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--green); margin-right: .55rem; vertical-align: .12em; }
#benefits .benefit h3 .tag { display: table; margin-top: .45rem; background: #E6F2E7; color: #2F6B34; font-weight: 600; }
#benefits .benefit p { color: var(--muted); opacity: 1; }
#benefits .benefits-lead { color: var(--muted); }
#benefits .benefits-lead .tag { background: #E6F2E7; color: #2F6B34; }

/* ---------- Members and committee menus: clearer text ---------- */
.drawer-nav > button, .drawer-group summary { color: var(--ink); font-weight: 700; font-size: 1.02rem; }
.drawer-group > button, .drawer-group > a { color: var(--ink); font-weight: 600; font-size: 1rem; }
.drawer-nav button.on, .side button.on { background: var(--leaf) !important; color: var(--teal) !important; font-weight: 700; }
.drawer-nav button:hover, .drawer-group summary:hover, .drawer-group > a:hover, .side button:hover { background: #F3F4F6; }
.drawer-nav button.on:hover, .side button.on:hover { background: var(--leaf); }
.drawer-nav > button svg, .drawer-group summary > svg:first-child, .side button svg { color: var(--green); }
.drawer-group summary .chev { color: #4B5563; }
.side button { color: var(--ink); font-weight: 600; }
.side-label { color: #4B5563; }