/* =============================================================================
   DARK-MODE.CSS — Dark Theme Override System
   Hello Elementor Child Theme

   All dark mode styles are scoped under [data-theme="dark"] on the
   root html element. This attribute is toggled by assets/js/dark-mode.js.

   Architecture:
     - We override CSS custom properties defined in base.css.
     - A FORCE OVERRIDES section at the bottom uses !important to
       defeat parent theme (Hello Elementor) and Elementor Kit styles
       that would otherwise win specificity and leave body/components
       stuck in their light-mode colors.
   ============================================================================= */


/* =============================================================================
   DARK MODE DESIGN TOKENS
   ============================================================================= */

[data-theme="dark"] {

  /* PAGE BACKGROUND */
  --hec-color-bg:               #16110b;
  --hec-color-bg-elevated:      #1e1610;
  --hec-color-bg-sunken:        #100d08;
  --hec-color-bg-overlay:       rgba(255, 191, 0, 0.04);

  /* SURFACE */
  --hec-color-surface:          #231a10;
  --hec-color-surface-raised:   #2b2016;
  --hec-color-surface-overlay:  rgba(35, 26, 16, 0.95);

  /* TEXT */
  --hec-color-text-primary:     #f1ede4;
  --hec-color-text-secondary:   #d4c8b6;
  --hec-color-text-tertiary:    #a89784;
  --hec-color-text-disabled:    #6a5d4e;
  --hec-color-text-inverse:     #16110b;
  --hec-color-text-on-amber:    #16110b;

  /* BRAND / ACCENT */
  --hec-color-accent:           #ffbf00;
  --hec-color-accent-hover:     #ffd564;
  --hec-color-accent-active:    #e07c1a;
  --hec-color-accent-subtle:    rgba(255, 191, 0, 0.12);
  --hec-color-accent-gold:      #ffbf00;
  --hec-color-accent-gold-warm: #ffc660;

  /* HERO */
  --hec-color-hero-overlay-start: rgba(10, 6, 2, 0.0);
  --hec-color-hero-overlay-end:   rgba(10, 6, 2, 0.92);
  --hec-color-hero-text:          #fff8e9;
  --hec-color-hero-badge-bg:      var(--hec-brand-amber);
  --hec-color-hero-badge-text:    #16110b;

  /* BORDERS */
  --hec-color-border:           rgba(212, 183, 170, 0.12);
  --hec-color-border-strong:    rgba(212, 183, 170, 0.20);
  --hec-color-border-accent:    var(--hec-brand-amber);
  --hec-color-border-subtle:    rgba(212, 183, 170, 0.06);

  /* INTERACTIVE STATES */
  --hec-color-focus-ring:       var(--hec-brand-gold);
  --hec-color-hover-bg:         rgba(255, 191, 0, 0.12);

  /* STATUS */
  --hec-color-success:          #4ade80;
  --hec-color-success-bg:       rgba(74, 222, 128, 0.10);
  --hec-color-error:            #f87171;
  --hec-color-error-bg:         rgba(248, 113, 113, 0.10);
  --hec-color-warning:          var(--hec-brand-gold);
  --hec-color-warning-bg:       rgba(255, 191, 0, 0.10);

  /* CODE */
  --hec-color-code-bg:          #0e0b07;
  --hec-color-code-text:        #f0d9b5;
  --hec-color-code-border:      rgba(212, 183, 170, 0.10);
  --hec-color-inline-code-bg:   rgba(255, 191, 0, 0.15);
  --hec-color-inline-code-text: #ffd564;

  /* BLOCKQUOTE */
  --hec-color-blockquote-border: var(--hec-brand-gold);
  --hec-color-blockquote-bg:     rgba(255, 191, 0, 0.08);
  --hec-color-blockquote-text:   #d4c8b6;

  /* TOC */
  --hec-color-toc-bg:           #1e1610;
  --hec-color-toc-border:       var(--hec-brand-gold);
  --hec-color-toc-link:         #d4c8b6;
  --hec-color-toc-link-hover:   var(--hec-brand-gold);
  --hec-color-toc-link-active:  var(--hec-brand-gold);

  /* PROGRESS BAR */
  --hec-color-progress-bg:      rgba(212, 183, 170, 0.10);
  --hec-color-progress-fill:    linear-gradient(
                                  90deg,
                                  var(--hec-brand-amber) 0%,
                                  var(--hec-brand-gold)  100%
                                );

  /* DARK MODE TOGGLE */
  --hec-color-toggle-bg:        rgba(0, 0, 0, 0.30);
  --hec-color-toggle-bg-hover:  rgba(0, 0, 0, 0.45);
  --hec-color-toggle-text:      #f5ede0;

  /* AUTHOR BOX */
  --hec-color-author-bg:        #1e1610;
  --hec-color-author-border:    rgba(212, 183, 170, 0.10);
  --hec-color-author-accent:    var(--hec-brand-gold);

  /* CARDS */
  --hec-color-card-bg:          #1e1610;
  --hec-color-card-border:      rgba(212, 183, 170, 0.10);
  --hec-color-card-shadow:      rgba(0, 0, 0, 0.30);
  --hec-color-card-shadow-hover:rgba(0, 0, 0, 0.50);

  /* FEEDBACK */
  --hec-color-feedback-bg:      var(--hec-brand-amber);
  --hec-color-feedback-text:    #16110b;
  --hec-color-feedback-panel:   #1e1610;
  --hec-color-feedback-border:  rgba(212, 183, 170, 0.10);
  --hec-color-feedback-input:   #16110b;
  --hec-color-feedback-input-border: rgba(212, 183, 170, 0.20);
  --hec-color-feedback-input-focus:  var(--hec-brand-gold);

  /* SOCIAL SHARE */
  --hec-color-share-bg:         #1e1610;
  --hec-color-share-border:     rgba(212, 183, 170, 0.12);
  --hec-color-share-icon:       #d4c8b6;

  /* META BAR */
  --hec-color-meta-text:        #a89784;
  --hec-color-meta-pill-bg:     rgba(212, 183, 170, 0.10);
  --hec-color-meta-pill-text:   #d4c8b6;
  --hec-color-meta-pill-hover:  rgba(255, 191, 0, 0.15);
  --hec-color-meta-pill-border: rgba(212, 183, 170, 0.14);

  /* SHADOWS */
  --hec-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.20);
  --hec-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20);
  --hec-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.20);
  --hec-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.30), 0 4px 6px -2px rgba(0, 0, 0, 0.20);
  --hec-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);
  --hec-shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.50);
  --hec-shadow-amber:
    0 4px 14px rgba(255, 191, 0, 0.30),
    0 1px 3px  rgba(255, 191, 0, 0.20);
  --hec-shadow-amber-lg:
    0 8px 24px rgba(255, 191, 0, 0.35),
    0 2px 6px  rgba(255, 191, 0, 0.25);
}


