@charset "UTF-8";

/*
 *  Packetizer Site-Wide Style Sheet
 *  Copyright © 2024-2025 Packetizer, Inc.
 *  All Rights Reserved
 *
 *  This file builds on bootstrap.css.
 */

:root,
[data-bs-theme=light]
{
    --bs-body-color: #212529;
    --bs-link-color: #0d6efd;
    --packetizer-primary-color: #0066cc;
    --packetizer-secondary-color: #168220;
    --packetizer-gray-color: #606060;
    --bs-code-color: var(--packetizer-secondary-color);
    --packetizer-bg-color: var(--packetizer-primary-color);
    --packetizer-bg-secondary-color: #f2f2f2;
    --packetizer-highlight-color: #e2e2e2;
    --packetizer-placeholder-color: #cccccc;
    --packetizer-rule-color: var(--packetizer-primary-color);
    --packetizer-nav-link-color: var(--bs-link-color);
    --packetizer-nav-link-hover-bg: #e9ecef;
    --packetizer-heading-color: var(--packetizer-primary-color);
    --packetizer-source-header-color: #ffffff;
    --packetizer-source-header-bg: var(--packetizer-bg-color);
    --packetizer-source-body-color: #000000;
    --packetizer-source-body-bg: var(--bs-light);
    --packetizer-list-table-heading-color: #ffffff;
    --packetizer-list-table-heading-bg: var(--packetizer-bg-color);
    --packetizer-subdued-color: #606060;
    --packetizer-footer-color: #606060;
    --packetizer-footer-bg: var(--packetizer-bg-secondary-color);
    --packetizer-note-box-color: var(--bs-body-color);
    --packetizer-note-box-bg: #f2f9ff;
    --packetizer-note-box-border-color: var(--packetizer-highlight-color);
    --packetizer-note-box-link-color: var(--bs-link-color);
    --packetizer-shaded-box-color: #000080;
    --packetizer-shaded-box-bg: var(--packetizer-bg-secondary-color);
    --packetizer-shaded-box-border-color: var(--packetizer-bg-color);
    --packetizer-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: #c4b11d;
        --packetizer-primary-color: #0066cc;
        --packetizer-secondary-color: #168220;
        --packetizer-gray-color: #606060;
        --bs-code-color: var(--packetizer-secondary-color);
        --packetizer-bg-color: var(--packetizer-primary-color);
        --packetizer-bg-secondary-color: #303030;
        --packetizer-highlight-color: #e2e2e2;
        --packetizer-placeholder-color: #444444;
        --packetizer-rule-color: var(--packetizer-primary-color);
        --packetizer-nav-link-color: #0d6efd;
        --packetizer-nav-link-hover-bg: #3a3a3a;
        --packetizer-heading-color: var(--packetizer-primary-color);
        --packetizer-source-header-color: #ffffff;
        --packetizer-source-header-bg: var(--packetizer-bg-color);
        --packetizer-source-body-color: #c9d1d9;
        --packetizer-source-body-bg: #282a2d;
        --packetizer-list-table-heading-color: #ffffff;
        --packetizer-list-table-heading-bg: var(--packetizer-bg-color);
        --packetizer-subdued-color: #808080;
        --packetizer-footer-color: #808080;
        --packetizer-footer-bg: var(--packetizer-bg-secondary-color);
        --packetizer-note-box-color: var(--bs-body-color);
        --packetizer-note-box-bg: #4f84b1;
        --packetizer-note-box-border-color: var(--packetizer-highlight-color);
        --packetizer-note-box-link-color: #291ec5;
        --packetizer-shaded-box-color: #ffffff;
        --packetizer-shaded-box-bg: #404040;
        --packetizer-shaded-box-border-color: var(--packetizer-bg-color);
        --packetizer-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(--packetizer-footer-bg);
            color: var(--packetizer-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(--packetizer-primary-color);
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bodyprint
{
    text-align: justify !important;

    figcaption
    {
        text-align: left;
    }
}

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

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

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

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

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

.widespacing
{
    letter-spacing: 0.5em;
}

#internet_time
{
    font-size: 0.6rem;
    color: var(--packetizer-subdued-color);
    font-weight: bold;
}

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.packetizer-list-table
{
    border-color: var(--packetizer-list-table-heading-bg);
    caption-side: top;
}

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

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

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

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

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

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

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

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

.notebox a
{
    color: var(--packetizer-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(--packetizer-dotted-border-color);
        padding-right: 1rem;
    }

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

    .right-aside
    {
        border-left: dotted 1px var(--packetizer-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;
    }
}

/* Media lines related to advertisement display */
@media screen
{
    .packetizer-ad-float-inline-medium, .packetizer-ad-float-inline-narrow,
    .packetizer-ad-horizontal-narrow, .packetizer-ad-horizontal-medium,
    .packetizer-ad-horizontal-unconstrained-medium,
    .packetizer-ad-horizontal-unconstrained-narrow
    {
        display: none;
    }

    .packetizer-ad-float-right
    {
        display: block;
        overflow: hidden;
        float: right;
        margin-top: 2rem;
        padding-bottom: 0;
        max-width: 120px;
        max-height: 600px;
    }

    .packetizer-ad-float-left
    {
        display: block;
        overflow: hidden;
        float: right;
        margin-top: 2rem;
        padding-bottom: 0;
        max-width: 120px;
        max-height: 600px;
    }

    .packetizer-ad-horizontal-wide
    {
        display: block;
        overflow: hidden;
        margin: 0.5rem 0 0.5rem 0;
        width: 100%;
        max-height: 90px;
        clear: both;
        text-align: center;
    }

    .packetizer-ad-horizontal-unconstrained-wide
    {
        display: block;
        overflow: hidden;
        margin: 0.5rem 0 0.5rem 0;
        width: 100%;
        clear: both;
        text-align: center;
    }

    @media (max-width: 780px)
    {
        /* Screen two narrow for floating ads */
        .packetizer-ad-float-right, .packetizer-ad-float-left,
        .packetizer-ad-horizontal-wide,
        .packetizer-ad-horizontal-unconstrained-wide
        {
            display: none;
        }

        .packetizer-ad-float-inline-medium
        {
            display: block;
            overflow: hidden;
            margin: 0.5rem 0 0.5rem 0;
            width: 100%;
            max-height: 60px;
            clear: both;
            text-align: center;
        }

        .packetizer-ad-horizontal-medium
        {
            display: block;
            overflow: hidden;
            margin: 0.5rem 0 0.5rem 0;
            width: 100%;
            max-height: 60px;
            clear: both;
            text-align: center;
        }

        .packetizer-ad-horizontal-unconstrained-medium
        {
            display: block;
            overflow: hidden;
            margin: 0.5rem 0 0.5rem 0;
            width: 100%;
            clear: both;
            text-align: center;
        }

        @media (max-width: 500px)
        {
            .packetizer-ad-float-inline-medium, .packetizer-ad-horizontal-medium,
            .packetizer-ad-horizontal-unconstrained-medium
            {
                display: none;
            }

            .packetizer-ad-float-inline-narrow, .packetizer-ad-horizontal-narrow
            {
                display: block;
                overflow: hidden;
                margin: 0.5rem 0 0.5rem 0;
                width: 100%;
                max-height: 250px;
                clear: both;
                text-align: center;
            }

            .packetizer-ad-horizontal-unconstrained-narrow
            {
                display: block;
                overflow: hidden;
                margin: 0.5rem 0 0.5rem 0;
                width: 100%;
                clear: both;
                text-align: center;
            }
        }
    }
}