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

	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

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

* {
    scroll-behavior: smooth;
}

:root {
	--theme-border-radius: 0;

	--btn-color: var(--accent-color);
    --btn-color-hover: var(--accent-color-hover);
}

body:has(.header-topper) {
    padding-top: calc(var(--header-height) + 24px);
}

strong {
    font-weight: bold;
}

.entry-content :is(ul, p, h1, h2, h3, h4, h5, h6, blockquote, figure, .schema-faq, .wp-block-buttons) + :is(ul, p, h1, h2, h3, h4, h5, h6, blockquote, figure, .schema-faq, .wp-block-buttons) {
    margin-top: 15px;
}

.color-accent, .color-accent-hover:hover, .color-accent-hover:focus, :root .has-accent-color, .has-drop-cap:not(:focus)::first-letter, .wp-block-button.is-style-outline, a {
    color: var(--accent-color);
}

.entry-content .wp-block-cover:first-child
{
    margin-top: 0 !important;
}

/*.entry-content > .wp-block-group:not(.has-background) {
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
}*/

.entry-content > :is(.wp-block-cover, .wp-block-cover-image, .wp-block-group) {
	padding-right: 2em;
	padding-left: 2em;
}

body .entry-content > .wp-block-cover:last-child {
    margin-bottom: -100px;
    padding-bottom: 200px !important;
}

.wp-block-columns:has(> .wp-block-column:last-child > figure:first-child) {
	flex-direction: column-reverse;
}

ul.wp-block-list.firmainfo li, li.footer-item {
    align-items: center;
}

:is(ul.wp-block-list.firmainfo, ul.footer-column-list) .wd-icon {
    width: calc(var(--body-font-size) + 2px);
}

@media (min-width: 782px) {
    .wp-block-columns, .wp-block-columns:has(> .wp-block-column:last-child > figure:first-child) {
		flex-direction: unset;
    }
}

@media screen and (min-width: 769px) {
	.entry-content :is(ul, p, h1, h2, h3, h4, h5, h6, blockquote, figure, .schema-faq, .wp-block-buttons) + :is(ul, p, h1, h2, h3, h4, h5, h6, blockquote, figure, .schema-faq, .wp-block-buttons) {
		margin-top: 22px;
	}
}






/* KNAPPER */

.wp-block-button .wp-block-button__link, .btn, .wpcf7 input.wpcf7-submit {
    border-radius: 1px;
	transition: var(--standard-transition);
	padding: 15px 25px;
	text-transform: uppercase;
	font-size: 16px;
	border: 4px solid var(--accent-color);
    background: transparent;
    color: var(--accent-color);
}

:is(.wp-block-button .wp-block-button__link, .btn, .wpcf7 input.wpcf7-submit):hover,
:is(.wp-block-button .wp-block-button__link, .btn, .wpcf7 input.wpcf7-submit):active {
    border-radius: 10px;
	color: var(--accent-color);
	background: transparent;
}

.wp-block-cover.wd-topsektion :is(.wp-block-button .wp-block-button__link, .btn, .wpcf7 input.wpcf7-submit) {
    color: var(--light);
    border-color: var(--light);
}





.shape {
	/* indeks fra 0 til 3 */
	--i: 0;

	/* base-værdier */
	--a1: 70%;
	--a2: 80%;
	--a3: 60%;
	--a4: 90%;
	--b1: 70%;
	--b2: 60%;
	--b3: 90%;
	--b4: 80%;
	
	/* step-per-child (kan justeres) */
	--step1: 5%;
	--step2: 5%;
	--step3: 10%;
	--step4: 10%;
	--step5: 5%;
	--step6: 5%;
	--step7: 5%;
	--step8: 5%;

	/* beregnede værdier */
	--r1: calc(var(--a1) + var(--i) * var(--step1));
	--r2: calc(var(--a2) - var(--i) * var(--step2));
	--r3: calc(var(--a3) + var(--i) * var(--step3));
	--r4: calc(var(--a4) - var(--i) * var(--step4));
	--r5: calc(var(--b1) - var(--i) * var(--step5));
	--r6: calc(var(--b2) + var(--i) * var(--step6));
	--r7: calc(var(--b3) - var(--i) * var(--step7));
	--r8: calc(var(--b4) + var(--i) * var(--step8));

	animation: morph 8s ease-in-out infinite;
	border-radius: var(--r1) var(--r2) var(--r3) var(--r4) / var(--r5) var(--r6) var(--r7) var(--r8);;
	transition: all 10s ease-in-out;
	height: auto;
	width: auto;
	overflow: hidden;
}

:is(.wp-block-column, .wp-block-group):first-child .shape {
    --i: 1;
}

:is(.wp-block-column, .wp-block-group):nth-child(2) .shape {
    --i: 3;
}

:is(.wp-block-column, .wp-block-group):nth-child(3) .shape {
    --i: 4;
}

:is(.wp-block-column, .wp-block-group):nth-child(4) .shape {
    --i: 2;
}

