@charset "UTF-8";

/*
 *  Terrapane Site-Wide Style Sheet
 *  Copyright © 2024 Terrapane Corporation
 *  All Rights Reserved
 *
 *  This file builds on bootstrap.css.
 */

:root,
[data-bs-theme=light]
{
    --bs-body-color: #212529;
    --bs-link-color: #0d6efd;
    --bs-highlight-bg: #48bad5;
    --terrapane-primary-color: #700808;
    --terrapane-secondary-color: #606060;
    --bs-code-color: var(--terrapane-secondary-color);
    --terrapane-bg-color: var(--terrapane-secondary-color);
    --terrapane-bg-secondary-color: #f2f2f2;
    --terrapane-footer-bg: var(--terrapane-bg-secondary-color);
    --terrapane-heading-color: var(--terrapane-secondary-color);
    --terrapane-highlight-color: #e2e2e2;
    --terrapane-placeholder-color: #cccccc;
    --terrapane-rule-color: var(--terrapane-primary-color);
    --terrapane-nav-link-color: var(--bs-link-color);
    --terrapane-nav-link-hover-bg: #e9ecef;
    --terrapane-source-header-color: #ffffff;
    --terrapane-source-header-bg: var(--terrapane-bg-color);
    --terrapane-source-body-color: #000000;
    --terrapane-source-body-bg: var(--bs-light);
    --terrapane-list-table-heading-color: #ffffff;
    --terrapane-list-table-heading-bg: var(--terrapane-bg-color);
    --terrapane-note-box-color: var(--bs-body-color);
    --terrapane-note-box-bg: #f2f9ff;
    --terrapane-note-box-border-color: var(--terrapane-highlight-color);
    --terrapane-note-box-link-color: var(--bs-link-color);
    --terrapane-shaded-box-color: #000080;
    --terrapane-shaded-box-bg: var(--terrapane-bg-secondary-color);
    --terrapane-shaded-box-border-color: var(--terrapane-bg-color);
    --terrapane-dotted-border-color: #b2b2b2;
    --techabulary-primary-color: #a1932b;
    --techabulary-secondary-color: #91730b;
}

/* Enable dark mode only on screens */
@media screen
{
    [data-bs-theme=dark]
    {
        --bs-body-color: #dee2e6;
        --bs-link-color: #6ea8fe;
        --bs-highlight-bg: #0e849f;
        --terrapane-primary-color: #700808;
        --terrapane-secondary-color: #606060;
        --bs-code-color: var(--terrapane-secondary-color);
        --terrapane-bg-color: var(--terrapane-secondary-color);
        --terrapane-bg-secondary-color: #303030;
        --terrapane-footer-color: #808080;
        --terrapane-footer-bg: var(--terrapane-bg-secondary-color);
        --terrapane-heading-color: var(--terrapane-secondary-color);
        --terrapane-highlight-color: #e2e2e2;
        --terrapane-placeholder-color: #444444;
        --terrapane-rule-color: var(--terrapane-primary-color);
        --terrapane-nav-link-color: #0d6efd;
        --terrapane-nav-link-hover-bg: #3a3a3a;
        --terrapane-source-header-color: #ffffff;
        --terrapane-source-header-bg: var(--terrapane-bg-color);
        --terrapane-source-body-color: #c9d1d9;
        --terrapane-source-body-bg: #282a2d;
        --terrapane-list-table-heading-color: #ffffff;
        --terrapane-list-table-heading-bg: var(--terrapane-bg-color);
        --terrapane-subdued-color: #808080;
        --terrapane-note-box-color: var(--bs-body-color);
        --terrapane-note-box-bg: #4f84b1;
        --terrapane-note-box-border-color: var(--terrapane-highlight-color);
        --terrapane-note-box-link-color: #291ec5;
        --terrapane-shaded-box-color: #ffffff;
        --terrapane-shaded-box-bg: #404040;
        --terrapane-shaded-box-border-color: var(--terrapane-bg-color);
        --terrapane-dotted-border-color: #b2b2b2;
        --techabulary-primary-color: #a1932b;
        --techabulary-secondary-color: #91730b;
    }
}

/* For screen width <= 575px, reduce brand image and hide search */
@media screen and (max-width: 575.98px)
{
    .navbar-brand
    {
        max-width: 200px;
    }
    .navbar-brand img
    {
        max-width: 100%;
    }
    .nav-search
    {
        display: block;
    }
    .header-wide
    {
        display: none;
    }
}

/* For all other media, including larger screens */
@media not screen and (max-width: 575.98px)
{
    .navbar-brand
    {
        display: none;
    }
    .nav-search
    {
        display: none;
    }
    .header-wide
    {
        display: block;
    }
}

/* Format adjustments when printing */
@media print
{
    .header-wide
    {
        padding-bottom: 0.5em;
        text-align: right;
    }
}

footer
{
    display: block;
    clear: both;
    margin-top: 0.5rem;

    @media not print
    {
        > *
        {
            background-color: var(--terrapane-footer-bg);
            color: var(--terrapane-footer-color);
            text-align: center;
        }

        > div
        {
            padding: 0.5rem 0 0.5rem 0;
            margin-bottom: 0.5rem;
        }
    }

    @media print
    {
        > div
        {
            padding: 0.5rem 0 0.5rem 0;
            border-top: 0.125rem solid var(--terrapane-primary-color);
        }
    }

    a:link
    {
        text-decoration: none;
        color: var(--terrapane-footer-color);
    }

    a:visited
    {
        text-decoration: none;
        color: var(--terrapane-footer-color);
    }

    a:hover
    {
        text-decoration: underline;
        color: var(--terrapane-footer-color);
    }
}

