/* =============================================================
 * theme.light.css — Light-mode palette overrides ONLY.
 *
 * Contract: `specs/002-dark-light-mode/contracts/tokens.css.md`
 * Load order: LAST (after tokens.css and custom.*.css) so palette
 * overrides win without `!important` on tokens, and scoped
 * element overrides win against the Ygency template's hardcoded
 * colors in `style.css`.
 *
 * T004 AUDIT (2026-04-23): Non-palette declarations removed/tokenised
 *   - L876/946/1049: literal border-radius → `var(--radius-card-lg)`,
 *     `var(--radius-card)` (template-legacy card radii).
 *   - L178/1042: font-weight bumps → `var(--fw-heading)` (Arabic
 *     weight correction is now handled by `[lang="ar"]` in tokens.css).
 *   - L1283-1293: global transition-duration block removed — the
 *     animated theme crossfade is handled by the
 *     `[data-theme-transitioning]` rule in tokens.css.
 *
 * Violations not yet migratable:
 *   - Scoped color overrides like `[data-theme="light"] .footer-widget a`
 *     MUST stay here because the base Ygency `style.css` uses literal
 *     hex colors we do not own. Until base CSS is tokenised, these
 *     scoped palette overrides are legitimate per contract rule #3.
 * ============================================================= */

/* ============================================
   LIGHT MODE — Legacy Ygency variable overrides
   Kept for rules in style.css that still read these.
   Palette values mirror tokens.css :root[data-theme="light"].
   ============================================ */
:root[data-theme="light"] {
  --ygency-primary-color: #d600b8;
  --ygency-secondary-color: #1a1a2e;
  --ygency-tertiary-color: #f0f0f5;
  --ygency-body-color: rgba(30, 30, 50, 0.75);
  --ygency-headline-color: #0d0d1a;
  --ygency-border-color: rgba(0, 0, 0, 0.1);
  --ygency-dark-color: #ffffff;
  --ygency-primary-rgb: 214, 0, 184;
  --ygency-secondary-rgb: 26, 26, 46;
  --ygency-tertiary-rgb: 240, 240, 245;
}

/* ============================================
   BODY — Override hardcoded `background: black`
   in style.css:57
   ============================================ */
[data-theme="light"] body {
  background: #ffffff !important;
  color: var(--ygency-body-color) !important;
  --ygency-headline-color: #0d0d1a;
  --ygency-body-color: rgba(30, 30, 50, 0.75);
  --ygency-primary-color: #d600b8;
  --ygency-secondary-color: #1a1a2e;
  --ygency-tertiary-color: #f0f0f5;
  --ygency-border-color: rgba(0, 0, 0, 0.1);
  --ygency-dark-color: #ffffff;
  --ygency-primary-rgb: 214, 0, 184;
  --ygency-secondary-rgb: 26, 26, 46;
  --ygency-tertiary-rgb: 240, 240, 245;
}

/* ============================================
   GLOBAL TEXT & HEADINGS
   ============================================ */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #0d0d1a !important;
}

[data-theme="light"] a {
  color: var(--ygency-body-color);
}

[data-theme="light"] a:hover {
  color: var(--ygency-secondary-color);
}

/* ============================================
   HEADER — Top bar, navigation text
   ============================================ */
/* Pre-scroll only. The :not() is documentation rather than behaviour — the
   scrolled white glass is owned by custom.nav.css
   (`[data-theme="light"] .main-header.fixed-header .header-upper`, specificity
   0-4-0) and already outranked this rule at 0-2-0 even when it was unscoped.
   Spelling the condition out here stops the next reader concluding that the
   header is transparent at every scroll position. Do not add a competing
   .fixed-header background here; custom.nav.css carries the matching
   border-color and box-shadow and should stay the single owner. */
[data-theme="light"] .main-header:not(.fixed-header) .header-upper {
  background: transparent !important;
}

/* ============================================
   HEADER OVER A DARK BANNER — light mode
   .page-banner-area keeps its dark photo in light mode on purpose (see the
   "intentional dark-bg exception" note further down, and the rules that keep
   its h1 + breadcrumbs white). The header is .menu-absolute, so it floats on
   top of that photo — but it was still getting the light-mode treatment:
   brightness(0.2) on the wordmark, #1a1a2e nav links and hamburger bars,
   invert(1) on the quick-menu glyph. Dark ink on a dark photo, so the entire
   nav row went invisible on all ~22 banner pages (every page except home).

   Only applies before scroll. Past scrollY > 10 utilits.js adds .fixed-header,
   the white glass above kicks in, and the dark defaults are correct again.

   :has() is what lets CSS ask "is there a dark banner on this page" without a
   body class. Where it is unsupported the selector is simply dropped, which
   lands back on today's behaviour rather than anything worse.
   ============================================ */
:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .logo img,
:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .logo-outer img,
:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .mobile-logo img,
:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .menu-sidebar button img {
  filter: none !important;
}

:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .main-menu .navigation > li > a {
  color: #fff !important;
}

:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .main-menu .navigation > li > a:hover {
  color: var(--c-accent) !important;
}

:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .navbar-toggle .icon-bar {
  background: #fff !important;
}

:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .theme-toggle-glass,
:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .call-icon-btn,
:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .lang-switcher-glass {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .lang-pill {
  color: #fff !important;
}

/* The sun/moon glyph sits in a child span that ThemeToggle.vue colours
   independently ([data-theme="light"] .toggle-icon), so colouring the button
   alone left an invisible icon inside a visible circle. */
:root[data-theme="light"] body:has(.page-banner-area) .main-header:not(.fixed-header) .toggle-icon {
  color: #fff !important;
}

/* Scrolled state (both headers): dark text on white glass */
[data-theme="light"] .main-header.fixed-header .main-menu .navigation > li > a {
  color: #1a1a2e !important;
}

[data-theme="light"] .main-header.fixed-header .main-menu .navigation > li > a:hover {
  color: #d600b8 !important;
}

/* Phone icon button: dark on light at all scroll positions. Safe because in
   light mode the hero/banner bg is also light (see hero + page-banner
   overrides above), so a white glyph would be invisible even before scroll.
   Mirrors the .theme-toggle-glass light treatment in ThemeToggle.vue. */
[data-theme="light"] .main-header.header-two .call-icon-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

[data-theme="light"] .main-header.header-two .call-icon-btn:hover {
  background: rgba(214, 0, 184, 0.12);
  border-color: rgba(214, 0, 184, 0.35);
  color: #d600b8;
}

/* Hamburger icon bars */
[data-theme="light"] .navbar-toggle .icon-bar {
  background: #1a1a2e !important;
}

/* Menu sidebar toggler icon — needs !important to beat the
   RTL rule in custom.rtl.css:165 which uses !important. */
[data-theme="light"] .menu-sidebar button img,
[data-theme="light"] .menu-sidebar button svg,
html[dir="rtl"][data-theme="light"] .menu-sidebar button img,
html[dir="rtl"][data-theme="light"] .menu-sidebar button svg {
  filter: invert(1) brightness(0.2) !important;
}

/* When the right-hand .hidden-bar sidebar is open, hide the
   header's ThemeToggle so it doesn't visually duplicate with
   the close-btn / toggle icon in the open sidebar panel. */
body.side-content-visible .menu-btns .theme-toggle-glass {
  visibility: hidden;
  pointer-events: none;
}

/* ============================================
   HERO SECTION — Background & gradients
   ============================================ */
[data-theme="light"] .hero-area,
[data-theme="light"] .hero-section,
[data-theme="light"] .hero-area-six {
  background-color: #f0f0f5 !important;
}

[data-theme="light"] .hero-area .hero-content h1,
[data-theme="light"] .hero-section h1,
[data-theme="light"] .hero-area-six .hero-content h1 {
  color: #0d0d1a !important;
}

/* Hero h1 span + i — pink outlined stroke (not filled).
   The same rule is enforced for both modes in custom.ui.css;
   this light-mode override just reinforces the stroke color. */
[data-theme="light"] .hero-area-six .hero-content h1 span{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px !important;
  -webkit-text-stroke-color: #d600b8 !important;
}

[data-theme="light"] .hero-area .hero-content p,
[data-theme="light"] .hero-area-six .hero-content p {
  color: rgba(30, 30, 50, 0.75) !important;
}

/* Hero badge (Asset-1white.svg) — dark pill background so the white SVG
   elements stay visible on the light hero background. */
[data-theme="light"] .hero-right-image {
  background: rgba(8, 8, 20, 0.82);
  border-radius: 24px;
  padding:5px 5px;
  display: inline-block;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ── Hero background wave — ONE unified rule. ──────────────────────────
 *
 * .hero-bg contains an <img> (NuxtImg), NOT a CSS background.
 * Rule: always target .hero-bg / .hero-bg img — never use
 * background-image on .hero-bg container (it has no effect).
 *
 *   1. Override style.css `opacity: 0.1` so we control opacity here.
 *   2. Hide the dark-mode PNG (white waves — invisible on white bg).
 *   3. Layer the light-mode wave PNG via ::after at its designed opacity.
 */
[data-theme="light"] .hero-bg {
  opacity: 1 !important;
}

[data-theme="light"] .hero-bg img {
  opacity: 0 !important;
}

[data-theme="light"] .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/light-mode/hero/hero-bg.png') center top / contain no-repeat;
  pointer-events: none;
}

/* Aurora blobs — stay faint on light bg so they read as soft
   accent, not a dominant smear. */
[data-theme="light"] .hero-area-six::before,
[data-theme="light"] .hero-area-six::after {
  opacity: 0.25 !important;
}

/* ============================================
   HEADLINE TEXT — Scrolling marquee behind content.
   Must stay visible (sit behind the image/content)
   without dominating. Arabic fonts render thinner,
   so keep opacity healthy enough that both LTR and
   RTL read consistently.
   ============================================ */
[data-theme="light"] .headline-text {
  color: rgba(0, 0, 0, 0.09) !important;
}

[data-theme="light"] .headline-text span,
[data-theme="light"] .headline-text marquee {
  color: rgba(0, 0, 0, 0.09) !important;
}

/* The nested .headline-text > span > span uses a stroke in base
   style.css (0.2 opacity + white stroke). In light mode convert
   the stroke to dark at a slightly higher opacity for parity. */
[data-theme="light"] .headline-text > span span {
  color: transparent !important;
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.18) !important;
  opacity: 1 !important;
}

