/* ==========================================================================
   404 not found - developer editorial theme by pii
   single font: jetbrains mono (vietnamese spacing optimized)
   case: all lowercase
   colors: cream (#FDFBF7), rose pink (#E8A598), ink black (#18181B)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  --color-cream-base: #FDFBF7;
  --color-cream-muted: #F6F2EC;
  --color-cream-card: #FAF6F0;
  --color-pink-soft: #FCECE9;
  --color-pink-accent: #E8A598;
  --color-pink-deep: #D48072;
  --color-black-ink: #18181B;
  --color-gray-subtle: #71717A;
  --color-border-ink: rgba(24, 24, 27, 0.12);
  --color-border-dark: #18181B;
}

/* Global Font & Spacing Fix for Vietnamese Diacritics */
*, *::before, *::after {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.01em; /* giãn nhẹ để dấu thanh và chữ cái không chạm vào nhau */
}

html, body, h1, h2, h3, h4, h5, h6, p, span, a, button, input, textarea, select, blockquote, label, div, nav, header, footer {
  text-transform: lowercase;
}

/* Tối ưu khoảng cách dòng (line-height) để các dấu mũ, dấu thanh trên dưới không bị đè vào nhau */
body {
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

p, li, blockquote {
  line-height: 1.75 !important;
}

/* Force override any lingering uppercase or tight tracking utility */
.uppercase, [class*="uppercase"] {
  text-transform: lowercase !important;
}

.tracking-tight, .tracking-tighter {
  letter-spacing: 0 !important;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-cream-base);
  color: var(--color-black-ink);
  font-family: 'JetBrains Mono', monospace;
}

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

::-webkit-scrollbar-track {
  background: var(--color-cream-base);
}

::-webkit-scrollbar-thumb {
  background: #E4D8CE;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-pink-accent);
}

/* Editorial Borders & Decorators */
.border-editorial {
  border-color: var(--color-black-ink);
}

.border-editorial-subtle {
  border-color: rgba(24, 24, 27, 0.1);
}

/* Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: 200%;
  animation: marquee 28s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Card Hover Lift & Shadow */
.editorial-card {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.editorial-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 6px 0px 0px #18181B;
}

/* Image Zoom Effect */
.card-image-wrap {
  overflow: hidden;
}

.card-image-wrap img {
  transition: transform 0.4s ease;
}

.editorial-card:hover .card-image-wrap img {
  transform: scale(1.04);
}

/* Nav Link Hover Underline */
.nav-link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-pink-deep);
  transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  font-weight: 700;
  color: var(--color-black-ink);
}

/* Toast Notification */
#toast-notification {
  transform: translateY(120%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

#toast-notification.show {
  transform: translateY(0);
}