/* ==========================================================================
   Dark Mode Styles
   ========================================================================== */

/* Dark Theme Colors */
[data-theme="dark"],
.dark-mode {
  --bg-color: #000000;
  --text-color: #ffffff;
  --secondary-text: #cccccc;
  --border-color: #ffffff;
  --card-bg: #111111;
  --meta-bg: #1a1a1a;
  --menu-bg: #000000;
  --bg-rbg-dark:rgb(23 22 22 / 90%);

  --color-pink: #ff0000;

  /* Glass Tokens - Dark */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-text: #ffffff;
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: rgba(0, 0, 0, 0.3);
  --glass-hover-bg: rgba(255, 255, 255, 0.2);
  --glass-shimmer: rgba(255, 255, 255, 0.2);
  --glass-inner-bg: rgba(0, 0, 0, 0.1);
}

/* Scoped Logo Switching */
.dark-mode .fixed-controls-bar .logo-dark {
  display: none !important;
}

.dark-mode .fixed-controls-bar .logo-light {
  display: block !important;
}


.dark-mode .site-main,

.dark-mode .services,
.dark-mode .other-section,
.dark-mode .category-section,
.dark-mode .homepage-works,
.dark-mode .intro-section,
.dark-mode .typing-hero-section{
  background-color: rgb(23 22 22 / 90%);
  color: #fff;
}
.dark-mode .page-standard,
.dark-mode header.site-header,
html.dark-mode .creative-blog-main,
.dark-mode .contact-hero{
    background-color: var(--bg-rbg-dark) !important;
}
.dark-mode header.work-header.site-header{
        background: none !important;
    backdrop-filter: none !important;
}

.dark-mode .intro-section .intro-content,
.dark-mode .intro-section .intro-content p,
.dark-mode .intro-section .intro-content h1,
.dark-mode .intro-section .intro-content h2,
.dark-mode .intro-section .intro-content h3,
.dark-mode .intro-section .intro-content h4,
.dark-mode .intro-section .intro-content h5,
.dark-mode .intro-section .intro-content h6,
.dark-mode .entry-title,
.dark-mode .entry-content,
.dark-mode .entry-content p,
.dark-mode .entry-content h1,
.dark-mode .entry-content h2,
.dark-mode .entry-content h3,
.dark-mode .entry-content h4,
.dark-mode .entry-content h5,
.dark-mode .entry-content h6,
.dark-mode .work-item-details .work-title,
.dark-mode .minimal-blog-title a,
.dark-mode .minimal-blog-meta {
  color: #fff;
}

.dark-mode .services li span {
  color: #fff;
}

.dark-mode .section-title span {
  border-bottom: 1px solid #fff;
}

.dark-mode .services li::before {
  background: var(--color-pink) !important;
  animation: pulse-dot-dark 2s infinite !important;
}

.dark-mode .services li::after {
  background: #fff !important;
  opacity: 0.5;
}

.dark-mode .intro-section .intro-content h6 {
  color: var(--color-pink);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode .intro-section .intro-content h6::after {
  content: '';
  position: absolute;
  /* top: 0; */
  /* left: 0; */
  width: 100%;
  height: 100%;
  width: 120px;
  height: 1px;
  background-color: transparent;
  margin-top: 40px;

}


@keyframes pulse-dot-dark {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(230, 57, 70, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(230, 57, 70, 0);
  }
}

/* work singel page */
.dark-mode .work-single {
  color: #fff;
}

.dark-mode .project-title {
  color: #fff;
}

.dark-mode.meta-value {
  color: var(--secondary-text);
}


.dark-mode .nav-title {
  color: #fff;
}

.dark-mode .nav-title:hover {
  color: var(--color-pink);
}

.dark-mode .work-content {
  color: #fff;
}

/* sidebar */
.dark-mode .sidebar-label,
.dark-mode .sidebar-share-icons a {
  color: #fff;
}

.dark-mode .sidebar-value {
  color: var(--secondary-text);
}

/* Brand Analysis CTA Block - Dark Mode Fix */
.dark-mode .brand-analysis-cta,
[data-theme="dark"] .brand-analysis-cta {
  background-color: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  /*backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;*/
}

.dark-mode .brand-analysis-cta .cta-title,
[data-theme="dark"] .brand-analysis-cta .cta-title {
  color: #ffffff !important;
}

.dark-mode .brand-analysis-cta .cta-features li,
[data-theme="dark"] .brand-analysis-cta .cta-features li {
  color: rgba(255, 255, 255, 0.9) !important;
}

.dark-mode .brand-analysis-cta .cta-button,
[data-theme="dark"] .brand-analysis-cta .cta-button {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.dark-mode .brand-analysis-cta .cta-button:hover,
[data-theme="dark"] .brand-analysis-cta .cta-button:hover {
  background-color: var(--color-pink) !important;
  color: #ffffff !important;
}

.dark-mode .controls-dark-mode .fixed-controls-bar .lang-selected span,
.dark-mode .controls-dark-mode .fixed-controls-bar .lang-arrow {
  color: #fff;
}

.dark-mode .controls-dark-mode .fixed-controls-bar .hamburger__line-in::before,
.dark-mode .controls-dark-mode .fixed-controls-bar .hamburger__line-in::after {
  background-color: #fff;
}

/* Fix: Force White Header Icons on Single Pages at the Top (Overrides style.css) */
.dark-mode .single #social-toggle svg,
.dark-mode .single #dark-mode-toggle svg,
.dark-mode .single-works #social-toggle svg,
.dark-mode .single-works #dark-mode-toggle svg {
  color: #fff !important;
  stroke: #fff !important;
}

.dark-mode .single #social-toggle svg *,
.dark-mode .single #dark-mode-toggle svg *,
.dark-mode .single-works #social-toggle svg *,
.dark-mode .single-works #dark-mode-toggle svg * {
  stroke: #fff !important;
}
.dark-mode .fixed-controls-bar .lang-list li a{
    color: #fff !important;
    opacity: 1;
}

.dark-mode .social-tray.is-over-dark svg{
        color: #fff !important;
}

.dark-mode .logo-slider-top img, .dark-mode .logo-slider-bottom img{
        filter: grayscale(0);
    opacity: 1;
}

.dark-mode .services h2{
    border-bottom: 1px solid #fff;
}

.dark-mode #typing-hero-text span.typing-active::after {

  background-color: #fff;

}
.dark-mode #social-toggle:not(.is-over-dark) svg, 
.dark-mode #social-toggle:not(.is-over-dark) svg *, 
.dark-mode #dark-mode-toggle:not(.is-over-dark) svg, 
.dark-mode #dark-mode-toggle:not(.is-over-dark) svg *
 .dark-mode.social-tray svg,
 .dark-mode .social-tray svg *{
    color: #fff !important;
    stroke: #fff !important;
}
.dark-mode .over-red-section #social-toggle svg, 
.dark-mode .over-red-section  #social-toggle svg *,
 .dark-mode .over-red-section .social-tray svg,
 .dark-mode .over-red-section .social-tray svg *{
    color: #000 !important;
    stroke: #000!important;
}
.dark-mode p.full-width-bg.has-background,
.dark-mode p.has-background{
    color: #000;
}
html.dark-mode .controls-light-mode .fixed-controls-bar  .lang-list li a{
    color: #000 !important;
}

html.dark-mode  .cta-features li::before{
    color: #ff0000;
}

/*.dark-mode .brand-analysis-cta.has-bg {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}*/
/* Dim the fixed background image to maintain dark aesthetic */

@media (max-width: 768px) {
  .dark-mode .section-title span {
    color: #fff !important;
  }
}