/**
 * Dynamic Theme Variables CSS
 * This file uses CSS variables that are set dynamically by PHP
 * Variables are defined in includes/functions.php -> getThemeCSS()
 */

/* Apply theme colors to header */
.site-header .header-top {
    background-color: var(--header-bg);
}

.site-header .header-main {
    background-color: var(--header-bg);
}

.site-header .header-contact a {
    color: var(--accent-color);
}

.site-header .header-hours {
    color: var(--accent-color);
}

/* Apply theme to navigation */
.main-nav .nav-menu a:hover,
.main-nav .nav-menu a.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Apply theme to buttons */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
    background-color: var(--button-color);
    border-color: var(--button-color);
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
}

/* Apply theme to links */
a {
    color: var(--primary-color);
}

a:hover {
    color: var(--button-hover);
}

/* Apply theme to footer */
.site-footer {
    background-color: var(--footer-bg);
    color: var(--text-color);
}

.site-footer h3,
.site-footer h4 {
    color: var(--accent-color);
}

.site-footer a {
    color: var(--accent-color);
}

.site-footer a:hover {
    color: var(--primary-color);
}

/* Apply theme to inventory cards */
.car-card {
    border: 1px solid var(--secondary-color);
}

.car-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: var(--primary-color);
}

.car-card .price {
    color: var(--primary-color);
}

/* Apply theme to badges */
.badge {
    background-color: var(--primary-color);
}

.badge-primary {
    background-color: var(--primary-color);
}

.badge-secondary {
    background-color: var(--secondary-color);
}

.badge-accent {
    background-color: var(--accent-color);
}

/* Apply theme to forms */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color);
    outline-color: var(--primary-color);
}

/* Apply theme to hero sections */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

/* Apply theme to section headings */
.section-title {
    color: var(--primary-color);
}

.section-title::after {
    background-color: var(--accent-color);
}

/* Apply theme to contact info icons */
.contact-info-icon {
    background-color: var(--primary-color);
}

/* Apply theme to pagination */
.pagination .active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination a:hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
}

/* Apply theme to loading states */
.loading-spinner {
    border-top-color: var(--primary-color);
}

/* Apply theme to alerts and notifications */
.alert-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Apply theme to progress bars */
.progress-bar {
    background-color: var(--primary-color);
}

/* Apply theme to tabs */
.tabs .tab.active {
    border-bottom-color: var(--primary-color);
    color: var(--primary-color);
}

/* Apply theme to modals */
.modal-header {
    background-color: var(--primary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mobile-menu-toggle span {
        background-color: var(--accent-color);
    }
}

/* Background color override */
body {
    background-color: var(--bg-color);
}

/* Text color override for body */
body,
p,
.text-body {
    color: var(--text-color);
}