Template:CEE Hub/Menu/styles.css

.portal {
	position: relative;
	margin: 0;
}

.portal > .cp-collapsible {
	flex-grow: 1;
}

@media ( min-width: 1081px ) {
	.portal > .cp-collapsible .cp-burger-menu {
		justify-content: center;
	}
}

/* navigation */
.cp-header a {
	/*color: #fff;/*
	/* fill the parent */
	align-items: center;
	justify-content: center;
	display: flex;
	width: 100%;
	height: 100%;
}

.cp-header {
	padding: .75rem .75rem;
	border: none;
	flex: 1%;
	width: 30%;
	word-wrap: break-word;
	text-align: center;
}

/* Main button text coor */
.portal > .cp-collapsible > .cp-burger-menu > .cp-header > a {
    color: #fff !important;
}

/* Item button text color */
.mw-collapsible-content .cp-header a {
    color: #000 !important;
}

/* Main button hover */
.portal > .cp-collapsible > .cp-burger-menu > .cp-header:hover > a {
    color: #000 !important;
}

.cp-header a:hover {
	text-decoration: none;
}

.cp-orange:hover,
.cp-active-orange .community-portal.cp-orange {
	background-color: #FAE9D7;
	font-weight: bold;
}

.cp-blue-dark:hover,
.cp-active-blue-dark .community-portal.cp-blue-dark {
	background-color: #D0DCDE;
	font-weight: bold;
}

.cp-green:hover,
.cp-active-green .community-portal.cp-green {
	font-weight: bold;
	background-color: #D7E4D2;
}

.cp-red:hover,
.cp-active-red .community-portal.cp-red {
	font-weight: bold;
	background-color: #F5CCCC;
}

.cp-plum:hover,
.cp-active-plum .community-portal.cp-plum {
	background-color: #E3D1DA;
	font-weight: bold;
}

.cp-purple:hover,
.cp-active-purple .community-portal.cp-purple {
	font-weight: bold;
	background-color: #E1DCED;
}

.cp-blue-light:hover,
.cp-active-blue-light .community-portal.cp-blue-light {
	font-weight: bold;
	background-color: #E2EEF8;
}

