/*
 * 360aiskills (2026) site chrome (plan10). Loaded on EVERY page while the
 * "360aiskills (2026)" homepage is active (Theme Manager); body gets
 * .ai3-chrome. Re-points the theme's colour variables to the approved
 * palette and gives the shared header + footer the mockup look.
 * Switch the homepage back to Mentora and none of this loads.
 */
body.ai3-chrome {
    --theme: #5B3DF5;
    --theme-2: #22D3EE;
    --theme-color: #5B3DF5;
    --primary-color: #5B3DF5;
    --secondary-color: #22D3EE;
    --v2-primary: #5B3DF5;
    --v2-secondary: #22D3EE;
    --eduex-primary: #5B3DF5;
    --eduex-primary-hover: #3420A8;
    --eduex-primary-light: rgba(91, 61, 245, 0.08);
    --eduex-primary-border: rgba(91, 61, 245, 0.18);
    --eduex-primary-rgb: 91, 61, 245;
    --eduex-secondary: #22D3EE;
    --eduex-secondary-light: rgba(34, 211, 238, 0.1);
    --eduex-secondary-border: rgba(34, 211, 238, 0.2);
    --eduex-secondary-rgb: 34, 211, 238;
    --bs-primary: #5B3DF5;
    --bs-primary-rgb: 91, 61, 245;
    --header: #0B1A3A;
    --bg-2: #0B1A3A;
}

/* ---------- Header ---------- */
body.ai3-chrome .header-1 {
    background: #FFFFFF;
    border-bottom: 1px solid #E4E7F2;
    font-family: 'Inter', system-ui, sans-serif;
}
body.ai3-chrome .header-1.sticky { background: rgba(255, 255, 255, 0.97); box-shadow: 0 6px 20px rgba(11, 26, 58, 0.08); }
body.ai3-chrome .header-1 .logo-shape { display: none; }
/* Always the dark logo on the white bar (the white logo sat on the teal shape). */
body.ai3-chrome .header-1 .header-logo { display: block; }
body.ai3-chrome .header-1 .header-logo2 { display: none; }

