/*
 * Home page rails (card carousels) and their shared controls.
 * Kept out of public/scss/app.css on purpose (compiled file, C-014/C-015).
 */

/* Rail arrows: light buttons in light mode (were grey #e9ecef and turned dark grey on hover). Dark mode keeps btn-dark. */
html[data-bs-theme="light"] .btn-dark.btn-icon-round[data-scroll],
html[data-bs-theme="light"] .btn-dark.btn-icon-round.reels-arrow {
    --bs-btn-color: #212529;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: rgba(0, 0, 0, 0.12);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f1f3f5;
    --bs-btn-hover-border-color: rgba(0, 0, 0, 0.18);
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #e9ecef;
    --bs-btn-active-border-color: rgba(0, 0, 0, 0.2);
    --bs-btn-disabled-color: #adb5bd;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: rgba(0, 0, 0, 0.08);
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #212529;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html[data-bs-theme="light"] .btn-dark.btn-icon-round[data-scroll]:hover,
html[data-bs-theme="light"] .btn-dark.btn-icon-round[data-scroll]:focus-visible,
html[data-bs-theme="light"] .btn-dark.btn-icon-round.reels-arrow:hover,
html[data-bs-theme="light"] .btn-dark.btn-icon-round.reels-arrow:focus-visible {
    background-color: #f1f3f5;
    border-color: rgba(0, 0, 0, 0.18);
    color: #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

html[data-bs-theme="light"] .btn-dark.btn-icon-round[data-scroll]:active,
html[data-bs-theme="light"] .btn-dark.btn-icon-round.reels-arrow:active {
    background-color: #e9ecef;
    border-color: rgba(0, 0, 0, 0.2);
    color: #000;
}

/* Phones: rails were ~80 px apart (3rem + 15px heading margin + 16px track padding). Now 16 + 16 = 32 px. */
@media (max-width: 767.98px) {
    #pageContents .track-controls > .row.mt-5 {
        margin-top: 16px !important;
    }

    /* The category pill strip pulled the first rail up with -25px; keep the first heading clear of the pills. */
    #pageContents #dynamicCategories.sticky-nav {
        margin-bottom: 16px;
    }
}