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

.site-header{
    position:relative;
    z-index:100;
    background:#fff;
    border-bottom:1px solid var(--color-border);
}

.site-header__inner{

    display:flex;
    align-items:center;

    min-height:72px;

    gap:24px;

}


/* ==========================================================
   LOGO
========================================================== */

.header-logo{

    flex-shrink:0;

    display:flex;
    align-items:center;

}

.header-logo img{

    display:block;

    width:auto;

    max-width:180px;
    max-height:48px;

}


/* ==========================================================
   MENU
========================================================== */

.header-menu{

    flex:1;

    min-width:0;

}

.header-menu__overlay{

    display:none;

}

.header-menu__panel{

    display:block;

}

.header-menu__top{

    display:none;

}

.menu__list{

    display:flex;
    align-items:center;

    gap:32px;

    margin:0;
    padding:0;

    list-style:none;

    justify-content:flex-start;

    width:100%;

}

.menu__item{

    position:relative;

    list-style:none;

}

.menu__link{

    display:flex;
    align-items:center;

    min-height:72px;

    color:var(--color-text);

    transition:.2s;

}

.menu__link:hover{

    color:var(--color-primary);

}
.menu__item-head{

    display:flex;

    align-items:center;

}

.menu__item-head .menu__link{

    flex:1;

}

.menu__toggle{

    display:none;

    border:none;

    background:none;

    cursor:pointer;

    padding:0;

    width:40px;
    height:40px;

}

.menu__arrow{

    display:block;

    width:8px;
    height:8px;

    margin:auto;

    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;

    transform:rotate(45deg);

    transition:.25s;

}


/* ==========================================================
   DROPDOWN
========================================================== */

.menu__dropdown{

    position:absolute;

    top:100%;
    left:0;

    display:none;

    min-width:240px;

    margin:0;
    padding:8px 0;

    background:#fff;

    border:1px solid var(--color-border);

    border-radius:8px;

    list-style:none;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

@media (hover: hover) {

    .menu__item--parent:hover > .menu__dropdown {

        display:block;

    }

}

.menu__dropdown .menu__link{

    min-height:auto;

    padding:12px 18px;

}


/* ==========================================================
   RIGHT
========================================================== */

.site-header__right{

    display:flex;
    align-items:center;

    gap:16px;

    flex-shrink:0;

}


/* ==========================================================
   ACTIONS
========================================================== */

.header-actions{

    display:flex;
    align-items:center;

    gap:10px;

}


/* ==========================================================
   SEARCH
========================================================== */

.header-search{

    display:flex;
    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.header-search__icon{

    position:relative;

    width:18px;
    height:18px;

    border:2px solid var(--color-primary);

    border-radius:50%;

}

.header-search__icon::after{

    content:"";

    position:absolute;

    right:-5px;
    bottom:-2px;

    width:7px;
    height:2px;

    background:var(--color-primary);

    transform:rotate(45deg);

}


/* ==========================================================
   BURGER
========================================================== */

.burger{

    display:none;

    width:42px;
    height:42px;

    padding:0;

    border:none;

    background:none;

    cursor:pointer;

}

.burger span{

    display:block;

    width:24px;
    height:2px;

    margin:5px auto;

    background:#222;

    transition:.2s;

}
/* ==========================================================
   BUTTONS
========================================================== */

.btn{

    display:inline-flex;

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

    min-height:var(--btn-height);

    padding:0 var(--btn-padding-x);

    border-radius:var(--btn-radius);

    font-size:var(--btn-font-size);

    font-weight:var(--btn-font-weight);

    text-decoration:none;

    transition:var(--btn-transition);

    cursor:pointer;

}

.btn--primary{

    background:var(--btn-primary-bg);

    color:var(--btn-primary-color);

    border:var(--btn-primary-border);

}

.btn--primary:hover{

    background:var(--btn-primary-hover-bg);

    color:var(--btn-primary-hover-color);

    border:var(--btn-primary-hover-border);

}

.btn--outline{

    background:var(--btn-outline-bg);

    color:var(--btn-outline-color);

    border:var(--btn-outline-border);

}

.btn--outline:hover{

    background:var(--btn-outline-hover-bg);

    color:var(--btn-outline-hover-color);

    border:var(--btn-outline-hover-border);

}

/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    background:var(--color-surface);

    border-top:1px solid var(--color-border);

}

.site-footer__inner{

    padding:var(--footer-padding) 0;

    text-align:center;

    color:var(--color-text);

    font-size:14px;

    line-height:1.8;

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    padding:48px 0;

}

.hero__title{

    margin:0 0 32px;

}

.hero__body{

    display:flex;

    flex-direction:column;

    gap:32px;

}

.hero--columns .hero__body{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:48px;

    align-items:start;

}

.hero__text{

    line-height:1.8;

}

.hero__image{

    display:flex;
    justify-content:center;

}

.hero__image img{

    display:block;

    width:100%;
    max-width:100%;

    height:auto;

    object-fit:cover;

    border-radius:var(--radius-md);

}