/* ======================================================
   VOTE SMART KE
   COMPARE CANDIDATES PAGE
====================================================== */

/* ------------------------------------------------------
   PAGE
------------------------------------------------------ */

.compare-candidates-page {
    padding: 80px 0 100px;
    background: #f4f7fb;
    color: #1e293b;
}

.compare-candidates-page *,
.compare-candidates-page *::before,
.compare-candidates-page *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------
   MAIN CONTAINER
------------------------------------------------------ */

.compare-candidates-page .vsk-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* ------------------------------------------------------
   PAGE HEADER
------------------------------------------------------ */

.compare-page-header {
    max-width: 850px;
    margin: 0 auto 50px;
    text-align: center;
}

.compare-page-kicker {
    display: inline-block;
    margin-bottom: 14px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.compare-page-title {
    margin: 0 0 16px;
    color: #17233a;
    font-size: clamp(38px, 5vw, 58px);
    font-weight: 800;
    line-height: 1.1;
}

.compare-page-description {
    max-width: 760px;
    margin: 0 auto;
    color: #64748b;
    font-size: 18px;
    line-height: 1.8;
}

/* ======================================================
   CHOOSE CANDIDATES SECTION
====================================================== */

.comparison-selector,
.choose-candidates,
.compare-selector {

    max-width: 1100px;
    margin: 0 auto 55px;
    padding: 38px 42px;

    background: #ffffff;

    border: 1px solid #dbe4f0;
    border-radius: 24px;

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

}


/* ======================================================
   SECTION HEADING
====================================================== */

.comparison-selector h2,
.choose-candidates h2,
.compare-selector h2 {

    margin: 0;

    color: #172b4d;

    font-size: 32px;
    line-height: 1.2;

    font-weight: 800;

    text-align: center;

}


.comparison-selector > p,
.choose-candidates > p,
.compare-selector > p {

    max-width: 650px;

    margin: 10px auto 30px;

    color: #64748b;

    font-size: 16px;

    line-height: 1.7;

    text-align: center;

}


/* ======================================================
   CANDIDATE SELECTION ROW
====================================================== */

.comparison-selector form,
.choose-candidates form,
.compare-selector form {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        70px
        minmax(0, 1fr);

    align-items: end;

    gap: 24px;

}


/* ======================================================
   INDIVIDUAL CANDIDATE FIELD
====================================================== */

.comparison-selector .form-group,
.choose-candidates .form-group,
.compare-selector .form-group {

    min-width: 0;

}


.comparison-selector label,
.choose-candidates label,
.compare-selector label {

    display: block;

    margin-bottom: 9px;

    color: #334155;

    font-size: 14px;

    font-weight: 700;

}


/* ======================================================
   DROPDOWNS
====================================================== */

.comparison-selector select,
.choose-candidates select,
.compare-selector select {

    width: 100%;

    height: 58px;

    padding: 0 48px 0 18px;

    background-color: #f8fafc;

    color: #172b4d;

    border: 1px solid #cbd5e1;

    border-radius: 14px;

    font-size: 16px;

    font-weight: 500;

    outline: none;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5L10 12l5-4.5' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position:
    right 18px center;

    transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;

}


.comparison-selector select:hover,
.choose-candidates select:hover,
.compare-selector select:hover {

    background-color: #ffffff;

    border-color: #94a3b8;

}


.comparison-selector select:focus,
.choose-candidates select:focus,
.compare-selector select:focus {

    background-color: #ffffff;

    border-color: #2563eb;

    box-shadow:
    0 0 0 4px
    rgba(37, 99, 235, 0.12);

}


/* ======================================================
   VS BADGE
====================================================== */

.comparison-selector .vs,
.choose-candidates .vs,
.compare-selector .vs,
.comparison-selector .comparison-versus,
.choose-candidates .comparison-versus,
.compare-selector .comparison-versus {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto;

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

    color: #ffffff;

    border: 5px solid #eff6ff;

    border-radius: 50%;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.08em;

    box-shadow:
    0 8px 20px
    rgba(37, 99, 235, 0.25);

}


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

.comparison-selector button,
.choose-candidates button,
.compare-selector button {

    grid-column: 1 / -1;

    justify-self: center;

    min-width: 260px;

    height: 56px;

    margin-top: 10px;

    padding: 0 30px;

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

    color: #ffffff;

    border: none;

    border-radius: 14px;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
    0 10px 24px
    rgba(37, 99, 235, 0.24);

    transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;

}


.comparison-selector button:hover,
.choose-candidates button:hover,
.compare-selector button:hover {

    transform: translateY(-2px);

    box-shadow:
    0 14px 30px
    rgba(37, 99, 235, 0.32);

}


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

@media screen and (max-width: 800px) {

    .comparison-selector,
    .choose-candidates,
    .compare-selector {

        padding: 28px 20px;

        border-radius: 18px;

    }


    .comparison-selector form,
    .choose-candidates form,
    .compare-selector form {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .comparison-selector .vs,
    .choose-candidates .vs,
    .compare-selector .vs {

        width: 50px;

        height: 50px;

        order: 2;

    }


    .comparison-selector button,
    .choose-candidates button,
    .compare-selector button {

        width: 100%;

        min-width: 0;

    }

}

/* ------------------------------------------------------
   COMPARISON AREA
------------------------------------------------------ */

.comparison-results {
    width: 100%;
}

/* ------------------------------------------------------
   CANDIDATE PROFILE CARDS
------------------------------------------------------ */

.comparison-candidates,
.candidate-comparison-header,
.compare-candidate-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
    margin-bottom: 42px;
}

.compare-candidate-card,
.comparison-candidate-card,
.candidate-comparison-card {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dce5f0;
    border-radius: 24px;
    box-shadow: 0 16px 45px rgba(15, 23, 42, 0.09);
}

/* ------------------------------------------------------
   PROFILE PHOTO
------------------------------------------------------ */

.compare-candidate-photo,
.comparison-candidate-photo,
.candidate-comparison-photo {
    position: relative;
    width: 100%;
    height: 330px;
    overflow: hidden;
    background: #e2e8f0;
}

.compare-candidate-photo img,
.comparison-candidate-photo img,
.candidate-comparison-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.45s ease;
}

