/**
 * SlotsGamblers Game Article Widget - Frontend Styles
 *
 * @package SlotsGamblersGameArticle
 * @version 1.0.1
 */

/* ========================================
   CSS VARIABLES & ROOT SETTINGS
======================================== */
.sgga-game-review-article {
    --sgga-color-purple: #9333EA;
    --sgga-color-purple-light: #F3E8FF;
    --sgga-color-green: #10B981;
    --sgga-color-white: #FFFFFF;
    --sgga-text-primary: #1A1A1A;
    --sgga-text-secondary: #6B7280;
    --sgga-border-color: #E0E0E0;
    --sgga-spacing-sm: 0.5rem;
    --sgga-spacing-md: 1rem;
    --sgga-spacing-lg: 1.5rem;
    --sgga-spacing-xl: 2rem;
    --sgga-radius-md: 0.5rem;
    --sgga-radius-xl: 1rem;
}

/* ========================================
   MAIN CONTAINER
======================================== */
.sgga-game-review-article {
    background: var(--sgga-color-white);
    border: 0.0625rem solid var(--sgga-border-color);
    border-radius: var(--sgga-radius-xl);
    padding: var(--sgga-spacing-xl);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    max-width: 100%;
    margin: 0 auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--sgga-text-primary);
    line-height: 1.6;
    box-sizing: border-box;
}

/* Full-width container support for large displays */
.elementor-widget-slotsgamblersgamearticle {
    width: 100% !important;
    max-width: 100% !important;
}

.elementor-widget-slotsgamblersgamearticle .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================
   TYPOGRAPHY - MAIN TITLE
======================================== */
.sgga-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sgga-text-primary);
    margin-bottom: var(--sgga-spacing-lg);
    line-height: 1.2;
    margin-top: 0;
}

/* ========================================
   TYPOGRAPHY - ARTICLE TEXT
======================================== */
.sgga-article-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--sgga-text-secondary);
}

.sgga-article-text p {
    margin-bottom: var(--sgga-spacing-md);
    margin-top: 0;
}

.sgga-article-text p:last-child {
    margin-bottom: 0;
}

.sgga-article-text strong,
.sgga-article-text b {
    color: #1A1A1A !important;
    font-weight: 700 !important;
}

/* Additional specificity for Elementor override */
.elementor-widget-slotsgamblersgamearticle .sgga-article-text strong,
.elementor-widget-slotsgamblersgamearticle .sgga-article-text b {
    color: #1A1A1A !important;
    font-weight: 700 !important;
}

/* ========================================
   TYPOGRAPHY - SECTION TITLES
======================================== */
.sgga-article-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--sgga-text-primary);
    margin-top: var(--sgga-spacing-xl);
    margin-bottom: var(--sgga-spacing-md);
    line-height: 1.2;
}

/* ========================================
   HIGHLIGHT BOX
======================================== */
.sgga-article-highlight-box {
    background: var(--sgga-color-purple-light);
    border-left: 0.25rem solid var(--sgga-color-purple);
    padding: var(--sgga-spacing-md) var(--sgga-spacing-lg);
    border-radius: var(--sgga-radius-md);
    margin: var(--sgga-spacing-lg) 0;
}

.sgga-article-highlight-box p {
    margin: 0;
    color: var(--sgga-text-primary);
    font-weight: 600;
}

/* ========================================
   FEATURES LIST
======================================== */
.sgga-article-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sgga-spacing-sm);
    margin: var(--sgga-spacing-md) 0;
}

.sgga-article-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--sgga-text-secondary);
}

