/*=====================================================
Vote Smart KE Candidate Profile
Author: Vote Smart KE
======================================================*/


/*=====================================================
1. Hero
======================================================*/


/*=====================================================
2. Quick Facts
======================================================*/


/*=====================================================
3. Biography
======================================================*/


/*=====================================================
4. Policy Positions
======================================================*/


/*=====================================================
5. Public Service
======================================================*/


/*=====================================================
6. Electoral Summary
======================================================*/

.electoral-summary{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin:45px 0 60px;

}

.summary-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    text-align:center;

    position:relative;

    overflow:hidden;

    border:1px solid #e8edf5;

    box-shadow:0 8px 30px rgba(15,23,42,.06);

    transition:all .3s ease;

}

.summary-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#2563eb;

}

.summary-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(15,23,42,.12);

}

.summary-icon{

    width:64px;

    height:64px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}

.summary-number{

    font-size:48px;

    font-weight:800;

    color:#0f2d62;

    line-height:1;

    margin-bottom:12px;

}

.summary-label{

    font-size:15px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.06em;

    color:#64748b;

}
7. Electoral Timeline
======================================================*/


/*=====================================================
8. Responsive
======================================================*/

/* =====================================================
   VOTE SMART KE
   Candidate Hero
===================================================== */

.vsk-hero{
    background:#f5f7fb;
    padding:60px 20px 30px;
}

.vsk-container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 20px;
}

/* =====================================================
   HERO CARD
===================================================== */

.vsk-hero-card{

    background:#ffffff;

    border-radius:24px;

    padding:45px;

    display:grid;

    grid-template-columns:340px 1fr;

    gap:50px;

    align-items:center;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

}

/* =====================================================
   PHOTO
===================================================== */

.vsk-photo img{

    width:100%;

    aspect-ratio:3/4;

    object-fit:cover;

    border-radius:20px;

    display:block;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

/* =====================================================
   NAME
===================================================== */

.vsk-info h1{

    margin:0;

    font-size:3.3rem;

    line-height:1.1;

    font-weight:700;

    color:#0B2F5B;

}

/* =====================================================
   POSITION
===================================================== */

.vsk-info h2{

    margin:12px 0 18px;

    font-size:1.7rem;

    font-weight:500;

    color:#5b6575;

}

/* =====================================================
   ELECTION
===================================================== */

.vsk-election{

    display:inline-block;

    background:#EEF4FF;

    color:#0B2F5B;

    padding:8px 16px;

    border-radius:25px;

    font-weight:600;

    margin-bottom:22px;

}

/* =====================================================
   LOCATION
===================================================== */

.vsk-location{

    font-size:18px;

    margin-bottom:22px;

    color:#4b5563;

}

.vsk-location a{

    color:#0B2F5B;

    text-decoration:none;

    font-weight:600;

}

.vsk-location a:hover{

    text-decoration:underline;

}

/* =====================================================
   BADGES
===================================================== */

.vsk-badges{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:30px;

}

.party{

    background:#0B6E4F;

    color:#fff;

    padding:10px 22px;

    border-radius:40px;

    font-weight:600;

}

.verified{

    background:#E6F8EC;

    color:#0B6E4F;

    padding:10px 22px;

    border-radius:40px;

    font-weight:600;

}

.pending{

    background:#FFF7DB;

    color:#9A6700;

    padding:10px 22px;

    border-radius:40px;

    font-weight:600;

}

/* =====================================================
   HERO SUMMARY
===================================================== */

.hero-summary{

    margin:35px 0;

    padding-left:25px;

    border-left:5px solid #0B2F5B;

    font-size:1.25rem;

    line-height:1.9;

    color:#4B5563;

    font-style:italic;

    max-width:720px;

}

/* =====================================================
   BUTTON
===================================================== */

.campaign-button{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#0B2F5B;

    color:#fff;

    text-decoration:none;

    padding:16px 32px;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.campaign-button:hover{

    background:#154a8b;

    transform:translateY(-2px);

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:991px){

.vsk-hero-card{

grid-template-columns:1fr;

padding:35px;

}

.vsk-photo{

max-width:340px;

margin:auto;

}

.vsk-info{

text-align:center;

}

.vsk-location{

justify-content:center;

}

.vsk-badges{

justify-content:center;

}

.hero-summary{

margin:auto;

margin-top:30px;

margin-bottom:30px;

text-align:left;

}

}

@media(max-width:600px){

.vsk-info h1{

font-size:2.2rem;

}

.vsk-info h2{

font-size:1.3rem;

}

.campaign-button{

width:100%;

justify-content:center;

}

}

/* =======================================================
   QUICK FACTS
======================================================= */

.vsk-facts{

    padding:80px 0;
    background:#f8fafc;

}

.vsk-facts .section-header{

    margin-bottom:40px;

}

.facts-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:28px;

}

.fact-card{

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:20px;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    min-height:210px;

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

}

.fact-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(15,23,42,.12);

    border-color:#dbeafe;

}

