/* Custom stylesheet for georchestra header */
@import url('/static/assets/fonts/inter.css');

header.host {
	--georchestra-header-primary: #062c4c;
	--georchestra-header-secondary: #094b6c;
	--georchestra-header-primary-light: white;
	--georchestra-header-secondary-light: #eee;
	--craig-fontsize: 14px;
}

header.host {
	font-family: "Inter", sans-serif; /* https://github.com/georchestra/header/issues/31 */
	border-bottom: 1px solid #8080801f;
}

/* Logo size */
header.host img[alt="geOrchestra logo"] {
	width: 200px !important;
	/* wazs 180px */
}

/*Style for btn connect */
header.host .btn {
	border-radius: 2em !important;
	font-size: var(--craig-fontsize);
	padding: 10px 20px;
}

header.host .link-btn[href="/logout"] {
	border-radius: 2em !important;
	font-size: var(--craig-fontsize);
	padding: 10px 20px;
	background: var(--georchestra-header-primary);
	color: white;
	text-decoration: none;
}

header.host .link-btn[href="/logout"]:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(51 65 85 / var(--tw-bg-opacity));
}

/* Font for nav item*/
header.host .nav-item {
	font-size: var(--craig-fontsize);
	font-weight: 500 !important;
}

/* for icon size */
header.host .item-icon {
	font-size: 20px !important;
}

header.host .subitem-icon {
	font-size: 18px !important;
}

header.host .nav-item.active {
	background-color: var(--georchestra-header-primary) !important;
	color: var(--georchestra-header-primary-light) !important;
	border-radius: 2em !important;
	padding: 10px 20px;
}

header.host .nav-item.active:hover {
	background-color: color-mix(in srgb, var(--georchestra-header-primary) 80%, transparent) !important;
}

header.host .nav-item.active::after {
	height: 0 !important;
}

/* Admin dropdown */

header.host .admin-dropdown {
	width: auto !important;
}

header.host .admin-dropdown>li {
	text-align: left !important;
}

header.host .admin-dropdown>li:hover {
	background-color: #f4f5f7;
	--tw-text-opacity: 1;
	color: rgb(16 43 75);
}

header.host .admin-dropdown>li>a {
	padding: 12px 30px 12px 10px;
	text-transform: none !important;
	justify-content: flex-start;
	line-height: 1.1;
	font-weight: 500;
}

header.host .admin-dropdown>li>a>i {
	margin-right: 5px;
}

@media (min-width: 768px) {
	header.host nav {
		position: absolute !important;
		width: 100%;
		height: 64px;
	}

	header.host a:has(>img[alt="geOrchestra logo"]), header.host div:has(>.link-btn), header.host div:has(>.btn) {
		z-index: 10;
	}

	header.host .admin-dropdown {
		border-radius: .8em;
		box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .08);
	}

	header.host .admin-dropdown>li:first-child {
		border-top-left-radius: .8em;
		border-top-right-radius: .8em;
	}

	header.host .admin-dropdown>li:last-child {
		border-bottom-left-radius: .8em;
		border-bottom-right-radius: .8em;
	}
}

/* Mobile */

@media (max-width: 768px) {
	header.host img[alt="geOrchestra logo"] {
		clip-path: inset(0 135px 0 0px);
	}

	header.host .admin-dropdown {
		position: relative;
	}

	header.host .admin-dropdown {
		border: none;
	}

	header.host .nav-item-mobile {
		font-size: 16px;
		justify-content: flex-start;
		text-align: start;
		padding: 10px;
		border: none;
		border-top: 1px solid rgb(203 213 225 / var(--tw-border-opacity));
	}

	header.host .nav-item-mobile:hover {
		background-color: #f4f5f7;
	}

	header.host .nav-item-mobile span {
		padding-right: 10px;
	}

	header.host nav>div:first-child .nav-item-mobile {
		border: none;
	}

	header.host nav>*:last-child {
		border-bottom: 1px solid rgb(203 213 225 / var(--tw-border-opacity));
	}

	header.host .link-btn span {
		display: none;
	}

	header.host div:has(>.link-btn) {
		align-items: center;
		gap: 0;
	}

	header.host>div:last-child>div:first-child {
		padding: 0px 10px;
	}

	header.host .link-btn {
		text-transform: capitalize;
	}
}

header.host .admin-dropdown>li.active {
	background-color: var(--georchestra-header-primary) !important;
    color: var(--georchestra-header-primary-light) !important;
}

header.host .admin-dropdown>li.active:hover {
    background-color: color-mix(in srgb, var(--georchestra-header-primary) 80%, transparent) !important;
}