/*
Theme Name: AutoSoundHub Child
Description: Child theme for AutoSoundHub car audio review website with custom styling
Author: AutoSoundHub Team
Template: astra
Version: 1.0.1
Text Domain: autosoundhub-child
*/

/* IMPORTANT: Import parent theme styles first */
@import url("../astra/style.css");

/* Force load Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===================================
   AUTOSOUNDHUB BRAND COLORS & VARIABLES
   =================================== */
:root {
    /* Brand Colors from Document */
    --ash-primary: #FFFFFF !important;
    --ash-secondary: #C0C0C0 !important;
    --ash-secondary-light: #E8E8E8 !important;
    --ash-text-dark: #2c3e50 !important;
    --ash-accent: #F5F5F5 !important;
    
    /* Extended Palette */
    --ash-blue: #3498db !important;
    --ash-green: #27ae60 !important;
    --ash-orange: #e67e22 !important;
    --ash-red: #e74c3c !important;
    --ash-dark-gray: #34495e !important;
    --ash-medium-gray: #7f8c8d !important;
    --ash-light-gray: #ecf0f1 !important;
    
    /* Typography */
    --ash-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    
    /* Spacing */
    --ash-spacing-xs: 0.5rem;
    --ash-spacing-sm: 1rem;
    --ash-spacing-md: 1.5rem;
    --ash-spacing-lg: 2rem;
    --ash-spacing-xl: 3rem;
    
    /* Shadows */
    --ash-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --ash-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --ash-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    
    /* Border Radius */
    --ash-radius-sm: 4px;
    --ash-radius-md: 8px;
    --ash-radius-lg: 12px;
}

/* ===================================
   FORCE OVERRIDE ASTRA DEFAULTS
   =================================== */

/* Body and Global Styles */
body,
body.astra-theme {
    font-family: var(--ash-font-primary) !important;
    color: var(--ash-text-dark) !important;
    background-color: var(--ash-primary) !important;
    line-height: 1.6 !important;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
    font-family: var(--ash-font-primary) !important;
    color: var(--ash-text-dark) !important;
    font-weight: 600 !important;
}

h1, .entry-title { 
    font-size: 2.5rem !important; 
    margin-bottom: var(--ash-spacing-lg) !important;
}

h2 { 
    font-size: 2rem !important; 
    margin-bottom: var(--ash-spacing-md) !important;
}

h3 { 
    font-size: 1.5rem !important; 
    margin-bottom: var(--ash-spacing-md) !important;
}

/* Links */
a {
    color: var(--ash-blue) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: var(--ash-text-dark) !important;
}

/* ===================================
   HEADER CUSTOMIZATION
   =================================== */
.site-header,
.main-header-bar {
    background: linear-gradient(135deg, var(--ash-primary) 0%, var(--ash-accent) 100%) !important;
    border-bottom: 1px solid var(--ash-secondary-light) !important;
    box-shadow: var(--ash-shadow-sm) !important;
    padding: 1rem 0 !important;
}

.site-branding .site-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--ash-text-dark) !important;
}

.site-branding .site-title a {
    color: var(--ash-text-dark) !important;
}

.site-branding .site-title a:hover {
    color: var(--ash-blue) !important;
}

.site-description {
    color: var(--ash-medium-gray) !important;
    font-size: 0.9rem !important;
}

/* Navigation */
.main-navigation,
.main-header-menu {
    background: transparent !important;
}

.main-navigation ul li a,
.main-header-menu ul li a {
    color: var(--ash-text-dark) !important;
    font-weight: 500 !important;
    padding: var(--ash-spacing-sm) var(--ash-spacing-md) !important;
    border-radius: var(--ash-radius-sm) !important;
    transition: all 0.3s ease !important;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a,
.main-header-menu ul li a:hover,
.main-header-menu ul li.current-menu-item a {
    color: var(--ash-blue) !important;
    background-color: var(--ash-accent) !important;
}

/* ===================================
   CONTENT AREA STYLING
   =================================== */
.site-content,
#primary,
.ast-container {
    background-color: var(--ash-primary) !important;
}

.ast-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 var(--ash-spacing-md) !important;
}

/* Entry Content */
.entry-content {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: var(--ash-text-dark) !important;
}

