html { scroll-behavior: smooth; }
.code { white-space: pre-wrap; word-break: break-word; background: #0b1020; color: #d6deff; border-radius: .75rem; padding: 1rem; font-size: .9rem; }
.num { font-variant-numeric: tabular-nums; }
/* Hero parallax layers */
.parallax-layer { will-change: transform; transform: translateY(0); }
/* Progress bar at top */
#scrollbar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 60; background: linear-gradient(90deg, #eb5d1e, #f97316); }
/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

    /* highlight active nav */
.nav-active {
    background-color: rgba(255,255,255,0.1);
    border-radius: .5rem;
}


  /* Rounded + shadow treatment for the entire Diseases section */
  #diseases .rounded-lg,
  #diseases .rounded-xl,
  #diseases .border.border-gray-800.bg-gray-900,
  #diseases img.rounded-xl {
    border-radius: 0.75rem; /* ~rounded-xl */
    box-shadow:
      0 10px 15px -3px rgba(0,0,0,.35),
      0 4px 6px -2px rgba(0,0,0,.25);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  }

  #diseases .rounded-lg:hover,
  #diseases .rounded-xl:hover,
  #diseases .border.border-gray-800.bg-gray-900:hover,
  #diseases img.rounded-xl:hover {
    box-shadow:
      0 20px 25px -5px rgba(0,0,0,.40),
      0 10px 10px -5px rgba(0,0,0,.30);
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.08);
  }

  /* Modal gets a deeper shadow */
  #model-modal .rounded-2xl {
    box-shadow:
      0 25px 50px -12px rgba(0,0,0,.55),
      0 10px 15px -3px rgba(0,0,0,.35);
  }

  /* Optional: focus style for keyboard users */
  #diseases .rounded-lg:focus-visible,
  #diseases .rounded-xl:focus-visible,
  #diseases button:focus-visible,
  #diseases a:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 2px rgba(251,146,60,.55), /* amber ring */
      0 10px 15px -3px rgba(0,0,0,.35),
      0 4px 6px -2px rgba(0,0,0,.25);
  }

  /* LIGHT MODE ONLY */
  html:not(.dark) #diseases {
    color: #1f2937; /* gray-800 for body text */
  }

  /* Make the main container feel like a card in light mode */
  html:not(.dark) #diseases > .max-w-6xl {
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(235, 93, 30, 0.18); /* soft orange border */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow:
      0 1px 2px rgba(0,0,0,0.06),
      0 10px 20px -10px rgba(17,24,39,0.12);
  }

  /* Headings a bit darker for contrast */
  html:not(.dark) #diseases h2,
  html:not(.dark) #diseases h3,
  html:not(.dark) #diseases h4,
  html:not(.dark) #diseases h5 {
    color: #111827; /* gray-900 */
  }

  /* Cards: flip to white with subtle borders in light mode */
  html:not(.dark) #diseases .border.border-gray-800.bg-gray-900 {
    background: #ffffff;
    border-color: rgba(17,24,39,0.08); /* light gray border */
    color: #1f2937; /* gray-800 text on white */
    box-shadow:
      0 1px 2px rgba(0,0,0,0.05),
      0 6px 14px -6px rgba(17,24,39,0.12);
  }

  /* Body copy that was using lighter grays gets bumped up */
  html:not(.dark) #diseases .text-gray-300,
  html:not(.dark) #diseases .text-gray-400,
  html:not(.dark) #diseases p,
  html:not(.dark) #diseases li {
    color: #374151; /* gray-700 */
  }

  /* Code blocks more legible on a warm background */
  html:not(.dark) #diseases pre,
  html:not(.dark) #diseases code {
    background: #fff7ed; /* orange-50 */
    color: #0f172a;      /* slate-900 */
    border: 1px solid rgba(235, 93, 30, 0.25);
  }
  html:not(.dark) #diseases pre {
    border-radius: 0.75rem; /* rounded-xl */
  }

  /* Tabs: clearer selected state in light mode */
  html:not(.dark) #diseases .disease-tab[aria-selected="true"] {
    background: #fef3c7; /* amber-100 */
    color: #9a3412;      /* orange-800-ish */
    border-bottom: 2px solid #f59e0b; /* amber-500 */
  }
  html:not(.dark) #diseases .disease-tab[aria-selected="false"] {
    color: #374151; /* gray-700 */
  }

  /* Capability badges keep good contrast in light mode */
  html:not(.dark) #diseases .text-\[10px\].px-1\.5.py-0\.5.rounded.border {
    background: #f9fafb;           /* gray-50 */
    color: #1f2937;                 /* gray-800 */
    border-color: rgba(17,24,39,.08);
  }
  html:not(.dark) #diseases .line-through {
    color: #9ca3af; /* gray-400 for disabled */
    background: #f3f4f6; /* gray-100 */
  }

  /* Orange accents for cohesion */
  html:not(.dark) #diseases .accent-bar,
  html:not(.dark) #diseases .bg-orange-500,
  html:not(.dark) #diseases .bg-orange-500\/15,
  html:not(.dark) #diseases .text-orange-300,
  html:not(.dark) #diseases .border-orange-500\/30 {
    /* keep as-is, just ensuring they sit on white nicely */
  }

  /* Modal: lift it slightly more in light mode */
  html:not(.dark) #model-modal .border.border-gray-800.rounded-2xl {
    background: #ffffff;
    border-color: rgba(17,24,39,0.08);
    box-shadow:
      0 20px 45px -10px rgba(0,0,0,0.25),
      0 8px 16px -8px rgba(0,0,0,0.12);
    color: #111827;
  }

  /* Desktop dropdown panel */
  .dropdown-panel{
    position:absolute; inset-inline-start:0; top:100%;
    margin-top:.5rem; min-width:14rem;
    background:#0b0f19; /* dark base */
    border:1px solid #1f2937; /* gray-800 */
    border-radius:.75rem;
    box-shadow:0 20px 45px -10px rgba(0,0,0,.5), 0 8px 16px -8px rgba(0,0,0,.35);
    padding:.5rem; opacity:0; transform:translateY(6px); pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    z-index:40;
  }
  /* Show on hover/focus (desktop) */
  @media (min-width: 768px){
    [data-dropdown]:hover > .dropdown-panel,
    [data-dropdown]:focus-within > .dropdown-panel{
      opacity:1; transform:translateY(0); pointer-events:auto;
    }
  }
  .dropdown-item{
    display:block; padding:.5rem .75rem; border-radius:.5rem;
    color:#e5e7eb; /* gray-200 */ text-decoration:none;
  }
  .dropdown-item:hover{ background:rgba(255,255,255,.06); color:#fff; }

  /* Light mode adjustments */
  html:not(.dark) .dropdown-panel{
    background:#ffffff; border-color:rgba(235,93,30,.18);
    box-shadow:0 10px 25px -10px rgba(17,24,39,.18), 0 2px 6px rgba(17,24,39,.08);
  }
  html:not(.dark) .dropdown-item{ color:#1f2937; }
  html:not(.dark) .dropdown-item:hover{ background:#fff7ed; /* orange-50 */ color:#7c2d12; }

  /* Mobile sub-menu link */
  .mob-link{
    display:block; padding:.5rem .75rem; margin:.25rem 0;
    border-radius:.5rem; color:#e5e7eb;
  }
  .mob-link:hover{ background:rgba(255,255,255,.06); color:#fff; }

  /* Ensure the wrapper is the hover area and has a hover bridge */
  [data-dropdown] { position: relative; }

  /* Remove the visual gap so the cursor doesn't fall through */
  .dropdown-panel { margin-top: 0 !important; }

  /* Add an invisible bridge between the button and panel */
  [data-dropdown]::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 12px;                 /* size of the safe zone */
  }

  /* Keep panel open when hovering the panel itself */
  @media (min-width: 768px) {
    [data-dropdown]:hover > .dropdown-panel,
    [data-dropdown]:focus-within > .dropdown-panel,
    [data-dropdown] > .dropdown-panel:hover {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
  }
  
  [data-dropdown][data-open] > .dropdown-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }