/*
Theme Name: ITK-Theme
Author: Manuel Sollberger
Description: A theme for it-knowledge-factory.ch
Version: 1
Tags: itk
Text Domain: itk
*/

:root {
	--primary-color: #485683;
	--secondary-color: #6E87CD;
	--text-color: #2C2C2C;
	--page-color: rgba(255, 247, 247, 1);
	--page-color-transparent: rgba(255, 247, 247, 0.8);

	--soft-border: 1px solid rgba(0, 0, 0, 0.1);

	--default-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
	--lower-shadow: 2px 2px 14px rgba(0, 0, 0, 0.05);
	--upper-shadow: -8px -8px 14px rgba(255, 255, 255, 0.8);

	--default-skew: skewX(12deg);
	--inverted-skew: skewX(-12deg);

	--banner-image: url("images/banner.webp");

	--border-radius: 0.3em;
}

* {
	font-family: "Heebo", "Arial", sans-serif;
	letter-spacing: 0.03em;
}

a {
	font-weight: bold;
	color: var(--primary-color);
	text-decoration: none;
}

html {
	height: 100%;
	background-image: var(--banner-image);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

body {
	margin: 0;
	position: relative;
	min-height: 100%;
	box-sizing: border-box;
	padding-bottom: 10em;
	color: var(--text-color);
}

body > .navigation-container {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	background-color: var(--page-color-transparent);
	position: sticky;
	top: 0;
	left: 0;
	outline: var(--soft-border);
	box-sizing: border-box;
	z-index: 10;
	box-shadow: var(--default-shadow);
}

body > .navigation-container > nav {
	display: inline-block;
}

body > .navigation-container > nav > div {
	display: inline-block;
}

.logo-container-container, .logo-container, nav {
	display: inline-block;
	vertical-align: middle;
}

.logo-container {
	margin-right: 1em;
	margin-left: 1em;
}

.logo-container img {
	height: 2.5em;
	display: inline-block;
}

.logo-container h1 {
	font-size: 1em;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	display: inline-block;
}

footer nav li:not(:last-child)::after {
	content: '|';
	margin-left: 0.54em;
	margin-right: 0.1em;
	color: var(--secondary-color);
}

body > .navigation-container > nav ul.menu > li {
    transform: var(--inverted-skew);
    vertical-align: middle;

}

body > .navigation-container > nav li a {
    display: inline-block;
    color: var(--text-color);
    font-size: 1.2em;
    padding: 0.8em;
    transform: var(--default-skew);
    text-decoration: none;
    font-weight: lighter;
    width: 100%;
    box-sizing: border-box;
}

body > .navigation-container > nav li.current-menu-item {
	background-color: var(--primary-color);
	transition: all 0.2s;
}

body > .navigation-container > nav li.current-menu-item a {
    color: white;

}

body > .navigation-container > nav ul.sub-menu > li {
    display: block;

}

body > .navigation-container > nav ul.sub-menu > li:not(:first-child) {
    border-top: var(--soft-border);
}

body > .navigation-container > nav ul.sub-menu li:not(.current-menu-item) a {
    color: var(--text-color);

}

body > .navigation-container > nav li:not(.current-menu-item):hover,
body > .navigation-container > nav li.current-menu-ancestor {
	background-color: rgba(0, 0, 0, 0.15);
	transition: none;
}

body > .navigation-container > nav ul.sub-menu {
    position: absolute;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background-color: var(--page-color-transparent);
    border: 1px solid var(--text-color);
    width: 100%;
}

body > .navigation-container > nav li:not(:hover) ul.sub-menu {
    width: 0;
    height: 0;
    overflow: hidden;
}

.navigation-button {
	display: inline-block;
	vertical-align: middle;
	padding: 1em;
	padding-left: 2em;
	padding-right: 1.3em;
	margin-left: -1em;
	background-color: var(--primary-color);
	transform: var(--inverted-skew);
	--webkit-appearance: none;
	width: unset;
	border-radius: 0;
}

.navigation-button img {
	height: 2em;
	display: block;
	display: block;
	transform: var(--default-skew);
}

.banner {
	width: 100%;
	min-height: 0;
	text-align: center;
	padding: 1em;
	padding-top: 5em;
	padding-bottom: 5em;
	box-sizing: border-box;
	position: relative;
}

.banner.bottom {
	height: 10em;
	padding: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.banner h1 {
	display: inline-block;
	font-weight: lighter;
	color: white;
	font-size: 3.2em;
	margin: 0;
}

.banner .subtitle {
	display: block;
	font-weight: lighter;
	font-size: 1.5em;
	margin-top: 0.8em;
	color: white;
	margin-bottom: 0;
}

.banner .banner-details {
	color: white;
	font-weight: lighter;
}

.banner .banner-details img {
	height: 1em;
	margin-right: 0.2em;
}

.banner .banner-details .detail {
	display: inline-block;
}

.banner .banner-details * {
	vertical-align: middle;
}

.content-container {
	text-align: center;
	position: relative;
	background-color: var(--page-color);
	padding: 1em;
}

.content-container::before, .content-container::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	background-image: url("images/edge-pattern.webp");
	background-size: contain;
	background-repeat: repeat;
	z-index: 5;
}

.content-container::before {
	top: -0.3em;
	height: 0.3em;
}

.content-container::after {
	bottom: -0.3em;
	height: 0.3em;
	transform: rotate(180deg);
}

.content {
	display: inline-block;
	text-align: left;
	width: 100%;
	max-width: 900px;
	z-index: 6;
	position: relative;
	box-sizing: border-box;
}

.page {
	box-shadow: var(--lower-shadow);
	border-radius: 1em;
	background-color: white;
	padding: 3em;
	box-sizing: border-box;
	overflow: hidden;
}

.page.no-padding {
	padding: 0;
}

.vertical-centerer {
	vertical-align: middle;
	height: 100%;
	display: inline-block;
}

.vertical-centerer + * {
	vertical-align: middle;
}

.content > h1, .content > h2 {
	position: relative;
	display: inline-block;
	color: white;
	font-weight: lighter;
	z-index: 0;
}

.content > h1::before, .content > h2::before {
	content: '';
	background-color: var(--primary-color);
	z-index: -1;
	transform: skewX(-12deg);
	position: absolute;
	left: -0.5em;
	right: -0.5em;
	top: -0.5em;
	bottom: -0.5em;
	border-radius: 0.2em;
	box-shadow: var(--default-shadow);
}

.content > h1 {
	font-size: 1.8em;
}

.content > h2::before {
	background-color: var(--secondary-color);
}

.content.page-heading-container {
	z-index: 7;
	transform: translateY(1em);
}

.content.page-heading-container h1 {
	margin-bottom: 0;
}

p {
	line-height: 1.4;
}

li {
	line-height: 1.5;
}

.content li::before {
	content: '✦';
	margin-right: 0.5em;
	color: var(--secondary-color);
}

.content .main-image-container {
	margin: -3em;
	margin-bottom: 3em;
}

.content .main-image-container img {
	width: 100%;
	max-height: 23em;
	object-fit: cover;
}

body .wp-block-columns {
	margin-bottom: 0;
}

/* UI Elements */

input:not([type="radio"]):not([type="checkbox"]), select, textarea, button, a.button {
	padding: 0.5em;
	transform: var(--inverted-skew);
	font-size: 0.9em;
	-webkit-appearance: none;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: var(--border-radius);
	box-sizing: border-box;
}

select {
	border-right: 2em solid var(--primary-color);
}

input:not([type="radio"]):not([type="checkbox"]), textarea {
	width: 20em;
}

input[type="button"], input[type="submit"], button, a.button {
	border: none;
	background-color: var(--primary-color);
	cursor: pointer;
	color: white;
	display: inline-block;
	font-weight: normal;
}

textarea {
	height: 5em;
	width: 30em;
	max-width: 100%;
	max-height: 10em;
}

input:not([type="radio"]):not([type="checkbox"]).wpcf7-not-valid, select.wpcf7-not-valid, textarea.wpcf7-not-valid, button.wpcf7-not-valid {
	box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.75);
}