/* =============================================================================
   ICON SWAP (light=moon, dark=sun) — no !important needed, no conflict.
   ============================================================================= */

[data-theme="light"] .hec-dark-mode-toggle__sun  { display: none; }
[data-theme="light"] .hec-dark-mode-toggle__moon { display: flex; }
[data-theme="dark"]  .hec-dark-mode-toggle__sun  { display: flex; }
[data-theme="dark"]  .hec-dark-mode-toggle__moon { display: none; }

/* Default before JS runs */
.hec-dark-mode-toggle__sun  { display: none; }
.hec-dark-mode-toggle__moon { display: flex; }


/* =============================================================================
   FORCE OVERRIDES — Dark Mode

   These rules use !important to guarantee dark mode applies on every
   visible surface, regardless of what Hello Elementor (parent theme) or
   Elementor Kit global styles set on body/article/etc.
   Each rule is scoped to [data-theme="dark"] so light mode is never affected.
   ============================================================================= */

/* PAGE BODY — the main surface */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.hec-is-single-post {
  background-color: #16110b !important;
  color:            #f1ede4 !important;
}

/* Article wrapper / content area — let body color show through */
html[data-theme="dark"] .hec-single-post-wrap,
html[data-theme="dark"] .hec-article-grid,
html[data-theme="dark"] .hec-article-main,
html[data-theme="dark"] .hec-content-body {
  background-color: transparent !important;
  color:            #f1ede4 !important;
}

