/**
 * FRONTEND STYLES
 * This file is only loaded in the WordPress frontend.
 * Only add styles which are not needed in the block editor.
 */



/* General Form & Input Styles
   ---------------------------------------------------------------------------------------------------- */
form {
    --c-notice--alert: #B50000;
    --c-notice--attention: var(--wp--preset--color--black);
    --c-notice--success: var(--wp--preset--color--black);

    --c-input--text: var(--wp--preset--color--black);
    --c-input--focus: var(--wp--preset--color--primary);
    --c-label--text: var(--wp--preset--color--black);

    --input--border: 2px solid transparent;
    --input--background: var(--wp--preset--color--white);
}


:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea) {
    box-sizing: content-box;
    width: calc(100% - 3rem);
    height: calc((1.5rem * var(--wp--custom--line-height--small)));
    border-radius: var(--wp--custom--border-radius--medium);
    border: var(--input--border);
    padding: 0.5rem 1rem;
    color: var(--c-input--text);
    background: var(--input--background);
}

input[type="date"], input[type="time"] {
    appearance: initial !important;
}

:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea):focus {
    outline-color: var(--wp--preset--color--primary);
}
:where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea)[aria-invalid="true"] {
    border-color: var(--wp--preset--color--primary);
}

textarea {
    resize: vertical; /* user can resize vertically, but width is fixed */
    height: auto;
}

select {
    -webkit-appearance: none;
    appearance: none;

    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="17" fill="none"><path fill="%23000" d="m13.176 9.459-5.763 5.763a.595.595 0 0 1-.825 0l-5.76-5.76-.824.825 5.76 5.76a1.794 1.794 0 0 0 2.474 0L14 10.284l-.824-.825ZM.829 7.083 6.592 1.32a.596.596 0 0 1 .824 0l5.76 5.76.825-.825L8.24.495a1.794 1.794 0 0 0-2.475 0L.004 6.258l.825.825Z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1.25em top 50%;
}

label, 
legend {
    display: inline-block;
    margin-bottom: 0.5rem;
    line-height: var(--wp--custom--line-height--small);
    color: var(--c-label--text);
}

label[for] {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
}

legend {
    font-family: var(--wp--preset--font-family--titillium-web);
    font-weight: 500;
}

fieldset {
    padding: 0;
    margin: 0;
    border: none;
}

form p {
    margin-bottom: 1em;
}

input[type="date"],
input[type="time"] {
    -webkit-appearance: textfield;
            appearance: textfield;
}




/* Contact Form 7 plugin
   ---------------------------------------------------------------------------------------------------- */

input[type=checkbox] + .wpcf7-list-item-label {
    font-weight: 400;
}

.wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-list-item {
    margin-left: 0 !important;
}

.wpcf7-acceptance label {
    display: flex;
    align-items: flex-start;
    column-gap: 0.25em;
}

.wpcf7 .wpcf7-submit:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.wpcf7 .wp-block-button .wpcf7-submit.wp-block-button__link {
    width: auto;
}

.wpcf7-not-valid-tip {
    font-size: 1rem !important;
    margin-top: 0.5em;
    margin-left: 0.25em;
    color: var(--c-notice--alert);
}

.wpcf7-not-valid-tip::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14"><path fill="%23B50000" d="M8.00685 0.375C8.44478 0.375 8.85143 0.625 9.07039 1L15.827 12.5C16.046 12.9063 16.046 13.375 15.827 13.75C15.608 14.1563 15.2014 14.375 14.7634 14.375H1.25025C0.781045 14.375 0.374398 14.1563 0.155434 13.75C-0.06353 13.375 -0.06353 12.9063 0.155434 12.5L6.91203 1C7.131 0.625 7.53764 0.375 8.00685 0.375ZM8.00685 4.375C7.56892 4.375 7.25612 4.71875 7.25612 5.125V8.625C7.25612 9.0625 7.56892 9.375 8.00685 9.375C8.4135 9.375 8.75758 9.0625 8.75758 8.625V5.125C8.75758 4.71875 8.4135 4.375 8.00685 4.375ZM9.00783 11.375C9.00783 10.8438 8.53862 10.375 8.00685 10.375C7.4438 10.375 7.00587 10.8438 7.00587 11.375C7.00587 11.9375 7.4438 12.375 8.00685 12.375C8.53862 12.375 9.00783 11.9375 9.00783 11.375Z"/></svg>');
    margin-right: 0.5rem;
    vertical-align: middle;
}