.fact-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:linear-gradient(90deg,#1d4ed8,#2563eb);

    transform:scaleX(0);

    transition:.35s;

}

.fact-card:hover::before{

    transform:scaleX(1);

}

.fact-icon{

    width:58px;
    height:58px;

    border-radius:16px;

    background:#eff6ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:22px;

}

.fact-label{

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:12px;

    font-weight:700;

    color:#64748b;

    margin-bottom:10px;

}

.fact-value{

    font-size:24px;

    font-weight:700;

    line-height:1.4;

    color:#0f172a;

    word-break:break-word;

}

.fact-value a{

    color:#1d4ed8;

    text-decoration:none;

    font-weight:700;

}

.fact-value a:hover{

    text-decoration:underline;

}

@media (max-width:768px){

    .vsk-facts{

        padding:60px 0;

    }

    .facts-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .fact-card{

        min-height:auto;

        padding:24px;

    }

    .fact-value{

        font-size:20px;

    }

}
/*=====================================================
ABOUT THE CANDIDATE
=====================================================*/

.vsk-about{

    background:#f8fafc;

    padding:90px 20px;

}

.about-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:40px;

    max-width:1100px;

    margin:0 auto 35px;

}

.about-heading{

    flex:1;

}

.about-heading .section-title{

    margin:0;

    font-size:2.4rem;

    color:#0B2F5B;

    font-weight:700;

}

.section-subtitle{

    margin-top:14px;

    max-width:760px;

    color:#64748B;

    font-size:17px;

    line-height:1.8;

}

.about-meta{

    display:flex;

    flex-direction:column;

    gap:12px;

    align-items:flex-end;

}

.read-time,

.updated-date{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#ffffff;

    border:1px solid #E2E8F0;

    border-radius:50px;

    padding:10px 18px;

    font-size:14px;

    color:#475569;

    font-weight:600;

}

/*=====================================================
CARD
=====================================================*/

.about-card{

    max-width:1100px;

    margin:auto;

    background:#ffffff;

    border-radius:22px;

    padding:55px;

    box-shadow:0 15px 45px rgba(15,23,42,.06);

}

/*=====================================================
EDITORIAL SUMMARY
=====================================================*/

.editorial-box{

    background:linear-gradient(135deg,#F8FBFF,#F1F7FF);

    border-left:5px solid #2563EB;

    border-radius:16px;

    padding:30px;

}

.editorial-label{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#2563EB;

    font-weight:700;

}

.editor-icon{

    font-size:18px;

}

.editorial-summary{

    margin:0;

    font-size:1.25rem;

    line-height:1.9;

    color:#334155;

    font-style:italic;

    border:none;

}

/*=====================================================
DIVIDER
=====================================================*/

.about-divider{

    border:none;

    border-top:1px solid #E2E8F0;

    margin:45px 0;

}

/*=====================================================
BIOGRAPHY
=====================================================*/

.candidate-biography{

    max-width:760px;

}

.candidate-biography h3{

    margin:0 0 25px;

    color:#0B2F5B;

    font-size:2rem;

    font-weight:700;

}

.candidate-biography p{

    font-size:19px;

    line-height:2;

    color:#475569;

    margin-bottom:24px;

}

.candidate-biography p:first-of-type{

    font-size:21px;

    color:#1E293B;

}

/*=====================================================
RESPONSIVE
=====================================================*/

@media(max-width:900px){

.about-header{

flex-direction:column;

}

.about-meta{

align-items:flex-start;

flex-direction:row;

flex-wrap:wrap;

}

.about-card{

padding:35px;

}

.candidate-biography{

max-width:100%;

}

}

@media(max-width:600px){

.about-heading .section-title{

font-size:2rem;

}

.section-subtitle{

font-size:16px;

}

.editorial-summary{

font-size:18px;

}

.candidate-biography h3{

font-size:1.6rem;

}

.candidate-biography p{

font-size:17px;

line-height:1.9;

}

}

/*=====================================================
POLICY POSITIONS
=====================================================*/

.vsk-policy{

    padding:90px 20px;

    background:#F8FAFC;

}

/*-----------------------------------
Header
------------------------------------*/

.policy-header{

    max-width:900px;

    margin:0 auto 50px;

    text-align:center;

}

.policy-header .section-title{

    margin-bottom:15px;

    color:#0B2F5B;

    font-size:2.4rem;

    font-weight:700;

}

.policy-header .section-subtitle{

    font-size:18px;

    line-height:1.8;

    color:#64748B;

    margin-bottom:30px;

}

.policy-disclaimer{

    display:inline-block;

    background:#EEF4FF;

    border-left:4px solid #2563EB;

    padding:15px 22px;

    border-radius:10px;

    color:#334155;

    font-size:15px;

    line-height:1.7;

    text-align:left;

}

/*-----------------------------------
Grid
------------------------------------*/

.policy-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:30px;

}

