/*
Theme Name: MARC
Theme URI: https://minaramasjid.com
Author: Owais Razvi
Author URI: https://minaramasjid.com
Description: Official theme for Minara Masjid and Maula Ali Research Center - A comprehensive Islamic knowledge portal featuring books, articles, scholars, and community updates.
Version: 6.0.0
Requires at least: 6.0
Tested up to: 6.9.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minara
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, rtl-language-support, block-patterns, full-site-editing, wide-blocks

This theme is designed for Minara Masjid and Maula Ali Research Center.

Changelog:
- v6.0.0: COMPLETE Gutenberg/Block Editor architecture upgrade. theme.json v3 extended with customTemplates (10), templateParts (3), 18 color palette, 5 gradients, 11 font sizes, 10 spacing sizes, 8 shadow presets, full block-level settings. New 12-column CSS Grid foundation system (template-foundation.css) with CSS custom properties, responsive breakpoints, RTL/LTR symmetry, accessibility, print styles. Block Patterns system (inc/block-patterns.php) with 7 patterns (heroes, content layouts, CTA, dividers), 4 pattern categories, 14 custom block styles (card, glass, gradient separator, elegant quote, gold button, etc). All 10 page templates rebuilt for Gutenberg compatibility: Modern (geometric/cards), Clean (whitespace/typography), Premium (glass morphism/gold), Editorial (newspaper/drop caps), Minimal (zero-decoration/system fonts), Bold (high contrast/diagonal), Elegant (curves/ornaments), Academic (TOC/footnotes/citations), Magazine (grid editorial/pull quotes), Islamic Classic (RTL/SVG patterns/calligraphy). All 10 CSS files rewritten with CSS Grid, CSS variables (--mf-* mapped to theme.json), no inline styles, responsive, RTL, reduced-motion, print. All 10 JS files converted to vanilla ES5+ (no jQuery dependency), IntersectionObserver animations, requestAnimationFrame parallax. Page Layout Builder upgraded to v6.0.0 with accent color picker (overrides --mf-secondary via CSS variable), CSS Grid width classes, page-level custom properties output. Template Parts: header.php and sidebar.php components.
- v5.2.0: Customizer cleanup (removed About Section, Mega Menu, About Page Settings, Team Section), News & Events single page premium redesign (multi-language tabs with availability indicators, Editor/Author/Scholar credits bar, premium hero header, event info cards, gallery lightbox, Telegram sharing, improved sidebar), Event admin Credits meta box (Editor/Author/Scholar searchable dropdown), Mazameen Article Writer dynamic searchable dropdown (auto-populates from existing writers), Unified content editor event backward-compatible meta keys (_event_title_/content_ sync), Front page Mazameen fallback cards upgraded to archive-matching unified card design
- v5.1.0: Featured images as OG/Twitter link thumbnails across all content types and archives (og:image:width/height/type, archive first-post fallback, front-page logo fallback, duplicate header.php OG removed), Hero Slider enhanced with latest Mazameen posts (featured image slides with title overlay, seamless integration), Book cards upgraded to show both Author and Writer names (content-book.php + archive-book.php, pen icon for writer, deduplicated display), Unified premium Mobile Navigation Bar (Books/Mazameen/Home/Q&A/Events, elevated centered Home button, glass-morphism backdrop, smart scroll hide/show, active state indicators with gold accent, safe-area-inset support)
- v5.0.0: Book Details Scholar dropdown with dynamic linking (auto-syncs author, front-end Scholar profile linking with avatar), Roman language option for Book PDF uploads (indigo-themed download/read buttons), SEO/AEO system fully automated (dynamic meta title/description/keywords/OG/Twitter/schema generation from content, manual fields become optional overrides, per-CPT schema: Book/Person/FAQPage/Event/Article, duplicate schema output consolidated, document title filter, archive page meta support)
- v4.9.0: Removed 'Join as a Scholar' card from Scholars archive, premium Single Scholar Profile redesign (Islamic pattern header, animated avatar ring, glass-morphism stats), Poetry User dropdown meta box, Single Question answer rendering fix (unified content key fallbacks), Q&A sidebar Tags widget, Question cards redesigned (thumbnail-free with rotating colored icons, premium minimal layout)
- v4.8.0: AJAX instant filtering (no page reload) with single compact filter card UI, Mazameen search results List View page matching archive design, Scholar profile page shows all posts section-wise (Mazameen, Q&A, Books) with View All Posts button on scholar cards, Urdu content tab confirmed default active on single Mazameen page
- v4.7.0: Premium Filter + Sort + Search bar (Author, Scholar, Article Writer, Post By dropdowns, instant debounce search, compact responsive UI), old minara_render_filter_bar permanently removed, Scholar cards now informational-only (removed View Profile link & share button), Scholar stats dynamically calculated from connected User post counts
- v4.6.0: Mazameen archive enhanced filters (view toggle, sorting, Users & Mazmoon Details dropdowns), Scholar-User email linking, Scholar cards show Q&A/Mazameen/Books counts, Admin Scholar Card Management page, Front-page Mazameen cards show Scholar/Writer/Post By credits
- v4.5.0: Q&A content rendering fix (no more fallback messages), slug generation from English/Roman title only, Mazameen credits deduplication (single unified section), improved language detection
- v3.0.0: WordPress 6.9.1 compatibility, Global Font System (Plus Jakarta Sans, Playfair Display, NaatFont)
- v2.1.0: Unified Content Editor (Urdu/Hindi/Roman), Page Metadata Controls, eBook UI redesign with unified branding
- v2.0.0: Auto-numbering, premium layouts, Layout Builder live preview, enhanced eBook reader
- v1.4.0: Enhanced eBook system with AJAX auto-save, minimal reader mode, Pages Management admin section with layout builder
- v1.3.0: Modern content toolbar, eBook post type system
- v1.2.0: UI system upgrade, sidebar components, scholars system
- v1.1.0: Typography upgrade, WYSIWYG editor, mazameen layout
*/

