@media(hover: hover) and (pointer: fine) {}

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#nav {
    width: 100%;
    font-family: 'helvetica';
    font-weight: 100;
    text-decoration: none;
    position: relative;
    top: 25%;
    display: block;
    z-index: 100;
    margin-top: 3%;
    list-style: none;
}

#home {
    font-size: 1em;
    background-color: #0C9;
    overflow: hidden;
    text-align: center;
    line-height: 1.75em;
    position: relative;
    display: block;
}

#home a {
    font-size: 1em;
    vertical-align: middle;
    text-align: center;
    display: block;
    position: relative;
    padding-bottom: -.375em;
    color: #fff;
    text-decoration: none;
}

.button-nav {
    width: 100%;
    font-family: 'helvetica';
    font-weight: 100;
    color: #fff;
    font-size: 1em;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    position: relative;
    display: block;
    z-index: 100;
    list-style: none;
    background-color: #F87286;
    border: none;
    border-right: 1px solid #cc470d;
    line-height: 1.75em;
    height: inherit;
    text-align: center;
}

.button-nav:hover {
    background-color: #0C9;
    color: white;
}

.button-nav::after {
    content: "\25BE";
    color: #0C9;
}

.button-nav:active {
    background-color: #0C9 !important;
}

#nav > a {
    display: none;
}

#nav li {
    position: relative;
    text-decoration: none;
}

#nav li a {
    color: #fff;
    display: block;
    text-decoration: none;
}

#nav li a:active {
    background-color: #0C9 !important;
}

#nav span:after {
    width: 0;
    height: 0;
    border: 0.313em solid transparent;
    border-bottom: none;
    border-top-color: #0C9;
    content: '';
    vertical-align: middle;
    display: inline-block;
    position: relative;
    right: -0.313em;
}

/* first level */
#nav > ul {
    height: 1.75em;
    background-color: #F87286;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

#nav > ul > li {
    width: 25%;
    height: 100%;
    float: left;
}

#nav > ul > li > a {
    height: 100%;
    font-size: 1em;
    line-height: 1.75em;
    text-align: center;
    text-decoration: none;
    z-index: 1000;
}

#nav > ul > li:not(:last-child) > a {
    border-right: 1px solid #cc470d;
}

#nav > ul > li:hover > a,
#nav > ul:not(:hover) > li.active > a {
    background-color: #0C9;
    list-style-type: none;
}

/* second level */
#nav li ul {
    background-color: #F87286;
    display: none;
    position: absolute;
    top: 100%;
    text-align: center;
    z-index: 100;
}

#nav li:hover ul {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    list-style-type: none;
}

#nav li:not(:first-child):hover ul {
    left: -1px;
}

#nav li ul a {
    font-size: 1em;
    border-top: 1px solid #0C9;
    padding: 0.75em;
    z-index: 1000;
}

#nav li ul a:last-of-type {
    border-top: none;
    border-bottom: 1px solid #0C9;
}

#nav li ul li a:hover,
#nav li ul:not(:hover) li.active a {
    background-color: #0C9;
    display: block;
    padding: 0.75em;
}

