@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=JetBrains+Mono:wght@400;700&family=Atkinson+Hyperlegible:wght@400;700&display=swap");

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.92 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.92 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.92 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.92 0 0);
  --muted: oklch(0.24 0 0);
  --muted-foreground: oklch(0.82 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.92 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 60%);
  --input: oklch(1 0 0 / 32%);
  --ring: oklch(0.75 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.92 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.92 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.92 0 0);
  --sidebar-border: oklch(1 0 0 / 28%);
  --sidebar-ring: oklch(0.75 0 0);
}

@layer base {
  * {
    outline-color: color-mix(in oklab, var(--ring), oklch(0.7 0.2 240) 20%);
  }
  
  /* Eliminate halation and improve text clarity */
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-smooth: always;
    -webkit-text-stroke: 0.01em transparent;
  }
  
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-smooth: always;
    -webkit-text-stroke: 0.01em transparent;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  
  /* Reduce halation on text elements */
  h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, select, textarea {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: 0.01em transparent;
  }
  
  /* Eliminate subpixel rendering artifacts */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* Only apply scroll prevention to main index page */
  .no-scroll html, .no-scroll body {
    height: 100%;
    overflow: hidden;
  }
  
  @media (max-width: 768px) {
    .no-scroll html, .no-scroll body {
      height: 100vh;
      overflow: hidden;
    }
  }
  
  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    letter-spacing: 0.01em;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-smooth: always;
    -webkit-text-stroke: 0.01em transparent;
    font-size: clamp(16px, 0.94rem + 0.2vw, 18px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* Tailwind utility classes for custom components */
  .text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
  
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  
  .scrollbar-thumb-border {
    scrollbar-color: var(--border) transparent;
  }
  
  .scrollbar-track-transparent {
    scrollbar-color: var(--border) transparent;
  }

  h1, h2, h3 {
    font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
    letter-spacing: 0.06em;
    font-weight: 700;
  }
  
  h1 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
  h2 { font-size: clamp(1.5rem, 1.05rem + 1.2vw, 2.125rem); }
  h3 { font-size: clamp(1.25rem, 0.95rem + 0.8vw, 1.5rem); }

  /* Mobile-specific h1 scaling for header */
  @media (max-width: 768px) {
    header h1 {
      font-size: clamp(16px, 4vw, 24px) !important;
      line-height: 1.2;
    }
  }

  @media (max-width: 480px) {
    header h1 {
      font-size: clamp(14px, 3.5vw, 20px) !important;
      line-height: 1.1;
    }
  }

  /* Event page title overrides - ensure mobile responsiveness */
  #event-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
  }
  
  @media (max-width: 768px) {
    #event-title {
      font-size: clamp(2.5rem, 8vw, 4rem) !important;
    }
  }
  
  @media (max-width: 480px) {
    #event-title {
      font-size: clamp(2rem, 10vw, 3.5rem) !important;
    }
  }

  :where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }

  a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1.5px;
  }


  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  *::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  
  *::-webkit-scrollbar-track {
    background: color-mix(in oklab, var(--background), black 20%);
  }

  .leaflet-container .leaflet-popup-content-wrapper,
  .leaflet-popup.accessible-popup .leaflet-popup-content-wrapper {
    background-color: var(--popover) !important;
    color: var(--popover-foreground) !important;
    border: 2px solid var(--ring) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 10px 30px color-mix(in oklab, black, var(--ring) 20%) !important;
  }
  
  .leaflet-container .leaflet-popup-content {
    margin: 0.75rem 0.875rem !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--popover-foreground) !important;
    font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif !important;
  }
  
  .leaflet-container .leaflet-popup-tip,
  .leaflet-popup.accessible-popup .leaflet-popup-tip {
    background: var(--popover) !important;
    border: 2px solid var(--ring) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  }
  
  .leaflet-container a.leaflet-popup-close-button {
    color: var(--popover-foreground) !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    line-height: 1.75rem !important;
    text-align: center !important;
    background: color-mix(in oklab, var(--popover), black 10%) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border) !important;
    text-decoration: none !important;
  }
  
  .leaflet-container a.leaflet-popup-close-button:focus-visible {
    outline: 2px solid var(--ring) !important;
    outline-offset: 2px !important;
  }

  .accessible-popup .text-sm { color: var(--popover-foreground); }
  .accessible-popup h3 { color: var(--popover-foreground); }
  .accessible-popup a { color: var(--chart-2) !important; }
  .accessible-popup a:visited { color: var(--chart-2) !important; }
  .accessible-popup a:hover { color: var(--primary) !important; }
}

nextjs-portal {
  display: none !important;
}

