/* ========================================================
   Rabbit Hole Section - Twilight Particle Background
   ======================================================== */

.section-rabbit {
  min-height: 100vh;
  padding: 4rem 8rem 10rem;
  position: relative;
  overflow: hidden;
  /* Warm twilight gradient background */
  background: linear-gradient(135deg, #1a0a0d 0%, #2d1428 30%, #1a0f28 70%, #0d0a1a 100%);
}

/* Atmospheric warm twilight glow mesh */
.section-rabbit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(at 15% 20%, rgba(255, 140, 66, 0.15) 0px, transparent 50%),
    radial-gradient(at 85% 30%, rgba(226, 119, 119, 0.12) 0px, transparent 50%),
    radial-gradient(at 50% 60%, rgba(183, 127, 226, 0.1) 0px, transparent 50%),
    radial-gradient(at 20% 80%, rgba(255, 107, 157, 0.08) 0px, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Particle canvas container */
.section-rabbit .particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Section Container */
.section-rabbit .section-container {
  max-width: 1400px;
  padding-bottom: 8rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Section Intro */
.section-rabbit .section-intro {
  margin-bottom: 8rem;
}

/* Section Title */
.section-rabbit .section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--font-size-8xl);
  color: var(--color-secondary);
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  z-index: 10;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Section Subtitle */
.section-rabbit .section-subtitle {
  font-family: var(--font-tagline);
  font-weight: 400;
  font-size: var(--font-size-5xl);
  color: var(--color-accent-10);
  text-align: center;
  margin: 1rem 0 6rem;
}

/* Section Description */
.section-rabbit .section-description {
  max-width: 1200px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-base);
  color: var(--color-accent-11);
  text-align: center;
  margin: 4rem auto;
}

/* ========================================
   Last Updated Box
   ======================================== */

.last-updated-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin: 0 auto 3rem;
  max-width: 400px;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.last-updated-box:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.last-updated-label {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.7);
  margin-right: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.last-updated-date {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--font-size-base);
  color: var(--color-white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ========================================
   Grid Layout
   ======================================== */

.rabbit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(280px, auto);
  gap: 2.5rem;
  position: relative;
}

/* Grid positioning for cards */
.card-foundations {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.card-culture {
  grid-column: 3 / span 2;
  grid-row: 1 / span 2;
}

.card-technology {
  grid-column: 1 / span 2;
  grid-row: 3 / span 2;
}

.card-entertainment {
  grid-column: 3 / span 2;
  grid-row: 3 / span 2;
}

/* ========================================
   Rabbit Card Styling
   ======================================== */

.rabbit-card {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Initial state for scroll animation */
  opacity: 0;
  transform: translateY(30px);
}

/* Scroll animation - visible state */
.rabbit-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays */
.rabbit-card:nth-child(1) {
  animation: fadeInUp 0.6s ease-out 0.1s forwards;
}
.rabbit-card:nth-child(2) {
  animation: fadeInUp 0.6s ease-out 0.2s forwards;
}
.rabbit-card:nth-child(3) {
  animation: fadeInUp 0.6s ease-out 0.3s forwards;
}
.rabbit-card:nth-child(4) {
  animation: fadeInUp 0.6s ease-out 0.4s forwards;
}
.rabbit-card:nth-child(5) {
  animation: fadeInUp 0.6s ease-out 0.5s forwards;
}
.rabbit-card:nth-child(6) {
  animation: fadeInUp 0.6s ease-out 0.6s forwards;
}
.rabbit-card:nth-child(7) {
  animation: fadeInUp 0.6s ease-out 0.7s forwards;
}
.rabbit-card:nth-child(8) {
  animation: fadeInUp 0.6s ease-out 0.8s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gradient border effect (hidden by default, shown on hover) */
.rabbit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, transparent, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* Hover effect */
.rabbit-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.rabbit-card:hover::before {
  opacity: 1;
}

/* Category-specific accent colors */
/* Foundations - Blue colors */
.card-foundations::before {
  background: linear-gradient(135deg, rgba(2, 165, 255, 0.6), rgba(2, 165, 255, 0.3));
}

.card-foundations:hover {
  box-shadow: 0 20px 60px rgba(2, 165, 255, 0.3);
}

/* Technology - Purple colors */
.card-technology::before {
  background: linear-gradient(135deg, rgba(183, 127, 226, 0.6), rgba(183, 127, 226, 0.3));
}

.card-technology:hover {
  box-shadow: 0 20px 60px rgba(183, 127, 226, 0.3);
}

/* Entertainment - Warm orange colors */
.card-entertainment::before {
  background: linear-gradient(135deg, rgba(255, 140, 66, 0.6), rgba(255, 140, 66, 0.3));
}

.card-entertainment:hover {
  box-shadow: 0 20px 60px rgba(255, 140, 66, 0.3);
}

/* Culture - Green colors */
.card-culture::before {
  background: linear-gradient(135deg, rgba(69, 219, 166, 0.6), rgba(69, 219, 166, 0.3));
}

.card-culture:hover {
  box-shadow: 0 20px 60px rgba(69, 219, 166, 0.3);
}

/* ========================================
   Card Header
   ======================================== */

.rabbit-card .card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--font-size-4xl);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-icon {
  width: 4.5rem;
  height: 4.5rem;
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.rabbit-card:hover .category-icon {
  transform: scale(1.08) rotate(-3deg);
}

.category-description {
  flex-basis: 100%;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 1.25rem 0 0 0;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.rabbit-card:hover .category-description {
  color: rgba(255, 255, 255, 0.85);
}

/* Category-specific hover colors for titles and icons */
.card-foundations:hover .category-title,
.card-foundations:hover .category-icon {
  color: #02a5ff;
}

.card-technology:hover .category-title,
.card-technology:hover .category-icon {
  color: #b77fe2;
}

.card-entertainment:hover .category-title,
.card-entertainment:hover .category-icon {
  color: #ff8c42;
}

.card-culture:hover .category-title,
.card-culture:hover .category-icon {
  color: #45dba6;
}

/* ========================================
   Card Content & Favorites List
   ======================================== */

.card-content {
  position: relative;
}

.favorites-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.favorites-list li {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  margin-bottom: 1rem;
  padding-left: 2rem;
  position: relative;
  transition: all 0.3s ease;
}

.favorites-list li:last-child {
  margin-bottom: 0;
}

/* Em dash bullets with handwritten feel */
.favorites-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-large);
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  transform-origin: center;
}

.favorites-list li:hover {
  color: var(--color-white);
  padding-left: 2.3rem;
}

.favorites-list li:hover::before {
  color: var(--color-white);
  transform: translateX(3px);
}

/* Link styling within list items */
.favorites-list li a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-weight: 800;
  transition: all 0.3s ease;
  position: relative;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.favorites-list li a:hover {
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

/* Category-specific colors for SVG icons and link hover states */
.card-foundations .category-icon {
  color: #02a5ff;
}

.card-foundations .favorites-list li a:hover {
  color: #02a5ff;
  border-bottom-color: #02a5ff;
}

.card-technology .category-icon {
  color: #b77fe2;
}

.card-technology .favorites-list li a:hover {
  color: #b77fe2;
  border-bottom-color: #b77fe2;
}

.card-entertainment .category-icon {
  color: #ff8c42;
}

.card-entertainment .favorites-list li a:hover {
  color: #ff8c42;
  border-bottom-color: #ff8c42;
}

.card-culture .category-icon {
  color: #45dba6;
}

.card-culture .favorites-list li a:hover {
  color: #45dba6;
  border-bottom-color: #45dba6;
}

/* Card Subcategory Line Breaks */

.technology-line-ai {
  width: 60%;
  color: #45dba6;
  margin: 1rem auto;
}

.technology-line-cybersecurity {
  width: 60%;
  color: #e27777;
  margin: 1rem auto;
}

.technology-line-web-design {
  width: 60%;
  color: #b8a3d9;
  margin: 1rem auto;
}


/* ========================================
   Responsive Design
   ======================================== */

/* Large Desktop (1200px - 1400px) */
@media (max-width: 1400px) {
  .rabbit-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-foundations,
  .card-culture,
  .card-technology,
  .card-entertainment {
    grid-column: span 1;
    grid-row: span 2;
  }
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .section-rabbit {
    padding: 7rem 5rem 5rem;
  }

  .section-rabbit .section-title {
    font-size: var(--font-size-6xl);
    margin-bottom: 0.8rem;
  }

  .section-rabbit .section-subtitle {
    font-size: var(--font-size-3xl);
    margin-bottom: 4rem;
  }

  .rabbit-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
  }

  .card-foundations,
  .card-culture,
  .card-technology,
  .card-entertainment {
    grid-column: span 1;
    grid-row: span 1;
    max-width: none;
    justify-self: stretch;
  }

  .rabbit-card {
    padding: 2rem;
  }

  .category-title {
    font-size: var(--font-size-3xl);
  }

  .category-icon {
    width: 3.5rem;
    height: 3.5rem;
  }

  .category-description {
    font-size: var(--font-size-small);
    margin-top: 1rem;
  }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
  .section-rabbit {
    padding: 6rem 4rem 4rem;
  }

  .section-rabbit .section-title {
    font-size: var(--font-size-5xl);
  }

  .section-rabbit .section-subtitle {
    font-size: var(--font-size-2xl);
    margin-bottom: 3rem;
  }

  .last-updated-box {
    margin-bottom: 2rem;
    padding: 0.9rem 1.2rem;
  }

  .last-updated-label,
  .last-updated-date {
    font-size: var(--font-size-small);
  }

  .rabbit-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .card-foundations,
  .card-culture,
  .card-technology,
  .card-entertainment {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Smaller subcategory headers on mobile */
  .subcategory-title {
    font-size: var(--font-size-large);
  }

  .subcategory-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .rabbit-card {
    padding: 1.8rem;
  }

  .category-title {
    font-size: var(--font-size-2xl);
  }

  .category-icon {
    width: 3rem;
    height: 3rem;
  }

  .favorites-list li {
    font-size: var(--font-size-small);
    padding-left: 1.8rem;
  }

  .category-description {
    font-size: var(--font-size-small);
    margin-top: 1rem;
  }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
  .section-rabbit {
    padding: 4rem 2rem 2rem;
  }

  .rabbit-card {
    padding: 1.5rem;
  }

  .category-title {
    font-size: var(--font-size-xl);
  }

  .category-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .rabbit-card .card-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
  }

  .category-description {
    font-size: var(--font-size-small);
    margin-top: 0.875rem;
  }
}

/* ========================================
   Accessibility
   ======================================== */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .section-rabbit,
  .section-rabbit::before,
  .rabbit-card,
  .category-icon,
  .favorites-list li {
    animation: none !important;
    transition: none !important;
  }

  .rabbit-card:hover,
  .favorites-list li:hover {
    transform: none !important;
  }
}

/* ========================================
   Subcategory System
   ======================================== */

.subcategory-section {
  margin-bottom: 1.5rem;
}

.subcategory-section:last-child {
  margin-bottom: 0;
}

.subcategory-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0.75rem;
  user-select: none;
}

