/* ==========================================================================
   CoJourners Premium Design System - Custom Theme Stylesheet
   Warm Traveler Diary Theme - Kraft Beige, Sage & Forest Green, Mustard Yellow
   Strict Compliance with WCAG 2.1 AA (Contrast Ratio >= 4.5:1)
   ========================================================================== */

:root {
  /* Dynamic Design Color System */
  --bg-color: #F4F1EA;       /* Warm Kraft Notebook Beige */
  --surface-color: #FFFFFF;  /* Pure White for ultimate card contrast */
  --cream-color: #FDFCF7;    /* Diary Cream Container Background */
  --border-color: #E6E2D6;   /* Soft warm tactile border */
  
  --text-heading: #0B140E;   /* Forest Black (Very strong contrast for headings) */
  --text-color: #1E201F;     /* Deep Charcoal (Rich readable body text) */
  --text-light: #5A5E5B;     /* Warm High-contrast Gray (Passed >= 4.5:1 check) */
  
  /* Brand Accents */
  --primary-color: #7A8F7B;  /* Muted Sage Green */
  --primary-dark: #3D5240;   /* Rich Forest Green */
  --mustard-color: #E5B842;  /* Warm Mustard Yellow */
  
  /* Layout Architecture */
  --radius-normal: 16px;
  --radius-btn: 9999px;
  --border-width: 1px;
  
  /* Premium Soft Shadows */
  --shadow-normal: 0 4px 12px rgba(61, 82, 64, 0.03);
  --shadow-soft: 0 6px 20px -2px rgba(61, 82, 64, 0.05), 0 0 3px rgba(61, 82, 64, 0.02);
  --shadow-float: 0 12px 36px -8px rgba(61, 82, 64, 0.18);
}

/* ==========================================================================
   1. Typography & Global Reset
   ========================================================================== */

body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  letter-spacing: -0.02em !important;
  line-height: 1.6 !important;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .font-serif-custom {
  font-family: 'Nanum Myeongjo', Georgia, serif !important;
  color: var(--text-heading) !important;
}

/* Smooth Navigation Scroll */
html {
  scroll-behavior: smooth;
}

/* Hide standard ugly browser scrollbars while keeping swipeability */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* ==========================================================================
   2. Header & Navigation Tabs
   ========================================================================== */

header {
  background-color: rgba(253, 252, 247, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

header .text-2xl {
  font-family: 'Nanum Myeongjo', Georgia, serif !important;
  color: var(--primary-dark) !important;
}

/* Navigation Tabs */
.tab-active {
  border-bottom: 3px solid var(--primary-dark) !important;
  color: var(--primary-dark) !important;
  font-weight: 800 !important;
  font-family: 'Nanum Myeongjo', Georgia, serif !important;
}

.tab-inactive {
  color: var(--text-light) !important;
  font-weight: 500 !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tab-inactive:hover {
  color: var(--primary-dark) !important;
}

/* ==========================================================================
   3. Premium Card Layout & Defense Zoom Coding
   ========================================================================== */

#home-cards div[onclick^="navigate"],
#step-materials > div {
  background-color: var(--surface-color) !important;
  border-radius: var(--radius-normal) !important;
  border: var(--border-width) solid var(--border-color) !important;
  box-shadow: var(--shadow-normal) !important;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  overflow: hidden !important;
}

#home-cards div[onclick^="navigate"]:hover,
#step-materials > div:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px rgba(61, 82, 64, 0.08) !important;
  border-color: var(--primary-color) !important;
}

/* Card Image Defensive aspect-ratio & covering wrapper */
#home-cards div[onclick^="navigate"] > div:first-child,
#step-materials > div > div:first-child {
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #E6E2D6 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

#home-cards div[onclick^="navigate"] > div:first-child img,
#step-materials > div > div:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Zoom effect on card hover */
#home-cards div[onclick^="navigate"]:hover > div:first-child img,
#step-materials > div:hover > div:first-child img {
  transform: scale(1.05) !important;
}

/* ==========================================================================
   4. Step details materials slider override
   ========================================================================== */

