/**
 * 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(--text-light);
}

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

/* Apply theme to navigation */
.main-nav a {
    color: var(--text-light);
}

.main-nav .nav-menu a:hover,
.main-nav .nav-menu a.active {
    color: var(--accent-color);
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--accent-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);
    color: var(--text-light) !important;
}

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

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-light) !important;
}

/* Hero section button outline - light text on dark background */
.hero .btn-outline,
.hero-section .btn-outline {
    background-color: transparent;
    color: var(--text-light) !important;
    border-color: var(--text-light);
}

.hero .btn-outline:hover,
.hero-section .btn-outline:hover {
    background-color: var(--text-light);
    color: var(--text-dark) !important;
    border-color: var(--text-light);
}

/* Regular btn-outline for other sections */
.btn-outline {
    background-color: var(--bg-color);
    color: var(--primary-color) !important;
    border-color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--text-light) !important;
    border-color: var(--primary-color);
}

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

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

/* Links in contact and info boxes */
.contact-box a,
.info-box a {
    color: var(--text-color) !important;
}

.contact-box a:hover,
.info-box a:hover {
    color: var(--accent-color) !important;
}

.contact-box strong,
.info-box strong {
    color: var(--text-color) !important;
}

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

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

.site-footer p {
    color: var(--footer-text-color) !important;
}

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

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

.footer-column a {
    color: var(--footer-text-color) !important;
    opacity: 0.8;
}

.footer-column a:hover {
    color: var(--accent-color) !important;
    opacity: 1;
}

.footer-bottom p {
    color: var(--footer-text-color) !important;
    opacity: 0.6;
}

/* 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);
}

/* Override bg-light for dark themes */
.features,
.feature-card,
.process-step,
.filter-box,
.inventory-header,
.featured-cars,
.about-features,
.shipping-features,
.calculator-box,
.tracking-box,
.map-placeholder,
.specs-box,
.inquiry-form-box,
.contact-box,
.form-box,
.info-box {
    background-color: var(--bg-color) !important;
    color: var(--text-color);
}

.feature-card h3,
.feature-card h4,
.process-step h3,
.filter-box h3,
.section-header-center h2,
.about-features h2,
.shipping-features h2,
.shipping-calculator-section h2,
.feature-section h3,
.feature-section h4,
.form-box h2,
.form-box h3,
.info-box h3 {
    color: var(--text-color) !important;
}

.feature-card p,
.process-step p,
.section-header-center p,
.section-subtitle,
.feature-section p,
.feature-section li {
    color: var(--text-color) !important;
}

.filter-box label,
.form-box label,
.info-box label,
.calculator-box label,
.tracking-box label {
    color: var(--text-color) !important;
}

.feature-section strong,
.about-content strong {
    color: var(--text-color) !important;
}

/* About intro section */
.about-intro .lead-text,
.about-intro p,
.about-content p {
    color: var(--text-color) !important;
}

/* CTA section buttons */
.about-cta .btn-outline,
.cta-actions .btn-outline {
    background-color: transparent !important;
    color: var(--text-color) !important;
    border-color: var(--primary-color) !important;
}

.about-cta .btn-outline:hover,
.cta-actions .btn-outline:hover {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
}

.calculator-box h3,
.tracking-box h3 {
    color: var(--text-color) !important;
}

.results-count,
.results-count strong,
.sort-form label {
    color: var(--text-color) !important;
}

/* Buttons in sections with bg-color */
.featured-cars .btn-outline,
.section-footer-center .btn-outline {
    background-color: transparent !important;
    color: var(--text-color) !important;
    border-color: var(--primary-color) !important;
}

.featured-cars .btn-outline:hover,
.section-footer-center .btn-outline:hover {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
}