/**
 * SMG THEME - CSS ARCHITECTURE & HIERARCHY SYSTEM
 * Professionelle CSS-Organisation mit klaren Spezifitäts-Regeln
 * 
 * HIERARCHIE (von niedrig zu hoch):
 * 1. CSS Variables & Reset          (Spezifität: 0,0,0,1)
 * 2. Base Elements                  (Spezifität: 0,0,0,1)
 * 3. Layout Classes                 (Spezifität: 0,0,1,0)
 * 4. Component Classes              (Spezifität: 0,0,1,0)
 * 5. Widget Classes                 (Spezifität: 0,0,2,0)
 * 6. State Classes                  (Spezifität: 0,0,2,0)
 * 7. Utility Classes                (Spezifität: 0,0,1,0 + !important)
 * 8. Override Classes               (Spezifität: 0,0,3,0 + !important)
 */

/* ========================================
   1. CSS CUSTOM PROPERTIES (HÖCHSTE PRIORITÄT)
   ======================================== */
:root {
    /* SPEZIFITÄTS-LEVEL: Utilities */
    --css-hierarchy-utility: 1000;
    --css-hierarchy-override: 2000;
    --css-hierarchy-important: 3000;
    
    /* WIDGET SPEZIFITÄT-MULTIPLIER */
    --widget-base-specificity: 100;
    --widget-component-specificity: 200;
    --widget-state-specificity: 300;
}

/* ========================================
   2. CSS RESET & NORMALIZATION (LEVEL 0)
   ======================================== */
/* Spezifität: 0,0,0,1 - Niedrigste Priorität */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: var(--font-family-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
}

/* ========================================
   3. LAYOUT SYSTEM (LEVEL 100)
   ======================================== */
/* Spezifität: 0,0,1,0 - Layout-Priorität */
.smg-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.smg-grid {
    display: grid;
    gap: var(--grid-gap);
}

.smg-flex {
    display: flex;
    gap: var(--flex-gap);
}

/* ========================================
   4. COMPONENT SYSTEM (LEVEL 200)
   ======================================== */
/* Spezifität: 0,0,1,0 - Component-Priorität */
.smg-card {
    background: var(--card-background);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
}

.smg-button {
    background: var(--button-background);
    color: var(--button-color);
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    padding: var(--button-padding);
    font-weight: var(--button-font-weight);
    transition: var(--button-transition);
    cursor: pointer;
}

.smg-icon {
    width: var(--icon-size);
    height: var(--icon-size);
    color: var(--icon-color);
}

/* ========================================
   5. WIDGET SYSTEM (LEVEL 300-500)
   ======================================== */
/* Spezifität: 0,0,2,0 - Widget-Priorität */

/* Widget Base Classes */
.smg-widget {
    position: relative;
    padding: var(--widget-padding);
}

.smg-widget .smg-widget-container {
    max-width: var(--widget-max-width);
    margin: 0 auto;
    padding: 0 var(--widget-inner-padding);
}

/* Widget Components haben höhere Spezifität */
.smg-widget .smg-card {
    /* Überschreibt .smg-card für Widget-Kontext */
    background: var(--widget-card-background);
    border-radius: var(--widget-card-border-radius);
}

.smg-widget .smg-button {
    /* Überschreibt .smg-button für Widget-Kontext */
    background: var(--widget-button-background);
    color: var(--widget-button-color);
}

/* ========================================
   6. WIDGET-SPEZIFISCHE STYLES (LEVEL 400-600)
   ======================================== */
/* Spezifität: 0,0,3,0 - Spezifische Widget-Priorität */

/* Bento Grid Widget */
.smg-widget.smg-bento-grid .smg-card {
    /* Höchste Spezifität für Bento Cards */
    background: var(--bento-card-background);
    backdrop-filter: var(--bento-card-backdrop-filter);
    border: var(--bento-card-border);
}

.smg-widget.smg-bento-grid .smg-card.bento-shops {
    /* Spezifische Shops Card Styles */
    background: var(--bento-shops-background) !important;
    border: var(--bento-shops-border) !important;
    box-shadow: var(--bento-shops-shadow) !important;
}

/* Store Directory Widget */
.smg-widget.smg-store-directory .smg-card {
    background: var(--store-card-background);
    border: var(--store-card-border);
}

/* ========================================
   7. STATE CLASSES (LEVEL 600-800)
   ======================================== */
/* Spezifität: 0,0,2,0 + Pseudo-Klassen */

/* Hover States */
.smg-card:hover {
    transform: var(--card-hover-transform);
    box-shadow: var(--card-hover-shadow);
}

.smg-button:hover {
    background: var(--button-hover-background);
    transform: var(--button-hover-transform);
}

/* Widget-spezifische Hover States */
.smg-widget.smg-bento-grid .smg-card:hover {
    transform: var(--bento-card-hover-transform);
    box-shadow: var(--bento-card-hover-shadow);
}

/* ========================================
   8. UTILITY CLASSES (LEVEL 1000)
   ======================================== */
/* Spezifität: 0,0,1,0 + !important - Höchste Priorität */

/* Spacing Utilities */
.smg-p-0 { padding: 0 !important; }
.smg-p-1 { padding: var(--space-1) !important; }
.smg-p-2 { padding: var(--space-2) !important; }
.smg-p-3 { padding: var(--space-3) !important; }
.smg-p-4 { padding: var(--space-4) !important; }

.smg-m-0 { margin: 0 !important; }
.smg-m-1 { margin: var(--space-1) !important; }
.smg-m-2 { margin: var(--space-2) !important; }
.smg-m-3 { margin: var(--space-3) !important; }
.smg-m-4 { margin: var(--space-4) !important; }

/* Display Utilities */
.smg-hidden { display: none !important; }
.smg-block { display: block !important; }
.smg-flex { display: flex !important; }
.smg-grid { display: grid !important; }

/* Text Utilities */
.smg-text-center { text-align: center !important; }
.smg-text-left { text-align: left !important; }
.smg-text-right { text-align: right !important; }

/* Color Utilities */
.smg-text-primary { color: var(--color-primary) !important; }
.smg-text-secondary { color: var(--color-secondary) !important; }
.smg-bg-primary { background-color: var(--color-primary) !important; }
.smg-bg-secondary { background-color: var(--color-secondary) !important; }

/* ========================================
   9. OVERRIDE CLASSES (LEVEL 2000)
   ======================================== */
/* Spezifität: 0,0,3,0 + !important - Notfall-Überschreibungen */

/* Nur für kritische Überschreibungen verwenden */
.smg-force-reset {
    all: unset !important;
}

.smg-force-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* ========================================
   10. RESPONSIVE BREAKPOINTS
   ======================================== */
/* Konsistente Breakpoints für alle Widgets */

/* Tablet */
@media (max-width: 1024px) {
    .smg-widget {
        padding: var(--widget-padding-tablet);
    }
    
    .smg-widget .smg-widget-container {
        padding: 0 var(--widget-inner-padding-tablet);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .smg-widget {
        padding: var(--widget-padding-mobile);
    }
    
    .smg-widget .smg-widget-container {
        padding: 0 var(--widget-inner-padding-mobile);
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .smg-widget {
        padding: var(--widget-padding-small);
    }
    
    .smg-widget .smg-widget-container {
        padding: 0 var(--widget-inner-padding-small);
    }
}

/* ========================================
   11. PRODUCTION READY - NO DEBUG STYLES
   ======================================== */
/* Debug-Styles entfernt für Production */