/**
 * GENERAL BLOCK STYLES
 * This file is loaded in both the WordPress front- and backend.
 * Add styles here which should be present in both views.
 */



/* Layout & Grid
   ---------------------------------------------------------------------------------------------------- */

body .is-layout-constrained > .wp-block-post-content {
    max-width: unset;
}

body .is-layout-flex {
    gap: var(--wp--custom--spacing--gap-regular);
    row-gap: var(--wp--custom--spacing--gap-small);
}

body .is-layout-grid {
    gap: var(--wp--custom--spacing--gap-regular);
}

.site-main {
    margin-block-start: 0px;
}

:where(.wp-block-group.has-background.content-section, .wp-block-group.has-background.is-style-content-section),
:where(.is-style-content-section, .content-section) {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: var(--wp--custom--spacing--section) !important;
    padding-bottom: var(--wp--custom--spacing--section) !important;
}

:where(.wp-block-group.has-background.small-content-section, .wp-block-group.has-background.is-style-small-content-section),
:where(.is-style-small-content-section, .small-content-section) {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: var(--wp--custom--spacing--small-section) !important;
    padding-bottom: var(--wp--custom--spacing--small-section) !important;
}


body .is-layout-flex:has(.wp-block-wxblock-copyright) {
    gap: 0.5rem;
}
.wp-block-wxblock-copyright p {
    margin: 0;
}

:where(.wp-block-group.has-background) {
    padding: 1.25em;
}

h4.wp-block-heading:has(+ ul.wp-block-list) {
  margin-bottom: 0.5rem;
}

.has-display-font-size + .has-h-3-font-size {
    margin-top: 0rem;
}






/* Block Styles
   ---------------------------------------------------------------------------------------------------- */

.is-style-card {
    position: relative;
    padding: 1.5em;
    border: 2px solid var(--wp--preset--color--primary);
    border-radius: var(--wp--custom--border-radius--medium);
    background-color: var(--wp--preset--color--white);
}



/* Typography
   ---------------------------------------------------------------------------------------------------- */

a {
    color: var(--wp--preset--color--primary-darker);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: 
        text-underline-offset 0.2s ease-in-out, 
        color 0.2s ease-in-out;
}
a:hover, 
a:focus {
    text-underline-offset: 0.4em;
}

strong {
    font-weight: 700;
}

.is-layout-flow h4 + p,
.is-layout-flow h4 + ul {
    margin-block-start: var(--wp--custom--spacing--gap-small);
}

.has-h-3-font-size + p {
    margin-top: var(--wp--custom--spacing--gap-small);
}



/* Latest Posts & Query Block
   ---------------------------------------------------------------------------------------------------- */

.wp-block-latest-posts li:not(:last-child),
.wp-block-post-template-is-layout-flow .wp-block-post:not(:last-child) {
    margin-bottom: 2em;
}
.wp-block-latest-posts li,
.wp-block-post {
    position: relative;
    padding: 1rem;
    background-color: var(--wp--preset--color--primary-lighter);
    outline: 0px solid var(--wp--preset--color--white);
    border-radius: var(--wp--custom--border-radius--medium);
    transition: 
        border 0.1s ease-in-out,
        outline 0.2s ease-in-out,
        scale 0.2s ease-in-out;
}

.wp-block-post .teaser-text {
    padding: 0.5rem 1rem 0.5rem 1rem;
}

.wp-block-cover .wp-block-post-terms > a {
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size--h-4);
}

.wp-block-post-terms > a {
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
    line-height: var(--wp--custom--line-height--large);
    text-decoration: none;
    display: inline-block;
    transition: 
    background 0.2s ease-in-out,
    text-underline-offset ease-in-out 0.2s;
    color: var(--wp--preset--color--primary-darker);
}
.wp-block-post-terms > a:hover {
    text-decoration: underline;
}

.wp-block-post-terms + h1 {
    margin-top: calc(var(--wp--custom--spacing--gap-small)/2);
}

:not(.is-style-backdrop-frosted-glass) > .wp-block-post-terms {
    transition: background 0.2s ease-in-out;
    background: var(--wp--preset--color--white);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    background-color: rgba(234, 244, 250, 0.6);
    padding: 0.25rem 0.8rem;
    border-radius: var(--wp--custom--border-radius--medium) 0 var(--wp--custom--border-radius--medium) 0;
    position: absolute;
    z-index: 20;    
}

