@tailwind base;
@tailwind components;
@tailwind utilities;

/* Self hosted, so no visitor data goes to a font CDN */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-rWipWn6.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-jKHUF_e.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/plus-jakarta-sans-latin-O3xqIJy.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/plus-jakarta-sans-latin-ext-S2YpVqh.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer base {
    body {
        @apply bg-slate-50 text-gray-700 antialiased;
    }

    h1, h2, h3 {
        @apply font-display;
    }
}

/* Shared building blocks, so pages do not repeat long class lists */
@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-x-2 rounded-full px-5 py-2.5 text-sm font-semibold transition focus:outline-none focus-visible:ring-4;
    }

    .btn-primary {
        @apply btn bg-victoria-600 text-white shadow-sm hover:bg-victoria-700 focus-visible:ring-victoria-300;
    }

    .btn-secondary {
        @apply btn bg-white text-gray-900 ring-1 ring-inset ring-gray-200 hover:bg-gray-50 focus-visible:ring-gray-200;
    }

    .btn-danger {
        @apply btn bg-red-600 text-white shadow-sm hover:bg-red-700 focus-visible:ring-red-300;
    }

    .btn-danger-ghost {
        @apply btn text-red-600 ring-1 ring-inset ring-red-200 hover:bg-red-50 focus-visible:ring-red-200;
    }

    .btn-sm {
        @apply px-3.5 py-1.5 text-xs;
    }

    .form-input {
        @apply block w-full rounded-xl border-0 bg-white px-3.5 py-2.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-victoria-500 sm:text-sm sm:leading-6;
    }

    .form-label {
        @apply block text-sm font-medium leading-6 text-gray-900;
    }

    .alert {
        @apply rounded-2xl p-4 text-sm ring-1 ring-inset;
    }

    .alert-error {
        @apply alert bg-red-50 text-red-800 ring-red-600/20;
    }

    .alert-success {
        @apply alert bg-emerald-50 text-emerald-800 ring-emerald-600/20;
    }

    .alert-info {
        @apply alert bg-victoria-50/60 text-gray-700 ring-victoria-600/10;
    }

    .card {
        @apply rounded-2xl bg-white shadow-soft ring-1 ring-gray-900/5;
    }

    .card-interactive {
        @apply card transition duration-300 hover:-translate-y-0.5 hover:shadow-lift;
    }

    .section-title {
        @apply font-display text-xl font-bold tracking-tight text-gray-900 sm:text-2xl;
    }

    .eyebrow {
        @apply text-xs font-semibold uppercase tracking-wider text-victoria-600;
    }

    .chip {
        @apply inline-flex items-center rounded-full bg-victoria-50 px-3 py-1 text-xs font-medium text-victoria-700 ring-1 ring-inset ring-victoria-600/10;
    }

    .chip-light {
        @apply inline-flex items-center rounded-full bg-white/15 px-3 py-1 text-xs font-medium text-white ring-1 ring-inset ring-white/25 backdrop-blur;
    }

    .stat-tile {
        @apply card px-5 py-4;
    }

    .stat-tile dt {
        @apply text-xs font-medium uppercase tracking-wide text-gray-500;
    }

    .stat-tile dd {
        @apply mt-1 font-display text-lg font-bold text-gray-900;
    }

    .nav-link {
        @apply rounded-full px-4 py-2 text-sm font-semibold text-gray-700 transition hover:bg-victoria-50 hover:text-victoria-700;
    }

    .nav-link-active {
        @apply bg-victoria-50 text-victoria-700;
    }
}

/* Keeps the Leaflet panes (z-index 400+) below the sticky header */
#map {
    isolation: isolate;
}

#map .leaflet-div-icon {
    width:0;
    height:0;
    border: 0;
    padding: 0;
}

#map .leaflet-div-icon b {
    display:inline-block;
    padding: 3px;
    border: 1px solid #666;
    border-radius: 3px;
    background:#fff;
    transform:translate(-50%, -50%);
}

.leaflet-div-icon2
{
    background:red;
    border:5px solid rgba(255,255,255,0.5);
    color:blue;
    font-weight:bold;
    text-align:center;
    border-radius:50%;
    line-height:30px;
}

.fis {
    border-radius:50%;
}

.wysiwyg-no-padding p {
    margin-top: 0;
    margin-bottom: 0;
}

.prose ul {
    list-style-position: inside;
    padding-left: 0;
}

.prose li {
    margin-left: 0;
}