/*
Theme Name: Necudah
Theme URI: https://necudah.com
Description: Ultra-premium companion theme for the Necudah plugin. Features deep dark mode support and modern aesthetics.
Version: 1.0.0
Author: Necudah
Author URI: https://necudah.com
License: GPL v2 or later
Text Domain: necudah
*/

:root {
    /* PREMIUM LIGHT PALETTE */
    --necudah-primary: #10b981;
    --necudah-primary-dark: #059669;
    --necudah-secondary: #6366f1;
    --necudah-accent: #f59e0b;

    --necudah-bg: #f8fafc;
    --necudah-bg-alt: #ffffff;
    --necudah-text: #0f172a;
    --necudah-text-muted: #64748b;
    --necudah-border: #e2e8f0;

    /* SYSTEM FONTS */
    --necudah-font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    /* RADII & SHADOWS */
    --necudah-radius: 12px;
    --necudah-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --necudah-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

[data-theme="dark"] {
    /* PREMIUM DARK PALETTE (REDDIT-STYLE) */
    --necudah-bg: #030303;
    --necudah-bg-alt: #1a1a1b;
    --necudah-text: #d7dadc;
    --necudah-text-muted: #818384;
    --necudah-border: #343536;

    --num-items: #818384;
    --necudah-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.7), 0 2px 4px -2px rgb(0 0 0 / 0.7);
    --necudah-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.8), 0 4px 6px -4px rgb(0 0 0 / 0.8);
}

/* --- LMS DARK MODE OVERRIDES --- */
[data-theme="dark"] .necudah-card,
[data-theme="dark"] .lms-course-card,
[data-theme="dark"] .lms-sidebar-card {
    background: var(--necudah-bg-alt) !important;
    border: 1px solid var(--necudah-border) !important;
}

[data-theme="dark"] .lms-curriculum-item,
[data-theme="dark"] .lms-sidebar-lesson {
    border-bottom-color: var(--necudah-border) !important;
    color: var(--necudah-text) !important;
}

[data-theme="dark"] .lms-curriculum-item:hover,
[data-theme="dark"] .lms-sidebar-lesson:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .lms-curriculum-item.current,
[data-theme="dark"] .lms-sidebar-lesson.current {
    background: rgba(16, 185, 129, 0.1) !important;
    border-left: 3px solid var(--necudah-primary) !important;
}

[data-theme="dark"] .lms-progress-bar {
    background: #343536 !important;
}

[data-theme="dark"] .lms-includes-list li {
    color: var(--necudah-text-muted) !important;
}

[data-theme="dark"] .necudah-lms-single-course {
    background: var(--necudah-bg) !important;
}

[data-theme="dark"] .lms-hero-meta .lms-meta-item,
[data-theme="dark"] .lms-hero-subtitle {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* RESET & CORE */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--necudah-font-sans);
    background-color: var(--necudah-bg);
    color: var(--necudah-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a {
    color: var(--necudah-primary);
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: var(--necudah-primary-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    margin-top: 0;
}

/* LAYOUT */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.site-main {
    padding: 60px 0;
    min-height: 70vh;
}

/* HEADER */
.site-header {
    background: var(--necudah-bg-alt);
    border-bottom: 1px solid var(--necudah-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--necudah-shadow);
}

/* CARDS */
.necudah-card {
    background: var(--necudah-bg-alt);
    border: 1px solid var(--necudah-border);
    border-radius: var(--necudah-radius);
    padding: 24px;
    box-shadow: var(--necudah-shadow);
    margin-bottom: 30px;
}

/* FOOTER */
.site-footer {
    background: var(--necudah-bg-alt);
    border-top: 1px solid var(--necudah-border);
    padding: 40px 0;
    text-align: center;
    color: var(--necudah-text-muted);
    font-size: 14px;
}

/* PLUGIN INTEGRATION OVERRIDES */
[data-theme="dark"] .necudah-frontend-header {
    background-color: var(--necudah-bg-alt) !important;
}

[data-theme="dark"] .necudah-card {
    background: var(--necudah-bg-alt) !important;
}

/* --- CURRICULUM STYLES --- */
.lms-curriculum {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.lms-curriculum-section {
    padding: 24px 0 8px;
    border-bottom: 2px solid var(--necudah-primary);
    margin-bottom: 8px;
}

.lms-section-title {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--necudah-text);
    margin: 0;
}

.lms-curriculum-item-wrapper {
    background: var(--necudah-bg);
    border: 1px solid var(--necudah-border);
    border-radius: var(--necudah-radius);
    overflow: hidden;
    transition: all 0.2s ease;
}

.lms-curriculum-item-wrapper:hover {
    border-color: var(--necudah-primary);
    transform: translateX(4px);
    box-shadow: var(--necudah-shadow);
}

.lms-curriculum-item {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 16px;
}

.lms-item-indicator {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--necudah-bg-alt);
    border: 2px solid var(--necudah-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
}

.lms-curriculum-item-wrapper.completed .lms-item-indicator {
    background: var(--necudah-primary);
    border-color: var(--necudah-primary);
    color: white;
}

.lms-item-main {
    flex: 1;
}

.lms-item-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--necudah-text);
    display: block;
}

