/* Barcha ommaviy sahifalarda umumiy uslublar (avval base.html ichida edi).
   Sahifaga xos uslublar hamon shu sahifaning {% block extra_head %} ichida qoladi. */

html, body { min-height: 100%; }
html { scrollbar-gutter: stable; background-color: rgb(var(--c-ink)); }
body { font-family: 'Inter', sans-serif; background-color: rgb(var(--c-ink)); }
.font-display { font-family: 'Oswald', sans-serif; }

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.logo-sub { text-align-last: justify; }

/* detective-vibe entrance */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; animation: reveal-up .7s ease forwards; }
.reveal-1 { animation-delay: .1s; }
.reveal-2 { animation-delay: .32s; }
.reveal-3 { animation-delay: .54s; }
.reveal-4 { animation-delay: .76s; }

/* flashlight sweep on CTAs */
.btn-flashlight { position: relative; overflow: hidden; }
.btn-flashlight::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .65s ease;
}
.btn-flashlight:hover::before { left: 130%; }

/* nav link underline reveal */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  height: 1px; width: 0;
  background: #dc2626;
  transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* mobil menyu havolalari (base.html #mobile-menu) */
.mobile-link { display: block; padding: .7rem .75rem; margin: 0 -.75rem; border-radius: .375rem; border-left: 2px solid transparent; transition: background-color .15s, color .15s; }
.mobile-link:hover { background: rgba(255,255,255,.04); color: #fff; }
.mobile-link.active { border-left-color: #dc2626; background: rgba(220,38,38,.1); color: #fff; }
html[data-theme="light"] .mobile-link:hover { background: rgba(15,23,42,.04); color: #0f172a; }
html[data-theme="light"] .mobile-link.active { color: #0f172a; }

/* evidence marker pulse */
@keyframes marker-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
  70% { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
.marker-pulse { animation: marker-pulse 2.2s ease-out infinite; }

.value-card { transition: transform .3s ease, border-color .3s ease; }
.value-card:hover { transform: translateY(-4px); border-color: rgba(220,38,38,.5); }
.timeline-line { background: linear-gradient(180deg, rgba(220,38,38,.6), rgba(220,38,38,0)); }

/* case difficulty levels */
:root {
  --diff-easy: #16803c;
  --diff-medium: #d99a1b;
  --diff-hard: #e2531e;
  --diff-expert: #b3121f;
}
.diff-easy   { color: var(--diff-easy); }
.diff-medium { color: var(--diff-medium); }
.diff-hard   { color: var(--diff-hard); }
.diff-expert { color: var(--diff-expert); }

/* Sahifalar orasidagi cross-fade (@view-transition) o‘chirildi: sahifa kechikib tayyorlanganda qora “pauza” bo‘lardi */

/* Pastga tushganda ko‘rinadigan bloklar uchun umumiy animatsiya (".reveal" faqat hero uchun; bu – qolganlari uchun) */
.reveal-scroll { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal-scroll.in-view { opacity: 1; transform: translateY(0); }

/* Xush kelibsiz oynasidagi matn (welcome_body – admindan HTML sifatida keladi) */
.welcome-body p + ul { margin-top: .75rem; }
.welcome-body ul { list-style: disc; padding-left: 1.1rem; }
.welcome-body li { margin-top: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scroll, .case-card { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Uzun matnli sahifalar (maqola, legal) uchun umumiy tipografika. article_detail.html va legal_page.html ishlatadi. */
.prose p { margin-top: 1.1em; line-height: 1.8; color: #cbd5e1; font-size: .95rem; }
.prose h2 { font-family: 'Oswald', sans-serif; margin-top: 2.2em; margin-bottom: .5em; font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.prose ul, .prose ol { margin-top: 1em; padding-left: 1.25em; color: #cbd5e1; font-size: .95rem; line-height: 1.8; }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-top: .4em; }
.prose li::marker { color: #dc2626; }
.prose blockquote {
  margin: 1.8em 0; padding: 1em 1.4em; border-left: 3px solid #dc2626;
  background: rgba(220,38,38,.06); border-radius: .375rem;
  font-family: 'Oswald', sans-serif; font-style: italic; color: #f87171; font-size: 1.05rem;
}