/* NAV-BAR-24-INDIAN-RED.CSS */
/* CREATED: 2026-06-11 */


    /* original colors came from nav-bar-01-indian-red-02.css */
    /* ==============================
        NAV-BAR-24-INDIAN-RED COLORS
    ================================= */

    :root {
        --nav-bar-bg: #dbd7d2;
        --nav-hilite: #d39296;          /* #d39296 tint  of #c1666b   https://coolors.co/c1666b */
        --nav-hilite: #d79da0;          /* #d79da0 tint  of #c1666b   https://coolors.co/c1666b */
        --nav-hilite: #dca8ab;          /* #dca8ab tint  of #c1666b   https://coolors.co/c1666b */
        --drop-menu-bg: #e9c9ca;        /* #e9c9ca tint  of #c1666b   https://coolors.co/c1666b */
        --drop-menu-bg: #f2dedf;        /* #f2dedf tint  of #c1666b   https://coolors.co/c1666b */
        --drop-menu-bg-band: #edd4d5;   /* #edd4d5 tint  of #c1666b   https://coolors.co/c1666b */
        --drop-menu-hover: #e0b3b5;     /* #e0b3b5 tint  of #c1666b   https://coolors.co/c1666b */
        --drop-menu-hover: #e4bec0;     /* #e4bec0 tint  of #c1666b   https://coolors.co/c1666b */
        --drop-menu-heading-bg: #87373b;          /* #87373b shade of #c1666b   https://coolors.co/c1666b */
        --drop-menu-heading-bg: #783135;          /* #783135 shade of #c1666b   https://coolors.co/c1666b */
        --drop-menu-heading-bg: #692b2e;          /* #692b2e shade of #c1666b   https://coolors.co/c1666b */
        --drop-menu-heading-bg: #5a2527;          /* #5a2527 shade of #c1666b   https://coolors.co/c1666b */
        --drop-menu-heading-bg: #511919;          /* #511919 - shade of indian red #cd5c5c  https://coolors.co/cd5c5c */
    }

    /* =====================
        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: #c1666b;      /* #c1666b is from a palette of #dbd7d2 Timberwolf   https://coolors.co/dbd7d2   added 2026-06-12  */
        --nav-bar-curr-page-bg: #5a2527;      /* #5a2527 is --drop-menu-heading-bg  */
        --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: #c0c0c0;      /* #deb887 is from a palette of #dbd7d2 Timberwolf   https://coolors.co/dbd7d2   added 2026-06-12  */
        --nav-bar-curr-page-bg: #f0f0f0;      /* #e0e0e0   */
        --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: #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: 600;
        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; */
    }