.lms-item-meta {
    font-size: 12px;
    color: var(--necudah-text-muted);
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.badge-free {
    background: var(--necudah-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.lms-item-status {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 13px;
}

.status-text-completed {
    color: var(--necudah-primary);
}

.lms-curriculum-children {
    padding-left: 52px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lms-child-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--necudah-text);
    padding: 4px 0;
}

.lms-child-item a {
    color: var(--necudah-text);
}

.lms-child-item a:hover {
    color: var(--necudah-primary);
}

.lms-curriculum-item-wrapper.locked {
    opacity: 0.7;
}

/* DARK MODE ADJUSTMENTS */
[data-theme="dark"] .lms-curriculum-item-wrapper {
    background: #1a1a1b;
}

[data-theme="dark"] .lms-item-indicator {
    background: #030303;
}

/* =============================================
   RESPONSIVE — 768px (Tablets)
   ============================================= */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }

    .site-main {
        padding: 30px 0;
    }

    .necudah-card {
        padding: 18px;
        margin-bottom: 20px;
    }

    .site-footer {
        padding: 28px 0;
    }

    .lms-curriculum-children {
        padding-left: 24px;
    }

    .lms-curriculum-item {
        padding: 12px;
        gap: 12px;
    }

    .lms-curriculum-section {
        padding: 18px 0 6px;
    }

    .lms-section-title {
        font-size: 16px;
    }

    .lms-item-indicator {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}

/* =============================================
   RESPONSIVE — 640px (Large phones)
   ============================================= */
@media (max-width: 640px) {
    .necudah-card {
        padding: 16px;
        margin-bottom: 16px;
        border-radius: 8px;
    }

    .lms-curriculum-item {
        padding: 10px;
        gap: 10px;
    }

    .lms-item-title {
        font-size: 15px;
    }

    .lms-item-meta {
        gap: 8px;
        font-size: 11px;
    }

    .lms-child-item {
        font-size: 13px;
        gap: 8px;
    }

    .lms-curriculum-item-wrapper:hover {
        transform: none;
    }
}

/* =============================================
   RESPONSIVE — 480px (Small phones)
   ============================================= */
@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .site-main {
        padding: 20px 0;
    }

    .necudah-card {
        padding: 14px;
        margin-bottom: 12px;
    }

    .site-footer {
        padding: 20px 0;
        font-size: 13px;
    }

    .lms-curriculum-children {
        padding-left: 16px;
        padding-bottom: 8px;
        gap: 4px;
    }

    .lms-curriculum-item {
        padding: 8px;
        gap: 8px;
    }

    .lms-item-title {
        font-size: 14px;
    }

    .lms-item-meta {
        gap: 6px;
        flex-wrap: wrap;
    }

    .lms-section-title {
        font-size: 15px;
    }

    .lms-item-indicator {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    .lms-child-item {
        font-size: 12px;
    }
}