.compare-candidate-card:hover
.compare-candidate-photo img,
.comparison-candidate-card:hover
.comparison-candidate-photo img,
.candidate-comparison-card:hover
.candidate-comparison-photo img {
    transform: scale(1.04);
}

/* ------------------------------------------------------
   PROFILE INFORMATION
------------------------------------------------------ */

.compare-candidate-content,
.comparison-candidate-content,
.candidate-comparison-content {
    padding: 28px;
}

.compare-candidate-content h2,
.comparison-candidate-content h2,
.candidate-comparison-content h2 {
    margin: 0 0 10px;
    color: #17233a;
    font-size: 28px;
    line-height: 1.2;
}

.compare-candidate-content h2 a,
.comparison-candidate-content h2 a,
.candidate-comparison-content h2 a {
    color: inherit;
    text-decoration: none;
}

.compare-candidate-content h2 a:hover,
.comparison-candidate-content h2 a:hover,
.candidate-comparison-content h2 a:hover {
    color: #2563eb;
}

.compare-candidate-office,
.candidate-office {
    margin-bottom: 12px;
    color: #2563eb;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.compare-candidate-location,
.candidate-location {
    margin-bottom: 14px;
    color: #64748b;
    font-size: 15px;
}

.compare-candidate-party,
.candidate-party {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 13px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
}

/* ------------------------------------------------------
   VIEW PROFILE LINK
------------------------------------------------------ */

.compare-profile-link,
.view-profile-link {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    color: #1749a8;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.compare-profile-link:hover,
.view-profile-link:hover {
    color: #2563eb;
}

/* ------------------------------------------------------
   SECTION HEADINGS
------------------------------------------------------ */

.comparison-section {
    margin-top: 55px;
}

.comparison-section-header {
    margin-bottom: 24px;
}

.comparison-section-header h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 8px;
    color: #17233a;
    font-size: 31px;
}

.comparison-section-header p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

/* ------------------------------------------------------
   TWO-COLUMN COMPARISON CARDS
------------------------------------------------------ */

.comparison-grid,
.comparison-row,
.comparison-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
}

