/**
 * MOUSTAQIM.COM - DESIGN SYSTEM
 * Palette Kaaba : Or (#d4af37), Noir (#1a1a1a), Blanc (#ffffff)
 * Support Dark Mode
 *
 * Ce fichier NE modifie PAS les styles existants de site.css
 * Il fournit uniquement les variables CSS et des classes utilitaires prefixées
 */

/* ========================================
   VARIABLES CSS (disponibles partout)
   ======================================== */

:root {
    /* Couleurs Kaaba - Light Mode */
    --color-gold: #d4af37;
    --color-gold-light: #e8c968;
    --color-gold-dark: #b8941f;
    --color-black: #1a1a1a;
    --color-black-light: #2a2a2a;
    --color-white: #ffffff;
    --color-cream: #faf9f6;

    /* Couleurs sémantiques - Light Mode */
    --color-background: #faf9f6;
    --color-surface: #ffffff;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #8a8a8a;
    --color-border: #d2d2d7;
    --color-shadow: rgba(0, 0, 0, 0.1);

    /* Couleurs de statut */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Typographie - Police professionnelle et serieuse */
    --font-primary: 'Georgia', 'Times New Roman', serif;
    --font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-arabic: 'Amiri', 'Traditional Arabic', serif;

    /* Tailles de police */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 36px;

    /* Espacements */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Rayons de bordure - Style strict et professionnel */
    --radius-sm: 0;
    --radius-md: 2px;
    --radius-lg: 3px;
    --radius-xl: 4px;
    --radius-2xl: 6px;
    --radius-full: 9999px;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.3);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --header-height: 70px;
    --max-width: 1280px;
    --content-width: 800px;
}

/* ========================================
   DARK MODE VARIABLES
   ======================================== */

[data-theme="dark"] {
    --color-background: #121212;
    --color-surface: #1e1e1e;
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #c0c0c0;
    --color-text-muted: #909090;
    --color-border: #333333;
    --color-shadow: rgba(0, 0, 0, 0.4);

    /* Or plus lumineux en dark mode */
    --color-gold: #e8c968;
    --color-gold-light: #f5d98a;
    --color-gold-dark: #d4af37;
}

/* Dark mode - ajustements globaux */
[data-theme="dark"] body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

[data-theme="dark"] #contenu,
[data-theme="dark"] .methode {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="dark"] h1 {
    background-color: var(--color-surface);
}

[data-theme="dark"] .date {
    background-color: var(--color-surface);
}

[data-theme="dark"] #footer {
    background-color: var(--color-black);
    color: var(--color-text-secondary);
}

/* ========================================
   CLASSES UTILITAIRES (prefixées mq-)
   ======================================== */

/* Conteneur */
.mq-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* Grilles */
.mq-grid {
    display: grid;
    gap: var(--space-6);
}

.mq-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mq-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mq-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Flexbox */
.mq-flex { display: flex; }
.mq-flex-center { display: flex; align-items: center; justify-content: center; }
.mq-flex-between { display: flex; align-items: center; justify-content: space-between; }
.mq-flex-col { flex-direction: column; }
.mq-gap-2 { gap: var(--space-2); }
.mq-gap-4 { gap: var(--space-4); }
.mq-gap-6 { gap: var(--space-6); }

/* ========================================
   COMPOSANTS MODERNES (prefixés mq-)
   ======================================== */

/* Boutons */
.mq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font-primary);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mq-btn-gold {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: var(--color-black);
    box-shadow: var(--shadow-gold);
}

.mq-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5);
    color: var(--color-black);
}

.mq-btn-dark {
    background-color: var(--color-black);
    color: var(--color-white);
}

.mq-btn-dark:hover {
    background-color: var(--color-black-light);
}

.mq-btn-outline {
    background: transparent;
    color: var(--color-gold);
    border: 2px solid var(--color-gold);
}

.mq-btn-outline:hover {
    background: var(--color-gold);
    color: var(--color-black);
}

/* Cartes */
.mq-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.mq-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.mq-card-gold {
    border-top: 4px solid var(--color-gold);
}

.mq-card-gold:hover {
    box-shadow: var(--shadow-gold);
}

/* Badges */
.mq-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mq-badge-gold {
    background: rgba(212, 175, 55, 0.15);
    color: var(--color-gold);
}

.mq-badge-dark {
    background: var(--color-black);
    color: var(--color-white);
}

/* Inputs */
.mq-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.mq-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes mq-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mq-slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mq-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.mq-fade-in { animation: mq-fadeIn var(--transition-normal) ease-in; }
.mq-slide-up { animation: mq-slideUp var(--transition-normal) ease-out; }
.mq-pulse { animation: mq-pulse 2s infinite; }

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }

    .mq-grid-2,
    .mq-grid-3,
    .mq-grid-4 {
        grid-template-columns: 1fr;
    }

    .mq-container {
        padding: 0 var(--space-4);
    }

    .mq-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mq-hide-desktop {
        display: none !important;
    }
}

/* ========================================
   RTL SUPPORT (Right-to-Left Languages)
   Arabic, Urdu, Persian, Hebrew
   ======================================== */

/* Base RTL - Text alignment */
[dir="rtl"] {
    text-align: right;
}

[dir="rtl"] body {
    direction: rtl;
}

/* RTL - Typography */
[dir="rtl"] .arabic,
[dir="rtl"] [lang="ar"],
[dir="rtl"] [lang="ur"],
[dir="rtl"] [lang="fa"] {
    font-family: var(--font-arabic);
    line-height: 1.8;
}

