/* Modern SF-style color palette and typography */
:root {
    --primary-blue: #007AFF;
    --primary-blue-hover: #0056D6;
    --shadow-subtle: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-medium: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-large: 0 10px 15px rgba(0,0,0,0.04), 0 4px 6px rgba(0,0,0,0.05);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

  /* Builder/A16Z accents */
  --accent-violet: #7C3AED;  /* violet */
  --accent-cyan: #22D3EE;    /* cyan */
  --accent-indigo: #4F46E5;  /* indigo */
  --gradient-primary: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-cyan) 100%);
  --gradient-primary-hover: linear-gradient(135deg, #8B5CF6 0%, #06B6D4 100%);
  --backdrop-blur: 12px;
  --backdrop-saturation: 140%;

  /* Event accent system */
  --event: #D7263D;            /* primary red accent for events */
  --event-bg: #FFF5F5;         /* subtle background for event elements */
  --event-border: #FFD6D6;     /* light border for event elements */

    /* Extra radii & spacing scale */
    --radius-xs: 6px;
    --radius-xxs: 4px;
    --space-1: 4px;    /* xs */
    --space-1-5: 6px;  /* sm */
    --space-2: 8px;    /* md */
    --space-3: 12px;   /* lg */
    --space-4: 16px;   /* xl */
    --space-5: 20px;   /* 2xl */
    --space-6: 24px;   /* 3xl */

    /* Overlay tokens */
    --shadow-hairline: 0 1px 1px rgba(0,0,0,0.08);

  /* Common tokens */
  --white: #FFFFFF;            /* alias for white when used as text on dark */
  --z-floating: 1000;          /* floating UI like counters/badges */

  /* Dark Mode Variables (now default) */
    --surface-primary: #0E1420;
    --surface-secondary: #0B0F17;
    --surface-tertiary: #070B12;
    --text-primary: #EAECF0;
    --text-secondary: #9BA4B5;
    --text-tertiary: #7B8394;
    --border-light: rgba(255,255,255,0.08);
    --border-medium: rgba(255,255,255,0.14);
    --overlay-bg: rgba(10,14,23,0.55);
    --grid-line: rgba(255,255,255,0.04);
    --glass-bg: rgba(13,18,28,0.55);
    --glass-bg-strong: rgba(13,18,28,0.68);
    --shadow-glow: 0 12px 28px rgba(124,58,237,0.22), 0 8px 20px rgba(34,211,238,0.16);
}

/* Subtle grid + radial glow background for a "builder" vibe */
body {
  background-color: var(--surface-tertiary);
  background-image:
    radial-gradient(60% 80% at 100% 0%, rgba(124,58,237,0.20) 0%, rgba(124,58,237,0) 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(34,211,238,0.20) 0%, rgba(34,211,238,0) 60%),
    /* grid */
    linear-gradient(0deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 100%,
    24px 24px,
    24px 24px;
  background-position:
    center,
    center,
    center,
    center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', 'Helvetica Neue', Inter, system-ui, sans-serif;
  margin:0;
  padding:0;
  color: var(--text-primary);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Utilities to toggle the new visuals if needed */
.no-grid body, body.no-grid {
  background-image: none !important;
}
.no-glass .header-container,
.no-glass .filter-container,
.no-glass .map-container,
body.no-glass .header-container,
body.no-glass .filter-container,
body.no-glass .map-container {
  background: var(--surface-primary) !important;
  border-color: var(--border-light) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-medium) !important;
}

/* Gradient text utility for headings */
.brand-gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Layout containers */
._dash-container { max-width:1200px; margin:0 auto; padding: var(--space-6); }
.header-container, .filter-container,
.map-container {
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  /* Glassy surfaces with a subtle gradient glow */
  background: var(--glass-bg);
  backdrop-filter: saturate(var(--backdrop-saturation)) blur(var(--backdrop-blur));
  -webkit-backdrop-filter: saturate(var(--backdrop-saturation)) blur(var(--backdrop-blur));
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-large), var(--shadow-glow);
  overflow:hidden;
  position: relative;
}
.header-container {
  border-radius: var(--radius-lg);
  padding:22px;
  margin-bottom:14px;
  box-shadow: var(--shadow-medium), var(--shadow-glow);
  background: var(--glass-bg-strong);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-4);
}
/* Flex header helpers */
.header-meta { display:flex; flex-direction:column; gap: var(--space-1-5); flex:1 1 auto; min-width:0; }
.header-cta { margin:0; white-space:nowrap; font-size:1.08rem; font-weight:500; text-decoration: none;}
.header-cta-container {
    display: flex;
    flex-direction: column;   /* Stack vertically by default */
  gap: var(--space-4);
    align-items: flex-end;
}
.header-cta--event {
  color: var(--event-bg) !important;
  background: var(--event) !important;
  border-color: var(--event) !important;

}
.header-cta--event:hover,
.header-cta--event:focus {
  background: var(--event) !important;
  color: var(--white) !important;
  border-color: var(--event) !important;
}

