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

/*---------- Section ----------*/

.header{
    position:sticky;
    top:0;
    z-index:var(--z-header);

    background:rgba(247,245,238,.92);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
}

/*---------- Container ----------*/

.header__container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);

    min-height:84px;
}

/*---------- Brand ----------*/

.header__brand-link{
    display:flex;
    align-items:center;
    gap:.85rem;
}

.header__logo{
    flex-shrink:0;
    width:42px;
    height:42px;
}

.header__logo:empty{
    background-image:url("../../images/icon/icon_logo.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

.header__logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.header__identity{
    display:flex;
    flex-direction:column;
    gap:.1rem;
    line-height:1.1;
}

.header__title{
    margin:0;
    font-size:1.05rem;
    font-weight:var(--fw-semibold);
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--primary-dark);
}

.header__subtitle{
    font-family:var(--font-body);
    font-size:.72rem;
    font-weight:var(--fw-normal);
    color:var(--text-soft);
    letter-spacing:.02em;
}

/*---------- Navigation ----------*/

.header__nav{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.header__link{
    position:relative;
    padding:.35rem 0;

    font-family:var(--font-title);
    font-size:.82rem;
    font-weight:var(--fw-medium);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text);

    transition:color var(--transition);
}

.header__link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:0;
    height:2px;
    background:var(--accent);
    transition:width var(--transition);
}

.header__link:hover{
    color:var(--primary);
}

.header__link:hover::after{
    width:100%;
}

/*---------- Actions ----------*/

/*---------- Actions ----------*/

.header__actions{
    display:flex;
    align-items:center;
    gap:.75rem;
}

.header__action{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.7rem;

    padding:.75rem 1.2rem;

    background:var(--surface, #fff);
    border:1px solid var(--border);
    border-radius:999px;

    color:var(--text);
    text-decoration:none;

    box-shadow:
        0 4px 12px rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        color .25s ease;
}

.header__action-text{
    margin:0;

    font-size:.95rem;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
}

.header__action img{
    width:22px;
    height:22px;

    display:block;
    object-fit:contain;

    transition:
        transform .25s ease,
        filter .25s ease;
}

.header__action:active{
    transform:translateY(-1px);
}

/*---------- Responsive ----------*/

@media (max-width:900px){

    .header__actions{
        width:100%;
        justify-content:center;
    }

    .header__action{
        width:100%;
        max-width:320px;
    }

}
/*---------- Responsive ----------*/

@media (max-width:900px){

    .header__container{
        flex-wrap:wrap;
        justify-content:center;
        text-align:center;

        padding:1.1rem 0;
        min-height:auto;
        gap:var(--space-2);
    }

    .header__nav{
        justify-content:center;
        flex-wrap:wrap;
        gap:var(--space-2);
        order:3;
        width:100%;
    }
}