/**
 * Dark Mode Plugin – Public Styles v2.0.0
 *
 * Strategy: CSS-only colour overrides using .Dark-theme class.
 * !important overrides Elementor inline styles.
 */

/* ──────────────────────────────────────────────
 * 1. CSS CUSTOM PROPERTIES
 * ────────────────────────────────────────────── */

:root,
.Light-theme {
    --blue-light-blue: #a2cbef;
    --blue-mid-blue: #6d94bc;
    --blue-deep-blue: #00538e;
    --blue-dark-blue: #003a72;
    --blue-footer-blue: #133a52;
    --grey-stroke: #e5e7eb;
    --grey-grey-light: #9fadbd;
    --grey-dark-grey: #3b4856;
    --main-background-primary: #fff;
    --main-background-secondary: #e7f5fc;
    --main-background-cards: #fff;
    --main-yellow-main: #ffe100;
    --main-blue-main: #1f88c9;
    --main-text-text-black-main: #1e1e1e;
    --main-text-text-white-footer: #fff;
    --main-text-text-for-bright-cta: #1e1e1e;
    --main-text-text-for-dark-cta: #fff;
}

.Dark-theme {
    --blue-light-blue: #2a4b6f;
    --blue-mid-blue: #2a4b6f;
    --blue-deep-blue: #143254;
    --blue-dark-blue: #0a1f35;
    --blue-footer-blue: #1b2b41;
    --grey-stroke: #1e314a;
    --grey-grey-light: #94a3b8;
    --grey-dark-grey: #526071;
    --main-background-primary: #050b18;
    --main-background-secondary: #16253a;
    --main-background-cards: #16253a;
    --main-yellow-main: #ffe100;
    --main-blue-main: #40b4ff;
    --main-text-text-black-main: #e1e8ef;
    --main-text-text-white-footer: #e1e8ef;
    --main-text-text-for-bright-cta: #1e1e1e;
    --main-text-text-for-dark-cta: #fff;
}

/* ──────────────────────────────────────────────
 * 2. TOGGLE SWITCHER UI
 * ────────────────────────────────────────────── */

.dark-mode-switcher-container {
    display: inline-block;
}

.dark-mode-toggle {
    display: inline-block;
    position: relative;
    width: 68px;
    height: 36px;
    margin: 0;
}

.dark-mode-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
    margin: 0;
}

.dark-mode-track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1f88c9;
    border-radius: 36px;
    transition: background-color 0.4s;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.Dark-theme .dark-mode-track {
    background-color: #40b4ff;
}

