/* ================================================================
   Netflix Light Theme  —  home-corporate.css
   Active when: html.theme-light  (toggled by nfToggleTheme())
   Same Netflix red #d0252b accent — inverted to a light palette
   Body #f8f8f8  |  Cards #ffffff  |  Footer #1f1f1f
   ================================================================ */

/* ── THEME TOGGLE BUTTON (always visible, both themes) ─────────── */
.nf-theme-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.50);
    background: transparent;
    color: rgba(255,255,255,0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    margin-right: 10px;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    vertical-align: middle;
}
.nf-theme-toggle:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.80);
    color: #fff;
}

/* ── PROFILE DROPDOWN — dark mode (default) ─────────────────────── */
/* LMS sets near-white bg (var(--bg-white-2)) with white text → invisible */
header .menu_pro_tgl_bg {
    background-color: #1e1e1e !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.60) !important;
}
/* Arrow triangle — matches panel bg */
header .menu_pro_tgl_bg .path-pos::after {
    background-color: #1e1e1e !important;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-left: 1px solid rgba(255,255,255,0.08);
}
header .menu_pro_tgl_bg .path-pos h4 { color: rgba(255,255,255,0.90) !important; }
header .menu_pro_tgl_bg .path-pos p  { color: rgba(255,255,255,0.55) !important; }
header .menu_pro_tgl_bg ul li a      { color: rgba(255,255,255,0.75) !important; }
header .menu_pro_tgl_bg ul li a:hover { color: #fff !important; background: rgba(255,255,255,0.06) !important; }
header .menu_pro_tgl_bg ul li a i    { color: rgba(208,37,43,0.80) !important; }
/* Left accent bar on hover — Netflix red instead of LMS blue */
header .menu_pro_tgl_bg ul li:hover::after { background-color: #d0252b !important; }

/* ── MOBILE OFFCANVAS — dark mode ────────────────────────────────── */
/* Bootstrap .text-dark (#212529) overrides inherited white on dark bg */
.mobile-view-offcanves .btn-toggle,
.mobile-view-offcanves .btn-toggle-list,
.mobile-view-offcanves .text-dark {
    color: rgba(255,255,255,0.85) !important;
}
.mobile-view-offcanves .btn-toggle:hover,
.mobile-view-offcanves .btn-toggle-list:hover {
    color: #fff !important;
    background-color: rgba(255,255,255,0.07) !important;
}
.mobile-view-offcanves .btn-toggle-nav li a { color: rgba(255,255,255,0.70) !important; }
/* btn-close × is a dark icon — invert to white on dark bg */
.mobile-view-offcanves .btn-close { filter: invert(1) brightness(1.5) !important; }
/* offcanves-profile — LMS sets var(--hover-color-2) = #f2f3f5 (light gray), jarring on dark #181818 */
.mobile-view-offcanves .offcanves-profile {
    background-color: #1e1e1e !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.mobile-view-offcanves .offcanves-profile h4 { color: rgba(255,255,255,0.90) !important; }
.mobile-view-offcanves .offcanves-profile p  { color: rgba(255,255,255,0.55) !important; }
.mobile-view-offcanves .offcanves-profile a  { color: inherit !important; }

/* In light mode the scrolled header is white — darken the toggle */
html.theme-light .menubar.nf-scrolled .nf-theme-toggle {
    border-color: rgba(0,0,0,0.22);
    color: rgba(0,0,0,0.60);
}
html.theme-light .menubar.nf-scrolled .nf-theme-toggle:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.45);
    color: #141414;
}

/* ── DESIGN TOKENS override ─────────────────────────────────────── */
html.theme-light {
    --nf-bg:         #f8f8f8;
    --nf-surface:    #f0f0f0;
    --nf-card:       #ffffff;
    --nf-card-hover: #fafafa;
    --nf-red:        #d0252b;
    --nf-red-hover:  #a81e23;
    --nf-white:      #141414;   /* inverted: "white" text becomes near-black */
    --nf-text:       #141414;
    --nf-text-muted: #555555;
    --nf-text-dim:   #888888;
    --nf-border:     rgba(0,0,0,0.08);
}

/* ── BODY & PAGE ────────────────────────────────────────────────── */
html.theme-light body {
    background-color: #f8f8f8 !important;
}
html.theme-light .nf-page {
    background: #f8f8f8;
    color: #141414;
}

/* ── NAVBAR ─────────────────────────────────────────────────────── */
/* At the top: still transparent (same as dark — hero image shows through) */
html.theme-light .menubar {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}
/* On scroll: crisp white */
html.theme-light .menubar.nf-scrolled {
    background-color: rgba(255,255,255,0.97) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.10) !important;
}

