/**
 * Custom Cancom offmenu design.
 * 
 * This file is enqueued with the media query (min-width: 1024px).
 * 
 * This styles the cancom corporate offcanvas menu:
 * * the main menu column (right) needs the class 'main-menu-column'
 * * the side menu column (left) needs the class 'side-menu-column'
 */

/**
 * Basic properties
 */
 html body .navigation.v2 {
	--transition-time: 0.3s;
	--vert-menu-width: 90px;
	--offmenu-width: calc(100vw - 0px - 0px - var(--vert-menu-width));
}

html body .navigation.v2 #mainmenuoff.open {
	transition: all var(--transition-time) cubic-bezier(0, 0, 0.21, 1);
}

/**
 * Basic layout
 */
html body .navigation.v2 #mainmenuoff.fullright {
	bottom: 0;
	height: 100vh !important;
	overflow: hidden;
}

html body .navigation.v2:not(.fullopen).vert_move_off #mainmenuoff.fullright {
	width: calc(var(--offmenu-width) / 4) !important;
	box-shadow: 0 4px 30px -10px rgb(0 0 0 / 25%);
}

html body .navigation.v2.fullopen.vert_move_off #mainmenuoff.fullright {
	width: var(--offmenu-width) !important;
}

html body .navigation.v2 #mainmenuoff > .row_wrap,
html body .navigation.v2 #mainmenuoff > .dynamic > .row_wrap {
	width: var(--offmenu-width) !important;
	max-width: none;
	position: absolute;
	right: 0;
	top: 0;
}

/** right menu */
.navigation.v2 #mainmenuoff .main-menu-column {
	overflow-y: scroll;
	max-height: 100vh;
	padding-bottom: 5vh;
}

.navigation.v2 #mainmenuoff .main-menu-column > .vc_column-inner {
	margin: 0 !important;
	padding-left: 50px !important;
	width: 99%;
}

/* left menu */
html body .navigation.v2 #mainmenuoff .side-menu-column {
	min-height: 99.9vh;
	background-color: #e6ecf2;
	max-height: 100vh;
	overflow-y: auto;
}

/**
 * Style the main menu items
 */
#mainmenuoff #menu-en-off-main-menu li,
#mainmenuoff #menu-de-off-main-menu li {
	justify-content: flex-start;
	align-items: flex-start;
}

#mainmenuoff #menu-en-off-main-menu li a:not(.button),
#mainmenuoff #menu-de-off-main-menu li a:not(.button) {
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.2em;
	font-weight: 700;
	position: relative;
	border-radius: 3px;
	--arrow-size: 44px;
	margin: 2px 0;
	padding: 0.5em 0.5em 0.5em var(--arrow-size);
	border: none;
	transform: translateX(calc(-1 * var(--arrow-size)));
	--transition-time: .3s;
	--transition-ease: cubic-bezier(0, 0, 0.21, 1);
	transition: all var(--transition-time) var(--transition-ease);
}

#mainmenuoff #menu-en-off-main-menu li a:not(.button):hover,
#mainmenuoff #menu-en-off-main-menu li.is-active a:not(.button),
#mainmenuoff #menu-de-off-main-menu li a:not(.button):hover,
#mainmenuoff #menu-de-off-main-menu li.is-active a:not(.button) {
	/* background-color: rgb(0,0,0,.04); */
	transform: translateX(0);
	outline: none;
}

#mainmenuoff #menu-en-off-main-menu li a:not(.button) span,
#mainmenuoff #menu-de-off-main-menu li a:not(.button) span {
	--arrow-padding: 12px;
	--transform-left: calc((-1 * var(--arrow-size)) + (var(--arrow-padding) * 2));
	font-size: calc(var(--arrow-size) - (var(--arrow-padding) * 2));
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	opacity: 0;
	transform: translate(var(--transform-left), -50%);
	transition: all var(--transition-time) var(--transition-ease);
}

#mainmenuoff #menu-en-off-main-menu li a:not(.button):hover span,
#mainmenuoff #menu-en-off-main-menu li.is-active a:not(.button) span,
#mainmenuoff #menu-de-off-main-menu li a:not(.button):hover span,
#mainmenuoff #menu-de-off-main-menu li.is-active a:not(.button) span {
	opacity: 1;
	transform: translate(var(--arrow-padding), -50%);
}

/**
 * Modify the custom trigger elements to be hidden instead of 'display: none;'
 */
.navigation.v2 #mainmenuoff .side-menu-column :is([data-ontrigger], [data-greyd-trigger])[data-onload="hide"]:not(.is-show),
.navigation.v2 #mainmenuoff .side-menu-column :is([data-ontrigger], [data-greyd-trigger]).is-hide {
	display: block !important;
	visibility: hidden;
	position: absolute;
	top: 0;
	z-index: -99;
	opacity: 0;
}