.dark-mode-handle {
    position: absolute;
    height: 28px;
    width: 28px;
    left: 4px;
    bottom: 4px;
    background-color: white !important;
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b4856 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode-checkbox:checked+.dark-mode-track .dark-mode-handle {
    transform: translateX(32px);
}

.dark-mode-icon {
    position: absolute;
    width: 18px;
    height: 18px;
    transition: opacity 0.3s, transform 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode-icon svg {
    width: 100%;
    height: 100%;
}

.sun-icon {
    opacity: 1;
    transform: rotate(0deg);
}

.moon-icon {
    opacity: 0;
    transform: rotate(-90deg);
}

.dark-mode-checkbox:checked+.dark-mode-track .sun-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.dark-mode-checkbox:checked+.dark-mode-track .moon-icon {
    opacity: 1;
    transform: rotate(0deg);
}

/* ──────────────────────────────────────────────
 * 3. DARK THEME — GLOBAL OVERRIDES
 *
 * These use !important to override Elementor
 * inline styles and generated CSS.
 * ────────────────────────────────────────────── */

/*
 * 3a. BACKGROUND PRIMARY (#050B18)
 * Everything gets the dark primary background by default.
 */
.Dark-theme,
.Dark-theme body,
.Dark-theme #page,
.Dark-theme .site,
.Dark-theme .site-content,
.Dark-theme main,
.Dark-theme header,
.Dark-theme .site-header,
.Dark-theme .header_wrapper,
.Dark-theme .hfe-default-header,
.Dark-theme .elementor,
.Dark-theme .elementor-element,
.Dark-theme .elementor-section,
.Dark-theme .elementor-section .elementor-container,
.Dark-theme .elementor-column,
.Dark-theme .elementor-column-wrap,
.Dark-theme .elementor-widget-wrap,
.Dark-theme .elementor-widget-container,
.Dark-theme .elementor-background-overlay,
.Dark-theme .elementor-section-wrap,
.Dark-theme .e-con,
.Dark-theme .e-con-inner,
.Dark-theme .e-child,
.Dark-theme section,
.Dark-theme div.elementor-widget-container,
.Dark-theme .navigation-part,
.Dark-theme .right-part,
.Dark-theme .lang-part,
.Dark-theme .elementor-container,
.Dark-theme .elementor-row,
.Dark-theme .elementor-inner-section,
.Dark-theme .elementor-widget,
.Dark-theme .elementor-post,
.Dark-theme .elementor-posts-container,
.Dark-theme .elementor-posts,
.Dark-theme .elementor-widget-wrap>.elementor-widget,
.Dark-theme .main-navigation,
.Dark-theme nav {
    background-color: #050b18 !important;
}

/*
 * 3b. BACKGROUND SECONDARY (#16253A)
 * Sections that were light-blue (#E7F5FC) in light theme.
 * We use a broader wildcard approach: any section with certain
 * Elementor background settings.
 */
.Dark-theme .elementor-widget-image-box,
.Dark-theme .elementor-widget-icon-box,
.Dark-theme .elementor-post__card,
.Dark-theme .elementor-cta,
.Dark-theme .card,
.Dark-theme .widget,
.Dark-theme .outer-stat,
.Dark-theme .stat-container,
.Dark-theme .stat-item,
.Dark-theme .main-page__child-slider1,
.Dark-theme .main-page__child-slider1>.ch-container {
    background-color: #16253A !important;
    background: #16253A !important;
}

/* Card backgrounds — darker so they stand out against the section */
.Dark-theme .main-page__child-slider1:not(.news) .single-child {
    background-color: #050B18 !important;
    background: #050B18 !important;
}

/* Text colour for stats & cards */
.Dark-theme .outer-stat *,
.Dark-theme .stat-number,
.Dark-theme .stat-description,
.Dark-theme .single-child .name,
.Dark-theme .single-child .desc,
.Dark-theme .single-child .date,
.Dark-theme .single-child .story-link-arrow,
.Dark-theme .single-child .info *,
.Dark-theme .single-child .info_wrapper *,
.Dark-theme .single-child h4 {
    color: #e1e8ef !important;
}

/*
 * 3b-footer. FOOTER BACKGROUND (#16253A)
 */
body.Dark-theme footer,
body.Dark-theme footer *,
body.Dark-theme .site-footer,
body.Dark-theme .site-footer *,
body.Dark-theme #colophon,
body.Dark-theme #colophon *,
body.Dark-theme #colophon .site-info,
body.Dark-theme #colophon .copyright,
body.Dark-theme #colophon .footer-grid,
body.Dark-theme #colophon .ch-container,
body.Dark-theme #colophon .logo-column,
body.Dark-theme #colophon .info-column,
body.Dark-theme #colophon .menu-column,
body.Dark-theme #colophon .contact-column,
body.Dark-theme #colophon .copy_elems,
body.Dark-theme #gamification-footer,
body.Dark-theme #gamification-footer *,
body.Dark-theme .hfe-default-footer,
body.Dark-theme .hfe-default-footer *,
body.Dark-theme .elementor-location-footer,
body.Dark-theme .elementor-location-footer *,
body.Dark-theme .elementor-17789,
body.Dark-theme .elementor-17789 * {
    background-color: #1B2B41 !important;
    background: #1B2B41 !important;
}

/*
 * 3c. TEXT COLOURS
 */

/* Main text: #1E1E1E → #E1E8EF */
.Dark-theme,
.Dark-theme body,
.Dark-theme p,
.Dark-theme span:not(.elementor-button-text):not(.elementor-button-content-wrapper),
.Dark-theme li:not(.elementor-button),
.Dark-theme td,
.Dark-theme th,
.Dark-theme label,
.Dark-theme div,
.Dark-theme h1,
.Dark-theme h2,
.Dark-theme h3,
.Dark-theme h4,
.Dark-theme h5,
.Dark-theme h6,
.Dark-theme a:not(.elementor-button):not(.blue-btn):not(.payment-button),
.Dark-theme .elementor-heading-title,
.Dark-theme .elementor-widget-heading .elementor-heading-title,
.Dark-theme .elementor-text-editor,
.Dark-theme .elementor-text-editor *,
.Dark-theme .elementor-icon-box-title,
.Dark-theme .elementor-icon-box-description,
.Dark-theme .elementor-image-box-title,
.Dark-theme .elementor-image-box-description,
.Dark-theme .elementor-post__title,
.Dark-theme .elementor-post__title a,
.Dark-theme .elementor-post__excerpt,
.Dark-theme .elementor-post__excerpt p,
.Dark-theme .elementor-counter-number-wrapper,
.Dark-theme .elementor-counter-title,
.Dark-theme .elementor-widget-counter *,
.Dark-theme .elementor-widget-text-editor *,
.Dark-theme .elementor-widget-heading *,
.Dark-theme .elementor-accordion .elementor-tab-title,
.Dark-theme .elementor-accordion .elementor-tab-title a,
.Dark-theme .elementor-accordion .elementor-tab-content,
.Dark-theme .elementor-toggle .elementor-tab-title,
.Dark-theme .elementor-toggle .elementor-tab-content,
.Dark-theme .elementor-nav-menu .elementor-item,
.Dark-theme .elementor-nav-menu .elementor-sub-item,
.Dark-theme .main-navigation a,
.Dark-theme .elementor-widget-icon-list .elementor-icon-list-text,
.Dark-theme .elementor-widget-icon-list .elementor-icon-list-icon i,
.Dark-theme .elementor-widget-icon-list .elementor-icon-list-icon svg,
.Dark-theme .elementor-widget-progress .elementor-title,
.Dark-theme .elementor-widget-testimonial *,
.Dark-theme .elementor-widget-tabs .elementor-tab-title,
.Dark-theme .elementor-widget-tabs .elementor-tab-content,
.Dark-theme .entry-content,
.Dark-theme .entry-content *,
.Dark-theme .page-content,
.Dark-theme .page-content * {
    color: #e1e8ef !important;
}

/* Footer text — also light */
.Dark-theme footer *,
.Dark-theme .site-footer *,
.Dark-theme .hfe-default-footer * {
    color: #e1e8ef !important;
}

/*
 * 3d. BUTTONS — keep their ORIGINAL colours (no overrides)
 * Buttons retain their existing background-color, text color, and borders.
 */

/*
 * 3e. BORDERS & DIVIDERS
 */
.Dark-theme hr,
.Dark-theme .elementor-divider-separator,
.Dark-theme .elementor-widget-divider .elementor-divider-separator {
    border-color: #1e314a !important;
    background-color: #1e314a !important;
}

/* 3f. IMAGES — not touched, they keep their original appearance */

/*
 * 3g. PRESERVE specific elements
 * Make sure the toggle handle stays white
 */
.Dark-theme .dark-mode-handle {
    background-color: white !important;
    color: #3b4856 !important;
}

.Dark-theme .dark-mode-icon svg {
    color: #3b4856 !important;
}