html{
    --tp-menu-height: 4rem;
    --tp-mobile-menu-width: 75vw;
}
.mobile {
    width:100%;
    display: flex;
    justify-content: end;
}

.mobile-menu a{
    text-decoration:underline;
}
.mobile-menu [icon="close"]{
    display: none;
}
.mobile-menu[open] [icon='menu']{
    display: none;
}
.mobile-menu[open] [icon="close"]{
    display: block;
}
iron-icon{
    color:white;
}
[icon="menu"], [icon="close"]{
    align-self: center;
    justify-self: end;
    cursor:pointer;
    position: absolute;
    right:1rem;
    z-index: 10;
    top:1.5rem;
}
[icon="menu"]:hover,
[icon="close"]:hover
{
    background:white;
    color:black;
    border-radius:var(--jhb-spacing-small);
}


details.mobile-menu{
    /*height:var(--tp-menu-height);*/
    /*flex:1;*/
    height:100vh;
    display:grid;
    grid-template-rows:var(--tp-menu-height) auto;
}

.mobile-menu summary{
    list-style: none;
    display:flex;
    justify-content:flex-end;
    /*padding-right:var(--jhb-spacing);*/
    height:100%;
}
.mobile-menu section{
    position: fixed;
    right: 0;
    top:var(--tp-menu-height);
    width:var(--tp-mobile-menu-width);
    height:100vh;
    background: white;
    border-left:thin solid #ddd;
    z-index:5;
    padding:var(--jhb-spacing);
    border-top:var(--jhb-color-b10e0e) solid 0.125rem;
    box-shadow: -1px 0px 5px 0px rgba(0,0,0,0.25);;

}
.mobile-menu header{
    height:5.5rem;
    border-bottom: thin solid #ddd;
    font-size:2rem;
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
    color:#554;
}
.mobile-menu section div{
    overflow:auto;
    height:calc(100% - 2.5rem);
}
.mobile-menu li{
    list-style: none;
    padding: var(--jhb-spacing-smaller) 0;
    width:100%;
}
.menubar .mobile-menu .lang-selector{
    height: auto;
    width:auto;
    justify-content: left;
    margin:0;
    align-items: center;
    gap:0.5em;
    margin-bottom: 1em;
    padding:var(--jhb-spacing) 0;
}

.top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1500; /* elevate over map */
    background-color: var(--pb-menubar-background-color);
    border:thin solid lightgray;
}

.menubar .menubar-left {
    margin-left: var(--s0);
    margin-right: var(--s0);
}

.menubar .lang-selector {
    margin-left: 1rem;
    align-self: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 4rem;
    color: var(--gf-black);
}

.menubar .lang-selector a,
.menubar .lang-selector a:link,
.menubar .lang-selector a:visited,
.menubar .lang-selector a:active {
    margin-left: 0;
    margin-right: 0;
}

.menubar .lang-selector a.active {
    color: var(--gf-dark-gray);
}

.menubar {
    display: flex;
    height: var(--gf-header-height);
    justify-content: start;
    background-color: var(--pb-menubar-background-color);
    color: var(--pb-menubar-color);
    font-size: var(--pb-base-font-size);
    font-family: var(--pb-content-font-family);
    --pb-search-suggestions-color: var(--pb-menubar-color);
    --pb-search-suggestions-background: var(--pb-menubar-background-color);
}

.menubar a,
.menubar a:link,
.menubar a:hover {
    text-decoration: none;
    font-size: var(--pb-base-font-size);
    color: var(--gf-black);
    align-self: center;
    margin-left: var(--s-2);
    margin-right: var(--s-2);
    white-space: nowrap;
}

.menubar a:focus{
    text-decoration: underline;
}

.menubar .dropdown-menu a{
    margin:0;
}
.menubar .dropdown-menu a:hover{
    background: #ddd;
}

.menubar .dropdown-menu {
    font-size: var(--pb-base-font-size);
    color: var(--gf-black);
    margin:0;
    padding:0;
}

.menubar details a {
    border-bottom: thin lightgray solid;
    margin: auto .25rem;
    display: block;
}

.menubar details.mobile-menu a,
.menubar details.mobile-menu p{
    font-size: 1.4rem;
    line-height: 1.5;
}
.menubar details.mobile-menu p{
    border-bottom: thin solid #ddd;
}
.menubar details.mobile-menu a{
    border:none;
    margin: 0;
}
.menubar details.mobile-menu a:hover{
    text-decoration: underline;
}

.menu-right.dropdown-menu{
    justify-content: end;
    flex-grow: 3;
}

.mobile-menu ul ul li{
    padding-left:var(--jhb-spacing);
}