/* Tailwind component classes */
@layer components {
  .btn-primary {
    @apply bg-white text-black border-none px-6 py-3 font-semibold relative overflow-hidden transition-all hover:bg-gray-100 hover:-translate-y-0.5 hover:shadow-lg min-h-[44px] min-w-[44px];
  }
  
  .btn-secondary {
    @apply bg-transparent text-muted-foreground border-none underline underline-offset-4 py-2 transition-colors hover:text-foreground hover:underline-thickness-2;
  }
  
  .card {
    @apply group rounded-lg border border-[var(--border)] bg-[var(--card)]/60 p-4 md:p-5 backdrop-blur transition hover:border-[var(--primary)] hover:bg-[var(--card)]/80 focus:outline-none focus:ring-2 focus:ring-[var(--sidebar-ring)] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.03),0_0_0_1px_rgba(0,0,0,0.4)];
  }
  
  .card.selected {
    @apply border-[var(--chart-2)] bg-[var(--card)]/90 shadow-xl shadow-[var(--chart-2)]/20;
  }
  
  .form-input {
    @apply w-full bg-card/50 border border-border text-foreground rounded-lg p-3 focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none min-h-[44px];
  }
  
  .filter-checkbox {
    @apply bg-card/60 border border-border rounded-lg p-3 cursor-pointer transition-all hover:border-primary hover:bg-card/80 min-h-[44px];
  }
  
  
  .event-name {
    @apply text-base font-semibold tracking-wide text-[var(--primary)] group-hover:text-[var(--primary)];
  }
  
  .event-name a {
    @apply text-[var(--chart-2)] underline underline-offset-2 decoration-2 hover:text-[var(--primary)] !text-2xl;
    font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  
  .event-card-title-link {
    text-decoration: none;
  }
  
  .event-card-title-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.5rem;
    text-decoration-thickness: 2px;
  }
  
  .event-date {
    @apply text-lg font-semibold text-[var(--muted-foreground)] mt-2;
    font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif !important;
  }
  
  .event-location {
    @apply mt-0.5 text-sm text-[var(--muted-foreground)];
    font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
    font-weight: 400;
  }
  
  .event-details-link {
    @apply text-[var(--chart-2)] underline underline-offset-2 hover:text-[var(--primary)] mt-2 text-base;
    font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  }
  
  .event-tags-container {
    @apply flex flex-wrap;
    gap: 0.5rem !important;
    row-gap: 0.75rem !important;
    margin-top: 0.75rem !important;
    padding-top: 0.125rem !important;
    align-items: flex-start !important;
    width: 100% !important;
  }
  
  @media (max-width: 768px) {
    .event-tags-container {
      margin-top: 1rem !important;
    }
  }
  
  .event-tags-container > *:last-child {
    margin-right: 0 !important;
  }
  
  .event-tag-chip {
    @apply inline-flex items-center uppercase tracking-widest bg-[var(--secondary)]/10;
    border-radius: 4px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    color: var(--muted-foreground) !important;
    border: 1px solid var(--muted-foreground) !important;
    font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .sponsored-card {
    margin-top: 0.75rem !important;
    border-radius: 0.625rem !important;
    background-color: transparent !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    border: 1px dashed var(--border) !important;
    box-shadow: 0 0 0 1px var(--border), 0 10px 30px rgba(0, 200, 255, 0.05) !important;
  }
  
  .sponsored-label {
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--muted-foreground) !important;
    font-size: 0.875rem !important;
  }
  
  .sponsored-title {
    margin-top: 0.25rem !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--foreground) !important;
  }
  
  .sponsored-description {
    margin-top: 0.25rem !important;
    font-size: 14px !important;
    color: var(--muted-foreground) !important;
  }
  
  .sponsored-cta {
    margin-top: 0.75rem !important;
    flex-shrink: 0 !important;
    border-radius: calc(var(--radius) - 2px) !important;
    background: white !important;
    padding: 0.5rem 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    color: black !important;
    text-decoration: none !important;
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 150ms ease !important;
    font-size: 0.875rem !important;
    box-shadow: inset 0 0 0 1px var(--border) !important;
  }
  
  
  .sponsored-cta::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 2px, transparent 3px) !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
  }

  .filter-apply-btn {
    background-color: oklch(0.696 0.17 162.48) !important;
    background: oklch(0.696 0.17 162.48) !important;
    color: oklch(0.145 0 0) !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .filter-apply-btn::before {
    display: none !important;
  }

  .filter-apply-btn:hover,
  .filter-apply-btn:active,
  .filter-apply-btn:focus-visible {
    background-color: oklch(0.67 0.17 162.48) !important;
    background: oklch(0.67 0.17 162.48) !important;
    color: oklch(0.145 0 0) !important;
  }
  
  .sponsored-map-banner {
    margin-top: 0.75rem !important;
    background-color: transparent !important;
    backdrop-filter: blur(8px) !important;
    padding: 1rem !important;
    border-radius: 0.625rem !important;
    border: 2px dashed var(--border) !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  .sponsored-content {
    flex: 1 !important;
  }

  /* Map tile darkening for better marker contrast */
  .darkened-tiles {
    filter: brightness(0.6) contrast(1.2) saturate(0.8);
  }

  /* Enhanced marker visibility */
  .leaflet-marker-icon {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all 0.2s ease;
  }

  .leaflet-marker-icon:hover {
    filter: drop-shadow(0 0 12px rgba(0, 123, 255, 0.8)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
    transform: scale(1.1);
  }

  /* Dark overlay for better marker contrast */
  #map::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
  }

  /* Remove scanline effect from filters section */
  #filters-content {
    position: relative;
    z-index: 10;
  }

  /* Create a transparent background overlay to allow scanlines through */
  #filters-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
  }

  /* Remove scanline effect from select dropdowns */
  #filters-content select {
    position: relative;
    z-index: 20;
    background-color: var(--card) !important;
  }

  /* Ensure select options appear above scanlines */
  #filters-content select option {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
  }

  /* Additional overlay to allow scanlines through the entire sidebar */
  #sidebar {
    position: relative;
    z-index: 5;
  }

  #sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
    z-index: -1;
  }

  /* Allow scanlines through scrollable content container */
  #sidebar .overflow-y-auto {
    position: relative;
    z-index: 10;
  }

  #sidebar .overflow-y-auto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
    z-index: -1;
  }

  /* Allow scanlines through event list container */
  #event-list-container {
    position: relative;
    z-index: 15;
  }

  #event-list-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
    z-index: -1;
  }
}