@import url("https://use.typekit.net/dqr0gee.css");

:root {
    --sw-container-height: 100dvh;
    --sw-map-height: 100dvh;
    --sw-font-size: 14px;
    --sw-search-target-bg-color: var(--sw-dark);
    --sw-layerswitch2-layer-border-radius: 0.5rem !important;
    --sw-layerswitch2-input-toggle-width: 16px !important;
    --sw-layerswitch2-input-toggle-height: 16px !important;
    --sw-layerswitch2-input-toggle-focus-border-color: var(--sw-dark) !important;
    --sw-layerswitch2-input-toggle-active-border-color: var(--sw-dark) !important;
    --sw-layerswitch2-input-toggle-active-bg-color: var(--sw-dark) !important;
}

* {
    margin: 0;
    box-sizing: border-box;
  }
  
body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: "proxima-nova", Arial, sans-serif;
}

p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font-weight: 800;
}

.septima-logo {
    position: absolute;
    bottom: 1.5rem;
    left: 2rem;
    z-index: 1;

    .sr-only {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    svg {
        width: 100px;    
        height: auto;
        @media (max-width: 620px) {
            width: 80px;
        }
    }
}

header {
    width: max-content;
    background-color: var(--sw-primary);
    color: #fff;
    padding: 1.25rem 1.25em;
    position: fixed;
    z-index: 1;
    top: 3rem;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 0 1px #0e3f7e0a, 0 1px 1px -.5px #2a33450a, 0 3px 3px -1.5px #2a33460a, 0 6px 6px -3px #2a33460a, 0 12px 12px -6px #0e3f7e0a, 0 24px 24px -12px #2037553d;
    border-radius: 1.5rem;

    @media (max-width: 1728px) {
        top: 2rem;
        max-width: 100%;
        flex-wrap: wrap;
    }

    @media (max-width: 1440px) {
        width: auto;
        top: 1rem;
        left: 1rem;
        right: 1rem;
        transform: none;
    }

    @media (max-width: 620px) {
        flex-wrap: nowrap;
        transform: none;
        border-radius: 0;
        gap: 1rem;
        max-width: none;
        width: auto;
        left: 0;
        right: 0;
        top: 0;
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 0;
    }

    .logo {
        line-height: 1.1;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0 0.5rem;

        h1 {
            font-size: 1.325rem;
            letter-spacing: -0.2px;

            @media (max-width: 620px) {
                font-size: 1.65rem;
                line-height: 1.3;
            }
        }

        @media (max-width: 620px) {
            text-align: center;
            justify-content: center;
        }

        svg {
            background: #333;
            padding: 0.5rem;
            box-sizing: content-box;
            border-radius: 0.5rem;
            fill: white;

            @media (max-width: 620px) {
                display: none;
            }
        }

        @media (max-width: 620px) {
            padding: 0 1rem;
            width: auto;
        }

        small {
            opacity: 0.6;
        }
    }
}

.septimasearch {
    width: 500px !important;
    border: none !important;
    color: #333 !important;
    box-shadow: var(--sw-box-shadow);
    border-radius: var(--sw-border-radius);
    transform: none !important;
    position: relative;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    
    @media (max-width: 620px) {
        width: auto !important;
    }
    
    .ssSearchResult {
        position: absolute !important;
        top: 120%;
        border-radius: 6px;
        box-shadow: var(--sw-box-shadow);
    }

    ul.better-autocomplete {
        li.result {
            background-color: white !important;
            border-top: 1px solid var(--sw-border-color) !important;
        }

        li.result.highlight {
            background-color: var(--sw-light) !important;
        }
    }

    .ssSearchHeader .ssSearchBackground {
        padding-left: 12px !important;
        height: auto !important;
        line-height: unset !important;
    }
}

.widget-search-spacer {
    display: none;
}

.septimasearch.ssActive {
    border-radius: var(--sw-border-radius) !important;
}

.widget-detached {
    @media (max-width: 620px) {
        pointer-events: auto;
        padding: 0 1rem;
        
        &:has(.sw-layerswitch) {
            overflow: auto;
        }
    }
}

.sw-layerswitch {
    bottom: unset !important;
    background-color: transparent !important;
    box-shadow: none !important;
    
    @media (max-width: 620px) {
        padding: 0;
        inset: 0 !important;
        transform: none !important;
    }

    .sw-layerswitch-group-list {
        display: flex;
        gap: 1rem;
    }

    .sw-layerswitch-layer {
        background: white;
        box-shadow: var(--sw-search-active-box-shadow), var(--sw-box-shadow);
    }

    .sw-layerswitch-layer-options-popover {
        top: 2em !important;
        left: auto !important;
        right: 0 !important;
    }
}

.widget-contains-map .widget-map-controls-position-bottom-right .widget-map-buttoncontainer {
    bottom: calc(var(--sw-spacer) * 14) !important;
    right: calc(var(--sw-spacer) * 2) !important;
}

.widget-contains-map .widget-map-controls-position-bottom-right .widget-zoom {
    bottom: calc(var(--sw-spacer) * 4) !important;
    right: calc(var(--sw-spacer) * 2) !important;
}

@media (max-width: 620px) {
    .widget-contains-map .widget-map-controls-position-bottom-right {
        .widget-map-buttoncontainer {
            bottom: calc(var(--sw-spacer)*4) !important;
            right: calc(var(--sw-spacer)*2) !important;
        }
    }
}