/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for Astra
Author: Your Name
Author URI: https://yourwebsite.com/
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Child theme for Astra with Automuseums Brand Design System
Author: Synergy Marketing
Author URI: mailto:info@synergymarekting.mk
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

@import url("../astra/style.css");

/* ============================================
   AUTOMUSEUMS BRAND SYSTEM INTEGRATION
   ============================================
   
   This file integrates the Automuseums brand design system
   with the Astra parent theme. The main styling is handled
   by the dedicated CSS files in /assets/css/:
   
   - museum-variables.css: Brand color system & design tokens
   - museum-template.css: Component framework & utilities
   
   This file contains only theme-specific overrides and
   integration styles to ensure proper compatibility.
   ========================================= */

/* Theme Integration Overrides */
.automuseums-brand {
    /* Ensure our brand fonts take precedence */
    font-family: var(--am-font-body, 'Lato', sans-serif) !important;
}

.automuseums-brand h1,
.automuseums-brand h2,
.automuseums-brand h3,
.automuseums-brand h4,
.automuseums-brand h5,
.automuseums-brand h6 {
    /* Ensure heading font takes precedence over theme defaults */
    font-family: var(--am-font-heading, 'Merriweather', serif) !important;
}

/* Astra Theme Compatibility */
.ast-container {
    /* Allow full-width hero sections */
    max-width: none;
}

.single-museum .site-content {
    /* Remove default padding for full-width hero */
    padding: 0;
}

.single-museum #primary {
    /* Ensure proper spacing for museum content */
    padding: 0;
}

/* Override Astra's default link colors in museum content */
.museum-content a {
    color: var(--am-engine-red, #C4312A) !important;
}

.museum-content a:hover {
    color: var(--am-amber-yellow, #FFB400) !important;
}

/* Ensure proper button styling overrides */
.museum-cta,
.museum-btn {
    /* Override any theme button styles */
    background-color: var(--am-engine-red, #C4312A) !important;
    border-color: var(--am-engine-red, #C4312A) !important;
    color: #ffffff !important;
}

.museum-cta:hover,
.museum-btn:hover {
    background-color: var(--am-amber-yellow, #FFB400) !important;
    border-color: var(--am-amber-yellow, #FFB400) !important;
    color: var(--am-heritage-blue, #1F3A60) !important;
}

/* Ensure proper section background */
.automuseums-brand .museum-section {
    background-color: var(--am-ivory-white, #F7F7F5) !important;
    border-left-color: var(--am-heritage-blue, #1F3A60) !important;
}

/* Legacy Support Styles */
/* These styles maintain compatibility with any existing museum posts */
.museum-single:not(.automuseums-brand) {
    /* Keep existing styling for non-branded museum posts */
    max-width: 100%;
}

.museum-single:not(.automuseums-brand) .museum-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.museum-single:not(.automuseums-brand) .museum-section {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid #3498db;
}

/* Print Styles Override */
@media print {
    .automuseums-brand {
        background: white !important;
        color: black !important;
    }
    
    .museum-section {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .automuseums-brand .museum-section {
        border-width: 3px !important;
    }
    
    .museum-cta,
    .museum-btn {
        border-width: 3px !important;
    }
}

/* Focus Improvements for Theme Integration */
.museum-cta:focus,
.museum-btn:focus,
.social-link:focus,
.map-nav-link:focus {
    outline: 3px solid var(--am-heritage-blue, #1F3A60) !important;
    outline-offset: 2px !important;
}

/* Ensure proper z-index layering with theme elements */
.museum-hero {
    position: relative;
    z-index: 1;
}

.museum-navigation {
    position: relative;
    z-index: 2;
}

/* Loading States for Better UX */
.museum-section.loading {
    opacity: 0.7;
    pointer-events: none;
}

.museum-section.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--am-steel-gray-light, #7A7A7A);
    border-top: 2px solid var(--am-heritage-blue, #1F3A60);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error State Styling */
.museum-error {
    background-color: #fef2f2 !important;
    border-left-color: var(--am-error, #dc2626) !important;
    color: #991b1b !important;
}

/* Success State Styling */
.museum-success {
    background-color: #f0fdf4 !important;
    border-left-color: var(--am-success, #16a34a) !important;
    color: #166534 !important;
}

/* Ensure proper mobile responsiveness */
@media (max-width: 768px) {
    .single-museum .ast-container {
        padding-left: 0;
        padding-right: 0;
    }
    
    .museum-hero {
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* Custom Scrollbar for WebKit browsers */
.automuseums-brand ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.automuseums-brand ::-webkit-scrollbar-track {
    background: var(--am-ivory-white, #F7F7F5);
}

.automuseums-brand ::-webkit-scrollbar-thumb {
    background: var(--am-steel-gray-light, #7A7A7A);
    border-radius: 4px;
}

.automuseums-brand ::-webkit-scrollbar-thumb:hover {
    background: var(--am-heritage-blue, #1F3A60);
}