/* On small screens, stack horizontally */
@media (max-width: 768px) {
    .header-cta-container {
        flex-direction: row;
        align-items: flex-start;
  gap: var(--space-3);
    }
}
.filter-container { border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow-medium); }
.map-container { border-radius: var(--radius-xl); padding: var(--space-4); box-shadow: var(--shadow-large), var(--shadow-glow); overflow:hidden; }
.main-content { display:flex; flex-direction:row; gap:0; width:100%; }

/* Headings & text */
h1 { color: var(--text-primary); font-weight:700; font-size:2.5rem; margin:0 0 var(--space-2); letter-spacing:-0.5px; line-height:1.2; }
.subtitle { color: var(--text-secondary); font-size:1.1rem; margin:0 0 var(--space-3); font-weight:400; }
.popup-title, .resource-item-title { margin:0 0 var(--space-2); font-size:1.1rem; font-weight:600; color: var(--text-primary); }
.resource-item-title { margin-bottom: var(--space-1); font-size:1rem; }

/* Utility text styles */
.notes { color: var(--text-secondary); font-size:0.9rem; line-height:1.4; margin:0 0 var(--space-2); }
.notes--compact { line-height:1.3; }

/* Type badges */
.type-badges { margin-bottom: var(--space-3); display:flex; flex-wrap:wrap; gap: var(--space-1); }
.type-badge { background: var(--gradient-primary); color: var(--white); padding:2px var(--space-2); border-radius: var(--radius-xxs); font-size:0.7rem; font-weight:600; display:inline-block; letter-spacing:.25px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Filter pills */
.pill-container { display:flex; flex-wrap:wrap; gap: var(--space-2); flex:1; }
.filter-content { display:flex; align-items:flex-start; gap: var(--space-4); flex-wrap:wrap; }
.event-window-group { display:none; gap: var(--space-2); }
.show-event-window .event-window-group { display:flex; }
.filter-pill { background: var(--surface-secondary); color: var(--text-secondary); border:1px solid var(--border-medium); border-radius: var(--radius-xl); padding: var(--space-2) var(--space-4); font-size:0.85rem; font-weight:500; cursor:pointer; font-family:inherit; outline:none; white-space:nowrap; transition:.2s; }
.filter-pill:hover { background: var(--surface-primary); border-color: var(--primary-blue); color: var(--text-primary); transform:translateY(-1px); box-shadow: var(--shadow-subtle); }
.filter-pill:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px rgba(124,58,237,0.25), 0 0 0 4px rgba(34,211,238,0.18); }
.filter-pill.active:not(.filter-pill--event) { background: var(--gradient-primary); color: var(--white); border-color: transparent; box-shadow: var(--shadow-subtle), 0 6px 16px rgba(124,58,237,0.12); }
.filter-pill.active:not(.filter-pill--event):hover { background: var(--gradient-primary-hover); }