/* CONTENT TEXT — paragraphs, lists, spans */
html[data-theme="dark"] .hec-content__body,
html[data-theme="dark"] .hec-content__body p,
html[data-theme="dark"] .hec-content__body ul,
html[data-theme="dark"] .hec-content__body ol,
html[data-theme="dark"] .hec-content__body li,
html[data-theme="dark"] .hec-content__body dl,
html[data-theme="dark"] .hec-content__body dt,
html[data-theme="dark"] .hec-content__body dd {
  color: #f1ede4 !important;
}

/* HEADINGS — bright, almost-white */
html[data-theme="dark"] .hec-content__body h1,
html[data-theme="dark"] .hec-content__body h2,
html[data-theme="dark"] .hec-content__body h3,
html[data-theme="dark"] .hec-content__body h4,
html[data-theme="dark"] .hec-content__body h5,
html[data-theme="dark"] .hec-content__body h6 {
  color: #fff8e9 !important;
}

/* STRONG / B — pure white for emphasis */
html[data-theme="dark"] .hec-content__body strong,
html[data-theme="dark"] .hec-content__body b {
  color: #ffffff !important;
}

/* List bullets and ordered markers */
html[data-theme="dark"] .hec-content__body li::marker {
  color: var(--hec-brand-gold) !important;
}

/* LINKS inside content */
html[data-theme="dark"] .hec-content__body a {
  color: var(--hec-brand-gold) !important;
}

html[data-theme="dark"] .hec-content__body a:hover {
  color: #ffd564 !important;
}

/* CODE BLOCKS */
html[data-theme="dark"] .hec-content__body pre,
html[data-theme="dark"] .hec-content__body pre code {
  background-color: #0e0b07 !important;
  color:            #f0d9b5 !important;
  border-color:     rgba(212, 183, 170, 0.10) !important;
}

/* Inline code */
html[data-theme="dark"] .hec-content__body :not(pre) > code {
  background-color: rgba(255, 191, 0, 0.15) !important;
  color:            #ffd564 !important;
}

/* BLOCKQUOTE */
html[data-theme="dark"] .hec-content__body blockquote,
html[data-theme="dark"] .hec-content__body .wp-block-quote {
  background-color:  rgba(255, 191, 0, 0.08) !important;
  color:             #d4c8b6 !important;
  border-left-color: var(--hec-brand-gold) !important;
}

/* TABLES */
html[data-theme="dark"] .hec-content__body table {
  background-color: #1e1610 !important;
  color:            #f1ede4 !important;
  border-color:     rgba(212, 183, 170, 0.10) !important;
}

html[data-theme="dark"] .hec-content__body th {
  background-color: rgba(255, 191, 0, 0.15) !important;
  color:            #fff8e9 !important;
  border-color:     rgba(212, 183, 170, 0.12) !important;
}

html[data-theme="dark"] .hec-content__body td {
  border-color: rgba(212, 183, 170, 0.08) !important;
}

html[data-theme="dark"] .hec-content__body tr:nth-child(even) td {
  background-color: rgba(212, 183, 170, 0.03) !important;
}

/* HR / Separator */
html[data-theme="dark"] .hec-content__body hr,
html[data-theme="dark"] .hec-content__body .wp-block-separator {
  border-color: rgba(212, 183, 170, 0.12) !important;
}

/* FAQ ACCORDION (Yoast / Rank Math schema FAQ) */
html[data-theme="dark"] .hec-content__body .schema-faq-section {
  background-color: #1e1610 !important;
  border-color:     rgba(212, 183, 170, 0.12) !important;
}

html[data-theme="dark"] .hec-content__body .schema-faq-question {
  color: #fff8e9 !important;
}

html[data-theme="dark"] .hec-content__body .schema-faq-question:hover {
  color: var(--hec-brand-gold) !important;
}

html[data-theme="dark"] .hec-content__body .schema-faq-answer {
  color: #d4c8b6 !important;
}

