/**
 * Mirage Default Theme - Main Stylesheet
 * 
 * This file contains core theme styles that complement
 * the public CSS files in public/assets/css/
 */

/* Theme Variables - These can be overridden by theme settings */
:root {
    --theme-color-primary: #1A5276;
    --theme-color-secondary: #0F172A;
    --theme-container-width: 1280px;
}

/* Theme prefix classes */
.mirage-container {
    max-width: var(--theme-container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* Theme slot styles */
.widget-slot {
    position: relative;
}

.widget-slot-header {
    /* Header widget area */
}

.widget-slot-footer {
    /* Footer widget area */
}

.widget-slot-sidebar {
    /* Sidebar widget area */
}

.widget-slot-hero {
    /* Hero widget area */
}

.widget-slot-content {
    /* Main content widget area */
}

.widget-slot-cta {
    /* Call to action widget area */
}

/* Theme component styles */
.section-title-accent {
    position: relative;
    display: inline-block;
}

.section-title-accent.dotted::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 8px;
    height: 8px;
    background-color: var(--theme-color-primary);
    border-radius: 50%;
}

/* Widget styles */
.widget {
    margin-bottom: 1.5rem;
}

.widget-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.widget-content {
    /* Widget content styling */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    :root {
        --theme-container-width: 100%;
    }
}