.subcategory-header:hover {
  border-left-color: rgba(255, 255, 255, 0.6);
  padding-left: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
}

.subcategory-header:focus {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

.subcategory-icon {
  width: 2rem;
  height: 2rem;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.subcategory-header:hover .subcategory-icon {
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.1);
}

.subcategory-title {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--font-size-xl);
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  flex-grow: 1;
}

.expand-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  margin-left: auto;
}

.subcategory-header[aria-expanded='false'] .expand-icon {
  transform: rotate(-90deg);
}

.subcategory-section[data-subcategory] .favorites-list {
  /* CSS transitions don't work with auto values. .collapsed is set to 0 so we have to have a fixed value vs auto */
  max-height: 5000px;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 1;
  padding-left: 1rem;
}

.subcategory-section[data-subcategory].collapsed .favorites-list {
  max-height: 0;
  opacity: 0;
}

/* Subcategory-specific colors for category Foundations */
.card-foundations [data-subcategory='archive'] .subcategory-header {
  border-left-color: #7ee2a8;
}

.card-foundations [data-subcategory='archive'] .subcategory-header:hover {
  border-left-color: #7ee2a8;
  background: rgba(126, 226, 168, 0.05);
}

.card-foundations [data-subcategory='archive'] .subcategory-icon {
  color: #7ee2a8;
}

