/* Newsletter Sign-up */

/* General flex layout, single-column as base */
#mc_embed_shell #mc_embed_signup_scroll {
    display: flex;
    flex-direction: column;
    gap: var(--zero-point-five-spacer);
}
/* De-style everything first with no priority */
#mc_embed_shell input[type="email"],
#mc_embed_shell input[type="submit"] {
    appearance: none;
    background: none;
    padding: 0;
    margin: 0;
    border: 0;
    font: inherit;
    line-height: 1;
    width: fit-content;
    height: fit-content;
    border-radius: 0 !important;
    color: inherit;
}
/* Re-style selectively as a base */
#mc_embed_shell input[type="email"] {
    border-bottom: 1px solid;
}
#mc_embed_shell input[type="submit"] {
    border: 1px solid;
    padding: var(--zero-point-five-spacer);
}
/* Remove padding/margins on inline messages so that they fall back on flex settings */
#mc_embed_shell .mce_inline_error {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    color: inherit !important;
    width: 100%;
    font: inherit !important;
}
/* Default field group styles, basic */
#mc_embed_shell .mc-field-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--zero-point-five-spacer);
}

/* Homepage/Index */
.index {
    /* Applies to both div 'header' and li items */
    .name {
        width: 100%;
        min-width: 300px;
        max-width: 300px;
    }
    .medium,
    .location,
    .model,
    .offerings,
    .practice,
    .steward,
    .incorporation {
        width: 250px;
        min-width: 250px;
        max-width: 250px;
    }
    .header {
        .medium,
        .location,
        .model,
        .offerings,
        .practice,
        .steward,
        .incorporation {
            overflow: visible;
        }
    }
    /* ^^^ */
    .header { 
        /* Prevent independent scrolling */
        pointer-events: none;
        button, ul {
            pointer-events: all !important;
        }
        ul {
            max-height: 50dvh;  
            overflow: scroll;
        }
    }
    > ul {
        width: 100%;
        li {
            &&:hover {
                opacity: 0.85;
                a {
                    text-decoration: underline;
                    text-decoration-thickness: 1px;
                    text-decoration-style: solid;
                    text-underline-offset: 4px;
                }
            }
            /* Colors — position among currently-visible rows is tracked in
               JS (see updateRowColors() in home-index.php) and written as
               one of these classes, so the cycle restarts cleanly whenever
               filtering hides some. (Plain :nth-child(of S) doesn't reliably
               re-run for sibling rows when only one sibling's class changes.) */
            &&.color-1 {
                background-color: var(--wp--preset--color--purple);
            }
            &&.color-2 {
                background-color: var(--wp--preset--color--green) !important;
            }
            &&.color-3 {
                background-color: var(--wp--preset--color--orange) !important;
            }
            &&.color-4 {
                background-color: var(--wp--preset--color--yellow) !important;
            }
            &&.color-5 {
                background-color: var(--wp--preset--color--seafoam) !important;
            }
            &&.color-6 {
                background-color: var(--wp--preset--color--teal) !important;
            }
            width: fit-content;
            min-width: 100%;
            div {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &&.expanded {
                    white-space: unset;
                }
            }
            /* Make space for 'Member Owned' bug */
            &&[data-member-owned="1"] {
                .name {
                    padding-right: 120px !important;
                    button {
                        right: 70px !important;
                    }
                    svg {
                        position: absolute;
                        top: 13px;
                        right: var(--one-point-five-spacer);
                    }
                }
            }
        }
    }
    li[data-filter-taxonomy]:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    button[data-clear-filter] {
        background-color: var(--wp--preset--color--black);
        color: var(--wp--preset--color--white);
        border-color: var(--wp--preset--color--black);
        padding: var(--zero-point-five-spacer);
        width: 15px;
        height: 100%;
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
}

/* Styling block separators */
hr:not(.has-background) {
    background-color: transparent;
    border-width: 0 0 1px 0;
    border-style: dashed;
    border-color: var(--wp--preset--color--black);
}

/* Homepage sidebar */
#sidebar .listings ul li {
    &&:nth-child(6n + 1) {
        background-color: var(--wp--preset--color--purple);
    }
    &&:nth-child(6n + 2) {
        background-color: var(--wp--preset--color--green) !important;
    }
    &&:nth-child(6n + 3) {
        background-color: var(--wp--preset--color--orange) !important;
    }
    &&:nth-child(6n + 4) {
        background-color: var(--wp--preset--color--yellow) !important;
    }
    &&:nth-child(6n + 5) {
        background-color: var(--wp--preset--color--seafoam) !important;
    }
    &&:nth-child(6n + 6) {
        background-color: var(--wp--preset--color--teal) !important;
    }
}

.double-tap {
    touch-action: manipulation;
    &&::selection {
        background-color: transparent;
        color: inherit;
    }
}