:root {
    --color-background: rgb(247 247 247);
    --color-background-light: rgb(255 255 255);
    --color-separator: rgb(230 230 230);
    --color-primary: rgb(0 153 204);
    --color-text: rgb(40 40 40);
    --color-text-light: rgb(40 40 40 / 0.65);
    --color-text-lightest: rgb(40 40 40 / 0.35);
    --color-backdrop: rgb(0 0 0 / 0.5);

    --font-size-base: 1rem;
    --font-size-small: calc(0.85 * var(--font-size-base));
    --font-size-smaller: calc(0.75 * var(--font-size-base));

    --line-height-small: 1.375rem;

    --font-family-heading: 'Co Headline';
    --font-family-button: 'Co Headline';

    --label-border-radius: 0.625rem;
    --label-vertical-padding: 0.25rem;
    --label-horizontal-padding: calc(var(--label-vertical-padding) * 2);

    --activity-list-scroll-gap: 1.5rem;

    --content-padding-sm: 0.5rem;
    --content-padding-lg: 1.5rem;
}


@font-face {
    font-family: 'Co Headline';
    src: url('../fonts/CoHeadline-Light.woff2') format('woff2'),
        url('../fonts/CoHeadline-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Co Headline';
    src: url('../fonts/CoHeadline-Bold.woff2') format('woff2'),
        url('../fonts/CoHeadline-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Co Headline';
    src: url('../fonts/CoHeadline-Regular.woff2') format('woff2'),
        url('../fonts/CoHeadline-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova Regular';
    src: url('../fonts/proximanova-regular-webfont.woff2') format('woff2'),
        url('../fonts/proximanova-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Proxima Nova Regular', 'sans-serif';
    margin: 0;
    padding: 0;
}

.klimahandledag-logo {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 4rem;
    z-index: 999;
}

#map-filters {
    position: absolute;
    z-index: 2000;
    top: 1.25rem;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.17, 0.84, 0.44, 1.00) 0.15s;
    background-color: var(--color-background);
    padding: 1.75rem;
    border-top-right-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    max-width: min(50vw, 20rem);
    box-shadow: 2px 2px 2px -1px rgba(0, 153, 204, 0.1), 0px 2px 5px -1px rgba(0, 0, 0, 0.1);
}

#map-filters.map-filters-visible {
    transform: translateX(0);
}

#map-filters .filter-group-list {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

#map-filters .filter-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

#map-filters .close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}

#map-filters .close-btn svg {
    color: var(--color-text-light);
    width: 1rem;
    height: 1rem;
    transition: 0.5s all ease;
    transform: scale(1);
}

#map-filters .close-btn svg:hover {
    color: var(--color-primary);
    transform: scale(1.2);
}

#map-filters h2 {
    font-family: var(--font-family-heading);
    font-size: 1rem;
    font-weight: 400;
}

#map-filters input[type="checkbox"] {
    display: none;
}

#map-filters input[type="checkbox"]+label {
    color: var(--color-text-lightest);
    border: 1px solid var(--color-text-lightest);
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
    transition: all 0.1s cubic-bezier(0.17, 0.84, 0.44, 1.00);
}

@media screen and not (hover:hover) {
    #map-filters input[type="checkbox"]+label {
        color: var(--color-background-light);
        background-color: rgb(from var(--color-text-lightest) r g b / 0.2);
        border: 1px solid rgb(from var(--color-text-lightest) r g b / 0.2);
    }
}

@media screen and (hover:hover) {
    #map-filters input[type="checkbox"]+label:hover {
        color: var(--color-background-light);
        border: 1px solid rgb(from var(--color-text-lightest) r g b / 0.2);
        background-color: rgb(from var(--color-text-lightest) r g b / 0.2);
    }
}

#map-filters input[type="checkbox"]:checked+label {
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

@media screen and not (hover:hover) {
    #map-filters input[type="checkbox"]:checked+label {
        color: var(--color-background-light);
        background-color: var(--color-primary);
    }
}

@media screen and (hover:hover) {
    #map-filters input[type="checkbox"]:checked+label:hover {
        color: var(--color-background-light);
        background-color: var(--color-primary);
    }

    #map-filters .filter-group:has(input[type="checkbox"]:checked):not(:has(input[type="checkbox"]:checked ~ input[type="checkbox"]:checked)) input:checked+label:hover {
        color: var(--color-primary);
        background-color: inherit;
    }
}

#map-filters .map-filters-note {
    padding-top: 1.5rem;
}

#map-filters .map-filters-note p {
    color: var(--color-text-light);
    font-style: italic;
    font-size: 0.85rem;
    line-height: 1;
    margin: 0;
    text-wrap: pretty;
}