:not(.is-style-backdrop-frosted-glass) > .wp-block-post-terms > a {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    line-height: var(--wp--custom--line-height--small);
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease-in-out;  
}

.wp-block-post-featured-image img {
    border-radius: var(--wp--custom--border-radius--medium);
}


.wp-block-latest-posts__post-categories {
    margin-bottom: 0.5em;
}
.wp-block-latest-posts__post-title,
.wp-block-post-title {
    display: block;
    font-family: var(--wp--preset--font-family--saira-semi-condensed);
    font-size: var(--wp--preset--font-size--h-3);
    text-transform: none;
    text-wrap: auto;
}
.wp-block-post-title > a {
    font-size: inherit;
    color: var(--wp--preset--color--black);
    text-underline-offset: 1px;
}

.wp-block-latest-posts__read-more {
    display: block;
    margin-top: 0.5em;
}
.wp-block-latest-posts__post-title,
.wp-block-latest-posts__read-more,
.wp-block-post-title > a,
.wp-block-post-excerpt__more-link {
    font-weight: 700;
    text-decoration-color: transparent;
    transition: 
        transform 0.2s ease-in-out,
        text-decoration 0.2s ease-in-out,
        text-underline-offset 0.2s ease-in-out;
}

.wp-block-post-title > a:where(:hover, :focus) {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.15em;
}

.wp-block-latest-posts__post-excerpt:last-child,
.wp-block-post-excerpt:last-child {
    margin-bottom: 0;
}

.wp-block-query-pagination {
    font-size: var(--wp--preset--font-size--medium);
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;

    &.is-layout-flex {
        gap: var(--wp--custom--spacing--gap-small);
    }

    a {
        color: var(--wp--preset--color--primary-darker);
        text-decoration: none;
    }
}

.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-numbers {
    font-weight: 700;
}
.wp-block-query-pagination-numbers .page-numbers {
    padding: 0.25rem 0.85rem;
    border-radius: var(--wp--custom--border-radius--medium);
    transition: background-color ease-in-out 0.2s;
}
.wp-block-query-pagination-numbers .page-numbers.current {
    font-weight: 700;
    background-color: var(--wp--preset--color--primary-lighter);
    color: var(--wp--preset--color--primary-darker);
}

.wp-block-query-pagination-numbers .page-numbers:hover {
    background-color: var(--wp--preset--color--primary-lighter);
}

.wp-block-post {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wp-block-post .wp-block-group.inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--wp--custom--spacing--gap-small);
    padding-top: calc(var(--wp--custom--spacing--gap-small)/2);
}