.filter-pill--event {
  background: transparent !important;
  color: var(--event) !important;
  border-color: var(--event) !important;
}

/* Active and hover states for the event pill.
   This selector is more specific than .filter-pill.active, so it wins. */
.filter-pill.filter-pill--event.active,
.filter-pill--event:hover {
  background: var(--event) !important;
  color: var(--white) !important;
  border-color: var(--event) !important;
}
/* Map & leaflet */
.leaflet-container { border-radius: var(--radius-md); height:70vh !important; min-height:500px; }
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-large), var(--shadow-glow) !important;
  border:1px solid var(--border-light) !important;
  background: var(--glass-bg-strong) !important;
  backdrop-filter: saturate(var(--backdrop-saturation)) blur(var(--backdrop-blur));
  -webkit-backdrop-filter: saturate(var(--backdrop-saturation)) blur(var(--backdrop-blur));
}
.leaflet-popup-tip {
  background: var(--glass-bg-strong) !important;
  border:1px solid var(--border-light) !important;
  box-shadow: var(--shadow-subtle) !important;
}
.leaflet-popup-content { font-family:inherit; color: var(--text-primary); line-height:1.5 !important; }
/* Make the close button visible in dark mode */
.leaflet-popup-close-button {
  color: var(--text-secondary) !important;
}
.google-maps-link {
  display:inline-flex;
  align-items:center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  font-size:0.8rem;
  font-weight:500;
  border-radius: var(--radius-xs);
  text-decoration:none;
  background: rgba(255,255,255,0.06);
  color: #A5B4FC;
  border: 1px solid var(--border-medium);
  transition:.2s;
  box-shadow:none;
}

.google-maps-link:hover {
  background: var(--gradient-primary);
  color: var(--white);          /* white text on hover */
  border-color: transparent;
  transform:translateY(-1px);
  box-shadow: var(--shadow-subtle), 0 6px 16px rgba(124,58,237,0.12);
}
.google-maps-link:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px rgba(124,58,237,0.25), 0 0 0 4px rgba(34,211,238,0.18); }

.google-maps-link--small { 
  padding: var(--space-1) var(--space-2); 
  border-radius: var(--radius-xxs); 
}


/* Event links - distinct red accent to differentiate from Google Maps (blue) */
.event-link { display:inline-flex; align-items:center; gap: var(--space-1-5); padding: var(--space-1-5) var(--space-3); font-size:0.8rem; font-weight:600; border-radius: var(--radius-xs); text-decoration:none; background: var(--event-bg); color: var(--event); border:1px solid var(--event-border); box-shadow:none; }
.event-link:hover { background: var(--event); color: var(--white); border-color: var(--event); transform:translateY(-1px); box-shadow: var(--shadow-subtle); }
.event-link:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 2px rgba(215,38,61,0.25), 0 0 0 4px rgba(215,38,61,0.18); }
.event-link--small { padding: var(--space-1) var(--space-2); font-size:0.72rem; border-radius: var(--radius-xxs); margin: var(--space-1) 0 var(--space-1-5); display:flex; width: fit-content; }

/* Ensure event link in popup is on its own line too */
.popup-content .event-link { display:flex; width: fit-content; margin-bottom: var(--space-1-5); }

/* Sidebar resource list: make event links outlined by default */
.resource-list-container .event-link {
  background: transparent;
  color: var(--event) !important;
  border-color: var(--event);
  box-shadow: none;
}
.resource-list-container .event-link:hover {
  background: var(--event);
  color: var(--white) !important;
  border-color: var(--event);
  box-shadow: var(--shadow-subtle);
}
.resource-list-container .event-link:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px rgba(215,38,61,0.28), 0 0 0 4px rgba(215,38,61,0.18);
}

/* Resource list */
.resource-list-container { flex:1; min-width:0; border-left:1px solid var(--border-light); padding-left: var(--space-6); background: var(--surface-tertiary); }
.resource-list-scroll { overflow-y:auto; max-height:70vh; padding-right: var(--space-2); }
.resource-item { display:block; width:100%; text-align:left; background:transparent; border:none; padding: var(--space-3) 0; border-bottom:1px solid var(--border-light); cursor:default; }