#map-filters-btn {
    position: absolute;
    top: 1.25rem;
    left: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    color: var(--color-background);
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 0.75rem;
    z-index: 999;
    transition: all 0.25s cubic-bezier(0.17, 0.84, 0.44, 1.00);
}

@media screen and (hover:hover) {
    #map-filters-btn:hover {
        background-color: rgb(from var(--color-primary) r g b / 0.25);
    }
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

#activity-dialog {
    max-width: min(60ch, 80vw);
    max-height: 80vh;
    border-radius: 1rem;
    border: 0;
    background-color: var(--color-background);
    overflow: hidden;
}

#activity-dialog .content {
    padding: var(--content-padding-sm);
    color: var(--color-text);
    max-height: calc(80vh - var(--content-padding-sm) * 2);
    overflow: auto;
    padding-bottom: 1rem;
}

@media screen and (min-width: 500px) {
    #activity-dialog .content {
        padding: var(--content-padding-lg);
        max-height: calc(80vh - var(--content-padding-lg) * 2);

    }
}

#activity-dialog .activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--activity-list-scroll-gap);
    padding-bottom: var(--content-padding);
}

#activity-dialog .activity-list .activity-item:not(:last-child) {
    border-bottom: 2px solid var(--color-separator);
    padding-bottom: 1.5rem;
}

#activity-dialog p {
    margin: 0;
}

#activity-dialog a {
    font-family: var(--font-family-button);
    color: var(--color-primary);
    font-weight: 100;
    text-decoration: none;
}

#activity-dialog a:hover {
    text-decoration: underline;
}

#activity-dialog h2 {
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3em;
    margin: 1em 0 0.5em 0;
}

#activity-dialog h3 {
    font-size: var(--font-size-small);
    font-weight: 400;
    color: var(--color-text-light);
    line-height: var(--line-height-small);
    margin: 1rem 0 0.5em 0;
}

#activity-dialog .close-modal {
    background-color: transparent;
    border: 0;
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    outline: none;
}

#activity-dialog .close-modal svg {
    color: var(--color-text-light);
    width: 1rem;
    height: 1rem;
    transition: 0.5s all ease;
    transform: scale(1);
}

#activity-dialog .close-modal svg:hover {
    color: var(--color-primary);
    transform: scale(1.2);
}

#activity-dialog::backdrop {
    background: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#activity-dialog .activity-labels {
    display: flex;
    gap: 1em;
}

#activity-dialog .activity-labels .activity-label {
    font-size: var(--font-size-smaller);
    color: var(--color-text-light);
    padding: var(--label-vertical-padding) var(--label-horizontal-padding);
    border: 1px solid var(--color-text-light);
    border-radius: var(--label-border-radius);
}

#activity-dialog .activity-date-and-time {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

#activity-dialog .activity-date, #activity-dialog .activity-time, #activity-dialog .activity-location {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--color-text-light);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

#activity-dialog .activity-location {
    margin-bottom: 1rem;
}

#activity-dialog .activity-location svg {
    align-self: flex-start;
}

#activity-dialog .activity-location .activity-location-address-zip-city {
    display: inline-flex;
    gap: 0.33em;
}

#activity-dialog .contact-email {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

#activity-dialog .contact-email svg {
    color: var(--color-primary);
}

#activity-dialog .link-button-container {
    margin-top: 2rem;
}

#activity-dialog .link-button-container .link-button {
    display: inline-block;
    text-align: center;
    color: var(--color-background);
    font-family: var(--font-family-button);
    font-weight: 400;
    line-height: 1.25rem;
    text-decoration: none;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: .75rem;
    padding: .75rem 2rem;
    transition: all .25s;
}

#activity-dialog .link-button-container .link-button:hover {
    color: var(--color-primary);
    background-color: transparent;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
    }

    40% {
        transform: translate(-50%, -30px);
    }

    60% {
        transform: translate(-50%, -15px);
    }
}

#activity-dialog #scroll-indicator {
    position: absolute;
    display: flex;
    bottom: 1rem;
    left: 50%;
    width: 2rem;
    height: 2rem;
    background-color: var(--color-background-light);
    padding: 0.5rem;
    box-shadow: 0px 2px 2px -1px rgba(0, 153, 204, 0.1), 0px 2px 5px -1px rgba(0, 0, 0, 0.1);
    opacity: 1;
    visibility: visible;
    border-radius: 9999px;
    aspect-ratio: 1;
    animation: bounce 2s infinite;
    transform: translateX(-50%);
    transition: all ease-out .25s;
}

#activity-dialog #scroll-indicator svg {
    color: var(--color-text-light);
    width: 100%;
    height: 100%;
}

#activity-dialog #scroll-indicator.hidden {
    opacity: 0;
    visibility: hidden;
}

#activity-dialog .activity-list .scroll-sentinel {
    height: 0;
    margin-bottom: calc(var(--activity-list-scroll-gap) * -1);
}