/* ============================================
   RAW Edge Performance - Complete Course Styling
   ============================================
   Version: 2.0
   Date: 2026-01-28

   Combines:
   - Brand alignment (from rawedge.au)
   - Best practice UX patterns
   - Tutor LMS overrides
   - Mobile optimizations

   Apply via: Appearance > Customize > Additional CSS
   ============================================ */

/* ============================================
   1. CSS VARIABLES - BRAND COLORS
   ============================================ */

:root {
    /* RAW Edge Brand Colors */
    --raw-navy: #041E49;
    --raw-navy-light: #062a5c;
    --raw-burgundy: #8B1538;
    --raw-slate: #1E293B;

    /* Accent Colors */
    --raw-green: #4ADE80;
    --raw-green-hover: #22c55e;
    --raw-green-dark: #147a3e;
    --raw-amber: #F59E0B;

    /* Neutrals */
    --raw-white: #FFFFFF;
    --raw-off-white: #FCFCFC;
    --raw-gray-100: #f3f4f6;
    --raw-gray-200: #e5e7eb;
    --raw-gray-300: #d1d5db;
    --raw-gray-500: #6b7280;
    --raw-text: #1F1F1F;

    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);

    /* Override Tutor LMS Variables */
    --tutor-color-primary: var(--raw-green) !important;
    --tutor-color-primary-rgb: 74, 222, 128 !important;
    --tutor-color-primary-hover: var(--raw-green-hover) !important;
    --tutor-color-primary-hover-rgb: 34, 197, 94 !important;
}

/* ============================================
   2. TYPOGRAPHY - BRAND FONTS
   ============================================ */

/* Import fonts if not already loaded */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

/* Headings */
.tutor-wrap h1,
.tutor-wrap h2,
.tutor-wrap h3,
.tutor-wrap h4,
.tutor-course-single-wrap h1,
.tutor-course-single-wrap h2,
.tutor-lesson-wrap h1,
.tutor-lesson-wrap h2 {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    color: var(--raw-navy) !important;
    line-height: 1.2 !important;
}

.tutor-wrap h1,
.tutor-course-single-wrap h1 {
    font-size: 32px !important;
}

.tutor-wrap h2,
.tutor-course-single-wrap h2 {
    font-size: 28px !important;
}

.tutor-wrap h3 {
    font-size: 24px !important;
}

/* Body Text */
.tutor-wrap,
.tutor-wrap p,
.tutor-wrap li,
.tutor-course-content,
.tutor-lesson-content {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    color: var(--raw-text) !important;
}

/* ============================================
   3. COURSE LANDING PAGE
   ============================================ */

/* Course Header/Hero */
.tutor-course-single-header,
.tutor-course-details-header {
    background-color: var(--raw-off-white) !important;
    padding: 4px 20px !important;
}

.tutor-course-single-header h1,
.tutor-course-details-header h1 {
    color: var(--raw-white) !important;
    font-size: 24px !important;
    margin-bottom: 10px !important;
}

.tutor-course-single-header .tutor-course-single-meta,
.tutor-course-details-header p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Course Info Cards */
.tutor-course-single-content .tutor-card,
.tutor-course-sidebar .tutor-card {
    background: var(--raw-white) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--raw-gray-200) !important;
}

/* Course Thumbnail */
.tutor-course-thumbnail img,
.tutor-course-single-thumbnail img {
    border-radius: 12px !important;
}

/* Course Meta (Duration, Lessons, etc.) */
.tutor-course-single-meta-list li,
.tutor-course-meta span {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--raw-gray-500) !important;
}

/* ============================================
   4. ENROLLMENT BUTTONS (PRIMARY CTA)
   ============================================ */

/* Main enrollment button - use green for visibility */
.tutor-course-single-btn-group .tutor-btn,
.tutor-course-enroll-wrap .tutor-btn,
.tutor-btn.tutor-btn-primary,
.tutor-enroll-btn {
    background-color: var(--raw-green) !important;
    color: var(--raw-navy) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 14px 32px !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s ease !important;
}