/*-----------------------------------
Card
------------------------------------*/

.policy-card{

    background:#ffffff;

    border-radius:22px;

    padding:35px;

    box-shadow:0 10px 35px rgba(15,23,42,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    border:1px solid transparent;

    position:relative;

    overflow:hidden;

}

.policy-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(15,23,42,.12);

    border-color:#DBEAFE;

}

/* blue accent */

.policy-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:#2563EB;

    transform:scaleY(0);

    transform-origin:top;

    transition:.35s;

}

.policy-card:hover::before{

    transform:scaleY(1);

}

/*-----------------------------------
Icon
------------------------------------*/

.policy-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#EEF4FF;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:22px;

}

.policy-icon span{

    font-size:28px;

    line-height:1;

}

/*-----------------------------------
Heading
------------------------------------*/

.policy-card h3{

    margin:0 0 18px;

    font-size:1.5rem;

    color:#0B2F5B;

    font-weight:700;

}

/*-----------------------------------
Body
------------------------------------*/

.policy-text{

    color:#475569;

    line-height:1.9;

    font-size:17px;

}

.policy-text p{

    margin:0;

}

/*-----------------------------------
Responsive
------------------------------------*/

@media(max-width:768px){

.policy-header{

text-align:left;

}

.policy-header .section-title{

font-size:2rem;

}

.policy-header .section-subtitle{

font-size:16px;

}

.policy-card{

padding:28px;

}

}

/*=====================================================
PUBLIC SERVICE & ELECTORAL HISTORY
=====================================================*/

.vsk-public-service{

    padding:90px 20px;

    background:#f8fafc;

}

.service-header{

    margin-bottom:50px;

}

.timeline{

    position:relative;

    margin-left:25px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:13px;

    top:0;

    bottom:0;

    width:3px;

    background:#dbe6f5;

}

.timeline-item{

    position:relative;

    margin-bottom:40px;

    padding-left:45px;

}

.timeline-dot{

    position:absolute;

    left:-1px;

    top:18px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#0B2F5B;

    border:5px solid #ffffff;

    box-shadow:0 0 0 4px #dbe6f5;

    z-index:5;

}

.timeline-card{

    background:#ffffff;

    border-radius:20px;

    padding:32px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.3s;

}

.timeline-card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.timeline-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

    flex-wrap:wrap;

    gap:15px;

}

.timeline-top h3{

    margin:0;

    font-size:28px;

    color:#0B2F5B;

}

.timeline-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.timeline-grid strong{

    display:block;

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#6b7280;

    margin-bottom:8px;

}

.timeline-grid p{

    margin:0;

    font-size:18px;

    color:#0B2F5B;

    font-weight:600;

}

/*==========================
Status Badges
==========================*/

.badge-green{

    background:#E8F7ED;

    color:#137333;

    padding:8px 18px;

    border-radius:30px;

    font-weight:700;

}

.badge-red{

    background:#FDECEC;

    color:#B42318;

    padding:8px 18px;

    border-radius:30px;

    font-weight:700;

}

.badge-yellow{

    background:#FFF7D6;

    color:#946200;

    padding:8px 18px;

    border-radius:30px;

    font-weight:700;

}

.badge-grey{

    background:#EEF2F7;

    color:#475467;

    padding:8px 18px;

    border-radius:30px;

    font-weight:700;

}

/*==========================
First-time candidate
==========================*/

.first-time-card{

    background:#ffffff;

    border-radius:20px;

    padding:45px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    text-align:center;

}

.first-time-card h3{

    color:#0B2F5B;

    margin-bottom:15px;

}

.first-time-card p{

    color:#4b5563;

    margin:0;

    font-size:18px;

}

/*==========================
Responsive
==========================*/