/* RTL - Flexbox reversal */
[dir="rtl"] .mq-flex,
[dir="rtl"] .mq-flex-between,
[dir="rtl"] .flex,
[dir="rtl"] .share-buttons,
[dir="rtl"] .legend,
[dir="rtl"] .navigation,
[dir="rtl"] .breadcrumb,
[dir="rtl"] .white-days-list {
    flex-direction: row-reverse;
}

[dir="rtl"] .mq-flex-col {
    flex-direction: column; /* Keep vertical */
}

/* RTL - Margins & Paddings swap */
[dir="rtl"] .mq-btn {
    flex-direction: row-reverse;
}

[dir="rtl"] .legend-color {
    margin-right: 0;
    margin-left: 12px;
}

[dir="rtl"] .month-num {
    margin-right: 0;
    margin-left: 10px;
}

/* RTL - Borders swap (left border -> right border) */
[dir="rtl"] .months-list li {
    border-left: none;
    border-right: 3px solid var(--color-gold);
}

[dir="rtl"] .months-list li.sacred {
    border-left: none;
    border-right-width: 5px;
}

[dir="rtl"] .fasting-day {
    border-left: none !important;
    border-right: 3px solid #4CAF50 !important;
}

[dir="rtl"] .mq-card-gold {
    border-top: 4px solid var(--color-gold);
}

/* RTL - Lists */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 20px;
}

[dir="rtl"] .prenom-toc-list {
    padding-right: 25px;
}

/* RTL - Breadcrumb */
[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

[dir="rtl"] .breadcrumb-separator {
    transform: scaleX(-1); /* Flip arrow */
}

/* RTL - Navigation arrows */
[dir="rtl"] .nav-link[data-month] {
    /* Swap prev/next visual direction */
}

[dir="rtl"] .navigation a:first-of-type::before {
    content: '▶'; /* Right arrow for "previous" */
}

[dir="rtl"] .navigation a:last-of-type::after {
    content: '◀'; /* Left arrow for "next" */
}

/* RTL - Gradients (swap direction) */
[dir="rtl"] .next-event-widget::before {
    background: linear-gradient(270deg, var(--color-gold) 0%, transparent 100%);
}

/* RTL - Form inputs */
[dir="rtl"] .mq-input,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}

[dir="rtl"] input[type="search"] {
    padding-right: var(--space-4);
    padding-left: var(--space-10);
}

/* RTL - Tables */
[dir="rtl"] table {
    direction: rtl;
}

[dir="rtl"] th,
[dir="rtl"] td {
    text-align: right;
}

[dir="rtl"] .calendar-container th,
[dir="rtl"] .calendar-container td {
    text-align: center; /* Calendar stays centered */
}

/* RTL - Cards with side accent */
[dir="rtl"] .prenom-section {
    border-left: none;
    border-right: 4px solid var(--color-gold);
    padding-left: 0;
    padding-right: var(--space-6);
}

/* RTL - Floating elements */
[dir="rtl"] .float-left {
    float: right;
}

[dir="rtl"] .float-right {
    float: left;
}

/* RTL - Icons with text */
[dir="rtl"] .icon-text {
    flex-direction: row-reverse;
}

[dir="rtl"] .icon-text svg,
[dir="rtl"] .icon-text img {
    margin-left: var(--space-2);
    margin-right: 0;
}

/* RTL - Share buttons */
[dir="rtl"] .share-widget {
    flex-direction: row-reverse;
}

[dir="rtl"] .share-label {
    margin-left: var(--space-4);
    margin-right: 0;
}

/* RTL - Print section */
[dir="rtl"] .print-section {
    flex-direction: row-reverse;
}

/* RTL - White days widget */
[dir="rtl"] .white-days-widget h4 {
    text-align: center;
}

/* RTL - Next event widget */
[dir="rtl"] .next-event-widget {
    text-align: center; /* Keep centered */
}

/* RTL - Prenom page specific */
[dir="rtl"] .prenom-hero {
    text-align: center;
}

[dir="rtl"] .prenom-meta {
    flex-direction: row-reverse;
    justify-content: center;
}

[dir="rtl"] .prenom-toc {
    text-align: right;
}

[dir="rtl"] .badge {
    margin-left: var(--space-2);
    margin-right: 0;
}

/* RTL - Grid (no change needed, auto-adapts) */

/* RTL - Specific fixes for prayer times */
[dir="rtl"] .prayer-times-table th:first-child,
[dir="rtl"] .prayer-times-table td:first-child {
    text-align: right;
}

[dir="rtl"] .method-selector {
    flex-direction: row-reverse;
}

[dir="rtl"] .method-selector label {
    margin-left: var(--space-4);
    margin-right: 0;
}

/* RTL - Ramadan table */
[dir="rtl"] .ramadan-table {
    direction: rtl;
}

/* RTL - Footer */
[dir="rtl"] #footer,
[dir="rtl"] footer {
    text-align: right;
}

[dir="rtl"] .footer-links {
    flex-direction: row-reverse;
}

/* RTL - Menu / Navigation */
[dir="rtl"] nav ul {
    flex-direction: row-reverse;
}

[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
}

/* RTL - Responsive adjustments */
@media (max-width: 768px) {
    [dir="rtl"] .mq-flex,
    [dir="rtl"] .share-buttons {
        flex-direction: column;
    }

    [dir="rtl"] .navigation {
        flex-direction: column;
    }

    [dir="rtl"] .share-widget {
        flex-direction: column;
        align-items: flex-start;
    }
}