:root
{
    /*------------------------------------------------------
      Main site colors
    ------------------------------------------------------*/

    --page-background:
        #f5f7fa;

    --card-background:
        #ffffff;

    --header-background:
        #1f3a5f;

    --header-text:
        #ffffff;

    --accent:
        #2f6fa3;

    --accent-hover:
        #24577f;

    --text-color:
        #222222;

    --muted-text:
        #666666;

    --border-color:
        #d9dee5;

    --border-radius:
        6px;

    --success-color:
        #198754;

    --danger-color:
        #c62828;

    --content-max-width:
        1200px;

    /*------------------------------------------------------
      Active navigation button
    ------------------------------------------------------*/

    --nav-active-background:
        #355e3b;

    --nav-active-border:
        #d8c85a;

    --nav-active-text:
        #fff3a6;

    --nav-active-hover:
        #416f48;
}

/*----------------------------------------------------------
  Basic page defaults
----------------------------------------------------------*/

*
{
    box-sizing:
        border-box;
}

body
{
    margin:
        0;

    background:
        var(--page-background);

    color:
        var(--text-color);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

a
{
    color:
        var(--accent);
}

/*----------------------------------------------------------
  General page container
----------------------------------------------------------*/

.page-container
{
    width:
        min(
            calc(100% - 24px),
            var(--content-max-width)
        );

    margin:
        18px auto;
}

/*----------------------------------------------------------
  General dark page header
----------------------------------------------------------*/

.page-header
{
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        28px;

    background:
        var(--header-background);

    color:
        var(--header-text);

    border-radius:
        10px;

    padding:
        18px 28px;

    margin-bottom:
        20px;
}

.page-header h1
{
    flex:
        0 0 auto;

    margin:
        0;

    font-size:
        30px;
}

/*----------------------------------------------------------
  Shared cards
----------------------------------------------------------*/

.card
{
    background:
        var(--card-background);

    border:
        1px solid var(--border-color);

    border-radius:
        var(--border-radius);

    padding:
        16px;
}

/*----------------------------------------------------------
  Shared navigation
----------------------------------------------------------*/

.site-nav
{
    flex:
        1 1 auto;

    min-width:
        0;
}

/*----------------------------------------------------------
  Navigation rows
----------------------------------------------------------*/

.site-nav__links
{
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}

/*----------------------------------------------------------
  Regular user links
----------------------------------------------------------*/

.site-nav__links--user
{
    justify-content:
        flex-end;
}

/*----------------------------------------------------------
  Spacing between Row 1 and Row 2
----------------------------------------------------------*/

/*
 * Row 1 and Row 2 both use site-nav__links--user.
 *
 * This adds the same 6px vertical spacing between those
 * two rows that is used for the Admin and Account rows.
 */

.site-nav__links--user
+
.site-nav__links--user
{
    margin-top:
        6px;
}

/*----------------------------------------------------------
  Administrator links
----------------------------------------------------------*/

.site-nav__links--admin
{
    justify-content:
        flex-end;

    margin-top:
        6px;
}

/*----------------------------------------------------------
  Login / account row
----------------------------------------------------------*/

.site-nav__account
{
    display:
        flex;

    justify-content:
        flex-end;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        6px;
}

.site-nav__links--account
{
    justify-content:
        flex-end;
}

.site-nav__login-status
{
    color:
        var(--header-text);

    font-size:
        13px;
}

/*----------------------------------------------------------
  Standard header navigation buttons
----------------------------------------------------------*/

/*
 * Header navigation buttons intentionally use translucent
 * white rather than --accent.
 */

.site-button
{
    display:
        inline-block;

    padding:
        7px 12px;

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

    color:
        #ffffff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.35
        );

    border-radius:
        4px;

    font-size:
        13px;

    font-weight:
        bold;

    line-height:
        1.2;

    text-align:
        center;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.site-button:hover,
.site-button:focus
{
    background:
        rgba(
            255,
            255,
            255,
            0.24
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.50
        );

    color:
        #ffffff;
}

/*----------------------------------------------------------
  Active/current-page navigation button
----------------------------------------------------------*/

/*
 * This is applied automatically by includes/header.php
 * when the current PHP page matches the navigation button.
 */

.site-button--active
{
    background:
        var(--nav-active-background);

    border-color:
        var(--nav-active-border);

    color:
        var(--nav-active-text);
}

.site-button--active:hover,
.site-button--active:focus
{
    background:
        var(--nav-active-hover);

    border-color:
        var(--nav-active-border);

    color:
        var(--nav-active-text);
}

/*----------------------------------------------------------
  Common utility classes
----------------------------------------------------------*/

.text-success
{
    color:
        var(--success-color);
}

.text-danger
{
    color:
        var(--danger-color);
}

.text-muted
{
    color:
        var(--muted-text);
}

/*----------------------------------------------------------
  Mobile / narrow layouts
----------------------------------------------------------*/

@media
(
    max-width:
        900px
)
{
    .page-header
    {
        align-items:
            flex-start;
    }
}

@media
(
    max-width:
        700px
)
{
    .page-header
    {
        flex-direction:
            column;

        gap:
            14px;

        padding:
            18px 16px;
    }

    .site-nav
    {
        width:
            100%;
    }

    .site-nav__links,
    .site-nav__account
    {
        justify-content:
            flex-start;
    }

    .site-nav__account
    {
        align-items:
            flex-start;
    }

    .site-button
    {
        padding:
            8px 11px;
    }
}