@media(max-width:900px){

.timeline-grid{

grid-template-columns: 1 fr;

}

.timeline{

margin-left:10px;

}

.timeline-item{

padding-left:35px;

}

.timeline-card{

padding:24px;

}

.timeline-top{

flex-direction:column;

align-items:flex-start;

}

}

/*=====================================================
  ELECTORAL TIMELINE
======================================================*/

.election-grid{
    display:flex;
    flex-direction:column;
    gap:35px;
    margin-top:40px;
    position:relative;
}

.election-grid::before{
    content:"";
    position:absolute;
    left:34px;
    top:0;
    bottom:0;
    width:4px;
    background:#d8e4ff;
}

.election-card{

    position:relative;

    background:#fff;

    border-radius:20px;

    padding:35px 35px 35px 70px;

    box-shadow:0 18px 40px rgba(20,45,90,.08);

    transition:.3s;

border-left:8px solid transparent;
transition:all .3s ease;
}

.election-card:hover{

    transform:translateY(-4px);

    box-shadow:0 24px 60px rgba(20,45,90,.14);

}

.timeline-dot{

    position:absolute;

    left:22px;

    top:45px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#1f6dff;

    border:6px solid #fff;

    box-shadow:0 0 0 5px #d8e4ff;

}

.election-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:25px;

    margin-bottom:30px;

}

.election-header h3{

    margin:0;

    font-size:32px;

    color:#0d2b5a;

}

.office{

    margin-top:8px;

    color:#6c7b95;

    font-size:18px;

}

.result-badge{

    padding:10px 18px;

    border-radius:50px;

    font-weight:700;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.result-badge.won{

    background:#dff7e5;

    color:#138a3d;

}

.result-badge.lost{

    background:#ffe3e3;

    color:#c62828;

}

.result-badge.neutral{

    background:#eef2f8;

    color:#516175;

}

.election-details{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:22px;

}

.election-details div{

    background:#f7f9fc;

    border-radius:14px;

    padding:18px;

}

.election-details strong{

    display:block;

    margin-bottom:8px;

    color:#0d2b5a;

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.election-details span{

    color:#24344d;

    font-size:18px;

    font-weight:600;

}

@media(max-width:768px){

    .election-grid::before{

        display:none;

    }

    .timeline-dot{

        display:none;

    }

    .election-card{

        padding:25px;

    }

    .election-header{

        flex-direction:column;

    }

}

/* ==========================================================
   Election Timeline Cards
========================================================== */

.election-grid{
    display:flex;
    flex-direction:column;
    gap:40px;
    margin-top:50px;
}

/* =====================================================
   Election Timeline Line
===================================================== */

.election-grid::before{

    content:"";

    position:absolute;

    left:28px;

    top:0;

    bottom:0;

    width:4px;

    background:linear-gradient(
        to bottom,
        #2563eb,
        #60a5fa,
        #2563eb
    );

    border-radius:20px;

}
.election-card{

    position:relative;
    
    margin-left:42px;

    background:#fff;

    border-radius:22px;

    padding:40px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    transition:.35s;

    border-left:6px solid #2563eb;

}

.election-card:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(0,0,0,.14);

}

.timeline-dot{

    position:absolute;

    left:-17px;

    top:48px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#2563eb;

    border:6px solid #edf4ff;

}

.election-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:35px;

    gap:30px;

}

.election-title h3{

    margin:0;

    font-size:36px;

    font-weight:800;

    letter-spacing:-0.5px;

    color:#0b2347;

    line-height:1.2;

}

.office-details{

    margin-top:12px;

}

.office-title{

    font-size:22px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:6px;

}

.office-area{

    color:#64748b;

    font-size:17px;

    font-weight:500;

}

.result-badge{

    padding:12px 22px;

    border-radius:999px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:10px;

    text-transform:uppercase;

}

.result-badge.won{

    background:#dcfce7;

    color:#15803d;

}

.result-badge.lost{

    background:#fee2e2;

    color:#dc2626;

}

.result-badge.neutral{

    background:#eef2ff;

    color:#3730a3;

}

.election-details{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));

    gap:20px;

}

.detail-card{

    background:#f8fafc;

    border-radius:18px;

    padding:26px;

    transition:.3s;

}

.detail-card:hover{

    background:#eef5ff;

}

.detail-icon{

    font-size:28px;

    margin-bottom:14px;

}

.detail-value{

    font-size:30px;

    font-weight:800;

    color:#08234f;

}

.detail-label{

    margin-top:8px;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#64748b;

    font-weight:700;

}

