/* ODS Layout & Readability V2
 * 1) Sidebar largeur 260px (override var --sidebar-w)
 * 2) Fix lisibilité hero courses Tutor LMS (classes .ods-course-breadcrumb, .ods-header-rating, .ods-rating-count) */

/* =========================================================
   1) SIDEBAR — Override de la variable --sidebar-w
   Affecte: width sidebar + margin-left body + margin-left top bars + footer
   ========================================================= */
:root {
    --sidebar-w: 260px !important;
}

/* Double sécurité si la variable est scopée ailleurs */
body {
    --sidebar-w: 260px !important;
}

/* =========================================================
   2) HERO COURSES — .ods-course-breadcrumb injecté par JS
   Couleur actuelle: invisible (probablement #4B5563 ou #6B7280)
   ========================================================= */
body.single-courses .ods-course-breadcrumb,
body.single-courses .ods-course-breadcrumb a,
body.single-courses .ods-course-breadcrumb span {
    color: #C8E6C9 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

body.single-courses .ods-course-breadcrumb a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

/* Séparateur ">" dans breadcrumb */
body.single-courses .ods-course-breadcrumb > *:not(:last-child)::after,
body.single-courses .ods-course-breadcrumb .separator {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* =========================================================
   3) RATING COUNT — .ods-rating-count (affichait "(189)" invisible)
   Actuellement: color: #4B5563 (gris moyen) — OK sur fond blanc, INVISIBLE sur fond vert
   On override UNIQUEMENT quand c'est dans le hero courses
   ========================================================= */
body.single-courses .tutor-course-details-header .ods-rating-count,
body.single-courses .tutor-course-details-header .ods-header-rating .ods-rating-count,
body.single-courses .ods-header-rating .ods-rating-count {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Rating number "4.7" → jaune orangé bien visible (déjà le cas, on reinforce) */
body.single-courses .tutor-course-details-header .ods-rating-number,
body.single-courses .ods-header-rating .ods-rating-number {
    color: #FBBF24 !important;
    font-weight: 700 !important;
}

/* Stars → jaune bien visible */
body.single-courses .tutor-course-details-header .ods-rating-stars svg,
body.single-courses .ods-header-rating .ods-rating-stars svg {
    color: #FBBF24 !important;
    fill: #FBBF24 !important;
}

/* =========================================================
   4) METADATA DU HERO: "By dox", "Prof. E. Chimusa", "8 weeks"
   ========================================================= */
body.single-courses .tutor-course-details-header [class*="tutor-meta"],
body.single-courses .tutor-course-details-header .tutor-meta-value,
body.single-courses .tutor-course-details-header .tutor-instructor-name,
body.single-courses .tutor-course-details-header .tutor-meta a {
    color: rgba(255, 255, 255, 0.95) !important;
}

body.single-courses .tutor-course-details-header .tutor-meta-key,
body.single-courses .tutor-course-details-header [class*="tutor-meta-title"] {
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Icônes meta (user icon devant Prof, clock icon devant weeks, etc) */
body.single-courses .tutor-course-details-header [class*="tutor-icon"],
body.single-courses .tutor-course-details-header .tutor-meta svg {
    color: rgba(255, 255, 255, 0.85) !important;
    fill: rgba(255, 255, 255, 0.85) !important;
    opacity: 1 !important;
}

/* =========================================================
   5) SAVE / SHARE buttons (en haut à droite du hero)
   ========================================================= */
body.single-courses .tutor-course-details-header .tutor-course-top-action,
body.single-courses .tutor-course-details-header .tutor-btn-ghost,
body.single-courses .tutor-course-details-header button[class*="wishlist"],
body.single-courses .tutor-course-details-header button[class*="share"],
body.single-courses .tutor-course-details-header .tutor-wishlist-btn,
body.single-courses .tutor-course-details-header .tutor-share-btn {
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    opacity: 1 !important;
}

body.single-courses .tutor-course-details-header .tutor-course-top-action:hover,
body.single-courses .tutor-course-details-header .tutor-btn-ghost:hover,
body.single-courses .tutor-course-details-header button[class*="wishlist"]:hover,
body.single-courses .tutor-course-details-header button[class*="share"]:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #FFFFFF !important;
}

/* Icons dans les buttons SAVE / SHARE */
body.single-courses .tutor-course-details-header .tutor-course-top-action svg,
body.single-courses .tutor-course-details-header button[class*="wishlist"] svg,
body.single-courses .tutor-course-details-header button[class*="share"] svg {
    color: inherit !important;
    fill: currentColor !important;
}

/* =========================================================
   6) "Courses" label dans le breadcrumb (1er élément cliquable)
   ========================================================= */
body.single-courses .ods-course-breadcrumb > a:first-child,
body.single-courses .ods-course-breadcrumb > *:first-child {
    color: #C8E6C9 !important;
    font-weight: 500 !important;
}

/* Le nom du cours actuel (dernier élément, pas cliquable) plus blanc */
body.single-courses .ods-course-breadcrumb > *:last-child {
    color: #FFFFFF !important;
    font-weight: 500 !important;
}