/* assets/css/style.css */

/* =========================================================
   TEMA POLIPOLL (light theme) - basato sul logo
   ========================================================= */

:root {
    /* Colori principali dal logo */
    --polipoll-purple: #7D5BDA;         /* viola principale polipo */
    --polipoll-purple-dark: #532BA5;    /* viola pił scuro */
    --polipoll-purple-soft: #F0EAFE;    /* sfumatura chiara */

    --polipoll-text-main: #111827;      /* quasi nero */
    --polipoll-text-muted: #6B7280;     /* grigio testo secondario */

    --polipoll-bg: #F7F6F9;             /* sfondo pagina */
    --polipoll-surface: #FFFFFF;        /* card, blocchi */
    --polipoll-border: #E5E7EB;         /* bordi leggeri */
}

/* =========================================================
   BASE
   ========================================================= */

body {
    background-color: var(--polipoll-bg);
    color: var(--polipoll-text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: var(--polipoll-purple-dark);
    text-decoration: none;
}
a:hover {
    color: var(--polipoll-purple);
    text-decoration: underline;
}

/* =========================================================
   NAVBAR
   ========================================================= */

.bg-polipoll {
    background-color: #ffffff;
}

.navbar {
    border-bottom: 1px solid var(--polipoll-border);
}

.navbar-brand {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.navbar-title-text {
    color: #000000;
}

.navbar-logo-wrapper {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-logo {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* Link navbar */
.navbar-light .navbar-nav .nav-link {
    color: var(--polipoll-text-muted);
    font-size: 0.95rem;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--polipoll-text-main);
}

/* =========================================================
   HERO / LANDING
   ========================================================= */

.hero-card {
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at top left, rgba(125, 91, 218, 0.12), transparent 55%),
        radial-gradient(circle at bottom right, rgba(134, 100, 228, 0.10), transparent 55%),
        #ffffff;
    color: var(--polipoll-text-main);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(229, 231, 235, 0.9);
}

.hero-card .display-5 {
    font-weight: 800;
    letter-spacing: -0.03em;
}

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

.card.bg-dark {
    background-color: var(--polipoll-surface) !important;
    border-radius: 1rem;
    border: 1px solid var(--polipoll-border);
    color: var(--polipoll-text-main);
}

.card.bg-dark .card-title {
    font-size: 0.98rem;
    font-weight: 600;
}

.card.bg-dark .card-text {
    color: var(--polipoll-text-muted);
}

/* =========================================================
   BOTTONI
   ========================================================= */

.btn-polipoll {
    background: linear-gradient(135deg, var(--polipoll-purple), var(--polipoll-purple-dark));
    border: none;
    color: #ffffff;
}

.btn-polipoll:hover,
.btn-polipoll:focus {
    background: linear-gradient(135deg, var(--polipoll-purple-dark), var(--polipoll-purple));
    color: #ffffff;
}

.btn-outline-light {
    border-color: var(--polipoll-purple-soft);
    color: var(--polipoll-purple-dark);
    background-color: #ffffff;
}

.btn-outline-light:hover {
    background-color: var(--polipoll-purple-soft);
    border-color: var(--polipoll-purple);
    color: var(--polipoll-purple-dark);
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
    background-color: #ffffff;
    border-top: 1px solid var(--polipoll-border);
    color: var(--polipoll-text-muted);
}

/* =========================================================
   LAYOUT
   ========================================================= */

main.container {
    min-height: 70vh;
}

.small-muted {
    color: var(--polipoll-text-muted);
    font-size: 0.85rem;
}