/**
 * DealerHub Vehicles Pro - Main Public Stylesheet
 * Version: 3.0.0
 * 
 * Complete styling system without inline styles or Tailwind dependency
 * All styles are fully customizable through WordPress admin
 */

/* ========================================
   CSS VARIABLES (CUSTOMIZABLE)
   ======================================== */
@import url('variables.css');

/* ========================================
   GRID SYSTEM
   ======================================== */
@import url('grid.css');

/* ========================================
   BUTTONS
   ======================================== */
@import url('buttons.css');

/* ========================================
   VEHICLE CARDS
   ======================================== */
@import url('cards.css');

/* ========================================
   DETAIL PAGES
   ======================================== */
@import url('detail.css');

/* ========================================
   FILTERS & PAGINATION
   ======================================== */
@import url('filters.css');

/* ========================================
   UTILITY CLASSES
   ======================================== */
@import url('utilities.css');

/* ========================================
   BASE STYLES & RESETS
   ======================================== */

.dealerhub-vehicles-container,
.dealerhub-vehicle-detail {
    font-family: var(--dh-font-family);
    color: var(--dh-text-primary);
    line-height: var(--dh-line-height-normal);
}

.dealerhub-vehicles-container *,
.dealerhub-vehicle-detail * {
    box-sizing: border-box;
}

/* Reset WordPress theme interference */
.dealerhub-vehicles-container img,
.dealerhub-vehicle-detail img {
    max-width: 100%;
    height: auto;
    border: none;
}

.dealerhub-vehicles-container a,
.dealerhub-vehicle-detail a {
    text-decoration: none;
}

/* ========================================
   MAIN CONTAINER
   ======================================== */

.dealerhub-vehicles-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--dh-spacing-lg) 0;
}

/* ========================================
   LICENSE NOTICES
   ======================================== */

.dh-license-notice {
    background-color: var(--dh-bg-secondary);
    border: 2px solid var(--dh-border-medium);
    border-radius: var(--dh-card-radius);
    padding: var(--dh-spacing-xl);
    margin: var(--dh-spacing-xl) 0;
    text-align: center;
}

.dh-license-notice-title {
    font-size: var(--dh-font-size-xl);
    font-weight: 700;
    color: var(--dh-heading-color);
    margin: 0 0 var(--dh-spacing-sm) 0;
}

.dh-license-notice-text {
    font-size: var(--dh-font-size-base);
    color: var(--dh-text-secondary);
    margin: 0 0 var(--dh-spacing-md) 0;
}

.dh-license-notice-warning {
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.dh-license-notice-warning .dh-license-notice-title,
.dh-license-notice-warning .dh-license-notice-text {
    color: #856404;
}

/* ========================================
   ERROR MESSAGES
   ======================================== */

.dh-error {
    padding: var(--dh-spacing-md);
    background-color: #fee;
    border: 1px solid #fcc;
    border-radius: var(--dh-btn-radius);
    color: #c33;
    font-size: var(--dh-font-size-base);
}

/* ========================================
   LOADING STATES
   ======================================== */

.dh-loading-overlay {
    position: relative;
    min-height: 200px;
}

.dh-loading-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 4px solid var(--dh-border-light);
    border-top-color: var(--dh-primary-color);
    border-radius: 50%;
    animation: dh-spin 0.8s linear infinite;
}

/* ========================================
   RESPONSIVE IMAGES
   ======================================== */

.dh-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.dh-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.dh-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--dh-primary-color);
    color: var(--dh-text-white);
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.dh-skip-link:focus {
    top: 0;
}

/* Focus visible for keyboard navigation */
.dh-btn:focus-visible,
.dh-filter-input:focus-visible,
.dh-filter-select:focus-visible {
    outline: 2px solid var(--dh-primary-color);
    outline-offset: 2px;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .dh-filters,
    .dh-pagination,
    .dh-btn-group,
    .dh-vehicle-gallery-nav {
        display: none !important;
    }
    
    .dh-vehicle-card,
    .dh-vehicle-detail {
        page-break-inside: avoid;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    .dealerhub-vehicles-container:not(.dh-force-light),
    .dealerhub-vehicle-detail:not(.dh-force-light) {
        /* Automatically apply dark theme variables if not overridden */
        /* This can be controlled via admin settings */
    }
}