/* ==========================================================================
   Sandbox notice — non-production environment disclaimers
   --------------------------------------------------------------------------
   Loaded LAST, after refresh.css. Self-contained and namespaced `sbx-` so it
   does not collide with the theme (.footer/.credits), the refresh overlay
   (--lb-*) or the consent module (.lb-consent-*).

   The footer band is deliberately in normal document flow — never fixed and
   never dismissible — so the notice survives with JS disabled and remains
   present for crawlers and archives.
   ========================================================================== */

/* --- Footer notice band ------------------------------------------------- */

.sbx-notice {
    background: #2a2205;
    border-top: 3px solid #d68910;
    color: #f3e5c3;
    padding: 22px 0;
    font-size: 12px;
    line-height: 1.65;
}

.sbx-notice__title {
    display: block;
    margin: 0 0 8px;
    color: #ffc65c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sbx-notice__title .fa {
    margin-right: 6px;
}

.sbx-notice p {
    margin: 0 0 8px;
    color: #f3e5c3;
    font-size: 12px;
    line-height: 1.65;
    max-width: 90ch;
}

.sbx-notice strong {
    color: #ffdb94;
}

.sbx-notice__links {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.sbx-notice__links li {
    display: inline-block;
    margin: 0;
}

.sbx-notice__links li + li:before {
    content: "\00b7";
    margin: 0 8px;
    color: #a08a55;
}

.sbx-notice a,
.sbx-notice__links a {
    color: #ffc65c;
    text-decoration: underline;
}

.sbx-notice a:hover,
.sbx-notice a:focus,
.sbx-notice__links a:hover,
.sbx-notice__links a:focus {
    color: #fff;
    text-decoration: underline;
}

/* --- Inline checkout warning -------------------------------------------- */

/* Colours stated explicitly for the same reason as .sbx-terms above — the
   refresh.css light default text colour would otherwise wash these out. */
.sbx-alert {
    margin: 0 0 24px;
    border-left: 4px solid #d68910;
    background: #fdf6e3;
    border-color: #e8d9a8;
    color: #6b5320;
}

.sbx-alert,
.sbx-alert p,
.sbx-alert .sbx-alert__title {
    color: #6b5320;
}

.sbx-alert a {
    color: #8a5b00;
    text-decoration: underline;
    font-weight: 700;
}

.sbx-alert a:hover,
.sbx-alert a:focus {
    color: #5c3d00;
}

.sbx-alert .sbx-alert__title {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
}

.sbx-alert p {
    margin: 0;
}

/* --- Terms page --------------------------------------------------------- */

/* refresh.css sets a near-white default text colour (#f9fafb) for the site's dark
   header/footer chrome, and the theme's .static-page component has a WHITE
   background. No page used .static-page before this one, so that combination was
   never exercised — left alone, body copy renders white-on-white. Every text
   colour inside .sbx-terms is therefore stated explicitly here. */
.sbx-terms {
    padding: 30px 0 60px;
    background: #fff;
    color: #3c4149;
}

.sbx-terms .content,
.sbx-terms .content p,
.sbx-terms .content li,
.sbx-terms .content ul {
    color: #3c4149;
}

.sbx-terms h1,
.sbx-terms h2,
.sbx-terms .content strong {
    color: #1c2230;
}

.sbx-terms h1 {
    margin: 0 0 6px;
    font-size: 28px;
}

.sbx-terms .sbx-terms__updated {
    margin-bottom: 28px;
    color: #767b84;
    font-size: 12px;
    font-style: italic;
}

.sbx-terms h2 {
    margin: 34px 0 10px;
    font-size: 17px;
    line-height: 1.4;
}

.sbx-terms h2:first-of-type {
    margin-top: 0;
}

.sbx-terms .content p,
.sbx-terms .content li {
    font-size: 14px;
    line-height: 1.75;
}

.sbx-terms ul {
    margin: 0 0 14px 18px;
    padding: 0;
}

.sbx-terms li {
    margin-bottom: 6px;
}

.sbx-terms .sbx-placeholder {
    background: #fff3cd;
    border: 1px dashed #d68910;
    padding: 2px 6px;
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
    color: #7d5a00;
}

/* Sidebar section nav */
.sbx-toc {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sbx-toc li {
    margin: 0;
    border-bottom: 1px solid #e4e4e4;
}

.sbx-toc li:last-child {
    border-bottom: 0;
}

/* Theme link teal (#0d9488) only reaches 3.7:1 on white; darkened for AA. */
.sbx-toc a {
    display: block;
    padding: 9px 4px;
    font-size: 13px;
    line-height: 1.4;
    color: #0f5f59;
}

.sbx-toc a:hover,
.sbx-toc a:focus {
    color: #1c2230;
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 767px) {
    .sbx-notice {
        padding: 18px 0;
    }

    .sbx-terms {
        padding: 20px 0 40px;
    }

    .sbx-terms h1 {
        font-size: 22px;
    }
}