/* ============================================================
   FindYourQari — Shared Stylesheet
   Used across all pages for consistent branding & behavior
   ============================================================ */

/* ---- Islamic Geometric Pattern Overlays ---- */
.islamic-pattern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 0l5.878 18.09h19.021l-15.388 11.18 5.878 18.09-15.389-11.18-15.388 11.18 5.878-18.09-15.388-11.18h19.021z' fill='%23d4af37' fill-opacity='0.03'/%3E%3C/svg%3E");
}

.islamic-pattern-dense {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15 0l2.94 9.045h9.51l-7.694 5.59 2.94 9.045-7.695-5.59-7.694 5.59 2.94-9.045-7.694-5.59h9.51z' fill='%23d4af37' fill-opacity='0.05'/%3E%3C/svg%3E");
}

/* ---- Logo glow animation ---- */
@keyframes noorGlow {
    0% { transform: scale(0.9); opacity: 0.5; filter: blur(3px); }
    100% { transform: scale(1.3); opacity: 0.95; filter: blur(5px); }
}
.glow-effect {
    animation: noorGlow 2.5s infinite alternate ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .glow-effect,
    .animate-pulse,
    .animate-ping,
    .animate-fade-in,
    .animate-slide-up {
        animation: none !important;
    }
}

/* ---- Modal / toast entrance animations ---- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.2s ease-out; }
.animate-slide-up { animation: slideUp 0.25s ease-out; }

/* ---- Scrollbar hiding utility ---- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Visible keyboard focus (accessibility) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Line clamp utility (cross-browser) ---- */
.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;
}

/* ---- Blog article prose styling ---- */
.prose-qari h2 {
    font-weight: 800;
    color: #0F3D2E;
    font-size: 1.5rem;
    margin-top: 2.25rem;
    margin-bottom: 0.85rem;
    line-height: 1.3;
}
.prose-qari h3 {
    font-weight: 700;
    color: #0F3D2E;
    font-size: 1.2rem;
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
}
.prose-qari p {
    margin-bottom: 1.1rem;
    line-height: 1.8;
    color: #1C2824;
    font-size: 1.02rem;
}
.prose-qari ul, .prose-qari ol {
    margin-bottom: 1.1rem;
    padding-left: 1.5rem;
    line-height: 1.8;
}
.prose-qari ul { list-style-type: disc; }
.prose-qari ol { list-style-type: decimal; }
.prose-qari li { margin-bottom: 0.4rem; color: #1C2824; }
.prose-qari blockquote {
    border-left: 4px solid #D4AF37;
    background: #FAF6F0;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    font-style: italic;
    color: #0F3D2E;
}
.prose-qari a {
    color: #0F3D2E;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #D4AF37;
}
.prose-qari a:hover { color: #D4AF37; }
.prose-qari strong { color: #0F3D2E; font-weight: 700; }