/* ============================================
   RSL Sidebar Layout Component
   Version: 1.0.0
   Description: Float-based sidebar layout system
   supporting left, right, or dual sidebar layouts
   with responsive mobile stacking.
   ============================================ */

/* ──────────────────────────────────────────────
   Layout Container
   ────────────────────────────────────────────── */

.rsl-sidebar-layout {
    /* Contain the float(s) so the parent height wraps them */
    overflow: auto;
    margin-bottom: 2rem;
}

/* ──────────────────────────────────────────────
   Left Sidebar
   ────────────────────────────────────────────── */

.rsl-sidebar,
.rsl-sidebar-left {
    float: left;
    width: 230px;
    background: #008CA8;
    color: #fff;
    padding: 1rem;
    margin-right: 2rem;
    border-radius: 6px;
}

/* ──────────────────────────────────────────────
   Right Sidebar
   ────────────────────────────────────────────── */

.rsl-sidebar-right {
    float: right;
    width: 230px;
    background: #008CA8;
    color: #fff;
    padding: 1rem;
    margin-left: 2rem;
    border-radius: 6px;
}

/* ──────────────────────────────────────────────
   Sidebar Typography
   ────────────────────────────────────────────── */

.rsl-sidebar h2,
.rsl-sidebar-left h2,
.rsl-sidebar-right h2 {
    margin-top: 0;
}

/* ──────────────────────────────────────────────
   Main Content Areas
   ────────────────────────────────────────────── */

/* Main content that sits NEXT TO one or more sidebars */
/* Normal blocks; width becomes container minus floated sidebars */
.rsl-main-with-sidebar,
.rsl-main-with-both {
    padding-top: 0.5rem;
}

/* Content that should be FULL WIDTH BELOW the sidebar(s) */
.rsl-below-sidebar {
    clear: both;
    margin-top: 2rem;
}

/* ──────────────────────────────────────────────
   Responsive - Mobile Stacking
   ────────────────────────────────────────────── */

@media (max-width: 768px) {
    .rsl-sidebar,
    .rsl-sidebar-left,
    .rsl-sidebar-right {
        float: none;
        width: auto;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 1rem;
    }

    .rsl-main-with-sidebar,
    .rsl-main-with-both,
    .rsl-below-sidebar {
        clear: none;
    }
}