/* ----------------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------- header.css -------------------------------------------------- */
/* ---------------------------- Developed by 'Tsakiris Studio' do not modify this file. ---------------------------- */
/* ------------------------  Latest version (--CD-01062026 --MD-01062026 --BUILD-0.0.0-1) -------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------- SITE HEADER -------------------------------------------------- */

/* SITE HEADER */
.site-header {

	top : 0 ;
	z-index : 10 ;
	display : flex ;
    position : sticky ;
    user-select : none ;
    gap : var(--size-24) ;
	align-items : center ;
    height : var(--size-96) ;
    padding : 0 var(--size-32) ;
    border-bottom : var(--size-2) solid var(--color-ink) ;
    background : linear-gradient(90deg, var(--color-paper-900) 0%, var(--color-paper-100) 100%) ;

}

/* ----------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------- HOME BUTTON -------------------------------------------------- */

/* HOME BUTTON */
.home-button {

    width : auto ;
    height : 100% ;
	display : flex ;
    gap : var(--size-16) ;
	align-items : center ;
    text-decoration : none ;

}

/* HOME BUTTON (FOCUS-VISIBLE) */
.home-button:focus-visible {

    outline : none ;

}

/* HOME BUTTON IMAGE */
.home-button img {

	width : var(--size-72) ;
	height : var(--size-72) ;

}

/* HOME BUTTON TEXT HOLDER */
.home-button div {

    display : flex ;
    gap : var(--size-8) ;
    color : var(--color-ink) ;
    font-size : var(--font-size-28) ;
    letter-spacing : var(--letter-spacing-xxxlarge) ;

}

/* HOME BUTTON TEXT THICK */
.home-button-text-thick {

    font-weight : 500 ;

}

/* HOME BUTTON TECT THIN */
.home-button-text-thin {

    font-weight : 300 ;

}

/* ----------------------------------------------------------------------------------------------------------------- */


/* ------------------------------------------------ SITE NAVIGATION ------------------------------------------------ */

/* SITE NAV */
.site-nav {

    display : flex ;
    margin-left : auto ;
    gap : var(--size-32) ;
    align-items : center ;

}

/* SITE NAV LINK */
.site-nav-link {

    font-weight : 600 ;
    position : relative ;
    text-decoration : none ;
	color : var(--color-muted) ;

}

/* SITE NAV LINK (HOVER, IS-ACTIVE) */
.site-nav-link:hover,
.site-nav-link.is_active {

	color : var(--color-ink) ;
}

/* SITE NAV LINK (FOCUS-VISIBLE) */
.site-nav-link:focus-visible {

	outline : none ;
	color : var(--color-ink) ;
}

/* SITE NAV LINK (UNDERLINE) */
.site-nav-link::after {

	left : 0 ;
	width : 0% ;
	content : "" ;
	bottom : -2px ;
	position : absolute ;
    height : var(--size-2) ;
	background : var(--color-coral) ;
	transition : var(--transition-width) ;

}

/* SITE NAV LINK (HOVER, IS-ACTIVE, FOCUS-VISIBLE UNDERLINE) */
.site-nav-link:hover::after,
.site-nav-link:focus-visible::after,
.site-nav-link.is_active::after {

	width : 100% ;

}

/* ----------------------------------------------------------------------------------------------------------------- */


/* --------------------------------------------------- SEPERATOR --------------------------------------------------- */

/* VERTICAL SEPERTOR */
.vertical-seperator {

	height : 80% ;
	width : var(--size-2) ;
	background : linear-gradient(

		180deg,

		rgba(var(--color-coral-rgb), 0.0) 0%,
		rgba(var(--color-coral-rgb), 0.35) 40%,
		rgba(var(--color-coral-rgb), 0.35) 60%,
		rgba(var(--color-coral-rgb), 0.0) 100%

	) ;

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


/* ----------------------------------------------- NAVIGATION BUTTON ----------------------------------------------- */

/* NAVIGATION BUTTON */
.nav-button {

	border : 0 ;
	padding : 0 ;
	display : flex ;
	cursor : pointer ;
	overflow : hidden ;
	border-radius : 50% ;
	position : relative ;
	align-items : center ;
	width : var(--size-56) ;
	height : var(--size-56) ;
	justify-content : center ;
	background : var(--color-coral) ;

}

/* PROFILE PICTURE */
.profile-picture {

	z-index : 1 ;
	width : 90% ;
	height : 90% ;
	object-fit : cover ;
	border-radius : 50% ;

}

/* ----------------------------------------------------------------------------------------------------------------- */