.comparison-card,
.compare-info-card {
    min-width: 0;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #dce5f0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.comparison-card h3,
.compare-info-card h3 {
    margin: 0 0 12px;
    color: #1e293b;
    font-size: 16px;
}

.comparison-card p,
.compare-info-card p {
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.75;
}

/* ------------------------------------------------------
   BACKGROUND INFORMATION
------------------------------------------------------ */

.candidate-background {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.background-card {
    min-width: 0;
    padding: 30px;
    background: #ffffff;
    border: 1px solid #dce5f0;
    border-radius: 20px;
}

.background-card h3 {
    margin: 0 0 24px;
    color: #17233a;
    font-size: 20px;
}

.background-item {
    padding: 15px 0;
    border-bottom: 1px solid #e8edf4;
}

.background-item:last-child {
    border-bottom: none;
}

.background-label {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.background-value {
    color: #1e293b;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}

/* ------------------------------------------------------
   ISSUE / VISION COMPARISON
------------------------------------------------------ */

.issue-comparison-grid,
.vision-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.issue-card,
.vision-card {
    min-width: 0;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #dce5f0;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.issue-card h3,
.vision-card h3 {
    margin: 0 0 14px;
    color: #1d4ed8;
    font-size: 19px;
}

.issue-card p,
.vision-card p {
    margin: 0;
    color: #475569;
    line-height: 1.8;
}

/* ------------------------------------------------------
   EMPTY / NOT PROVIDED
------------------------------------------------------ */

.not-provided,
.comparison-empty {
    color: #94a3b8;
    font-style: italic;
}

/* ------------------------------------------------------
   RESPONSIVE
------------------------------------------------------ */

@media (max-width: 900px) {

    .compare-selector-form,
    .compare-form {
        grid-template-columns: 1fr;
    }

    .compare-vs {
        justify-self: center;
        margin: 0;
    }

    .comparison-candidates,
    .candidate-comparison-header,
    .compare-candidate-cards,
    .comparison-grid,
    .comparison-row,
    .comparison-card-grid,
    .candidate-background,
    .issue-comparison-grid,
    .vision-comparison-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .compare-candidates-page {
        padding: 55px 0 75px;
    }

    .compare-candidates-page .vsk-container {
        width: min(100% - 24px, 1180px);
    }

    .compare-selector {
        padding: 24px 18px;
        border-radius: 18px;
    }

    .compare-page-title {
        font-size: 38px;
    }

    .compare-page-description {
        font-size: 16px;
    }

    .compare-candidate-photo,
    .comparison-candidate-photo,
    .candidate-comparison-photo {
        height: 280px;
    }

    .compare-candidate-content,
    .comparison-candidate-content,
    .candidate-comparison-content,
    .comparison-card,
    .compare-info-card,
    .background-card,
    .issue-card,
    .vision-card {
        padding: 22px;
    }

}

/* ======================================================
   SIDE-BY-SIDE CANDIDATE HEADER
====================================================== */

.comparison-candidate-heads {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) !important;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 45px;
}

.comparison-candidate-head {
    display: flex !important;
    align-items: center;
    gap: 20px;
    min-width: 0;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #dbe4ef;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

/* Small, professional candidate image */

.comparison-profile-image {
    flex: 0 0 105px;
    width: 105px !important;
    height: 105px !important;
    overflow: hidden;
    border: 4px solid #eff6ff;
    border-radius: 50%;
    background: #e2e8f0;
}

.comparison-profile-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top;
    border-radius: 50% !important;
}

/* Candidate information */

.comparison-candidate-info {
    flex: 1;
    min-width: 0;
}

.comparison-candidate-label {
    display: inline-block;
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.comparison-candidate-head h2 {
    margin: 0 0 6px !important;
    color: #17233a;
    font-size: 25px !important;
    line-height: 1.2;
}

.comparison-candidate-position {
    margin: 0 0 14px !important;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
}

.comparison-profile-link {
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.comparison-profile-link:hover {
    text-decoration: underline;
}

/* VS badge */

.comparison-versus {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 70px;
    min-width: 70px;
}

.comparison-versus span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 5px solid #f4f7fb;
    border-radius: 50%;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.25);
}

/* ------------------------------------------------------
   TABLET AND MOBILE
------------------------------------------------------ */

@media (max-width: 850px) {

    .comparison-candidate-heads {
        grid-template-columns: 1fr !important;
    }

    .comparison-versus {
        width: 100%;
        min-width: 0;
        height: 35px;
    }

}

@media (max-width: 550px) {

    .comparison-candidate-head {
        align-items: flex-start;
        padding: 18px;
        gap: 14px;
    }

    .comparison-profile-image {
        flex-basis: 75px;
        width: 75px !important;
        height: 75px !important;
    }

    .comparison-candidate-head h2 {
        font-size: 20px !important;
    }

}

/* =====================================================
   CANDIDATE SELECTION TABLE
===================================================== */

.compare-selector-card {

    width: 100%;
    max-width: 1180px;

    margin: 0 auto 55px;

    padding: 42px;

    background: #ffffff;

    border: 1px solid #dbe4f0;

    border-radius: 24px;

    box-shadow:
        0 18px 45px
        rgba(15, 23, 42, 0.08);

    box-sizing: border-box;

}


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

.compare-selector-heading {

    text-align: center;

    max-width: 720px;

    margin: 0 auto 35px;

}

.compare-kicker {

    display: inline-block;

    margin-bottom: 8px;

    color: #2563eb;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.8px;

}

.compare-selector-heading h2 {

    margin: 0 0 10px;

    color: #172b4d;

    font-size: 34px;

    line-height: 1.2;

}

.compare-selector-heading p {

    margin: 0;

    color: #64748b;

    font-size: 16px;

    line-height: 1.7;

}


/* ---------------------------------
   Two-column selection layout
--------------------------------- */

.compare-selector-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        90px
        minmax(0, 1fr);

    align-items: end;

    gap: 24px;

    padding: 28px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    box-sizing: border-box;

}


/* ---------------------------------
   Candidate columns
--------------------------------- */

.candidate-select-column {

    min-width: 0;

}

.candidate-select-column label {

    display: block;

    margin-bottom: 10px;

    color: #334155;

    font-size: 14px;

    font-weight: 800;

}

.candidate-select-column select {

    display: block;

    width: 100%;

    height: 60px;

    padding:
        0 50px
        0 20px;

    border:
        1px solid
        #cbd5e1;

    border-radius: 14px;

    background-color: #ffffff;

    color: #172b4d;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    outline: none;

    box-sizing: border-box;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}

.candidate-select-column select:hover {

    border-color: #94a3b8;

}

.candidate-select-column select:focus {

    border-color: #2563eb;

    box-shadow:
        0 0 0 4px
        rgba(37, 99, 235, 0.12);

}


/* ---------------------------------
   VS divider
--------------------------------- */

.compare-selector-vs {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 60px;

}

.compare-selector-vs span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    border-radius: 50%;

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

    color: #ffffff;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 1px;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, 0.25);

}


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

.compare-button-wrap {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    margin-top: 28px;

}

.compare-submit-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 240px;

    min-height: 56px;

    padding: 0 30px;

    border: none;

    border-radius: 14px;

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

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 10px 24px
        rgba(249, 115, 22, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}

.compare-submit-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(249, 115, 22, 0.35);

}

/* =====================================================
   TABLET AND MOBILE
===================================================== */

@media screen and (max-width: 800px) {

    .compare-selector-card {

        padding: 28px 20px;

        border-radius: 18px;

    }

    .compare-selector-grid {

        grid-template-columns: 1fr;

        gap: 20px;

        padding: 20px;

    }

    .compare-selector-vs {

        height: auto;

    }

    .compare-selector-vs span {

        width: 46px;

        height: 46px;

    }

    .compare-selector-heading h2 {

        font-size: 28px;

    }

    .compare-submit-button {

        width: 100%;

    }

}

/* =====================================
   CANDIDATE BACKGROUND
===================================== */

.comparison-section {

    width: 100%;

    margin: 55px 0;

    padding: 38px;

    background: #ffffff;

    border: 1px solid #dbe4ef;

    border-radius: 24px;

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

    box-sizing: border-box;

}


/* =====================================
   SECTION HEADING
===================================== */

.comparison-section-header {

    margin-bottom: 30px;

    padding-bottom: 22px;

    border-bottom: 1px solid #e2e8f0;

}

.comparison-section-header h2 {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0 0 8px;

    color: #1e293b;

    font-size: 32px;

    font-weight: 800;

    line-height: 1.2;

}

.comparison-section-header p {

    margin: 0;

    color: #64748b;

    font-size: 16px;

    line-height: 1.6;

}

/* =====================================
   CANDIDATE BACKGROUND – TWO-COLUMN LAYOUT
===================================== */

.comparison-section .comparison-grid {

    display: grid;

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

    gap: 24px;

    width: 100%;

    align-items: stretch;

}


/* =====================================
   INDIVIDUAL CANDIDATE BACKGROUND CARD
===================================== */

.comparison-section .comparison-column {

    min-width: 0;

    padding: 26px;

    background: #f8fafc;

    border: 1px solid #dbe4ef;

    border-radius: 18px;

    box-sizing: border-box;

}


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

.comparison-section .comparison-column h3 {

    margin: 0 0 20px;

    padding-bottom: 15px;

    color: #1e293b;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.3;

    border-bottom: 2px solid #2563eb;

}


/* =====================================
   BACKGROUND DETAILS
===================================== */

.comparison-section .comparison-column p {

    display: grid;

    grid-template-columns: minmax(130px, 42%) 1fr;

    gap: 18px;

    align-items: start;

    margin: 0;

    padding: 14px 0;

    color: #475569;

    font-size: 15px;

    line-height: 1.6;

    border-bottom: 1px solid #e2e8f0;

}


/* Remove the last divider */

.comparison-section .comparison-column p:last-child {

    border-bottom: none;

}


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

@media (max-width: 768px) {

    .comparison-section {

        padding: 24px 18px;

    }

    .comparison-section .comparison-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }

    .comparison-section .comparison-column {

        padding: 22px 18px;

    }

    .comparison-section .comparison-column p {

        grid-template-columns: 1fr;

        gap: 4px;

    }

}