body.ai3-chrome .header-main .main-menu ul li a {
    color: #0B1A3A;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
}
body.ai3-chrome .header-main .main-menu ul li a:hover,
body.ai3-chrome .header-main .main-menu ul li.active > a { color: #4B32D9; }
body.ai3-chrome .header-main .main-menu ul li .submenu li a:hover { color: #4B32D9; }

body.ai3-chrome .header-1 .header-right .search-toggler { border-color: #E4E7F2; color: #0B1A3A; }
body.ai3-chrome .header-1 .header-right .sidebar__toggle { color: #0B1A3A; }
body.ai3-chrome .header-1 .header-login-link { color: #0B1A3A !important; font-weight: 600; }
body.ai3-chrome .header-1 .header-login-link:hover { color: #4B32D9 !important; }

/* Mockup button: violet, 10px corners, no sweep animation. */
body.ai3-chrome .header-1 .theme-btn {
    background: #5B3DF5;
    color: #FFFFFF;
    border-radius: 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    min-height: 44px;
}
body.ai3-chrome .header-1 .theme-btn::before { display: none; }
body.ai3-chrome .header-1 .theme-btn:hover { background: #3420A8; color: #FFFFFF; }
body.ai3-chrome .header-1 .theme-btn i { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }

/* Site-wide buttons: hover goes darker violet instead of the cyan sweep
   with dark text (keeps contrast readable). */
body.ai3-chrome .theme-btn::before { background-color: #3420A8; }
body.ai3-chrome .theme-btn:hover { color: #FFFFFF; }
body.ai3-chrome .theme-btn:hover i { background-color: #FFFFFF; color: #3420A8; }

/* ---------- Inner-page banner (Contact, About, FAQ…) ----------
   The theme's breadcrumb.jpg is teal; replace it with the navy brand
   gradient (inline style, so !important). */
body.ai3-chrome .breadcrumb-wrapper {
    background-image: linear-gradient(135deg, #0B1A3A 0%, #16295A 60%, #2A1F7A 100%) !important;
    background-color: #0B1A3A !important;
}
body.ai3-chrome .breadcrumb-wrapper .page-heading h1 { color: #FFFFFF; }
body.ai3-chrome .breadcrumb-wrapper .breadcrumb-items { background: rgba(255, 255, 255, 0.08); }
body.ai3-chrome .breadcrumb-wrapper .breadcrumb-items li,
body.ai3-chrome .breadcrumb-wrapper .breadcrumb-items a { color: #E4E9F7; }
body.ai3-chrome .breadcrumb-wrapper .breadcrumb-items i { color: #5EEAD4; }

/* ---------- Leftovers from the old green theme (plan10) ----------
   These sections set the theme's green/mint images inline, so !important.
   Same layouts, brand colours only. */

/* About → "Top Categories / Learning Paths Students Love": dark green
   patterned banner → navy brand gradient (its text is already white). */
body.ai3-chrome .mhq-top-category-section {
    background-image: linear-gradient(135deg, #0B1A3A 0%, #16295A 60%, #2A1F7A 100%) !important;
    background-color: #0B1A3A !important;
}

/* About → "Start your learning journey today" call-to-action: mint image →
   soft violet / cyan brand tint. */
body.ai3-chrome .mhq-cta-new-wrapper {
    background-image: linear-gradient(135deg, #F1EDFF 0%, #E9E4FF 45%, #DDF7FC 100%) !important;
    background-color: #F1EDFF !important;
}

/* Login, register, password reset and certificate verification hero:
   mint/peach image → the same soft brand tint. */
body.ai3-chrome .mhq-hero-section.mhq-hero-1 {
    background-image: linear-gradient(135deg, #F5F6FB 0%, #EEEAFF 55%, #E3F8FC 100%) !important;
    background-color: #F5F6FB !important;
}

/* Instructor profile → courses list: grey-mint image → brand page grey. */
body.ai3-chrome .mhq-courses-section-2 {
    background-image: none !important;
    background-color: #F5F6FB !important;
}

/* Links inside admin-written pages (Privacy, Terms…) were dark green. */
body.ai3-chrome .custom-page-content a {
    color: #5B3DF5 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.ai3-chrome .custom-page-content a:hover { color: #3420A8; }

/* ---------- /courses search box on phones (Plan8 F7) ----------
   Was a bare browser input with a loose icon: now a pill with the search
   button inside, like the app. */
body.ai3-chrome .mhq-search-widget form {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #E4E7F2;
    border-radius: 999px;
    padding: 5px 5px 5px 18px;
    box-shadow: 0 4px 14px rgba(11, 26, 58, 0.06);
    transition: border-color .15s, box-shadow .15s;
}
body.ai3-chrome .mhq-search-widget form:focus-within {
    border-color: #5B3DF5;
    box-shadow: 0 0 0 4px rgba(91, 61, 245, 0.15);
}
body.ai3-chrome .mhq-search-widget input[name="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    height: 40px;
    font-size: 15px;
    color: #0B1A3A;
}
body.ai3-chrome .mhq-search-widget input[name="search"]::placeholder { color: #646E8C; }
body.ai3-chrome .mhq-search-widget button[type="submit"] {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #5B3DF5;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.ai3-chrome .mhq-search-widget button[type="submit"]:hover { background: #3420A8; }

/* ---------- Footer ---------- */
body.ai3-chrome .mhq-footer-section,
body.ai3-chrome .mhq-footer-section .footer-bg-2,
body.ai3-chrome .mhq-footer-bottom { background-color: #071230 !important; background-image: none !important; }
body.ai3-chrome .mhq-footer-section,
body.ai3-chrome .mhq-footer-section p,
body.ai3-chrome .mhq-footer-section li,
body.ai3-chrome .mhq-footer-section span,
body.ai3-chrome .mhq-footer-section .text-muted,
body.ai3-chrome .mhq-footer-bottom p { color: #C9D2EC !important; }
body.ai3-chrome .mhq-footer-section .mhq-widget-head h3,
body.ai3-chrome .mhq-footer-section .mhq-widget-head h4,
body.ai3-chrome .mhq-footer-section .mhq-widget-head h5 { color: #FFFFFF !important; font-family: 'Sora', 'Inter', sans-serif; }
body.ai3-chrome .mhq-footer-section a { color: #C9D2EC !important; }
body.ai3-chrome .mhq-footer-section a:hover { color: #5EEAD4 !important; }
body.ai3-chrome .mhq-footer-section .social-icon a {
    border-color: #1E2C55 !important;
    background: #0B1A3A !important;
}
body.ai3-chrome .mhq-footer-bottom { border-top: 1px solid #1E2C55; }