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



/* SPECIAL FRONTEND GRID PATTERN 
   ==================================================================================================== */
.pattern-special-grid {
    --icon-size: 2em;
}
.pattern-special-grid .wp-block-media-text {
    column-gap: 0.5em;
    grid-template-columns: var(--icon-size) auto !important;
}
.wp-block-media-text>.wp-block-media-text__media {
    max-width: var(--icon-size);
}

@media (max-width: 799px) {
    .pattern-special-grid .wp-block-image {
        aspect-ratio: 4/3;
    }
    .pattern-special-grid .wp-block-image img {
        height: 100%;
        object-fit: cover;
    }
}

@media (min-width: 800px) {
    .pattern-special-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: clamp(2em, 4vw, 4em);
        row-gap: 2em;
    }
    .pattern-special-grid .wp-block-image {
        grid-column: 2;
        grid-row-start: 2;
        grid-row-end: 4;
    }
    .pattern-special-grid > .wp-block-media-text:nth-child(even) {
        grid-column: 1;
    }
    .pattern-special-grid > .wp-block-media-text:nth-child(odd) {
        grid-column: 3;
    }
    .pattern-special-grid > .wp-block-media-text:nth-last-child(1) {
        grid-column: 2;  
        margin-top: calc(-1 * (var(--icon-size)));
    }
    .pattern-special-grid > .wp-block-media-text:nth-last-child(2) {
        grid-column: 3;
        transform: translateX(calc(-1 * (var(--icon-size))));
    }
    .pattern-special-grid > .wp-block-media-text:nth-last-child(3) {
        transform: translateX(var(--icon-size));
    }

    .pattern-special-grid > *:nth-child(2) {
        transform: translateX(var(--icon-size));
    }
    .pattern-special-grid > *:nth-child(3) {
        transform: translateX(calc(-1 * var(--icon-size)));
    }
}



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

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

form p {
    margin-bottom: 1em;
}

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