/**
 * koovira_map_brand.css — Koovira Maps branding overlay for ANY map surface (Leaflet raster tiles
 * today, MapLibre GL vector tiles in assets/js/koovira_map_brand.js's initBrandedMap()).
 *
 * Built 2026-09-02 as part of the Koovira Map API platform (see classs/KvMapApiModule.php,
 * classs/KvMapApiBilling.php, classs/KooviraLocation.php). Two independent pieces:
 *
 *   1. .kv-map-watermark — the logo badge every map provider shows (Google/Mapbox bottom-left,
 *      attribution text usually opposite corner). Pure CSS positioning; the actual <img>/<span>
 *      markup is injected by KooviraMapBrand.attachWatermark() in koovira_map_brand.js so a page
 *      only needs one container class, not hand-written markup per map.
 *
 *   2. .kv-map-raster-recolor — an HONEST INTERIM technique for a raster tile layer (Leaflet +
 *      OpenStreetMap tile PNGs, e.g. ride.php today). A CSS filter() cannot restyle individual
 *      roads/water/labels — that needs real vector data (see koovira_map_brand.js's
 *      initBrandedMap(), which does exactly that against a vector source) — it can only shift the
 *      WHOLE raster image's hue/saturation/contrast toward the Koovira palette. That is what this
 *      class does, and only this. Documented here so nobody mistakes it for real map styling.
 */

/* ---------------------------------------------------------------------------------------------
 * 1. LOGO WATERMARK — works on any map container with position:relative (Leaflet's
 *    .leaflet-container and MapLibre's .maplibregl-map both already set that).
 * ------------------------------------------------------------------------------------------- */

.kv-map-watermark {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.18);
  -webkit-backdrop-filter: saturate(140%) blur(2px);
  backdrop-filter: saturate(140%) blur(2px);
  font-family: var(--kv-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  pointer-events: none;   /* never intercepts map drag/zoom */
  user-select: none;
  z-index: 650;           /* above Leaflet's tile/overlay/shadow panes (200/400/500), below its
                              popup pane (700) so a popup can still appear over it */
  opacity: 0.92;
  transition: opacity .15s ease;
  line-height: 1;
}

/* Corner placement — bottom-left is the default (Google Maps convention); bottom-right offered
   for pages whose own UI already occupies the bottom-left of the map (e.g. a floating action
   button), same as how Mapbox lets attribution flip sides. */
.kv-map-watermark[data-corner="bottom-left"]  { left: 10px;  bottom: 10px; }
.kv-map-watermark[data-corner="bottom-right"] { right: 10px; bottom: 10px; }
.kv-map-watermark[data-corner="top-left"]     { left: 10px;  top: 10px; }
.kv-map-watermark[data-corner="top-right"]    { right: 10px; top: 10px; }

.kv-map-watermark img {
  height: 16px;
  width: auto;
  display: block;
}

.kv-map-watermark span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  /* Brand gradient text (matches the Koovira wordmark's blue -> magenta infinity mark,
     assets/media/logos/default-light.png) rather than a flat color. */
  background: linear-gradient(90deg, #1C7EF2 0%, #7A3FE0 55%, #E91E8C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* Small-map / mobile fallback: icon only, text hidden below ~360px map width isn't detectable in
   pure CSS without container queries support everywhere yet, so this is opt-in via a modifier
   class a page can add on narrow layouts. */
.kv-map-watermark.kv-map-watermark--icon-only span { display: none; }

/* ---------------------------------------------------------------------------------------------
 * 2. RASTER RECOLOR (interim / pragmatic — see file docblock). Apply
 *    `kv-map-raster-recolor` on the SAME element passed to Leaflet's L.map(), then this targets
 *    Leaflet's own tile-pane class. Does nothing on a MapLibre canvas (vector rendering is
 *    already styled directly — see koovira_map_brand.js).
 * ------------------------------------------------------------------------------------------- */

.kv-map-raster-recolor .leaflet-tile-pane {
  /* Rotate OSM's default tan/green/gray palette toward Koovira's blue-violet-magenta hue range,
     lift saturation so the shift actually reads as "branded" rather than merely tinted, and trim
     brightness/contrast back down since hue-rotate + saturate together tend to wash the tiles out. */
  filter: hue-rotate(200deg) saturate(1.35) brightness(0.97) contrast(1.04);
}

/* Markers/popups/controls must stay their real colors (pickup/drop pins, route line) — only the
   base tile imagery gets recolored, never the overlay pane. */
.kv-map-raster-recolor .leaflet-marker-pane,
.kv-map-raster-recolor .leaflet-overlay-pane,
.kv-map-raster-recolor .leaflet-popup-pane,
.kv-map-raster-recolor .leaflet-shadow-pane {
  filter: none;
}