/**
 * Core Live Church Layout CSS
 * * This file contains the minimal, essential CSS required to establish the 
 * primary CSS Grid structure and fixed sizing for major layout elements.
 * This is enqueued separately to ensure layout stability.
 */

/* ---------------------------------
1. BODY STYLES (Viewport setup)
--------------------------------- */
body {
    min-height: 100vh; /* Ensures content extends to full height */
    overflow: hidden; /* Prevent body scrolling */
}

/* ---------------------------------
2. MAIN GRID LAYOUT (Desktop Default - 4 Columns x 4 Rows)
--------------------------------- */
.main-layout {
    display: grid;
    height: 100vh;
    /* UPDATED COLUMNS: Nav-Space (0px) | Gap (20px) | Content (2fr) | Sidebar (1fr) */
    grid-template-columns: 0px 20px 2fr 1fr; 
    /* Rows: Announcements (40px) | Header (80px) | Viewers Bar (80px) | Content (1fr) */
    grid-template-rows: 40px 80px 80px 1fr; 
    overflow: hidden; /* Prevent layout container scrolling */
}

/* ---------------------------------
3. ELEMENT POSITIONING (Fixed Grid Placement)
--------------------------------- */

/* TOP ANNOUNCEMENT BAR (Row 1, Full Width) */
.top-announcement-bar {
    grid-column: 1 / 5; 
    grid-row: 1; 
    z-index: 50;
    position: relative; 
    clip-path: none;
}

/* HEADER (Row 2, Full Width) */
.header {
    grid-column: 1 / 5; 
    grid-row: 2; 
    position: relative;
    z-index: 10;
}

/* MAIN CONTENT AREA (Scrollable) */
.main-content {
    /* Desktop: Starts after the nav space/gap (Col 2/3) */
    grid-column: 3 / 4; 
    /* Desktop: Starts from row 3 (Viewers Bar) and extends to the end (Row 5) */
    grid-row: 3 / 5; 
    overflow-y: auto; 
    position: relative;
    z-index: 5;
    scrollbar-width: none; 
    min-height: 100%; 
    max-width: 100%;
}
.main-content::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

/* DESKTOP ACTIVE VIEWERS BAR (Row 3, Column 4) */
#desktop-viewers-bar {
    grid-column: 4;
    grid-row: 3; 
    z-index: 5;
    height: 80px; /* Explicit height to match row 3 */
}

/* RIGHT SIDEBAR (Content) */
.right-sidebar {
    grid-column: 4;
    grid-row: 4; 
    height: 100%; 
    position: relative; 
    z-index: 10;
}

/* ---------------------------------
4. MOBILE RESPONSIVENESS (< 600px) - Layout Overrides
--------------------------------- */
@media (max-width: 599px) {
    .main-layout {
        /* Mobile Columns: 1 Column (Full Width) */
        grid-template-columns: 1fr; 
        /* Mobile Rows: Announcements (40px) | Header (80px) | Content (1fr) */
        grid-template-rows: 40px 80px 1fr; 
    }

    /* Mobile Positioning */
    .top-announcement-bar { grid-column: 1 / 2; grid-row: 1; }
    .header { grid-column: 1 / 2; grid-row: 2; }
    .main-content { 
        grid-column: 1 / 2; /* Full width */
        grid-row: 3;      /* Row 3 (below header) */
    }

    /* Elements hidden/overridden on mobile */
    #desktop-viewers-bar { display: none !important; }
    .right-sidebar {
        /* Sidebar is now a fixed drawer on mobile, grid placement is irrelevant */
        grid-column: unset; 
        grid-row: 1 / 4; 
    }
}