body .wpcf7-list-item {
	display: block;
	margin-bottom: 0.3em;
}

input#course {
	display: none;
}

.wpcf7-form p > label {
	margin-left: 0.6em;
}

.wpcf7-form #course-start-date-field {
	display: none;
}

/* Course list */

.courses {
	margin-top: 2em;
}

.course-tile, .all-courses-tile {
	display: inline-block;
	width: 100%;
	margin-bottom: 2em;
	vertical-align: middle;
}

.all-courses-tile {
	text-align: center;
}

a .course-tile {
	color: var(--text-color);
	font-weight: normal;
}

.course-tile.page {
	padding: 0;
}

.course-tile .course-details {
	padding: 1.5em;
	padding-top: 0.2em;
	height: 15em;
	overflow: hidden;
	position: relative;
}

.course-tile figure {
	margin: 0;
	background-image: var(--banner-image);
	background-size: cover;
	background-position: center;
	height: 15em;
}

.course-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.course-tile .detail {
	font-style: italic;
	opacity: 0.65;
}

.course-tile .bottom-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 62%, rgba(255, 255, 255, 0) 100%);
	padding: 1.5em;
	box-sizing: border-box;
}

.course-tile .link {
	color: var(--primary-color);
}

footer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 1em;
	text-align: center;
}

