/* ----------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------- nav.css ---------------------------------------------------- */
/* ---------------------------- Developed by 'Tsakiris Studio' do not modify this file. ---------------------------- */
/* ------------------------  Latest version (--CD-09022026 --MD-07042026 --BUILD-0.5.7-58) ------------------------- */
/* ----------------------------------------------------------------------------------------------------------------- */


/* ------------------------------------------------------ NAV ------------------------------------------------------ */

/* NAV */
.nav {

	top : 0 ;
	width : 100% ;
	z-index : 1000 ;
	position : sticky ;
	background : transparent ;
	height : var(--box_size-128) ;
	border-bottom : var(--size-4) solid black ;

}


/* NAVBAR */
.navbar {

	width : 100% ;
	height : 100% ;
	display : flex ;
	position : relative ;
	align-items : center ;
	padding : 0 var(--size-16) ;
	background : linear-gradient(90deg, var(--color-primary-900) 0%, var(--color-primary-100) 100%) ;

}

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


/* ----------------------------------------------------- LOGO ------------------------------------------------------ */

/* LOGO */
.logo {

	height : 100% ;
	display : flex ;
	position : absolute ; 
	align-items : center ;
	text-decoration : none ;

}


/* LOGO FOCUS-VISIBLE */
.logo:focus-visible {

	outline : none ;

}


/* LOGO IMAGE */
.logo__image {

	height : 85% ;

}

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


/* --------------------------------------------------- NAV LINKS --------------------------------------------------- */

/* NAV LINKS */
.nav__links {

	margin : 0 ;
	padding : 0 ;
	display : flex ;
	list-style : none ;
	margin-left : auto ;
	align-items : center ;
	gap : var(--size-56) ;
	margin-right : var(--size-56) ;

}


/* NAV LINK */
.nav__link {

	position : relative ;
	letter-spacing : 1px ;
	text-decoration : none ;
	color : var(--color-accent-100) ;
	font-size : var(--font_size-16) ;
	font-family : var(--font-accent) ;
	transition : var(--transition-color) ;
	text-shadow : var(--text_shadow-small) ;

}


