/* ============================================================================
   swap-from-anywhere.css — public Swap from Anywhere (#SwapFromAnywhere map)

   Loaded AFTER vendor/leaflet-1.9.4/leaflet.css AND wall-of-swaps.css
   (see swap-from-anywhere.php $pageStyles ordering). Page-scoped under
   .sfa-* classes; nothing here leaks into other pages.

   The map has no tile basemap (see swap-from-anywhere.js comment) and
   no country fills — just faint silhouettes plus one cyan dot per
   visible swap. Below the map sits a card grid sharing the .wall-card
   visual language from /wall-of-swaps, augmented here with a
   .sfa-card__place-chip and a dot-click highlight pulse.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Hero — eyebrow + headline + counter pill
   --------------------------------------------------------------------------- */

.sfa-hero {
    padding-top:    var(--sp-7-px, 40px);
    padding-bottom: var(--sp-6-px, 30px);
}

.sfa-hero__hashtag,
.sfa-hero__countries {
    color: var(--color-cyan);
    font-weight: 600;
    letter-spacing: 0;
}

.sfa-hero__countries {
    font-variant-numeric: tabular-nums;
}

.sfa-hero__counter {
    margin-top: 18px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 14px;
    border: var(--hairline);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--color-fg-2);
}

.sfa-hero__counter strong {
    font-weight: 600;
    color: var(--color-cyan);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.sfa-hero__counter-label {
    font-size: 11px;
    color: var(--color-fg-3);
}

/* ---------------------------------------------------------------------------
   Map section — overrides the global .section vertical padding-top so the
   map sits snug against the hero (same trick the wall pulls on its grid).
   --------------------------------------------------------------------------- */

.sfa-feed {
    padding-top: 0;
}

/* ---------------------------------------------------------------------------
   The Leaflet container

   - Height is responsive: 480px on phones (fits the viewport without a
     scroll trap), 600px on tablets, 640px max on desktop. Height MUST be
     non-zero before init() or Leaflet won't paint.
   - The hairline + bg-2 match the wall cards' visual weight.
   - aspect-ratio is intentionally NOT set: a fixed height behaves more
     predictably across screen sizes and avoids the GeoJSON re-projection
     jitter that happens when the container resizes mid-animation.
   --------------------------------------------------------------------------- */

.sfa-map {
    width: 100%;
    height: 480px;
    background: var(--color-bg-2);
    border: var(--hairline);
    border-radius: var(--radius-sharp);
    overflow: hidden;
    position: relative;
}

@media (min-width: 768px) {
    .sfa-map { height: 600px; }
}

@media (min-width: 1100px) {
    .sfa-map { height: 640px; }
}

/* Loading skeleton — visible until Leaflet's first tile paints. Pure CSS
   so it's instant; the JS hides it by adding .sfa-map--ready on load. */
.sfa-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(64, 209, 253, 0.05) 0%,
            transparent 60%
        ),
        var(--color-bg-2);
    z-index: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}

.sfa-map.sfa-map--ready::before {
    opacity: 0;
}

/* Visible failure state. The JS appends a .sfa-map__error <div> when
   the init promise chain rejects (geojson 401, Leaflet load failure,
   etc.). Without this, the loading skeleton stays forever and the
   user can't tell anything went wrong — bit me once already. */
.sfa-map--failed::before {
    opacity: 0;
}

.sfa-map__error {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: var(--color-fg-3);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    background: var(--color-bg-2);
}

/* ---------------------------------------------------------------------------
   Post grid — every classified swap rendered as a wall-card variant
   below the map. Server-rendered (see swap-from-anywhere.php). Uses the
   wall-card visual language from wall-of-swaps.css; this block only adds
   the things wall-of-swaps doesn't ship: the place chip, the header,
   and the dot-click highlight pulse.
   --------------------------------------------------------------------------- */

.sfa-posts {
    padding-top: var(--sp-7-px, 40px);
    padding-bottom: var(--sp-6-px, 30px);
}

.sfa-posts__header {
    text-align: center;
    margin-bottom: 28px;
}

.sfa-posts__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-fg);
    letter-spacing: -0.5px;
}

.sfa-posts__sub {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--color-fg-3);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.sfa-posts__grid {
    /* Inherits the .wall-grid masonry-columns rules from
       wall-of-swaps.css. Just overrides the top margin so the section
       header isn't double-spaced. */
    margin-top: 0;
}