/* ===== CSS Variables (Upgrade v1.1.0) ===== */
:root {
    /* Brand Colors */
    --primary-dark: #1b3c35;
    --primary-main: #244b42;
    --primary-light: #2d5a50;
    --primary-accent: #3d7a6c;

    /* Accent Colors */
    --secondary-brown: #c5a059;
    --secondary-light: #dcc083;
    --secondary-dark: #9e7d3e;

    /* Backgrounds */
    --bg-light: #f8fcfb;
    --surface-light: #f0f4f3;
    --surface-white: #ffffff;
    --surface-border: #e2e8f0;

    /* Typography */
    --text-dark: #111827;
    --text-medium: #374151;
    --text-gray: #6b7280;
    --text-white: #ffffff;

    /* UI Elements */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius-md: 8px;
    --radius-lg: 16px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== TYPOGRAPHY UPGRADE v3.0.0 ===== */

    /* Unified English Font Stack */
    --font-english-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-english-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-english-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ===== RTL Font Stack - NaatFont Primary ===== */
    /* NaatFont is now the PRIMARY and ENFORCED font for ALL Urdu/RTL content */
    --font-urdu-default: 'NaatFont', serif;

    /* Primary Urdu font - NaatFont */
    --font-urdu-primary: 'NaatFont', serif;

    /* Naat Font reference */
    --font-urdu-naat: 'NaatFont', serif;

    /* Arabic uses same NaatFont stack for consistency */
    --font-arabic-primary: 'NaatFont', serif;

    /* Typography Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --leading-urdu: 2.4;
}


/* ===== Mehr Nastaliq Urdu Font (v2.0) - Local Assets ===== */
@font-face {
    font-family: 'Mehr Nastaliq';
    src: url('assets/Fonts/Mehr_Nastaliq_Web v.2.0.woff') format('woff'),
        url('assets/Fonts/Mehr_Nastaliq_Web v. 2.0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Legacy NaatFont (Fallback - kept for backward compatibility) */
@font-face {
    font-family: 'NaatFont';
    src: url('https://res.cloudinary.com/awescreative/raw/upload/v1749150996/Awes/naatfont.ttf') format('truetype');
    font-display: swap;
}

/* ===== Base Styles ===== */
* {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-english-body);
    background-color: var(--bg-light);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
    padding-bottom: 90px;
}

@media (min-width: 1024px) {
    body {
        padding-bottom: 0;
    }
}

/* ===== Unified English Typography ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-english-heading);
    font-weight: 700;
    letter-spacing: -0.025em;
}

/* UI Elements - Unified English Font */
nav,
.nav-link,
.menu-item,
button,
.btn,
.button,
input,
select,
textarea,
label,
.meta,
.tag,
.category,
.chip,
.breadcrumb,
.pagination,
.sidebar,
.widget,
.footer,
.copyright,
table,
th,
td,
.form-label,
.field-label,
.badge,
.pill,
.tab {
    font-family: var(--font-english-ui);
}

/* ===== STRICT RTL FONT ENFORCEMENT ===== */
/* Naat Font mandatory for all Urdu/Arabic content */
[dir="rtl"],
[lang="ur"],
[lang="ar"],
.urdu-text,
.arabic-text,
.font-urdu,
.font-arabic,
.rtl-content,
.lang-ur,
.lang-ar {
    font-family: var(--font-urdu-primary) !important;
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
    line-height: var(--leading-urdu);
    font-feature-settings: 'liga' 1, 'calt' 1;
}

/* Ensure RTL font NEVER applies to LTR content */
[dir="ltr"],
[lang="en"],
.ltr-content,
.lang-en {
    font-family: var(--font-english-body);
    direction: ltr;
    unicode-bidi: normal;
    text-align: left;
}

/* RTL Headings */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
.urdu-title,
.arabic-title,
.mazameen-urdu-title {
    font-family: var(--font-urdu-primary) !important;
    font-weight: 700;
    line-height: var(--leading-loose);
}

/* Mazameen Urdu Title - Naat Font by default */
.mazameen-title-ur,
#content-ur h2,
.lang-content-pane[dir="rtl"] h2 {
    font-family: var(--font-urdu-primary) !important;
    font-size: var(--text-3xl);
    line-height: var(--leading-urdu);
}

/* ===== UNIVERSAL URDU/RTL TYPOGRAPHY - Mehr Nastaliq ===== */
/* Comprehensive selectors for ALL Urdu content across the site */
#minara_urdu_content_uce,
.minara-urdu-editor,
.urdu-content,
.ebook-urdu-content,
.urdu-title,
.urdu-text,
.mazameen-urdu-content,
.writer-urdu-bio,
.scholar-urdu-bio,
textarea[name*="urdu"],
input[name*="urdu"],
.wp-editor-area[id*="urdu"],
.mce-content-body[id*="urdu"] {
    font-family: var(--font-urdu-primary) !important;
    direction: rtl !important;
    text-align: right !important;
    line-height: var(--leading-urdu) !important;
    letter-spacing: 0.02em;
}

/* Urdu Headings - Enhanced Typography */
[lang="ur"] h1,
[lang="ur"] h2,
[lang="ur"] h3,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
.urdu-text h1,
.urdu-text h2,
.urdu-text h3,
.urdu-content h1,
.urdu-content h2,
.urdu-content h3 {
    font-family: var(--font-urdu-primary) !important;
    font-weight: 600;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* Urdu Paragraphs - Optimal Readability */
[lang="ur"] p,
[dir="rtl"] p,
.urdu-text p,
.urdu-content p,
.ebook-urdu-content p {
    line-height: 2.4;
    text-align: right;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
}

/* Urdu Lists */
[lang="ur"] ul,
[lang="ur"] ol,
[dir="rtl"] ul,
[dir="rtl"] ol,
.urdu-content ul,
.urdu-content ol {
    direction: rtl;
    text-align: right;
    padding-right: 2rem;
    padding-left: 0;
}

/* Urdu Blockquotes */
[lang="ur"] blockquote,
[dir="rtl"] blockquote,
.urdu-content blockquote {
    border-right: 4px solid var(--secondary-brown);
    border-left: none;
    padding-right: 1.5rem;
    padding-left: 0;
    margin-right: 0;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-english-heading);
}

::selection {
    background-color: var(--secondary-light);
    color: var(--primary-dark);
}

/* ===== Typography ===== */
.font-serif {
    font-family: var(--font-english-heading);
}

.font-arabic {
    font-family: var(--font-arabic-primary);
}

/* Default Urdu font for general content - uses readable font, NOT decorative */
.font-urdu,
.font-urdu-default {
    font-family: var(--font-urdu-default) !important;
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
    line-height: var(--leading-urdu);
}

/* Naat Font - ONLY for poetry and decorative Islamic calligraphy */
.font-urdu-naat {
    font-family: var(--font-urdu-naat) !important;
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
    line-height: var(--leading-urdu);
}

/* ===== WYSIWYG Content Preservation ===== */
.mazameen-content,
.mazameen-wysiwyg-content,
.wysiwyg-preserved,
.lang-content-pane,
.entry-content {
    /* Preserve all editor formatting */
}

/* Paragraph preservation */
.mazameen-content p,
.mazameen-wysiwyg-content p,
.lang-content-pane p {
    margin-bottom: 1.5rem;
    line-height: var(--leading-relaxed);
}

[dir="rtl"] .mazameen-content p,
.lang-content-pane[dir="rtl"] p {
    line-height: var(--leading-urdu);
}

/* Preserve inline styles from editor */
.mazameen-content [style],
.mazameen-wysiwyg-content [style],
.lang-content-pane [style] {
    /* Allow inline styles */
}

/* List preservation */
.mazameen-content ul,
.mazameen-content ol,
.mazameen-wysiwyg-content ul,
.mazameen-wysiwyg-content ol,
.lang-content-pane ul,
.lang-content-pane ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

[dir="rtl"] .mazameen-content ul,
[dir="rtl"] .mazameen-content ol,
.lang-content-pane[dir="rtl"] ul,
.lang-content-pane[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 1.5rem;
}

/* Blockquote preservation */
.mazameen-content blockquote,
.mazameen-wysiwyg-content blockquote,
.lang-content-pane blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: var(--bg-light);
    border-left: 4px solid var(--secondary-brown);
    border-radius: 0.5rem;
    font-style: normal;
}

[dir="rtl"] .mazameen-content blockquote,
.lang-content-pane[dir="rtl"] blockquote {
    border-left: none;
    border-right: 4px solid var(--secondary-brown);
}

/* Heading hierarchy preservation */
.mazameen-content h1,
.mazameen-wysiwyg-content h1 {
    font-size: var(--text-4xl);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.mazameen-content h2,
.mazameen-wysiwyg-content h2 {
    font-size: var(--text-3xl);
    margin-top: 1.75rem;
    margin-bottom: 0.875rem;
}

.mazameen-content h3,
.mazameen-wysiwyg-content h3 {
    font-size: var(--text-2xl);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.mazameen-content h4,
.mazameen-wysiwyg-content h4 {
    font-size: var(--text-xl);
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
}

/* ===== Glass Effects ===== */
.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.glass-effect-dark {
    background: rgba(27, 60, 53, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Animations from Design */
@keyframes slidePush {
    0% {
        background-position: 0% 50%;
        opacity: 0;
        transform: scale(1.1);
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.hero-slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slidePush 20s infinite ease-out;
}

.hero-slider-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(27, 60, 53, 0.6), rgba(27, 60, 53, 0.9));
}

.hero-slider-item:nth-child(1) {
    animation-delay: 0s;
}

.hero-slider-item:nth-child(2) {
    animation-delay: 5s;
}

.hero-slider-item:nth-child(3) {
    animation-delay: 10s;
}

.hero-slider-item:nth-child(4) {
    animation-delay: 15s;
}

/* Updates Marquee & Scroll */
@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 60s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    animation: scroll 40s linear infinite;
}

.group:hover .animate-scroll {
    animation-play-state: paused;
}

.ticker-mask {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    border-color: rgba(197, 160, 89, 0.4);
}

.chip-category {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: var(--primary-dark);
    transition: all 0.3s ease;
}

.btn-premium {
    background: linear-gradient(135deg, var(--primary-dark), #2d5a50);
    transition: all 0.3s ease;
}

.btn-premium:hover {
    background: linear-gradient(135deg, var(--secondary-brown), #9e7d3e);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(197, 160, 89, 0.4);
}

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    border-color: rgba(197, 160, 89, 0.4);
}

/* ===== Navigation ===== */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: -4px;
    left: 0;
    background-color: transparent;
    transition: none;
}

.nav-link:hover::after {
    width: 0;
}

/* ===== Buttons ===== */
.btn-premium {
    background: linear-gradient(135deg, var(--primary-dark), #2d5a50);
    transition: all 0.3s ease;
}

.btn-premium:hover {
    background: linear-gradient(135deg, var(--secondary-brown), #9e7d3e);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(197, 160, 89, 0.4);
}

.btn-whatsapp {
    background: #25D366;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
}

.btn-whatsapp-small {
    background: #25D366;
    padding: 0.5rem 1.2rem;
    font-size: 0.75rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
}

.btn-whatsapp-small:hover {
    background: #128C7E;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3);
}

/* ===== Cards ===== */
.card-hover-effect {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-hover-effect:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(27, 60, 53, 0.15);
}

.chip-category {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: #f3f4f6;
    color: var(--primary-dark);
    transition: all 0.3s ease;
}

.group:hover .chip-category {
    background-color: var(--secondary-brown);
    color: white;
}

/* ===== Sidebar ===== */
.sidebar-link.active {
    background-color: var(--primary-dark);
    color: white;
    border-color: var(--primary-dark);
}

/* ===== Hero Section ===== */
@keyframes slidePush {
    0% {
        background-position: 0% 50%;
        opacity: 0;
        transform: scale(1.1);
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.hero-slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: slidePush 20s infinite ease-out;
}

.hero-slider-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(27, 60, 53, 0.6), rgba(27, 60, 53, 0.9));
}

.hero-slider-item:nth-child(1) {
    animation-delay: 0s;
}

.hero-slider-item:nth-child(2) {
    animation-delay: 5s;
}

.hero-slider-item:nth-child(3) {
    animation-delay: 10s;
}

.hero-slider-item:nth-child(4) {
    animation-delay: 15s;
}

/* ===== About Section Slider ===== */
@keyframes imageCycle {

    0%,
    20% {
        opacity: 1;
    }

    25%,
    95% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.about-slide:nth-child(1) {
    animation-delay: 0s;
}

.about-slide:nth-child(2) {
    animation-delay: 4s;
}

.about-slide:nth-child(3) {
    animation-delay: 8s;
}

.about-slide:nth-child(4) {
    animation-delay: 12s;
}

/* ===== Animations ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.fade-in-1 {
    animation-delay: 0.1s;
}

.fade-in-2 {
    animation-delay: 0.2s;
}

.fade-in-3 {
    animation-delay: 0.3s;
}

.fade-in-4 {
    animation-delay: 0.4s;
}

.fade-in-5 {
    animation-delay: 0.5s;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 60s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    animation: scroll 40s linear infinite;
}

.group:hover .animate-scroll {
    animation-play-state: paused;
}

/* ===== Utility Classes ===== */
.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;
}

.ticker-mask {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* ===== Mobile Navigation ===== */
.mobile-nav-item {
    position: relative;
    overflow: visible;
}

.mobile-nav-item.active i {
    color: var(--primary-dark);
    transform: translateY(-3px);
    filter: drop-shadow(0 4px 4px rgba(27, 60, 53, 0.1));
}

.mobile-nav-item.active span {
    color: var(--primary-dark);
    font-weight: 700;
}

.mobile-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--secondary-brown);
    box-shadow: 0 0 4px var(--secondary-brown);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

/* ===== Breadcrumbs ===== */
.breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    padding: 0 0.5rem;
    color: #cbd5e1;
}

/* ===== WordPress Core Styles ===== */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 1rem;
}

.wp-caption-text {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
    padding: 0.5rem;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gallery-item {
    margin: 0;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* ===== Screen Reader Text ===== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ===== Comments ===== */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: white;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-author img {
    border-radius: 50%;
}

.comment-content {
    margin-bottom: 1rem;
}

.comment-reply-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-dark);
}

.comment-reply-link:hover {
    color: var(--secondary-brown);
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    background: white;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    transition: all 0.3s;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: var(--primary-dark);
    color: white;
    border-color: var(--primary-dark);
}

/* ===== Forms ===== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    transition: all 0.3s;
    background-color: white;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(27, 60, 53, 0.1);
}

button,
input[type="submit"],
input[type="button"] {
    cursor: pointer;
    transition: all 0.3s;
}

/* ===== Widget Styles ===== */
.widget {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 1rem;
    border: 1px solid #f3f4f6;
}

.widget-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f9fafb;
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget ul li a {
    color: #6b7280;
    transition: color 0.3s;
}

.widget ul li a:hover {
    color: var(--secondary-brown);
}

/* ===== Back to Top ===== */
#back-to-top {
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}

#back-to-top[data-visible="true"] {
    opacity: 1;
    pointer-events: auto;
}