h1, h2, h3, h4, h5, h6
{
    color: var(--terrapane-heading-color);
}

.nav-link:hover
{
    color: var(--terrapane-nav-link-color);
    background-color: var(--terrapane-nav-link-hover-bg);
}

.dropdown-item:hover
{
    color: var(--terrapane-nav-link-color);
    background-color: var(--terrapane-nav-link-hover-bg);
}

.source-code
{
    color: var(--terrapane-source-body-color);
    background-color: var(--terrapane-source-body-bg);
}

.source-code-header
{
    color: var(--terrapane-source-header-color);
    background-color: var(--terrapane-source-header-bg);
}

.source-code-body
{
    margin-bottom: 0.5rem;
}

.terrapane-text-primary
{
    color: var(--terrapane-primary-color);
}

.terrapane-text-secondary
{
    color: var(--terrapane-secondary-color);
}

.terrapane-text-diminished
{
    color: var(--terrapane-gray-color);
}

/* Image pre-load placeholder */
.terrapane-placeholder
{
    background-color: var(--terrapane-placeholder-color);
}

.terrapane-card-header
{
    color: var(--terrapane-secondary-color);
    font-weight: bold !important;
    text-align: center !important;
}

.bodyprint
{
    text-align: justify !important;

    figcaption
    {
        text-align: left;
    }
}

.terrapane-link-list
{
    list-style: square;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

dl.terrapane-dl dd
{
    padding-left: 2rem;
}

dl.terrapane-dl dd:not(:last-of-type)
{
    margin-bottom: 1.5rem;
}

.banner-image
{
    max-width: 1400px;
    aspect-ratio: 35 / 10;
    /* background-color: var(--terrapane-placeholder-color); */
}

.subdued-text
{
    color: var(--terrapane-subdued-color);
}

.widespacing
{
    letter-spacing: 0.5em;
}

a
{
    text-decoration: none;

    &:hover
    {
        text-decoration: underline;
    }
}

a.techabulary
{
    color: var(--techabulary-primary-color);
    border-bottom: 1px dashed var(--techabulary-primary-color);
    text-decoration: none;

    &:hover
    {
        color: var(--techabulary-secondary-color);
    }
}

table.terrapane-list-table
{
    border-color: var(--terrapane-list-table-heading-bg);
    caption-side: top;
}

table.terrapane-list-table > caption
{
    text-align: left;
    color: var(--bs-body-color);
    font-weight: bold;
}

table.terrapane-list-table > thead > tr > th
{
    color: var(--terrapane-list-table-heading-color);
    background-color: var(--terrapane-list-table-heading-bg);
}

table.terrapane-list-table > :not(caption) > * > *
{
    padding: 0.25rem;
}

blockquote
{
    border-left: solid 3px var(--terrapane-bg-color);
    padding-left: 0.5rem;
    margin-left: 1rem;
}

kbd
{
    background-color: var(--terrapane-bg-color);
}

hr
{
    opacity: 1;
    color: var(--terrapane-rule-color);
}

div.notebox, p.notebox
{
    color: var(--terrapane-note-box-color);
    background-color: var(--terrapane-note-box-bg);
    border: solid 1px;
    border-color: var(--terrapane-note-box-border-color);
    padding: 0.5rem;
    border-radius: var(--bs-border-radius);
}

div.shadedbox, pre.shadedbox, p.shadedbox
{
    color: var(--terrapane-shaded-box-color);
    background-color: var(--terrapane-shaded-box-bg);
    border: solid 1px;
    border-color: var(--terrapane-shaded-box-border-color);
    padding: 0.5rem;
    border-radius: var(--bs-border-radius);
}

.notebox a
{
    color: var(--terrapane-note-box-link-color);
}

/*
 *  For screen width <= 575px, move the left/right aside above main content,
 *  and change other styling to look better on mobile devices
 */
@media screen and (max-width: 575.98px)
{
    /* Column most important on mobile devices */
    .primary-column
    {
        order: -1 !important;
    }
    .right-aside, .left-aside
    {
        order: -1 !important;
        margin-bottom: 1rem;
    }
    .right-aside, .left-aside
    {
        order: -1 !important;
        margin-bottom: 1rem;
    }
    .left-aside .nav, .right-aside .nav
    {
        flex-direction: row !important;
    }
    .left-aside .nav-item, .right-aside .nav-item
    {
        list-style: square;
        word-wrap: break-word !important;
        word-break: break-word !important;
        margin-right: 1rem;
        margin-left: 1rem;
    }
}

/* For all other media, including larger screens */
@media not screen and (max-width: 575.98px)
{
    .left-aside
    {
        border-right: dotted 1px var(--terrapane-dotted-border-color);
        padding-right: 1rem;
    }

    .left-aside-primary
    {
        padding-left: 2rem;
    }

    .right-aside
    {
        border-left: dotted 1px var(--terrapane-dotted-border-color);
        padding-left: 2rem;
    }

    .right-aside-primary
    {
        padding-right: 2rem;
    }

    .left-aside .nav, .right-aside .nav
    {
        flex-direction: column !important;
    }

    .left-aside .nav-item, .right-aside .nav-item
    {
        list-style: square;
        word-wrap: break-word !important;
        word-break: break-word !important;
        margin-right: 1rem;
        margin-left: 1.2rem;
    }
}