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


    /* =====================================
        NAV-BAR
    =============================== */

    :root {
        --nav-bar-height: 2.25rem;
        --nav-bar-height: 2.50rem;
        --nav-bar-height: 1.875rem;
        --nav-bar-height: 2.00rem;
        --nav-bar-height: 1.75rem;
        --nav-bar-height: 1.50rem;
        --nav-bar-bottom-margin: 1.00rem;
        --nav-bar-dropdown-width: 19em;
        --nav-bar-dropdown-width: 20em;
        --nav-bar-dropdown-width: 20.125em;
        --nav-bar-hilite-border: 1px;

        --nav-bar-dropdown-fs: 1.0rem;
        /* 16 x 0.6875 = 11px */
        /* 16 x 0.7500 = 12px */
        /* 16 x 0.8125 = 13px */
        /* 16 x 0.8750 = 14px */
        /* 16 x 0.9375 = 15px */
        --nav-bar-font-size: 0.8125rem;
        /* need the smaller font size with nav-bar-height 1.50rem */
        /* --nav-bar-font-size: 0.7500rem; */
    }
    /* =====================================
        END COLORS
    =============================== */

    /* IDS AND CLASSES */
    /*
    #main-nav               - navigation menu bar
    #main-nav-web-button    - button that triggers "Web" dropdown dialog
    #main-nav-nav-button    - button that triggers "Nav" dropdown dialof
    #web-dropdown           - "Web" dropdown dialog
    .main-nav-dropdown      - styles for ALL #main-nav dialog dropdown menus
    */


    /* =====================================
        MAIN NAVIGATION MENU BAR CSS
    ================================ */
    nav#main-nav {
        position: fixed;
        top: 0;
        z-index: 100;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2em;
        align-items: stretch;
        width: 100%;
        height: var(--nav-bar-height);
        margin-block-end: var(--nav-bar-bottom-margin);
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

        /* #29 - https://getcssscan.com/css-box-shadow-examples */
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
        /* #28 - https://getcssscan.com/css-box-shadow-examples */
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }
    nav#main-nav button {
        border-left: none;
        border-right: none;
    }
    nav#main-nav a,
    nav#main-nav button {
        display: block;
        line-height: calc( var(--nav-bar-height) - ( var(--nav-bar-hilite-border) * 2 ) );
        text-decoration: none;
        padding-inline: 2em;
        font-family: "Ubuntu Sans", system-ui, sans-serif;
        font-size: var(--nav-bar-font-size);
        font-weight: 500;
        font-variant: small-caps;
        letter-spacing: 3px;
        border-top: var(--nav-bar-hilite-border);
        border-top-style: solid;
    }
    nav#main-nav button {
        padding-inline: 2em 2.25em;
        /* background-image: url(../images/down-arrow-9660-12px.png); */
        background-image: url(../images/arrow-down-iconarchive-24px.png);
        background-position: right 0.75em center;
        background-repeat: no-repeat;
        background-size: 1em;
    }
    nav#main-nav a:hover,
    nav#main-nav a:focus,
    nav#main-nav button:hover,
    nav#main-nav button:focus {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }
    nav#main-nav a:focus,
    nav#main-nav button:focus {
        outline-width: 1px;
        outline-style: solid;
    }


    /* ==============================
        MAIN-NAV DROPDOWN DIALOG CSS
    ================================== */
    dialog.main-nav-dropdown {
        width: var(--nav-bar-dropdown-width);
        border-width: 8px;
        /* border-width: 6 px; */
        border-style: solid;
        /* outline: transparent; */
        /* padding-inline: 0.25em; */
        /* padding-block-end: 1.00em; */
        /* font-family: "Ubuntu Sans", system-ui, sans-serif; */
        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    }
    dialog.main-nav-dropdown::backdrop {
        backdrop-filter: brightness(80%) blur(0px);
        backdrop-filter: brightness(88%) blur(0px);
    }
    dialog.main-nav-dropdown nav ul {
        list-style-type: none;
        font-size: 1.0rem;
        font-size: var(--nav-bar-dropdown-fs);
        font-weight: 440;
        font-family: "Ubuntu Sans", system-ui, sans-serif;
    }
    dialog.main-nav-dropdown nav ul li {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        /* using align-items: center; causes vertical JITTERING during the dropdown process */
        /* align-items: center; */
        /* BY DEFAULT, flexbox Stretches to fill the width of its Parent Container */
        /* flex-basis: 100%; */
        padding: 0.2500rem 0.3125rem 0.2500rem 0.50rem;
        padding: 0.2500rem 0.2500rem 0.2500rem 0.50rem;
        /* outline: 1px solid red; */
    }
    dialog.main-nav-dropdown nav ul li.heading {
        justify-content: center;
        /* margin-inline: auto; */
        /* max-width: fit-content; */
        letter-spacing: 3px;
        /* font-family: "Bitter", serif; */
        font-family: "Lora", serif;
        font-weight: 600;
        font-style: normal;
        font-variant: small-caps;
        padding: 0.25rem 0.35rem 0.25rem 0.35rem;
    }
    dialog.main-nav-dropdown ul li a {
        order: 2;
        flex-grow: 1;
        /* using align-self: center; causes vertical JITTERING during the dropdown process */
        /* align-self: center; */
        padding-top: 0.125em;
        padding-left: 0.75em;
        text-decoration: none;
        /* outline: 1px solid green; */
    }
    dialog.main-nav-dropdown nav ul li a + img {
        order: 1;
        width: 22px;
        height: 22px;
        align-self: center;
        font-size: 11px;
    }
    /* ======================================
        main-nav Dropdown Dialog LINK STATES
    ========================================= */
    dialog.main-nav-dropdown ul li a:hover,
    dialog.main-nav-dropdown ul li a:focus {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }
    dialog.main-nav-dropdown a:focus {
        outline-width: 1px;
        outline-style: solid;
        /* outline: transparent; */
    }


    /* ========================
        SET DROPDOWN ANCHORING
    =========================== */
    /* HOW TO POSITION A POPOVER */
    /* https://stackoverflow.com/questions/78233243/how-to-position-a-popover-in-css/78249031#78249031 */
    button#main-nav-web-button {
        anchor-name: --web-dropdown;
    }
    [popover]#web-dropdown {
        position-anchor: --web-dropdown;
        left: anchor(left);
        top: anchor(bottom);
        }

    button#main-nav-nav-button {
        anchor-name: --nav-dropdown;
    }
    [popover]#nav-dropdown {
        position-anchor: --nav-dropdown;
        left: anchor(left);
        top: anchor(bottom);
        }
    /* ========================
        END DROPDOWN ANCHORING
    =========================== */


    /* ===== ANIMATE POPOVER OPENING ===== */
    /* =================================== */

    /* *** FOR DROPDOWN EFFECT WITH ANCHORING ON THE BUTTON *** */
    /* *** NEGATIVE MARGIN-TOP FOR CLOSED STATE AND STARTING-STYLE, THEN MARGIN-TOP (0) FOR OPEN STATE *** */
    /* from:  https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#transitioning_a_popover */
    /* Open state of the dialog  */

    /* @supports (position-anchor: --web-dropdown) { */
        [popover]:popover-open {
            opacity: 1;
            /* margin-top: 0; */
            /* transform: translateY(0.0625rem); */
            transform: translateY(0.0rem);
            /* transform: scale(1); */
        /* FOR USE WHEN THERE IS NO ANCHORING */
            /* margin-top: calc( var(--nav-bar-height) + ( var(--nav-bar-hilite-border) * 2) ); */
            /* margin-inline: auto; */
        }
        /* Closed state of the dialog   */
        [popover] {
            opacity: 0.95;
            /* margin-top: -0.375rem; */
            /* margin-top: -0.5rem; */
            transform: translateY(+1.25rem);
            transform: translateY(+1.00rem);
            /* transform: scale(0.9); */
            /* transition: all 0.6s ease allow-discrete; */
            transition: all 0.5s ease-in allow-discrete;
            transition: all 0.3s linear allow-discrete;
        }
        /* Before open state  */
        /* Needs to be after the previous dialog:open rule to take effect, as the specificity is the same */
        @starting-style {
            [popover]:popover-open {
                opacity: 0.95;
                /* margin-top: -0.375rem; */
                /* margin-top: -0.5rem; */
                transform: translateY(+1.25rem);
                transform: translateY(+1.00rem);
                /* transform: scale(0.9); */
            }
        }
    /* } */


