/* The Rabbit Hole - Custom Styles */

:root {
  /* Dark Theme Color Palette */
  --bg-primary: #14141f;
  --bg-secondary: #1a1a1a;
  --bg-surface: #1f1f1f;
  --text-primary: #e5e5e5;
  --text-secondary: #a3a3a3;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --border: #2a2a2a;
  --border-light: #333333;
  
  /* Status Colors */
  --status-available: #10b981;
  --status-checked-out: #ef4444;
  --status-pending: #f59e0b;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skip to content link */
.skip-to-content {
  position: absolute;
  left: -9999px;
  z-index: 999;
}

.skip-to-content:focus {
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: white;
  text-decoration: none;
  border-radius: 0.25rem;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus styles for accessibility */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Utility classes */
.text-mono {
  font-family: 'Courier New', Courier, monospace;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-available {
  background-color: rgba(16, 185, 129, 0.2);
  color: var(--status-available);
}

.status-checked-out {
  background-color: rgba(239, 68, 68, 0.2);
  color: var(--status-checked-out);
}

.status-pending {
  background-color: rgba(245, 158, 11, 0.2);
  color: var(--status-pending);
}

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

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Active filter button state */
[data-category-filter].active,
[data-event-category-filter].active,
.volunteer-filter.active {
  background-color: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: white !important;
}

/* Active navigation link */
/* Use WordPress's built-in classes for active state */
nav li.current-menu-item > a:not(.bg-blue-600),
nav li.current-page-item > a:not(.bg-blue-600),
nav a.active:not(.bg-blue-600) {
  color: #60a5fa;
  font-weight: 600;
}

/* Ensure non-active links don't have active styling */
nav li:not(.current-menu-item):not(.current-page-item) > a:not(.active) {
  color: inherit;
}

/* WordPress Menu Styling */
/* Remove default list styles from WordPress menus */
nav ul.menu,
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

/* Menu items should not interfere with flex layout */
nav ul.menu li,
nav ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ensure menu links are properly styled */
nav ul.menu a,
nav ul a {
  display: inline-block;
  text-decoration: none;
}

/* Mobile menu specific styles */
[data-mobile-menu] nav ul {
  flex-direction: column;
}

/* Page Content Links */
/* Style links within page content (not in navigation or feature cards) */
.entry-content a:not(.rh-feature-card):not(.rh-feature-card *):not(.bg-blue-600),
main .entry-content a:not(.rh-feature-card):not(.rh-feature-card *):not(.bg-blue-600),
article .entry-content a:not(.rh-feature-card):not(.rh-feature-card *):not(.bg-blue-600),
.wp-block-post-content a:not(.rh-feature-card):not(.rh-feature-card *):not(.bg-blue-600) {
  color: #60a5fa; /* text-blue-400 */
  text-decoration: underline;
  transition: color 0.2s ease;
}

.entry-content a:not(.rh-feature-card):not(.rh-feature-card *):not(.bg-blue-600):hover,
main .entry-content a:not(.rh-feature-card):not(.rh-feature-card *):not(.bg-blue-600):hover,
article .entry-content a:not(.rh-feature-card):not(.rh-feature-card *):not(.bg-blue-600):hover,
.wp-block-post-content a:not(.rh-feature-card):not(.rh-feature-card *):not(.bg-blue-600):hover {
  color: #93c5fd; /* text-blue-300 */
}

/* Button Links - White text, no underline */
.entry-content a.bg-blue-600,
main .entry-content a.bg-blue-600,
article .entry-content a.bg-blue-600,
.wp-block-post-content a.bg-blue-600 {
  color: #ffffff !important; /* white text */
  text-decoration: none !important; /* no underline */
}

.entry-content a.bg-blue-600:hover,
main .entry-content a.bg-blue-600:hover,
article .entry-content a.bg-blue-600:hover,
.wp-block-post-content a.bg-blue-600:hover {
  color: #ffffff !important; /* white text on hover */
  text-decoration: none !important; /* no underline on hover */
}

/* Ensure navigation links are not affected */
nav a,
header nav a,
[data-mobile-menu] nav a {
  text-decoration: none;
}

/* Feature Card Styling - exclude from link styling */
.rh-feature-card {
  text-decoration: none !important;
  color: inherit !important;
}

.rh-feature-card:hover {
  color: inherit !important;
}

/* Automatic Heading Styles - Match Tailwind utilities */
/* H1: text-4xl md:text-5xl font-bold mb-6 */
.entry-content h1,
main .entry-content h1,
article .entry-content h1,
.wp-block-post-content h1 {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700; /* font-bold */
  margin-bottom: 1.5rem; /* mb-6 */
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .entry-content h1,
  main .entry-content h1,
  article .entry-content h1,
  .wp-block-post-content h1 {
    font-size: 3rem; /* text-5xl */
    line-height: 1;
  }
}

/* H2: text-2xl font-semibold mb-4 */
.entry-content h2,
main .entry-content h2,
article .entry-content h2,
.wp-block-post-content h2 {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
  font-weight: 600; /* font-semibold */
  margin-bottom: 1rem; /* mb-4 */
  color: var(--text-primary);
}

/* Paragraph Styling - Match reference HTML */
/* space-y-4 (1rem spacing between paragraphs), text-lg (1.125rem), text-gray-300 */
/* Override prose styles */
.entry-content p,
main .entry-content p,
article .entry-content p,
.wp-block-post-content p,
.prose p,
.prose-invert p {
  font-size: 1.125rem !important; /* text-lg */
  line-height: 1.75rem !important;
  color: #d1d5db !important; /* text-gray-300 */
  margin-top: 0 !important;
  margin-bottom: 1rem !important; /* space-y-4 equivalent */
}

.entry-content p:first-child,
main .entry-content p:first-child,
article .entry-content p:first-child,
.wp-block-post-content p:first-child,
.prose p:first-child,
.prose-invert p:first-child {
  margin-top: 0 !important;
}

.entry-content p:last-child,
main .entry-content p:last-child,
article .entry-content p:last-child,
.wp-block-post-content p:last-child,
.prose p:last-child,
.prose-invert p:last-child {
  margin-bottom: 0 !important;
}

/* List Styling - Match reference */
.entry-content ul,
main .entry-content ul,
article .entry-content ul,
.wp-block-post-content ul,
.prose ul,
.prose-invert ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

.entry-content ul li,
main .entry-content ul li,
article .entry-content ul li,
.wp-block-post-content ul li,
.prose ul li,
.prose-invert ul li {
  margin-bottom: 0.5rem !important; /* space-y-2 equivalent */
  padding-left: 0 !important;
}

.entry-content ul li:last-child,
main .entry-content ul li:last-child,
article .entry-content ul li:last-child,
.wp-block-post-content ul li:last-child,
.prose ul li:last-child,
.prose-invert ul li:last-child {
  margin-bottom: 0 !important;
}

/* Remove prose list markers */
.entry-content ul li::before,
.prose ul li::before,
.prose-invert ul li::before {
  content: none !important;
  margin-right: 0 !important;
}

/* Section Styling - Match paragraph margins */
.entry-content section,
main .entry-content section,
article .entry-content section,
.wp-block-post-content section,
.prose section,
.prose-invert section {
  margin-top: 0 !important;
  margin-bottom: 1rem !important; /* space-y-4 equivalent - same as paragraphs */
}

.entry-content section:first-child,
main .entry-content section:first-child,
article .entry-content section:first-child,
.wp-block-post-content section:first-child,
.prose section:first-child,
.prose-invert section:first-child {
  margin-top: 0 !important;
}

.entry-content section:last-child,
main .entry-content section:last-child,
article .entry-content section:last-child,
.wp-block-post-content section:last-child,
.prose section:last-child,
.prose-invert section:last-child {
  margin-bottom: 0 !important;
}

/* Image Styling - Respect intrinsic size */
/* Prevent images from being stretched beyond their actual size */
/* Override prose styles that make images full width */
.entry-content img,
main .entry-content img,
article .entry-content img,
.wp-block-post-content img,
.prose img,
.prose-invert img {
  max-width: none !important;
  width: auto !important;
  height: auto !important;
}

/* WordPress adds width/height attributes - respect them */
.entry-content img[width],
main .entry-content img[width],
article .entry-content img[width],
.wp-block-post-content img[width],
.prose img[width],
.prose-invert img[width] {
  max-width: 100% !important; /* Allow shrinking if needed, but don't force full width */
}

/* Ensure images don't exceed their natural dimensions */
.entry-content .size-full,
main .entry-content .size-full,
article .entry-content .size-full,
.wp-block-post-content .size-full {
  width: auto !important;
  max-width: 100% !important;
}

/* HR Styling - Match reference border-t border-gray-800 pt-8 */
/* Creates a separator line like the div borders in the reference HTML */
.entry-content hr,
main .entry-content hr,
article .entry-content hr,
.wp-block-post-content hr,
.prose hr,
.prose-invert hr {
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb33; /* Light gray separator with transparency */
  border-top-width: 1px;
  margin: 0;
  margin-top: 2rem; /* pt-8 equivalent - spacing before */
  margin-bottom: 0;
  padding: 0;
  padding-top: 2rem; /* pt-8 equivalent - spacing after */
  background: none;
  height: 0;
  width: 100%;
}

/* Events Date Filter Select - Better chevron spacing */
select[data-date-filter] {
  padding-left: 1rem; /* pl-4 */
  padding-right: 1rem; /* pr-6 - gives chevron a bit more space from border */
  cursor: pointer;
}