/* =====================================
   CANDIDATE BACKGROUND TABLE
===================================== */

.comparison-background-section {

    overflow: hidden;

}


/* =====================================
   TABLE CONTAINER
===================================== */

.comparison-table-wrap {

    width: 100%;

    overflow-x: auto;

    border: 1px solid #d8e1ec;

    border-radius: 18px;

    background: #ffffff;

}


/* =====================================
   TABLE
===================================== */

.candidate-comparison-table {

    width: 100%;

    min-width: 720px;

    border-collapse: collapse;

    table-layout: fixed;

    color: #334155;

}


/* =====================================
   TABLE HEADER
===================================== */

.candidate-comparison-table thead {

    background: linear-gradient(
        135deg,
        #173f7a,
        #285da8
    );

}


.candidate-comparison-table thead th {

    padding: 20px 22px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;

    text-align: left;

    vertical-align: middle;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.18);

}


.candidate-comparison-table thead th:last-child {

    border-right: none;

}


/* Basis column */

.candidate-comparison-table
.comparison-basis-heading {

    width: 28%;

    color: #dbeafe;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    font-size: 12px;

}


/* =====================================
   TABLE ROWS
===================================== */

.candidate-comparison-table tbody tr {

    transition:
        background 0.2s ease;

}


.candidate-comparison-table tbody tr:nth-child(even) {

    background: #f8fafc;

}