footer a, footer * {
	color: white;
}

.footer-subtitle {
	font-size: 0.7em;
	opacity: 0.7;
	transition: opacity 0.2s;
	user-select: none;
	-webkit-user-select: none;
}

.footer-subtitle:hover {
	opacity: 1;
}

body div.jsst-main-up-wrapper > *:not(.frontend.updated, .frontend.error, #js-ticket-main-black-background, #js-ticket-main-black-background, #black_wrapper_ai_reply, div#jstran_loading, div#js_ai_reply_loading, .internalnote-popup-background, .jsst-popup-background, #jsst-header-main-wrapper, .js-ticket-dashboard-main-content, div#userpopup, #popupforagenttransfer, #popupfordepartmenttransfer, #usercredentailspopup, #popupforinternalnote, #jsst-popup-wrapper, #multiformpopup, #multiformpopupblack, #jstran_loading, #userpopupblack) {
    width: unset!important;
    margin-left: unset!important;
    margin-right: unset!important;
    margin-bottom: unset!important;
}

body form.js-ticket-form {
    border-radius: 0;
}

body div.js-ticket-form-btn-wrp a.js-ticket-cancel-button {
    display: none;
}

body #wp-jsticket_message-editor-tools {
    display: none;
}

body #wp-jsticket_message-editor-container .mce-top-part.mce-container.mce-stack-layout-item.mce-first {
    display: none;
}

body #wp-jsticket_message-editor-container .mce-statusbar.mce-container.mce-panel.mce-stack-layout-item.mce-last {
    display: none;
}

body div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field input.js-ticket-form-field-input,
body div.js-ticket-from-field-wrp div.js-ticket-from-field input.js-form-date-field,
body div.js-ticket-from-field-wrp div.js-ticket-from-field textarea.js-ticket-custom-textarea,
body div.js-ticket-from-field-wrp div.js-ticket-from-field select.js-form-input-field,
body div.js-ticket-add-form-wrapper div.js-ticket-from-field-wrp div.js-ticket-from-field select.inputbox,
body div.js-ticket-form-btn-wrp input.js-ticket-save-button,
body div.js-ticket-field-wrp input.js-ticket-form-input-field,
body span#tk_attachment_add {
    border-radius: var(--border-radius);
}

body div.js-ticket-form-btn-wrp input.js-ticket-save-button,
body span#tk_attachment_add {
    border: none;
    box-shadow: none;
}

