/* ============================================================
   Cockroach Jeevan Party — bright festival-campaign theme
   Palette: sunshine yellow, coral, violet, teal, sky, orange
   ============================================================ */

:root {
    --sun: #ffc93c;
    --coral: #ff5d73;
    --violet: #7b4dff;
    --teal: #00c2a8;
    --sky: #2d9cff;
    --orange: #ff8a3d;
    --ink: #1e1b3a;
    --ink-soft: #4c4870;
    --paper: #fff9ef;
    --card: #ffffff;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-pill: 999px;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 140px;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 8% 12%, rgba(255, 201, 60, .20), transparent 32%),
        radial-gradient(circle at 92% 8%, rgba(123, 77, 255, .14), transparent 30%),
        radial-gradient(circle at 85% 65%, rgba(0, 194, 168, .12), transparent 34%),
        radial-gradient(circle at 10% 80%, rgba(255, 93, 115, .12), transparent 30%);
    background-attachment: fixed;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, .display-font {
    font-family: 'Archivo Black', 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
}

a { color: var(--violet); }

/* ---------- Navbar ---------- */
.navbar-party {
    background: linear-gradient(100deg, var(--ink) 0%, #3c2a8f 55%, var(--violet) 100%);
    padding: .9rem 0;
    box-shadow: 0 8px 24px rgba(30, 27, 58, .25);
}

.navbar-party .navbar-brand {
    color: #fff;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.chakra-logo-nav {
    width: 34px;
    height: 34px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

.navbar-party .nav-link {
    color: rgba(255, 255, 255, .85);
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: .45rem 1.05rem !important;
    margin: 0 .15rem;
    transition: all .18s ease;
}

.navbar-party .nav-link:hover {
    color: var(--ink);
    background: var(--sun);
    transform: translateY(-2px);
}

.navbar-party .navbar-toggler {
    border-color: rgba(255,255,255,.4);
}

.navbar-party .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Buttons ---------- */
.btn-sun, .btn-coral, .btn-violet, .btn-teal {
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 800;
    padding: .65rem 1.6rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-sun { background: var(--sun); color: var(--ink); }
.btn-coral { background: var(--coral); color: #fff; }
.btn-violet { background: var(--violet); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; }

.btn-sun:hover, .btn-coral:hover, .btn-violet:hover, .btn-teal:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 22px rgba(30, 27, 58, .22);
    color: var(--ink);
}

.btn-coral:hover, .btn-violet:hover, .btn-teal:hover { color: #fff; }

.btn-outline-party {
    border: 2px solid #fff;
    color: #fff;
    border-radius: var(--radius-pill);
    font-weight: 800;
    padding: .6rem 1.5rem;
}

.btn-outline-party:hover {
    background: #fff;
    color: var(--violet);
    transform: translateY(-3px);
}

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(100deg, rgba(8, 10, 26, .62) 0%, rgba(8, 10, 26, .28) 55%, rgba(8, 10, 26, .05) 100%),
                #060818 url("../images/space-hero-wide-6.png") center bottom / cover no-repeat;
    color: #fff;
    padding: 5.5rem 0 7rem;
    position: relative;
    overflow: hidden;
}

.hero .container { position: relative; z-index: 1; }

.hero h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    line-height: 1.05;
    text-shadow: 0 4px 0 rgba(30, 27, 58, .18);
}

.hero .highlight-sun { color: var(--sun); }

.hero .lead {
    font-size: 1.3rem;
    font-weight: 600;
    max-width: calc(560px + 10ch);
}

.hero-wave {
    display: block;
    width: 100%;
    margin-top: -2px;
}

/* ---------- Chakra logo ---------- */
.chakra-logo {
    display: inline-block;
    border-radius: 50%;
}

.chakra-logo-sm {
    width: 1.6em;
    height: 1.6em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

/* ---------- Stat strip ---------- */
.stat-strip {
    margin-top: -4.5rem;
    position: relative;
    z-index: 2;
}

.stat-card {
    border-radius: var(--radius-lg);
    color: #fff;
    text-align: center;
    padding: 1.4rem 1rem;
    box-shadow: 0 14px 30px rgba(30, 27, 58, .16);
}

.stat-card .stat-number {
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.2rem;
    display: block;
}

.stat-sun { background: linear-gradient(135deg, var(--sun), var(--orange)); color: var(--ink); }
.stat-coral { background: linear-gradient(135deg, var(--coral), #ff8fa0); }
.stat-violet { background: linear-gradient(135deg, var(--violet), var(--sky)); }
.stat-teal { background: linear-gradient(135deg, var(--teal), #57e6cf); color: var(--ink); }

/* ---------- Section headings ---------- */
.section-title {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: 2rem;
}

.section-title .dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
}

/* ---------- Cards ---------- */
.party-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 3px solid transparent;
    box-shadow: 0 8px 24px rgba(30, 27, 58, .08);
    padding: 1.6rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.party-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(30, 27, 58, .16);
}

.party-card h3, .party-card h5 { margin-bottom: .5rem; }

.border-sun { border-color: var(--sun); }
.border-coral { border-color: var(--coral); }
.border-violet { border-color: var(--violet); }
.border-teal { border-color: var(--teal); }
.border-sky { border-color: var(--sky); }
.border-orange { border-color: var(--orange); }

/* category icon chips */
.chip-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: .9rem;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}

/* ---------- Badges ---------- */
.badge-pill {
    border-radius: var(--radius-pill);
    font-weight: 800;
    padding: .45em 1em;
    font-size: .78rem;
}

.badge-category { color: var(--ink); }
.badge-status-Proposed { background: var(--sun); color: var(--ink); }
.badge-status-InProgress { background: var(--sky); color: #fff; }
.badge-status-Delivered { background: var(--teal); color: #fff; }
.badge-status-Pending { background: var(--sun); color: var(--ink); }
.badge-status-Approved { background: var(--teal); color: #fff; }
.badge-status-Rejected { background: var(--coral); color: #fff; }

/* ---------- Candidate cards ---------- */
.candidate-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.9rem;
    color: #fff;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 18px rgba(30, 27, 58, .18), 0 0 0 5px #fff, 0 0 0 8px rgba(255, 201, 60, .5);
}

.avatar-1 { background: linear-gradient(135deg, var(--coral), var(--orange)); }
.avatar-2 { background: linear-gradient(135deg, var(--violet), var(--sky)); }
.avatar-3 { background: linear-gradient(135deg, var(--teal), #6fe3d0); color: var(--ink); }
.avatar-4 { background: linear-gradient(135deg, var(--sun), var(--orange)); color: var(--ink); }
.avatar-5 { background: linear-gradient(135deg, var(--sky), var(--teal)); }
.avatar-6 { background: linear-gradient(135deg, var(--orange), var(--coral)); }

.candidate-role {
    color: var(--violet);
    font-weight: 800;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .06em;
}

/* ---------- Events ---------- */
.event-date-block {
    min-width: 86px;
    border-radius: var(--radius-md);
    text-align: center;
    padding: .8rem .5rem;
    color: #fff;
    font-weight: 800;
}

.event-date-block .day { font-size: 1.9rem; font-family: 'Archivo Black', sans-serif; display: block; line-height: 1; }
.event-date-block .month { text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; }

.date-sun { background: linear-gradient(160deg, var(--sun), var(--orange)); color: var(--ink); }
.date-coral { background: linear-gradient(160deg, var(--coral), #c22b44); }
.date-violet { background: linear-gradient(160deg, var(--violet), #5a35c9); }
.date-teal { background: linear-gradient(160deg, var(--teal), #008675); }
.date-sky { background: linear-gradient(160deg, var(--sky), #1c6cc0); }

/* ---------- CTA banner ---------- */
.cta-banner {
    background: linear-gradient(110deg, var(--coral) 0%, var(--orange) 50%, var(--sun) 100%);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 3rem 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(255, 93, 115, .35);
}

.cta-banner h2 { text-shadow: 0 3px 0 rgba(30,27,58,.15); }

/* ---------- Text helpers ---------- */
/* Preserves author-entered line breaks (e.g. pledge descriptions) while still soft-wrapping long lines. */
.preserve-lines { white-space: pre-line; }

/* ---------- Forms ---------- */
.form-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    border-top: 8px solid var(--violet);
    box-shadow: 0 12px 30px rgba(30, 27, 58, .10);
    padding: 2.2rem;
}

.form-card .form-label { font-weight: 800; }

.form-control, .form-select {
    border-radius: 12px;
    border: 2px solid #e8e2f4;
    padding: .6rem .9rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--violet);
    box-shadow: 0 0 0 .2rem rgba(123, 77, 255, .15);
}

/* ---------- Footer ---------- */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: var(--ink);
    color: rgba(255, 255, 255, .8);
}

.footer a { color: var(--sun); text-decoration: none; font-weight: 700; }
.footer a:hover { color: #fff; }

.footer-stripe {
    height: 8px;
    background: linear-gradient(90deg,
        var(--coral) 0%, var(--coral) 16.6%,
        var(--orange) 16.6%, var(--orange) 33.3%,
        var(--sun) 33.3%, var(--sun) 50%,
        var(--teal) 50%, var(--teal) 66.6%,
        var(--sky) 66.6%, var(--sky) 83.3%,
        var(--violet) 83.3%, var(--violet) 100%);
}

/* ---------- Misc ---------- */
.text-ink { color: var(--ink); }

.page-banner {
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.page-banner::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    top: -90px;
    right: -60px;
}

.banner-violet { background: linear-gradient(110deg, var(--violet), var(--sky)); }
.banner-coral { background: linear-gradient(110deg, var(--coral), var(--orange)); }
.banner-teal { background: linear-gradient(110deg, var(--teal), var(--sky)); }
.banner-sun { background: linear-gradient(110deg, var(--sun), var(--orange)); color: var(--ink); }

.alert-party {
    border-radius: var(--radius-md);
    font-weight: 700;
}

table a { text-decoration: none; }

.category-link {
    text-decoration: none;
    font-weight: 800;
    border-radius: var(--radius-pill);
    padding: .45rem 1.1rem;
    display: inline-block;
    background: #fff;
    color: var(--ink);
    border: 2px solid #e8e2f4;
    transition: all .15s ease;
}

.category-link:hover { transform: translateY(-2px); color: var(--ink); border-color: var(--violet); }
.category-link.active {
    background: var(--ink);
    color: var(--sun);
    border-color: var(--ink);
}

/* ---------- Admin area ---------- */
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    background: var(--ink);
    border-radius: var(--radius-lg);
    padding: .8rem;
}

.admin-pill {
    text-decoration: none;
    font-weight: 800;
    color: rgba(255, 255, 255, .85);
    border-radius: var(--radius-pill);
    padding: .5rem 1.2rem;
    transition: all .15s ease;
}

.admin-pill:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.admin-pill.active {
    background: var(--sun);
    color: var(--ink);
}

.admin-table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
}

.admin-table thead th {
    background: #f4eeff;
    color: var(--ink);
    font-weight: 800;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .06em;
    border-bottom: 3px solid var(--violet);
    padding: .9rem 1rem;
}

.admin-table tbody td {
    padding: .9rem 1rem;
    border-color: #f0ebf9;
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: #fff7e6;
}

.candidate-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo Black', sans-serif;
    font-size: .8rem;
    color: #fff;
    margin-right: .6rem;
    vertical-align: middle;
}