.tutor-course-single-btn-group .tutor-btn:hover,
.tutor-course-enroll-wrap .tutor-btn:hover,
.tutor-btn.tutor-btn-primary:hover {
    background-color: var(--raw-green-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
}

/* Secondary buttons */
.tutor-btn.tutor-btn-outline,
.tutor-btn-secondary {
    background-color: transparent !important;
    color: var(--raw-navy) !important;
    border: 2px solid var(--raw-navy) !important;
    border-radius: 4px !important;
}

.tutor-btn.tutor-btn-outline:hover {
    background-color: var(--raw-navy) !important;
    color: var(--raw-white) !important;
}

/* ============================================
   5. CURRICULUM/COURSE CONTENT LIST
   ============================================ */

/* Topic/Module Headers */
.tutor-accordion-item-header,
.tutor-course-topic-header {
    background-color: var(--raw-navy) !important;
    color: var(--raw-white) !important;
    padding: 16px 20px !important;
    border-radius: 8px 8px 0 0 !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
}

.tutor-accordion-item-header h4,
.tutor-course-topic-title {
    color: var(--raw-white) !important;
    font-size: 18px !important;
}

/* Lesson List Items */
.tutor-accordion-item-body,
.tutor-course-content-list {
    border: 1px solid var(--raw-gray-200) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
}

.tutor-course-content-list-item,
.tutor-accordion-item-body li {
    padding: 12px 20px !important;
    border-bottom: 1px solid var(--raw-gray-100) !important;
    transition: background-color 0.2s ease !important;
}

.tutor-course-content-list-item:hover {
    background-color: var(--raw-gray-100) !important;
}

/* Completed lesson checkmark */
.tutor-course-content-list-item.is-completed,
.tutor-icon-circle-mark-line.is-done {
    color: var(--raw-green) !important;
}

.tutor-course-content-list-item.is-completed::before {
    content: "✓";
    color: var(--raw-green);
    margin-right: 8px;
}

/* Current lesson highlight */
.tutor-course-content-list-item.is-active,
.tutor-accordion-item.is-active .tutor-accordion-item-body li.active {
    background-color: rgba(74, 222, 128, 0.1) !important;
    border-left: 3px solid var(--raw-green) !important;
}

/* ============================================
   6. PROGRESS BAR (BEST PRACTICE)
   ============================================ */

/* Course progress */
.tutor-progress-bar,
.tutor-course-progress-wrapper {
    background-color: var(--raw-gray-200) !important;
    border-radius: 999px !important;
    height: 8px !important;
    overflow: hidden !important;
}

.tutor-progress-bar .tutor-progress-value,
.tutor-progress-bar-fill {
    background: linear-gradient(90deg, var(--raw-green) 0%, var(--raw-green-hover) 100%) !important;
    border-radius: 999px !important;
    transition: width 0.5s ease !important;
}

/* Progress text */
.tutor-progress-percent,
.tutor-course-progress-text {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--raw-navy) !important;
}

/* ============================================
   7. LESSON PAGE
   ============================================ */

/* Lesson container */
.tutor-lesson-wrap,
.tutor-single-lesson-wrap {
    background-color: var(--raw-off-white) !important;
}

/* Lesson header */
.tutor-lesson-header,
.tutor-single-lesson-header {
    background-color: var(--raw-white) !important;
    border-bottom: 1px solid var(--raw-gray-200) !important;
    padding: 20px !important;
}

