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

	Theme Name: WorkDigital Foundation Child
	Version: 0.1
	Description: Child theme for WorkDigital Foundation theme
	Author: WorkDigital
	Author URI: https://workdigital.dk
    Template: wd-foundation

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

/*.entry-content:not(:has(.kursus-content-wrapper)),*/

body .entry-content > *:first-child.wp-block-cover {
    margin-top: 0;
}

.kursus-content-wrapper > .wp-block-group__inner-container > *:not(.kursus-banner-wrapper) > *, 
body *:not(.post-inner) > .entry-content:not(:has(.kursus-content-wrapper)) > *:not(.wdf-width--full, .wp-block-cover), 
.wp-block-group.wdf-width.wdf-width--full > .wp-block-group__inner-container > .has-background > *:not(:has(.wave-divider)) {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/*.wdf-width--standard-width {
    max-width: 90%;
}*/

/*Content blokke med 50% billede 50% tekst*/
.image-content-section-wrapper {
	margin-bottom: 6em;
}

.image-content-section-wrapper .image-content-section .content-section p,
.content-section p{
	margin-bottom: 20px;
}

.image-content-section-wrapper .image-content-section .content-section p:last-child {
	margin: 0;
}

.image-content-section-wrapper .image-content-section .content-section .wp-block-buttons .wp-block-button .wp-element-button {
	border-radius: 6px;
	font-weight: normal;
	line-height: normal;
	padding: 10px 30px;
	height: auto;
	font-size: var(--body-font-size);
}

.image-content-section-wrapper .image-section figure {
	border-radius: 14px;
	height: 100%;         /* Forudsætter at forældre-container også har defineret højde */
  	overflow-x: auto;
  	overflow-y: hidden;
}

.image-content-section-wrapper .image-section figure img {
	border-radius: 14px;
	height: 100%;
  	width: auto;          /* Bevarer aspect ratio */
  	display: block;
}


/*Cards*/

.wd-cards-wrapper {
	/* margin-bottom: 6em !important; */
	margin-bottom: 3em !important;
	margin-top: 3em !important;
}

.wd-cards-wrapper .wd-cards {
	gap: var(--small-gap);
}

.wd-cards-wrapper .wd-cards .wd-card {
	border-radius: 14px;
}

.wd-cards-wrapper .wd-cards .wd-card .wd-card-image-wrapper {
	border-radius: 14px;
	width: 100%;
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	position: relative;
}

.wd-card-image-wrapper,
.wd-card-image-wrapper img,
.wd-card-image-wrapper svg,
.wd-card-content-wrapper,
.wd-card-content,
.wd-card-title,
.wd-card-excerpt,
.wd-card-image-wrapper::after{
	transition: all .5s ease;
}

.wd-card-image-wrapper::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 4px;
    height: 30px;
    width: 200%;
    background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYWdfMSIgeG1sbnM6c3ZnanM9Imh0dHA6Ly9zdmdqcy5kZXYvc3ZnanMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjQwMCA5Ni40IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNDAwIDk2LjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgIDxwYXRoIGZpbGw9InZhcigtLXN1cmZhY2UtY29sb3IpIiBkPSJNMjQwMCw5Ni40VjMwLjZjLTczLjUtNTAuMy03OS45LDY2LjItMTM5LjcsNjAuOGMtNjIuNS01LjYtODcuNS03NC44LTE1MC04MGMtNjIuNS01LjItODcuNSw1NC4yLTE1MCw1NQogICAgICAgIGMtNjIuNSwwLjgtODcuNS00OS4xLTE1MC01MXMtODcuNSw0My43LTE1MCw0MmMtNjIuNS0xLjctODcuNS01MS0xNTAtNTBjLTYyLjUsMS04Ny41LDU1LTE1MCw1NXMtODcuNS01MS45LTE1MC01NQogICAgICAgIHMtODcuNSw0MC4yLTE1MCw0MGMtNjIuNS0wLjItODcuNS00Mi43LTE1MC00MWMtNjIuNSwxLjctODcuNSw0OC4yLTE1MCw0OWMtNjIuNSwwLjgtODcuNS00MS41LTE1MC00NWMtNjIuNS0zLjUtODcuNSwzMC4xLTE1MCwyOAogICAgICAgIGMtNjIuNS0yLjEtODcuNS00Mi44LTE1MC0zOGMtNjIuNSw0LjgtODUuNCw1NC41LTE1MCw2MUM5NS43LDY3LjksMzMuMywzNi45LDAsMzAuN2wwLDY1LjdIMjQwMHoiPjwvcGF0aD4KICAgIDwvc3ZnPg==") no-repeat center;
    z-index: 0;
    filter: invert(1);
    opacity: 0;
}