.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(2rem + 16px);
    position: relative;
}

:where(.wpcf7 form.sent .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output)::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14"><path fill="%23B50000" d="M8.00685 0.375C8.44478 0.375 8.85143 0.625 9.07039 1L15.827 12.5C16.046 12.9063 16.046 13.375 15.827 13.75C15.608 14.1563 15.2014 14.375 14.7634 14.375H1.25025C0.781045 14.375 0.374398 14.1563 0.155434 13.75C-0.06353 13.375 -0.06353 12.9063 0.155434 12.5L6.91203 1C7.131 0.625 7.53764 0.375 8.00685 0.375ZM8.00685 4.375C7.56892 4.375 7.25612 4.71875 7.25612 5.125V8.625C7.25612 9.0625 7.56892 9.375 8.00685 9.375C8.4135 9.375 8.75758 9.0625 8.75758 8.625V5.125C8.75758 4.71875 8.4135 4.375 8.00685 4.375ZM9.00783 11.375C9.00783 10.8438 8.53862 10.375 8.00685 10.375C7.4438 10.375 7.00587 10.8438 7.00587 11.375C7.00587 11.9375 7.4438 12.375 8.00685 12.375C8.53862 12.375 9.00783 11.9375 9.00783 11.375Z"/></svg>');
    position: absolute;
    left: 1rem;
}

.wpcf7 form.sent .wpcf7-response-output::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="%2346b450" d="M2 0H12C13.0938 0 14 0.90625 14 2V12C14 13.125 13.0938 14 12 14H2C0.875 14 0 13.125 0 12V2C0 0.90625 0.875 0 2 0ZM10.5312 5.53125H10.5C10.8125 5.25 10.8125 4.78125 10.5 4.46875C10.2188 4.1875 9.75 4.1875 9.46875 4.46875L6 7.96875L4.53125 6.5C4.21875 6.1875 3.75 6.1875 3.46875 6.5C3.15625 6.78125 3.15625 7.25 3.46875 7.53125L5.46875 9.53125C5.75 9.84375 6.21875 9.84375 6.53125 9.53125L10.5312 5.53125Z"/></svg>');
}
.wpcf7 form.invalid .wpcf7-response-output {
    border-color: #B50000;
}

.wpcf7 form .wpcf7-response-output {
    border-width: 1px;
    padding: 0.5em 1em;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--wp--custom--border-radius--regular);
}

/* custom radio button styling for contact form 7 */
.is-radio .wpcf7-form-control.wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.is-radio .wpcf7-form-control.wpcf7-radio input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}
.is-radio .wpcf7-form-control.wpcf7-radio .control-dummy {
    flex-shrink: 0;
    display:grid;
    place-items: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    border: var(--input--border);
    background: var(--input--background);
    margin-right: 0.5em;
}
.is-radio .wpcf7-form-control.wpcf7-radio .control-dummy::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    box-shadow: inset 0.75em 0.75em var(--c-input--focus);
    border-radius: 50%;
    transition: 180ms transform ease-in-out;
    transform: scale(0);    
}
.is-radio .wpcf7-form-control.wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label > .control-dummy::before {
    transform: scale(1);
}
.is-radio .wpcf7-form-control.wpcf7-radio .wpcf7-list-item-label {
    display: flex;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
}
.is-radio .wpcf7-form-control.wpcf7-radio span.wpcf7-list-item {
    width: auto;
}
.is-radio .wpcf7-form-control.wpcf7-radio span.wpcf7-list-item > label {
    display: flex;
    align-items: center;
}


