/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Pin the cascade-layer order BEFORE any stylesheet declares a layer (this
   file loads ahead of daisyui.css and tailwind.css in the :app bundle).
   Without this, load order decides: daisyui.css declares @layer base first,
   which makes Tailwind's `theme` layer OUTRANK `base` — so the @theme token
   bridges in app/assets/tailwind/application.css (self-referential
   var(--color-*) declarations) would beat DaisyUI's real colour definitions
   in the cascade and compute to guaranteed-invalid, blanking every DaisyUI
   colour app-wide. This is Tailwind v4's canonical order; with it, DaisyUI's
   base-layer values win and the bridges resolve correctly at runtime. */
@layer properties, theme, base, components, utilities;

/* 🔴 Leaflet paints over the header and the nav drawer unless every map is its
   own stacking context.
   Reported 2026-08-30 from a phone, twice: the find-us map's tiles and its
   "Leaflet | OpenStreetMap" attribution rendered ON TOP of the sticky header,
   and the delivery map sat over the open nav drawer, between two of its links.
   Cause: leaflet.css puts its panes at z-index 400-700 and its controls (that
   attribution) at 1000, while our drawer is 61 and the header lower still.
   Nothing in our CSS was wrong — Leaflet simply outranks it.
   isolation: isolate makes each map a stacking context, so all of Leaflet's
   internal z-indexes are clamped inside the map's own box and can never
   compete with page chrome again. z-index: 0 does the same for anything that
   does not support isolation; leaflet.css sets neither on .leaflet-container,
   so this cannot fight it whichever order the two sheets land in (its CSS is
   injected at runtime by leaflet_loader.js, so that order is not guaranteed).
   Styling .leaflet-container rather than our three map divs, so a map added
   later inherits the fix. */
.leaflet-container {
  isolation: isolate;
  position: relative;
  z-index: 0;
}