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



/* Apply a standard transition between the pages – a crossfade */
@view-transition {
    navigation: auto;
}
/* Turn off the fade duration only for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation-duration: 0s !important;
	}
}



/* SITE HEADER & NAVIGATION
==================================================================================================== */

/* Keep mobile/overlay navigation active up to 959px. From 960px Core's existing min-width: 600px desktop rules apply again */
@media (min-width: 600px) and (max-width: 959px) {

	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (min-width: 960px) {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 999;
        isolation: isolate;
    }
}



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

form {
    --c-notice--alert: #B50000;
    --c-notice--attention: var(--wp--preset--color--copytext);
    --c-notice--success: var(--wp--preset--color--copytext);

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

    --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;
    color: var(--c-input--text);
    background: var(--input--background);
}

input[type="date"], input[type="time"] {
    appearance: initial !important;
}
input[type="number"] {
    padding-right: 0;
    width: calc(100% - 1.5rem);
}

: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--copytext);
    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;
}

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

form p {
    margin-bottom: 1em;
}

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