@media only screen and (max-width: 62.5em) {
    #nav {
        width: 100%;
        position: static;
        margin: 0;
        font-size: 85%;
    }
}
/* IPHONE */
@media only screen and (max-width: 40em) {
    .button-nav {
        width: 100%;
        font-family: 'helvetica';
        font-weight: 100;
        color: #fff;
        font-size: 1.25em;
        vertical-align: middle;
        cursor: pointer;
        outline: none;
        text-decoration: none;
        position: relative;
        display: block;
        z-index: 100;
        list-style: none;
        background-color: #F87286;
        border: none;
        line-height: 1.75em;
        height: auto;
        border-bottom: 1px solid #0C9;
        padding: 0 0.833em;
        text-align: left;
    }

    .button-nav:active {
        background-color: #0C9 !important;
    }

    .container {
        background-color: white;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #home {
        font-size: 1em;
    }

    #nav {
        position: fixed;
        top: auto;
        margin-top: -1.5em;
        background-color: white;
        z-index: 1000;
        width: 90%;
    }

    #nav > a {
        width: 2.125em;
        height: 2.125em;
        text-align: left;
        text-indent: -9999px;
        background-color: #0C9;
        position: relative;
    }

    #nav > a:before,
    #nav > a:after {
        position: absolute;
        top: 31%;
        left: 25%;
        right: 25%;
        content: '';
        border-top: .125em solid #F87286;
        border-bottom: .125em solid #F87286;
        height: .30em;
    }

    #nav > a:after {
        top: 49%;
    }

    #nav:not(:target) > a:first-of-type,
    #nav:target > a:last-of-type {
        display: block;
    }

    /* first level */
    #nav > ul {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }

    #nav:target > ul {
        display: block;
    }

    #nav > ul > li {
        width: 100%;
        float: none;
    }

    #nav > ul > li > a {
        font-size: 1.25em;
        height: auto;
        text-align: left;
        padding: 0 0.833em;
        z-index: 1000;
    }

    #nav > ul > li:not(:last-child) > a {
        border-right: none;
        border-bottom: 1px solid #0C9;
    }

    /* CRITICAL FIX: Make submenus work on mobile */
    #nav li ul {
        position: static;
        padding-top: 0;
        display: none;
        background: #F87286;
        width: 100%;
    }

    /* Show submenu when parent has 'open' class */
    #nav li.open > ul {
        display: block;
    }

    #nav li ul a {
        font-size: 1em;
        padding: 0.75em 1.5em;
        background-color: #F87286;
    }

    #nav li ul a:hover {
        background-color: #0C9;
    }

	 /* ADD THESE CRITICAL FIXES - ADDED 1/20/26 - DOUBLE CHECK FOR HOW SUBMENU LIST STYLES CHANE AND DOUBLE CLICK ON 'PROJECTS': 
    
    /* Fix 1: Prevent submenu overflow from blocking other menu items */
    #nav li ul {
        position: static;
        padding-top: 0;
        display: none;
        background: #F87286;
        width: 100%;
        /* CRITICAL: Use max-height instead of just display */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    
    #nav li.open > ul {
        display: block;
        max-height: 500px; /* Adjust based on your needs */
    } 
	
	/* Fix 2: Ensure all menu items remain clickable */
    #nav > ul > li {
        pointer-events: auto;
        position: relative;
    }
    
    #nav > ul > li > a,
    #nav > ul > li > .button-nav {
        pointer-events: auto;
        position: relative;
        z-index: 10;
    }
    
    #nav li ul a {
        font-size: 1em;
        padding: 0.75em 1.5em;
        background-color: #F87286;
        pointer-events: auto;
    }

	/* Added 1/20/26: CRITICAL: Force submenu styles to persist */
    /* Submenu - hidden by default */
     /* Lock down submenu styles aggressively */
    #nav li.has-submenu > ul {
        position: static !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none;
        background: #F87286 !important;
        width: 100% !important;
        max-height: 0;
        overflow: hidden;
        list-style: none !important;
        list-style-type: none !important;
        transition: max-height 0.3s ease-out;
    }
    
    #nav li.has-submenu.open > ul {
        display: block !important;
        max-height: 500px;
    }
    
    /* Aggressively lock list item styles */
    #nav li.has-submenu > ul > li {
        list-style: none !important;
        list-style-type: none !important;
        list-style-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-indent: 0 !important;
        background: transparent !important;
    }
    
    /* Remove any pseudo-element bullets */
    #nav li.has-submenu > ul > li::before,
    #nav li.has-submenu > ul > li::after,
    #nav li.has-submenu > ul > li::marker {
        content: none !important;
        display: none !important;
    }
    
    /* Lock link styles */
    #nav li.has-submenu > ul > li > a {
        font-size: 1em !important;
        padding: 0.75em 1.5em !important;
        background-color: #F87286 !important;
        display: block !important;
        text-align: left !important;
        margin: 0 !important;
        text-indent: 2em !important;
    }
}


@media only screen and (max-width: 1366px) and (min-width: 1051px) {
    #nav > ul > li > a {
        font-size: 1em;
        vertical-align: middle;
        text-align: middle;
        line-height: 1.75em;
    }

    #nav li ul a {
        font-size: .75em;
    }

    #home a {
        vertical-align: middle;
        padding-top: 0;
    }

    .button-nav {
        width: 100%;
        font-size: 1em;
        vertical-align: middle;
        cursor: pointer;
        outline: none;
        text-decoration: none;
        position: relative;
        display: block;
        z-index: 100;
        list-style: none;
        background-color: #F87286;
        border: none;
        border-right: 1px solid #cc470d;
        line-height: 1.75em;
        height: auto;
        padding: 0 0.833em;
    }
}


</style>