<?
// *************************** MENUS *****************************************
$a=arrayKeysContainingSegment($classesLoading,'menu_');
if(count($a)>0){?>
    #hmb_,.hnav_ input{position:absolute;left:-999em;visibility:hidden;height:0;}
    .hmb_{position:fixed;display:flex;flex-direction:column;justify-content:space-around;align-items:center;z-index:999;}
    .hmb_>div{display:block;width:75%;transition:transform 0.3s ease-out;}
    #hmb_:checked+.wpg #b_,#hmb_:checked+.wpg #f_{display:none;} <?/* this prevents double scrollbars when the menu is down, decided not to worry about the h_ being taller than the viewport height */?>
    <?/* DON'T, DON'T, DON'T USE vh on heights !!! You will mess up iphone */?>
    #hmb_:checked+.wpg .hnav_{overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--w);}
    #hmb_:checked+.wpg .hmb_>div:nth-of-type(2){opacity:0}
    .hnav_{width:100%;z-index:299;} 
    .hnav_ ul{margin-bottom:0;}
    .hnav_ li{position:relative;margin-left:0;}
    .hnav_>ul>li{width:auto;}
    .mn_ ul{list-style:none;}
    .md_>summary{position:relative;list-style:none;white-space:nowrap;z-index:3;}
    .md_>summary::marker,.md_>summary::-webkit-details-marker{display:none;}
    .md_>summary::after{content:"▼";display:inline-block;transition:transform .3s ease;font-size:0.8em;margin-left:0.5em;vertical-align:middle;opacity:.6;}
    .md_ .ms_{transition:height .3s ease;z-index:1;}
    .md_[open]>summary::after{transform:rotate(180deg);}
    .md_ a{white-space:nowrap;}
    .hmbn{position:sticky;}
    .hmn_,.hnav_ .ms_>ul{display:flex;flex-direction:column;width:100%;margin:0;list-style:none;}
    .mn_>li>input:checked~.ms_{height:auto;}
    .js_ .mn_>li>input:checked~.ms_{height:0;}<?/* this is so the transition works the first time when we are able to use javascript to manipulate ms_ height */?>  
    @media (min-width:<? echo WIDGETS_MENU_BREAK; ?>em){
        #hmb_,.hmb_{display:none;}
        .hnav_{display:inline-block;width:auto;max-height:none;overflow:visible;}
        <?/* we need important! on max-height:none because a resize from hamburger to open menu might not trigger resize, leaving the element max-height as zero. */?>
        .hmn_{flex-direction:row;max-height:none !important;}<?/* justify content center is the default because sometimes the menu wraps under the logo and it looks better centered */?>
    }
<?}
if(array_key_exists('menu_1~h_',$classesLoading)){ /* standard horizontal menu with vertical drop downs */ ?>
@media (min-width:<? echo WIDGETS_MENU_BREAK; ?>em){
    <?/* #hmb_ is the input, .hmb_ is the label following #hmb_  hamburger should be removed when sites are upgraded to an svg hamburger */?>
    .hnav_ .mn_>li{position:relative;}
    .ms_>ul>li>a{white-space:nowrap;}
}
<?}