.wp-block-post-excerpt {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.wp-block-post-excerpt__more-text {
    margin-top: auto;
    padding-top: var(--wp--custom--spacing--gap-small);
}

.post-navigation-link-previous a, .wp-block-query-pagination-previous {
    font-size: var(--wp--preset--font-size--large);
    display: inline-block;
    padding-left: 1.5rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%2332466A' d='M16 8C16 12.4375 12.4062 16 8 16C3.5625 16 0 12.4375 0 8C0 3.59375 3.5625 0 8 0C12.4062 0 16 3.59375 16 8ZM8.46875 4.21875L5.21875 7.5C4.90625 7.78125 4.90625 8.25 5.21875 8.53125L8.46875 11.7812C8.75 12.0938 9.21875 12.0938 9.5 11.7812C9.8125 11.5 9.8125 11.0312 9.5 10.7188L6.78125 8L9.5 5.28125C9.8125 5 9.8125 4.53125 9.5 4.21875C9.21875 3.9375 8.75 3.9375 8.46875 4.21875Z'/%3E%3C/svg%3E")
                no-repeat left center;
    background-size: 18px 18px;
    transition: 
        transform 0.2s ease-in-out,
        background-size 0.2s ease-in-out;
}

.post-navigation-link-previous a:where(:hover, :focus), 
.wp-block-query-pagination-previous:where(:hover, :focus) {
    background-size: 20px 20px;
    transform: translateX(-0.5rem);
}

.post-navigation-link-next a, .wp-block-query-pagination-next {
    font-size: var(--wp--preset--font-size--large);
    display: inline-block;
    padding-right: 1.5rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%2332466A' d='M0 8C0 3.59375 3.5625 0 8 0C12.4062 0 16 3.59375 16 8C16 12.4375 12.4062 16 8 16C3.5625 16 0 12.4375 0 8ZM7.53125 11.7812L10.7812 8.53125C11.0625 8.25 11.0625 7.78125 10.7812 7.46875L7.53125 4.25C7.21875 3.9375 6.75 3.9375 6.46875 4.25C6.15625 4.53125 6.15625 5 6.46875 5.3125L9.1875 8.03125L6.46875 10.75C6.15625 11.0312 6.15625 11.5 6.46875 11.7812C6.75 12.0938 7.21875 12.0938 7.53125 11.7812Z'/%3E%3C/svg%3E") 
                no-repeat right center;
    background-size: 18px 18px;
    transition: 
        transform 0.2s ease-in-out,
        background-size 0.2s ease-in-out;
}

.post-navigation-link-next a:where(:hover, :focus), 
.wp-block-query-pagination-next:where(:hover, :focus) {
    background-size: 20px 20px;
    transform: translateX(0.5rem);
}

.wp-block-post-terms__separator {
    color: var(--wp--preset--color--primary-darker);
}



/* Post Date with Prefix
   ---------------------------------------------------------------------------------------------------- */

.prefixed-post-date {
    display: flex;
    gap: 0.5em;
}



/* Search Page
   ---------------------------------------------------------------------------------------------------- */

.search-results .wp-block-post {
    border-color: var(--wp--preset--color--primary-lighter);
}
.search-results .wp-block-post:has(a:hover),
.search-results .wp-block-post:focus-within {
    box-shadow: 0 12px 32px rgb(0 28 119 / 25%);
}
.search-results .wp-block-search__input {
    appearance: auto;
    border-radius: var(--wp--custom--border-radius--small);
    padding: 0.5rem 1rem;
    border: none;
    background-color: var(--wp--preset--color--primary-lighter);
}
.search-results .wp-block-search__inside-wrapper {
    gap: 0.5em;
}



/* Archieves
   ---------------------------------------------------------------------------------------------------- */

.archive.category .site-main .wp-block-query-title {
    font-family: var(--wp--preset--font-family--saira-semi-condensed);
    font-size: var(--wp--preset--font-size--medium);
    text-transform: none;

    > span {
        display: block;
        margin-top: 1rem;
        font-family: var(--wp--preset--font-family--titillium-web);
        font-size: var(--wp--preset--font-size--h-2);
        color: var(--wp--preset--color--black);
        text-transform: uppercase;
    }
}



/* Category List Filters
   ---------------------------------------------------------------------------------------------------- */

.prefixed-category-list,
.wp-block-categories.is-style-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    align-items: center;
    justify-content: center;
}
.wp-block-categories.is-style-filter {
    list-style: none;
    margin: 0;
    padding: 0;
}
.prefixed-category-list .cat-item > a,
.wp-block-categories.is-style-filter .cat-item > a {
    font-weight: 700;
    line-height: var(--wp--custom--line-height--small);
    color: var(--wp--preset--color--primary-darker);
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 1rem;
    
    border-radius: var(--wp--custom--border-radius--medium);
    transition: background 0.2s ease-in-out;

    &:where(:hover, :focus) {
        background-color: var(--wp--preset--color--primary-lighter);
    }
}
.prefixed-category-list .cat-item.current-cat > a,
.wp-block-categories.is-style-filter .cat-item.current-cat > a {
    background-color: var(--wp--preset--color--primary-lighter);
}



/* Facts 
   ---------------------------------------------------------------------------------------------------- */

:where(.has-primary-darker-background-color) p {
    color: var(--wp--preset--color--white);
}

:where(.has-primary-darker-background-color) .has-display-font-size {
    line-height: var(--wp--custom--line-height--small);
}

:where(.wp-block-group.has-primary-darker-background-color) {
    padding: var(--wp--custom--spacing--gap-large);
}

.facts p {
    font-family: var(--wp--preset--font-family--saira-semi-condensed);
    text-align: center;
    font-weight: 700;
}

@media (max-width: 689px) {
    .facts .is-layout-grid {
        grid-template-columns: 1fr;
    }
}



/* Single Project Page Cover Block
   ---------------------------------------------------------------------------------------------------- */