.card-foundations [data-subcategory='finance'] .subcategory-header {
  border-left-color: #118c4f;
}

.card-foundations [data-subcategory='finance'] .subcategory-header:hover {
  border-left-color: #118c4f;
  background: rgba(17, 140, 79, 0.05);
}

.card-foundations [data-subcategory='finance'] .subcategory-icon {
  color: #118c4f;
}

.card-foundations [data-subcategory='health'] .subcategory-header {
  border-left-color: #df887c;
}

.card-foundations [data-subcategory='health'] .subcategory-header:hover {
  border-left-color: #df887c;
  background: rgba(223, 136, 124, 0.05);
}

.card-foundations [data-subcategory='health'] .subcategory-icon {
  color: #df887c;
}

.card-foundations [data-subcategory='science'] .subcategory-header {
  border-left-color: #555d8c;
}

.card-foundations [data-subcategory='science'] .subcategory-header:hover {
  border-left-color: #555d8c;
  background: rgba(85, 93, 140, 0.05);
}

.card-foundations [data-subcategory='science'] .subcategory-icon {
  color: #555d8c;
}

.card-foundations [data-subcategory='thinking-tools'] .subcategory-header {
  border-left-color: #4ecdc4;
}

.card-foundations [data-subcategory='thinking-tools'] .subcategory-header:hover {
  border-left-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.05);
}