/* ==========================================
   Election Timeline
========================================== */

.election-grid{
    position:relative;
    padding-left:45px;
}

.election-grid::before{

    content:"";

    position:absolute;

    left:22px;

    top:0;

    bottom:0;

    width:4px;

    background:linear-gradient(
        to bottom,
        #3b82f6,
        #60a5fa,
        #93c5fd
    );

    border-radius:20px;

}

.timeline-dot{

    position:absolute;

    left:-58px;

    top:38px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#2563eb;

    border:6px solid #dbeafe;

    box-shadow:0 0 0 4px #ffffff;

    z-index:10;

    transition:.3s;

}

.election-card:hover .timeline-dot{

    transform:scale(1.25);

    box-shadow:0 0 0 10px rgba(37,99,235,.15);

}

.badge-text{

    font-weight:700;

    letter-spacing:.08em;

}

/* ==========================================================
   Election Ribbon
========================================================== */

.election-ribbon{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:-40px -40px 30px;

    padding:16px 28px;

    border-radius:22px 22px 0 0;

    color:#fff;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}
.election-ribbon.won{

    background:linear-gradient(135deg,#16a34a,#15803d);

}

.election-ribbon.lost{

    background:linear-gradient(135deg,#dc2626,#b91c1c);

}

.election-ribbon.runnerup{

    background:linear-gradient(135deg,#f59e0b,#d97706);

}

.election-ribbon.unopposed{

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

}

.election-ribbon.withdrawn{

    background:linear-gradient(135deg,#6b7280,#4b5563);

}

.election-ribbon.neutral{

    background:linear-gradient(135deg,#64748b,#475569);

}

.ribbon-type{

    font-size:13px;

}

.ribbon-year{

    font-size:20px;

    font-weight:800;

}

.election-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(15,23,42,.12);

}

.election-name{

    margin:0 0 12px;

    font-size:38px;

    font-weight:800;

    color:#0f172a;

    line-height:1.2;

}

.office-title{

    margin-top:8px;

    font-size:24px;

    font-weight:700;

    color:#1e3a8a;

}

.office-area{

    margin-top:6px;

    font-size:18px;

    color:#64748b;

}

/*
=========================================
Timeline Card Animation
=========================================
*/

.election-card{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.election-card.show{

    opacity:1;

    transform:translateY(0);

}

/*=====================================================
LEGISLATIVE RECORD
=====================================================*/

.vsk-legislative-record{

    margin-top:80px;

}

.legislative-summary{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin:40px 0;

}

.summary-for{

    border-top:5px solid #16a34a;

}

.summary-against{

    border-top:5px solid #dc2626;

}

.summary-abstained{

    border-top:5px solid #d97706;

}

.summary-attendance{

    border-top:5px solid #2563eb;

}

/*=====================================================
LEGISLATIVE EMPTY STATE
=====================================================*/

.legislative-banner{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:28px;

    margin-top:35px;

    border-radius:18px;

    border-left:6px solid;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.legislative-banner.no-service{

    background:#eff6ff;

    border-color:#2563eb;

}

.legislative-banner.records-pending{

    background:#fffbeb;

    border-color:#f59e0b;

}

.banner-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    flex-shrink:0;

    background:white;

}

.banner-content h3{

    margin:0 0 8px;

    font-size:24px;

    color:#0f172a;

}

.banner-content p{

    margin:0;

    color:#64748b;

    line-height:1.8;

    font-size:16px;

}

/*=====================================================
LEGISLATIVE VOTE CARD
=====================================================*/

.legislative-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    margin:30px 0;

    box-shadow:0 12px 40px rgba(15,23,42,.08);

    transition:.3s;

}

.legislative-card:hover{

    transform:translateY(-4px);

}

.legislative-ribbon{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 26px;

    color:#fff;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.legislative-ribbon.for{

    background:#16a34a;

}

.legislative-ribbon.against{

    background:#dc2626;

}

.legislative-ribbon.abstained{

    background:#d97706;

}

.legislative-ribbon.absent{

    background:#64748b;

}

.legislative-ribbon.present{

    background:#2563eb;

}

.legislative-body{

    padding:34px;

}

.bill-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:10px;

}

.bill-header h3{

    margin:0;

    font-size:30px;

}

.bill-header a{

    text-decoration:none;

    color:#0f172a;

}

.bill-category{

    background:#eef2ff;

    color:#1d4ed8;

    padding:8px 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.bill-number{

    color:#64748b;

    margin-bottom:25px;

}

.vote-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.vote-item{

    background:#f8fafc;

    border-radius:14px;

    padding:18px;

}

.vote-item strong{

    display:block;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#64748b;

    margin-bottom:8px;

}

.vote-item span{

    font-size:18px;

    font-weight:600;

    color:#0f172a;

}

.official-link{

    display:inline-block;

    margin-top:30px;

    text-decoration:none;

    color:#2563eb;

    font-weight:700;

}

/*=====================================================
BILL HERO
=====================================================*/

.bill-hero{

    margin:40px 0;

}

.bill-hero-card{

    background:linear-gradient(135deg,#1e3a8a,#2563eb);

    color:#fff;

    padding:50px;

    border-radius:24px;

    box-shadow:0 18px 45px rgba(0,0,0,.18);

}

.bill-hero-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;

}

.bill-hero h1{

    margin:0;

    font-size:42px;

    color:#fff;

}

.bill-number{

    margin-top:10px;

    color:rgba(255,255,255,.85);

    font-size:18px;

}

.bill-status{

    background:#fff;

    color:#1e3a8a;

    padding:12px 24px;

    border-radius:999px;

    font-weight:700;

    text-transform:uppercase;

}

.bill-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin:30px 0;

}

.bill-meta span{

    background:rgba(255,255,255,.12);

    padding:10px 18px;

    border-radius:999px;

    backdrop-filter:blur(10px);

}

.bill-summary{

    max-width:900px;

    line-height:1.9;

    font-size:18px;

    margin-bottom:35px;

}

.bill-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.bill-btn{

    background:#fff;

    color:#1e3a8a;

    padding:14px 24px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.bill-btn:hover{

    transform:translateY(-2px);

}

.bill-btn.secondary{

    background:transparent;

    color:#fff;

    border:2px solid rgba(255,255,255,.4);

}

/*=====================================================
BILL SUMMARY
=====================================================*/

.bill-summary-section{

    margin:80px 0;

}

.bill-summary-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:start;

}

.bill-main{

    background:#fff;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(15,23,42,.08);

    line-height:1.9;

}

.bill-side{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.info-card{

    background:#fff;

    padding:28px;

    border-radius:18px;

    box-shadow:0 10px 35px rgba(15,23,42,.08);

}

.info-card h3{

    margin-top:0;

}

.info-card ul{

    margin:0;

    padding-left:20px;

}

.info-card li{

    margin:12px 0;

}

.impact-box{

    margin-top:40px;

    background:#eef6ff;

    border-left:6px solid #2563eb;

    padding:35px;

    border-radius:18px;

}

/*=====================================================
BILL VOTING
=====================================================*/

.bill-voting{

    margin:80px 0;

}

.vote-summary{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin:40px 0;

}

.vote-total{

    background:#fff;

    padding:25px;

    border-radius:18px;

    text-align:center;

    font-size:22px;

    font-weight:700;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.vote-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.vote-row{

    display:grid;

    grid-template-columns:2fr 180px 160px;

    align-items:center;

    gap:20px;

    background:#fff;

    padding:25px;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(15,23,42,.06);

}

.vote-position{

    text-align:center;

    font-weight:700;

    padding:8px 16px;

    border-radius:999px;

}

.vote-position.for{

    background:#dcfce7;

    color:#166534;

}

.vote-position.against{

    background:#fee2e2;

    color:#991b1b;

}

.vote-position.abstained{

    background:#fef3c7;

    color:#92400e;

}

.vote-position.absent{

    background:#f1f5f9;

    color:#475569;

}

.vote-profile-link{

    text-decoration:none;

    font-weight:700;

    color:#2563eb;

}

/*=====================================================
VOTE FILTERS
=====================================================*/

.vote-filters{

    display:grid;

    grid-template-columns:2fr repeat(3,1fr);

    gap:20px;

    margin:40px 0;

}

.vote-filters input,
.vote-filters select{

    padding:14px 18px;

    border:1px solid #dbe4ef;

    border-radius:12px;

    font-size:15px;

    background:#fff;

}

.vote-filters input:focus,
.vote-filters select:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/*=====================================================
NEWS & MEDIA
=====================================================*/

.candidate-media{

    margin:90px 0;

}

.media-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:32px;

}

.media-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(15,23,42,.08);

    transition:all .35s ease;

    display:flex;

    flex-direction:column;

}

.media-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(37,99,235,.15);

}

.media-image{

    position:relative;

    height:220px;

    overflow:hidden;

}

.media-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .5s ease;

}

.media-card:hover .media-image img{

    transform:scale(1.08);

}

.media-badge{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 16px;

    border-radius:999px;

    background:#2563eb;

    color:#fff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.media-content{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.media-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;

    font-size:13px;

    color:#64748b;

    gap:10px;

}

.media-publisher{

    font-weight:600;

}

.media-date{

    white-space:nowrap;

}

.media-content h3{

    margin:0 0 16px;

    font-size:22px;

    line-height:1.35;

    color:#0f172a;

}

.media-content p{

    color:#475569;

    line-height:1.7;

    margin:0 0 24px;

    flex:1;

}

.media-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#2563eb;

    font-weight:700;

    text-decoration:none;

    transition:gap .25s ease;

}

.media-link:hover{

    gap:14px;

}

/*=====================================
EMPTY MEDIA
=====================================*/

.empty-media{

    background:linear-gradient(135deg,#f8fbff,#eef4ff);

    border:2px dashed #cbd5e1;

    border-radius:24px;

    padding:70px 50px;

    text-align:center;

}

.empty-icon{

    font-size:64px;

    margin-bottom:24px;

}

.empty-media h3{

    font-size:34px;

    color:#0f172a;

    margin-bottom:18px;

}

.empty-media p{

    font-size:18px;

    color:#475569;

    max-width:650px;

    margin:0 auto 18px;

    line-height:1.8;

}

.empty-media span{

    color:#94a3b8;

    font-size:15px;

}

.section-kicker{

    display:inline-block;

    background:#dbeafe;

    color:#2563eb;

    padding:6px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.08em;

    margin-bottom:16px;

}

/*=====================================================
CONTACT & OFFICIAL LINKS
=====================================================*/

.candidate-contact{

    margin:90px 0;

}

.contact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));

    gap:35px;

}

