/*
 * dark-mode.css
 * Place at: wp-content/themes/hello-theme-child-master/dark-mode/dark-mode.css
 *
 * All styles scoped to .page-id-16016 so they only affect that one page.
 */

/* ════════════════════════════════════════════════════════════
   1. THEME TOKENS
   ════════════════════════════════════════════════════════════ */

/* ── DARK MODE ── */
.page-id-16016[data-theme="dark"],
.page-id-16016 [data-theme="dark"] {
    --dm-bg:          #005daa;
    --dm-surface:     #006298;
    --dm-border:      #f18a00;
    --dm-text:        #ffffff;
    --dm-text-muted:  #e0aa62;
    --dm-accent:      #f18a00;
    --dm-shadow:      rgba(0,0,0,.45);

    --e-global-color-primary:   #f18a00;
    --e-global-color-secondary: #005daa;
    --e-global-color-text:      #ffffff;
    --e-global-color-accent:    #e0aa62;

    --dm-track-bg:     #f18a00;
    --dm-track-active: #e0aa62;
    --dm-thumb:        #ffffff;
    --dm-icon-sun:     #e0aa62;
    --dm-icon-moon:    #ffffff;
}

/* ── LIGHT MODE ── */
.page-id-16016,
.page-id-16016[data-theme="light"],
.page-id-16016 [data-theme="light"] {
    --dm-bg:          #ffffff;
    --dm-surface:     #f0f1fa;
    --dm-border:      #e0aa62;
    --dm-text:        #005daa;
    --dm-text-muted:  #f18a00;
    --dm-accent:      #f18a00;
    --dm-shadow:      rgba(55,56,192,.12);

    --e-global-color-primary:   #f18a00;
    --e-global-color-secondary: #005daa;
    --e-global-color-text:      #005daa;
    --e-global-color-accent:    #e0aa62;

    --dm-track-bg:     #e0aa62;
    --dm-track-active: #f18a00;
    --dm-thumb:        #ffffff;
    --dm-icon-sun:     #f18a00;
    --dm-icon-moon:    #e0aa62;
}

/* ════════════════════════════════════════════════════════════
   2. SMOOTH TRANSITIONS
   ════════════════════════════════════════════════════════════ */

.page-id-16016,
.page-id-16016 .elementor-section,
.page-id-16016 .elementor-column,
.page-id-16016 .elementor-widget-wrap,
.page-id-16016 .elementor-widget-container,
.page-id-16016 .e-con,
.page-id-16016 .e-con-inner {
    transition: background-color .35s ease, color .35s ease,
                border-color .35s ease, box-shadow .35s ease;
}

/* ════════════════════════════════════════════════════════════
   3. LIGHT MODE STYLES  (scoped to page-id-16016)
   ════════════════════════════════════════════════════════════ */

