/**
 * =========================================================
 * Header
 * =========================================================
 */

.header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    z-index:var(--z-header);

    width:100%;

    background:#fff;

    padding-top:env(safe-area-inset-top);

}

.header-inner{

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

    gap:24px;

    max-width:1400px;

    height:72px;

    margin:0 auto;

    padding:0 24px;

}

.header-left{

    display:flex;
    align-items:center;
    gap:16px;

    flex-shrink:0;

}

.header-menu-button{

    display:none;

    width:42px;
    height:42px;

    border:none;
    background:transparent;

    cursor:pointer;

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

}

.header-brand{

    display:flex;
    align-items:center;
    gap:14px;

    flex:1;
    min-width:0;

    text-decoration:none;

    color:inherit;

}

/* =========================================================
 * Header Center
 * ========================================================= */

.header-center-name{

    font-size:18px;

    font-weight:700;

    color:var(--color-background);

    white-space:nowrap;
	
	padding:5px 10px;
	
	background:var(--color-brand);
	
	border-radius:8px;

}

.header-building-name{

    font-size:15px;

    font-weight:600;

    color:var(--color-text-secondary);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:320px;

}

.header-logo{

    height:34px;
    width:auto;

    display:block;

}

.header-divider{

    width:1px;
    height:22px;

    background:var(--color-border);

}

.header-region{

    font-size:18px;
    font-weight:700;

    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

}

.header-call-button{

    display:none;

}

.header-nav{

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

    gap:34px;

    flex:1;

}

.header-nav-link{

    position:relative;

    font-size:15px;
    font-weight:600;

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

    text-decoration:none;

    transition:.2s;

}

.header-nav-link:hover{

    color:var(--primary);

}

.header-nav-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:var(--color-brand);

    transition:.2s;

}

.header-nav-link:hover::after{

    width:100%;

}

.header-right{

    flex-shrink:0;

}

.header-contact-button{

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

    height:42px;

    padding:0 20px;

    border-radius:999px;

    background:var(--color-brand);

    color:#fff;

    font-size:14px;
    font-weight:700;

    text-decoration:none;

    transition:.2s;

}

.header-contact-button:hover{

    background:var(--color-brand-hover);

}


/* =========================================================
 * Mobile
 * ========================================================= */

@media (max-width:991px){

    .header{

        padding-top:env(safe-area-inset-top);

    }
    
    .header-left{

        flex:1;
        min-width:0;

    }

    .header-inner{

        height:60px;

        padding:0 16px;

    }

    .header-menu-button{

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

    }

    .header-nav{

        display:none;

    }

	.header-right{

		display:flex;
		align-items:center;

	}

	.header-contact-button{

		display:none;

	}

	.header-call-button{

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

		width:40px;
		height:40px;

		border-radius:50%;

		color:var(--color-brand);

		text-decoration:none;

	}

	.header-call-button:hover{

		color:var(--color-brand-hover);

	}
	
    .header-logo{

        height:22px;

    }

    .header-divider{

        height:18px;

    }

    .header-region{

        font-size:16px;

    }
	
	.header-building-name,
	.header-divider{

		display:none;

	}

	.header-center-name{

		font-size:14px;

	}

}