/* =====================================================================
   KDM Academy design system layer — loaded AFTER all theme stylesheets.
   Upgrades the stock Elegant theme in place: typography, color tokens,
   buttons, cards, header, breadcrumb, forms, footer, micro-interactions.
   Palette: royal blue #284898 / deep navy #1C3470 / gold #FFB703
            ink #1E2A52 / muted #5B6785 / canvas #FCFBF9 / line #E6EAF3
   ===================================================================== */

/* ---------- remap the stock theme's own color variables to the KDM brand ----------
   style.css drives its accent (buttons, links, icons, tints) from these variables, so
   overriding them re-brands ~100 hard-coded uses of stock violet #754FFE at once. */
:root, .dark-theme {
    --color-4: #284898;               /* accent: stock violet -> KDM royal blue */
    --color-12: rgba(40, 72, 152, .16); /* accent tint */
    --color-15: rgba(40, 72, 152, .30); /* accent tint, stronger */
    --color-17: #284898;              /* stock sky blue -> KDM blue */
    --color-1: #1B2450;               /* stock near-black -> KDM navy */
    --color-7: #1D3676;
    --color-10: #1B2450;
    --bg-white-2: #F6F8FD;            /* stock lavender wash -> cool KDM tint */
}

/* ---------- tokens ---------- */
:root {
    --kdm-blue: #284898;
    --kdm-blue-dark: #1D3676;
    --kdm-blue-soft: #EEF2FB;
    --kdm-gold: #F8B810;
    --kdm-gold-soft: #FFF4D0;
    --kdm-ink: #1E2A52;
    --kdm-muted: #5B6785;
    --kdm-canvas: #FCFBF9;
    --kdm-line: #E6EAF3;
    --kdm-radius: 14px;
    --kdm-radius-lg: 20px;
    --kdm-shadow-sm: 0 2px 10px rgba(30, 42, 82, .07);
    --kdm-shadow: 0 8px 26px rgba(30, 42, 82, .12);
    --kdm-shadow-lg: 0 18px 44px rgba(30, 42, 82, .18);
    --kdm-ease: cubic-bezier(.22, .61, .36, 1);
    --kdm-crimson: #B02030;
    --kdm-crimson-dark: #8D1626;
    --kdm-purple: #482888;
    --kdm-purple-soft: rgba(72, 40, 136, .09);
    --kdm-navy: #1B2450;
}