.wd-card:hover > .wd-card-image-wrapper::after {
	opacity: 0.3;
}

.wd-card:hover > .wd-card-image-wrapper img {
	transform: translateY(-90px) scale(1.2);
}

.wd-card-image-wrapper {
	border-radius: 14px 14px 0 0 !important;
}

.wd-card-image-wrapper svg,
.kontaktform-image-row svg,
.kontaktform-header-row svg,
.kursus-aside-header svg{
	position: absolute;
	bottom: -2px;
	min-width: 100%;
	min-height: 20px;
	z-index: 1;
}

.kontaktform-header-row svg path,
.kontaktform-image-row svg path {
	fill: var(--kontaktformular-bg);
}

.wd-card:hover > .wd-card-image-wrapper svg,
.wd-card:focus > .wd-card-image-wrapper svg,
.wd-card:active > .wd-card-image-wrapper svg,
.wd-card:hover > .wd-card-image-wrapper::after {
	transform: scaleY(2) translateY(-32px);
}

.wd-cards--employees .wd-card:hover > .wd-card-image-wrapper img,
.wd-cards--employees .wd-card:hover > .wd-card-content-wrapper > .wd-card-title,
.wd-cards--employees .wd-card:hover > .wd-card-image-wrapper::after {
	transform: none !important;
}

.wd-cards--employees .wd-card .wd-card-image-wrapper::after {
	background: none;
}