.candidate-comparison-table tbody tr:hover {

    background: #eef5ff;

}


/* =====================================
   BASIS LABELS
===================================== */

.candidate-comparison-table tbody th {

    padding: 18px 22px;

    background: #f1f5f9;

    color: #1e3a5f;

    font-size: 15px;

    font-weight: 800;

    text-align: left;

    border-right: 1px solid #d8e1ec;

    border-bottom: 1px solid #d8e1ec;

}


/* =====================================
   CANDIDATE VALUES
===================================== */

.candidate-comparison-table tbody td {

    padding: 18px 22px;

    color: #334155;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.6;

    vertical-align: middle;

    border-right: 1px solid #d8e1ec;

    border-bottom: 1px solid #d8e1ec;

}


.candidate-comparison-table tbody td:last-child {

    border-right: none;

}


/* Remove bottom line */

.candidate-comparison-table
tbody tr:last-child th,

.candidate-comparison-table
tbody tr:last-child td {

    border-bottom: none;

}


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

@media (max-width: 768px) {

    .comparison-table-wrap {

        border-radius: 14px;

    }


    .candidate-comparison-table {

        min-width: 650px;

    }


    .candidate-comparison-table
    thead th,

    .candidate-comparison-table
    tbody th,

    .candidate-comparison-table
    tbody td {

        padding: 15px;

    }

}

/* =====================================
   LEADERSHIP EXPERIENCE – TEAL THEME
===================================== */

.leadership-comparison-table thead {

    background: linear-gradient(
        135deg,
        #0f5f61,
        #167b75
    );

}


/* Teal basis header */

.leadership-comparison-table
.comparison-basis-heading {

    color: #d1fae5;

}


/* Teal labels */

.leadership-comparison-table
tbody th {

    color: #134e4a;

}


/* Teal hover effect */

.leadership-comparison-table
tbody tr:hover {

    background: #ecfdf5;

}


/* Longer experience descriptions */

.leadership-comparison-table
tbody td {

    vertical-align: top;

}


/* Improve the summary row */

.leadership-comparison-table
tbody tr:last-child td {

    line-height: 1.75;

}
/* =====================================
   KEY PRIORITIES – ORANGE THEME
===================================== */

/* Orange section heading */

.comparison-priorities-section
.comparison-section-heading {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 24px 28px;

    margin-bottom: 0;

    background: linear-gradient(
        135deg,
        #c65d08,
        #f59e0b
    ) !important;

    border-radius:
        18px
        18px
        0
        0;

}


/* Heading icon */

.comparison-priorities-section
.comparison-section-heading > span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    background:
        rgba(255, 255, 255, 0.18);

    border:
        1px solid
        rgba(255, 255, 255, 0.30);

    border-radius: 14px;

}


/* Heading title */

.comparison-priorities-section
.comparison-section-heading h2 {

    margin: 0 0 5px;

    color: #ffffff !important;

    font-size: 25px;

    font-weight: 900;

}


/* Heading description */

.comparison-priorities-section
.comparison-section-heading p {

    margin: 0;

    color:
        rgba(255, 255, 255, 0.88) !important;

    font-size: 15px;

}


/* =====================================
   ORANGE TABLE HEADER
===================================== */

.priority-comparison-table {

    width: 100%;

    border-collapse: collapse;

}


/* Force orange onto the table header */

.priority-comparison-table thead,
.priority-comparison-table thead tr {

    background: linear-gradient(
        135deg,
        #c65d08,
        #f59e0b
    ) !important;

}


/* Table header cells */

.priority-comparison-table thead th {

    padding: 20px 24px;

    background: transparent !important;

    color: #ffffff !important;

    font-size: 16px;

    font-weight: 900;

    text-align: left;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.25);

}


.priority-comparison-table
thead th:last-child {

    border-right: none;

}


/* =====================================
   PRIORITY LABEL COLUMN
===================================== */

.priority-basis {

    background: #fff4df !important;

    color: #92400e !important;

    vertical-align: middle !important;

}


.priority-basis strong {

    display: block;

    color: #92400e !important;

    font-size: 16px;

    font-weight: 900;

}


/* =====================================
   BOLD ISSUE NAMES
===================================== */

.priority-issue {

    display: block;

    margin-bottom: 13px;

    color: #7c2d12 !important;

    font-size: 23px !important;

    font-weight: 900 !important;

    line-height: 1.3;

}


/* Candidate position text */

.priority-position {

    color: #475569;

    font-size: 15px;

    line-height: 1.8;

}


