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

   V1 (legacy): float-based, requires .rsl-sidebar-layout
   container with overflow:auto to contain the floats.
   V2 (preferred): flex-based via .rsl-sidebar-auto,
   supports position:sticky children, no overflow trap.
   ============================================ */

/* ──────────────────────────────────────────────
   V2 Layout Container (flex-based)
   ──────────────────────────────────────────────
   Used by V2 _renderSidebar which emits
   <div class="rsl-sidebar-auto"> with
   data-sidebar-slot children. Uses flex instead of
   floats so position:sticky inside the aside or main
   slots works correctly (floats collapse their parent
   height, defeating sticky; overflow:auto creates a
   scroll container, defeating sticky). */
.rsl-sidebar-auto {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    overflow: visible;
    margin-bottom: 2rem;
}

.rsl-sidebar-auto > aside[data-sidebar-slot] {
    flex: 0 0 auto;
    width: 230px;
    align-self: stretch;
    background: #008CA8;
    color: #fff;
    padding: 1rem;
    border-radius: 6px;
}

.rsl-sidebar-auto > main[data-sidebar-slot="main"] {
    flex: 1 1 auto;
    min-width: 0;
}

.rsl-sidebar-auto > section[data-sidebar-slot="below"] {
    flex-basis: 100%;
    margin-top: 2rem;
}

/* Right-side sidebar: place main first */
.rsl-sidebar-auto[data-sidebar="right"] > main[data-sidebar-slot="main"] {
    order: -1;
}

@media (max-width: 768px) {
    .rsl-sidebar-auto {
        flex-direction: column;
    }
    .rsl-sidebar-auto > aside[data-sidebar-slot] {
        width: 100%;
        align-self: auto;
    }
}

/* ──────────────────────────────────────────────
   V1 Layout Container (legacy float-based)
   ──────────────────────────────────────────────
   sidebar.js adds .rsl-sidebar-layout class at runtime
   to .rsl-sidebar-auto containers AFTER V2 renders.
   We previously had overflow:auto here to contain the
   V1 floats — but that creates a scroll container that
   traps position:sticky descendants. The V2 flex layout
   above already contains its children without overflow
   trickery, so we can use overflow:visible here for
   V2 markup. The legacy float-based selectors below
   still work for any hand-coded V1 markup; floats are
   contained by the .rsl-sidebar-auto flex container if
   that's the parent, or by the BFC of any other
   block-level parent. */
.rsl-sidebar-layout {
    overflow: visible;
    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;
    }
}