/* ============================================================
   Light / Dark color mode  —  Agnaldo Lisboa portfolio
   ------------------------------------------------------------
   The Mellow theme + its Elementor pages are designed dark, with
   some colors driven by theme CSS variables (--dtr-*) and others
   hard-coded per Elementor element (#0a0a0a / #111111 surfaces,
   #ffffff text). Dark stays the default; html[data-theme="light"]
   flips BOTH layers: the theme variables AND the Elementor
   surfaces/text, while leaving accent buttons and images intact.
   ============================================================ */

html[data-theme="light"] {
  /* --- Mellow theme variables --- */
  --dtr-base-color-dark: #ffffff;       /* main background        */
  --dtr-base-color-semidark: #ffffff;   /* secondary bg -> white (no gray) */
  --dtr-base-color-light: #0a0a0a;      /* accent base (buttons)  */

  --dtr-text-color-dark: #ffffff;       /* label on dark buttons  */
  --dtr-text-color-light: #14151a;      /* headings / links       */
  --dtr-text-color-gray: #52525b;       /* body copy on white     */

  --dtr-border-color-main: rgba(0, 0, 0, .12);

  /* --- Light palette used by the Elementor overrides below --- */
  --al-surface: #ffffff;
  --al-surface-soft: #f4f4f5;
  --al-ink: #14151a;
}

/* ---------- 1. Flip the dark Elementor surfaces to light ---------- */
html[data-theme="light"] body,
html[data-theme="light"] .elementor-section,
html[data-theme="light"] .elementor-column-wrap,
html[data-theme="light"] .e-con,
html[data-theme="light"] .e-con-inner {
  background-color: var(--al-surface) !important;
}

/* Keep every section/container white in light mode — no gray surfaces.
   (Cards that were dark stay white; we can add subtle borders later if
   they need more definition.) */
html[data-theme="light"] .elementor-section .elementor-section,
html[data-theme="light"] .elementor-column-wrap,
html[data-theme="light"] .elementor-widget-wrap,
html[data-theme="light"] .e-con .e-con,
html[data-theme="light"] .e-con-inner {
  background-color: var(--al-surface) !important;
}

/* ---------- 2. Force hard-coded light text to ink (skip buttons) ---------- */
html[data-theme="light"] .elementor-heading-title,
html[data-theme="light"] .elementor-widget-heading .elementor-heading-title,
html[data-theme="light"] .elementor-widget-text-editor,
html[data-theme="light"] .elementor-widget-text-editor p,
html[data-theme="light"] .elementor-widget-text-editor li,
html[data-theme="light"] .elementor-widget-text-editor a,
html[data-theme="light"] .elementor-icon-list-text,
html[data-theme="light"] .elementor-icon-box-title,
html[data-theme="light"] .elementor-icon-box-description,
html[data-theme="light"] .elementor-counter-number,
html[data-theme="light"] .elementor-counter-number-prefix,
html[data-theme="light"] .elementor-counter-number-suffix,
html[data-theme="light"] .elementor-counter-title {
  color: var(--al-ink) !important;
}

/* Portfolio (Works) cards: titles & categories sit on top of the
   project images, so keep them white in light mode too. A soft
   shadow keeps them readable over lighter thumbnails. */
html[data-theme="light"] .dtr-portfolio-item__heading,
html[data-theme="light"] .dtr-portfolio-item__heading a,
html[data-theme="light"] .dtr-portfolio-item__category,
html[data-theme="light"] .dtr-portfolio-item__categories {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

/* Icons (SVG/font) that were white become ink, except inside buttons */
html[data-theme="light"] .elementor-widget-icon:not(.elementor-widget-button) .elementor-icon,
html[data-theme="light"] .elementor-icon-list-icon i,
html[data-theme="light"] .elementor-icon-list-icon svg {
  color: var(--al-ink) !important;
  fill: var(--al-ink) !important;
}

/* Counter numbers ("The Numbers") were white -> ink so they show on white */
html[data-theme="light"] .elementor-counter-number,
html[data-theme="light"] .elementor-counter-number-prefix,
html[data-theme="light"] .elementor-counter-number-suffix {
  color: var(--al-ink) !important;
}

/* Portfolio ("Works") cards: titles/categories sit ON TOP of the project
   images, so they must stay WHITE in light mode (not flipped to ink). */
html[data-theme="light"] .dtr-portfolio-item__heading,
html[data-theme="light"] .dtr-portfolio-item__heading a,
html[data-theme="light"] .dtr-portfolio-item__category,
html[data-theme="light"] .dtr-portfolio-item__link,
html[data-theme="light"] .dtr-portfolio-item__content {
  color: #ffffff !important;
}

/* ---------- 3. Borders ---------- */
html[data-theme="light"] .elementor-section,
html[data-theme="light"] .e-con,
html[data-theme="light"] .dtr-btn--outline {
  border-color: rgba(0, 0, 0, .12) !important;
}

/* ---------- 4. Smooth cross-fade on toggle (no flash on load) ---------- */
body,
body :where(header, footer, section, a, button, input, textarea,
  h1, h2, h3, h4, h5, h6, p, span, li,
  .elementor-section, .e-con, .elementor-element, .elementor-widget-container) {
  transition: background-color .3s ease, color .3s ease,
    border-color .3s ease, fill .3s ease;
}

/* ============================================================
   Floating toggle button
   ============================================================ */
#al-theme-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99990;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: var(--dtr-radius-round, 9999px);
  border: 1px solid var(--dtr-border-color-main);
  background: var(--dtr-base-color-semidark);
  color: var(--dtr-text-color-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  transition: transform .2s ease, background-color .3s ease, color .3s ease;
}

#al-theme-toggle:hover { transform: translateY(-2px) scale(1.06); }

#al-theme-toggle:focus-visible {
  outline: 2px solid var(--dtr-text-color-light);
  outline-offset: 3px;
}

#al-theme-toggle svg { width: 22px; height: 22px; display: block; }

/* Dark mode shows the sun (click → light). Light mode shows the moon. */
#al-theme-toggle .al-icon-moon { display: none; }
html[data-theme="light"] #al-theme-toggle .al-icon-sun { display: none; }
html[data-theme="light"] #al-theme-toggle .al-icon-moon { display: block; }

@media (max-width: 600px) {
  #al-theme-toggle { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}