/* =========================================================
   Sumer Software Solutions — brand overrides for the Nexsas
   template. Loaded AFTER main.css. Recolors the template's
   purple system to the Sumer blue (#025AE2).
   ========================================================= */
:root,
:host {
  --color-primary-50: #eaf2ff;
  --color-primary-100: #d6e6ff;
  --color-primary-200: #aeceff;
  --color-primary-300: #84b0ff;
  --color-primary-400: #3d82f0;
  --color-primary-500: #025ae2; /* Sumer primary */
  --color-primary-600: #0147b8; /* Sumer primary-dark */
  --color-primary-700: #013a99;
  --color-primary-800: #002e7a;
  --color-primary-900: #001e52;

  /* Recolor the template's purple gradients to blue */
  --color-gradient-1: linear-gradient(135deg, #3d82f0 0%, #84b0ff 100%);
  --color-gradient-8: linear-gradient(156deg, #ffffff 32.92%, #3d82f0 91%);
  --color-gradient-9: linear-gradient(156deg, #aeceff 32.92%, #84b0ff 91%);
}

/* Fallbacks in case any primary utility was compiled with a literal value */
.bg-primary-500 { background-color: #025ae2 !important; }
.text-primary-500 { color: #025ae2 !important; }
.border-primary-500 { border-color: #025ae2 !important; }
.bg-primary-600 { background-color: #0147b8 !important; }
.text-primary-600 { color: #0147b8 !important; }

/* Process progress bars -> brand blue */
.progress-line { background-color: #025ae2 !important; }

/* Active nav link */
.nav-active { color: #025ae2 !important; }

/* Anchor offset under the fixed navbar (Lenis handles smooth scrolling — do NOT
   set scroll-behavior:smooth here; it fights Lenis and causes scroll stutter) */
section[id] { scroll-margin-top: 112px; }

/* Normalize the real client logos in the trust strip */
aside[aria-label="Our Clients"] img {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}

/* Contact form fields */
.sumer-field {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sumer-field:focus {
  outline: none;
  border-color: #025ae2;
  box-shadow: 0 0 0 4px rgba(2, 90, 226, 0.12);
}
.sumer-field::placeholder { color: rgba(26, 26, 28, 0.4); }

/* Nudge the template's purple product mockups toward Sumer blue */
.sumer-shift { filter: hue-rotate(-34deg) saturate(1.05); }

/* social-media-management hero, kept on-brand:
   blue animated headline gradient, blue flowing dots, blue-shifted mockups */
.hero-text-color-2 {
  background-image: linear-gradient(45deg, #025ae2, #6aa8ff, #025ae2) !important;
}
#home svg rect { fill: #2e6fe8 !important; }
#home figure img { filter: hue-rotate(-34deg) saturate(1.06); }

/* =========================================================
   Trusted-clients marquee — cloud-software "Trusted by
   industry leaders" design, rendered as logo + name.
   ========================================================= */
.client-marquee figure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}
.client-marquee figure img {
  height: 34px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.client-marquee figure:hover img {
  filter: grayscale(0);
  opacity: 1;
}
.client-marquee figcaption {
  font-weight: 600;
  white-space: nowrap;
  color: rgba(26, 26, 28, 0.65);
  transition: color 0.3s ease;
}
.client-marquee figure:hover figcaption { color: #1a1a1c; }

/* Edge fades — match the white page background so logos dissolve at the rim */
.client-marquee .marquee-fade-left  { background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)); }
.client-marquee .marquee-fade-right { background: linear-gradient(to left,  #ffffff, rgba(255, 255, 255, 0)); }

/* Dark mode */
.dark .client-marquee figcaption { color: rgba(255, 255, 255, 0.6); }
.dark .client-marquee figure:hover figcaption { color: #ffffff; }
.dark .client-marquee .marquee-fade-left  { background: linear-gradient(to right, var(--color-background-5, #0b0b0f), transparent); }
.dark .client-marquee .marquee-fade-right { background: linear-gradient(to left,  var(--color-background-5, #0b0b0f), transparent); }

/* =========================================================
   Process dark card (creative-portfolio "About me" design) —
   recolor the template's orange corner glow to Sumer blue.
   ========================================================= */
.process-glow img { filter: grayscale(1) sepia(1) hue-rotate(184deg) saturate(3.6) brightness(1.06); }

/* App-development section — recolor the template's pink/orange corner gradient to Sumer blue */
.appdev-glow img { filter: grayscale(1) sepia(1) hue-rotate(185deg) saturate(2.6) brightness(1.08); }