/* Arabic fonts (Cairo / Tajawal) render thinner than Inter at
   the same size; give them a small font-weight bump in light
   mode so the decorative text reads with LTR consistency. */
html[dir="rtl"][data-theme="light"] .headline-text,
html[dir="rtl"][data-theme="light"] .headline-text span {
  /* Arabic weight bump handled by [lang="ar"] --fw-display in tokens.css;
     only the palette override remains here. */
  color: rgba(0, 0, 0, 0.11) !important;
}

/* ============================================
   PAGE BANNER — Background
   ============================================ */
[data-theme="light"] .page-banner-area {
  background-color: #f0f0f5 !important;
}

/* about.vue uses .page-banner (no -area) with an inline background-image.
   !important overrides inline styles in the cascade. */
[data-theme="light"] .page-banner {
  background-image: url('/assets/images/light-mode/hero/hero-two-bg.png') !important;
}

/* Hero title on about page — was white on dark grid, now dark on light grid */
[data-theme="light"] .page-banner .hero-title {
  color: #0d0d1a !important;
}


/* ============================================
   SECTIONS — Various section backgrounds
   ============================================ */
[data-theme="light"] section,
[data-theme="light"] .section-padding {
  background-color: inherit;
}

/* Dark sections that use var(--ygency-dark-color) as bg */
[data-theme="light"] .bgc-black,
[data-theme="light"] .bg-dark,
[data-theme="light"] .bgc-dark {
  background-color: #f5f5fa !important;
}

/* Tertiary background sections */
[data-theme="light"] .bgc-tertiary {
  background-color: #f0f0f5 !important;
}