.card-foundations [data-subcategory='thinking-tools'] .subcategory-icon {
  color: #4ecdc4;
}

/* Subcategory-specific colors for category Culture */
.card-culture [data-subcategory='art'] .subcategory-header {
  border-left-color: #e77fb7;
}

.card-culture [data-subcategory='art'] .subcategory-header:hover {
  border-left-color: #e77fb7;
  background: rgba(231, 127, 183, 0.05);
}

.card-culture [data-subcategory='art'] .subcategory-icon {
  color: #e77fb7;
}

.card-culture [data-subcategory='community'] .subcategory-header {
  border-left-color: #5ba3d0;
}

.card-culture [data-subcategory='community'] .subcategory-header:hover {
  border-left-color: #5ba3d0;
  background: rgba(91, 163, 208, 0.05);
}

.card-culture [data-subcategory='community'] .subcategory-icon {
  color: #5ba3d0;
}

.card-culture [data-subcategory='history'] .subcategory-header {
  border-left-color: #c89764;
}

.card-culture [data-subcategory='history'] .subcategory-header:hover {
  border-left-color: #c89764;
  background: rgba(200, 151, 100, 0.05);
}

.card-culture [data-subcategory='history'] .subcategory-icon {
  color: #c89764;
}

.card-culture [data-subcategory='ideas'] .subcategory-header {
  border-left-color: #b8a3d9;
}

.card-culture [data-subcategory='ideas'] .subcategory-header:hover {
  border-left-color: #b8a3d9;
  background: rgba(184, 163, 217, 0.05);
}

.card-culture [data-subcategory='ideas'] .subcategory-icon {
  color: #b8a3d9;
}

.card-culture [data-subcategory='trends'] .subcategory-header {
  border-left-color: #66cc33;
}