.contact-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 10px 35px rgba(15,23,42,.08);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(37,99,235,.12);

}

.contact-card h3{

    font-size:24px;

    margin-bottom:25px;

    color:#0f172a;

}

.contact-card a,
.contact-card div{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#334155;

    text-decoration:none;

    font-size:17px;

    line-height:1.6;

}

.contact-card a:hover{

    color:#2563eb;

}

.verified-contact{

    margin-top:25px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#dcfce7;

    color:#166534;

    padding:10px 18px;

    border-radius:999px;

    font-weight:700;

    font-size:15px;

}

.social-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.social-grid a{

    justify-content:center;

    padding:14px;

    border-radius:14px;

    background:#f8fafc;

    transition:.3s;

    font-weight:600;

}

.social-grid a:hover{

    background:#2563eb;

    color:#fff;

}

.facebook{

    border-left:5px solid #1877F2;

}

.twitter{

    border-left:5px solid #000;

}

.instagram{

    border-left:5px solid #E4405F;

}

.linkedin{

    border-left:5px solid #0A66C2;

}

.youtube{

    border-left:5px solid #FF0000;

}

.tiktok{

    border-left:5px solid #000;

}

.empty-contact{

    background:linear-gradient(135deg,#f8fbff,#eef5ff);

    border:2px dashed #cbd5e1;

    border-radius:24px;

    padding:70px 50px;

    text-align:center;

}

.empty-contact .empty-icon{

    font-size:60px;

    margin-bottom:20px;

}

.empty-contact h3{

    font-size:32px;

    color:#0f172a;

    margin-bottom:18px;

}

.empty-contact p{

    max-width:600px;

    margin:auto;

    color:#64748b;

    line-height:1.8;

}

/*=================================================
CANDIDATE PROFILE NAVIGATION
=================================================*/

.candidate-navigation{

    position:sticky;

    top:0;

    z-index:100;

    background:#ffffff;

    border-top:1px solid #e5e7eb;

    border-bottom:1px solid #e5e7eb;
    
    margin-top:-10px;

    box-shadow:0 4px 18px rgba(15,23,42,.06);

}

.candidate-nav-list{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    list-style:none;

    margin:0;

    padding:14px 0;

    overflow-x:auto;

    scrollbar-width:none;

}

.candidate-nav-list::-webkit-scrollbar{

    display:none;

}

.candidate-nav-list li{

    margin:0;

}

.candidate-nav-list a{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    text-decoration:none;

    color:#334155;

    font-weight:600;

    transition:.25s;

    white-space:nowrap;

}

.candidate-nav-list a:hover{

    background:#eff6ff;

    color:#2563eb;

}

.candidate-nav-list a.active{

    background:#1e40af;

    color:#fff;

}
.candidate-nav-list span{

    font-size:15px;

}

html{

    scroll-behavior:smooth;

}

/*=====================================================
SMALL CANDIDATE CARD
=====================================================*/

.related-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

    gap:28px;

    margin-top:40px;

}

