/* aroundme.ca — handcrafted bits Tailwind doesn't cover */

:root {
    --pin-shadow: 0 6px 16px -4px rgb(0 0 0 / .35);
}

/* Tailwind utility classes like `grid` / `flex` override the UA default for
 * the `hidden` HTML attribute. Force [hidden] to actually hide.            */
[hidden] { display: none !important; }

/* Map base */
.maplibregl-canvas { outline: none; }

.maplibregl-popup-content {
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 30px -6px rgb(0 0 0 / .25);
    background: rgb(255 255 255 / .98);
    color: #0f172a;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
    max-width: 320px !important;
}
.dark .maplibregl-popup-content {
    background: rgb(15 23 42 / .96);
    color: #f1f5f9;
}
.maplibregl-popup-tip { border-top-color: rgb(255 255 255 / .98) !important; }
.dark .maplibregl-popup-tip { border-top-color: rgb(15 23 42 / .96) !important; }
.maplibregl-popup-close-button {
    color: inherit;
    opacity: .5;
    padding: 6px 8px;
}
.maplibregl-popup-close-button:hover { opacity: 1; background: transparent; }

.maplibregl-ctrl-group {
    background: rgb(255 255 255 / .9) !important;
    box-shadow: 0 4px 14px -4px rgb(0 0 0 / .15) !important;
    border-radius: 10px !important;
    overflow: hidden;
}
.dark .maplibregl-ctrl-group {
    background: rgb(15 23 42 / .85) !important;
    color: #e2e8f0 !important;
}
.dark .maplibregl-ctrl-group button { filter: invert(1) hue-rotate(180deg); }
.dark .maplibregl-ctrl-attrib { background: rgb(15 23 42 / .65) !important; color: #cbd5e1 !important; }
.dark .maplibregl-ctrl-attrib a { color: #cbd5e1 !important; }

/* Custom map pin */
.am-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    box-shadow: var(--pin-shadow);
    border: 2px solid rgba(255,255,255,.85);
    cursor: pointer;
    transition: transform .15s ease;
}
.am-pin > span { transform: rotate(45deg); }
.am-pin:hover { transform: rotate(-45deg) scale(1.08); }
.am-pin.osm { opacity: .85; border-style: dashed; }
.am-pin.q   { border-radius: 14px; transform: none; border-width: 2px; }
.am-pin.q:hover { transform: scale(1.08); }
.am-pin.q > span { transform: none; font-weight: 700; font-size: 12px; }

.am-cluster {
    background: linear-gradient(180deg, #10b981, #047857);
    color: white;
    border-radius: 9999px;
    padding: 6px 12px;
    font-weight: 600;
    box-shadow: var(--pin-shadow);
    border: 2px solid rgba(255,255,255,.9);
    cursor: pointer;
}

/* Scrollbars in dark mode that don't look like garbage */
.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-track { background: #0f172a; }
.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Subtle grid background for the hero */
.am-grid-bg {
    background-image:
        radial-gradient(circle at 1px 1px, rgb(15 23 42 / .07) 1px, transparent 0);
    background-size: 22px 22px;
}
.dark .am-grid-bg {
    background-image:
        radial-gradient(circle at 1px 1px, rgb(255 255 255 / .07) 1px, transparent 0);
}

/* Category chip */
.am-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    user-select: none;
}

/* Slide-up panel transitions */
.am-panel {
    transform: translateY(0);
    transition: transform .25s ease, opacity .2s ease;
}
.am-panel[hidden] {
    display: block !important;
    pointer-events: none;
    transform: translateY(110%);
    opacity: 0;
}

/* Form field defaults */
.am-input {
    width: 100%;
    border-radius: .625rem;
    border: 1px solid rgb(203 213 225);
    background: white;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: #0f172a;
    transition: border-color .15s, box-shadow .15s;
}
.am-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgb(16 185 129 / .25);
}
.dark .am-input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}
.dark .am-input::placeholder { color: #64748b; }