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


 
.site-header {
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);
    padding-bottom: var(--wp--custom--spacing--gap-small);
    background-color: var(--wp--preset--color--white);
}

.has-global-padding > .wp-block-query.alignfull {
    margin: 0;
}



/* SITE HEADER
    ==================================================================================================== */

.site-header > :first-child {
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--wp--custom--spacing--gap-small);
    max-width: var(--wp--custom--size--wide);
    margin-left: auto;
    margin-right: auto;
}

.site-header .wp-block-buttons {
    margin-block-start: 0;
}

.site-header {
    position: sticky;
    top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
    z-index: 99;
}



/*  NAVIGATION
   ==================================================================================================== */

.site-header .wp-block-navigation-item.current-menu-item > a::before {
    content: "";
    width: 11px;
    height: 11px;
    background-color: var(--wp--preset--color--dark-grey);
    border: 1px solid var(--wp--preset--color--dark-grey);
    transition: border-color 0.1s ease-in 5ms, background-color 0.1s ease-in 50ms;    position: absolute;
    bottom: 0.6rem;
    left: -1.25rem;
    border-radius: 100%;
}

.site-header .wp-block-navigation-item > a::before {
    content: "";
    width: 11px;
    height: 11px;
    border: 1px transparent;
    transition: border-color 0.1s ease-in 50ms, background-color 0.1s ease-in 50ms;
    position: absolute;
    bottom: 0.6rem;
    left: -1.25rem;
    border-radius: 100%;
}
.site-header .wp-block-navigation-item > a:where(:hover)::before {
    background-color: var(--wp--preset--color--secondary-100);
    border: 1px solid var(--wp--preset--color--dark-grey);
    transition: border-color 0.1s ease-in 50ms, background-color 0.1s ease-in 50ms;
}


.wp-block-navigation {
    gap: 3rem;
    row-gap: var(--wp--custom--spacing--gap-small);
}

.wp-block-navigation__container > :last-child,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container ul:last-child {
    background-color: var(--wp--preset--color--secondary-100);
    border-radius: 30px; 
    padding: 8px 14px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    padding: 0;
}

.site-header :where(.wp-block-social-links .wp-social-link a) {
    padding: 0;
}

.wp-block-navigation-item__label:has(> img) {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    align-items: center;
}

.wp-block-navigation {
    font-family: var(--wp--preset--font-family--lato);
    font-weight: 700;
}

.site-footer .wp-block-navigation {
    font-size: var(--wp--preset--font-size--x-small);
    font-weight: 400;
    gap: var(--wp--custom--spacing--gap-small);
}

.site-footer .wp-block-navigation-item > a:where(:hover) {
    text-decoration: underline;
}


.wp-block-navigation__responsive-container-content {
    gap: var(--wp--custom--spacing--gap-small);
    
}

.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
    justify-content: space-between;
}

.wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content::before {
    content: "";
}


@media (min-width: 600px) {
    .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-submenu .wp-block-navigation-submenu__toggle {
        display: none;
    }
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-submenu {
        flex-direction: column;
        align-items: flex-start;
    }
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        min-width: calc(200px + 1rem);
        height: auto !important;
        padding-left: 1rem;
        border: none;
    }    
}

@media only screen and (max-width: 605px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
    .wp-block-navigation.items-justified-center .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-submenu {
        align-items: var(--navigation-layout-justification-setting, initial) !important;
    }

    .wp-block-navigation__responsive-container {
        left: unset;
        box-shadow: 4px 4px 20px 0px #A69A7733;
    }
    .wp-block-navigation__responsive-container.is-menu-open {
        padding-right: var(--wp--style--root--padding-right);
        padding-left: var(--wp--style--root--padding-left);
        padding-top: 2rem;
    }
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
        gap: 1.5rem;
    }
}

.wp-block-navigation__responsive-container {
    left: unset;
}



/* SITE LOGO
   ==================================================================================================== */

.wp-block-site-logo {
    width: clamp(164px, 15vw, 220px);
}



/* FORMS & INPUT FIELDS 
   ==================================================================================================== */

   
/* 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-100);
    --c-label--text: var(--wp--preset--color--black);

    --input--border: 1px solid #8c8f94;
    --input--background: var(--wp--preset--color--white);
}

:where(input[type="text"], 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--small);
    border: var(--input--border);
    padding: 0.5rem 1.5rem;
    font-size: var(--wp--preset--font-size--regular);
    line-height: var(--wp--custom--line-height--small);
    color: var(--c-input--text);
    background: var(--input--background);
    font-family: var(--wp--preset--font-family--lato);
}

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

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea):focus {
    outline: 0;
    border-color: var(--wp--preset--color--black);
    background-color: var(--c-input--focus);
    box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1);
}
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], select, textarea)[aria-invalid="true"] {
    border-color: var(--c-notice--alert);
}

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--lato);
    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
   ---------------------------------------------------------------------------------------------------- */

.wpcf7 .wp-block-columns {
    row-gap: 0;
    margin-bottom: 0;
}

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 .optional {
    font-weight: 400;
}

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

.wpcf7 p {
    margin-bottom: 1rem !important;
}

.wpcf7-form p {
    margin-block-start: 10px !important;
}

.wpcf7 .wp-block-group {
    display: flex;
    gap: var(--wp--custom--spacing--basic);
    flex-wrap: nowrap;
}

.wpcf7 .wp-block-group p {
    flex-basis: 50%;
}

@media (max-width: 800px) {
    .wpcf7 .wp-block-group {
        display: block;
    }
}


/* 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 {
    background-color: var(--c-input--focus);
}



/* SINGLE POST
   ==================================================================================================== */

.single-post .featured-image-wrapper {
    position: relative;
}

.single-post .wp-block-wxblock-sharing {
    position: absolute;
    bottom: -32px;
    left: 1em;
    z-index: 2;
}

@media (min-width: 1020px) {
    .single-post .wp-block-wxblock-sharing {
        left: 64px;
    }
}