.entry-header {
    margin-bottom: var(--ash-spacing-xl) !important;
    text-align: center !important;
    padding: var(--ash-spacing-xl) var(--ash-spacing-lg) !important;
    background: linear-gradient(135deg, var(--ash-accent) 0%, var(--ash-secondary-light) 100%) !important;
    border-radius: var(--ash-radius-lg) !important;
}

/* ===================================
   CUSTOM COMPONENTS - FORCE VISIBILITY
   =================================== */

/* Product Cards */
.ash-product-card {
    background: var(--ash-primary) !important;
    border: 2px solid var(--ash-secondary-light) !important;
    border-radius: var(--ash-radius-lg) !important;
    padding: var(--ash-spacing-lg) !important;
    margin-bottom: var(--ash-spacing-lg) !important;
    box-shadow: var(--ash-shadow-sm) !important;
    transition: all 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
}

.ash-product-card:hover {
    box-shadow: var(--ash-shadow-md) !important;
    transform: translateY(-2px) !important;
    border-color: var(--ash-blue) !important;
}

.ash-product-card img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: var(--ash-radius-md) !important;
    margin-bottom: var(--ash-spacing-md) !important;
}

.ash-product-title {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--ash-text-dark) !important;
    margin-bottom: var(--ash-spacing-sm) !important;
}

.ash-product-rating {
    display: flex !important;
    align-items: center !important;
    margin-bottom: var(--ash-spacing-sm) !important;
}

.ash-stars {
    color: var(--ash-orange) !important;
    margin-right: var(--ash-spacing-xs) !important;
    font-size: 1.2rem !important;
}

.ash-rating-text {
    color: var(--ash-medium-gray) !important;
    font-size: 0.9rem !important;
}

.ash-product-price {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--ash-green) !important;
    margin-bottom: var(--ash-spacing-md) !important;
}

.ash-product-description {
    color: var(--ash-text-dark) !important;
    margin-bottom: var(--ash-spacing-md) !important;
    line-height: 1.6 !important;
}

/* Buttons - Force Styling */
.ash-btn,
button.ash-btn,
a.ash-btn {
    display: inline-block !important;
    padding: var(--ash-spacing-sm) var(--ash-spacing-lg) !important;
    background: var(--ash-blue) !important;
    color: var(--ash-primary) !important;
    border: none !important;
    border-radius: var(--ash-radius-md) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    font-family: var(--ash-font-primary) !important;
    font-size: 1rem !important;
}

.ash-btn:hover,
button.ash-btn:hover,
a.ash-btn:hover {
    background: var(--ash-text-dark) !important;
    color: var(--ash-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--ash-shadow-md) !important;
}

.ash-btn-amazon {
    background: var(--ash-orange) !important;
}

.ash-btn-amazon:hover {
    background: #d35400 !important;
}

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

.ash-btn-secondary:hover {
    background: var(--ash-medium-gray) !important;
    color: var(--ash-primary) !important;
}

/* Alert Boxes */
.ash-alert {
    padding: var(--ash-spacing-md) !important;
    border-radius: var(--ash-radius-md) !important;
    margin-bottom: var(--ash-spacing-lg) !important;
    border-left: 4px solid !important;
    display: block !important;
    visibility: visible !important;
}

.ash-alert-info {
    background: #e8f4fd !important;
    border-color: var(--ash-blue) !important;
    color: #1e3a8a !important;
}

.ash-alert-success {
    background: #ecfdf5 !important;
    border-color: var(--ash-green) !important;
    color: #14532d !important;
}

.ash-alert-warning {
    background: #fef3e2 !important;
    border-color: var(--ash-orange) !important;
    color: #92400e !important;
}

.ash-alert-danger {
    background: #fef2f2 !important;
    border-color: var(--ash-red) !important;
    color: #991b1b !important;
}

/* Table of Contents */
.ash-toc {
    background: var(--ash-accent) !important;
    border: 2px solid var(--ash-secondary-light) !important;
    border-radius: var(--ash-radius-lg) !important;
    padding: var(--ash-spacing-lg) !important;
    margin-bottom: var(--ash-spacing-xl) !important;
    display: block !important;
    visibility: visible !important;
}

.ash-toc h3 {
    color: var(--ash-text-dark) !important;
    margin-bottom: var(--ash-spacing-md) !important;
    font-size: 1.25rem !important;
}

