/* Map typography and the shared popup card (Oct 2026: moved out of listing.css).
   The venue page renders the same popup -- its service-area circles open the
   card from map-popup.js -- but does not load listing.css, whose map-container
   rules would turn its embedded map into the mobile full-screen overlay. So the
   popup's styles live here and every page with a map links this file:
   partials/map, partials/globe and the venue page. */

/* Leaflet sets `font-family: "Helvetica Neue", Arial, ...` on .leaflet-container,
   so everything inside the map -- popup title, address, category pills -- rendered
   in a different face to the rest of the site. At font-weight 600 that reads as
   noticeably bolder than the identical pill on a venue card, which is Hanken.

   Inheriting is the fix rather than lowering the weight: the pills use the exact
   class string from partials/category-pills.blade.php, and dropping to
   font-medium here would make them differ from the cards in the other direction
   the moment anyone compared them side by side.

   MapLibre needs the class REPEATED; Leaflet did not. maplibre-gl.css is
   injected into <head> at runtime by globe.js, so it always lands after this
   file and beat a plain `.maplibregl-map` on source order -- which is why the
   globe's popup title rendered in Arial next to a card title in Hanken long
   after this rule was written. The duplicated class buys the specificity to
   win without !important. Leaflet's sheet is a normal <link> ahead of this
   one, so its selector never needed the trick; it is doubled anyway so the two
   halves of this rule cannot be read as saying different things.

   `inherit` rather than naming Hanken: the face is set once on body from
   tailwind.config.js, and the map should follow it rather than hold a second
   copy that has to be remembered on the day it changes. */
.leaflet-container.leaflet-container,
.maplibregl-map.maplibregl-map,
.leaflet-popup-content,
.maplibregl-popup-content {
    font-family: inherit;
}

.leaflet-popup-content-wrapper,
.maplibregl-popup-content {
    padding: 0px;
}
.leaflet-popup-content,
.maplibregl-popup-content {
    padding: 0px;
    margin: 0px;
    /* Both, and not just width: Leaflet measures the popup from its content, so a
       child wider than this box grows the whole popup rather than being clipped. */
    width: 300px;
    max-width: 300px;
    min-height: 260px;
    box-sizing: border-box;
    overflow: hidden;
}
.leaflet-popup-content img,
.maplibregl-popup-content img {
    /* The template in public/js/listing.js marks this image up with Tailwind
       utilities (object-cover h-48 w-full), and NONE of them exist: Tailwind does
       not scan public/js, so those classes are never generated. The image was
       therefore rendering at its natural width — 1200px+ for a venue photo — with
       only the height below constraining it, which is what made the popup
       enormous.

       So the real sizing has to live here, in plain CSS. width and object-fit are
       the two that were missing. */
    display: block;
    width: 100%;
    max-width: 100%;
    height: 120px;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.leaflet-popup-content .content,
.maplibregl-popup-content .content {
    padding: 10px;
}
.leaflet-popup-content .categories,
.maplibregl-popup-content .categories {
    margin-top: 0px;
    margin-bottom: 5px;
    gap: 4px;
}
/* .category-tag was the popup's own pill treatment — uppercase, white on red,
   sized here because Tailwind does not scan public/js. It is gone: the popup now
   emits the same markup as partials/category-pills.blade.php, and those utility
   classes DO exist in app.css because that Blade partial puts them there. Adding
   any sizing back here would fight the shared component and reintroduce the
   difference this removed. */
/* Leaflet ships `.leaflet-container a { color:#0078A8 }` — specificity (0,2,0),
   which outranks Tailwind's single-class `.text-gray-600` (0,1,0). Every link in
   the popup therefore rendered Leaflet blue: the category pills, and the city /
   state / country links. These re-assert the same palette values at (0,3,0) so
   the popup matches the venue cards.

   Values copied from the compiled app.css rather than retyped, so they cannot
   drift from the Tailwind palette.

   EVERY LINE HERE USED TO END `},` -- a comma after the closing brace. CSS has
   no such separator between rules: the comma becomes the first token of the
   NEXT rule's selector list, which makes that list invalid, and an invalid
   selector list means the browser drops the whole rule silently. Chained down
   twelve lines it took out all but the first pill colour AND the `.title` rule
   below, so popup titles fell back to maplibre's 12px black and the pills to
   the default link colour. Nothing errors; it just renders wrong. */
.leaflet-popup-content a.text-white   { color: rgb(255 255 255); }
.maplibregl-popup-content a.text-white   { color: rgb(255 255 255); }
.leaflet-popup-content a.text-gray-600{ color: rgb(75 85 99); }
.maplibregl-popup-content a.text-gray-600{ color: rgb(75 85 99); }
.leaflet-popup-content a.text-gray-400{ color: rgb(156 163 175); }
.maplibregl-popup-content a.text-gray-400{ color: rgb(156 163 175); }
.leaflet-popup-content a.text-red     { color: rgb(255 77 85); }
.maplibregl-popup-content a.text-red     { color: rgb(255 77 85); }
/* Hover intents, same as the card pills: grey pills go red, the placement pills
   (black / gold) keep white text. */
.leaflet-popup-content a.text-gray-600:hover { color: rgb(255 77 85); }
.maplibregl-popup-content a.text-gray-600:hover { color: rgb(255 77 85); }
.leaflet-popup-content a.text-white:hover    { color: rgb(255 255 255); }
.maplibregl-popup-content a.text-white:hover    { color: rgb(255 255 255); }
/* Matches the card heading in partials/business.blade.php, which is
   `text-red text-lg capitalize` -- 18px on Tailwind's 28px line-height. The
   24px here was a hand-picked value that read tighter than every other title
   on the site as soon as a venue name wrapped to two lines. */
.leaflet-popup-content .title,
.maplibregl-popup-content .title {
    color: #ff4d55;
    font-size: 18px;
    line-height: 28px;
    text-transform: capitalize;
    margin: 0px 0px 4px 0px;
}
.leaflet-popup-content .link,
.maplibregl-popup-content .link {
    color: #ff4d55 !important;
}
.leaflet-popup-content .link:hover,
.maplibregl-popup-content .link:hover {
    color: white !important;
}
/* Matches the venue card's address block (text-xs text-grey capitalize) rather
   than the old 16px, which made the popup read as a different component to the
   cards sitting next to it on the same page. */
.leaflet-popup-content .city-state,
.maplibregl-popup-content .city-state,
.leaflet-popup-content .country,
.maplibregl-popup-content .country,
.leaflet-popup-content .address,
.maplibregl-popup-content .address {
    margin: 0px 0px 2px 0px;
    font-size: 12px;
    line-height: 16px;
    text-transform: capitalize;
    /* Deliberately no colour. The card's address block asks for `text-grey`,
       which is not a class that exists in app.css (no `grey` in the Tailwind
       palette, and none defined) -- so on the card this text inherits. Setting a
       grey here would have made the popup differ from the card in the one way
       this change was meant to remove. Fix the card's dead class first if the
       grey is actually wanted, then set it in both places. */
}
/* The place names inside stay red, as they are on the card. */
.leaflet-popup-content .city-state a,
.maplibregl-popup-content .city-state a,
.leaflet-popup-content .country a,
.maplibregl-popup-content .country a {
    text-transform: none;
}