/* EV-Queue Landing Styles — aligned with evqueue.com look */
:root {
    /* Brand palette */
    --brand-primary: #2f9e44; /* EV‑Queue green */
    --brand-primary-dark: #2b8a3e;
    --brand-primary-25: #e6f4ea; /* light tint for badges/backgrounds */
    --brand-accent: #198754; /* supportive green */

    /* Typography */
    --heading-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* used for headers and nav */

    /* Bootstrap primary override (best-effort) */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 47, 158, 68;
}

html, body { height: 100%; }
body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    color: #1f2937;
    background-color: #f5f7f9; /* soft gray like the live site */
}

/* Navbar — force green background and white text even if bg-white class is present */
.navbar {
    background-color: var(--brand-primary) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.15);
}
.navbar .navbar-brand { color: #fff; letter-spacing: 0.2px; font-weight: 700; }
.navbar .nav-link { color: #e7f4eb; }
.navbar .nav-link:hover { color: #ffffff; }
/* Make the primary button in the navbar stand out as a light pill */
.navbar .btn.btn-primary {
    background-color: #ffffff;
    color: var(--brand-primary);
    border-color: #ffffff;
}
.navbar .btn.btn-primary:hover {
    background-color: #f3faf5;
    color: var(--brand-primary-dark);
    border-color: #f3faf5;
}

/* Hero subtle green gradient */
.hero-gradient {
    background: linear-gradient(180deg, rgba(47,158,68,0.08) 0%, rgba(47,158,68,0.02) 100%);
}

/* Icon badge uses green tint */
.icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-primary-25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    font-size: 1rem;
}

/* Cards — slightly rounder corners */
.card { border-radius: 14px; }

/* Buttons and borders in brand color */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary:hover {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.border-primary { border-color: var(--brand-primary) !important; }

/* Footer links */
footer a { color: #6b7280; }
footer a:hover { color: var(--brand-primary); }

/* Typography: use Segoe stack for headings and navbar to align with related project while keeping body on Inter */
h1, h2, h3, h4, h5, h6,
.navbar .navbar-brand,
.navbar .nav-link {
    font-family: var(--heading-font);
}