/* About area images — reduce shadow for light bg */
[data-theme="light"] .about-area img {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   FOOTER — Override hardcoded dark colors
   style.css:1054 → #0a1019
   style.css:1368 → #0f1425
   style.css:1392 → #1e1e22
   ============================================ */
[data-theme="light"] footer,
[data-theme="light"] .main-footer {
  background-color: #f5f5fa !important;
  background-image: none !important;
}

[data-theme="light"] .main-footer::before {
  background: linear-gradient(90deg, transparent, rgba(214, 0, 184, 0.3), transparent) !important;
}

[data-theme="light"] .footer-top {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .footer-title {
  color: #0d0d1a !important;
}

[data-theme="light"] .footer-title::after {
  background: #d600b8;
}

[data-theme="light"] .footer-bottom {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .copyright-text p,
[data-theme="light"] .copyright-text p a {
  color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .footer-bottom-nav a {
  color: rgba(0, 0, 0, 0.4) !important;
}

[data-theme="light"] .footer-bottom-nav a:hover {
  color: #d600b8 !important;
}

[data-theme="light"] .footer-widget a,
[data-theme="light"] .list-style-two li a {
  color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .footer-widget a:hover,
[data-theme="light"] .list-style-two li a:hover {
  color: #d600b8 !important;
}

[data-theme="light"] .lets-work span {
  color: #0d0d1a !important;
  text-shadow: none;
}

[data-theme="light"] .footer-contact-card {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1a1a2e !important;
}

[data-theme="light"] .footer-contact-card:hover {
  background: rgba(214, 0, 184, 0.07) !important;
  border-color: rgba(214, 0, 184, 0.3) !important;
  color: #d600b8 !important;
  box-shadow: 0 8px 25px rgba(214, 0, 184, 0.1) !important;
}

[data-theme="light"] .footer-card-icon {
  background: rgba(214, 0, 184, 0.08) !important;
  border-color: rgba(214, 0, 184, 0.2) !important;
  color: #d600b8 !important;
}

[data-theme="light"] .footer-contact-card:hover .footer-card-icon {
  background: rgba(214, 0, 184, 0.15) !important;
  border-color: rgba(214, 0, 184, 0.4) !important;
}

/* Footer logo darkening lives in the LIGHT-MODE IMAGE SWAPS block below,
   together with the header and sidebar logo rules, so all three stay in
   sync. A duplicate brightness(0.8) rule used to sit here and was silently
   overridden by that later block — on a pure-white wordmark 0.8 renders
   light grey on the #f5f5fa footer, which is why it must not come back. */

/* ============================================
   SIDEBAR — Override hardcoded dark bg
   ============================================ */
[data-theme="light"] .hidden-bar {
  background: linear-gradient(180deg, #ffffff 0%, #f8f8fc 40%, #f5f5fa 100%) !important;
  border-color: rgba(214, 0, 184, 0.12) !important;
  box-shadow: -10px 0 60px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .hidden-bar::before {
  background: linear-gradient(180deg, transparent, rgba(214, 0, 184, 0.2), transparent) !important;
}

[data-theme="light"] .sidebar-header h4 {
  color: #0d0d1a !important;
}

[data-theme="light"] .sidebar-subtitle {
  color: rgba(0, 0, 0, 0.45) !important;
}

[data-theme="light"] .sidebar-divider {
  background: linear-gradient(90deg, #d600b8, rgba(214, 0, 184, 0.2)) !important;
}

[data-theme="light"] .sidebar-close-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1a1a2e !important;
}

[data-theme="light"] .sidebar-close-btn:hover {
  background: rgba(214, 0, 184, 0.15) !important;
  border-color: rgba(214, 0, 184, 0.4) !important;
  color: #d600b8 !important;
}

[data-theme="light"] .sidebar-social-wrap {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Sidebar logo darkening: see the LIGHT-MODE IMAGE SWAPS block below.
   (A duplicate brightness(0.8) rule here was dead code — same reason as
   the footer logo above.) */

/* ============================================
   TESTIMONIALS
   ============================================ */
[data-theme="light"] .testimonial-item,
[data-theme="light"] .testimonial-three-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .testimonial-item:hover,
[data-theme="light"] .testimonial-three-item:hover {
  border-color: rgba(214, 0, 184, 0.2) !important;
}

[data-theme="light"] .testimonial-item h4,
[data-theme="light"] .testimonial-three-item h4 {
  color: #0d0d1a !important;
}

[data-theme="light"] .testimonial-item p,
[data-theme="light"] .testimonial-three-item p {
  color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .testimonial-item .testi-des,
[data-theme="light"] .testimonial-three-item .testi-des {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* ============================================
   PROJECT / PORTFOLIO ITEMS
   ============================================ */
[data-theme="light"] .project-item .content h4,
[data-theme="light"] .project-item .content h3 {
  color: #0d0d1a !important;
}

[data-theme="light"] .project-item .content p {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* ============================================
   ABOUT SECTION
   ============================================ */
[data-theme="light"] .about-content h2,
[data-theme="light"] .about-content h3 {
  color: #0d0d1a !important;
}

[data-theme="light"] .about-content p {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* ============================================
   PRELOADER — Adapts via var() already,
   but ensure preloader spinner is visible
   ============================================ */
/* Preloader bg uses var(--ygency-dark-color) → auto white */

/* ============================================
   SLICK/SWIPER DOTS
   ============================================ */
[data-theme="light"] .slick-dots li button,
[data-theme="light"] .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .slick-dots li.slick-active button,
[data-theme="light"] .swiper-pagination-bullet-active {
  background: #d600b8 !important;
}

/* ============================================
   MISCELLANEOUS
   ============================================ */

/* Star rating / decorative elements with white hardcoded */
[data-theme="light"] .star-rating i {
  color: #d600b8 !important;
}

/* Overlay gradients on images */
[data-theme="light"] .overlay-gradient {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.9)) !important;
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f5f5fa;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(214, 0, 184, 0.2);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(214, 0, 184, 0.4);
}

/* ============================================
   COUNTER / STATISTICS SECTION
   The .count-text uses color:transparent with
   -webkit-text-stroke for outline effect.
   In light mode, stroke must be dark.
   ============================================ */
[data-theme="light"] .counter-item .count-text {
  -webkit-text-stroke-color: #0d0d1a !important;
  color: transparent !important;
}

[data-theme="light"] .counter-item:hover .count-text {
  color: #d600b8 !important;
  -webkit-text-stroke-color: #d600b8 !important;
}

[data-theme="light"] .counter-item .count-text::after {
  -webkit-text-stroke-color: #0d0d1a !important;
}

[data-theme="light"] .counter-item:hover .count-text::after {
  -webkit-text-stroke-color: #d600b8 !important;
}

[data-theme="light"] .counter-item .counter-title {
  color: #0d0d1a !important;
}

[data-theme="light"] .counter-item > i {
  color: #d600b8 !important;
}

/* ============================================
   SECTION TITLES & SUB-TITLES
   Fix: white text on white bg throughout
   ============================================ */
[data-theme="light"] .section-title h2 {
  color: #0d0d1a !important;
}

[data-theme="light"] .section-title .sub-title {
  color: #d600b8 !important;
}

/* Sub-title ::before decorative lines — item 2 fix.
   The base SVG is solid white (invisible on light bg).
   Use mask so we can recolor the shape to brand pink. */
[data-theme="light"] .section-title .sub-title::before,
[data-theme="light"] .slide-content .sub-title::before {
  background: #d600b8 !important;
  -webkit-mask: url(../images/icons/sub-title.svg) no-repeat 100% 100% !important;
  mask: url(../images/icons/sub-title.svg) no-repeat 100% 100% !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

[data-theme="light"] .section-title p,
[data-theme="light"] .text p {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* ============================================
   SERVICE CARDS — service-six-item
   ============================================ */
[data-theme="light"] .service-six-item {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .service-six-item .content h5,
[data-theme="light"] .service-six-item .content h5 a {
  color: #0d0d1a !important;
}

[data-theme="light"] .service-six-item .content p {
  color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .service-six-item .icon i {
  color: #d600b8 !important;
}

[data-theme="light"] .service-six-item:hover {
  border-color: rgba(214, 0, 184, 0.3) !important;
}

/* ============================================
   ABOUT / INTEGRATION SECTION TEXT
   Fix: "As an authorized partner..." invisible
   ============================================ */
[data-theme="light"] .about-content p,
[data-theme="light"] .about-four-content p,
[data-theme="light"] .my-skill-content p,
[data-theme="light"] .service-page-about p {
  color: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="light"] .about-content h2,
[data-theme="light"] .about-content h3,
[data-theme="light"] .about-four-content h2,
[data-theme="light"] .my-skill-content h2,
[data-theme="light"] .service-page-about h2 {
  color: #0d0d1a !important;
}

[data-theme="light"] .about-content b,
[data-theme="light"] .about-content strong,
[data-theme="light"] .about-four-content b,
[data-theme="light"] .about-four-content strong {
  color: #0d0d1a !important;
}

/* List items (checkmark lists) */
[data-theme="light"] .list-style-three li {
  color: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .list-style-three li::before {
  color: #d600b8 !important;
}

/* ============================================
   WORK STEPS (Methodology Section)
   ============================================ */
[data-theme="light"] .work-step-item {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .work-step-item .step-number {
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .work-step-item .title {
  color: #0d0d1a !important;
}

[data-theme="light"] .work-step-item .content p {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* ============================================
   SKILLS / TECH STACK PILLS
   ============================================ */
[data-theme="light"] .skill-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .skill-item .text {
  color: #0d0d1a !important;
}

[data-theme="light"] .skill-item:hover {
  border-color: rgba(214, 0, 184, 0.3) !important;
  background: rgba(214, 0, 184, 0.05) !important;
}

/* ============================================
   TESTIMONIALS
   Fix: "Bi Innovate developed an e-commerce..."
   invisible in light mode
   ============================================ */
[data-theme="light"] .testimonial-item,
[data-theme="light"] .testimonial-three-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .testimonial-item:hover,
[data-theme="light"] .testimonial-three-item:hover {
  border-color: rgba(214, 0, 184, 0.2) !important;
}

[data-theme="light"] .testimonial-item h4,
[data-theme="light"] .testimonial-three-item h4,
[data-theme="light"] .testimonial-item .name,
[data-theme="light"] .testimonial-three-item .name {
  color: #0d0d1a !important;
}

[data-theme="light"] .testimonial-item p,
[data-theme="light"] .testimonial-three-item p {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Author speech text — main testimonial quote */
[data-theme="light"] .testimonial-item .author-speech,
[data-theme="light"] .author-speech {
  color: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="light"] .testimonial-item .testi-des,
[data-theme="light"] .testimonial-three-item .testi-des,
[data-theme="light"] .testimonial-item .text,
[data-theme="light"] .testimonial-three-item .text {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* Quote marks */
[data-theme="light"] .author-speech .quote {
  color: #d600b8 !important;
}

/* Author name */
[data-theme="light"] .author-info h4 {
  color: #0d0d1a !important;
}

/* Designation */
[data-theme="light"] .testimonial-item .testi-header span,
[data-theme="light"] .testimonial-three-item .designation,
[data-theme="light"] .author-info .designation {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* Quote icon */
[data-theme="light"] .testimonial-item .testi-icon,
[data-theme="light"] .testimonial-three-item .quote-icon,
[data-theme="light"] .middle-quote .icon i {
  color: rgba(214, 0, 184, 0.2) !important;
}

/* Star rating */
[data-theme="light"] .ratting i,
[data-theme="light"] .ratting.style-two i {
  color: #f5a623 !important;
}

/* Testimonial nav arrows */
[data-theme="light"] .testimonial-controls .slick-arrow {
  color: #0d0d1a !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .testimonial-controls .slick-arrow:hover {
  color: #d600b8 !important;
  border-color: #d600b8 !important;
}

/* Swiper dots */
[data-theme="light"] .testimonial-three-dots .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .testimonial-three-dots .swiper-pagination-bullet-active {
  background: #d600b8 !important;
}

/* ============================================
   CLIENT LOGOS
   Fix: white logos invisible on light bg
   ============================================ */
/* The supplied client logos have MIXED polarity: E-Spaces and Jewel are
   white-on-transparent artwork, while Emanista and Interact Labs are
   dark-on-transparent. No single chip colour suits both, so the chip stays
   DARK in light mode as well — a deliberate "logo wall" panel. The previous
   attempt (white chip + grayscale + opacity 0.55) made it worse: it rendered
   Jewel white-on-white, i.e. completely invisible.

   NOTE: the real fix is monochrome logo variants from each client. Until
   those exist, the dark chip is the only background that keeps all five
   legible in both themes. */
[data-theme="light"] .client-logo-wrap-two .client-logo-item {
  background: #141422 !important;
  border-color: rgba(20, 20, 40, 0.14) !important;
  box-shadow: 0 6px 20px rgba(20, 20, 40, 0.08) !important;
  transition:
    transform var(--duration-base, 280ms) var(--ease-out, ease),
    box-shadow var(--duration-base, 280ms) var(--ease-out, ease),
    border-color var(--duration-base, 280ms) var(--ease-out, ease) !important;
}

/* Rest state slightly muted so the wall reads as one unit; hover restores
   full colour. Opacity only — never grayscale, which flattens the white
   artwork into the chip. */
[data-theme="light"] .client-logo-wrap-two .client-logo-item img {
  opacity: 0.85;
  transition: opacity var(--duration-base, 280ms) var(--ease-out, ease) !important;
}

[data-theme="light"] .client-logo-wrap-two .client-logo-item:hover {
  background: #141422 !important;
  border-color: rgba(214, 0, 184, 0.35) !important;
  box-shadow: 0 10px 28px rgba(214, 0, 184, 0.16) !important;
  transform: translateY(-3px);
}

[data-theme="light"] .client-logo-wrap-two .client-logo-item:hover img {
  opacity: 1;
}

/* ============================================
   CONTACT FORM SECTION
   ============================================ */
[data-theme="light"] .contact-form {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .our-location-address h5 {
  color: #0d0d1a !important;
}

[data-theme="light"] .our-location-address p {
  color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .our-location-address a {
  color: rgba(0, 0, 0, 0.55) !important;
}

[data-theme="light"] .our-location-address a:hover {
  color: #d600b8 !important;
}

/* ============================================
   MARQUEE HEADLINE / TICKER
   ============================================ */
[data-theme="light"] .headline-wrap-two b {
  color: #fff !important;
}

/* ============================================
   TOP BAR SOCIAL ICONS
   Fix: white icons invisible on light bar
   ============================================ */
[data-theme="light"] .header-top .social-style-two a i {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1a1a2e !important;
}

[data-theme="light"] .header-top .social-style-two a:hover i {
  background: #d600b8 !important;
  color: #fff !important;
  border-color: #d600b8 !important;
}

/* ============================================
   ABOUT SECTION — Bold text + misc text
   ============================================ */
[data-theme="light"] .about-content b,
[data-theme="light"] .about-content strong,
[data-theme="light"] .about-four-content b,
[data-theme="light"] .about-four-content strong {
  color: #0d0d1a !important;
}

/* ============================================
   BG-LINES — Decorative vertical lines
   ============================================ */
[data-theme="light"] .bg-lines span {
  background: rgba(0, 0, 0, 0.03) !important;
}

/* ============================================
   HERO SOCIAL BAR — Glass card
   ============================================ */
[data-theme="light"] .hero-social {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .hero-social a i {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1a1a2e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .hero-social a:hover i {
  background: #d600b8 !important;
  color: #fff !important;
  border-color: #d600b8 !important;
}

[data-theme="light"] .hero-social a span {
  color: #1a1a2e !important;
}

/* ============================================
   FORM GLOW ORB — Reduce for light mode
   ============================================ */
[data-theme="light"] .form-glow-orb {
  background: radial-gradient(circle, rgba(214, 0, 184, 0.08) 0%, transparent 70%) !important;
}

/* ============================================
   LIGHT-MODE IMAGE SWAPS
   Swap dark decorative images with proper
   light-on-white versions from template
   ============================================ */

/* Footer background shape — light grid pattern */
[data-theme="light"] .main-footer {
  background-image: url('/assets/images/light-mode/footer/footer-bg-shape.png') !important;
  background-color: #f5f5fa !important;
}

/* Work process connecting line — visible on light bg */
[data-theme="light"] .work-step-item::before {
  background-image: url('/assets/images/light-mode/shapes/work-process-line.png') !important;
}

/* Bi Innovate logo — darken for light backgrounds.
   The wordmark ships as a WHITE PNG, so light mode has to darken it or it
   renders as a ghost on the near-white header. This block is the SINGLE
   source of truth for that filter: every place the wordmark appears is
   listed here at the same value, so the four surfaces can never drift.

   Do NOT re-add a per-component `[data-theme="light"] … img { filter }`
   in custom.nav.css, Footer1.vue or Sidebar.vue. All three used to carry
   their own value (0.9 / 0.8 / 0.85) and, being later in the cascade at
   equal specificity, they beat the !important here — which is exactly how
   the header-mobile, footer and sidebar logos ended up invisible while the
   desktop one looked fine. Add new surfaces to this selector list instead.

   `:root[data-theme=…]` (not bare `[data-theme=…]`) is deliberate. Sidebar.vue
   carries a scoped `.sidebar-logo img { filter: brightness(1.15) !important }`
   as its DARK value; scoped CSS appends `[data-v-hash]`, which ties this
   selector on specificity and then wins on cascade order. The `:root` prefix
   buys the extra specificity so the light value lands. */
:root[data-theme="light"] .logo img,
:root[data-theme="light"] .logo-outer img,
:root[data-theme="light"] .mobile-logo img,
:root[data-theme="light"] .footer-logo img,
:root[data-theme="light"] .sidebar-logo img {
  filter: brightness(0.2) !important;
}

/* Hover lift for the header wordmark. Has to be !important and live here:
   the rule above is !important, so a plain hover rule anywhere else loses. */
:root[data-theme="light"] .logo-outer .logo:hover img {
  filter: brightness(0.45) !important;
}

/* ============================================
   DARK-BG SECTION EXCEPTIONS
   These sections keep dark backgrounds even
   in light mode, so text MUST stay white.
   ============================================ */

/* About-area "Book a consultation" strip — Item 5 redesign.
   Was kept dark as an exception; redesign for light mode as
   a soft pearl card with pink accent glow. */
[data-theme="light"] .about-four-wrap {
  background: linear-gradient(135deg, #ffffff 0%, #f7f7fc 50%, #f1effa 100%) !important;
  border: var(--border-width) solid rgba(214, 0, 184, 0.1) !important;
  /* Shape + positioning moved to custom.ui.css under the tokenised
     rule; this block keeps palette only. */
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(214, 0, 184, 0.04) inset !important;
}

/* Soft pink glow accent in top-right corner */
[data-theme="light"] .about-four-wrap::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 45%;
  height: 80%;
  background: radial-gradient(circle, rgba(214, 0, 184, 0.08) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

html[dir="rtl"] [data-theme="light"] .about-four-wrap::before {
  right: auto;
  left: -10%;
}

[data-theme="light"] .about-four-wrap > * {
  position: relative;
  z-index: 1;
}

[data-theme="light"] .about-four-wrap h2,
[data-theme="light"] .about-four-wrap h3,
[data-theme="light"] .about-four-wrap h4,
[data-theme="light"] .about-four-wrap h5,
[data-theme="light"] .about-four-wrap h6 {
  color: #0d0d1a !important;
}

[data-theme="light"] .about-four-wrap p {
  color: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .about-four-wrap b,
[data-theme="light"] .about-four-wrap strong {
  color: #0d0d1a !important;
}

[data-theme="light"] .about-four-wrap .sub-title {
  color: #d600b8 !important;
}

[data-theme="light"] .about-four-wrap .list-style-three li {
  color: rgba(0, 0, 0, 0.75) !important;
}

[data-theme="light"] .about-four-wrap .list-style-three li::before {
  color: #d600b8 !important;
}

[data-theme="light"] .about-four-wrap a:not(.theme-btn) {
  color: #0d0d1a !important;
}

[data-theme="light"] .about-four-wrap a:not(.theme-btn):hover {
  color: #d600b8 !important;
}

/* about-four-image shadow (palette); radius owned by custom.ui.css */
[data-theme="light"] .about-four-image img {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1) !important;
}

/* .text-white utility — force white text even in light mode */
[data-theme="light"] .text-white,
[data-theme="light"] .text-white h1,
[data-theme="light"] .text-white h2,
[data-theme="light"] .text-white h3,
[data-theme="light"] .text-white h4,
[data-theme="light"] .text-white h5,
[data-theme="light"] .text-white h6,
[data-theme="light"] .text-white p,
[data-theme="light"] .text-white a,
[data-theme="light"] .text-white span {
  color: #ffffff !important;
}

/* .bgc-black sections — keep text white */
[data-theme="light"] .bgc-black h2,
[data-theme="light"] .bgc-black h3,
[data-theme="light"] .bgc-black h4,
[data-theme="light"] .bgc-black p,
[data-theme="light"] .bgc-black .sub-title {
  color: #ffffff !important;
}

/* Page banner — always dark bg */
[data-theme="light"] .page-banner-area h1,
[data-theme="light"] .page-banner-area .breadcrumb-item,
[data-theme="light"] .page-banner-area .breadcrumb-item a {
  color: #ffffff !important;
}

[data-theme="light"] .page-banner-area .breadcrumb-item.active {
  color: #d600b8 !important;
}

/* Service items with dark bg */
[data-theme="light"] .service-item {
  background-color: #0a1019 !important;
}

[data-theme="light"] .service-item h5,
[data-theme="light"] .service-item h5 a,
[data-theme="light"] .service-item p {
  color: rgba(255, 255, 255, 0.8) !important;
}

[data-theme="light"] .service-item .icon {
  color: #d600b8 !important;
}

[data-theme="light"] .service-item:hover h5,
[data-theme="light"] .service-item:hover h5 a,
[data-theme="light"] .service-item:hover p,
[data-theme="light"] .service-item:hover .icon {
  color: #ffffff !important;
}

/* ============================================
   ACCORDION (FAQ) — style.css:11576+
   .accordion-button hardcoded white.
   Used on zoho-ecosystem, back-end-development, etc.
   ============================================ */
[data-theme="light"] .accordion-item .accordion-button {
  color: #0d0d1a !important;
}

[data-theme="light"] .accordion-item .accordion-header {
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .accordion-item .accordion-button:after {
  color: #d600b8 !important;
}

[data-theme="light"] .accordion-item .accordion-body p {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* ============================================
   BIG-TEXT — Decorative oversized label that sits
   behind the service-page image (e.g. "Enterprise
   Ecosystem", "المنظومة المتكاملة"). Must read as
   a visible-but-subtle watermark in both LTR and RTL.
   ============================================ */
[data-theme="light"] .big-text {
  color: rgba(0, 0, 0, 0.1) !important;
}

/* Arabic .big-text palette only — weight bump handled by the
   [lang="ar"] scope in tokens.css. */
html[dir="rtl"][data-theme="light"] .big-text {
  color: rgba(0, 0, 0, 0.12) !important;
}

/* service-page-about image — palette shadow only; radius + z-index
   owned by custom.ui.css as a tokenised rule. */
[data-theme="light"] .service-page-about .image img {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   WHY-CHOOSE-ITEM — style.css:11780+
   Used on zoho, backend, consultation, services.
   ============================================ */
[data-theme="light"] .why-choose-item .why-choose-header {
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .why-choose-item:hover .why-choose-header {
  border-color: #0d0d1a !important;
}

[data-theme="light"] .why-choose-item .why-choose-header h5 {
  color: #0d0d1a !important;
}

[data-theme="light"] .why-choose-item p,
[data-theme="light"] .why-choose-item.style-two p {
  color: rgba(0, 0, 0, 0.65) !important;
}

[data-theme="light"] .why-choose-item.style-three {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   SERVICE-GRID-ITEM — services.vue (9-box grid)
   ============================================ */
[data-theme="light"] .service-grid-item {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .service-grid-item:hover {
  border-color: rgba(214, 0, 184, 0.35) !important;
  background: rgba(214, 0, 184, 0.03) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .service-grid-item h5 a {
  color: #0d0d1a !important;
}

[data-theme="light"] .service-grid-item:hover h5 a {
  color: #d600b8 !important;
}

[data-theme="light"] .service-grid-item p {
  color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .service-grid-item .details-btn {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* services.vue macro-desc + cta-desc */
[data-theme="light"] .macro-desc,
[data-theme="light"] .cta-desc {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* services.vue .bg-dark-purple alternating strip → soft pink tint */
[data-theme="light"] .bg-dark-purple {
  background-color: rgba(214, 0, 184, 0.03) !important;
  border-top-color: rgba(0, 0, 0, 0.04) !important;
  border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .macro-image img {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
  filter: brightness(1) !important;
}

/* ============================================
   SERVICE-ITEM-FOUR — ai-services.vue grid
   ============================================ */
[data-theme="light"] .service-item-four {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .service-item-four .service-content h5 {
  color: #0d0d1a !important;
}

[data-theme="light"] .service-item-four .service-content p {
  color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .service-item-four .service-icon i {
  color: #d600b8 !important;
}

/* ============================================
   SERVICE-LIST h6 sub-heading (ui-ux, mobile)
   ============================================ */
[data-theme="light"] .service-list h6 {
  color: #0d0d1a !important;
}

/* ============================================
   BOOKING PAGE — .booking-iframe-wrap
   ============================================ */
[data-theme="light"] .booking-iframe-wrap {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   CAREERS PAGE — position-card + no-position-cta
   ============================================ */
[data-theme="light"] .position-card {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .position-card:hover {
  border-color: rgba(214, 0, 184, 0.3) !important;
  background: rgba(214, 0, 184, 0.04) !important;
  box-shadow: 0 12px 35px rgba(214, 0, 184, 0.08) !important;
}

[data-theme="light"] .pos-info h4 {
  color: #0d0d1a !important;
}

[data-theme="light"] .pos-meta {
  color: rgba(0, 0, 0, 0.55) !important;
}

[data-theme="light"] .no-position-cta {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .no-position-cta:hover {
  border-color: rgba(214, 0, 184, 0.25) !important;
}

[data-theme="light"] .no-position-cta h4 {
  color: #0d0d1a !important;
}

[data-theme="light"] .no-position-cta p {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* ============================================
   PROJECTS PAGE — case study + automation flow
   ============================================ */
[data-theme="light"] .project-title {
  color: #0d0d1a !important;
}

[data-theme="light"] .project-client {
  color: rgba(0, 0, 0, 0.55) !important;
}

[data-theme="light"] .result-badge p {
  color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme="light"] .automation-flow {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .flow-step {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(214, 0, 184, 0.15) !important;
}

[data-theme="light"] .flow-step:hover {
  background: rgba(214, 0, 184, 0.05) !important;
  border-color: rgba(214, 0, 184, 0.35) !important;
}

[data-theme="light"] .flow-text {
  color: rgba(0, 0, 0, 0.85) !important;
}

/* projects.vue .flow-icon — white box invisible on light bg */
[data-theme="light"] .flow-icon {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ============================================
   ABOUT PAGE — statistics-area + video-year
   ============================================ */

/* video-year outline text — white stroke becomes invisible on light bg */
[data-theme="light"] .video-year {
  -webkit-text-stroke-color: rgba(0, 0, 0, 0.1) !important;
}

/* banner-text (vision/mission paragraphs under the large hero heading) */
[data-theme="light"] .banner-text h4 {
  color: #0d0d1a !important;
}

[data-theme="light"] .banner-text p,
[data-theme="light"] .video-area-two .text {
  color: rgba(0, 0, 0, 0.65) !important;
}

/* ============================================
   PRIVACY-POLICY / TERMS — scoped white-on-white
   content wraps.
   ============================================ */
[data-theme="light"] .privacy-content-wrap,
[data-theme="light"] .terms-content-wrap {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .last-updated {
  color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .privacy-body p,
[data-theme="light"] .terms-body p {
  color: rgba(0, 0, 0, 0.7) !important;
}

[data-theme="light"] .privacy-body .lead,
[data-theme="light"] .terms-body .lead {
  color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme="light"] .policy-section h4,
[data-theme="light"] .terms-section h4 {
  color: #0d0d1a !important;
}

/* ============================================
   ERROR PAGE (404 / generic) — error.vue
   Note: page-banner-area is an intentional
   dark-bg exception above, but .error-section
   uses its own bg image (hero-two-bg.png) —
   keep that image but lighten the overlay.
   ============================================ */
[data-theme="light"] .error-content h1,
[data-theme="light"] .error-content h2 {
  color: #0d0d1a !important;
}

/* ============================================
   THEME TRANSITION — Now owned by tokens.css.
   The `:root[data-theme-transitioning]` rule in
   tokens.css handles the crossfade using
   `--duration-theme` and `--ease-out`. Intentionally
   no transition rules here to stay palette-only.
   ============================================ */