/**
 * Style Guide Color Palette
 * Complete color system based on the approved design
 * 
 * Font: itfQomraArabic (Light, Regular, Bold)
 * Palettes: Forest (Primary), Golden Wheat (Secondary), Deep Umber (Accent), Charcoal (Neutral)
 */

/* ============================================
   Font Face Declarations
   ============================================ */
@font-face {
    font-family: 'itfQomraArabic';
    src: url("../fonts/itfQomraArabic-Regular.e355599c10dc.otf") format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'itfQomraArabic';
    src: url("../fonts/itfQomraArabic-Bold.d2995357eff6.otf") format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'itfQomraArabic';
    src: url("../fonts/itfQomraArabic-Light.ae3cb5c4c467.otf") format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS Custom Properties (Variables)
   ============================================ */
:root {
    /* Forest Palette - Primary Colors */
    --forest-dark: #002623;
    --forest-main: #054239;
    --forest-light: #428177;

    /* Forest Palette - Numbered Aliases */
    --forest-1: #002623;  /* Same as --forest-dark */
    --forest-2: #054239;  /* Same as --forest-main */
    --forest-3: #428177;  /* Same as --forest-light */

    /* Golden Wheat Palette - Secondary Colors */
    --wheat-dark: #988561;
    --wheat-main: #b9a779;
    --wheat-light: #edebe0;

    /* Golden Wheat Palette - Numbered Aliases */
    --golden-wheat-1: #988561;  /* Same as --wheat-dark */
    --golden-wheat-2: #b9a779;  /* Same as --wheat-main */
    --golden-wheat-3: #edebe0;  /* Same as --wheat-light */

    /* Deep Umber Palette - Accent Colors */
    --umber-dark: #260f14;
    --umber-main: #4a151e;
    --umber-light: #6b1f2a;

    /* Deep Umber Palette - Numbered Aliases */
    --umber-1: #260f14;  /* Same as --umber-dark */
    --umber-2: #4a151e;  /* Same as --umber-main */
    --umber-3: #6b1f2a;  /* Same as --umber-light */

    /* Charcoal Palette - Neutral Colors */
    --charcoal-dark: #161616;
    --charcoal-main: #3d3a3b;
    --charcoal-light: #ffffff;

    /* Charcoal Palette - Numbered Aliases */
    --charcoal-1: #161616;  /* Same as --charcoal-dark */
    --charcoal-2: #3d3a3b;  /* Same as --charcoal-main */
    --charcoal-3: #ffffff;  /* Same as --charcoal-light */
    
    /* Semantic Color Aliases */
    --primary-color: var(--forest-main);
    --primary-color-dark: var(--forest-dark);
    --primary-color-light: var(--forest-light);
    
    --secondary-color: var(--wheat-main);
    --secondary-color-dark: var(--wheat-dark);
    --secondary-color-light: var(--wheat-light);
    
    --accent-color: var(--umber-main);
    --accent-color-dark: var(--umber-dark);
    --accent-color-light: var(--umber-light);
    
    --neutral-dark: var(--charcoal-dark);
    --neutral-main: var(--charcoal-main);
    --neutral-light: var(--charcoal-light);
    
    /* Typography */
    --font-family-arabic: 'itfQomraArabic', 'Noto Sans Arabic', 'Cairo', sans-serif;
    --font-family-base: 'itfQomraArabic', system-ui, -apple-system, sans-serif;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
}

/* ============================================
   Background Color Utilities
   ============================================ */

/* Forest Backgrounds */
.bg-forest-dark { background-color: var(--forest-dark); }
.bg-forest-main { background-color: var(--forest-main); }
.bg-forest-light { background-color: var(--forest-light); }

/* Golden Wheat Backgrounds */
.bg-wheat-dark { background-color: var(--wheat-dark); }
.bg-wheat-main { background-color: var(--wheat-main); }
.bg-wheat-light { background-color: var(--wheat-light); }

/* Deep Umber Backgrounds */
.bg-umber-dark { background-color: var(--umber-dark); }
.bg-umber-main { background-color: var(--umber-main); }
.bg-umber-light { background-color: var(--umber-light); }

/* Charcoal Backgrounds */
.bg-charcoal-dark { background-color: var(--charcoal-dark); }
.bg-charcoal-main { background-color: var(--charcoal-main); }
.bg-charcoal-light { background-color: var(--charcoal-light); }

/* Semantic Backgrounds */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }

/* ============================================
   Text Color Utilities
   ============================================ */

/* Forest Text Colors */
.text-forest-dark { color: var(--forest-dark); }
.text-forest-main { color: var(--forest-main); }
.text-forest-light { color: var(--forest-light); }

/* Golden Wheat Text Colors */
.text-wheat-dark { color: var(--wheat-dark); }
.text-wheat-main { color: var(--wheat-main); }
.text-wheat-light { color: var(--wheat-light); }

/* Deep Umber Text Colors */
.text-umber-dark { color: var(--umber-dark); }
.text-umber-main { color: var(--umber-main); }
.text-umber-light { color: var(--umber-light); }

/* Charcoal Text Colors */
.text-charcoal-dark { color: var(--charcoal-dark); }
.text-charcoal-main { color: var(--charcoal-main); }
.text-charcoal-light { color: var(--charcoal-light); }

/* Semantic Text Colors */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }

/* ============================================
   Border Color Utilities
   ============================================ */

/* Forest Borders */
.border-forest-dark { border-color: var(--forest-dark); }
.border-forest-main { border-color: var(--forest-main); }
.border-forest-light { border-color: var(--forest-light); }