#step-materials {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1.25rem !important;
}

#step-materials::-webkit-scrollbar {
  display: none !important;
}

#step-materials > div {
  flex-shrink: 0 !important;
  width: 250px !important;
  scroll-snap-align: start;
}

/* Layout spacing improvement on large monitors */
@media (min-width: 768px) {
  #home-cards .flex.overflow-x-auto {
    gap: 1.25rem !important;
  }
}

/* ==========================================================================
   5. Card Content Details
   ========================================================================== */

#home-cards h3 {
  font-family: 'Nanum Myeongjo', Georgia, serif !important;
  font-weight: 900 !important;
  color: var(--text-heading) !important;
}

#home-cards button {
  color: var(--primary-color) !important;
  font-weight: 700 !important;
  transition: color 0.25s ease !important;
}

#home-cards button:hover {
  color: var(--primary-dark) !important;
}

/* Dynamic steps circular icons */
#home-cards .rounded-full.bg-primary\/10 {
  background-color: rgba(122, 143, 123, 0.15) !important;
  color: var(--primary-dark) !important;
}

#home-cards h4,
#step-materials h4 {
  font-family: 'Pretendard', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text-color) !important;
  line-height: 1.45 !important;
  font-size: 13.5px !important;
}

/* Card metadata badges */
#home-cards span.bg-black\/60,
#step-materials span.bg-black\/60 {
  background-color: rgba(61, 82, 64, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.02em !important;
  backdrop-filter: blur(4px) !important;
}

/* ==========================================================================
   6. Step Material Action Buttons
   ========================================================================== */

#step-materials button,
#step-materials a {
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: none !important;
}

#step-materials a.bg-primary {
  background-color: var(--primary-dark) !important;
  color: #FFFFFF !important;
}

#step-materials a.bg-primary:hover {
  background-color: #2B3B2D !important;
  box-shadow: var(--shadow-float) !important;
}

#step-materials button.bg-red-400 {
  background-color: #C97A7A !important;
  color: #FFFFFF !important;
}

#step-materials button.bg-yellow-400 {
  background-color: #D4A35C !important;
  color: #FFFFFF !important;
}

#step-materials button.bg-gray-400 {
  background-color: var(--text-light) !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   7. Duolingo Journey Map Styling
   ========================================================================== */

#journey-svg path {
  stroke: var(--border-color) !important;
}

/* Unlocked Journey Step Node */
#journey-path button.bg-primary {
  background-color: var(--primary-dark) !important;
  border-color: #2B3B2D !important;
  color: #FFFFFF !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

#journey-path button.bg-primary:hover {
  transform: scale(1.05) !important;
  background-color: #2B3B2D !important;
}

/* Locked gated step node */
#journey-path button.bg-gray-300 {
  background-color: #D6D2C4 !important;
  border-color: #B8B4A6 !important;
  color: #8C8A82 !important;
}

#journey-path button.bg-gray-300 svg {
  color: #8C8A82 !important;
}

#journey-path span.bg-surface\/90 {
  background-color: rgba(253, 252, 247, 0.9) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
  font-family: 'Nanum Myeongjo', Georgia, serif !important;
  font-weight: 800 !important;
}

/* Current stage pulse ring override */
#journey-path button.ring-primary\/30 {
  box-shadow: 0 0 0 4px rgba(122, 143, 123, 0.25) !important;
}

/* ==========================================================================
   8. Modals & Interactive Overlays
   ========================================================================== */

#register-modal > div,
#auth-modal > div,
#mission-modal > div {
  background-color: var(--cream-color) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-float) !important;
}

/* Recommended tools within the mission completion screen */
#mission-tools-list a {
  background-color: var(--surface-color) !important;
  border-color: var(--border-color) !important;
  border-radius: var(--radius-normal) !important;
}

#mission-tools-list a:hover {
  border-color: var(--primary-color) !important;
  box-shadow: var(--shadow-normal) !important;
}

/* Dynamic loader spinner */
.loader {
  border: 3px solid var(--border-color) !important;
  border-top: 3px solid var(--primary-dark) !important;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}