/*
Theme Name: History of Rock & Roll - Vintage
Theme URI: https://thehistoryofrockandroll.net
Author: JS
Description: A vintage rock and roll themed child theme for Divi, designed for audiences 50+. Features deep reds, golds, and blacks with retro typography and high accessibility.
Version: 1.0
Template: Divi
Text Domain: history-rock-vintage
*/

:root {
    --vintage-red: #8B0000;
    --vintage-gold: #D4AF37;
    --vintage-black: #1a1a1a;
    --vintage-cream: #F5F5DC;
    --vintage-dark: #0a0a0a;
}

body {
    font-family: Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--vintage-cream);
    background-color: var(--vintage-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: Impact, Arial Black, sans-serif;
    color: var(--vintage-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

h1 { font-size: 42px; }
h2 { font-size: 32px; border-bottom: 3px solid var(--vintage-red); padding-bottom: 10px; }
h3 { font-size: 24px; color: var(--vintage-red); }

.main-navigation a, .nav-menu a {
    color: var(--vintage-cream);
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px;
    text-transform: uppercase;
}

.main-navigation a:hover, .nav-menu a:hover {
    color: var(--vintage-gold);
}

.hero-section, .featured-show {
    background: linear-gradient(135deg, var(--vintage-black), var(--vintage-red));
    padding: 60px 20px;
    text-align: center;
    border-bottom: 5px solid var(--vintage-gold);
}

.hero-title {
    font-size: 48px;
    color: var(--vintage-gold);
}

.hero-subtitle {
    font-size: 24px;
    color: var(--vintage-cream);
}

.audio-player, .et_pb_audio {
    background: var(--vintage-cream);
    border: 3px solid var(--vintage-gold);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}

.show-card, .episode-card {
    background: var(--vintage-black);
    border: 2px solid var(--vintage-gold);
    border-radius: 10px;
    padding: 25px;
    margin: 20px 0;
}

.btn, .et_pb_button {
    background: var(--vintage-red);
    color: var(--vintage-gold);
    border: 2px solid var(--vintage-gold);
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover, .et_pb_button:hover {
    background: var(--vintage-gold);
    color: var(--vintage-black);
}

footer {
    background: var(--vintage-black);
    border-top: 3px solid var(--vintage-gold);
    padding: 40px 20px;
    text-align: center;
}

footer p { color: var(--vintage-cream); }

a { color: var(--vintage-gold); }
a:hover { color: var(--vintage-red); }

img { max-width: 100%; height: auto; border: 2px solid var(--vintage-gold); border-radius: 5px; }

.content-area, .entry-content {
    background: var(--vintage-black);
    padding: 30px;
    border: 2px solid var(--vintage-gold);
    border-radius: 10px;
    margin: 20px 0;
}

input, textarea, select {
    background: var(--vintage-cream);
    border: 2px solid var(--vintage-gold);
    padding: 12px;
    font-size: 16px;
    border-radius: 5px;
}

@media (max-width: 768px) {
    body { font-size: 16px; }
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    .hero-title { font-size: 32px; }
}