/*
Theme Name: Ad Layout Theme
Description: A 3-column layout with a top header, main content, and sidebars.
Version: 1.0
*/

/* Main Container - Core of the CSS Grid Layout */
.site-wrapper {
    display: grid;
    /* Define Columns: Left Sidebar (160px), Middle Content (Flexible), Right Sidebar (160px) */
    grid-template-columns: 160px minmax(300px, 1fr) 160px;
    /* Define Rows: Top (Auto height), Main Content (Min height of viewport) */
    grid-template-rows: auto 1fr;
    /* Define Grid Areas matching the HTML grid-area names */
    grid-template-areas:
        "top-header top-header top-header"
        "sidebar-left main-content sidebar-right";
    
    /* Styling Details */
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); /* Light purple gradient background */
    min-height: 100vh;
    gap: 20px; /* Space between the areas */
    padding: 20px;
    font-family: sans-serif;
}

/* 1. Top Ad Area */
.top-header {
    grid-area: top-header;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 2. Middle Main Content Area (Large White Box) */
.main-content {
    grid-area: main-content;
    background-color: #ffffff;
    padding: 40px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    min-height: 500px;
}

.main-content h1 {
    text-align: center; /* Center the post title */
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
    font-size: 2em;
}

/* 3. Left Sidebar */
.sidebar-left {
    grid-area: sidebar-left;
}

/* 4. Right Sidebar */
.sidebar-right {
    grid-area: sidebar-right;
}

/* Common style for Ad Placeholders */
.ad-box {
    background-color: #ffc0cb; /* Light pink */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #555;
    border-radius: 4px;
    font-weight: bold;
}

/* Top Banner Ad dimensions (728*90) */
.ad-top {
    width: 100%;
    max-width: 728px;
    height: 90px;
}

/* Sidebar Skyscraper Ad dimensions (160*600) */
.ad-sidebar {
    width: 100%;
    max-width: 160px;
    height: 600px;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .site-wrapper {
        /* Change to single column layout on mobile */
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "top-header"
            "main-content"
            "sidebar-left"
            "sidebar-right";
    }
    
    .ad-sidebar, .ad-top {
        width: 100%;
        max-width: 100%;
        height: 150px; /* Reduce height on mobile */
    }
}