/* Responsive layout for phones/mini-tablets.
   Everything here is scoped inside a max-width media query, so nothing
   changes at 992px (Bootstrap's "lg") and above — desktop keeps the
   exact fixed-width 3-column layout defined inline in each _Layout*
   file. Below that, the fixed-width sidebar columns (#fff-col-left/
   #fff-col-right, normally flex:0 0 240px) get stacked to full width
   and their content is wrapped in a Bootstrap `.collapse` (already
   loaded via the Bootstrap JS bundle every layout includes) so they
   don't push main content down the page by default — a `d-lg-block`
   utility class alongside `.collapse` on the same element is what
   keeps them permanently visible again at lg+, per Bootstrap's own
   documented pattern for a responsive collapsible nav/sidebar. */
@media (max-width: 991.98px) {
    #fff-body-row {
        flex-direction: column;
    }

    /* width (not just flex-basis/max-width) has to be overridden
       explicitly: Bootstrap 5's .col-3/.col-6 grid classes set a plain
       `width: 25%`/`50%` property directly (not just max-width), and in
       a column-direction flex container an item's explicit width wins
       over flex-basis/stretch for cross-axis (horizontal) sizing —
       confirmed via computed styles, this was silently keeping each
       column at its original Bootstrap percentage width even after
       flex-direction/flex-basis were both correctly overridden. */
    #fff-col-left,
    #fff-col-main,
    #fff-col-right {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    /* These borders separated columns that sat side by side — stacked,
       they'd just be a stray line between sections instead. Each
       column's own border-bottom (already set inline) still shows. */
    #fff-col-left,
    #fff-col-main {
        border-right: none;
    }

    .fff-sidebar-toggle {
        display: block;
        width: 100%;
        text-align: left;
        background-color: var(--fff-nav-bg);
        color: var(--fff-tan-light);
        border: 1px solid var(--fff-border);
        border-radius: 0;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
    }

        .fff-sidebar-toggle:hover {
            background-color: var(--fff-nav-hover);
            color: #fff;
        }

        .fff-sidebar-toggle::after {
            content: "\25BE"; /* ▾ */
            float: right;
        }

        .fff-sidebar-toggle[aria-expanded="true"]::after {
            content: "\25B4"; /* ▴ */
        }
}