/* public/style.css - Yhteiset tyylit */
:root {
    --bg: #101010;
    --card: #1A1A1A;
    --text: #FFFFFF;
    --text-muted: #AAAAAA;
    --primary: #D4AF37; /* Kulta */
    --primary-hover: #b5952f;
    --border: #333333;
    --input-bg: #252525;
}

body {
    font-family: 'Readex Pro', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding-bottom: 20px;
    min-height: 100vh;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

/* --- DRAWER MENU (SIVUVALIKKO) --- */
.drawer {
    position: fixed; top: 0; right: -280px; width: 280px; height: 100%;
    background-color: #000; z-index: 2000;
    transition: right 0.3s ease;
    box-shadow: -5px 0 20px rgba(0,0,0,0.7);
    padding-top: 20px; border-left: 1px solid var(--primary);
    display: flex; flex-direction: column;
}
.drawer.open { right: 0; }

.drawer-header { text-align: center; margin-bottom: 20px; }
.drawer-header img { width: 80px; border-radius: 50%; border: 2px solid var(--primary); }

.drawer a {
    display: block; padding: 15px 20px;
    color: var(--text); font-size: 1.1rem;
    border-bottom: 1px solid #222;
    transition: 0.2s;
}
.drawer a:hover { background-color: #222; color: var(--primary); }
.drawer a.active { border-right: 4px solid var(--primary); color: var(--primary); background: #151515; }

/* --- OVERLAY (Tumma tausta kun valikko auki) --- */
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 1999;
    display: none;
}
.overlay.show { display: block; }

/* --- HEADER BAR --- */
.header-bar {
    background-color: #000; padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #333;
    position: sticky; top: 0; z-index: 100;
}
.hamburger {
    font-size: 1.5rem; cursor: pointer; color: var(--primary);
    background: none; border: 1px solid #333; border-radius: 5px;
    padding: 5px 10px;
}
.global-lang-sel {
    background-color: #000; color: var(--primary);
    border: 1px solid var(--primary);
    padding: 5px; border-radius: 5px;
}

/* --- YLEISET KOMPONENTIT --- */
.container { max-width: 800px; margin: 0 auto; padding: 15px; }

.card {
    background-color: var(--card);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    border: 1px solid var(--border);
    padding: 1.5rem; margin-bottom: 1.5rem;
}

.btn-gold {
    background-color: var(--primary); color: #000; font-weight: bold;
    padding: 12px 20px; border-radius: 8px;
    display: inline-block; text-align: center; border: none;
    cursor: pointer; transition: 0.2s;
}
.btn-gold:hover { background-color: var(--primary-hover); transform: scale(1.02); }

/* Lomakekentät */
input, textarea, select {
    background-color: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px; padding: 12px;
    width: 100%; box-sizing: border-box;
    margin-bottom: 10px;
}
input:focus, textarea:focus { outline: none; border-color: var(--primary); }