.results-info {
  position: absolute;
  top: 50px;
  left: 70px;
  background: rgba(13,18,28,0.55);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-hairline), var(--shadow-subtle);
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem;
  color: var(--text-secondary);
  z-index: var(--z-floating);
  pointer-events: none;
  text-align: left;
}

/* Generic buttons / links (optional consolidation) */
.button, .filter-pill, .google-maps-link, .event-link, .location-preset-btn { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, transform .2s ease, filter .2s ease; }

.event-link, .event-link * {
  color: var(--event) !important;
  fill: var(--event) !important; /* for SVG icons if any */
}
.event-link:hover, .event-link:hover * {
  color: var(--white) !important;
  fill: var(--white) !important;
}

.location-presets-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.location-preset-btn {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xs);
    padding: var(--space-1-5) var(--space-3);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    transition: .2s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.location-preset-btn:hover {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-subtle);
}

.location-preset-btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.25), 0 0 0 4px rgba(34,211,238,0.18);
}

.location-preset-btn:active {
    background: var(--gradient-primary);
    color: var(--white);
    border-color: transparent;
    box-shadow: var(--shadow-subtle), 0 6px 16px rgba(124,58,237,0.12);
}

/* Responsive */
@media (max-width:768px) {
  ._dash-container { padding: var(--space-4); }
  .header-container { padding: var(--space-6) var(--space-5); flex-direction:column; align-items:flex-start; gap: var(--space-2); flex-wrap: wrap;}
  .header-cta { margin-top: var(--space-1); 
    display: inline-flex;
    flex: 0 0 auto;
  }
  h1 { font-size:2rem; }
  .filter-content { flex-direction:column; align-items:stretch; gap: var(--space-3); }
  .filter-pill { font-size:0.75rem; padding: var(--space-1) var(--space-2); }
  .leaflet-container { height:60vh !important; min-height:400px; }
  .main-content { flex-direction:column; }
  .resource-list-container { border-left:none; padding-left:0; }
  .results-info {
    top: 100px; /* Push down to clear the two rows of location presets */
  }
  

}

/* Loading */
.loading { opacity:.7; pointer-events:none; }

/* Transitions */
.button, .filter-pill, .google-maps-link, .event-link, .location-preset-btn { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, transform .2s ease, filter .2s ease; }

.event-link, .event-link * {
  color: var(--event) !important;
  fill: var(--event) !important; /* for SVG icons if any */
}
.event-link:hover, .event-link:hover * {
  color: var(--white) !important;
  fill: var(--white) !important;
}

.location-presets-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.location-preset-btn {
    background: var(--surface-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-xs);
    padding: var(--space-1-5) var(--space-3);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    transition: .2s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.location-preset-btn:hover {
    background: var(--surface-primary);
    color: var(--text-primary);
    border-color: var(--primary-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-subtle);
}

.location-preset-btn:focus-visible {
    outline: 2px solid transparent;
    box-shadow: 0 0 0 2px rgba(124,58,237,0.25), 0 0 0 4px rgba(34,211,238,0.18);
}

.location-preset-btn:active {
    background: var(--gradient-primary);
    color: var(--white);
    border-color: transparent;
    box-shadow: var(--shadow-subtle), 0 6px 16px rgba(124,58,237,0.12);
}

/* Footer styling */
.footer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-2);
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* GitHub button styling that matches the design system */
.github-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--glass-bg-strong);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-subtle);
}

.github-button:hover {
  background: var(--gradient-primary);
  color: var(--white);
  border-color: transparent;
  box-shadow: var(--shadow-medium), var(--shadow-glow);
}

.github-button svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .footer-container {
    margin-top: var(--space-4);
    flex-direction: column;
    padding-bottom: var(--space-6);
  }
}