/* Golden Wheat Borders */
.border-wheat-dark { border-color: var(--wheat-dark); }
.border-wheat-main { border-color: var(--wheat-main); }
.border-wheat-light { border-color: var(--wheat-light); }

/* Deep Umber Borders */
.border-umber-dark { border-color: var(--umber-dark); }
.border-umber-main { border-color: var(--umber-main); }
.border-umber-light { border-color: var(--umber-light); }

/* Charcoal Borders */
.border-charcoal-dark { border-color: var(--charcoal-dark); }
.border-charcoal-main { border-color: var(--charcoal-main); }
.border-charcoal-light { border-color: var(--charcoal-light); }

/* Semantic Borders */
.border-primary { border-color: var(--primary-color); }
.border-secondary { border-color: var(--secondary-color); }
.border-accent { border-color: var(--accent-color); }

/* ============================================
   Button Styles
   ============================================ */

.btn-forest {
    background-color: var(--forest-main);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-forest:hover {
    background-color: var(--forest-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-wheat {
    background-color: var(--wheat-main);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-wheat:hover {
    background-color: var(--wheat-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-umber {
    background-color: var(--umber-main);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-umber:hover {
    background-color: var(--umber-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Outlined Buttons */
.btn-forest-outline {
    background-color: transparent;
    color: var(--forest-main);
    border: 2px solid var(--forest-main);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-forest-outline:hover {
    background-color: var(--forest-main);
    color: white;
}

/* ============================================
   Card Styles
   ============================================ */

.card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.card-forest {
    border-top: 4px solid var(--forest-main);
}

.card-wheat {
    border-top: 4px solid var(--wheat-main);
}

.card-umber {
    border-top: 4px solid var(--umber-main);
}

/* ============================================
   Badge Styles
   ============================================ */

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
}

.badge-forest {
    background-color: var(--forest-light);
    color: white;
}

.badge-wheat {
    background-color: var(--wheat-main);
    color: white;
}

.badge-umber {
    background-color: var(--umber-main);
    color: white;
}

/* ============================================
   Alert Styles
   ============================================ */

.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    border-right: 4px solid;
}

.alert-success {
    background-color: rgba(66, 129, 119, 0.1);
    border-color: var(--forest-light);
    color: var(--forest-dark);
}

.alert-info {
    background-color: rgba(185, 167, 121, 0.1);
    border-color: var(--wheat-main);
    color: var(--wheat-dark);
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    color: #92400e;
}

.alert-error {
    background-color: rgba(107, 31, 42, 0.1);
    border-color: var(--umber-main);
    color: var(--umber-dark);
}

/* ============================================
   Typography Classes
   ============================================ */

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

.heading-primary {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--forest-dark);
    font-family: var(--font-family-arabic);
}

.heading-secondary {
    font-size: 2rem;
    font-weight: 600;
    color: var(--forest-main);
    font-family: var(--font-family-arabic);
}

.text-body {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--charcoal-main);
    font-family: var(--font-family-arabic);
}

/* ============================================
   Form Styles
   ============================================ */

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-md);
    font-family: var(--font-family-arabic);
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--forest-light);
    box-shadow: 0 0 0 3px rgba(66, 129, 119, 0.1);
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--forest-dark);
    font-family: var(--font-family-arabic);
}

/* ============================================
   Gradient Backgrounds
   ============================================ */

.gradient-forest {
    background: linear-gradient(135deg, var(--forest-main), var(--forest-light));
}

.gradient-wheat {
    background: linear-gradient(135deg, var(--wheat-dark), var(--wheat-main));
}

.gradient-umber {
    background: linear-gradient(135deg, var(--umber-main), var(--umber-light));
}

/* ============================================
   Base Component Styles (Used by Quiz & Other Pages)
   ============================================ */

.btn-base {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-base:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-base:active {
    transform: translateY(0);
}

.badge-base {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.card-base {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.card-base:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.input-base {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: white;
    color: var(--charcoal-main);
}

.input-base:focus {
    outline: none;
    border-color: var(--forest-light);
    box-shadow: 0 0 0 3px rgba(66, 129, 119, 0.1);
}

.input-base::placeholder {
    color: #94a3b8;
}

/* ============================================
   Utility Classes
   ============================================ */

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ============================================
   Hover Effects
   ============================================ */

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.hover-forest:hover {
    background-color: var(--forest-main);
    color: white;
}

.hover-wheat:hover {
    background-color: var(--wheat-main);
    color: white;
}

/* ============================================
   Dropdown Menu Positioning & Z-Index
   ============================================ */

.dropdown-menu {
    position: absolute;
    z-index: 9999 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Ensure grid containers don't clip dropdowns */
.grid > * {
    overflow: visible;
}

/* Ensure cards with dropdowns allow overflow */
.relative:has(.dropdown-menu) {
    overflow: visible !important;
}

/* ============================================
   RTL Support
   ============================================ */

[dir="rtl"] .form-input,
[dir="rtl"] .btn-forest,
[dir="rtl"] .btn-wheat,
[dir="rtl"] .btn-umber,
[dir="rtl"] .card {
    text-align: right;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .bg-forest-dark,
    .bg-forest-main,
    .bg-forest-light,
    .bg-wheat-dark,
    .bg-wheat-main,
    .bg-umber-dark,
    .bg-umber-main {
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ============================================
   Responsive Typography
   ============================================ */

@media (max-width: 768px) {
    .heading-primary {
        font-size: 2rem;
    }
    
    .heading-secondary {
        font-size: 1.5rem;
    }
    
    .text-body {
        font-size: 0.875rem;
    }
}

/* ============================================
   Dark Mode Support (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed */
    /* This is optional and can be implemented later */
}