/* Dark mode colors */
/* Text color for all tabs */
.mw-dark-mode .cp-header > a,
html.skin-theme-clientpref-night .cp-header > a {
    color: var(--color-emphasized, #eaecf0) !important;
}

/* Purple */
.mw-dark-mode .cp-purple.cp-header,
html.skin-theme-clientpref-night .cp-purple.cp-header {
    background-color: #3f3582 !important;
}

/* Orange */
.mw-dark-mode .cp-orange.cp-header,
html.skin-theme-clientpref-night .cp-orange.cp-header {
    background-color: #8a4d10 !important;
}

/* Red */
.mw-dark-mode .cp-red.cp-header,
html.skin-theme-clientpref-night .cp-red.cp-header {
    background-color: #610201 !important;
}

/* Green */
.mw-dark-mode .cp-green.cp-header,
html.skin-theme-clientpref-night .cp-green.cp-header {
    background-color: #1e5236 !important;
}

/* Light blue */
.mw-dark-mode .cp-blue-light.cp-header,
html.skin-theme-clientpref-night .cp-blue-light.cp-header {
    background-color: #083b70 !important;
}

/* Dark blue */
.mw-dark-mode .cp-blue-dark.cp-header,
html.skin-theme-clientpref-night .cp-blue-dark.cp-header {
    background-color: #1a333d !important;
}

/* Plum */
.mw-dark-mode .cp-plum.cp-header,
html.skin-theme-clientpref-night .cp-plum.cp-header {
    background-color: #4d122f !important;
}

/* Dark mode colors for submenus */

/* Light blue */
.mw-dark-mode .portal .cp-blue-light .mw-collapsible-content,
html.skin-theme-clientpref-night .portal .cp-blue-light .mw-collapsible-content {
    background-color: #0a2647 !important;
}

/* Orange */
.mw-dark-mode .portal .cp-orange .mw-collapsible-content,
html.skin-theme-clientpref-night .portal .cp-orange .mw-collapsible-content {
    background-color: #452b14 !important;
}

/* Red */
.mw-dark-mode .portal .cp-red .mw-collapsible-content,
html.skin-theme-clientpref-night .portal .cp-red .mw-collapsible-content {
    background-color: #420b0b !important;
}

/* Green */
.mw-dark-mode .portal .cp-green .mw-collapsible-content,
html.skin-theme-clientpref-night .portal .cp-green .mw-collapsible-content {
    background-color: #143021 !important;
}

/* Plum */
.mw-dark-mode .portal .cp-plum .mw-collapsible-content,
html.skin-theme-clientpref-night .portal .cp-plum .mw-collapsible-content {
    background-color: #380d24 !important;
}

/* Dark blue */
.mw-dark-mode .portal .cp-blue-dark .mw-collapsible-content,
html.skin-theme-clientpref-night .portal .cp-blue-dark .mw-collapsible-content {
    background-color: #142229 !important;
}

/* Purple */
.mw-dark-mode .portal .cp-purple .mw-collapsible-content,
html.skin-theme-clientpref-night .portal .cp-purple .mw-collapsible-content {
    background-color: #2b235a !important;
}

.mobile-only {
	display: none;
}
.desktop-only {
	display: block;
}

/* --- Desktop Layout (min-width 1081px) --- */
@media ( min-width: 1081px ) {

	.cp-mobile-content {
		display: none;
	}

}

@media ( max-width: 1081px ) {
	.mobile-only {
		display: block;
	}
	.desktop-only {
		display: none;
	}

	#mw-customcollapsible-nav {
		min-height: 60px;
	}

	@media ( max-width: 1081px ) {
    .portal > .cp-collapsible .cp-burger-menu .cp-header > a,
    .portal > .cp-collapsible .cp-burger-menu .cp-header > span {
        color: #000000 !important;
    }
}

	/* Burger */
	.portal > .cp-collapsible > .mw-customtoggle {
		width: 40px;
		height: 30px;
		display: block;
		position: relative;
		z-index: 100;
		background-color: transparent;
	}
	.portal > .cp-collapsible > .mw-customtoggle > div,
	.portal > .cp-collapsible > .mw-customtoggle > div::before,
	.portal > .cp-collapsible > .mw-customtoggle > div::after {
		display: block;
		height: 6px;
		width: 100%;
		background-color: black;
	}
	.portal > .cp-collapsible > .mw-customtoggle > div::before {
		content: '';
		transform: translateY(12px);
	}

	.portal > .cp-collapsible > .mw-customtoggle > div::after {
		content: '';
		transform: translateY(18px);
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header:first-child {
		border-top: 1px solid #e7e7e7;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header {
		border-bottom: 1px solid #e7e7e7;
		padding: 0;
		width: 100%;
		text-align: left;
		box-sizing: border-box;
		display: flex;
		min-height: 50px;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header > a {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		height: 50px;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu .cp-header:last-child {
		border-bottom: none;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu .cp-header {
		font-weight: normal;
		padding-left: .75rem;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header > span,
	.portal > .cp-collapsible .cp-burger-menu .cp-header > a {
		padding: .75rem .75rem;
	}

	/* Submenu toggle */
	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-blue-light > .cp-collapsible > .mw-customtoggle {
		background-color: #E2EEF8;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-orange > .cp-collapsible > .mw-customtoggle {
		background-color: #FAE9D7;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-red > .cp-collapsible > .mw-customtoggle {
		background-color: #F5CCCC;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-green > .cp-collapsible > .mw-customtoggle {
		background-color: #D7E4D2;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-plum > .cp-collapsible > .mw-customtoggle {
		background-color: #E3D1DA;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-blue-dark > .cp-collapsible > .mw-customtoggle {
		background-color: #D0DCDE;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-purple > .cp-collapsible > .mw-customtoggle {
		background-color: #E1DCED;
	}

	/* Submenu Arrows */
	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu > .cp-collapsible > .mw-customtoggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 50px;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu > .cp-collapsible > .mw-customtoggle::after {
		content: '';
		display: block;
		box-sizing: border-box;
		width: 6px;
		height: 6px;
		border-right: solid 6px transparent;
		border-left: solid 6px transparent;
		border-top: solid 6px black;
	}

	/* Content */
	.portal > .cp-collapsible .cp-burger-menu {
		flex-direction: column;
		padding: 35px 0 0 0;
		background-color: transparent;
	}

	/* 2nd nav level */
	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu > .cp-collapsible > .mw-collapsible-content {
		background-color: #fff;
	}



	.portal > .cp-collapsible .cp-burger-menu a {
		width: 100%;
	}
}

/* --- Wide Desktop Layout (min-width 1081px) --- */
@media ( min-width: 1081px ) {
	.portal > .cp-collapsible .main-collapse-section {
		padding: 20px 0 0 0;
		background-color: transparent;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header .mw-collapsible-content > .cp-header {
		height: 80px;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header {
		height: 60px;
		box-sizing: border-box;
		justify-content: center;
		display: flex;
		align-items: center;
		font-weight: normal;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu::after {
		content: "";
		display: block;
		height: 0;
		width: 0;
		position: relative;
		border-right: solid 6px transparent;
		border-left: solid 6px transparent;
		border-top: solid 6px black;
		margin-left: 6px;
	}

	.cp-blue-light.cp-header {
		background-color: #0E65C0;
	}

	.cp-orange.cp-header {
		background-color: #EE8019;
	}

	.cp-red.cp-header {
		background-color: #970302;
	}

	.cp-green.cp-header {
		background-color: #308557;
	}

	.cp-plum.cp-header {
		background-color: #741B47;
	}

	.cp-blue-dark.cp-header {
		background-color: #305D70;
	}

	.cp-purple.cp-header {
		background-color: #5748B5;
	}

	/* Hover and active states for headers - full opacity */
	.cp-blue-light.cp-header:hover {
		background-color: #C3D8EF;
	}

	.cp-orange.cp-header:hover {
		background-color: #FBDFC5;
	}

	.cp-red.cp-header:hover {
		background-color: #E5C0C0;
	}

	.cp-green.cp-header:hover {
		background-color: #CBE0D5;
	}

	.cp-plum.cp-header:hover {
		background-color: #E3D1DA;
	}

	.cp-blue-dark.cp-header:hover {
		background-color: #CBD6DB;
	}

	.cp-purple.cp-header:hover {
		background-color: #D5D1EC;
	}

	/* Active states for headers - full opacity */
	.cp-active-blue-light .cp-blue-light.cp-header {
		background-color: #E2EEF8;
	}

	.cp-active-orange .cp-orange.cp-header {
		background-color: #FAE9D7;
	}

	.cp-active-red .cp-red.cp-header {
		background-color: #F5CCCC;
	}

	.cp-active-green .cp-green.cp-header {
		background-color: #D7E4D2;
	}

	.cp-active-plum .cp-plum.cp-header {
		background-color: #E3D1DA;
	}

	.cp-active-blue-dark .cp-blue-dark.cp-header {
		background-color: #D0DCDE;
	}

	.cp-active-purple .cp-purple.cp-header {
		background-color: #E1DCED;
	}

	/* Hover = bold like main menu */
	.portal .cp-header:hover {
		font-weight: bold;
	}

	html .portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu::after {
		border-top-color: #EAECF0;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-blue-light:after {
		border-top-color: #6FA8DC;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-orange:after {
		border-top-color: #E69138;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-red:after {
		border-top-color: #CC0000;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-green:after {
		border-top-color: #38761D;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-plum:after {
		border-top-color: #a3969c;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-blue-dark:after {
		border-top-color: #134F5C;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header.cp-has-submenu.cp-purple:after {
		border-top-color: #674EA7;
	}

	.portal > .cp-collapsible .cp-burger-menu .cp-header:hover {
		font-weight: bold;
	}

	.portal > .cp-collapsible > div:not(.cp-burger-menu),
	.portal > .cp-collapsible .mw-customtoggle {
		display: none;
	}

	.portal > .cp-collapsible .cp-burger-menu {
		display: flex !important;
	}

	.portal > .cp-collapsible .cp-burger-menu {
		border-bottom: 110px solid transparent;
	}

	.portal.cp-active-blue-light > .cp-collapsible .cp-burger-menu {
		border-color: #E2EEF8;
	}

	.portal.cp-active-orange > .cp-collapsible .cp-burger-menu {
		border-color: #FAE9D7;
	}

	.portal.cp-active-red > .cp-collapsible .cp-burger-menu {
		border-color: #F5CCCC;
	}

	.portal.cp-active-green > .cp-collapsible .cp-burger-menu {
		border-color: #D7E4D2;
	}

	.portal.cp-active-plum > .cp-collapsible .cp-burger-menu {
		border-color: #E3D1DA;
	}

	.portal.cp-active-blue-dark > .cp-collapsible .cp-burger-menu {
		border-color: #D0DCDE;
	}

	.portal.cp-active-purple > .cp-collapsible .cp-burger-menu {
		border-color: #E1DCED;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-blue-light:hover,
	.portal.cp-active-blue-light > .cp-collapsible .cp-burger-menu > .cp-header {
		border-bottom: 3px solid #6FA8DC;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-orange:hover,
	.portal.cp-active-orange > .cp-collapsible .cp-burger-menu > .cp-header {
		border-bottom: 3px solid #E69138;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-red:hover,
	.portal.cp-active-red > .cp-collapsible .cp-burger-menu > .cp-header {
		border-bottom: 3px solid #CC0000;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-green:hover,
	.portal.cp-active-green > .cp-collapsible .cp-burger-menu > .cp-header {
		border-bottom: 3px solid #38761D;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-plum:hover,
	.portal.cp-active-plum > .cp-collapsible .cp-burger-menu > .cp-header {
		border-bottom: 3px solid #741B47;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-purple:hover,
	.portal.cp-active-purple > .cp-collapsible .cp-burger-menu > .cp-header {
		border-bottom: 3px solid #674EA7;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-blue-dark:hover,
	.portal.cp-active-blue-dark > .cp-collapsible .cp-burger-menu > .cp-header {
		border-bottom: 3px solid #134F5C;
	}

	/* 2nd level nav */
	.portal > .cp-collapsible > .cp-burger-menu .cp-collapsible .mw-collapsible-content {
		position: absolute;
		bottom: 30px;
		left: 0;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		display: flex;
	}

	.portal > .cp-collapsible > .cp-burger-menu .cp-blue-light .cp-collapsible .mw-collapsible-content {
		background-color: #E2EEF8;
	}

	.portal > .cp-collapsible > .cp-burger-menu .cp-orange .cp-collapsible .mw-collapsible-content {
		background-color: #FAE9D7;
	}

	.portal > .cp-collapsible > .cp-burger-menu .cp-red .cp-collapsible .mw-collapsible-content {
		background-color: #F5CCCC;
	}

	.portal > .cp-collapsible > .cp-burger-menu .cp-green .cp-collapsible .mw-collapsible-content {
		background-color: #D7E4D2;
	}

	.portal > .cp-collapsible > .cp-burger-menu .cp-plum .cp-collapsible .mw-collapsible-content {
		background-color: #E3D1DA;
	}

	.portal > .cp-collapsible > .cp-burger-menu .cp-purple .cp-collapsible .mw-collapsible-content {
		background-color: #E1DCED;
	}

	.portal > .cp-collapsible > .cp-burger-menu .cp-blue-dark .cp-collapsible .mw-collapsible-content {
		background-color: #D0DCDE;
	}

	/* 3rd level nav */
	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu {
		position: relative;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu .cp-header:hover {
		text-decoration: underline;
		font-weight: normal;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu:hover .mw-collapsible-content {
		position: absolute;
		top: 60px;
		width: unset;
		min-height: 0;
		display: flex !important;
		flex-direction: column;
		z-index: 100;
		left: 50%;
		transform: translateX(-50%);
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu .mw-collapsible-content > .cp-header {
		width: 100%;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-blue-light > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu .mw-collapsible-content > .cp-header {
		background-color: #E2EEF8;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.orange > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu .mw-collapsible-content > .cp-header {
		background-color: #FAE9D7;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-red > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu .mw-collapsible-content > .cp-header {
		background-color: #F5CCCC;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-green > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu .mw-collapsible-content > .cp-header {
		background-color: #D7E4D2;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-plum > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu .mw-collapsible-content > .cp-header {
		background-color: #E3D1DA;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-purple > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu .mw-collapsible-content > .cp-header {
		background-color: #E1DCED;
	}

	.portal > .cp-collapsible .cp-burger-menu > .cp-header.cp-has-submenu.cp-blue-dark > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu .mw-collapsible-content > .cp-header {
		background-color: #D0DCDE;
	}


	/* Hide toggle button */
	.portal > .cp-collapsible > .cp-burger-menu > .cp-header > .cp-collapsible > .mw-customtoggle {
		display: none;
	}

	/* Show submenu on hover and on active page */
	.portal:not(.cp-active-orange) > .cp-collapsible > .cp-burger-menu > .cp-orange.cp-has-submenu > .cp-collapsible > .mw-collapsible-content {
		display: none;
	}

	.portal:not(.cp-active-blue-dark) > .cp-collapsible > .cp-burger-menu > .cp-blue-dark.cp-has-submenu > .cp-collapsible > .mw-collapsible-content {
		display: none;
	}

	.portal:not(.cp-active-green) > .cp-collapsible > .cp-burger-menu > .cp-green.cp-has-submenu > .cp-collapsible > .mw-collapsible-content {
		display: none;
	}

	.portal:not(.cp-active-red) > .cp-collapsible > .cp-burger-menu > .cp-red.cp-has-submenu > .cp-collapsible > .mw-collapsible-content {
		display: none;
	}

	.portal:not(.cp-active-plum) > .cp-collapsible > .cp-burger-menu > .cp-plum.cp-has-submenu > .cp-collapsible > .mw-collapsible-content {
		display: none;
	}

	.portal:not(.cp-active-purple) > .cp-collapsible > .cp-burger-menu > .cp-purple.cp-has-submenu > .cp-collapsible > .mw-collapsible-content {
		display: none;
	}

	.portal:not(.cp-active-blue-light) > .cp-collapsible > .cp-burger-menu > .cp-blue-light.cp-has-submenu > .cp-collapsible > .mw-collapsible-content {
		display: none;
	}

	.portal > .cp-collapsible > .cp-burger-menu > .cp-has-submenu:hover > .cp-collapsible > .mw-collapsible-content {
		display: flex !important;
		z-index: 100;
	}

	.portal > .cp-collapsible > .cp-burger-menu > .cp-has-submenu > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu > .cp-collapsible > .mw-collapsible-content {
		display: none;
	}

	.portal > .cp-collapsible > .cp-burger-menu > .cp-has-submenu > .cp-collapsible > .mw-collapsible-content > .cp-header.cp-has-submenu:hover > .cp-collapsible > .mw-collapsible-content {
		display: flex !important;
		z-index: 100;
	}
	
}