/* =============================================================================
   GLOBAL
   ============================================================================= */

#lang{
grid-area:lang;
}

#search{
grid-area:search;
}

#icon{
grid-area:icon;
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#icon img,
#icon picture{
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#logo{
grid-area:logo;
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#logo img,
#logo picture{
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#nav{
grid-area:nav;
}

#nav_2{
grid-area:nav_2;
}

#tools{
grid-area:tools;
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#nav_toggle{
grid-area:nav_toggle;
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}


/* =============================================================================
   MOBILE (max-width: 45rem)
   ============================================================================= */
@media screen and (max-width: 45rem){

#top_wrapper{
grid-area:top;
float:left;
width:100%;
height:var(--top-height);
}

#top_header{
float:left;
width:100%;
border-bottom:var(--brd-gray-400) 1px solid;
height:var(--top-height);
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#top_header.true{
height:var(--top-sticky-height);
position:fixed;
top:0;
left:0;
float:left;
width:100%;
z-index:999;
background:var(--bgr-top-300);
-webkit-backdrop-filter:var(--backdrop-filter-default);
backdrop-filter:var(--backdrop-filter-default);
transition:top 550ms cubic-bezier(.4,0,.2,1);
}

#top_header.true.hidden{
top:-100%;
}

#top{
display:grid;
grid-template-columns:var(--top-icon-column-width) auto auto var(--nav-toggle-width) var(--nav-toggle-spacing);
grid-template-rows:minmax(var(--top-height),var(--top-sticky-height)) auto auto;
grid-gap:0;
grid-template-areas:
        "icon logo tools nav_toggle ."
        "search search search search search"
        "nav nav nav nav nav";
}

#top.true{
grid-template-rows:var(--top-sticky-height) auto auto;
}

#top{
float:left;
width:100%;
height:var(--top-height);
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#top.true{
height:var(--top-sticky-height);
}

#logo{
display:none;
}

#icon{
margin:.5rem 0 0 .25rem;
width:var(--top-icon-width);
height:var(--top-icon-height);
}

#tools{
height:var(--top-height);
}

#nav_toggle{
height:var(--top-height);
}


#top.true #icon{
margin:.35rem 0 0 .25rem;
width:var(--top-sticky-icon-width);
height:var(--top-sticky-icon-height);
}

#top.true #tools{
height:var(--top-sticky-height);
}

#top.true #nav_toggle{
height:var(--top-sticky-height);
}

}

/* =============================================================================
   TABLET (45rem – 79.5rem) — no orientation qualifier
   ============================================================================= */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

#top_wrapper{
grid-area:top;
float:left;
width:100%;
height:var(--top-height);
}

#top_header{
float:left;
width:100%;
border-bottom:var(--brd-gray-400) 1px solid;
height:var(--top-height);
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#top_header.true{
height:var(--top-sticky-height);
position:fixed;
top:0;
left:0;
float:left;
width:100%;
z-index:999;
background:var(--bgr-top-300);
-webkit-backdrop-filter:var(--backdrop-filter-default);
backdrop-filter:var(--backdrop-filter-default);
transition:top 550ms cubic-bezier(.4,0,.2,1);
}

#top_header.true.hidden{
top:-100%;
}

#top{
float:left;
width:100%;
height:var(--top-height);
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#top.true{
height:var(--top-sticky-height);
}

#top{
display:grid;
grid-template-columns:var(--top-icon-column-width) var(--top-logo-column-width) auto var(--nav-toggle-width) var(--nav-toggle-spacing);
grid-template-rows:minmax(var(--top-height),var(--top-sticky-height)) auto auto;
grid-gap:0;
grid-template-areas:
        "icon logo tools nav_toggle ."
        "search search search search search"
        "nav nav nav nav nav";
}

#top.true{
grid-template-columns:var(--top-sticky-icon-column-width) var(--top-sticky-logo-column-width) auto var(--nav-toggle-width) var(--nav-toggle-spacing);
grid-template-rows:var(--top-sticky-height) auto auto;
}

#icon{
margin:1rem 0 0 .25rem;
width:var(--top-icon-width);
height:var(--top-icon-height);
}

#logo{
position:relative;
margin-top:1rem;
height:var(--top-logo-height);
}

#top #logo picture{
position:relative;
top:-.15rem;
left:0;
}

#tools{
height:var(--top-height);
}

#nav_toggle{
height:var(--top-height);
}

#top.true #icon{
margin:.25rem 0 0 .25rem;
width:var(--top-sticky-icon-width);
height:var(--top-sticky-icon-height);
}

#top.true #logo{
position:relative;
margin:.25rem 0 0 0;
width:var(--top-sticky-logo-width);
height:var(--top-sticky-logo-height);
}

#top.true #logo picture{
position:relative;
top:-.35rem;
left:0;
}

#top.true #tools{
height:var(--top-sticky-height);
}

#top.true #nav_toggle{
height:var(--top-sticky-height);
}

}

/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */
@media screen and (min-width: 79.5rem){

#top_wrapper{
grid-area:top;
margin:auto !important;
width:100%;
height:var(--top-height);
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#top_header{
float:left;
width:100%;
border-bottom:var(--brd-gray-400) 1px solid;
height:var(--top-height);
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#top_header.true{
height:var(--top-sticky-height);
position:fixed;
top:0;
left:0;
float:left;
width:100%;
z-index:999;
background:var(--bgr-top-300);
border-bottom:var(--brd-gray-400) 1px solid;
/*transition:top 550ms cubic-bezier(.4,0,.2,1);*/
transition:top 550ms cubic-bezier(.4,0,.2,1);
}

#top_header.true.hidden{
top:-100%;
}

#top,
#top.true{
margin:auto !important;
width:100%;
min-width:79.5rem;
max-width:100rem;
}

#top{
height:var(--top-height);
/*transition:height 350ms cubic-bezier(.4,0,.2,1);*/
}

#top.true{
height:var(--top-sticky-height);
}

#top{
display:grid;
grid-template-columns:var(--top-icon-column-width) var(--top-logo-column-width) minmax(16rem,auto) 22rem 0;
grid-template-rows:6rem 4rem;
gap:0;
grid-template-areas:
        "search search search search search"
        "icon logo nav tools nav_toggle";
}

#icon{
margin:0 0 0 .25rem;
width:var(--top-icon-width);
height:var(--top-icon-height);
}

#logo{
position:relative;
width:var(--top-logo-width);
height:var(--top-logo-height);
}

#top #logo picture{
position:relative;
top:-.65rem;
left:0;
}

#top #nav{
height:4rem;
}

#top #tools{
height:4rem;
}

#top.true{
display:grid;
grid-template-columns:var(--top-sticky-icon-column-width) var(--top-sticky-logo-column-width) minmax(16rem,auto) 22rem 0;
grid-template-rows:var(--top-sticky-height) minmax(0,auto);
gap:0;
grid-template-areas:
        "icon logo nav tools nav_toggle"
        "search search search search search";
}

#top.true #icon{
margin:.25rem 0 0 .25rem;
width:var(--top-sticky-icon-width);
height:var(--top-sticky-icon-height);
}

#top.true #logo{
position:relative;
margin:.25rem 0 0 0;
width:var(--top-sticky-logo-width);
height:var(--top-sticky-logo-height);
}

#top.true #logo picture{
position:relative;
top:-.65rem;
left:0;
}

#top.true #tools{
height:var(--top-sticky-height);
}

/**/
#top.true #search{
height:var(--top-sticky-height);
background:var(--bgr-top-300);
}


#top.true #search_icon{
display:block;
}

#nav_toggle{
display:none;
}

}