/* ===== Editor Styles ===== */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.entry-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.entry-content li {
    margin-bottom: 0.5rem;
}

.entry-content blockquote {
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background: var(--bg-light);
    border-right: 4px solid var(--secondary-brown);
    border-radius: 0.5rem;
    font-style: normal;
    color: #6b7280;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.entry-content a {
    color: var(--primary-dark);
    text-decoration: none;
}

.entry-content a:hover {
    color: var(--secondary-brown);
}

/* ===== Book Card Grid ===== */
.book-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 768px) {
    .book-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (min-width: 1024px) {
    .book-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* Book Card - No Shadows */
.book-card {
    box-shadow: none !important;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.book-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-dark);
}

/* ===== Center-Aligned CTA Buttons ===== */
.cta-wrapper,
.read-all-wrapper,
.view-all-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2rem;
}

.btn-cta,
.btn-read-all,
.btn-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: var(--primary-dark);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.btn-cta:hover,
.btn-read-all:hover,
.btn-view-all:hover {
    background-color: var(--secondary-brown);
    transform: translateY(-2px);
}

/* New Book Launch Badge Animation */
@keyframes badge-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.book-card .new-badge {
    animation: badge-pulse 1.5s ease-in-out infinite;
}

/* ===== Remove Download Unavailable ===== */
.download-unavailable,
.btn-download-unavailable {
    display: none !important;
}