/* =====================================
   TABLE BORDERS
===================================== */

.priority-comparison-table td {

    padding: 25px 24px;

    border-top:
        1px solid
        #efd9b7;

    border-right:
        1px solid
        #efd9b7;

    vertical-align: top;

}


.priority-comparison-table td:last-child {

    border-right: none;

}


/* Alternate row colour */

.priority-comparison-table
tbody tr:nth-child(even) td {

    background: #fffaf2;

}


/* Hover effect */

.priority-comparison-table
tbody tr:hover td {

    background: #fff1d9;

}


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

@media screen and (max-width: 768px) {

    .comparison-priorities-section
    .comparison-section-heading {

        padding: 20px;

    }


    .comparison-priorities-section
    .comparison-section-heading h2 {

        font-size: 22px;

    }


    .priority-issue {

        font-size: 20px !important;

    }

}

/* =====================================
   CANDIDATE VISION – BLUE THEME
===================================== */


/* -----------------------------------------------------
   Main Vision Section
----------------------------------------------------- */

.candidate-vision-section {

    margin-top: 42px;

}


/* -----------------------------------------------------
   Vision Section Heading
----------------------------------------------------- */

.candidate-vision-section
.comparison-section-heading {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 25px 28px;

    margin-bottom: 0;

    background:
        linear-gradient(
            135deg,
            #173f73,
            #2d67ad
        );

    border-radius:
        18px
        18px
        0
        0;

    box-shadow:
        0 8px 22px
        rgba(23, 63, 115, 0.16);

}


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

.candidate-vision-section
.comparison-section-heading > span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    flex-shrink: 0;

    background:
        rgba(255, 255, 255, 0.15);

    border:
        1px solid
        rgba(255, 255, 255, 0.28);

    border-radius: 15px;

    font-size: 25px;

}


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

.candidate-vision-section
.comparison-section-heading h2 {

    margin: 0 0 5px;

    color: #ffffff;

    font-size: 26px;

    font-weight: 900;

    line-height: 1.2;

}


/* -----------------------------------------------------
   Vision Description
----------------------------------------------------- */

.candidate-vision-section
.comparison-section-heading p {

    margin: 0;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 15px;

    line-height: 1.6;

}


/* -----------------------------------------------------
   Two Candidate Cards
----------------------------------------------------- */

.candidate-vision-grid {

    display: grid;

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

    gap: 0;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        #cfdced;

    border-top: none;

    border-radius:
        0
        0
        18px
        18px;

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, 0.08);

}


/* -----------------------------------------------------
   Individual Vision Card
----------------------------------------------------- */

.candidate-vision-card {

    min-width: 0;

    background: #ffffff;

}


/* Divider Between Candidates */

.candidate-vision-card:first-child {

    border-right:
        1px solid
        #dbe4f0;

}


/* -----------------------------------------------------
   Candidate Name Header
----------------------------------------------------- */

.candidate-vision-card-header {

    padding:
        19px
        25px;

    background:
        #eef4fc;

    border-bottom:
        1px solid
        #dbe4f0;

}


.candidate-vision-card-header h3 {

    margin: 0;

    color: #173f73;

    font-size: 17px;

    font-weight: 850;

    line-height: 1.4;

}


/* -----------------------------------------------------
   Vision Content
----------------------------------------------------- */

.candidate-vision-content {

    padding:
        28px
        30px
        32px;

    color: #475569;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.85;

    overflow-wrap: anywhere;

}


/* -----------------------------------------------------
   Hover Effect
----------------------------------------------------- */

.candidate-vision-card {

    transition:
        background 0.25s ease;

}


.candidate-vision-card:hover {

    background:
        #fafcff;

}


/* -----------------------------------------------------
   Tablet
----------------------------------------------------- */

@media screen and (max-width: 900px) {

    .candidate-vision-content {

        padding:
            25px
            24px
            28px;

        font-size: 15px;

    }

}


/* -----------------------------------------------------
   Mobile
----------------------------------------------------- */

@media screen and (max-width: 700px) {

    .candidate-vision-section
    .comparison-section-heading {

        padding:
            21px
            20px;

        gap: 14px;

    }


    .candidate-vision-section
    .comparison-section-heading > span {

        width: 46px;

        height: 46px;

        border-radius: 13px;

        font-size: 21px;

    }


    .candidate-vision-section
    .comparison-section-heading h2 {

        font-size: 22px;

    }


    .candidate-vision-section
    .comparison-section-heading p {

        font-size: 14px;

    }


    /* Stack cards on mobile */

    .candidate-vision-grid {

        grid-template-columns: 1fr;

        border-radius:
            0
            0
            16px
            16px;

    }


    .candidate-vision-card:first-child {

        border-right: none;

        border-bottom:
            1px solid
            #dbe4f0;

    }


    .candidate-vision-card-header {

        padding:
            17px
            20px;

    }


    .candidate-vision-card-header h3 {

        font-size: 16px;

    }


    .candidate-vision-content {

        padding:
            23px
            20px
            26px;

        font-size: 15px;

        line-height: 1.75;

    }

}
/* =====================================================
   COMPARE CANDIDATES – TOP INTRODUCTION
===================================================== */

