/* style.css - PMSW Custom Styles */

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

/* ============ Prose Styles for CMS Pages ============ */
.prose h1 { font-size: 1.75rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose h2 { font-size: 1.5rem; margin-top: 1.25rem; margin-bottom: 0.5rem; border-bottom: 2px solid #f1f5f9; padding-bottom: 0.5rem; }
.prose h3 { font-size: 1.25rem; margin-top: 1rem; margin-bottom: 0.5rem; }
.prose p { margin-bottom: 1rem; line-height: 1.8; }
.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.25rem; }
.prose img { max-width: 100%; height: auto; border-radius: 0.75rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.prose th, .prose td { border: 1px solid #e2e8f0; padding: 0.5rem 0.75rem; text-align: left; }
.prose th { background: #f8fafc; font-weight: 600; }
.prose blockquote { border-left: 4px solid var(--primary); padding-left: 1rem; font-style: italic; color: #64748b; }

/* ============ Animations ============ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Staggered animation delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }

/* ============ Slider Dot Active State ============ */
.slider-dot.active {
    background-color: white;
    width: 1.5rem;
}
.slider-dot {
    cursor: pointer;
}

/* ============ Line Clamp ============ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============ Quill Editor Overrides ============ */
.ql-toolbar.ql-snow {
    border-color: #334155 !important;
    background: #1e293b !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
}
.ql-toolbar.ql-snow .ql-stroke {
    stroke: #94a3b8 !important;
}
.ql-toolbar.ql-snow .ql-fill {
    fill: #94a3b8 !important;
}
.ql-toolbar.ql-snow .ql-picker-label {
    color: #94a3b8 !important;
}
.ql-toolbar.ql-snow button:hover .ql-stroke,
.ql-toolbar.ql-snow .ql-picker-label:hover {
    stroke: white !important;
    color: white !important;
}
.ql-container.ql-snow {
    border-color: #334155 !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
    font-family: 'Inter', 'Noto Sans Bengali', sans-serif !important;
    font-size: 14px !important;
    min-height: 400px;
}
.ql-editor {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    min-height: 400px;
}
.ql-editor.ql-blank::before {
    color: #475569 !important;
    font-style: normal !important;
}
.ql-snow .ql-picker-options {
    background: #1e293b !important;
    border-color: #334155 !important;
}
.ql-snow .ql-picker-item {
    color: #94a3b8 !important;
}
.ql-snow .ql-picker-item:hover {
    color: white !important;
}

/* ============ Responsive Print ============ */
@media print {
    header, footer, nav, .no-print { display: none !important; }
    body { background: white; color: black; }
    .prose { max-width: 100%; }
}