.ash-toc ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ash-toc li {
    margin-bottom: var(--ash-spacing-xs) !important;
}

.ash-toc a {
    color: var(--ash-text-dark) !important;
    text-decoration: none !important;
    padding: var(--ash-spacing-xs) 0 !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

.ash-toc a:hover {
    color: var(--ash-blue) !important;
    padding-left: var(--ash-spacing-sm) !important;
}

/* ===================================
   FOOTER STYLING
   =================================== */
.site-footer,
.ast-footer-overlay {
    background: linear-gradient(135deg, var(--ash-text-dark) 0%, var(--ash-dark-gray) 100%) !important;
    color: var(--ash-primary) !important;
    padding: var(--ash-spacing-xl) 0 var(--ash-spacing-lg) !important;
}

.site-footer h1, .site-footer h2, .site-footer h3, 
.site-footer h4, .site-footer h5, .site-footer h6 {
    color: var(--ash-primary) !important;
}

.site-footer a {
    color: var(--ash-secondary-light) !important;
}

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

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Tablet */
@media (max-width: 768px) {
    .ast-container {
        padding: 0 var(--ash-spacing-sm) !important;
    }
    
    .entry-title, h1 {
        font-size: 2rem !important;
    }
    
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.5rem !important; }
    
    .ash-product-card {
        padding: var(--ash-spacing-md) !important;
    }
    
    .entry-header {
        padding: var(--ash-spacing-lg) var(--ash-spacing-sm) !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .entry-title, h1 {
        font-size: 1.75rem !important;
    }
    
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    
    .ash-product-card {
        padding: var(--ash-spacing-sm) !important;
    }
    
    .ash-btn {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: var(--ash-spacing-sm) !important;
    }
    
    .site-header {
        padding: 0.5rem 0 !important;
    }
}

/* ===================================
   FORCE VISIBILITY AND LAYOUT
   =================================== */

/* Ensure all custom elements are visible */
.ash-product-card,
.ash-btn,
.ash-alert,
.ash-toc,
.ash-product-rating,
.ash-stars {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force flex layouts where needed */
.ash-product-rating {
    display: flex !important;
}

/* Override any theme hiding */
.autosoundhub-theme .ash-product-card,
.autosoundhub-theme .ash-btn,
.autosoundhub-theme .ash-alert {
    display: block !important;
    visibility: visible !important;
}

/* ===================================
   ASTRA SPECIFIC OVERRIDES
   =================================== */

/* Override Astra's default colors */
.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header.ast-header-break-point .main-header-bar {
    background: linear-gradient(135deg, var(--ash-primary) 0%, var(--ash-accent) 100%) !important;
}

/* Override Astra's container styles */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single {
    background: var(--ash-primary) !important;
    border-radius: var(--ash-radius-lg) !important;
}

/* Override Astra's typography */
.ast-theme-transparent-header .site-title a,
.ast-theme-transparent-header .site-title a:hover {
    color: var(--ash-text-dark) !important;
}

/* Force our button styles over Astra's */
.ast-button,
.button,
input[type="submit"],
input[type="button"] {
    background: var(--ash-blue) !important;
    color: var(--ash-primary) !important;
    border-radius: var(--ash-radius-md) !important;
    font-family: var(--ash-font-primary) !important;
}

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

/* ===================================
   DEBUGGING - TEMPORARY VISIBILITY
   =================================== */

/* Add visible borders to debug layout issues */
.ash-product-card {
    border: 3px solid var(--ash-blue) !important;
    background: var(--ash-accent) !important;
    min-height: 200px !important;
}

.ash-btn {
    border: 2px solid var(--ash-orange) !important;
    min-height: 40px !important;
}

.ash-alert {
    border: 2px solid var(--ash-green) !important;
    min-height: 50px !important;
}

/* Force display of custom content */
.ash-product-title::after {
    content: " [AutoSoundHub Custom]" !important;
    color: var(--ash-blue) !important;
    font-size: 0.8rem !important;
}

/* ===================================
   PRINT STYLES
   =================================== */
@media print {
    .site-header,
    .site-footer,
    .ash-btn {
        display: none !important;
    }
    
    body {
        font-size: 12pt !important;
        color: #000 !important;
        background: #fff !important;
    }
    
    .ash-product-card {
        border: 1px solid #000 !important;
        page-break-inside: avoid !important;
    }
}