@media (min-width: 690px) {
    .single-bh_project .wp-block-cover.alignfull {
        max-width: var(--wp--custom--size--wide);
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (max-width: 689px) {
    .single-bh_project .wp-block-cover {
        min-height: max-content !important;
        flex-direction: column;
        align-items: initial;
        gap: 1em;
    }
    .single-bh_project .wp-block-cover .wp-block-cover__image-background {
        position: static;
    }
}



/* Background with Slant
   ---------------------------------------------------------------------------------------------------- */

.background-with-slant-left,
.background-with-slant-right {
    position: relative;
    z-index: 1;
}
.background-with-slant-left::before,
.background-with-slant-right::before {
    content: "";
    position: absolute;
    z-index: -1;
    background-color: var(--wp--preset--color--primary-lighter);
    background-repeat: no-repeat;
}

.background-with-slant-left {
    overflow: clip;
}
.background-with-slant-left::before {
    top: -1px;
    bottom: -1px;
    left: clamp(80px, 24vw, 480px);
    right: -50vw;
    background-image: url(../images/slant-white-left.svg);
    background-size: contain;
}
*:has(+ .background-with-slant-left) {
    position: relative;
    z-index: 2;
} 

.background-with-slant-right::before {
    top: -1px;
    bottom: -1px;
    left: -50vw;
    right: 30px;
    background-image: url(../images/slant-white-right.svg);
    background-position-x: right;
    background-size: cover;
}



/* Team
   ---------------------------------------------------------------------------------------------------- */

.team .is-style-card {
    padding: 2rem;
    gap: 1rem;
}

.team .has-h-4-font-size + p {
    margin-top: 0.5rem;
}

.team .contact-data {
    row-gap: 0.5rem !important;
}

.team a {
    text-decoration: none;
    color: var(--wp--preset--color--black);
    position: relative;
    padding-left: calc( 18px + 0.5rem);
}

.team a:hover {
    text-decoration: underline;
}

.team p {
    font-size: var(--wp--preset--font-size--small);
}

.team img {
    max-width: 164px;
}



/* Job
   ---------------------------------------------------------------------------------------------------- */

.job {
    transition: transform 0.2s ease-in-out;
}

.job a::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.job a {
    text-decoration: none;
    color: var(--wp--preset--color--black);
}

.job:has(a):where(:hover, :focus-within) {
    transform: scale(1.05);
}



/* Liste
   ---------------------------------------------------------------------------------------------------- */

ul.wp-block-list.is-style-with-list-marker-icon {
    list-style: none;
    padding-left: 0;
}

ul.wp-block-list.is-style-with-list-marker-icon li {
    position: relative;
    padding-left: 0.1rem;
}

ul.wp-block-list.is-style-with-list-marker-icon li:not(:last-child) {
    margin-bottom: 0.25em;
}

ul.wp-block-list.is-style-with-list-marker-icon li a {
    color: var(--wp--preset--color--black);
    text-decoration: none;
    transition: text-underline-offset ease-in-out 0.2s;
    padding-left: calc(18px + 0.5rem);
}

ul.wp-block-list.is-style-with-list-marker-icon li a:hover {
   text-decoration: underline;
}



/* Link decorations for mailto:, tel: and fax:
   ---------------------------------------------------------------------------------------------------- */

ul.is-style-with-list-marker-icon a:only-child[href^="mailto:"]::before,
.team a:only-child[href^="mailto:"]::before,
ul.is-style-with-list-marker-icon li a:only-child[href^="tel:"]::before,
.team a:only-child[href^="tel:"]::before,
ul.is-style-with-list-marker-icon li a:only-child[href^="fax:"]::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    position: absolute;
    top: calc(50% - 9px);
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform .2s ease-in-out;
}

ul.is-style-with-list-marker-icon a:only-child[href^="mailto:"]::before,
.team a:only-child[href^="mailto:"]::before {
    background-image: url(../images/envelope.svg);
}

ul.is-style-with-list-marker-icon li a:only-child[href^="tel:"]::before,
.team a:only-child[href^="tel:"]::before {
    background-image: url(../images/phone.svg);
}

ul.is-style-with-list-marker-icon li a:only-child[href^="fax:"]::before {
    background-image: url(../images/fax.svg);
}