/*
 * ----------------------------------------------------------------------------
 * # Layout System
 * ----------------------------------------------------------------------------
 */

/* Grid Layout System */
.main-grid {
    display: grid;
    gap: var(--spacing);
    grid-template-columns: 1fr;
    grid-template-areas:
        "main"
        "sidebar";
}

/* Assign grid areas to elements */
#site-content {
    grid-area: main;
}
#secondary {
    grid-area: sidebar;
}

/* Desktop Layouts */
@media (min-width: 769px) {
    /* Sidebar Right (Default) */
    .sidebar-right .main-grid {
        grid-template-columns: 1fr 300px; /* メインコンテンツが残り、サイドバーは300px */
        grid-template-areas: "main sidebar";
    }

    /* Sidebar Left */
    .sidebar-left .main-grid {
        grid-template-columns: 300px 1fr; /* サイドバーは300px、メインコンテンツが残り */
        grid-template-areas: "sidebar main";
    }

    /* No Sidebar */
    .no-sidebar .main-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
    }
}

/* Add margin to sidebar on mobile */
@media (max-width: 768px) {
    #secondary {
        margin-top: var(--spacing);
    }
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing);
    box-shadow: none !important;
}

.main-content-full {
    grid-template-columns: 1fr;
}

.site-footer {
    background-color: #2c3e50;
    color: #ffffff;
    padding-top: var(--spacing);
    padding-bottom: var(--spacing);
    margin-top: var(--spacing);
    border-top: 1px solid #dee2e6;
}