/* Video player container */
.tutor-video-player-wrapper,
.tutor-lesson-video-wrap {
    background-color: #000 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Video poster/thumbnail */
.tutor-video-poster {
    object-fit: cover !important;
}

/* Lesson content area */
.tutor-lesson-content-wrap,
.tutor-lesson-description {
    background-color: var(--raw-white) !important;
    padding: 32px !important;
    border-radius: 12px !important;
    margin-top: 24px !important;
}

/* Lesson navigation buttons */
.tutor-lesson-next-prev-wrap,
.tutor-single-lesson-nav {
    display: flex !important;
    justify-content: space-between !important;
    padding: 20px !important;
    gap: 16px !important;
}

.tutor-lesson-next-prev-wrap .tutor-btn {
    flex: 1 !important;
    max-width: 200px !important;
}

/* Complete lesson button */
.tutor-lesson-complete-btn,
.mark-lesson-complete {
    background-color: var(--raw-green) !important;
    color: var(--raw-navy) !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
}

/* ============================================
   8. SIDEBAR CURRICULUM
   ============================================ */

/* Sticky sidebar */
.tutor-sidebar-wrap,
.tutor-course-sidebar {
    position: sticky !important;
    top: 100px !important;
}

/* Sidebar lesson list */
.tutor-sidebar-lesson-list li {
    padding: 10px 16px !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease !important;
}

.tutor-sidebar-lesson-list li:hover {
    background-color: var(--raw-gray-100) !important;
}

.tutor-sidebar-lesson-list li.active {
    background-color: rgba(74, 222, 128, 0.1) !important;
    border-left-color: var(--raw-green) !important;
}

.tutor-sidebar-lesson-list li.completed {
    color: var(--raw-green) !important;
}

/* ============================================
   9. QUIZ PAGE
   ============================================ */

/* Quiz container */
.tutor-quiz-wrap {
    background-color: var(--raw-white) !important;
    border-radius: 12px !important;
    padding: 32px !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Quiz header */
.tutor-quiz-header {
    border-bottom: 1px solid var(--raw-gray-200) !important;
    padding-bottom: 20px !important;
    margin-bottom: 24px !important;
}

.tutor-quiz-header h2 {
    color: var(--raw-navy) !important;
}

/* Question progress */
.tutor-quiz-progress-wrap {
    background-color: var(--raw-gray-100) !important;
    padding: 16px !important;
    border-radius: 8px !important;
    margin-bottom: 24px !important;
}

.tutor-quiz-progress-text {
    font-weight: 600 !important;
    color: var(--raw-navy) !important;
}

/* Question card */
.tutor-quiz-question-wrap,
.tutor-quiz-question {
    background-color: var(--raw-off-white) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--raw-gray-200) !important;
}

/* Answer options */
.tutor-quiz-answer-item,
.tutor-quiz-option {
    background-color: var(--raw-white) !important;
    border: 2px solid var(--raw-gray-200) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tutor-quiz-answer-item:hover {
    border-color: var(--raw-navy) !important;
    background-color: var(--raw-gray-100) !important;
}

.tutor-quiz-answer-item.is-selected,
.tutor-quiz-option.selected {
    border-color: var(--raw-green) !important;
    background-color: rgba(74, 222, 128, 0.1) !important;
}

/* Correct/Incorrect feedback */
.tutor-quiz-answer-item.is-correct {
    border-color: var(--raw-green) !important;
    background-color: rgba(74, 222, 128, 0.15) !important;
}

.tutor-quiz-answer-item.is-wrong {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Quiz submit button */
.tutor-quiz-submit-btn,
.tutor-quiz-next-btn {
    background-color: var(--raw-green) !important;
    color: var(--raw-navy) !important;
    font-weight: 600 !important;
    padding: 14px 32px !important;
    border-radius: 4px !important;
    font-size: 16px !important;
}

/* Quiz results */
.tutor-quiz-result-wrap {
    text-align: center !important;
    padding: 40px !important;
}

.tutor-quiz-result-score {
    font-size: 48px !important;
    font-weight: 700 !important;
    color: var(--raw-green) !important;
    font-family: var(--font-heading) !important;
}

/* ============================================
   10. DASHBOARD STYLING
   ============================================ */

/* Dashboard cards */
.tutor-dashboard-content .tutor-card {
    background: var(--raw-white) !important;
    border-radius: 12px !important;
    border: 1px solid var(--raw-gray-200) !important;
    border-left: 4px solid var(--raw-green) !important;
}

/* Dashboard sidebar */
.tutor-dashboard-menu .tutor-dashboard-menu-item.active {
    background-color: rgba(74, 222, 128, 0.1) !important;
    border-left: 3px solid var(--raw-green) !important;
}

.tutor-dashboard-menu .tutor-dashboard-menu-item.active a {
    color: var(--raw-green-dark) !important;
    font-weight: 600 !important;
}

/* Stats icons */
.tutor-dashboard-stats .tutor-icon {
    color: var(--raw-green) !important;
}

/* ============================================
   11. BADGES & ACHIEVEMENTS
   ============================================ */

/* Badge container */
.tutor-badge,
.tutor-achievement-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Coming Soon badge */
.tutor-badge-coming-soon,
[class*="coming-soon"] {
    background-color: var(--raw-amber) !important;
    color: var(--raw-navy) !important;
}

/* Completed badge */
.tutor-badge-completed {
    background-color: var(--raw-green) !important;
    color: var(--raw-navy) !important;
}

/* In Progress badge */
.tutor-badge-in-progress {
    background-color: var(--raw-navy) !important;
    color: var(--raw-white) !important;
}

/* ============================================
   12. FORMS & INPUTS
   ============================================ */

.tutor-form-control,
.tutor-form-select,
input.tutor-form-control,
select.tutor-form-control,
textarea.tutor-form-control {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    border: 1px solid var(--raw-gray-300) !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.tutor-form-control:focus {
    border-color: var(--raw-green) !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2) !important;
    outline: none !important;
}

/* Checkboxes and radios */
.tutor-form-check-input:checked {
    background-color: var(--raw-green) !important;
    border-color: var(--raw-green) !important;
}

/* ============================================
   13. EMPTY STATES
   ============================================ */

.tutor-empty-state,
.tutor-no-course,
.no-data-available {
    text-align: center !important;
    padding: 60px 20px !important;
    background-color: var(--raw-gray-100) !important;
    border-radius: 12px !important;
}

.tutor-empty-state p {
    color: var(--raw-gray-500) !important;
    font-size: 18px !important;
    margin-bottom: 24px !important;
}

.tutor-empty-state .tutor-btn {
    background-color: var(--raw-green) !important;
}

/* ============================================
   14. MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 991px) {
    /* Sidebar becomes collapsible */
    .tutor-sidebar-wrap {
        position: relative !important;
        top: auto !important;
    }
}

@media (max-width: 768px) {
    /* Typography adjustments */
    .tutor-wrap h1 {
        font-size: 28px !important;
    }

    .tutor-wrap h2 {
        font-size: 24px !important;
    }

    .tutor-wrap h3 {
        font-size: 20px !important;
    }

    /* Full-width video */
    .tutor-video-player-wrapper {
        border-radius: 0 !important;
        margin: 0 -20px !important;
        width: calc(100% + 40px) !important;
    }

    /* Stack lesson navigation */
    .tutor-lesson-next-prev-wrap {
        flex-direction: column !important;
    }

    .tutor-lesson-next-prev-wrap .tutor-btn {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Larger touch targets */
    .tutor-btn,
    .tutor-form-control,
    .tutor-quiz-answer-item {
        min-height: 48px !important;
    }

    .tutor-quiz-answer-item {
        padding: 16px !important;
    }

    /* Mobile bottom navigation */
    .tutor-mobile-nav,
    .tutor-dashboard-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--raw-white) !important;
        border-top: 1px solid var(--raw-gray-200) !important;
        padding: 12px 20px !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
        z-index: 1000 !important;
    }

    .tutor-mobile-nav .active,
    .tutor-dashboard-bottom-nav .active {
        color: var(--raw-green) !important;
    }

    /* Add bottom padding for fixed nav */
    .tutor-lesson-wrap,
    .tutor-dashboard-wrap {
        padding-bottom: 80px !important;
    }

    /* Course cards stack */
    .tutor-course-card {
        margin-bottom: 20px !important;
    }
}

@media (max-width: 480px) {
    /* Even smaller screens */
    .tutor-wrap h1 {
        font-size: 24px !important;
    }

    .tutor-course-single-header {
        padding: 40px 16px !important;
    }

    .tutor-quiz-wrap,
    .tutor-lesson-content-wrap {
        padding: 20px 16px !important;
    }
}

/* ============================================
   15. ANIMATIONS
   ============================================ */

/* Progress bar animation */
@keyframes progressGrow {
    from { width: 0; }
}

.tutor-progress-bar-fill {
    animation: progressGrow 1s ease-out;
}

/* Card hover */
.tutor-course-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.tutor-course-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Button hover */
.tutor-btn {
    transition: all 0.2s ease !important;
}

/* Lesson completion celebration (subtle) */
@keyframes completionPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.tutor-lesson-complete-btn.completed {
    animation: completionPulse 0.5s ease;
}

/* ============================================
   16. PRINT STYLES
   ============================================ */

@media print {
    .tutor-sidebar-wrap,
    .tutor-lesson-next-prev-wrap,
    .tutor-mobile-nav,
    .tutor-dashboard-bottom-nav {
        display: none !important;
    }

    .tutor-lesson-content-wrap {
        box-shadow: none !important;
        border: none !important;
    }
}