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

	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

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


/* INDLÆG / ARTIKEL START */

:root {
	--post-whitespace: 45px;
}

.hero-section.hero-section-gradient .hero-section-content {
    background: color-mix(in srgb, var(--hero-section-separator-color), transparent 40%);
}

body.post-template-default:not(:has(.header-topper)) #mainContent {
    /* padding-top: var(--body-before-height); */
	z-index: 100;
    position: relative;
}

.artikel-full-wrapper {
    display: flex;
    flex-direction: column;
    max-width: var(--standard-width);
    width: 90%;
    justify-content: center;
    margin: 60px auto 60px;
}

.artikel-full-wrapper * {
    max-width: 100%;
    height: auto;
}

.artikel-content-wrapper :is(ul, p, h1, h2, h3, h4, h5, h6, blockquote, figure) + :is(ul, p, h1, h2, h3, h4, h5, h6, blockquote, figure){
    margin-top: 22px;
}

.artikel-full-wrapper .wp-block-heading {
    width: 100%;
}

.artikel-content-outer-wrapper {
    border-bottom: 1px solid var(--separator);
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.artikel-content-wrapper {
    display: flex;
    flex-direction: column;
}

.artikel-content-wrapper * {
    order: 1;
}

.artikel-content-wrapper h1{
    order: 0;
}

.breadcrumbs-wrapper {
    margin-bottom: 10px;
}

.artikel-primary-img-outer-wrapper {
    margin-bottom: 20px;
}

.artikel-date-wrapper p {
    font-size: var(--small-font-size);
}

.artikel-full-wrapper:not(:has(.artikel-sidebar)) .artikel-content-outer-wrapper {
    max-width: 100%;
    width: 100%;
    padding: 0;
}

.artikel-sidebar .relateret-artikel-toptitle:not(:first-of-type) {
    border-top: 1px solid var(--secondary-color);
    margin-top: 40px;
    padding-top: 40px;
}

.relateret-artikel * {
    color: var(--text-color);
    text-decoration: none;
}

.relateret-artikel-inner-wrapper ul.relateret-artikel-liste {
    margin: 0;
}

.relateret-artikel-inner-wrapper ul.relateret-artikel-liste li {
    list-style: none;
    margin: 0;
}

.relateret-artikel-inner-wrapper ul.relateret-artikel-liste li a:hover {
    color: var(--accent-color);
}

.relateret-artikel-inner-wrapper ul.relateret-artikel-liste li a:before {
    transition: var(--standard-transition);
    content: '›';
    display: inline-block;
    margin-right: 4px;
}

.relateret-artikel-inner-wrapper ul.relateret-artikel-liste li a:hover:before {
    margin-right: 10px;
}

@media screen and (min-width: 900px) {
    .wp-block-columns:has(.right-side-innerwrapper) {
        flex-wrap: nowrap !important;
    }
    
    .wp-block-columns:has(.right-side-innerwrapper) > .wp-block-column {
        flex-basis: inherit;
    }

    .right-side-innerwrapper .wd-cards {
        gap: 0;
        grid-template-columns: repeat(var(--desktop-columns), 1fr);
    }

    .artikel-full-wrapper {
        display: flex;
        flex-direction: row;
        max-width: var(--standard-width);
        width: 95%;
        justify-content: center;
        margin: 60px auto 60px;
    }


    .artikel-title-wrapper > * {
        margin-bottom: 20px;
    }

	.artikel-sidebar, .wp-block-column.right-side-innerwrapper {
        border-left: 1px solid var(--secondary-color);
        width: 351px;
        max-width: 33.33%;
        flex-basis: auto !important;
	}

	.artikel-sidebar > * {
		padding-left: var(--post-whitespace);
	}
	
	.artikel-content-outer-wrapper {
		padding-right: var(--post-whitespace);
		width: 790px;
        max-width: 66.66%;
	}

    .relateret-artikel-kategori, .wd-card .wd-card-category-wrapper, .artikel-kategori {
        position: absolute;
        background: var(--dark);
        color: var(--light);
        font-size: 11px;
        text-transform: uppercase;
        padding: 8px 10px;
        letter-spacing: 3px;
        line-height: normal;
    }

    .artikel-content-outer-wrapper {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

@media screen and (min-width: 1100px) {
    .artikel-title-wrapper > * {
        margin-bottom: 20px;
    }

    .relateret-artikel-kategori, .wd-card .wd-card-category-wrapper, .artikel-kategori {
        position: absolute;
        background: var(--dark);
        color: var(--light);
        font-size: 11px;
        text-transform: uppercase;
        padding: 8px 10px;
        letter-spacing: 3px;
        line-height: normal;
    }
}

@media screen and (max-width: 899px) {
    .wp-block-columns:has(.right-side-innerwrapper) .wp-block-column {
        width: 100%;
        flex-basis: 100% !important;
    }
}

.footer-item-image{
	max-width: 250px;
    height: auto;
}

.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);
}

/* CARDS */

.wd-card {
    overflow: hidden;
    height: 430px;
	border-radius: 15px;
	box-shadow: var(--shadowlevel-2);
}

.wd-card:hover {
    border-bottom: 2px solid var(--accent-color);
	box-shadow: var(--shadowlevel-4);
}

.wd-card-title {
    font: small;
}

.wd-card .wd-card-content-wrapper {
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 10px;
}

.wd-card .wd-card-button {
    align-self: end;
    margin-top: 10px;
}

.wd-cards {
    margin-top: 0;
}

.wd-cards p.wd-card-excerpt {
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wd-cards-wrapper {
    --wd-cards-space: 10px;
    --wd-card-bg: var(--surface-color);
    --wd-card-border-radius: 2px;
    --wd-card-text-color: var(--text-color);
    --wd-card-shadowlevel: none;
}

/* Footer */

.footer-column-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--footer-item-gap);
}

@media (max-width: 600px) {
    .footer-column-list {
        flex-direction: column !important;
        align-items: center;
    }
}