/*
##################################################
#   Light theme overrides                         #
#   Dark is the default in style.css (:root)      #
#   Active when <html data-theme="light">         #
##################################################
*/

[data-theme="light"] {
  /* ---------- Tokens ---------- */
  /* White Ã¢â€ â€ soft light gray section tones */
  --section-bg: #ffffff;
  --section-bg-alt: #f5f5f5;
  --body-bg: var(--section-bg);
  --surface-bg: var(--section-bg-alt);
  --text-color: #1a1a1a;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --icon-bg: #e8e8e8;
  --header-bg: var(--section-bg);
  --card-bg: #ffffff;
  --curve-bg: var(--section-bg);

  --accent: #ea0e1f;
  --accent-ink: #ffffff;
  --input-bg: #f5f5f5;
  --input-border: #e5e7eb;
  --nav-glass: rgba(255, 255, 255, 0.14);

  /* ---------- Theme toggle icons ---------- */
  .theme-toggle {
    .theme-icon-dark {
      display: inline-block;
    }

    .theme-icon-light {
      display: none;
    }
  }

  /* ---------- Section label ---------- */
  .section-label {
    color: var(--main-color);

    .section-label-icon img {
      filter: none;
      opacity: 0.85;
    }
  }

  /* ---------- Header ---------- */
  /* Keep light-on-dark nav while the header sits over dark heroes.
     Switch to dark text only after scroll (solid glass bar). */
  .header:not(.scrolled) {
    .navbar {
      .header-action-btn {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.85);

        &:hover {
          background: #fff;
          color: var(--main-color);
          border-color: #fff;
        }
      }
    }
  }

  .header.scrolled {
    .navbar {
      .container {
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
      }

      .nav-link {
        color: #1b1b1b;

        &:hover,
        &.active {
          color: var(--main-color);
        }
      }

      .navbar-toggler,
      .header-action-btn {
        color: #1b1b1b;
        border-color: var(--main-color);
      }

      .header-action-btn:hover {
        background: var(--main-color);
        color: #fff;
      }
    }
  }

  /* ---------- Offcanvas ---------- */
  .offcanvas {
    background-color: #fff;

    .nav-link {
      color: #1a1a1a;
    }

    .list-contact {
      strong {
        color: var(--main-color);
      }

      a {
        color: var(--text-muted);

        &:hover {
          color: var(--main-color);
        }
      }
    }

    .header-social .social-link {
      background: rgba(234, 14, 31, 0.08);
      color: var(--main-color);

      &:hover {
        background: var(--main-color);
        color: #fff;
      }
    }

    .header-action-btn {
      color: #1b1b1b;
      border-color: var(--main-color);

      &:hover {
        background: var(--main-color);
        color: #fff;
      }
    }
  }

  /* ---------- Brands ticker ---------- */
  .brands-ticker,
  .logos-ticker {
    background: var(--section-bg-alt);
    border-color: var(--border-color);

    .brand-card {
      background: #ffffff;
      box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    }

    .brand-card img {
      filter: none;
      opacity: 1;
    }
  }

  /* ---------- Typography ---------- */
  .header-section {
    h2 {
      color: var(--text-color);

      span {
        color: var(--main-color);
      }
    }
  }

  /* ---------- Media cards (services & blog) ---------- */
  .media-card {
    --card-accent: var(--main-color);
    --card-icon-hover: #fff;
    --card-curve-bg: var(--body-bg);

    .card-corner-icon {
      color: #111;
    }

    &:hover .card-corner-btn .card-corner-icon {
      color: #fff;
    }
  }

  /* ---------- Content links ---------- */
  .about-content a:not([class*="btn"]),
  .section-desc a,
  .contact-form-box a,
  .blogs-section a:not(.card-corner-link):not(.btn-more):not(.media-card-title a),
  .services-section a:not(.card-corner-link):not(.btn-more):not(.media-card-title a),
  p a {
    color: #ffffff !important;
  }

  /* ---------- Promo video ---------- */
  .promo-video-section {
    h2 span {
      color: #fff;
      text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    }

    .promo-video-button {
      border-color: #fff;

      &:hover {
        color: #fff;
        background: var(--main-color);
        border-color: var(--main-color);
      }
    }
  }

  /* ---------- Before & After ---------- */
  .before-after-slider {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  }

  /* ---------- Contact ---------- */
  .contact-detail-card {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);

    &:not(:hover):not(.contact-detail-card--active) {
      p,
      p a {
        color: var(--text-muted) !important;
      }

      p a:hover {
        color: var(--main-color) !important;
      }
    }
  }

  .contact-map {
    iframe {
      filter: grayscale(0.15);
    }
  }

  /* ---------- Inner pages ---------- */
  .info-card,
  .brand-tile,
  .sidebar-card {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
  }

  .brand-tile-logo {
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  }

  .brand-tile-logo img,
  .brand-summary-logo img {
    filter: none;
  }

  .brand-summary-logo {
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
  }

  .content-block {

    h3,
    h4 {
      color: #111;
    }
  }

  .entry-quote {
    color: #111;
  }
}