/*
 * Main Stylesheet for CivicVoteTheme
 */

/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* --- CSS Variables (Kenyan Palette) --- */
:root {
    --cvr-green: #146B3A;
    --cvr-black: #000000;
    --cvr-red: #BB2525;
    --cvr-white: #FFFFFF;
    --cvr-light-gray: #f8f9fa;
    --cvr-dark-gray: #212932;
    --primary-font: 'Inter', sans-serif;
}

/* --- General & Typography --- */
body {
    font-family: var(--primary-font);
    color: #333;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

a {
    color: var(--cvr-red);
    text-decoration: none;
}
a:hover {
    color: var(--cvr-black);
    text-decoration: underline;
}

/* --- Buttons --- */
.btn:hover {
    text-decoration: none;
}
.btn-primary { background-color: var(--cvr-red); border-color: var(--cvr-red); }
.btn-primary:hover { background-color: #a02020; border-color: #a02020; }
.btn-outline-danger { color: var(--cvr-red); border-color: var(--cvr-red); }
.btn-outline-danger:hover { background-color: var(--cvr-red); color: var(--cvr-white); }


/* --- Header --- */
.site-header .navbar { border-bottom: 1px solid #dee2e6; }
.site-title { font-size: 1.5rem; color: var(--cvr-black); }
.site-description { font-size: 0.9rem; color: #6c757d; }

/* --- Hero Section --- */
.hero-section { position: relative; height: 60vh; background: url('https://placehold.co/1920x1080/000000/FFFFFF?text=Voting+Scene') no-repeat center center; background-size: cover; }
.hero-section .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); }
.hero-section .hero-content { position: relative; z-index: 2; }

/* --- Features Section --- */
.feature-card { padding: 2rem; border: 1px solid #e9ecef; border-radius: 0.5rem; transition: transform 0.2s, box-shadow 0.2s; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; }

/* --- Login & Registration Pages --- */
.login-register-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; background-color: var(--cvr-light-gray); }
.login-register-form { background: var(--cvr-white); padding: 2.5rem; border-radius: 0.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.1); width: 100%; max-width: 450px; }
.login-register-form .form-label { font-weight: 700; }
.login-register-form .btn { width: 100%; padding: 0.75rem; }

/* --- Redesigned Footer Styles --- */
.site-footer {
    background-color: var(--cvr-dark-gray);
    font-size: 0.9rem;
}
.footer-heading {
    color: var(--cvr-white);
    margin-bottom: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
}
.footer-text, .footer-contact-info li, .footer-contact-info li a {
    color: #adb5bd;
}
.footer-contact-info a:hover {
    color: var(--cvr-white);
    text-decoration: none;
}
.footer-links li {
    margin-bottom: 0.5rem;
}
/* This is the most specific selector to guarantee the override */
footer#colophon .footer-links a {
    color: #adb5bd;
    transition: color 0.2s;
    text-decoration: none !important; /* Force no underline */
}
footer#colophon .footer-links a:hover {
    color: var(--cvr-white);
    text-decoration: none !important; /* Force no underline on hover */
}
.footer-social-icons a.social-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: #495057;
    color: var(--cvr-white);
    margin-right: 10px;
    transition: background-color 0.2s;
}
.footer-social-icons a.social-icon:hover {
    background-color: var(--cvr-red);
    text-decoration: none;
}
.site-info {
    font-size: 0.85rem;
    color: #6c757d;
}

/* NEW: Footer Logo Styles */
.footer-logo-wrap .custom-logo {
    max-height: 60px;
    width: auto;
    filter: brightness(0) invert(1); /* Makes a dark logo white for dark backgrounds */
}
.footer-logo-wrap .custom-logo-link:hover {
    text-decoration: none;
}

/* Dashboard Specifics */
.stat-card-dashboard {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    height: 100%;
}
.stat-card-dashboard .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cvr-red);
}
.stat-card-dashboard .stat-label {
    font-size: 1rem;
    color: #6c757d;
}
