/* ==========================================================================
   site.css — QuantumOnline.com ASP.NET Core
   Preserves the QOL color scheme (dark green / white / light green)
   while using Bootstrap 5 as the layout foundation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties — edit here to retheme the whole site
   -------------------------------------------------------------------------- */
:root {
    --qol-green-dark:   #0d0d54;   /* deep navy-blue used for text in CF */
    --qol-green-nav:    #339966;   /* nav bar green */
    --qol-green-hover:  #7ebf9e;   /* nav hover green */
    --qol-green-light:  #DCFDD7;   /* table/page background tint */
    --qol-header-bg:    #003366;   /* site header background */
    --qol-header-text:  #ffffff;
    --qol-welcome-bg:   #e6f4ea;
    --qol-supporter-bg: #fff8dc;
    --qol-link:         #0033cc;
    --qol-link-hover:   #cc0000;
}

/* --------------------------------------------------------------------------
   Global
   -------------------------------------------------------------------------- */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    background-color: #ffffff;
}

a {
    color: var(--qol-link);
}

a:hover {
    color: var(--qol-link-hover);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Header — green bar matching Topbar.cfm (bgcolor 339966)
   -------------------------------------------------------------------------- */
.qol-header {
    background-color: var(--qol-green-nav);
    padding: 10px 0;
    color: #ffffff;
}

/* Self-contained 3-column flex layout (no Bootstrap grid dependency) */
.qol-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* box-sizing:border-box so the padding is included in the percentage widths,
   keeping all three columns on one row (without it, padding overflows 100%
   and the right column wraps under the left). */
.qol-header-left,
.qol-header-center,
.qol-header-right {
    box-sizing: border-box;
    padding: 6px 10px;
    text-align: center;
}

.qol-header-left {
    flex: 0 0 25%;
    max-width: 25%;
}

.qol-header-center {
    flex: 1 1 50%;
    max-width: 50%;                /* centers the banner + welcome lines */
}

.qol-header-right {
    flex: 0 0 25%;
    max-width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;         /* register button hugs the far-right edge */
}

/* Stack the three columns on narrow screens */
@media (max-width: 991px) {
    .qol-header-left,
    .qol-header-center,
    .qol-header-right {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.qol-supporter-link {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    font-size: 13px;
}

.qol-supporter-link:hover {
    color: #ffff00;
    text-decoration: underline;
}

/* Quick Search box */
.qol-quicksearch {
    color: #ffffff;
}

.qol-search-input {
    max-width: 150px;
}

.qol-search-btn {
    background-color: var(--qol-header-bg);
    color: #ffffff;
    border: none;
}

.qol-search-btn:hover {
    background-color: #002244;
    color: #ffffff;
}

.qol-search-hints {
    font-size: 12px;
    color: #e8ffe8;
    line-height: 1.35;
}

/* Quick Search autocomplete dropdown (ported from multi_lookup.cfm) */
#multi-wrapper {
    position: relative;
}

#multi-dropdown {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    width: 320px;
    max-width: 90vw;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    background-color: #DCFDD7;
    text-align: left;
}

#multi-dropdown .list-group-item {
    cursor: pointer;
    list-style-type: none;
    text-align: left;
    padding: 4px 8px;
}

#multi-dropdown .list-group-item:hover,
#multi-dropdown .list-group-item.active {
    background-color: #c5f5bd;
    color: #339966;
}

#multi-dropdown .item-detail {
    font-size: 0.85em;
    color: #555;
}

/* Banner + welcome */
.qol-banner {
    max-width: 100%;
    height: auto;
}

.qol-welcome-lines {
    color: #ffff00;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
}

.qol-welcome-name {
    font-size: 16px;
}

.qol-welcome-lines img {
    height: 20px;
    vertical-align: middle;
}

.qol-welcome-lines a {
    color: #ffffff;
    text-decoration: underline;
}

.qol-contrib-reminder {
    color: #ffffff;
    font-size: 12px;
    font-weight: normal;
    margin: 6px 0;
}

.qol-email-warning {
    color: orange;
    font-weight: normal;
    font-size: 12px;
}

.qol-cookieid {
    color: #e8ffe8;
}

.qol-register-btn {
    border: 0;
}