.sgga-article-feature-item::before {
    content: '✓';
    color: var(--sgga-color-green);
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ========================================
   LISTS (UL/OL)
======================================== */
.sgga-article-text ul,
.sgga-article-text ol {
    padding-left: 1.5rem;
    margin: var(--sgga-spacing-md) 0;
}

.sgga-article-text ul li,
.sgga-article-text ol li {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
    color: var(--sgga-text-secondary);
}

.sgga-article-text ul li:last-child,
.sgga-article-text ol li:last-child {
    margin-bottom: 0;
}

/* ========================================
   RESPONSIVE - TABLET (768px - 1199px)
======================================== */
@media (max-width: 74.9375rem) and (min-width: 48.0625rem) {
    .sgga-game-review-article {
        padding: var(--sgga-spacing-lg);
    }

    .sgga-section-title {
        font-size: 1.375rem;
    }

    .sgga-article-section-title {
        font-size: 1.1875rem;
    }
}

/* ========================================
   RESPONSIVE - MOBILE (MAX 768px)
   FULL-WIDTH EDGE-TO-EDGE LAYOUT
======================================== */
@media (max-width: 48rem) {
    /* Force full-width on mobile - override Elementor containers */
    .elementor-widget-slotsgamblersgamearticle {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }

    .elementor-widget-slotsgamblersgamearticle .elementor-widget-container {
        width: 100vw !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Main article container - edge-to-edge */
    .sgga-game-review-article {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: var(--sgga-spacing-lg) var(--sgga-spacing-md);
    }

    /* Typography adjustments */
    .sgga-section-title {
        font-size: 1.25rem;
        margin-bottom: var(--sgga-spacing-md);
    }

    .sgga-article-text {
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .sgga-article-text p {
        margin-bottom: var(--sgga-spacing-md);
    }

    .sgga-article-section-title {
        font-size: 1.125rem;
        margin-top: var(--sgga-spacing-lg);
        margin-bottom: var(--sgga-spacing-sm);
    }

    /* Highlight box adjustments */
    .sgga-article-highlight-box {
        padding: var(--sgga-spacing-sm) var(--sgga-spacing-md);
        margin: var(--sgga-spacing-md) 0;
    }

    .sgga-article-highlight-box p {
        font-size: 0.8125rem;
    }

    /* Features list - single column on mobile */
    .sgga-article-features-list {
        grid-template-columns: 1fr;
        gap: 0.375rem;
    }

    .sgga-article-feature-item {
        font-size: 0.8125rem;
    }

    /* List adjustments */
    .sgga-article-text ul,
    .sgga-article-text ol {
        padding-left: 1.25rem;
        margin: var(--sgga-spacing-md) 0;
    }

    .sgga-article-text ul li,
    .sgga-article-text ol li {
        font-size: 0.875rem;
        margin-bottom: 0.375rem;
    }
}

/* ========================================
   RESPONSIVE - SMALL MOBILE (MAX 480px)
======================================== */
@media (max-width: 30rem) {
    .sgga-article-text {
        font-size: 0.875rem;
    }

    .sgga-article-section-title {
        font-size: 1rem;
    }

    .sgga-section-title {
        font-size: 1.125rem;
    }

    .sgga-game-review-article {
        padding: var(--sgga-spacing-md) var(--sgga-spacing-sm);
    }
}

/* ========================================
   ELEMENTOR EDITOR COMPATIBILITY
======================================== */
.elementor-editor-active .sgga-game-review-article {
    min-height: 20rem;
}

/* Ensure proper display in Elementor editor */
.elementor-editor-active .elementor-widget-slotsgamblersgamearticle {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   PRINT STYLES
======================================== */
@media print {
    .sgga-game-review-article {
        box-shadow: none;
        border: 0.0625rem solid #000;
    }

    .sgga-article-feature-item::before {
        color: #000;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
======================================== */
.sgga-article-text a {
    color: var(--sgga-color-purple);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.sgga-article-text a:hover,
.sgga-article-text a:focus {
    color: var(--sgga-text-primary);
    text-decoration: none;
}

/* Focus styles for accessibility */
.sgga-article-text a:focus {
    outline: 0.125rem solid var(--sgga-color-purple);
    outline-offset: 0.125rem;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
======================================== */
.sgga-game-review-article * {
    box-sizing: border-box;
}

/* Prevent layout shift */
.sgga-game-review-article img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   DARK MODE SUPPORT (Optional)
======================================== */
@media (prefers-color-scheme: dark) {
    .sgga-game-review-article {
        --sgga-color-white: #1A1A1A;
        --sgga-text-primary: #F9FAFB;
        --sgga-text-secondary: #D1D5DB;
        --sgga-border-color: #374151;
        --sgga-color-purple-light: #2D1B3D;
    }
    
    /* Ensure bold text is visible in dark mode */
    .sgga-article-text strong,
    .sgga-article-text b {
        color: #F9FAFB !important;
    }
    
    .elementor-widget-slotsgamblersgamearticle .sgga-article-text strong,
    .elementor-widget-slotsgamblersgamearticle .sgga-article-text b {
        color: #F9FAFB !important;
    }
}