@import "tailwindcss";

@tailwind utilities;

/* Set default background and text colors and font family */
@layer base {
  html, body {
    @apply bg-neutral-700;
    @apply text-neutral-200;
    @apply font-sans;
  }

  /* Apply the custom fonts to headings for better visibility */
  h1, h2, h3, h4, h5, h6 {
    @apply font-sans;
    @apply font-medium;
  }
}

/* MapLibre attribution — dark theme, always-compact icon */
.maplibregl-ctrl-attrib.maplibregl-compact {
  background: rgba(0, 0, 0, 0.45) !important;
  border-radius: 4px !important;
}
.maplibregl-ctrl-attrib-button {
  background-color: transparent !important;
  opacity: 0.6;
}
.maplibregl-ctrl-attrib-button:hover {
  opacity: 1;
}
.maplibregl-ctrl-attrib-inner {
  background: rgba(0, 0, 0, 0.7) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  text-align: right !important;
}
.maplibregl-ctrl-attrib-inner a {
  color: rgba(255, 255, 255, 0.7) !important;
}
.maplibregl-ctrl-attrib-inner a:hover {
  color: #fff !important;
}
/* Prevent auto-expand on wide maps */
.maplibregl-ctrl-attrib.maplibregl-compact-show {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

@layer utilities {
  .border-inset {
    @apply border-1;
    @apply border-b-neutral-400/30;
    @apply border-r-neutral-400/30;
    @apply border-t-neutral-950/60;
    @apply border-l-neutral-950/60;
    @apply rounded-md;
    @apply shadow-md;
  }
  .border-outset {
    @apply border-1;
    @apply border-t-neutral-300/30;
    @apply border-l-neutral-300/30;
    @apply border-b-neutral-950/60;
    @apply border-r-neutral-950/60;
    @apply rounded-md;
    @apply shadow-md;
  }
  .effect-outset {
    @apply shadow-inner;
    @apply [box-shadow:inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_-1px_0_0_rgba(0,0,0,0.3)];
  }
  .effect-inset {
    @apply shadow-inner;
    @apply [box-shadow:inset_0_1px_2px_0_rgba(0,0,0,0.3),inset_0_-1px_1px_0_rgba(255,255,255,0.15)];
  }
}