html[data-theme="dark"] .hec-content__body .schema-faq-answer strong,
html[data-theme="dark"] .hec-content__body .schema-faq-answer em {
  color: #ffffff !important;
}

/* SOCIAL SHARE BAR */
html[data-theme="dark"] .hec-social-share {
  background-color: #1e1610 !important;
  border-color:     rgba(212, 183, 170, 0.12) !important;
  box-shadow:       0 4px 12px rgba(0, 0, 0, 0.40) !important;
}

html[data-theme="dark"] .hec-social-share__btn {
  color: #d4c8b6 !important;
}

html[data-theme="dark"] .hec-social-share__btn:hover {
  color: #ffffff !important;
  /* Platform color hover stays — set inline per button */
}

html[data-theme="dark"] .hec-social-share__copy-btn {
  color:        #d4c8b6 !important;
  border-color: rgba(212, 183, 170, 0.12) !important;
}

html[data-theme="dark"] .hec-social-share__copy-btn:hover {
  color: var(--hec-brand-gold) !important;
}

/* FEEDBACK WIDGET — panel + form (trigger pill stays amber by design) */
html[data-theme="dark"] .hec-feedback-widget__panel {
  background-color: #1e1610 !important;
  color:            #f1ede4 !important;
  border-color:     rgba(212, 183, 170, 0.12) !important;
}

html[data-theme="dark"] .hec-feedback-widget__panel-title {
  color: #fff8e9 !important;
}

html[data-theme="dark"] .hec-feedback-widget__panel-desc {
  color: #a89784 !important;
}

html[data-theme="dark"] .hec-feedback-widget__panel-header {
  border-bottom-color: rgba(212, 183, 170, 0.12) !important;
}

html[data-theme="dark"] .hec-feedback-widget__label {
  color: #d4c8b6 !important;
}

html[data-theme="dark"] .hec-feedback-widget__input,
html[data-theme="dark"] .hec-feedback-widget__textarea {
  background-color: #16110b !important;
  color:            #f1ede4 !important;
  border-color:     rgba(212, 183, 170, 0.20) !important;
}

html[data-theme="dark"] .hec-feedback-widget__input::placeholder,
html[data-theme="dark"] .hec-feedback-widget__textarea::placeholder {
  color: #6a5d4e !important;
}

html[data-theme="dark"] .hec-feedback-widget__close {
  color: #d4c8b6 !important;
}

html[data-theme="dark"] .hec-feedback-widget__close:hover {
  color: var(--hec-brand-gold) !important;
}

/* DARK MODE TOGGLE — extra safety */
html[data-theme="dark"] .hec-dark-mode-toggle {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.00) 55%),
    linear-gradient(135deg, rgba(22, 17, 11, 0.92) 0%, rgba(10, 6, 2, 0.92) 100%) !important;
  color:        #f5ede0 !important;
  border-color: rgba(255, 191, 0, 0.40) !important;
}

html[data-theme="dark"] .hec-dark-mode-toggle__icon {
  color: var(--hec-brand-gold) !important;
}

html[data-theme="dark"] .hec-dark-mode-toggle__label {
  color: #f5ede0 !important;
}

/* META BAR */
html[data-theme="dark"] .hec-meta-bar,
html[data-theme="dark"] .hec-meta-bar * {
  color: #a89784 !important;
}

html[data-theme="dark"] .hec-meta-bar a,
html[data-theme="dark"] .hec-meta-bar__pill {
  background-color: rgba(212, 183, 170, 0.10) !important;
  color:            #d4c8b6 !important;
  border-color:     rgba(212, 183, 170, 0.14) !important;
}

html[data-theme="dark"] .hec-meta-bar a:hover,
html[data-theme="dark"] .hec-meta-bar__pill:hover {
  background-color: rgba(255, 191, 0, 0.15) !important;
  color:            var(--hec-brand-gold) !important;
}

html[data-theme="dark"] .hec-meta-bar__author-name,
html[data-theme="dark"] .hec-meta-bar__date,
html[data-theme="dark"] .hec-meta-bar__reading-time {
  color: #d4c8b6 !important;
}

