/* ============================================================
   Nord Dark Theme - Arctic blue-gray with frosted glass effects
   ============================================================ */
:root {
  --c-body: #1e1e1e;
  --c-nord0: #2e3440;
  --c-nord1: #3b4252;
  --c-nord2: #434c5e;
  --c-nord3: #4c566a;
  --c-nord4: #d8dee9;
  --c-nord5: #e5e9f0;
  --c-nord6: #eceff4;
  --c-nord8: #88c0d0;
  --c-nord9: #81a1c1;
  --c-nord11: #bf616a;
  --c-dark: #1e1e1e;
  --c-accent: #bf616a;
  --c-nav-title: #b9003d;
  --c-nav-list: #d86813;
  --c-link-hover: #bf616a;
  --c-prose-h1: #eceff4;
  --c-prose-h2: #e5e9f0;
  --c-prose-h3: #d8dee9;
  --c-prose-link: #bf616a;
  --c-backtop: #5e81ac;
  --c-active: #e56673;
  --c-resou: #88c0d0;
  --c-footer-text: #7b8898;
  --c-footer-heading: #c8cdd5;
  --c-footer-link: #c8cdd5;
}

/* Header - frosted glass */
.fixed.z-max.w-full.bg-norddark {
  background: rgba(46, 52, 64, 0.85) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(216, 222, 233, 0.08);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  min-height: 56px;
}

/* Site logo */
.site-logo {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Cards - soft nordic shadows */
.thumbnail {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  overflow: hidden;
}
.thumbnail:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(136, 192, 208, 0.15);
}
.thumbnail .relative.aspect-w-16 {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.3s ease;
}
.thumbnail:hover .relative.aspect-w-16 {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(136, 192, 208, 0.2);
}

/* Card title text */
.thumbnail .my-2 a {
  color: var(--c-nord4);
  transition: color 0.25s ease;
}
.thumbnail:hover .my-2 a,
.thumbnail .my-2 a:hover {
  color: var(--c-nord8);
}

/* Lazy loaded fade-in */
.lazy-loaded {
  animation: nordFadeIn 0.5s ease-out;
}
@keyframes nordFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

/* Section headings */
h2.text-2xl, h2 {
  color: var(--c-nord6) !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Navigation boxes */
.nav_box {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.nav_title {
  background: var(--c-nav-title);
  font-weight: 600;
}
.nav_list {
  background: var(--c-nav-list);
}

/* Marquee */
.marquee-container {
  background: linear-gradient(180deg, rgba(46, 52, 64, 0.6), transparent);
  border-radius: 6px;
  margin-bottom: 8px;
}
.marquee a {
  color: var(--c-nord4);
  font-weight: 600;
}
.marquee a:hover {
  color: var(--c-nord11);
}

/* Back to top */
#backToTop {
  background: var(--c-backtop);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(94, 129, 172, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
}
#backToTop:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(94, 129, 172, 0.6);
}

/* Pagination */
.box-page ul.page li {
  border-color: var(--c-nord3);
  border-radius: 6px;
  transition: all 0.2s ease;
}
.box-page ul.page li:hover {
  background-color: var(--c-nord3);
}
.box-page ul.page li.active {
  background-color: var(--c-nord8);
}
.box-page ul.page li.active a {
  color: var(--c-nord0);
}

/* Hot search tags */
.resou-item {
  background-color: var(--c-resou);
  border-radius: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.resou-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(136, 192, 208, 0.3);
}

/* Footer */
footer {
  border-top: 1px solid rgba(76, 86, 106, 0.3);
}

/* Video player container */
.pop {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Grid gap */
.gap-list {
  gap: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
  .fixed.z-max.w-full.bg-norddark {
    backdrop-filter: blur(12px);
    min-height: 48px;
  }
  .thumbnail:hover {
    transform: translateY(-2px);
  }
  .gap-list {
    gap: 0.5rem;
  }
}