html[data-theme="light"].page-id-16016 body,
html[data-theme="light"] .page-id-16016 {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html[data-theme="light"] .page-id-16016 h1,

html[data-theme="light"] .page-id-16016 h3,
html[data-theme="light"] .page-id-16016 h4,
html[data-theme="light"] .page-id-16016 h5,
html[data-theme="light"] .page-id-16016 h6,
html[data-theme="light"] .page-id-16016 .elementor-heading-title {
    color: var(--dm-text) !important;
}

html[data-theme="light"] .page-id-16016 p,
html[data-theme="light"] .page-id-16016 .elementor-widget-text-editor,
html[data-theme="light"] .page-id-16016 .elementor-text-editor {
    color: var(--dm-text) !important;
}

html[data-theme="light"] .page-id-16016 a {
    color: var(--dm-accent) !important;
}

html[data-theme="light"] .page-id-16016 .elementor-section,
html[data-theme="light"] .page-id-16016 .e-con {
    background-color: var(--dm-bg) !important;
}

html[data-theme="light"] .page-id-16016 .site-header,
html[data-theme="light"] .page-id-16016 #site-header,
html[data-theme="light"] .page-id-16016 .elementor-location-header {
    background-color: var(--dm-surface) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html[data-theme="light"] .page-id-16016 .site-footer,
html[data-theme="light"] .page-id-16016 #site-footer,
html[data-theme="light"] .page-id-16016 .elementor-location-footer {
    background-color: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
}

html[data-theme="light"] .page-id-16016 .elementor-button {
    background-color: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: #ffffff !important;
}

html[data-theme="light"] .page-id-16016 .elementor-nav-menu a.elementor-item,
html[data-theme="light"] .page-id-16016 .elementor-nav-menu a.elementor-sub-item {
    color: var(--dm-text) !important;
}

html[data-theme="light"] .page-id-16016 .elementor-nav-menu a.elementor-item:hover,
html[data-theme="light"] .page-id-16016 .elementor-nav-menu a.elementor-sub-item:hover {
    color: var(--dm-accent) !important;
}

html[data-theme="light"] .page-id-16016 .elementor-divider-separator {
    border-color: var(--dm-border) !important;
}

html[data-theme="light"] .page-id-16016 .elementor-form .elementor-field-group input,
html[data-theme="light"] .page-id-16016 .elementor-form .elementor-field-group textarea,
html[data-theme="light"] .page-id-16016 .elementor-form .elementor-field-group select {
    background-color: #ffffff !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* ════════════════════════════════════════════════════════════
   4. DARK MODE STYLES  (scoped to page-id-16016)
   ════════════════════════════════════════════════════════════ */

html[data-theme="dark"].page-id-16016 body,
html[data-theme="dark"] .page-id-16016 {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] .page-id-16016 h1,

html[data-theme="dark"] .page-id-16016 h3,
html[data-theme="dark"] .page-id-16016 h4,
html[data-theme="dark"] .page-id-16016 h5,
html[data-theme="dark"] .page-id-16016 h6,
html[data-theme="dark"] .page-id-16016 .elementor-heading-title {
    color: var(--dm-text) !important;
}

html[data-theme="dark"] .page-id-16016 p,
html[data-theme="dark"] .page-id-16016 .elementor-widget-text-editor,
html[data-theme="dark"] .page-id-16016 .elementor-text-editor {
    color: var(--dm-text) !important;
}

html[data-theme="dark"] .page-id-16016 a {
    color: var(--dm-accent) !important;
}

html[data-theme="dark"] .page-id-16016 .elementor-section,
html[data-theme="dark"] .page-id-16016 .e-con {
    background-color: var(--dm-bg) !important;
}

/* Sections with inline white background — force dark */
html[data-theme="dark"] .page-id-16016 .elementor-section[style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] .page-id-16016 .elementor-section[style*="background-color: #ffffff"],
html[data-theme="dark"] .page-id-16016 .elementor-section[style*="background-color: #fff"],
html[data-theme="dark"] .page-id-16016 .e-con[style*="background-color: rgb(255, 255, 255)"],
html[data-theme="dark"] .page-id-16016 .e-con[style*="background-color: #ffffff"] {
    background-color: var(--dm-surface) !important;
}

html[data-theme="dark"] .page-id-16016 .site-header,
html[data-theme="dark"] .page-id-16016 #site-header,
html[data-theme="dark"] .page-id-16016 .elementor-location-header {
    background-color: var(--dm-surface) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

html[data-theme="dark"] .page-id-16016 .site-footer,
html[data-theme="dark"] .page-id-16016 #site-footer,
html[data-theme="dark"] .page-id-16016 .elementor-location-footer {
    background-color: var(--dm-surface) !important;
    border-top: 1px solid var(--dm-border) !important;
}

html[data-theme="dark"] .page-id-16016 .elementor-button {
    background-color: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .page-id-16016 .elementor-nav-menu a.elementor-item,
html[data-theme="dark"] .page-id-16016 .elementor-nav-menu a.elementor-sub-item {
    color: var(--dm-text) !important;
}

html[data-theme="dark"] .page-id-16016 .elementor-nav-menu a.elementor-item:hover,
html[data-theme="dark"] .page-id-16016 .elementor-nav-menu a.elementor-sub-item:hover {
    color: var(--dm-accent) !important;
}

html[data-theme="dark"] .page-id-16016 .elementor-nav-menu--dropdown,
html[data-theme="dark"] .page-id-16016 .elementor-nav-menu--dropdown .elementor-item {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .page-id-16016 .elementor-divider-separator {
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .page-id-16016 .elementor-form .elementor-field-group input,
html[data-theme="dark"] .page-id-16016 .elementor-form .elementor-field-group textarea,
html[data-theme="dark"] .page-id-16016 .elementor-form .elementor-field-group select {
    background-color: var(--dm-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] .page-id-16016 .elementor-form .elementor-field-group input::placeholder,
html[data-theme="dark"] .page-id-16016 .elementor-form .elementor-field-group textarea::placeholder {
    color: var(--dm-text-muted) !important;
}

/* ════════════════════════════════════════════════════════════
   5. TOGGLE WIDGET STYLES
   (not page-scoped — the toggle can live anywhere in the header)
   ════════════════════════════════════════════════════════════ */

.dm-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

.dm-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.dm-label {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    user-select: none;
}

.dm-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    transition: color .35s;
}
.dm-icon-sun  { color: var(--dm-icon-sun);  }
.dm-icon-moon { color: var(--dm-icon-moon); }

.dm-track {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 25px;
    border-radius: 99px;
    background: var(--dm-track-bg);
    transition: background .35s;
    flex-shrink: 0;
}

.dm-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--dm-thumb);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .35s;
}

html[data-theme="dark"] .dm-track {
    background: var(--dm-track-active) !important;
}
html[data-theme="dark"] .dm-thumb {
    transform: translateX(21px) !important;
}

.dm-checkbox:focus-visible + .dm-label .dm-track {
    outline: 2px solid var(--dm-accent);
    outline-offset: 3px;
}

.dm-text {
    font-size: .75rem;
    letter-spacing: .06em;
    color: var(--dm-text-muted);
    min-width: 3rem;
    transition: color .35s;
}

/* ════════════════════════════════════════════════════════════
   6. CUSTOM OVERRIDES  (page-id-16016 only)
   html[data-theme="dark"] .page-id-16016 .elementor-element-abc1234 { ... }
   ════════════════════════════════════════════════════════════ */