/* -----------------------------------------------------
   Main Introduction Container
----------------------------------------------------- */

.compare-page-intro {

    position: relative;

    max-width: 100%;

    margin:
        0
        0
        38px;

    padding:
        62px
        50px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #0f2f5f 0%,
            #1d4f91 55%,
            #2f6fba 100%
        );

    border-radius: 24px;

    box-shadow:
        0 20px 50px
        rgba(15, 47, 95, 0.22);

}


/* -----------------------------------------------------
   Decorative Background Circles
----------------------------------------------------- */

.compare-page-intro::before {

    content: "";

    position: absolute;

    top: -130px;

    right: -90px;

    width: 310px;

    height: 310px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.07);

}


.compare-page-intro::after {

    content: "";

    position: absolute;

    bottom: -160px;

    left: -100px;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

}


/* Keep content above decorations */

.compare-page-intro > * {

    position: relative;

    z-index: 2;

}


/* -----------------------------------------------------
   Vote Smart KE Label
----------------------------------------------------- */

.compare-page-intro
.compare-kicker {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        8px
        16px;

    margin-bottom: 18px;

    background:
        rgba(255, 255, 255, 0.13);

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 999px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.14em;

}


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

.compare-page-intro h1 {

    max-width: 850px;

    margin:
        0
        auto
        20px;

    color: #ffffff;

    font-size: clamp(
        36px,
        5vw,
        58px
    );

    font-weight: 900;

    line-height: 1.08;

    letter-spacing: -1.4px;

}


/* -----------------------------------------------------
   Description
----------------------------------------------------- */

.compare-page-description {

    max-width: 760px;

    margin:
        0
        auto;

    color:
        rgba(255, 255, 255, 0.88);

    font-size: 18px;

    font-weight: 400;

    line-height: 1.8;

}


/* -----------------------------------------------------
   Comparison Highlights
----------------------------------------------------- */

.compare-intro-highlights {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    max-width: 900px;

    margin:
        34px
        auto
        0;

}


.compare-intro-highlights span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding:
        10px
        18px;

    background:
        rgba(255, 255, 255, 0.12);

    border:
        1px solid
        rgba(255, 255, 255, 0.20);

    border-radius: 12px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

    transition:
        transform 0.25s ease,
        background 0.25s ease;

}


.compare-intro-highlights span:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255, 255, 255, 0.19);

}


/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 900px) {

    .compare-page-intro {

        padding:
            52px
            34px;

        border-radius: 21px;

    }


    .compare-page-description {

        font-size: 17px;

    }

}


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

@media screen and (max-width: 700px) {

    .compare-page-intro {

        padding:
            42px
            20px;

        margin-bottom: 28px;

        border-radius: 18px;

    }


    .compare-page-intro h1 {

        font-size: 35px;

        line-height: 1.12;

        letter-spacing: -0.8px;

    }


    .compare-page-description {

        font-size: 16px;

        line-height: 1.7;

    }


    .compare-intro-highlights {

        display: grid;

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

        gap: 10px;

        margin-top: 27px;

    }


    .compare-intro-highlights span {

        width: 100%;

        min-height: 58px;

        padding:
            10px
            9px;

        font-size: 12px;

        text-align: center;

        box-sizing: border-box;

    }


    .compare-page-intro::before {

        top: -165px;

        right: -170px;

    }


    .compare-page-intro::after {

        bottom: -190px;

        left: -200px;

    }

}
/* =====================================================
   COMPARISON PAGE – BOTTOM CTA
===================================================== */

.comparison-cta {

    position: relative;

    margin-top: 70px;

    padding:
        70px
        40px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #0f2f5f,
            #1d4f91
        );

    border-radius: 24px;

    box-shadow:
        0 20px 50px
        rgba(15, 47, 95, 0.20);

}


/* Decorative shapes */

.comparison-cta::before {

    content: "";

    position: absolute;

    top: -140px;

    right: -100px;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.06);

}


.comparison-cta::after {

    content: "";

    position: absolute;

    bottom: -170px;

    left: -110px;

    width: 340px;

    height: 340px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);

}


/* CTA content */

.comparison-cta-content {

    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: auto;

}


/* Small label */

.comparison-cta-kicker {

    display: inline-block;

    margin-bottom: 17px;

    padding:
        8px
        15px;

    border:
        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.10);

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.14em;

}


/* Heading */

.comparison-cta h2 {

    margin:
        0
        0
        17px;

    color: #ffffff;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    font-weight: 900;

    line-height: 1.12;

}


/* Description */

.comparison-cta p {

    max-width: 680px;

    margin:
        0
        auto;

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 17px;

    line-height: 1.8;

}


/* CTA buttons */