@keyframes morph {
	0%, 100% {
		border-radius: var(--r1) var(--r2) var(--r3) var(--r4) / var(--r5) var(--r6) var(--r7) var(--r8);
	} 

	50% {
		border-radius: var(--r5) var(--r6) var(--r7) var(--r8) / var(--r1) var(--r2) var(--r3) var(--r4);
	}
}





/* HEADER */

.header-topper-item {
    font-size: 14px;
}

.header-topper-item a {
	font-size: inherit;
}

.main-header-logo-link img {
    padding: 10px 0;
    max-height: 100%;
}

.main-header-menu .menu-item > a {
    border-radius: 0;
}

body.dark-mode .main-header-menu .menu-item > a:focus, .main-header-menu .menu-item > a:active {
    color: var(--light);
}

.main-header-menu:not(:has(a:focus, a:active)) .menu-item.current_page_item > a,.main-header-menu .sub-menu .menu-item.current_page_item > a {
    background-color:  color-mix(in srgb, var(--header-bg-color), transparent 80%);
    border-radius: 0;
}

.main-header-menu .menu-item > a:focus, .main-header-menu .menu-item > a:active {
    background-color:  color-mix(in srgb, var(--header-bg-color), transparent 80%);
}

body.dark-mode .main-header-menu:not(:has(a:focus, a:active)) .menu-item.current_page_item > a, body.dark-mode .main-header-menu .sub-menu .menu-item.current_page_item > a {
    background-color:  color-mix(in srgb, var(--header-bg-color), var(--light) 10%);
}

body.dark-mode .main-header-menu .menu-item > a:focus, .main-header-menu .menu-item > a:active {
    background-color:  color-mix(in srgb, var(--header-bg-color), var(--light) 10%);
}

nav.main-header-nav {
    background-image: url(/wp-content/uploads/Turtle-fritlagt.png);
    background-repeat: no-repeat;
    background-position: bottom 10px right 10px;
    background-size: 200px;
}

@media screen and (min-width: 600px) {
    .header-topper-items {
        justify-content: flex-end;
		padding-right: 24px;
    }
}

@media screen and (max-width: 999px) {
    .header-topper {
        height: auto;
    }

	.header-topper-inner {
        padding: 0;
    }
}

@media screen and (min-width: 1190px) and (hover: hover) {
    body.sometimes-burger .main-header-menu ul.sub-menu {
        border-radius: 0;
    }

    body.sometimes-burger .main-header-menu ul.sub-menu li:first-child a, body.sometimes-burger .main-header-menu ul.sub-menu li:last-child a {
        border-radius: 0;
    }
}




/* CARDS */

.wd-cards-wrapper {
    --wd-cards-space: 20px;
    --wd-card-bg: var(--surface-color);
    --wd-card-border-radius: var(--theme-border-radius);
    --wd-card-text-color: var(--text-color);
}



.wd-card {
    overflow: hidden;
	box-shadow: none;
    border-radius: 0;
}

.wd-card-image-wrapper {
    border-radius: 0;
}

.wd-card-image {
    border-radius: 0;
	height: auto;
}

.wd-card-content-wrapper {
    padding: 30px 25px 25px;
}

.wd-card-title-link {
    color: var(--wd-card-text-color) !important;
}

.wd-card-content-wrapper .wd-card-excerpt p, .wd-card-content-wrapper .wd-card-content p {
    font-size: inherit;
    margin-bottom: 8px;
}

.wd-cards--employees .wd-card .wd-card-content-wrapper {
    gap: 10px;
}

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

.wd-cards--employees .wd-card .wd-card-content-wrapper p.wd-card-job-title {
    margin: 0;
}

.wd-cards--employees .wd-card-phone, .wd-cards--employees .wd-card-email {
    align-items: center;
}

:is(.wd-cards--employees .wd-card-phone, .wd-cards--employees .wd-card-email) .wd-icon {
    width: calc(var(--body-font-size) + 2px);
}

