/* ==========================================================================
   QUORIT — RESOURCES LIBRARY STYLESHEET
   Design Language: Premium clinical + scientific resource library
   ========================================================================== */

/* Design Tokens */
:root {
  --color-primary: #00152a;
  --color-primary-container: #102a43;
  --color-secondary: #167C80;
  --color-secondary-hover: #00696d;
  --color-soft-teal: #DCEFED;
  --color-medical-green: #5F8F63;
  --color-charcoal: #273444;
  --color-off-white: #F7F8F6;
  --color-surface-white: #ffffff;
  --color-gold: #B9965B;
  --color-border: rgba(39, 52, 68, 0.12);
  --color-border-subtle: rgba(39, 52, 68, 0.08);
}

/* Resource Card Styling */
.resource-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease;
}

.resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(16, 42, 67, 0.09);
  border-color: rgba(22, 124, 128, 0.35);
}

/* Resource Category Navigation (Scrollspy) */
.resource-nav-sticky {
  position: sticky;
  top: 80px;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-subtle);
}

.resource-nav-item {
  position: relative;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.resource-nav-item.active {
  color: #167C80;
  font-weight: 700;
}

.resource-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background-color: #167C80;
  border-radius: 2px 2px 0 0;
}

/* Filter Pills */
.filter-pill {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.filter-pill.active {
  background-color: #102A43;
  color: #ffffff;
  border-color: #102A43;
  box-shadow: 0 4px 12px rgba(16, 42, 67, 0.15);
}

.filter-pill:not(.active):hover {
  background-color: #DCEFED;
  color: #004F52;
  border-color: #167C80;
}

/* Mobile Navigation Drawer */
#mobile-drawer {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

#mobile-drawer.drawer-closed {
  transform: translateX(100%);
  pointer-events: none;
}

#mobile-drawer.drawer-open {
  transform: translateX(0);
  pointer-events: auto;
}

/* Subtle Document Grid Background */
.bg-grid-subtle {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(16, 42, 67, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 42, 67, 0.03) 1px, transparent 1px);
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}