/* ===== UI/UX UPGRADE ===== */

/* Consistent Thumbnails */
.post-thumbnail img,
.entry-thumbnail img,
.course-thumbnail img,
.book-cover img,
.wp-block-post-featured-image img,
.attachment-minara-thumbnail {
    width: 100%;
    height: 200px;
    /* Consistent height matching new PHP definition */
    object-fit: cover;
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.post-thumbnail:hover img {
    transform: scale(1.02);
}

/* Typography Hierarchy */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-dark);
    letter-spacing: -0.01em;
    margin-bottom: 0.75em;
}

h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    line-height: 1.25;
    font-weight: 700;
}

h3 {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
}

p {
    line-height: 1.7;
    margin-bottom: 1.25rem;
    color: var(--text-medium);
}

/* Card Enhancements & Consistency */
.card,
.post-card,
.entry-content,
.book-card,
.scholar-card {
    background: var(--surface-white);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.card:hover,
.post-card:hover,
.book-card:hover,
.scholar-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--secondary-light);
}

/* Form & Input Enhancements */
input[type='text'],
input[type='email'],
textarea,
select {
    border: 1px solid var(--surface-border);
    padding: 0.75rem;
    border-radius: var(--radius-md);
    transition: var(--transition);
}

input:focus,
textarea:focus {
    border-color: var(--primary-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(61, 122, 108, 0.1);
}

/* ============================================
   PREMIUM FILTER BAR SYSTEM — REMOVED in v4.7.0
   Replaced by inline Minara Premium Filter in archive-mazameen.php
   ============================================ */

/* ===== Questions & Answers — Premium Styles (v4.4.0) ===== */

/* Question Number Badge on admin */
.question-number-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--primary-main);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}

/* Question admin Urdu editors */
#minara_question_urdu_content,
textarea[name="_minara_question_content_ur"],
input[name="_minara_question_title_ur"] {
    font-family: var(--font-urdu-primary) !important;
    direction: rtl !important;
    text-align: right !important;
    font-size: 1.1rem;
    line-height: 2.2;
}

/* Question archive filter active state */
.question-filter-active {
    background: var(--primary-main) !important;
    color: #fff !important;
}

/* Archive question card hover */
.question-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.question-card:hover {
    transform: translateY(-4px);
}

@media (max-width: 768px) {
    .question-card:hover {
        transform: translateY(-2px);
    }
}