/* Nav links — white over hero, dark when header scrolled-white */
html.theme-light .menubar.nf-scrolled .main-nav-wrap .nav-item a:not(.exclude),
html.theme-light .menubar.nf-scrolled .navbar-nav .nav-item a,
html.theme-light .menubar.nf-scrolled .right-menubar > a,
html.theme-light .menubar.nf-scrolled .right-menubar > li > a {
    color: #141414 !important;
}
html.theme-light .menubar.nf-scrolled .main-nav-wrap .nav-item a:not(.exclude):hover,
html.theme-light .menubar.nf-scrolled .navbar-nav .nav-item a:hover {
    color: #d0252b !important;
}

/* Dropdown panels */
html.theme-light header .navbarHover {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.14) !important;
}
html.theme-light header .navbarHover li a {
    color: #222 !important;
    background: transparent !important;
}
html.theme-light header .navbarHover li a:hover {
    background: #fef2f2 !important;
    color: #d0252b !important;
}
html.theme-light header .navbarHover .text-cat            { color: #222 !important; }
html.theme-light header .navbarHover .has-sub-category i  { color: #888 !important; }
html.theme-light header .navbarHover .icons i             { color: #d0252b !important; }

/* Sub-category flyout */
html.theme-light header .sub-category-menu {
    background-color: #fafafa !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.10) !important;
}
html.theme-light header .sub-category-menu li a       { color: #333 !important; }
html.theme-light header .sub-category-menu li a:hover { background: #fef2f2 !important; color: #d0252b !important; }

/* More / custom-page dropdown */
html.theme-light header .navbarHover a { color: #222 !important; }

/* Profile dropdown */
html.theme-light header .menu_pro_tgl_bg {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.14) !important;
}
html.theme-light header .menu_pro_tgl_bg .path-pos::after {
    background-color: #ffffff !important;
    border-top: 1px solid rgba(0,0,0,0.08);
    border-left: 1px solid rgba(0,0,0,0.08);
}
html.theme-light header .menu_pro_tgl_bg .path-pos h4 { color: #141414 !important; }
html.theme-light header .menu_pro_tgl_bg .path-pos p  { color: #666 !important; }
/* Specificity must beat header_lg_device.php inline <style>:
   .menubar .right-menubar .menu_pro_tgl_bg ul li a (0,3,3) !important
   → use (0,4,4) selector to win */
html.theme-light .menubar .right-menubar .menu_pro_tgl_bg ul li a {
    color: #333 !important;
}
html.theme-light .menubar .right-menubar .menu_pro_tgl_bg ul li a:hover {
    color: #d0252b !important;
    background: #fef2f2 !important;
}
html.theme-light .menubar .right-menubar .menu_pro_tgl_bg ul li a i {
    color: #d0252b !important;
}
html.theme-light header .menu_pro_tgl_bg ul li:hover::after { background-color: #d0252b !important; }

/* Search dropdown */
html.theme-light header .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
}

/* Login button — Netflix red, same as dark mode */
html.theme-light .nf-login-btn {
    background-color: #d0252b !important;
    color: #fff !important;
    border: none !important;
}
html.theme-light .nf-login-btn:hover {
    background-color: #a81e23 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Back-to-admin bar */
html.theme-light header + .bg-light,
html.theme-light .back-to-admin-bar,
html.theme-light header .bg-light     { background-color: #1a1a1a !important; }
html.theme-light .back-to-admin       { color: rgba(255,255,255,0.70) !important; }
html.theme-light .back-to-admin:hover { color: #fff !important; }

/* Mobile app banner */
html.theme-light .mobile-app-banner {
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
html.theme-light .mobile-app-banner-content      { color: #141414 !important; }
html.theme-light #mobile-app-banner-close-button { color: #666 !important; }

/* ── HERO gradients ─────────────────────────────────────────────── */
/* Top vignette — keep dark for legibility over hero image */
html.theme-light .nf-hero__grad-top {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.65) 0%,
        transparent 100%
    );
}
/* Left cinematic gradient — same dark sweep, but fades to transparent */
html.theme-light .nf-hero__grad-left {
    background: linear-gradient(
        77deg,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.60) 38%,
        rgba(0,0,0,0.10) 62%,
        transparent 100%
    );
}
/* Bottom — fades to the page bg (#f8f8f8) */
html.theme-light .nf-hero__grad-bottom {
    background: linear-gradient(
        to top,
        #f8f8f8 0%,
        rgba(248,248,248,0.70) 35%,
        transparent 100%
    );
}

/* Hero eyebrow badge — keep Netflix red */
html.theme-light .nf-hero__eyebrow {
    background: rgba(208,37,43,0.18);
    border-color: rgba(208,37,43,0.45);
}
html.theme-light .nf-blink-dot { background: #d0252b; }

/* Hero text: stay white since hero always has a dark image/overlay */
html.theme-light .nf-hero .nf-hero__title   { color: #ffffff !important; }
html.theme-light .nf-hero .nf-hero__desc    { color: rgba(255,255,255,0.82) !important; }
html.theme-light .nf-hero .nf-hero__greeting{ color: rgba(255,255,255,0.75) !important; }

/* Hero content glass card — keep dark so text stays legible */
html.theme-light .nf-hero .nf-hero__content {
    background: rgba(0,0,0,0.28) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* Autoplay pill — subtle white on dark image */
html.theme-light .nf-hero__autoplay-bar {
    background: rgba(255,255,255,0.22);
    box-shadow: 0 1px 6px rgba(0,0,0,0.20);
}
html.theme-light .nf-hero__autoplay-fill {
    background: #d0252b;
    box-shadow: 0 0 8px rgba(208,37,43,0.45);
}

/* Hero CTA buttons unchanged (white play, grey info) */

/* ── CONTENT AREA ───────────────────────────────────────────────── */
html.theme-light .nf-content { background: #f8f8f8; }

/* Row vignette edge masks — match body bg */
html.theme-light .nf-row__track-outer::before {
    background: linear-gradient(to right, #f8f8f8 0%, transparent 100%);
}
html.theme-light .nf-row__track-outer::after {
    background: linear-gradient(to left, #f8f8f8 0%, transparent 100%);
}

/* Row header */
html.theme-light .nf-row__title        { color: #141414; }
html.theme-light .nf-row__title-accent { background: #d0252b; }
html.theme-light .nf-row__explore      { color: #888; }
html.theme-light .nf-row__explore:hover { color: #d0252b !important; }

/* Nav arrows */
html.theme-light .nf-nav-btn {
    border-color: rgba(0,0,0,0.22);
    background: rgba(255,255,255,0.92);
    color: #141414;
    backdrop-filter: none;
}
html.theme-light .nf-nav-btn:hover {
    background: #ffffff;
    border-color: #d0252b;
    color: #d0252b;
    transform: scale(1.08);
}

/* Events section header */
html.theme-light .nf-events-header h2 { color: #141414; }

/* ── COURSE CARD ────────────────────────────────────────────────── */
html.theme-light .nf-card {
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
html.theme-light .nf-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
html.theme-light .nf-card__thumb        { background: #e5e5e5; }
/* Light shimmer skeleton */
html.theme-light .nf-card__thumb::before {
    background: linear-gradient(90deg, #e5e5e5 25%, #efefef 50%, #e5e5e5 75%);
}
html.theme-light .nf-card__detail       { background: #ffffff; }
html.theme-light .nf-card__title        { color: #141414; }
html.theme-light .nf-card__prog-text    { color: #666; }

/* Card action buttons */
html.theme-light .nf-card__action-btn {
    border-color: rgba(0,0,0,0.28);
    color: #444;
}
html.theme-light .nf-card__action-btn:hover {
    border-color: #d0252b;
    background: #fef2f2;
    color: #d0252b;
}
/* Play button — Netflix red */
html.theme-light .nf-card__action-btn.nf-play-btn {
    background: #141414;
    border-color: #141414;
    color: #fff;
}
html.theme-light .nf-card__action-btn.nf-play-btn:hover {
    background: #d0252b;
    border-color: #d0252b;
}

/* Progress bar */
html.theme-light .nf-card__progress      { background: rgba(0,0,0,0.10); }
html.theme-light .nf-card__progress-fill { background: #d0252b; }

/* ── BACK-TO-TOP BUTTON ─────────────────────────────────────────── */
html.theme-light .nf-back-top {
    background: rgba(208,37,43,0.88);
    box-shadow: 0 4px 20px rgba(208,37,43,0.30);
}
html.theme-light .nf-back-top:hover {
    background: #d0252b;
    box-shadow: 0 6px 28px rgba(208,37,43,0.50);
}

/* ── MOBILE OFFCANVAS ───────────────────────────────────────────── */
html.theme-light .mobile-view-offcanves .offcanvas {
    background-color: #f8f8f8 !important;
    color: #141414 !important;
}
html.theme-light .mobile-view-offcanves .offcanvas-header,
html.theme-light .mobile-view-offcanves .offcanvas-header.bg-light {
    background-color: #f8f8f8 !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
/* btn-close × — reset to dark icon (default) on light bg */
html.theme-light .mobile-view-offcanves .btn-close { filter: none !important; }
html.theme-light .mobile-view-offcanves .offcanves-profile {
    background-color: #efefef !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
html.theme-light .mobile-view-offcanves .offcanves-profile h4 { color: #141414 !important; }
html.theme-light .mobile-view-offcanves .offcanves-profile p  { color: #666 !important; }
html.theme-light .mobile-view-offcanves .logIn-btn,
html.theme-light .mobile-view-offcanves .signUp-btn {
    background: #d0252b !important;
    color: #fff !important;
    border-color: #d0252b !important;
}
html.theme-light .mobile-view-offcanves .bg-light { background-color: #f8f8f8 !important; }
html.theme-light .mobile-view-offcanves .btn-toggle,
html.theme-light .mobile-view-offcanves .btn-toggle-list,
html.theme-light .mobile-view-offcanves .text-dark {
    color: #141414 !important;
    background-color: transparent !important;
}
html.theme-light .mobile-view-offcanves .btn-toggle:hover,
html.theme-light .mobile-view-offcanves .btn-toggle-list:hover {
    color: #d0252b !important;
    background-color: #fef2f2 !important;
}
/* Sub-category list has inline style="background-color:#222" — needs !important to override */
html.theme-light .mobile-view-offcanves .btn-toggle-nav { background-color: #f0f0f0 !important; }
html.theme-light .mobile-view-offcanves .btn-toggle-nav li a      { color: #444 !important; }
html.theme-light .mobile-view-offcanves .btn-toggle-nav li a:hover { color: #d0252b !important; }

/* Mobile toggle button — dark on light offcanvas */
html.theme-light .mobile-view-offcanves .nf-theme-toggle {
    border-color: rgba(0,0,0,0.22);
    color: rgba(0,0,0,0.60);
}
html.theme-light .mobile-view-offcanves .nf-theme-toggle:hover {
    background: rgba(0,0,0,0.05);
    border-color: #141414;
    color: #141414;
}

/* ── FOOTER (dark — Netflix signature) ─────────────────────────── */
/* Light mode keeps the dark Netflix footer for the cinematic feel  */
html.theme-light .footer.border-top,
html.theme-light section.footer {
    background-color: #1a1a1a !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.65) !important;
}
html.theme-light .footer h1  { color: rgba(255,255,255,0.88) !important; }
html.theme-light .footer p   { color: rgba(255,255,255,0.50) !important; }
html.theme-light .footer ul li a            { color: rgba(255,255,255,0.55) !important; }
html.theme-light .footer ul li a:hover      { color: #fff !important; }
html.theme-light .footer ul li a .fa-brands { color: rgba(255,255,255,0.45) !important; }
html.theme-light .footer ul li a:hover .fa-brands { color: #d0252b !important; }
html.theme-light .footer-divider            { border-top-color: rgba(255,255,255,0.07) !important; }
html.theme-light .footer-bottom {
    background: #111111 !important;
    color: rgba(255,255,255,0.35) !important;
}