.wd-cards-wrapper .wd-cards .wd-card .wd-card-image-wrapper img {
	border-radius: 14px 14px 0 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.wd-card:hover > .wd-card-content-wrapper > .wd-card-title-link > .wd-card-title,
.wd-card:hover > .wd-card-content-wrapper > .wd-card-title,
.wd-card:hover > .wd-card-content-wrapper > .wd-card-content,
.wd-card:hover > .wd-card-content-wrapper > .wd-card-excerpt {
    transform: translateY(-30px);
}

.wd-cards-wrapper .wd-cards .wd-card .wd-card-content-wrapper {
	padding: 30px 40px;
	border-radius: 12px;
}

.wd-cards-wrapper .wd-cards .wd-card .wd-card-content-wrapper .wd-card-title {
	font-size: calc(var(--body-font-size) * 1.5);
}

.wd-cards-wrapper .wd-cards .wd-card .wd-card-content-wrapper .wd-card-title + p.wd-card-excerpt {
    margin-top: 10px;
}

.wd-cards-wrapper .wd-cards .wd-card .wd-card-button {
	justify-content: flex-end;
	margin-top: 10px;
}

.wd-cards-wrapper .wd-cards .wd-card .wd-card-button .wp-element-button {
	border-radius: 30px;
	font-weight: normal;
	line-height: normal;
	padding: 14px 40px;
	font-size: var(--body-font-size);
	height: auto;
	width: 100%;
}

@media screen and (max-width: 570px) {
	.wd-cards {
		gap: var(--gap) !important;
		margin-left: 20px;
		margin-right: 20px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
	.wd-cards {
		margin-left: 20px;
		margin-right: 20px;
	}
}

@media screen and (min-width: 1200px) {
	.wd-card {
		min-height: 660px;
	}
}
/* Styling til kursus side content */

.wp-block-columns.kursus-columns {
    gap: var(--gap);
}

.kursus-banner-wrapper,
.kursus-content-wrapper {
	margin-top: 0 !important;
}

.entry-content > * .wp-block-group.kursus-content-wrapper {
    padding-top: var(--gap);
}

.kursus-banner-text {
	color: white;
}

.kursus-info-wrapper {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    width: var(--standard-width);
}

.wp-block-column.content-section .kursus-info-wrapper {
    width: 100%;
    max-width: 100%;
}

.kursus-info-table {
    width: 100%;
	background-color: color-mix(in srgb, var(--primary-color) 10%, var(--surface-color) 10%);
	padding: 30px 20px;
	border-radius: 10px;
}

.kursus-info-row {
	padding: 5px 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.kursus-info-row:not(:last-child) {
		border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.kursus-info-label {
	font-weight: bold;
}

.kursus-info-value {
	margin-left: 5px;
}

.kursus-info-row.kursus-info-row--price {
    padding: 10px;
}

.kursus-info-row--price > .kursus-info-value {
	color: rgb(234,107,84);
}

.kursus-info-row--price > div {
	font-size: 18px;
	font-weight: bold;
}

.kursus-info-row--phone > div > a{
	color: var(--text-color);
}

.kursus-aside-wrapper {
	margin: 30px auto 0;
	background-color: var(--surface-color);
	position: relative;
	overflow: hidden;
}

.kursus-aside-wrapper,
.kursus-aside-header {
	border-radius: 10px;
}

.kursus-aside-header {
	background-color: var(--primary-color);
	position: relative;
}

.kursus-aside-header h3 {
	font-size: 18px;
	color: white;
	padding: 40px;
	margin: 0;
	position: relative;
	display: block;
}

.kursus-list {
	margin: 0 1rem;
	padding: 0 20px 20px;
	position: relative;
}


@media screen and (min-width:768px) and (max-width: 900px) {
	.kontakt-subtext {
		font-size: 10px !important;
	}
}

@media screen and (max-width: 782px) {
	
	.entry-content {
		display: flex;
		flex-direction: column;
	}

	.kursus-content-wrapper,
	.kursus-content-wrapper > .wp-block-group__inner-container,
	.kursus-columns {
		display: contents !important;
	}

	.kursus-banner-wrapper {
		position: relative;
		top: -46px;
		order: -3;
	}

	.kursus-columns > .content-section {
		order: -2;
		/*padding: 0 40px;*/
	}

	.kursus-info-wrapper {
		order: -1;
		margin-top: 40px;
	}

	.kontakt-kursus-wrapper {
		margin: 2.5em auto 6.5em !important;
		width: 100%;
		/*padding: 0 40px;*/
	}
}


/* Styling til bølge dividers */

.wave-divider {
	height: 100px;
}

.wave-divider svg,
.wave-divider svg {
	width: 100%;
	height: 100px;
}

.wave-bg-color svg{
    fill: var(--background-color);
}

.wave-surface-color svg{
    fill: var(--surface-color);
}

.hero-section-wave {
	clip-path: polygon(100% 0%, 0% 0% , 0.00% 93.09%, 1.00% 93.26%, 2.00% 93.46%, 3.00% 93.68%, 4.00% 93.93%, 5.00% 94.19%, 6.00% 94.47%, 7.00% 94.77%, 8.00% 95.07%, 9.00% 95.37%, 10.00% 95.68%, 11.00% 95.99%, 12.00% 96.29%, 13.00% 96.57%, 14.00% 96.85%, 15.00% 97.10%, 16.00% 97.34%, 17.00% 97.55%, 18.00% 97.73%, 19.00% 97.89%, 20.00% 98.01%, 21.00% 98.10%, 22.00% 98.16%, 23.00% 98.18%, 24.00% 98.17%, 25.00% 98.12%, 26.00% 98.04%, 27.00% 97.93%, 28.00% 97.78%, 29.00% 97.61%, 30.00% 97.40%, 31.00% 97.18%, 32.00% 96.93%, 33.00% 96.66%, 34.00% 96.37%, 35.00% 96.08%, 36.00% 95.77%, 37.00% 95.47%, 38.00% 95.16%, 39.00% 94.85%, 40.00% 94.56%, 41.00% 94.27%, 42.00% 94.00%, 43.00% 93.75%, 44.00% 93.52%, 45.00% 93.32%, 46.00% 93.14%, 47.00% 92.99%, 48.00% 92.88%, 49.00% 92.79%, 50.00% 92.74%, 51.00% 92.73%, 52.00% 92.75%, 53.00% 92.80%, 54.00% 92.89%, 55.00% 93.01%, 56.00% 93.16%, 57.00% 93.35%, 58.00% 93.55%, 59.00% 93.79%, 60.00% 94.04%, 61.00% 94.31%, 62.00% 94.60%, 63.00% 94.90%, 64.00% 95.20%, 65.00% 95.51%, 66.00% 95.82%, 67.00% 96.12%, 68.00% 96.42%, 69.00% 96.70%, 70.00% 96.96%, 71.00% 97.21%, 72.00% 97.43%, 73.00% 97.63%, 74.00% 97.80%, 75.00% 97.95%, 76.00% 98.06%, 77.00% 98.13%, 78.00% 98.17%, 79.00% 98.18%, 80.00% 98.15%, 81.00% 98.09%, 82.00% 97.99%, 83.00% 97.87%, 84.00% 97.71%, 85.00% 97.52%, 86.00% 97.30%, 87.00% 97.07%, 88.00% 96.81%, 89.00% 96.53%, 90.00% 96.24%, 91.00% 95.94%, 92.00% 95.64%, 93.00% 95.33%, 94.00% 95.02%, 95.00% 94.72%, 96.00% 94.43%, 97.00% 94.15%, 98.00% 93.89%, 99.00% 93.65%, 100.00% 93.43%);
}

/* Styling til banner med bølge */

.banner-wave-wrapper {
	position: relative;
	max-height: 420px;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 100% !important;
}

.banner-wave-container {
	max-height: 140px;
}

.banner-wave-container svg {
    position: relative;
    bottom: -7px;
    width: 100%;
	max-height: 140px;
    fill: var(--surface-color);
}

.banner-wave .wp-element-button {
	border-radius: 6px;
	font-weight: normal;
	line-height: normal;
	padding: 14px 40px;
	margin-top: 20px;
	height: 52px;
}


.banner-wave-content {
	position: relative;
	bottom: 25px;
	color: var(--text-color);
}

@media screen and (min-width: 782px) {

	.banner-wave-wrapper {
		max-height: 520px;
	}

}

@media screen and (min-width: 768px) {

	.banner-wave-content {
		bottom: 35px;
	}

}

@media screen and (min-width: 1000px) {

	.banner-wave-content {
		bottom: 45px;
	}

}

@media screen and (min-width: 1200px) {
	
	.banner-wave-wrapper {
		max-height: 570px;
	}

	.banner-wave-content {
		bottom: 60px;
	}
}

/* Styling til kontaktformular */

.wp-block-contact-form-7-contact-form-selector, .wd-contact-form .wd-contact-form-inner {
	margin: 0 auto;
}

.wd-contact-form .wd-contact-form-inner {
    padding: 0;
    border-radius: var(--theme-border-radius);
}

.wd-contact-form .kontaktform-form-row {
    padding: var(--wd-spacing-lg);
}

.entry-content .kontaktform-form-row h3, .kontaktform-header-row h3 {
    padding: 20px 20px 30px;
    margin: 0;
    display: block;
    text-align: center;
    background: var(--secondary-color);
    font-size: var(--medium-font-size);
    font-weight: var(--bold);
    color: var(--background-color);
}

.wd-contact-form .wd-contact-form-inner:has(.kontaktform-image-row) .kontaktform-form-row h3 {
    padding: 20px;
}

.wd-contact-form :is( .wd-field-input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea, select) {
    border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}

.wd-contact-form .wd-form-actions .wd-submit-btn:hover:not(:disabled) {
	background-color: var(--btn-color-hover);
}

.kontaktform-header-row {
	position: relative;
}

.kontaktform-form-row h3 {
    padding: 45px 20px;
    margin: 0;
    display: block;
    text-align: center;
    background: var(--primary-color);
    font-size: var(--medium-font-size);
    font-weight: var(--bold);
	color: white;
}

.kontaktform-form-row > ul {
    margin: 0;
}

.kontaktform-form-row > ul > li {
    margin: 0 1rem 0.5rem;
}

.kontakt-subtext {
	position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    font-size: 12px;
    display: block;
    text-align: center;
}

@media screen and (min-width: 1200px) {
	.kontakt-kursus-wrapper {
		transform: translateY(-400px);
		margin-bottom: -400px !important;
	}
}

@media screen and (max-width: 767px) {
	.wpcf7 label:has(input:not(:placeholder-shown)) .label-text,
	.wpcf7 label:has(textarea:not(:placeholder-shown)) .label-text,
	.wpcf7 label:focus-within .label-text {
    	transform: translateY(-16px);
	}
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
	.wpcf7 label:has(input:not(:placeholder-shown)) .label-text,
	.wpcf7 label:has(textarea:not(:placeholder-shown)) .label-text,
	.wpcf7 label:focus-within .label-text {
    	transform: translateY(-20px);
	}
}

/*Header*/

.header-topper {
    height: auto;
}

.small-header .main-header-inner{
	max-height: 65px !important;
	transition: max-height var(--standard-transition);
}

.small-header .main-header-menu .menu-item > a,
.small-header .main-header-logo-link, .main-header-nav-open {
	height: 65px !important;
}

.main-header-menu:not(:has(a:focus, a:active)) .menu-item.current_page_item > a {
    color: var(--light);
}

.main-header-menu .menu-item.is-expanded .sub-menu {
    display: block;
}

.main-header-menu .menu-item > a {
    white-space: normal;
    grid-template-columns: auto;
    line-height: normal;
}

.small-header .main-header-logo-link img {
	max-height: 45px;
	transition: max-height var(--standard-transition);
}

.main-header-logo-link img {
	max-height: 55px;
	transition: max-height var(--standard-transition);
	padding: 0;
}

.main-header-inner {
	align-items: center;
}

/*Footer*/

footer.site-footer {
	position: relative;
	margin-top: 1px;
}

.footer-headline-wrapper {
	--footer-logo-height: 120px;
}

.footer-leadin.footer-leadin--wave {
    position: relative;
}

.footer-leadin.footer-leadin--wave svg {
    position: absolute;
    bottom: -2px;
}


/*Banner*/

.banner {
	min-height: 320px;
	margin-top: 6em;
}

.banner .wp-element-button {
	border-radius: 6px;
	font-weight: normal;
	line-height: normal;
	padding: 14px 40px;
	margin-top: 20px;
	height: 52px;
}

/*Headers*/

.intro-text {
	margin-bottom: 6rem;
}

h1 {
	color: var(--primary-color);
}

.hero-section-inner > h1 {
	color: var(--hero-section-text-color);
}

@media screen and (max-width: 768px) {
	.hero-section-inner > h1 {
		font-size: 40px;
	}
}

/* Cards employees */
.wd-cards.wd-cards--employees .wd-card {
	box-shadow: var(--shadowlevel-1);
	border-radius: 20px;
	max-width: 500px;
	background-color: var(--surface-color);
	align-self: center;
}

.wd-cards-wrapper .wd-cards.wd-cards--employees  {
	margin-left: auto;
    margin-right: auto;
}

.wd-cards.wd-cards--employees .wd-card {
	min-height: fit-content !important;
	max-width: fit-content !important;
}

.wd-cards.wd-cards--employees .wd-card .wd-card-image-wrapper {
	height: auto !important;
}

.wd-cards.wd-cards--employees .wd-card .wd-card-content-wrapper {
	background-color: var(--surface-color);
	height: fit-content;
}