/* ---------- base ---------- */
body {
    background: var(--kdm-canvas);
    color: var(--kdm-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Baloo 2', 'Inter', sans-serif;
    color: var(--kdm-ink);
    letter-spacing: -.01em;
}

::selection { background: var(--kdm-gold); color: var(--kdm-blue-dark); }

a { color: var(--kdm-blue); }
a:hover { color: var(--kdm-blue-dark); }

.text-primary { color: var(--kdm-blue) !important; }
.bg-primary, .btn-primary { background-color: var(--kdm-blue) !important; }

/* ---------- buttons ---------- */
.btn {
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .18s var(--kdm-ease), box-shadow .18s var(--kdm-ease), background-color .18s, color .18s, border-color .18s;
}

.btn-primary {
    border: none;
    color: #fff;
    background: linear-gradient(180deg, #2F55AE 0%, var(--kdm-blue) 100%);
    box-shadow: 0 6px 16px rgba(40, 72, 152, .28);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--kdm-blue-dark) !important;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(28, 52, 112, .34);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(40, 72, 152, .3); }
.btn-primary:focus-visible { outline: 3px solid rgba(40, 72, 152, .25); outline-offset: 2px; }

.btn-outline-primary {
    border: 1.5px solid var(--kdm-blue);
    color: var(--kdm-blue);
    background: #fff;
}
.btn-outline-primary:hover {
    background: var(--kdm-blue);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(40, 72, 152, .22);
}

.btn-secondary {
    background: #EEF1F8;
    border: none;
    color: var(--kdm-ink);
}
.btn-secondary:hover { background: #E2E7F3; color: var(--kdm-blue-dark); }

.btn-light, .btn-default {
    background: #fff;
    border: 1px solid var(--kdm-line);
    color: var(--kdm-ink);
}
.btn-light:hover, .btn-default:hover { border-color: var(--kdm-blue); color: var(--kdm-blue); background: #fff; }

/* ---------- header ---------- */
nav.navbar {
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--kdm-line), 0 4px 18px rgba(30, 42, 82, .06);
}

nav.navbar .nav-link {
    font-weight: 500;
    color: var(--kdm-ink);
    transition: color .15s;
}
nav.navbar .nav-link:hover { color: var(--kdm-blue); }

.sub-header { font-size: 13px; }

/* ---------- course & content cards ---------- */
.eGridCourse, .courses-card-body, .epopCourse {
    border-radius: var(--kdm-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--kdm-shadow-sm);
    transition: transform .22s var(--kdm-ease), box-shadow .22s var(--kdm-ease);
}
.eGridCourse:hover, .epopCourse:hover, .courses-card-body:hover {
    transform: translateY(-6px);
    box-shadow: var(--kdm-shadow-lg);
    text-decoration: none;
}
.courses-card-image { border-radius: var(--kdm-radius-lg) var(--kdm-radius-lg) 0 0; overflow: hidden; }

.card {
    border: 1px solid var(--kdm-line);
    border-radius: var(--kdm-radius);
    box-shadow: var(--kdm-shadow-sm);
}

/* ---------- badges & pills ---------- */
.badge { border-radius: 999px; font-weight: 600; padding: .45em .9em; }
.text-bg-primary-subtle { background: var(--kdm-blue-soft) !important; color: var(--kdm-blue) !important; }

/* ---------- breadcrumb / page head ---------- */
.bread-crumb {
    background:
        radial-gradient(900px 260px at 88% -40%, rgba(40, 72, 152, .10), transparent 70%),
        linear-gradient(180deg, #F4F6FC 0%, var(--kdm-canvas) 100%);
    border-bottom: 1px solid var(--kdm-line);
}
.bread-crumb h1 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    margin-top: 8px;
}
.bread-crumb .breadcrumb { margin: 0; }
.bread-crumb .breadcrumb-item a,
.bread-crumb .breadcrumb-item span {
    font-weight: 500;
    color: var(--kdm-muted);
}
.bread-crumb .breadcrumb-item.active span { color: var(--kdm-blue); }
.bread-crumb .breadcrumb-item a:hover { color: var(--kdm-blue); }

/* ---------- forms ---------- */
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--kdm-line);
    color: var(--kdm-ink);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
    border-color: var(--kdm-blue);
    box-shadow: 0 0 0 4px rgba(40, 72, 152, .14);
}
.form-control::placeholder { color: #A6B0C9; }
label { color: var(--kdm-ink); }

/* ---------- tables ---------- */
.table > :not(caption) > * > * { padding: .8rem 1rem; }
.table thead th {
    font-family: 'Baloo 2', 'Inter', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kdm-muted);
    border-bottom: 1px solid var(--kdm-line);
}