@media screen and (min-width: 571px) and (max-width: 1000px) {
	.wd-cards:has(:nth-child(3)) {
    	display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.wd-cards:has(:nth-child(3)) .wd-card {
		max-width: calc(50% - var(--wd-cards-space));
	}
}




/* KONTAKTFORMULAR */

.kontaktform-form-row {
    /*--kontaktformular-bg: color-mix(in srgb, var(--primary-color), var(--dark) 30%);
	--kontaktformular-inner-bg: var(--kontaktformular-bg);
	--text-color: var(--light);*/

    --kontaktformular-bg: var(--surface-color);
	--kontaktformular-inner-bg: var(--surface-color);

	background-image: url(/wp-content/uploads/Turtle-fritlagt.png);
    background-repeat: no-repeat;
    background-position: bottom 10px right 10px;
    background-size: 75px;
}

.kontaktform-form-row p {
    margin-top: 0 !important;
}

.wpcf7 label textarea{
    resize: vertical;
}

.wp-block-contact-form-7-contact-form-selector :is(.cf7-cf-turnstile, br) {
    display: none;
}

.wpcf7 input.wpcf7-submit {
    width: fit-content;
}



/* USP */

.wd-usp-container {
    gap: 5%;
    /*overflow-x: scroll;
    max-width: 100vw;
    justify-content: flex-start;
	mask-image: linear-gradient(to right, var(--surface-color) 70%, rgba(255, 255, 255, 0) 100%);
	padding-right: 100px;*/
}

.wd-usp {
    /*min-width: 180px;*/
}

.wd-usp .wd-icon svg {
    height: 40px;
    width: 40px;
    color: var(--accent-color);
}

.wd-usp__title {
    font-weight: 500;
}

.wd-usp-container .wd-usp .wd-usp__title + .wd-usp__text {
    margin-top: 5px;
}

@media screen and (max-width: 500px) {
    p.wd-usp__title {
        font-size: 16px;
    }

    p.wd-usp__text {
        font-size: 12px;
        line-height: 16px;
    }
}






/* GALLERI */

button.dialog-close {
	cursor: pointer;
}

.lightbox-dialog .arrow, .lightbox-dialog button.dialog-close:hover {
	border-color: var(--light);
}

.lightbox-dialog button.dialog-close svg, .lightbox-dialog .arrow svg {
    fill: var(--light);
}





/* BOTTOM NAV */

.theme-toggle-button {
    bottom: 75px;
}

.bottom-nav {
    background: none;
}

.bottom-nav-list {
    margin: 10px;
    gap: 10px;
}

.bottom-nav-item a {
    background: var(--accent-color);
    padding: 10px 15px;
    flex-direction: row;
    color: var(--light);
	gap: 10px;
	border-radius: 10px;
	box-shadow: var(--shadowlevel-2);
}

span.bottom-nav-label {
    color: inherit;
    text-wrap: balance;
}

.bottom-nav-item .wd-icon {
    width: auto;
    background: none !important;
}

.bottom-nav-item:first-of-type .wd-icon {
    animation: horizontal-shaking 1.5s infinite;
}

@keyframes horizontal-shaking {
    0% { transform: translateX(0); }
    50% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

.bottom-nav-item:last-of-type .wd-icon {
    animation: tilt-shaking 0.3s infinite;
}

@keyframes tilt-shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0eg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@media screen and (max-width: 768px) {
    .bottom-nav-list {
        justify-content: center;
    }
}






/* FOOTER */

footer.site-footer {
    background-image: url(/wp-content/uploads/Turtle-fritlagt.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
}

footer.site-footer .footer-inner {
    padding: 150px 0 150px;
    background: color-mix(in srgb, var(--footer-background-color) 60%, transparent);
	width: 100%;
    max-width: 100%;
}

.footer-columns {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
	width: var(--theme-standard-width);
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

img.footer-item-image {
    max-width: 100%;
    height: auto;
}

li.footer-item .wd-icon {
    top: 2px;
    align-self: flex-start;
}

p.footer-headline {
    font-size: 20px;
}

@media screen and (min-width: 600px) {
    .footer-columns {
        display: flex;
        gap: 50px;
        align-items: start;
        flex-wrap: wrap;
        flex-direction: row;
    }
}

@media screen and (min-width: 800px) {
	.footer-columns {
        gap: var(--footer-gap);
    }
	
	.footer-column {
        max-width: calc((100% - var(--footer-gap) * 2) / 3);
    }
}








/* SoMe integrationer */

div#sb_instagram *, .cff-wrapper * {
    color: var(--text-color)!important;
}

.cff-wrapper {
    max-height: 687px;
    overflow-y: scroll;
}

.cff-wrapper * {
    font-size: 16px;
    line-height: 1.5;
}

#cff .cff-item.cff-box, #cff .cff-item.cff-box:first-child {
    background: transparent;
}

.cff-wrapper .cff-likebox {
    margin-top: 0;
    margin-bottom: 10px;
}

.cff-wrapper .cff-likebox .fb_iframe_widget {
    height: 70px;
}

.cff-wrapper .cff-wrapper-ctn {
    padding-bottom: 10px;
}

#sb_instagram #sbi_load .sbi_load_btn *, #sb_instagram .sbi_follow_btn a * {
    color: #fff !important;
}

:is(#sb_instagram .sbi_type_carousel .sbi_playbtn, #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play, #sb_instagram .sbi_type_video .sbi_playbtn, #sb_instagram .sbi_type_video .svg-inline--fa.fa-play, .sbi_type_carousel .fa-clone) * {
    fill: #fff !important;
    color: #fff !important;
}

.some-feed-wrapper {
    position: relative;
}

.some-feed-wrapper:before {
    content: "";
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center;
    height: 35px;
    width: 35px;
    display: block;
    position: absolute;
    z-index: 1;
    top: -10px;
    left: -10px;
    border-radius: 100px;
    box-shadow: var(--shadowlevel-1);
}

.some-feed-wrapper.fb-feed:before {
    background-image: url(icons/facebook-f.svg);
    background-color: #0866FF;
}

.some-feed-wrapper.ig-feed:before {
    background-image: url(icons/instagram-logo.svg);
    background-color: #dd2a7b;
}