.navigation.v2 #mainmenuoff .side-menu-column :is([data-ontrigger], [data-greyd-trigger])[data-onload="hide"].is-show {
	display: block !important;
}

/**
 * Animate the main links
 */
html body .navigation.v2 #mainmenuoff .main-menu-column #menu-en-off-main-menu li,
html body .navigation.v2 #mainmenuoff .main-menu-column #menu-de-off-main-menu li {
	transform: translateY(30px);
	opacity: 0;
	transition: all var(--transition-time) cubic-bezier(0, 0, 0, 1.33);
	transition-delay: .2s;
}

html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-en-off-main-menu li,
html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-de-off-main-menu li {
	opacity: 1;
	transform: translateY(0);
}

html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-en-off-main-menu li:nth-child(2),
html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-de-off-main-menu li:nth-child(2) {
	transition-delay: .3s;
}

html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-en-off-main-menu li:nth-child(3),
html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-de-off-main-menu li:nth-child(3) {
	transition-delay: .4s;
}

html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-en-off-main-menu li:nth-child(4),
html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-de-off-main-menu li:nth-child(4) {
	transition-delay: .5s;
}

html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-en-off-main-menu li:nth-child(5),
html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-de-off-main-menu li:nth-child(5) {
	transition-delay: .6s;
}

html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-en-off-main-menu li:nth-child(6),
html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-de-off-main-menu li:nth-child(6) {
	transition-delay: .7s;
}

html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-en-off-main-menu li:nth-child(7),
html body .navigation.v2 #mainmenuoff.open .main-menu-column #menu-de-off-main-menu li:nth-child(7) {
	transition-delay: .8s;
}

/**
 * Animate secondary menus (impressum etc.)
 */
html body .navigation.v2 #mainmenuoff .main-menu-column #mainmenu2 {
	opacity: 0;
	transition: all .2s ease;
}

html body .navigation.v2 #mainmenuoff.open .main-menu-column #mainmenu2 {
	opacity: 1;
	transition: all 1s .8s ease-out;
}

#mainmenu2 .button {
	text-align: left;
}

/**
 * Animate the gray containers
 */
html body .navigation.v2 #mainmenuoff .side-menu-column > :is(.wp-block-group, .group_wrap, [data-onload]) > div {
	opacity: 0;
	/* transform: translateY(100px); */
	transition: all var(--transition-time) cubic-bezier(0, 0, 0, 1.33);
	transition-delay: 0s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column > :is(.wp-block-group, .group_wrap, [data-onload]).is-show > div {
	opacity: 1;
	/* transform: translateY(0); */
}

/**
 * Animate the menu items in the gray containers
 */
html body .navigation.v2 #mainmenuoff .side-menu-column .ccnav ul.menu li {
	opacity: 0;
	transform: translateX(-30px);
	transition: transform var(--transition-time) cubic-bezier(0, 0, 0, 1.33), opacity var(--transition-time) cubic-bezier(0, 0, 0, 1.33), color .2s ease;
	transition-delay: .2s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column :is(.wp-block-group, .group_wrap, [data-onload]).is-show .ccnav ul.menu li {
	opacity: 1;
	transform: translateX(0px);
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(2) {
	transition-delay: .3s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(3) {
	transition-delay: .4s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(4) {
	transition-delay: .5s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(5) {
	transition-delay: .6s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(6) {
	transition-delay: .7s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(7) {
	transition-delay: .8s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(8) {
	transition-delay: .9s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(9) {
	transition-delay: 1s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(10) {
	transition-delay: 1.1s;
}

html body .navigation.v2.fullopen #mainmenuoff.open .side-menu-column .ccnav ul.menu li:nth-child(11) {
	transition-delay: 1.2s;
}

/**
 * Style the menu items in the gray containers
 *
 * @deprecated 1.0
 */
/* #mainmenuoff .side-menu-column ul.menu li a {
    display: block;
    background-image: linear-gradient( currentColor 2px, transparent 0 );
    background-position: bottom left;
    background-size: 0px 2px;
    background-repeat: no-repeat;
}
#mainmenuoff .side-menu-column ul.menu li.current-menu-item a,
#mainmenuoff .side-menu-column ul.menu li a:hover {
    background-size: 100% 2px;
} */


/**
 * @deprecated 1.0
 */
/* .ccnav {
    min-height: 99.9vh !important;
} */


/**
 * Fix the wpml language menu
 *
 * @since 1.2
 */
.wpml-ls-legacy-list-horizontal ul {
	display: flex;
}

.wpml-ls-legacy-list-horizontal ul li a {
	white-space: nowrap;
}