/* ---------- footer ---------- */
.lms2-footer-section {
    background: #0E1631;
    color: #C6CDE4;
}
.lms2-footer-section h1, .lms2-footer-section h2,
.lms2-footer-section h3, .lms2-footer-section h4,
.lms2-footer-section h5 {
    color: #fff;
    font-family: 'Baloo 2', 'Inter', sans-serif;
}
.lms2-footer-section a { color: #C6CDE4; transition: color .15s; }
.lms2-footer-section a:hover { color: var(--kdm-gold); }
.lms2-footer-section .form-control {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
}

/* ---------- hero (custom KDM hero) ---------- */
.kdm-hero { background: transparent; }
.kdm-hero-eyebrow {
    background: var(--kdm-blue-soft);
    color: var(--kdm-blue);
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 700;
    letter-spacing: .14em;
    font-size: 12px;
    display: inline-block;
}
.kdm-hero-title {
    font-size: clamp(38px, 5.4vw, 64px);
    font-weight: 800;
    line-height: 1.06;
    color: var(--kdm-ink);
}
.kdm-hero-sub { color: var(--kdm-muted); font-size: 17px; }
.kdm-hero .btn-primary, .kdm-hero-cta .btn-primary { padding: 14px 30px; font-size: 16px; border-radius: 14px; }
.kdm-hero .btn-outline-primary, .kdm-hero-cta .btn-outline-primary { padding: 14px 30px; font-size: 16px; border-radius: 14px; }
.kdm-hero-featured {
    border-radius: var(--kdm-radius-lg);
    box-shadow: var(--kdm-shadow-lg);
    overflow: hidden;
}
.kdm-hero-book-cover { border-radius: 14px; }

/* ---------- utility rhythm ---------- */
section { scroll-margin-top: 90px; }

/* ---------- scrollbar (webkit) ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C9D2E8; border-radius: 999px; border: 3px solid var(--kdm-canvas); }
::-webkit-scrollbar-thumb:hover { background: #A9B6D6; }

/* ---------- responsive guard ---------- */
@media (max-width: 767px) {
    .kdm-hero-title { font-size: clamp(32px, 9vw, 40px); }
    .bread-crumb h1 { font-size: 26px; }
}

/* ---------- cookie consent (eu-cookie.php) ---------- */
.cookieConsentContainer {
    background: #fff !important;
    color: var(--kdm-ink);
    border-radius: 16px;
    box-shadow: var(--kdm-shadow-lg);
    border: 1px solid var(--kdm-line);
    padding: 18px 22px;
    max-width: 400px;
}
.cookieTitle { color: var(--kdm-ink); font-family: 'Baloo 2', 'Inter', sans-serif; font-weight: 700; }
.cookieDesc { color: var(--kdm-muted); }
.link-cookie-policy, .cookieDesc a { color: var(--kdm-blue); }
.cookieButton {
    background: var(--kdm-blue) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(40, 72, 152, .28);
    transition: background .15s, transform .15s;
}
.cookieButton:hover { background: var(--kdm-blue-dark) !important; transform: translateY(-1px); }

/* ---------- page loader ---------- */
img.page-loader { border-radius: 999px; }

/* eu-cookie banner loads its css in <body>, so anchor-level overrides with !important */
.cookieConsentContainer { background: #fff !important; color: var(--kdm-ink) !important; opacity: 1 !important; border: 1px solid var(--kdm-line) !important; border-radius: 16px !important; box-shadow: var(--kdm-shadow-lg) !important; padding: 20px 24px !important; max-width: 380px !important; }
.cookieDesc { color: var(--kdm-muted) !important; font-size: 14px !important; line-height: 1.55 !important; }
.cookieDesc a, .link-cookie-policy { color: var(--kdm-blue) !important; text-decoration: underline !important; }
.cookieButton a {
    display: inline-block !important;
    background: var(--kdm-blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 26px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 12px rgba(40, 72, 152, .28) !important;
    text-align: center !important;
}
.cookieButton a:hover { background: var(--kdm-blue-dark) !important; }

/* ---------- tabs (course page etc.): KDM blue instead of stock purple ---------- */
.nav-tabs .nav-link { color: var(--kdm-muted); border: none; border-bottom: 2px solid transparent; font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--kdm-blue); border-bottom-color: var(--kdm-line); }
.nav-tabs .nav-link.active {
    color: var(--kdm-blue) !important;
    border: none !important;
    border-bottom: 2px solid var(--kdm-blue) !important;
    background: transparent !important;
}

/* FIX: purecookie.css sets .cookieDesc p {color:#fff}; my card is white so text vanished */
.cookieConsentContainer .cookieDesc p { color: var(--kdm-ink) !important; font-family: 'Inter', sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; margin: 0 0 4px !important; }
.cookieConsentContainer .cookieDesc a { color: var(--kdm-blue) !important; font-family: 'Inter', sans-serif !important; opacity: 1 !important; }
.cookieConsentContainer .cookieButton a { font-family: 'Baloo 2', 'Inter', sans-serif !important; width: 100%; margin-top: 12px; }
.cookieConsentContainer { bottom: 16px !important; right: 16px !important; width: min(380px, calc(100vw - 32px)) !important; }

/* =====================================================================
   AUDIT PASS 2 — brand-palette alignment + page-by-page fixes
   Brand: blue #284898 / crimson #B02030 / purple #482888 / gold #F8B810
   ===================================================================== */

/* ---- one blue everywhere: kill stray indigo/purple on outline buttons ---- */
.kdm-btn-ghost, .kdm-hero-cta .btn-outline-primary, .btn-outline-primary {
    border-color: var(--kdm-blue) !important;
    color: var(--kdm-blue) !important;
}
.btn-outline-primary:hover { background: var(--kdm-blue) !important; color: #fff !important; }
.kdm-hero-eyebrow { background: var(--kdm-purple-soft) !important; color: var(--kdm-purple) !important; }

/* ---- top utility bar: slimmer, on-brand navy ---- */
.sub-header { background: var(--kdm-navy) !important; }
/* single-language site: the bar only holds a lone "English" select, so collapse it */
.sub-header:has(select.select-control option:only-child) { display: none !important; }
.sub-header .form-select, .sub-header .form-control { min-height: 0 !important; background-color: transparent !important; }
.sub-header a, .sub-header .nav-item a, .sub-header span { color: #E8EAF6 !important; font-size: 13px; }

/* ---- Join Now: use brand gold with accessible dark text ---- */
.btn-warning, .join-btn, header .btn-yellow,
nav.navbar .btn.btn-primary-yellow, .navbar .btn[href*="sign_up"] {
    background: var(--kdm-gold) !important;
    color: #2A2200 !important;
    border: none !important;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(248, 184, 16, .35);
}

/* ---- auth pages: remove dead breadcrumb band, readable fields ---- */
/* auth pages: tighten the dead space above the form */
section.sign-up { margin-top: 1.5rem !important; padding-top: 1rem !important; }
.form-control::placeholder { color: #7A859F !important; opacity: 1; }
.form-control, .form-select { background: #F3F5FA; border: 1.5px solid transparent; min-height: 46px; }
.form-control:focus, .form-select:focus { background: #fff; }
.form-control:disabled { background: #E9ECF4; }

/* ---- stats counters: only hide cart/menu badges, NOT the home stat numbers ---- */
.counter { display: revert; }

/* ---- cookie banner: compact + never block primary actions on phones ---- */
@media (max-width: 575px) {
    .cookieConsentContainer {
        left: 12px !important; right: 12px !important; bottom: 12px !important;
        width: auto !important; padding: 14px 16px !important;
    }
    .cookieConsentContainer .cookieDesc p { font-size: 12.5px !important; }
    .cookieConsentContainer .cookieButton a { padding: 9px 20px !important; }
}

/* ---- footer: brand navy, readable text, gold headings ---- */
.lms2-footer-section { background: var(--kdm-navy) !important; }
.lms2-footer-section h4, .lms2-footer-section h5, .lms2-footer-section .title { color: var(--kdm-gold) !important; letter-spacing: .06em; }
.lms2-footer-section p, .lms2-footer-section li, .lms2-footer-section a { color: #D5DBF0 !important; }
.lms2-footer-section a:hover { color: var(--kdm-gold) !important; }

/* ---- keyboard focus: visible for everyone ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(40, 72, 152, .45) !important;
    outline-offset: 2px;
}

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- tap targets: min 44px for kid fingers ---- */
@media (pointer: coarse) {
    .btn, nav.navbar .nav-link, .cookieButton a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- a11y: placeholder text must reach 4.5:1 on the field background ---- */
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #5F6B88 !important; opacity: 1; }

/* ---- semantic demotion keeps the look: script swaps tag, CSS keeps size ---- */
[data-kdm-demoted] { margin: 0; }

/* ---- leftover hard-coded stock violet on buttons/links/pagination ---- */
.eBtn .btn, .enrollBtn, .btn-purple, .page-item.active .page-link, .pagenation .active,
.eGridCourse .btn, .epopCourse .btn, .courses-card-body .btn.btn-primary {
    background-color: var(--kdm-blue) !important;
    border-color: var(--kdm-blue) !important;
    color: #fff !important;
}
.eBtn .btn:hover, .enrollBtn:hover { background-color: var(--kdm-blue-dark) !important; }
.text-purple, .purple-text { color: var(--kdm-blue) !important; }

/* =====================================================================
   FONT UNIFICATION — two families only: Baloo 2 (display) + Inter (text)
   86 stock rules pinned SF Pro / General Sans / Roboto / Poppins / Raleway /
   Space Grotesk / Clash Grotesk / Basier / Manrope / Epilogue to components.
   Icon fonts (Font Awesome, etc.) are deliberately NOT touched.
   ===================================================================== */
:root {
    --kdm-font-display: 'Baloo 2', 'Inter', system-ui, sans-serif;
    --kdm-font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* body copy + controls */
body, p, li, td, th, label, small, input, select, textarea, option, figcaption, blockquote,
.nice-select, .nice-select .option, .form-control, .form-select,
.breadcrumb, .breadcrumb-item, .nav-link, .dropdown-item, .accordion-body, .card-text,
.lecture-info, .lecture-title, .eReviewContent, .ereviewtext p, .text-14px, .text-15px, .text-16px {
    font-family: var(--kdm-font-text) !important;
}

/* headings + display text + buttons use the friendly rounded face */
h1, h2, h3, h4, h5, h6, .title, [class*="title-"], [class*="subtitle-"],
.btn, button, .eBtn .btn, .enrollBtn, [class*="lms1-btn"], [class*="lms2-btn"], [class*="lms3-btn"],
.lms1-cCard-title, .lms2-cCard-title, .lms3-cCard-title, .courses-card-body h5, .eGridCourse h5,
.h-1-banner .h-1-banner-text h1, .top-categories h1, .courses h1, .eUpcomingCourse .title-one .title,
.ePromotion h4, .Espeech-item .speech-item-content .no, .accordion-button, .nav-tabs .nav-link {
    font-family: var(--kdm-font-display) !important;
}

/* never break icon fonts */
i[class^="fa"], i[class*=" fa-"], .fa, .fas, .far, .fab, .fa-solid, .fa-brands, .fa-regular,
[class^="fa-"]::before, [class*=" fa-"]::before, .bi, [class^="bi-"]::before {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome' !important;
}
.fab, .fa-brands, .fa-brands::before, .fab::before { font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important; }