@import 'tailwindcss';
@import '@acid-info/logos-tokens/theme.css';

/* Scan workspace UI package so its Tailwind classes are emitted. */
@source "../../../packages/ui/src/**/*.{ts,tsx}";

/* Custom breakpoint for the 1440px desktop design canvas.
   Sits between xl (1280px) and 2xl (1536px). */
@theme {
  --breakpoint-desktop: 1440px;
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-01, currentColor);
  }

  a,
  button {
    outline-color: var(--color-brand-yellow);
  }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid;
    border-radius: var(--radius-sm);
    outline-color: var(--color-brand-yellow);
  }
}

/* Strip Leaflet's default popup chrome so circle-map cards render identically to
   the Upcoming Events cards. !important is required because leaflet.css is
   imported at the component level and loads after this global stylesheet, giving
   its rules higher cascade priority. */
.logos-circle-popup .leaflet-popup-content-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Neutralise Leaflet's content box: it injects margins, a font-size bump
   (1.08333em) and per-paragraph vertical margins (1.3em) that would otherwise
   spread the card's text apart and shift it off the design grid. */
.logos-circle-popup .leaflet-popup-content {
  margin: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
}

.logos-circle-popup .leaflet-popup-content p {
  margin: 0 !important;
}

/* Leaflet colours all anchors #0078A8; the card wraps its content in an <a>. */
.logos-circle-popup .leaflet-popup-content a {
  color: inherit !important;
}

.logos-circle-popup .leaflet-popup-tip-container {
  display: none !important;
}

.logos-circle-popup .leaflet-popup-close-button {
  top: 12px !important;
  right: 18px !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 18px !important;
  text-align: center !important;
  color: var(--color-brand-dark-green) !important;
  opacity: 0.4;
}

.logos-circle-popup .leaflet-popup-close-button:hover {
  opacity: 0.75;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  text-rendering: optimizelegibility;
}

body {
  background-color: var(--color-brand-off-white);
  color: var(--color-brand-dark-green);
}