:root {
    --background: #FFFFFF;
    --foreground: #030303;
    --border-radius: 3px;
}

/* DARK MODE */

/* @media (prefers-color-scheme: dark) {
	:root {
		--background: #030303;
		--foreground: #FFFFFF;
	}
} */

/* GENERAL */

html {
    min-block-size: 100dvh;
    margin: 0;
}

body {
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
    color: var(--foreground);
    background-color: var(--background);
    padding: 0;
    margin: 0;
    min-block-size: 100dvh;
}

h1,
h2,
h3,
h4,
h5,
h6,
.sub-heading {
    font-family: 'Nunito Sans', Arial, Helvetica, sans-serif;
    text-wrap: balance;
}

.hide {
    display: none;
}

.screen-reader-text {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

/* FORMS AND DIALOG */

dialog,
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=date],
select,
textarea,
button {
    border-radius: var(--border-radius);
}

dialog {
    position: relative;
    inline-size: min(40rem, 100%);
    min-block-size: 6rem;
    padding-block: 0.8lh;
    padding-inline: 1.1em;
    border: 2px solid;
    border-radius: var(--border-radius);

    & .close {
        position: absolute;
        inset: 0 0 auto auto;
        display: inline-flex;
        place-items: center;
        place-content: center;
        inline-size: 2rem;
        block-size: auto;
        font-size: 1.3rem;
        aspect-ratio: 1;
        border: 0 none;
    }
}

/* LANDING */

.landing {
    display: grid;
    background-image: linear-gradient(45deg, #eaf7ff, #a5ddff);
    place-content: center;
    place-items: center;

    &>* {
        text-align: center;
        inline-size: min(100%, 60ch);
        margin-inline: auto;
    }
}

/* CANVASSING */

.canvassing {
    & button {
        cursor: pointer;
        border: 0 none;
        background-color: transparent;
        color: var(--foreground);

        &>svg {
            display: block;
            aspect-ratio: 1;
            inline-size: 1.5em;
        }
    }

    & section:has(> .street-list:empty) {
        display: none;
    }

    & .street:has(.name+.place) .name::after {
        content: ', ';
    }
}