.candidate-small-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(15,23,42,.08);

    transition:all .35s ease;

    border:1px solid #e5e7eb;

}

.candidate-small-card:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 50px rgba(37,99,235,.18);

}

.candidate-card-link{

    display:block;

    color:inherit;

    text-decoration:none;

}

.candidate-card-image{

    position:relative;

    height:180px;

    overflow:hidden;

    background:#f8fafc;

}

.candidate-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.candidate-badge{

    position:absolute;

    top:14px;

    right:14px;

    background:#16a34a;

    color:#fff;

    padding:7px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.candidate-small-card:hover img{

    transform:scale(1.05);

}

.candidate-card-body{

    padding:20px;

}

.candidate-card-body h3{

    margin:0 0 10px;

    font-size:26px;

    color:#0f172a;

    line-height:1.3;

}

.candidate-office{

    display:inline-block;

    margin-bottom:14px;

    background:#dbeafe;

    color:#1d4ed8;

    padding:6px 14px;

    border-radius:999px;

    font-size:13px;
    
    letter-spacing:.5px;

    text-transform:uppercase;

    font-weight:700;

}

.candidate-area{

    color:#64748b;

    margin-top:6px;

    margin-bottom:18px;

}

.candidate-party{

    display:inline-flex;

    padding:8px 16px;

    border-radius:999px;

    background:#eef2ff;

    color:#1d4ed8;

    font-weight:700;

    margin-bottom:22px;

}

.candidate-verified{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:#dcfce7;

    color:#166534;

    padding:8px 14px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    margin-bottom:24px;

}

.candidate-button{

    display:flex;

    justify-content:center;

    align-items:center;

    background:#2563eb;

    color:#fff;

    padding:14px;

    border-radius:14px;

    font-weight:700;

    transition:.3s;

}

.candidate-small-card:hover .candidate-button{

    background:#1d4ed8;

}

@media(max-width:768px){

.related-grid{

    grid-template-columns:1fr;

}

}

.candidate-badge{

    position:absolute;

    top:14px;

    right:14px;

    background:#15803d;

    color:#fff;

    padding:7px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.3px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.candidate-card-image{

    height:180px;

}

.candidate-card-body{

    padding:20px;

}

.candidate-card-body h3{

    font-size:24px;

    margin-bottom:8px;

}

.candidate-area{

    display:flex;
    align-items:center;
    gap:8px;

    color:#64748b;

    font-size:14px;

    margin:14px 0 18px;

}

.candidate-button{

    margin-top:10px;

}

/* -------------------------------------------------------
   Base Party Badge
------------------------------------------------------- */

.candidate-party{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    font-size:13px;
    font-weight:700;
    letter-spacing:.3px;

    color:#fff;

    margin-top:12px;

}

/* -------------------------------------------------------
   Political Parties
------------------------------------------------------- */

.party-odm{

    background:#f58220;

}

.party-uda{

    background:linear-gradient(
        90deg,
        #facc15 0%,
        #15803d 100%
    );

    color:#111827;

}

.party-jubilee{

    background:#dc2626;

}

.party-wiper{

    background:#2563eb;

}

.party-ccm{

    background:#16a34a;

}

.party-dap-k{

    background:#22c55e;

}

.party-anc{

    background:#f59e0b;

}

.party-ford-kenya{

    background:#10b981;

}

.party-ccu{

    background:#06b6d4;

}

.party-independent{

    background:#6b7280;

}

.party-independent-candidate{

    background:#6b7280;

}

/* Unknown party */

.candidate-party:not([class*="party-"]){

    background:#334155;

}

.fact-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 18px;

    background:#2563eb;

    color:#fff !important;

    border-radius:12px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.fact-button:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

/* Status Badge */

.candidate-status{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

}

/* Incumbent */

.status-incumbent{

    background:#dbeafe;

    color:#1d4ed8;

}

/* Aspirant */

.status-aspirant{

    background:#fff7ed;

    color:#ea580c;

}

/* Elected */

.status-elected{

    background:#dcfce7;

    color:#15803d;

}

/* Former Leader */

.status-former-leader{

    background:#f1f5f9;

    color:#475569;

}

/* Nominated */

.status-nominated{

    background:#ede9fe;

    color:#6d28d9;

}

/* Independent Candidate */

.status-independent-candidate{

    background:#fef3c7;

    color:#92400e;

}