.card-culture [data-subcategory='trends'] .subcategory-header:hover {
  border-left-color: #66cc33;
  background: rgba(102, 204, 51, 0.05);
}

.card-culture [data-subcategory='trends'] .subcategory-icon {
  color: #66cc33;
}

/* Subcategory-specific colors for category Technology */
.card-technology [data-subcategory='ai'] .subcategory-header {
  border-left-color: #45dba6;
}

.card-technology [data-subcategory='ai'] .subcategory-header:hover {
  border-left-color: #45dba6;
  background: rgba(69, 219, 166, 0.05);
}

.card-technology [data-subcategory='ai'] .subcategory-icon {
  color: #45dba6;
}

.card-technology [data-subcategory='coding'] .subcategory-header {
  border-left-color: #02a5ff;
}

.card-technology [data-subcategory='coding'] .subcategory-header:hover {
  border-left-color: #02a5ff;
  background: rgba(2, 165, 255, 0.05);
}

.card-technology [data-subcategory='coding'] .subcategory-icon {
  color: #02a5ff;
}

.card-technology [data-subcategory='cybersecurity'] .subcategory-header {
  border-left-color: #e27777;
}

.card-technology [data-subcategory='cybersecurity'] .subcategory-header:hover {
  border-left-color: #e27777;
  background: rgba(226, 119, 119, 0.05);
}

.card-technology [data-subcategory='cybersecurity'] .subcategory-icon {
  color: #e27777;
}

.card-technology [data-subcategory='media-tools'] .subcategory-header {
  border-left-color: #b77fe2;
}

.card-technology [data-subcategory='media-tools'] .subcategory-header:hover {
  border-left-color: #b77fe2;
  background: rgba(183, 127, 226, 0.05);
}

.card-technology [data-subcategory='media-tools'] .subcategory-icon {
  color: #b77fe2;
}

.card-technology [data-subcategory='tech-support'] .subcategory-header {
  border-left-color: #5ba3d0;
}

.card-technology [data-subcategory='tech-support'] .subcategory-header:hover {
  border-left-color: #5ba3d0;
  background: rgba(91, 163, 208, 0.05);
}

.card-technology [data-subcategory='tech-support'] .subcategory-icon {
  color: #5ba3d0;
}

.card-technology [data-subcategory='web-design'] .subcategory-header {
  border-left-color: #b8a3d9;
}

.card-technology [data-subcategory='web-design'] .subcategory-header:hover {
  border-left-color: #b8a3d9;
  background: rgba(184, 163, 217, 0.05);
}

.card-technology [data-subcategory='web-design'] .subcategory-icon {
  color: #b8a3d9;
}

/* Subcategory-specific colors for category Entertainment */
.card-entertainment [data-subcategory='books'] .subcategory-header {
  border-left-color: #f6ca00;
}

.card-entertainment [data-subcategory='books'] .subcategory-header:hover {
  border-left-color: #f6ca00;
  background: rgba(246, 202, 0, 0.05);
}

.card-entertainment [data-subcategory='books'] .subcategory-icon {
  color: #f6ca00;
}

.card-entertainment [data-subcategory='games'] .subcategory-header {
  border-left-color: #66cc33;
}

.card-entertainment [data-subcategory='games'] .subcategory-header:hover {
  border-left-color: #66cc33;
  background: rgba(102, 204, 51, 0.05);
}

.card-entertainment [data-subcategory='games'] .subcategory-icon {
  color: #66cc33;
}

.card-entertainment [data-subcategory='movies'] .subcategory-header {
  border-left-color: #8b7fd6;
}

.card-entertainment [data-subcategory='movies'] .subcategory-header:hover {
  border-left-color: #8b7fd6;
  background: rgba(139, 127, 214, 0.05);
}

.card-entertainment [data-subcategory='movies'] .subcategory-icon {
  color: #8b7fd6;
}

.card-entertainment [data-subcategory='music'] .subcategory-header {
  border-left-color: #ff6b9d;
}

