/**
 * Prompt Duniya (promptduniya.in) - Custom Styles, Full Dark/Light Theme & Uncropped Image Frames
 * Loaded alongside local compiled tailwind.css
 */

:root {
  --pd-accent: #4f46e5;
  --pd-accent-hover: #4338ca;
}

/* Smooth custom scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

html.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

/* =========================================================================
 * UNCROPPED IMAGE FRAME RULES
 * Ensures uploaded images always display 100% of their content in the frame
 * without cutting or cropping edges.
 * ========================================================================= */
.pd-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background-color: #f1f5f9;
}
.pd-image-frame img,
.pd-uncropped-img {
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================================
 * THEME TOGGLE ICON VISIBILITY
 * ========================================================================= */
html.dark .pd-icon-sun {
  display: block !important;
}
html.dark .pd-icon-moon {
  display: none !important;
}

/* =========================================================================
 * COMPLETE DARK MODE THEME (Matching Screenshot 124347)
 * ========================================================================= */
html.dark body,
html.dark .pd-body {
  background-color: #0b1120 !important;
  color: #f1f5f9 !important;
}

html.dark .pd-header {
  background-color: rgba(11, 17, 32, 0.95) !important;
  border-color: #1e293b !important;
}

html.dark .pd-brand-title,
html.dark .pd-hero-title,
html.dark .pd-card-title {
  color: #f8fafc !important;
}

html.dark .pd-brand-sub {
  color: #818cf8 !important;
}

html.dark .pd-nav-pill {
  background-color: #111827 !important;
  border-color: #1e293b !important;
}

html.dark .pd-nav-link {
  color: #cbd5e1 !important;
}
html.dark .pd-nav-link:hover {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

html.dark .pd-dropdown {
  background-color: #111827 !important;
  border-color: #1e293b !important;
}
html.dark .pd-dropdown-item {
  color: #e2e8f0 !important;
}
html.dark .pd-dropdown-item:hover {
  background-color: #1e293b !important;
  color: #818cf8 !important;
}
html.dark .pd-badge-count {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
}

html.dark .pd-hero {
  background: linear-gradient(to bottom, #0f172a, #0b1120) !important;
  border-color: #1e293b !important;
}

html.dark .pd-filter-card,
html.dark .pd-card {
  background-color: #111827 !important;
  border-color: #1e293b !important;
  color: #f1f5f9 !important;
}

html.dark .pd-section-alt,
html.dark .pd-footer {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}

html.dark .pd-image-frame {
  background-color: #0f172a !important;
}

html.dark .pd-input {
  background-color: #0b1120 !important;
  border-color: #1e293b !important;
  color: #f8fafc !important;
}
html.dark .pd-input:focus {
  border-color: #6366f1 !important;
  background-color: #0f172a !important;
}
html.dark .pd-input-transparent {
  color: #f8fafc !important;
}

html.dark .pd-theme-btn,
html.dark .pd-btn-secondary {
  background-color: #111827 !important;
  border-color: #1e293b !important;
  color: #e2e8f0 !important;
}
html.dark .pd-theme-btn:hover,
html.dark .pd-btn-secondary:hover {
  background-color: #1e293b !important;
  border-color: #6366f1 !important;
  color: #ffffff !important;
}

html.dark .pd-pill {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html.dark .pd-text-muted,
html.dark .pd-label {
  color: #94a3b8 !important;
}

html.dark .pd-border {
  border-color: #1e293b !important;
}

/* =========================================================================
 * RICH BLOG & STATIC PAGE TYPOGRAPHY (.pv-prose)
 * Supports H1, H2, H3, H4, Bold, Italic, Underline, Paragraph, Blockquote
 * ========================================================================= */
.pv-prose h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  margin-top: 1.75rem;
  margin-bottom: 0.85rem;
  line-height: 1.25;
}
.pv-prose h2 {
  font-size: 1.375rem;
  font-weight: 800;
  color: #0f172a;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.pv-prose h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}
.pv-prose h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #334155;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.pv-prose p {
  color: #475569;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.pv-prose strong,
.pv-prose b {
  font-weight: 700;
  color: #0f172a;
}
.pv-prose em,
.pv-prose i {
  font-style: italic;
}
.pv-prose u {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pv-prose blockquote {
  border-left: 4px solid #4f46e5;
  background-color: #eef2ff;
  color: #1e1b4b;
  padding: 1rem 1.25rem;
  border-radius: 0 0.85rem 0.85rem 0;
  font-style: italic;
  margin: 1.25rem 0;
}
.pv-prose ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  color: #475569;
  margin-bottom: 1rem;
}
.pv-prose ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  color: #475569;
  margin-bottom: 1rem;
}
.pv-prose li {
  margin-bottom: 0.4rem;
}
.pv-prose code {
  background-color: #f1f5f9;
  color: #4338ca;
  padding: 0.15rem 0.4rem;
  border-radius: 0.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875em;
}
.pv-prose pre {
  background-color: #0f172a;
  color: #f8fafc;
  padding: 1rem;
  border-radius: 0.85rem;
  overflow-x: auto;
  margin: 1rem 0;
}
.pv-prose a {
  color: #4f46e5;
  text-decoration: underline;
}
.pv-prose img {
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
  border-radius: 0.85rem;
  margin: 1rem auto;
  display: block;
}

html.dark .pv-prose h1,
html.dark .pv-prose h2,
html.dark .pv-prose h3,
html.dark .pv-prose h4,
html.dark .pv-prose strong,
html.dark .pv-prose b {
  color: #f8fafc !important;
}
html.dark .pv-prose p,
html.dark .pv-prose ul,
html.dark .pv-prose ol {
  color: #cbd5e1 !important;
}
html.dark .pv-prose blockquote {
  background-color: #1e1b4b !important;
  color: #e0e7ff !important;
  border-left-color: #818cf8 !important;
}
html.dark .pv-prose code {
  background-color: #1e293b !important;
  color: #a5b4fc !important;
}

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