/* NAV-BAR-24-GREEN.CSS */
/* CREATED: 2026-06-09 */


    /* original colors came from nav-bar-01-green.css */
    /* =========================
        NAV-BAR-20-GREEN COLORS
    ============================ */
    :root {
        --nav-bar-bg: #dbd7d2;
        --nav-hilite: #c1d7c1;          /* # is a tint of #94b39e   https://coolors.co/94b39e  set: 2024 - 06 - 27  */
        --nav-hilite: #a3beab;          /* #a3beab (muted teal) is a tint of #94b39e   https://coolors.co/94b39e  set: 2024 - 06 - 27  */
        --drop-menu-bg: #63889a;        /* #63889a is from Rosendahl home page - https://d2ocroys3p1hkd.cloudfront.net/47znrmu0o21fb1u2zd8r1h04dxjx2rlwh8y457evih4l.jpg  */
        --drop-menu-bg: #e5eee5;        /* #e5eee5 is a lighter tint of #dae7da - https://coolors.co/dae7da/variations */
        --drop-menu-bg: #dae7da;        /* #dae7da (ORIG) is a complement of #cdc5b6 25% darker than #f5f3ef   https://coolors.co/cdc5b6  set: 2024 - 06 - 19  */
        --drop-menu-bg: #DFEADF;        /* #DFEADF is a lighter tint of #dae7da - https://coolors.co/dae7da/variations */
        --drop-menu-bg: #e2ece2;        /* #e2ece2 is a lighter tint of #dae7da - https://coolors.co/dae7da/variations */
        --drop-menu-bg-band: #E7EFE7;   /* #E7EFE7 is a lighter tint of #dae7da - https://coolors.co/dae7da/variations */
        --drop-menu-bg-band: #EAF1EA;   /* #EAF1EA is a lighter tint of #dae7da - https://coolors.co/dae7da/variations */
        --drop-menu-bg-band: #ECF3EC;   /* #ECF3EC is a lighter tint of #dae7da - https://coolors.co/dae7da/variations */
        --drop-menu-hover: #F4F8F4;     /* # is a complement of #dae7da  https://coolors.co/dae7da  set: 2024 - 06 - 19  */
        --drop-menu-hover: #c1d7c1;     /* #c1d7c1 is a complement of #dae7da  https://coolors.co/dae7da  set: 2024 - 06 - 19  */
        --drop-menu-hover: #dfeadf;     /* #dfeadf is a lighter tint of #dae7da  https://coolors.co/dae7da  set: 2024 - 06 - 19  */
        --drop-menu-hover: #c7dac7;     /* #c1d7c1 is a lighter tint of #dae7da  https://coolors.co/dae7da  set: 2024 - 06 - 19  */
        --drop-menu-heading-bg: #344A3B;   /* #344A3B is a shade of #a3beab --nav-hilite  https://coolors.co/a3beab/variations  set: 2026-06-11  */
    }

    /* Sage Green Pastel Color Palette  (# 26.) */
    /* https://creativebooster.net/blogs/colors/sage-green-color-palettes#:~:text=26. */
    /* THIS IS HORRIBLE */
    /* :root {
        --nav-bar-bg: #dbd7d2;
        --nav-hilite: #9eb294;
        --nav-hilite: #b5c0a2;
        --drop-menu-bg: #e9e4bf;
        --drop-menu-hover: #c1d7c1;
        --drop-menu-heading-bg: #3A5242;
    } */

    /* ===================
        GRAY-BEIGE SCHEME
    ====================== */
    /* :root {
        --nav-hilite: #393632;
        --nav-hilite: #9ab973;
        --nav-hilite: #deb887;
        --nav-hilite: #edeae0;
        --nav-hilite: #f5deb3;
        --nav-hilite: #b2b3b5;
        --drop-menu-bg: #f5f3ef;
        --drop-menu-hover: #dbd7d2;
        --drop-menu-heading-bg: #3A5242;
        --drop-menu-heading-bg: #301934;
    } */

    /* =====================
        END COLOR VARIABLES
    ======================== */

    nav#main-nav,
    nav#main-nav a,
    nav#main-nav button {
        background-color: var(--nav-bar-bg);
        color: #000;
    }
    nav#main-nav a,
    nav#main-nav button {
        border-top-color: transparent;
        border-bottom-color: transparent;
    }
    nav#main-nav a:link,
    nav#main-nav a:visited {
        color: #000;
    }
    nav#main-nav a:hover,
    nav#main-nav a:focus,
    nav#main-nav button:hover,
    nav#main-nav button:focus {
        background-color: var(--nav-hilite);
        border-top-color: var(--drop-menu-heading-bg);
        /* border-bottom-color: var(--drop-menu-heading-bg); */
        outline: transparent;
    }
    nav#main-nav a:focus,
    nav#main-nav button:focus {
        outline-color: var(--drop-menu-heading-bg);
    }


    /* ===== INDICATE CURRENT PAGE ========== */
    :root {
        --nav-bar-curr-page-bg: #edeae0;      /* #edeae0 is from a palette of #dbd7d2 Timberwolf   https://coolors.co/dbd7d2   added 2026-06-12  */
        --nav-bar-curr-page-bg: #f4f0ec;      /* #f4f0ec is from a palette of #dbd7d2 Timberwolf   https://coolors.co/dbd7d2   added 2026-06-12  */
        --nav-bar-curr-page-bg: #c1666b;      /* #c1666b is from a palette of #dbd7d2 Timberwolf   https://coolors.co/dbd7d2   added 2026-06-12  */
        --nav-bar-curr-page-bg: #deb887;      /* #deb887 is from a palette of #dbd7d2 Timberwolf   https://coolors.co/dbd7d2   added 2026-06-12  */
    }

    body#home nav#main-nav a[href*="index"],
    body#about nav#main-nav a[href*="about"],
    body#ff-addons nav#main-nav a[href*="firefox-addons"]  {
        background-color: var(--nav-bar-curr-page-bg);
        color: #fff;
        color: #000;
        font-weight: 700;
        font-weight: bold;
        /* font-style: italic; */
    }


    /* =================================
        MAIN-NAV DROPDOWN DIALOG COLORS
    ==================================== */
    dialog.main-nav-dropdown {
        border-color: var(--nav-hilite);
        /* background-color: var(--drop-menu-bg); */
    }
    dialog.main-nav-dropdown li:nth-child(odd){
        background-color: var(--drop-menu-bg-band);
    }
    dialog.main-nav-dropdown li:nth-child(even){
        background-color: var(--drop-menu-bg);
    }

    dialog.main-nav-dropdown nav ul li.heading {
        background-color: var(--drop-menu-heading-bg);
        color: #fff;
    }


    /* ==========================================
        nav#main-nav Dropdown Dialog LINK STATES
    ============================================= */
    dialog.main-nav-dropdown nav ul li:not(.heading):hover,
    dialog.main-nav-dropdown nav ul li:focus-within {
        background-color: var(--drop-menu-hover);
    }
    dialog.main-nav-dropdown ul li a:link,
    dialog.main-nav-dropdown ul li a:visited {
        color: #000;
    }
    dialog.main-nav-dropdown ul li a:hover,
    dialog.main-nav-dropdown ul li a:focus {
        background-color: transparent;
        outline: transparent;
    }
    dialog.main-nav-dropdown a:focus {
        outline-color: var(--drop-menu-heading-bg);
        /* outline: transparent; */
    }