/* --------------------------------------------------------------------------
   Top Navigation Bar — replaces mm_menu.js Dreamweaver menus
   -------------------------------------------------------------------------- */
.qol-navbar {
    background-color: var(--qol-green-nav);
    padding: 0;
}

.qol-navbar .nav-link,
.qol-navbar .navbar-nav > .nav-item > .nav-link {
    color: #ffffff !important;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 10px;
    white-space: nowrap;
}

.qol-navbar .nav-link:hover,
.qol-navbar .nav-link:focus {
    background-color: var(--qol-green-hover);
    color: #ffffff !important;
}

.qol-navbar .dropdown-menu {
    font-size: 12px;
    border-radius: 0;
    border-color: #555555;
    min-width: 260px;
}

.qol-navbar .dropdown-item {
    color: #000000;
    padding: 5px 14px;
}

.qol-navbar .dropdown-item:hover {
    background-color: var(--qol-green-hover);
    color: #ffffff;
}

.qol-user-menu {
    font-size: 11px !important;
}

/* --------------------------------------------------------------------------
   Welcome back bar
   -------------------------------------------------------------------------- */
.qol-welcome-bar {
    background-color: var(--qol-welcome-bg);
    border-bottom: 1px solid #b2d8b2;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Long-form content body (About, FAQ, Glossary, Privacy, etc.)
   -------------------------------------------------------------------------- */
.qol-content-body {
    max-width: 1100px;
    margin: 0 auto 20px;
    background-color: #DCFDD7;        /* light green panel, matches the CF content tables */
    padding: 18px 26px;
    border-radius: 4px;
    text-align: left;
    line-height: 1.5;
    color: #0d0d54;
    font-size: 16px;                 /* matches the CF <font size="3"> the other pages use */
}

.qol-content-body a {
    color: var(--qol-link);
}

/* --------------------------------------------------------------------------
   Page headings
   -------------------------------------------------------------------------- */
.qol-page-heading {
    color: #006633;
    font-size: 18px;
    font-weight: bold;
    text-decoration: underline;
    text-align: center;
    margin-bottom: 16px;
}

.qol-welcome-heading {
    color: green;
    font-size: 22px;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Supporter note
   -------------------------------------------------------------------------- */
.qol-supporter-note {
    background-color: var(--qol-supporter-bg);
    border-color: #ccaa00;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   Registration CTA on home page
   -------------------------------------------------------------------------- */
.qol-member-notice {
    background-color: var(--qol-green-light);
    border: 1px solid #b2d8b2;
    border-radius: 4px;
}

.qol-register-cta {
    background-color: var(--qol-green-light);
    border: 1px solid #b2d8b2;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.qol-btn-login {
    background-color: var(--qol-green-nav);
    color: #ffffff;
    border: none;
}

.qol-btn-login:hover {
    background-color: #267a52;
    color: #ffffff;
}

.qol-btn-register {
    background-color: var(--qol-header-bg);
    color: #ffffff;
    border: none;
}

.qol-btn-register:hover {
    background-color: #002244;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Data tables (for Phase 4 — pfdtable, debttable, etc.)
   -------------------------------------------------------------------------- */
.qol-data-table {
    font-size: 11px;
    width: 100%;
    border-collapse: collapse;
}

.qol-data-table th {
    background-color: var(--qol-green-nav);
    color: #ffffff;
    font-size: 11px;
    padding: 4px 6px;
    white-space: nowrap;
}

.qol-data-table th a {
    color: #ffffff;
    text-decoration: none;
}

.qol-data-table th a:hover {
    text-decoration: underline;
}

.qol-data-table td {
    padding: 3px 6px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: top;
}

.qol-data-table tr:nth-child(even) td {
    background-color: #f5fdf5;
}

/* --------------------------------------------------------------------------
   Footer navigation styles moved to qol-nav.css (shared chrome stylesheet
   loaded by BOTH the ASP.NET and ColdFusion pages).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Copyright
   -------------------------------------------------------------------------- */
.qol-copyright {
    background-color: #eeeeee;
    font-size: 11px;
    color: #666666;
    border-top: 1px solid #dddddd;
    text-align: center;
    padding: 8px 0;
}

/* --------------------------------------------------------------------------
   Page content area
   -------------------------------------------------------------------------- */
#qol-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 12px;
}