/* ==========================================
   MOBILE HEADER
========================================== */

@media (max-width:700px){

:root{
    --mobile-row:3rem;
}

.site-header{
    padding:1rem 0;
}

.menu-toggle-wrap{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
}

/*
.menu-toggle-wrap{
    grid-area:burger;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
*/
.menu-toggle{
    display:flex;
}

.header-grid{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
        "brand burger"
        "main main"
        "sections sections"
        "about about";
    height:auto;
}

/* название */

.header-brand{
    grid-area:brand;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    min-height:10rem;
}

.brand-link{
    align-items:center;
    text-align:center;
}


/* ---------- области ---------- */

.header-brand{ grid-area:brand; }

.header-menu-main{ grid-area:main; }

.header-menu-sections{ grid-area:sections; }

.header-about{ grid-area:about; }

/* ---------- бургер ---------- */

.menu-toggle{

    position:absolute;

    right:0;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.35rem;

    width:3rem;
    height:3rem;

    padding:0;

    border:0;
    background:none;

    cursor:pointer;

}

.menu-toggle span{

    width:2rem;
    height:2px;

    background:#111;

    transition:.3s;

}

.menu-toggle-wrap{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
}

/* ---------- закрыто ---------- */

.header-menu-main,
.header-menu-sections,
.header-about{

    display:none;

}

/* ---------- открыто ---------- */

.site-header.menu-open .header-menu-main,
.site-header.menu-open .header-menu-sections,
.site-header.menu-open .header-about{

    display:block;
    margin:0;
    padding:0;

}

/* ==========================================
   КОММЕРЦИЯ | ТВОРЧЕСТВО
========================================== */

.site-header.menu-open .header-menu-main .header-menu{

    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
    margin:0;
    padding:0;
    border-bottom: 1px solid #111;
    min-width: 270px;
}

.site-header.menu-open .header-menu-main li{

    list-style:none;
    margin:0;
    padding:0;
    border-bottom: none;
}

.site-header.menu-open .header-menu-main li:first-child{
    border-right:1px solid #111;
}

.site-header.menu-open .header-menu-main a{

    display:flex;
    justify-content:center;
    align-items:center;

    height:var(--mobile-row);
    height:calc(var(--mobile-row) * 2);

}

/* ==========================================
   ФОТО | ART
========================================== */

.site-header.menu-open .header-menu-sections{

    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows: 1fr;
    border-left: none;
    min-width: 270px;
}

.header-commercial{

/*    border-top:1px solid #111;*/
    border-right:1px solid #111;
    border-bottom: none;
}

.header-creative{

/*    border-top:1px solid #111;*/

}

.header-commercial .header-menu,
.header-creative .header-menu{

    display:grid;
    grid-template-rows:repeat(2,var(--mobile-row));

    margin:0;
    padding:0;

}

.header-commercial li,
.header-creative li{

    margin:0;
    list-style:none;

}

.header-commercial li:last-child,
.header-creative li:last-child{

/*    border-top:1px solid #111;*/

}

.header-commercial a,
.header-creative a{

    display:flex;
    justify-content:center;
    align-items:center;
    padding-left: 0rem;
    height:100%;

}

/* ---------- Обо мне ---------- */

.site-header.menu-open .header-about{

/*    border-top:1px solid #111;*/

}

.site-header.menu-open .header-about a{

    display:flex;
    justify-content:center;
    align-items:center;
    height:var(--mobile-row);
    height:calc(var(--mobile-row) * 2);

}

/* ---------- Hover ---------- */

.header-menu a:hover,
.header-about a:hover{

    background:#efefef;

}

/* ---------- крестик ---------- */

.site-header.menu-open .menu-toggle span:nth-child(1){

    transform:translateY(.48rem) rotate(45deg);

}

.site-header.menu-open .menu-toggle span:nth-child(2){

    opacity:0;

}

.site-header.menu-open .menu-toggle span:nth-child(3){

    transform:translateY(-.48rem) rotate(-45deg);

}

}