/* =====================================
    MEDIA QUERIES
======================== */
@media screen and (max-width: 794px) {
    nav#main-nav  {
        gap: 0.25em;
    }
}
@media screen and (max-width: 650px) {
    nav#main-nav a,
    nav#main-nav button {
        padding-inline: 1.0em;
        letter-spacing: 2px;
    }
    nav#main-nav button {
        padding-inline: 1.0em 2.0em;
    }
}

@media screen and (max-width: 470px) {
    [popover]#web-dropdown,
    [popover]#nav-dropdown {
        /* position-anchor: none; */
        /* position: static; */
        left: 0;
        margin-inline: auto;
    }
    nav#main-nav a,
    nav#main-nav button {
        letter-spacing: 0px;
    }
}

@media screen and (max-width: 400px) {
    nav#main-nav  {
        gap: 2px;
    }
    nav#main-nav a,
    nav#main-nav button {
        padding-inline: 0.75em;
        padding-inline: 0.6153em;
        letter-spacing: 0px;
        /* font-size: 0.75rem; */
    }
    nav#main-nav button {
        padding-inline: 1.0em 2.0em;
        padding-inline: 0.75em 1.6923em;
    }
    nav#main-nav button {
        padding-inline: 0.50em 1.5em;
        /* background-position: right 0.375em center; */
        background-position: right 0.250em center;
    }
}
@media screen and (max-width: 340px) {
    nav#main-nav a,
    nav#main-nav button {
        padding-inline: 0.50em;
        letter-spacing: 0px;
    }
    nav#main-nav button {
        background-image: none;
    }
}

/* ===== M E D I A  SHORT DEVICE ========== */

@media screen and (max-height: 900px) {
    dialog.main-nav-dropdown {
        border-width: 4px;
        /* border-width: 2px; */
    }
}
/* @media screen and (max-height: 810px) { */
@media screen and (height <= 798px) {
/* @media screen and (max-height: 760px) { */
/* @media screen and (max-height: 770px) { */
    .omit-on-short-device {
        display: none;
    }
}
/* @media screen and (height <= 600px) { */
/* @media screen and (max-height: 660px) { */
/* @media screen and (max-height: 650px) { */
/* ASSUMES a height of 568px Apple iPhone 5; some may be Only 480px - https://devhints.io/resolutions*/
/* @media screen and (height <= 700px) { */

@media screen and (height <= 660px) {
    .omit-on-very-short-device {
        display: none;
        /* display: block; */
    }
    :root {
        --nav-bar-dropdown-width: 19.25em;
    }
}