/* Blinker font (jsDelivr / Fontsource static build — no variable axis),
   loaded via includes/partials/fonts.php's preconnect/preload hints.
   Only 400/600/700 are shipped, matching the weights actually used
   (font-normal/font-semibold/font-bold); font-medium (500) falls back
   to the browser's nearest-weight match since Blinker has no 500 cut. */
@font-face {
    font-family: 'Blinker';
    font-style: normal;
    font-display: block;
    font-weight: 400;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/blinker/files/blinker-latin-400-normal.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: 'Blinker';
    font-style: normal;
    font-display: block;
    font-weight: 600;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/blinker/files/blinker-latin-600-normal.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: 'Blinker';
    font-style: normal;
    font-display: block;
    font-weight: 700;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/blinker/files/blinker-latin-700-normal.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;
}
/* !important: Tailwind's own Preflight base styles set a font-family on
   html too, at the same specificity — without this it silently wins and
   overrides Blinker. */
html {
    font-family: 'Blinker', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Fullscreen map pages (home, embed-map) */
html, body {
    height: 100%;
    margin: 0;
}
body {
    background: #030712;
}
#map {
    position: absolute;
    inset: 0;
}
.mapboxgl-ctrl-logo {
    opacity: 0.6;
}
.mapboxgl-marker {
    cursor: pointer;
}
.mapboxgl-popup-close-button {
    color: #111827;
    padding-left: 4px;
    padding-right: 4px;
}

/* flag-icons country flags — consistent alignment/spacing next to text
   everywhere they're used (was 3 slightly different inline styles before
   the JS consolidation; harmless in flex contexts since vertical-align is
   ignored there). */
.fi {
    vertical-align: middle;
    margin-right: 0.35em;
}

/* Page chrome: dotted grid background + glow, logo gradient */
.bg-grid-glow {
    position: relative;
    isolation: isolate;
}
.bg-grid-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);

    background-size: 60px 60px;

    mask-image: radial-gradient(
        ellipse 70% 55% at 50% 0%,
        black 0%,
        rgba(0, 0, 0, .9) 30%,
        rgba(0, 0, 0, .35) 65%,
        transparent 100%
    );

    -webkit-mask-image: radial-gradient(
        ellipse 70% 55% at 50% 0%,
        black 0%,
        rgba(0, 0, 0, .9) 30%,
        rgba(0, 0, 0, .35) 65%,
        transparent 100%
    );
}
.bg-grid-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background: radial-gradient(
        ellipse 60% 40% at 50% 0%,
        rgba(45, 125, 225, .16),
        transparent 70%
    );
}
.logo-text-gradient {
    background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 50%, #96f7e4 50%, #009689 100%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position .35s ease;
}
a:hover > .logo-text-gradient {
    background-position: 100% 0%;
}

/* SALSA page telescope-scale scroller */
.salsa-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.salsa-scroll::-webkit-scrollbar {
    display: none;
}
.salsa-scroll {
    cursor: grab;
}
.salsa-scroll.salsa-dragging {
    cursor: grabbing;
}
.salsa-item {
    transition: transform 0.15s ease;
}
.salsa-item:hover {
    transform: translateY(-4px);
}
.salsa-ring {
    border-radius: 9999px;
    border: 3px solid transparent;
    background-image: linear-gradient(#030712, #030712), linear-gradient(90deg, #96f7e4, #009689);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.salsa-fill {
    border-radius: 9999px;
    background: linear-gradient(90deg, #96f7e4, #009689);
}

/* Gallery page: full-viewport horizontal photo wall of square tiles,
   draggable with the mouse. Row count is set as a CSS var by JS (based on
   viewport height) so grid-auto-columns can derive a matching tile width,
   keeping every tile perfectly square regardless of row count. */
#gallery-scroll {
    position: fixed;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: #030712;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
#gallery-scroll::-webkit-scrollbar {
    display: none;
}
#gallery-scroll.gallery-dragging {
    cursor: grabbing;
}
#gallery-grid {
    height: 100vh;
    height: 100dvh;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--gallery-rows, 4), 1fr);
    grid-auto-columns: calc(100vh / var(--gallery-rows, 4));
    grid-auto-columns: calc(100dvh / var(--gallery-rows, 4));
    gap: 3px;
}
.gallery-tile {
    position: relative;
    display: block;
    overflow: hidden;
    background: #111827;
    padding: 0;
    border: 0;
    cursor: pointer;
}
.gallery-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease, transform 1s ease;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}
.gallery-tile img.gallery-loaded {
    opacity: 1;
}
.gallery-tile:hover img {
    transform: scale(1.06);
}

/* Scope Buddies page: dual-thumb range slider built from two overlapping
   native <input type="range"> elements — each input's own track is made
   transparent, only its thumb is visible, and .range-slider-fill (a plain
   div positioned by JS) draws the highlighted span between the two thumbs. */
.range-slider {
    position: relative;
    height: 20px;
}
.range-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    margin-top: -2px;
    border-radius: 9999px;
    background: #1f2937;
}
.range-slider-fill {
    position: absolute;
    height: 4px;
    border-radius: 9999px;
    background: #14b8a6;
}
.range-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}
.range-thumb::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
    height: 20px;
}
.range-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: 9999px;
    background: #14b8a6;
    border: 2px solid #030712;
    cursor: pointer;
}
.range-thumb::-moz-range-track {
    background: transparent;
    height: 20px;
    border: none;
}
.range-thumb::-moz-range-thumb {
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #14b8a6;
    border: 2px solid #030712;
    cursor: pointer;
}