.card-entertainment [data-subcategory='music'] .subcategory-header:hover {
  border-left-color: #ff6b9d;
  background: rgba(255, 107, 157, 0.05);
}

.card-entertainment [data-subcategory='music'] .subcategory-icon {
  color: #ff6b9d;
}

.card-entertainment [data-subcategory='series'] .subcategory-header {
  border-left-color: #4ecdc4;
}

.card-entertainment [data-subcategory='series'] .subcategory-header:hover {
  border-left-color: #4ecdc4;
  background: rgba(78, 205, 196, 0.05);
}

.card-entertainment [data-subcategory='series'] .subcategory-icon {
  color: #4ecdc4;
}

/* Link hover colors match subcategory colors */
.card-foundations [data-subcategory='archive'] .favorites-list li a:hover {
  color: #7ee2a8;
  border-bottom-color: #7ee2a8;
}

.card-foundations [data-subcategory='finance'] .favorites-list li a:hover {
  color: #118c4f;
  border-bottom-color: #118c4f;
}

.card-foundations [data-subcategory='health'] .favorites-list li a:hover {
  color: #df887c;
  border-bottom-color: #df887c;
}

.card-foundations [data-subcategory='science'] .favorites-list li a:hover {
  color: #555d8c;
  border-bottom-color: #555d8c;
}

.card-foundations [data-subcategory='thinking-tools'] .favorites-list li a:hover {
  color: #4ecdc4;
  border-bottom-color: #4ecdc4;
}

.card-culture [data-subcategory='art'] .favorites-list li a:hover {
  color: #e77fb7;
  border-bottom-color: #e77fb7;
}

.card-culture [data-subcategory='community'] .favorites-list li a:hover {
  color: #5ba3d0;
  border-bottom-color: #5ba3d0;
}

.card-culture [data-subcategory='history'] .favorites-list li a:hover {
  color: #c89764;
  border-bottom-color: #c89764;
}

.card-culture [data-subcategory='ideas'] .favorites-list li a:hover {
  color: #b8a3d9;
  border-bottom-color: #b8a3d9;
}

.card-culture [data-subcategory='trends'] .favorites-list li a:hover {
  color: #66cc33;
  border-bottom-color: #66cc33;
}

.card-technology [data-subcategory='ai'] .favorites-list li a:hover {
  color: #45dba6;
  border-bottom-color: #45dba6;
}

.card-technology [data-subcategory='coding'] .favorites-list li a:hover {
  color: #02a5ff;
  border-bottom-color: #02a5ff;
}

.card-technology [data-subcategory='cybersecurity'] .favorites-list li a:hover {
  color: #e27777;
  border-bottom-color: #e27777;
}

.card-technology [data-subcategory='media-tools'] .favorites-list li a:hover {
  color: #b77fe2;
  border-bottom-color: #b77fe2;
}

.card-technology [data-subcategory='tech-support'] .favorites-list li a:hover {
  color: #5ba3d0;
  border-bottom-color: #5ba3d0;
}

.card-technology [data-subcategory='web-design'] .favorites-list li a:hover {
  color: #b8a3d9;
  border-bottom-color: #b8a3d9;
}

.card-entertainment [data-subcategory='books'] .favorites-list li a:hover {
  color: #f6ca00;
  border-bottom-color: #f6ca00;
}

.card-entertainment [data-subcategory='games'] .favorites-list li a:hover {
  color: #66cc33;
  border-bottom-color: #66cc33;
}

.card-entertainment [data-subcategory='movies'] .favorites-list li a:hover {
  color: #8b7fd6;
  border-bottom-color: #8b7fd6;
}

.card-entertainment [data-subcategory='music'] .favorites-list li a:hover {
  color: #ff6b9d;
  border-bottom-color: #ff6b9d;
}

.card-entertainment [data-subcategory='series'] .favorites-list li a:hover {
  color: #4ecdc4;
  border-bottom-color: #4ecdc4;
}