/* AUTHOR BOX */
html[data-theme="dark"] .hec-author-box,
html[data-theme="dark"] .hec-author-box__inner {
  background-color: #1e1610 !important;
  border-color:     rgba(212, 183, 170, 0.12) !important;
  color:            #f1ede4 !important;
}

html[data-theme="dark"] .hec-author-box__name {
  color: #fff8e9 !important;
}

html[data-theme="dark"] .hec-author-box__bio {
  color: #d4c8b6 !important;
}

html[data-theme="dark"] .hec-author-box__link {
  color: var(--hec-brand-gold) !important;
}

/* RELATED POSTS */
html[data-theme="dark"] .hec-related-posts {
  color: #f1ede4 !important;
}

html[data-theme="dark"] .hec-related-posts__heading,
html[data-theme="dark"] .hec-related-posts__title {
  color: #fff8e9 !important;
}

html[data-theme="dark"] .hec-related-card {
  background-color: #1e1610 !important;
  border-color:     rgba(212, 183, 170, 0.10) !important;
  color:            #f1ede4 !important;
}

html[data-theme="dark"] .hec-related-card__title {
  color: #fff8e9 !important;
}

html[data-theme="dark"] .hec-related-card__excerpt,
html[data-theme="dark"] .hec-related-card__meta {
  color: #a89784 !important;
}

html[data-theme="dark"] .hec-related-card:hover .hec-related-card__title {
  color: var(--hec-brand-gold) !important;
}

/* NEWSLETTER CTA */
html[data-theme="dark"] .hec-newsletter-cta {
  background: linear-gradient(
    135deg,
    #1e1610 0%,
    #231a10 50%,
    #1a1308 100%
  ) !important;
  border-color: rgba(255, 191, 0, 0.20) !important;
  color:        #f1ede4 !important;
}

html[data-theme="dark"] .hec-newsletter-cta__heading,
html[data-theme="dark"] .hec-newsletter-cta h2,
html[data-theme="dark"] .hec-newsletter-cta h3 {
  color: #fff8e9 !important;
}

html[data-theme="dark"] .hec-newsletter-cta p {
  color: #d4c8b6 !important;
}

/* TOC plugin mount + Cy5 sidebar mount — let your sidebar TOC handle itself,
   but if the legacy #hec-toc-list is still present anywhere, dark it. */
html[data-theme="dark"] #hec-toc-list,
html[data-theme="dark"] .hec-toc-wrapper {
  background-color: #1e1610 !important;
  color:            #d4c8b6 !important;
  border-color:     rgba(212, 183, 170, 0.10) !important;
}

html[data-theme="dark"] #hec-toc-list a,
html[data-theme="dark"] .hec-toc-wrapper a {
  color: #d4c8b6 !important;
}

html[data-theme="dark"] #hec-toc-list a:hover,
html[data-theme="dark"] .hec-toc-wrapper a:hover {
  color: var(--hec-brand-gold) !important;
}

/* HORIZONTAL RULES site-wide */
html[data-theme="dark"] hr,
html[data-theme="dark"] .wp-block-separator {
  border-color: rgba(212, 183, 170, 0.12) !important;
}

/* IMAGES — softened brightness so they don't blast in the dark UI */
html[data-theme="dark"] .hec-content__body img,
html[data-theme="dark"] .hec-related-card__img,
html[data-theme="dark"] .hec-author-box__avatar {
  filter:     brightness(0.90) saturate(0.95);
  transition: filter var(--hec-transition-slow);
}

html[data-theme="dark"] .hec-content__body img:hover,
html[data-theme="dark"] .hec-related-card__img:hover {
  filter: brightness(1.0) saturate(1.0);
}

/* SCROLLBAR */
html[data-theme="dark"] {
  scrollbar-color: #3a2c1e #16110b;
  scrollbar-width: thin;
}

html[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #16110b;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #3a2c1e;
  border-radius:    var(--hec-radius-full);
  border:           2px solid #16110b;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--hec-brand-amber-dark);
}

/* SELECTION */
html[data-theme="dark"] ::selection {
  background-color: rgba(255, 191, 0, 0.35);
  color:            #16110b;
}