/* custom checkbox styling for contact form 7 */
.wpcf7-form-control.wpcf7-checkbox > .wpcf7-list-item {
    display: block;
    position: relative;
    margin-bottom: 0.5em;
}
.wpcf7-form-control.wpcf7-checkbox > .wpcf7-list-item label {
    display: flex;
}
.wpcf7-form-control input[type=checkbox] {
    clip: rect(1px,1px,1px,1px);
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.wpcf7-form-control input[type=checkbox] + span::before {
    display: block;
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    top: 0.25em;
    left: 0;
    border-radius: var(--wp--custom--border-radius--small);
    border: var(--input--border);
    background: var(--input--background);
}
.wpcf7-form-control input[type=checkbox] + span::after {
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 5px;
    transform: rotate(-45deg);
    box-sizing: border-box;
    border: 2px solid transparent;
    border-top: 0;
    border-right: 0;
    width: 15px;
    height: 7px;
    content: "";
}
.wpcf7-form-control input[type=checkbox]:focus + span::before {
    outline: none;
}
.wpcf7-form-control input[type=checkbox]:checked + span::before {
    background: var(--input--background);
}
.wpcf7-form-control input[type=checkbox]:checked + span::after {
    visibility: visible;
    border-color: var(--wp--preset--color--black);
}
.wpcf7-form-control input[type=checkbox] + .wpcf7-list-item-label {
    margin-left: calc(24px + 0.5em);
    cursor: pointer;
}


/* focus styles for custom radio/checkbox */
.wpcf7-form-control input[type="radio"]:focus + .wpcf7-list-item-label > .control-dummy,
.wpcf7-form-control input[type="checkbox"]:focus + .wpcf7-list-item-label::before {
    border-color: var(--wp--preset--color--primary);
}




/* Hero Masking
   ---------------------------------------------------------------------------------------------------- */
.wp-block-cover.hero-with-mask .wp-block-cover__image-background {
    -webkit-mask-image: url(../images/hero-shape.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center right;

    mask-image: url(../images/hero-shape.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center right;
}


/* Hero Masking
   ---------------------------------------------------------------------------------------------------- */
.page .wp-block-cover.is-style-masked .wp-block-cover__image-background {
    -webkit-mask-image: url(../images/hero-cover-mask.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center right;

    mask-image: url(../images/hero-cover-mask.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center right;
}
.single-bh_project .wp-block-cover.is-style-masked .wp-block-cover__image-background {
    -webkit-mask-image: url(../images/project-cover-mask.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center right;

    mask-image: url(../images/project-cover-mask.svg);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center right;
}


/* Navigation Menu (responsive)
   ---------------------------------------------------------------------------------------------------- */
.site-header {
    padding: var(--wp--custom--spacing--gap-regular);
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--primary-lighter);
    font-weight: 700;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 4em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-bottom: 1em;
}
.wp-block-navigation__responsive-container-close {
    right: 1.5em;
    top: 1.5em;
}
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding: 0.25rem 0.75rem;
    border-radius: var(--wp--custom--border-radius--medium);
    transition: background-color 0.2s ease-in-out;
}

.wp-block-navigation.is-vertical {
    gap: var(--wp--custom--spacing--gap-small);
}

.wp-block-navigation {
    font-weight: 600;
    font-size: var(--wp--preset--font-size--large);
}


@media (min-width: 600px) and (max-width: 1019px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
        bottom: 0;
        display: none;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
    .wp-block-navigation.wp-block-navigation-is-layout-flex {
        gap: 0;
    }
}

@media (max-width: 1019px) {
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        width: 100%;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
        width: inherit;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
        padding: 0.625em 0.5em;
    }
    .wp-block-navigation .wp-block-navigation-item__content {
        width: inherit;
    }
    .wp-block-navigation .wp-block-buttons {
        width: 100%;
        margin: 1.5em 0 2em 0;

        .wp-block-button {
            flex-grow: 1;
        }
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, 
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
        gap: 0.5em;
    }
}

@media (min-width: 1020px) {
    .site-header .wp-block-navigation__container {
        gap: clamp(1em, 2vw, 2em);
    }
}


@media (min-width: 1100px) {
    .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
        background-color: var(--wp--preset--color--primary-lighter);
    }
    .wp-block-navigation__container {
        column-gap: 0.5em;
        row-gap: 1em;
    }
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none;
    }
}


/* Footer
   ---------------------------------------------------------------------------------------------------- */
.site-footer .wp-block-navigation {
    font-weight: 400;
    font-size: var(--wp--preset--font-size--small);
    gap: 0.5em;
}

.site-footer .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.site-footer .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    background-color: transparent;
    font-weight: 400;
    text-decoration: underline;
    transition: text-underline-offset 0.2s ease-in-out;
}

.site-footer .wp-block-group.is-vertical.is-layout-flex {
    row-gap: calc(0.4*var(--wp--custom--spacing--gap-small));
}

.site-footer .wp-block-group.is-vertical.is-layout-flex a {
    text-decoration: none;
}

.site-footer .wp-block-group.is-vertical.is-layout-flex a:hover {
    text-decoration: underline;
}

.site-footer .wp-block-group.alignwide.has-small-font-size {
    margin-block-start: 0.5rem;
    margin-bottom: 0.5rem;
}

.site-footer .is-style-card {
    padding: var(--wp--custom--spacing--gap-regular);
}