.comparison-cta-actions {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 31px;

}


.comparison-cta-actions a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 54px;

    padding:
        0
        25px;

    border-radius: 13px;

    font-size: 15px;

    font-weight: 800;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


/* Primary button */

.comparison-cta-primary {

    background: #ffffff;

    color: #173e74;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.16);

}


.comparison-cta-primary:hover {

    transform:
        translateY(-3px);

    color: #173e74;

    box-shadow:
        0 16px 30px
        rgba(0, 0, 0, 0.22);

}


/* Secondary button */

.comparison-cta-secondary {

    border:
        1px solid
        rgba(255, 255, 255, 0.35);

    background:
        rgba(255, 255, 255, 0.09);

    color: #ffffff;

}


.comparison-cta-secondary:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255, 255, 255, 0.17);

    color: #ffffff;

}


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

@media screen and (max-width: 700px) {

    .comparison-cta {

        margin-top: 45px;

        padding:
            52px
            20px;

        border-radius: 18px;

    }


    .comparison-cta h2 {

        font-size: 31px;

    }


    .comparison-cta p {

        font-size: 16px;

        line-height: 1.7;

    }


    .comparison-cta-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .comparison-cta-actions a {

        width: 100%;

        min-height: 56px;

        box-sizing: border-box;

    }

}
/* =====================================================
   COMPARE PAGE – FULL-WIDTH LAYOUT FIX
===================================================== */

/*
 * Allow the comparison page to use the available
 * content width instead of remaining narrow on the left.
 */

.candidate-comparison-page {

    width: 100%;

    max-width: none;

}


/*
 * Override the narrow container width.
 */

.candidate-comparison-page
.vsk-container {

    width: min(
        100% - 48px,
        1400px
    );

    max-width: 1400px;

    margin-left: auto;

    margin-right: auto;

}


/*
 * Ensure major sections stretch across the container.
 */

.candidate-comparison-page
.compare-page-intro,

.candidate-comparison-page
.compare-selector-card,

.candidate-comparison-page
.comparison-results,

.candidate-comparison-page
.comparison-placeholder,

.candidate-comparison-page
.comparison-cta {

    width: 100%;

    max-width: none;

    box-sizing: border-box;

}


/* =====================================================
   TABLET
===================================================== */

@media screen and (max-width: 900px) {

    .candidate-comparison-page
    .vsk-container {

        width: calc(
            100% - 32px
        );

    }

}


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

@media screen and (max-width: 700px) {

    .candidate-comparison-page
    .vsk-container {

        width: calc(
            100% - 24px
        );

    }

}
/* =====================================================
   HERO TEXT – CONTRAST AND READABILITY
===================================================== */

/*
 * Main hero heading
 */

.compare-page-intro h1 {

    color: #ffffff !important;

    text-shadow:

        0 2px 10px
        rgba(
            0,
            0,
            0,
            0.14
        );

}


/*
 * Hero description
 */

.compare-page-intro
.compare-page-description {

    color:
        rgba(
            255,
            255,
            255,
            0.92
        ) !important;

    font-weight: 500;

}


/*
 * Vote Smart KE label
 */

.compare-page-intro
.compare-kicker {

    color: #ffffff !important;

    background:
        rgba(
            255,
            255,
            255,
            0.16
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.32
        );

}


/*
 * Comparison feature cards
 */

.compare-page-intro
.compare-intro-highlights span {

    color: #ffffff !important;

    background:
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.30
        );

    box-shadow:

        0 5px 14px
        rgba(
            0,
            0,
            0,
            0.10
        );

}


/*
 * Improve hover visibility
 */

.compare-page-intro
.compare-intro-highlights span:hover {

    color: #ffffff !important;

    background:
        rgba(
            255,
            255,
            255,
            0.23
        );

}
/* =====================================================
   HERO – FULL-WIDTH FIX
===================================================== */

/*
 * Force the hero wrapper to occupy the full
 * available width of the comparison page.
 */

.candidate-comparison-page
.compare-page-intro {

    display: block !important;

    width: 100% !important;

    max-width: none !important;

    min-width: 0;

    margin-left: 0 !important;

    margin-right: 0 !important;

    box-sizing: border-box;

}


/*
 * If the hero uses an inner content wrapper,
 * allow it to stretch too.
 */

.candidate-comparison-page
.compare-page-intro-inner {

    width: 100% !important;

    max-width: none !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

}


/*
 * Ensure the hero content itself does not
 * remain restricted to a narrow column.
 */

.candidate-comparison-page
.compare-page-intro-content {

    width: 100% !important;

    max-width: none !important;

}
/* =====================================================
   HERO – REMOVE EMPTY GRID COLUMN
===================================================== */

.candidate-comparison-page
.compare-page-intro {

    grid-template-columns:
        minmax(0, 1fr) !important;

}


.candidate-comparison-page
.compare-page-intro > * {

    grid-column: 1 / -1 !important;

}