/* Place chip — small pin glyph + label, sits between the head and body
   of each card. The pin SVG is currentColor so it picks up the chip's
   fg-2 tone naturally. */
.sfa-card__place-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 16px 12px;     /* aligns with .wall-card__body inset */
    padding: 4px 10px;
    background: rgba(64, 209, 253, 0.06);
    border: 1px solid rgba(64, 209, 253, 0.20);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--color-fg-2);
    /* Wrap-safe: very long place labels go to ellipsis. */
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sfa-card__place-chip svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: var(--color-cyan);
}

/* Cross-link highlight: when the user clicks a dot on the map, the
   matching card briefly pulses cyan so the connection is obvious.
   Removed by the JS after ~1.8 s. */
.sfa-card--highlight {
    animation: sfa-card-pulse 1.8s ease-out;
}

@keyframes sfa-card-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(64, 209, 253, 0.55); }
    40%  { box-shadow: 0 0 0 8px rgba(64, 209, 253, 0.0); }
    100% { box-shadow: 0 0 0 0 rgba(64, 209, 253, 0.0); }
}

/* ---------------------------------------------------------------------------
   Tail — CTA section, mirrored from .wall-tail
   --------------------------------------------------------------------------- */

.sfa-tail {
    padding-top:    var(--sp-7-px, 40px);
    padding-bottom: var(--sp-8-px, 56px);
    text-align: center;
}

.sfa-rules {
    counter-reset: sfa-rule;
    list-style: none;
    margin: 22px auto 0;
    padding: 0;
    max-width: 48ch;
    text-align: left;
}

.sfa-rules li {
    position: relative;
    padding-left: 2.75em;
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-fg-2);
    counter-increment: sfa-rule;
}

.sfa-rules li:last-child {
    margin-bottom: 0;
}

.sfa-rules li::before {
    content: "// " counter(sfa-rule, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.2em;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--color-cyan);
}

.sfa-tail__actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* ---------------------------------------------------------------------------
   Leaflet overrides — restyle the library's default light chrome to match
   our dark UI. All overrides are .sfa-map-scoped via the container class
   so we don't pollute Leaflet usage on any future page.

   Leaflet ships with a leaflet.css that uses pure-white popups, blue links,
   etc. We override the visible parts. We deliberately do NOT change tile
   filter() — see comment at top of file.
   --------------------------------------------------------------------------- */

.sfa-map .leaflet-container {
    background: var(--color-bg-2);
    font-family: var(--font-body);
    outline: none;
}

/* Zoom controls: dark surface with hairline border so they read as buttons. */
.sfa-map .leaflet-control-zoom a {
    background: var(--color-bg-3);
    color: var(--color-fg);
    border: var(--hairline);
    border-radius: var(--radius-sharp);
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-family: var(--font-display);
    font-weight: 600;
    transition: background 200ms ease;
}

.sfa-map .leaflet-control-zoom a:hover {
    background: var(--color-bg);
    color: var(--color-cyan);
}

.sfa-map .leaflet-control-zoom a + a {
    border-top: none;
}

/* Tooltip-style popups: tight, mono numbers, cyan accent on the count. */
.sfa-map .leaflet-popup-content-wrapper {
    background: var(--color-bg-3);
    color: var(--color-fg);
    border: var(--hairline);
    border-radius: var(--radius-sharp);
    box-shadow: var(--shadow-elev-1);
    padding: 0;
}

.sfa-map .leaflet-popup-content {
    margin: 12px 16px;
    font-size: 13px;
    line-height: 1.4;
}

.sfa-map .leaflet-popup-tip {
    background: var(--color-bg-3);
    border: var(--hairline);
}

.sfa-map .leaflet-popup-close-button {
    color: var(--color-fg-3);
    padding: 6px 8px 0 0;
}

.sfa-map .leaflet-popup-close-button:hover {
    color: var(--color-fg);
}

/* Custom popup body (rendered by JS — see swap-from-anywhere.js).
   Two-line layout: bold place label on top, mono @handle below. */
.sfa-popup__name {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-fg);
    line-height: 1.25;
}

.sfa-popup__sub {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-fg-3);
    letter-spacing: 0.02em;
}

/* Dot focus outline removal — CircleMarker is rendered as an SVG <path>
   whose default :focus outline doesn't read well over a dark map. */
.sfa-map .leaflet-interactive:focus {
    outline: none;
}