/* NAV LINK HOVER, IS-ACTIVE */
.nav__link:hover,
.nav__link.is_active {

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


/* NAV LINK FOCUS-VISIBLE */
.nav__link:focus-visible {

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


/* NAV LINK AFTER */
.nav__link::after {

	left : 0 ;
	width : 0% ;
	height : 1px ;
	content : "" ;
	bottom : -3px ;
	position : absolute ;
	background : var(--color-accent-100) ;
	transition : var(--transition-width), var(--transition-background) ;

}


/* NAV LINK HOVER, IS-ACTIVE, FOCUS-VISIBLE AFTER */
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is_active::after {

	width : 100% ;
	background : var(--color-accent) ;
}

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


/* ---------------------------------------------------- NAV MENU --------------------------------------------------- */

/* NAV MENU */
.nav__menu {

	height : 100% ;
	display : flex ;
	position : relative ;
	gap : var(--size-32) ;
	align-items : center ;

}

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


/* ------------------------------------------------------ LANG ----------------------------------------------------- */

/* LANG ROOT */
.lang__root {

	display : flex ;
	position : relative ;

}


/* LANG MENU BUTTON */
.lang__menu__button {

	border : 0 ;
	display : flex ;
	cursor : pointer ;
	border-radius : 4px ;
	gap : var(--size-10) ;
	align-items : center ;
	box-shadow : var(--box_shadow-xsmall) ;
	padding : var(--size-6) var(--size-10) ;
	background : linear-gradient(90deg, var(--color-primary), var(--color-primary-900)) ;

}

.lang__menu__button:focus-visible { outline : 2px solid var(--color-accent-300) ; }


/* LANG FLAG */
.lang__flag { height : var(--size-14) ; box-shadow : var(--box_shadow-xxsmall) ; }


/* LANG LABEL */
.lang__label {

	font-weight : 700 ;
	letter-spacing : 1px ;
	color : var(--color-accent-700) ;
	font-size : var(--font_size-14) ;
	font-family : var(--font-accent) ;
	transition : var(--transition-color) ;
	text-shadow : var(--text_shadow-small) ;

}

.lang__root.is_open .lang__label,
.lang__menu__button:hover .lang__label,
.lang__menu__button:focus-visible .lang__label { color : var(--color-accent-300) ; }


/* LANG CHEVRON */
.lang__chevron {

	color : var(--color-accent-700) ;
	font-size : var(--font_size-14) ;
	text-shadow : var(--text_shadow-small) ;
	transition : var(--transition-color), var(--transition-transform) ;

}

.lang__menu__button:hover .lang__chevron,
.lang__menu__button:focus-visible .lang__chevron { color : var(--color-accent-300) ; }
.lang__root.is_open .lang__chevron { transform : rotate(180deg) ; color : var(--color-accent-300) ; }


/* LANG MENU */
.lang__menu {

	right : 0 ;
	opacity : 0 ;
	display : flex ;
	gap : var(--size-4) ;
	position : absolute ;
	border-radius : 6px ;
	pointer-events : none ;
	padding : var(--size-8) ;
	flex-direction : column ;
	min-width : var(--box_size-224) ;
	top : calc(100% + var(--size-12)) ;
	box-shadow : var(--box_shadow-medium) ;
	transform : translateY(var(--size-10)) ;
	transition : var(--transition-opacity), var(--transition-transform) ;
	background : linear-gradient(135deg, var(--color-primary-100), var(--color-primary-900)) ;

}

.lang__root.is_open .lang__menu { opacity : 1 ; pointer-events : auto ; transform : translateY(0) ; }


/* LANG BUTTON */
.lang__button {

	border : 0 ;
	width : 100% ;
	display : flex ;
	cursor : pointer ;
	text-align : left ;
	border-radius : 6px ;
	gap : var(--size-12) ;
	align-items : center ;
	padding : var(--size-10) ;
	background : transparent ;
	transition : var(--transition-background) ;

}

.lang__button:hover { background : var(--color-black-20) ; }
.lang__button.is_active { background : linear-gradient(90deg, var(--color-black-50) 0%, var(--color-black-10) 80%, transparent) ; }
.lang__button:focus-visible { outline : 2px solid var(--color-accent) ; background : var(--color-black-20) ; }
.lang__button.is_active:focus-visible { outline : 2px solid var(--color-accent-900) ; background : linear-gradient(90deg, var(--color-black-50) 0%, var(--color-black-10) 80%, transparent) ; }


/* LANG BUTTON TEXT */
.lang__button-text {

	position : relative ;
	letter-spacing : 1px ;
	display : inline-block ;
	color : var(--color-accent-100) ;
	font-size : var(--font_size-15) ;
	font-family : var(--font-accent) ;
	transition : var(--transition-color) ;
	text-shadow : var(--text_shadow-small) ;

}

.lang__button:hover .lang__button-text,
.lang__button.is_active .lang__button-text,
.lang__button:focus-visible .lang__button-text { color : var(--color-accent) ; }


/* LANG BUTTON TEXT AFTER */
.lang__button-text::after {

	left : 0 ;
	width : 0% ;
	height : 1px ;
	content : "" ;
	bottom : -3px ;
	position : absolute ;
	background : var(--color-accent-100) ;
	transition : var(--transition-width), var(--transition-background) ;

}

.lang__button:hover .lang__button-text::after,
.lang__button:focus-visible .lang__button-text::after { width : 100% ; background : var(--color-accent) ; }

.lang__button.is_active .lang__button-text::after,
.lang__button.is_active:focus-visible .lang__button-text::after { width : 0% ; }
/* ----------------------------------------------------------------------------------------------------------------- */


/* ---------------------------------------------- VERTICAL SEPERATOR ----------------------------------------------- */
.vertical__seperator {

	height : 80% ;
	width : var(--size-2) ;
	background : var(--linear_gradient-v_seperator) ;

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


/* ------------------------------------------------- NAV DROPDOWN -------------------------------------------------- */

/* NAV DROPDOWN */
.nav__dropdown {

	display : flex ;
	position : relative ;

}


/* NAV DROPDOWN MENU BUTTON */
.nav__dropdown__menu__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-primary) ;

}


/* NAV DROPDOWN MENU BUTTON FOCUS-VISIBLE */
.nav__dropdown__menu__button:focus-visible {

	outline : none ;

}


/* GOOGLE BACKGROUND */
.google__background {

	opacity : 0 ;
	width : 100% ;
	height : 100% ;
	position : absolute ;
	border-radius : 50% ;
	transition : opacity var(--transition-slow) ease-out ;
	background : var(--linear_gradient-google) ;

}


/* GOOGLE BACKGROUND SPIN ANIMATION */
@keyframes spin {

	to {

		transform : rotate(360deg) ;

	}

}


/* GOOGLE BACKGROUND ACTIVE, HOVER, FOCUS-VISIBLE  */
.nav__dropdown.is_open .google__background,
.nav__dropdown__menu__button:is(:hover, :focus-visible) .google__background {

	opacity : 1 ;
	animation : spin 1.5s linear infinite ;

}


/* PROFILE PICTURE */
.profile__picture {

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

}


/* NAV DROPDOWN MENU */
.nav__dropdown__menu {

	right : 0 ;
	opacity : 0 ;
	display : flex ;
	gap : var(--size-12) ;
	position : absolute ;
	border-radius : 6px ;
	pointer-events : none ;
	padding : var(--size-8) ;
	flex-direction : column ;
	min-width : var(--box_size-352) ;
	top : calc(100% + var(--size-12)) ;
	box-shadow : var(--box_shadow-medium) ;
	transform : translateY(var(--size-10)) ;
	transition : var(--transition-opacity), var(--transition-transform) ;
	background : linear-gradient(135deg, var(--color-primary-100), var(--color-primary-900)) ;

}


/* NAV DROPDOWN MENU OPEN */
.nav__dropdown.is_open .nav__dropdown__menu {

	opacity : 1 ;
	pointer-events : auto ;
	transform : translateY(0) ;

}

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


/* ------------------------------------------------- BUTTON LINKS -------------------------------------------------- */

/* BUTTON LINKS */
.button-links {

	width : 100% ;
	display : none ;
	gap : var(--size-8) ;
	flex-direction : column ;

}


/* BUTTON LINK */
.button-links__link {

	border : 0 ;
	width : 100% ;
	display : flex ;
	cursor : pointer ;
	border-radius : 4px ;
	position : relative ;
	gap : var(--size-16) ;
	padding : var(--size-12) ;
	background : var(--color-black-10) ;
	transition : var(--transition-background) ;

}


/* BUTTON LINK HOVER, IS-ACTIVE, FOCUS-VISIBLE */
.button-links__link:is(:hover, :focus-visible, .is_active) {

	background : var(--color-black-30) ;

}


/* BUTTON LINK FOCUS-VISIBLE */
.button-links__link:focus-visible {

	outline : 2px solid var(--color-accent) ;

}


/* BUTTON LINK IMG */
.button-links__img {

	border-radius : 50% ;
	width : var(--size-72) ;
	height : var(--size-72) ;

}


/* BUTTON LINK INFO */
.button-links__info {

	width : 100% ;
	display : flex ;
	gap : var(--size-12) ;
	flex-direction : column ;
	justify-content : center ;

}


/* BUTTON LINK INFO TITLE */
.button-links__title {

	position : relative ;
	margin-right : auto ;
	letter-spacing : 1.5px ;
	color : var(--color-accent) ;
	font-size : var(--font_size-15) ;
	font-family : var(--font-accent) ;
	text-shadow : var(--text_shadow-small) ;

}


/* BUTTON LINK INFO TITLE AFTER */
.button-links__title::after {

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

}


/* BUTTON LINK HOVER, FOCUS-VISIBLE INFO TITLE AFTER */
.button-links__link:is(:hover, :focus-visible) .button-links__title::after {

	width : 100% ;

}


/* BUTTON LINK INFO SUBTITLE */
.button-links__subtitle {

	min-width : 32ch ;
	text-align : left ;
	letter-spacing : 1px ;
	color : var(--color-accent-100) ;
	font-size : var(--font_size-13) ;
	font-family : var(--font-accent) ;
	text-shadow : var(--text_shadow-xsmall) ;

}

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


/* ------------------------------------------------- DROPDOWN LANG ------------------------------------------------- */

/* DROPDOWN LANG ROOT */
.lang__root--nav__dropdown {

	display : none ;

}


/* DROPDOWN LANG MENU BUTTON */
.dropdown__lang__menu__button {

	width : 100% ;
	background : linear-gradient(90deg, var(--color-primary-900), var(--color-primary)) ;

}


/* DROPDOWN LANG CHEVRON */
.dropdown__lang__chevron {

	margin-left : auto ;

}


/* DROPDOWN LANG MENU */
.dropdown__lang__menu {

	z-index : 1 ;
	width : 100% ;

}

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


/* ---------------------------------------------------- PROFILE ---------------------------------------------------- */

/* PROFILE */
.profile {

	width : 100% ;
	display : flex ;
	border-radius : 4px ;
	gap : var(--size-16) ;
	align-items : center ;
	flex-direction : column ;
	padding : var(--size-16) ;

}


/* PROFILE AVATAR */
.profile__avatar {

	display : flex ;
	overflow : hidden ;
	border-radius : 50% ;
	position : relative ;
	align-items : center ;
	width : var(--size-96) ;
	height : var(--size-96) ;
	justify-content : center ;
	background : var(--color-primary-100) ;

}


/* PROFILE AVATAR IMG */
.profile__avatar-img {

	width : 95% ;
	height : 95% ;
	object-fit : cover ;
	border-radius : 50% ;

}


/* PROFILE INFO */
.profile__info {

	width : 100% ;
	display : flex ;
	gap : var(--size-6) ;
	text-align : center ;
	flex-direction : column ;

}


/* PROFILE INFO TITLE, NAME */
.profile__info-title,
.profile__info-name {

	letter-spacing : 1.5px ;
	font-family : var(--font-accent) ;
	text-shadow : var(--text_shadow-small) ;

}


/* PROFILE INFO TITLE */
.profile__info-title {

	color : var(--color-accent) ;
	font-size : var(--font_size-16) ;

}


/* PROFILE INFO NAME */
.profile__info-name {

	color : var(--color-accent-100) ;
	font-size : var(--font_size-18) ;

}


/* PROFILE SEPERATOR */
.profile_seperator {

	width : 100% ;
	display : flex ;
	height : var(--size-4) ;
	background : var(--linear_gradient-h_seperator) ;

}


/* PROFILE BUTTONS */
.profile__buttons {

	width : 100% ;
	display : flex ;
	gap : var(--size-8) ;
	flex-direction : column ;

}


/* PROFILE BUTTON */
.profile__button {

	border : 0 ;
	width : 100% ;
	cursor : pointer ;
	border-radius : 6px ;
	letter-spacing : 1px ;
	font-size : var(--font_size-14) ;
	color : var(--color-accent-700) ;
	font-family : var(--font-accent) ;
	background : var(--color-black-20) ;
	text-shadow : var(--text_shadow-small) ;
	padding : var(--size-8) ;
	transition : var(--transition-color), var(--transition-background), var(--transition-transform) ;

}


/* PROFILE BUTTON HOVER, FOCUS-VISIBLE */
.profile__button:is(:hover, :focus-visible) {

	color : var(--color-accent) ;
	background : var(--color-black-30) ;

}


/* PROFILE BUTTON ACTIVE */
.profile__button:active {

	transform : translateY(1px) ;

}


/* PROFILE BUTTON FOCUS-VISIBLE */
.profile__button:focus-visible {

	outline : 2px solid var(--color-accent) ;

}


/* WEBAPP VERSION */
.webapp__version {

	width : 100% ;
	text-align : center ;
	font-family : var(--font-mono) ;
	color : var(--color-accent-900) ;
	font-size : var(--font_size-13) ;
	text-shadow : var(--text_shadow-xsmall) ;

}


/* PROFILE DISPLAY NONE */
.webapp__version,
.profile__button-sign__out,
.profile__info-name--display,
.profile__button-admin__tools,
.profile__button-switch__account,
.profile__button-developer__tools,
.profile.is_connected .profile__button-sign__in,
.profile.is_connected .profile__info-name--default {

	display : none ;

}


/* PROFILE DISPLAY BLOCK */
.profile__info-name--default,
.profile.is_developer .webapp__version,
.profile.is_admin .profile__button-admin__tools,
.profile.is_connected .profile__button-sign__out,
.profile.is_connected .profile__info-name--display,
.profile.is_connected .profile__button-switch__account,
.profile.is_developer .profile__button-developer__tools {

	display : block ;

}

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


/* ----------------------------------------------------- MEDIA ----------------------------------------------------- */

/* MOBILE MEDIA LAYOUT */
@media (max-width : 1024px) {

	/* HIDE ELEMENTS */
	.nav__links, .lang__root--nav, .nav__menu__sep { display : none ; }

	/* SHOW ELEMENTS */
	.button-links, .lang__root--nav__dropdown { display : flex ; }

	/* LAYOUT */
	.logo { left : 50% ; transform : translateX(-50%) ; }
	.nav__menu { margin-left : auto ; }
	.nav__dropdown__menu { top : calc(100% + var(--size-36)) ; right : calc(-1 * var(--size-8)) ; }
	
	/* STYLING */
	.profile { background : var(--color-black-10) ; box-shadow : var(--box_shadow-xsmall) ; }

	/* MAT SIZING */
	.navbar-mat { background-size : auto 192vw ; }
	.nav__dropdown__menu-mat { background-size : auto 144vw ; }

}


/* MOBILE MEDIA SIZING */
@media (max-width : 512px) {

	/* MAT SIZING */
	.navbar-mat { background-size : auto 288vw ; }
	.nav__dropdown__menu-mat { background-size : auto 192vw ; }

	/* FONT SIZING */
	.button-links__title { font-size : var(--font_size-14) ; }
	.button-links__subtitle { font-size : var(--font_size-12) ; }
	.lang__label { font-size : var(--font_size-13) ; }
	.lang__button-text { font-size : var(--font_size-14) ; }
	.profile__info-title { font-size : var(--font_size-15) ; }
	.profile__info-name { font-size : var(--font_size-17) ; }
	.profile__button { font-size : var(--font_size-15) ; }

	/* BOX SIZING */
	.nav__dropdown__menu__button { width : var(--size-48) ; height : var(--size-48) ; }
	.lang__flag { height : var(--size-13) ; }
	.profile__avatar { width : var(--size-88) ; height : var(--size-88) ; }

}

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