body div.js-ticket-form-btn-wrp input.js-ticket-save-button:hover {
    transform: var(--inverted-skew);
    background-color: var(--primary-color)!important;
    box-shadow: none;
}

body div.js-ticket-checkstatus-wrp p.js-support-tkentckt-centrmainwrp span.js-support-tkentckt-centrwrp {
    background-color: white;
}

body main.js-ticket-dashboard-main {
    height: 0;
    overflow: hidden;
}

body main.js-ticket-dashboard-main::after {
    display: block;
    content: 'Ihre Anfrage ist bei uns eingegangen.';
    position: absolute;
}

@media only screen and (max-width: 900px) {
	.desktop-only {
		display: none!important;
	}

	body > nav .logo-link img {
		height: unset;
		width: 100%;
	}

	body > nav > div {
		display: block;
	}

	.banner .banner-details .detail {
		display: block;
	}

	/* UI Elements */
	input:not([type="radio"]):not([type="checkbox"]), select, textarea, button {
		width: 100%;
	}

	.navigation-button:focus {
		background-color: var(--secondary-color);
		pointer-events: none;
	}

	.navigation-button ~ nav {
		opacity: 0;
		position: fixed;
		top: -1000vh;
		display: block;
		padding: 1em;
		z-index: 10;
	}

	.navigation-button ~ nav, .navigation-button ~ nav li, .navigation-button ~ nav li a {
		display: block;
	}

	.navigation-button:focus ~ nav, nav:hover {
		opacity: initial;
		position: initial;
		top: initial;
	}
    
    body > .navigation-container > nav li.current-menu-item:not(:hover) ul.sub-menu,
    body > .navigation-container > nav li.current-menu-ancestor:not(:hover) ul.sub-menu {
        width: unset;
        height: unset;
        overflow: unset;
    }
    
    body > .navigation-container > nav li:not(.current-menu-item):not(.current-menu-ancestor):hover ul.sub-menu {
        width: 0;
        height: 0;
        overflow: hidden;
    }
    
    body > .navigation-container > nav li:not(.current-menu-item):not(.current-menu-ancestor) ul.sub-menu {
        border: none;
    }
    
    body > .navigation-container > nav li {
        transform: none;
    }
    
    body > .navigation-container > nav ul.sub-menu {
        position: relative;
    }
    
    body > .navigation-container > nav ul.sub-menu > li a {
        transform: none;
    }
    
    body > .navigation-container > nav li.current-menu-item.menu-item-has-children,
    body > .navigation-container > nav li.current-menu-ancestor.menu-item-has-children {
	    transform: none;
    }
    
    body > .navigation-container > nav li.current-menu-item.menu-item-has-children a,
    body > .navigation-container > nav li.current-menu-ancestor.menu-item-has-children a {
	    transform: none;
    }

	.logo-container {
		margin: 0;
	}

	.content.page:not(.no-padding), .content {
		padding: 1.5em;
	}

	.content .main-image-container {
		margin: -1.5em;
		margin-bottom: 1.5em;
	}

	body .wp-block-columns {
		gap: 0;
	}

	body > .navigation-container > nav, body > .navigation-container > nav > div, body > .navigation-container > nav ul, body > .navigation-container > nav li, body > .navigation-container > nav li a {
		display: block;
	}
}

@media only screen and (min-width: 900px) {
	.mobile-only {
		display: none!important;
	}

	body > .navigation-container > nav li:not(:hover) ul.sub-menu {
	    border: none;
	}

	.content-container {
		padding-top: 3em;
		padding-bottom: 3em;
	}

	.content-container + .content-container {
		padding-top: 0;
	}

	.course-tile, .all-courses-tile {
		width: calc(50% - 1em);
	}

	.all-courses-tile {
		height: 30em;
	}

	a:nth-child(2n) .course-tile, .all-courses-tile:nth-child(2n) {
		margin-left: 2em;
	}

	.banner .banner-details .detail:not(:first-child) {
		margin-left: 1.5em;
	}
}