/* =========================================================
   Yanis Si Salah — Brand Override
   Dark, sophisticated personal-brand theme with electric-blue accent.
   This file loads AFTER main.css and overrides the theme's CSS
   custom properties rather than fighting individual utility classes,
   so the whole component system (buttons, cards, borders, gradients)
   inherits the new palette consistently.
   ========================================================= */

:root,
[data-bs-theme=dark] {
  /* ---- Bootstrap primary (drives .text-primary, .btn-primary, etc.) ---- */
  --bs-primary: #4D7CFE;
  --bs-primary-rgb: 77, 124, 254;

  /* ---- Theme accent tokens ---- */
  --tc-theme-dark-primary-1: #4D7CFE; /* primary accent */
  --tc-theme-dark-primary-2: #7C9CFF; /* secondary/hover accent */
  --tc-theme-dark-primary-3: #A9C1FF; /* tertiary accent */
  --tc-theme-dark-secondary-1: #111722;
  --tc-theme-dark-secondary-2: #7C9CFF;
  --tc-theme-dark-secondary-3: #242D3A;

  --tc-theme-primary-light: rgba(77, 124, 254, 0.08);
  --tc-theme-primary-soft: rgba(77, 124, 254, 0.14);
  --tc-theme-primary-secondary: #7C9CFF;
  --tc-theme-primary-dark: #0B0F1A;
  --tc-theme-primary-dark-1: #4D7CFE;
  --tc-theme-primary-dark-2: #7C9CFF;
  --tc-theme-primary-dark-3: #A9C1FF;

  /* ---- Neutral / grayscale ramp (0 = brightest text, 1000 = darkest bg) ---- */
  --tc-neutral-dark-0: #F5F7FA;    /* primary text */
  --tc-neutral-dark-100: #E4E7EC;
  --tc-neutral-dark-200: #C6CBD3;
  --tc-neutral-dark-300: #98A2B3;  /* secondary text */
  --tc-neutral-dark-400: #7C8698;
  --tc-neutral-dark-500: #626C7E;
  --tc-neutral-dark-600: #4B5563;
  --tc-neutral-dark-700: #333D4D;
  --tc-neutral-dark-800: #1A2331;
  --tc-neutral-dark-900: #111722;  /* secondary bg / cards */
  --tc-neutral-dark-1000: #080B12; /* primary bg */

  /* ---- Section background swatches ---- */
  --tc-bg-dark-1: #111722;
  --tc-bg-dark-2: #080B12;
  --tc-bg-dark-3: #111722;
  --tc-bg-dark-4: #080B12;
  --tc-bg-dark-5: #080B12;
  --tc-bg-dark-6: #131A26;
  --tc-bg-dark-7: #111722;

  /* ---- Borders / dividers ---- */
  --tc-border-dark-1: #242D3A;
  --tc-border-dark-2: #242D3A;

  /* ---- Gradients (kept restrained: blue -> lighter blue only) ---- */
  --tc-linear-dark-1: linear-gradient(90deg, #4D7CFE 0%, #7C9CFF 100%);
  --tc-linear-dark-2: linear-gradient(-180deg, #4D7CFE 0%, transparent 100%);
  --tc-linear-dark-3: linear-gradient(-180deg, #242D3A 0%, transparent 100%);
  --tc-linear-dark-4: linear-gradient(-90deg, #4D7CFE 0%, #7C9CFF 100%);
  --tc-linear-dark-5: linear-gradient(-90deg, rgba(77, 124, 254, 0.35) 0%, rgb(77, 124, 254) 100%);

  /* ---- System colors (kept functional, muted tied to secondary text) ---- */
  --tc-system-dark-muted: #98A2B3;
  --tc-system-dark-dark: #080B12;

  /* ---- Shadows ---- */
  --tc-shadow-dark-1: 0 20px 45px -15px rgba(0, 0, 0, 0.55);
  --tc-shadow-dark-2: 0 0 30px 0 rgba(0, 0, 0, 0.35);

  /* ---- Typography ---- */
  --tc-body-font-family: 'Inter', sans-serif;
  --tc-heading-font-family: 'Space Grotesk', sans-serif;
  --tc-display-font-family: 'Space Grotesk', sans-serif;
}

/* =========================================================
   Typography refinements
   ========================================================= */
body {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.ds-1, .ds-2, .ds-3 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.01em;
}

/* Small labels / metadata / eyebrow tags read better in mono */
.btn-gradient.d-inline-block.text-uppercase,
.rs-section-subtitle,
.text-uppercase.fs-7,
span.text-uppercase,
.card__title p.text-primary,
.service-number {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
}

/* =========================================================
   Navbar — keep it minimal and dark, no colour flood
   ========================================================= */
[data-bs-theme=dark] .navbar {
  background-color: #080B12;
  border-bottom: 1px solid #242D3A;
}

/* =========================================================
   Cards & borders — restrained, editorial
   ========================================================= */
.card__inner,
.single-service-card-1,
.resume-card,
.bg-6 {
  border-color: #242D3A;
}

/* =========================================================
   Buttons — premium, restrained
   ========================================================= */
.btn-gradient {
  box-shadow: 0 8px 24px -8px rgba(77, 124, 254, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-gradient:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -8px rgba(77, 124, 254, 0.6);
}

.btn-outline-secondary {
  --bs-btn-color: #F5F7FA;
  --bs-btn-hover-color: #F5F7FA;
  --bs-btn-active-color: #F5F7FA;
  background: linear-gradient(#080B12, #080B12) padding-box, linear-gradient(180deg, #242D3A, #242D3A) border-box;
  border: 1px solid transparent;
  transition: background 0.2s ease;
}
.btn-outline-secondary:hover {
  background: linear-gradient(#080B12, #080B12) padding-box, linear-gradient(90deg, #4D7CFE, #7C9CFF) border-box;
}

/* =========================================================
   Footer background big text — subtle, not neon
   ========================================================= */
.stroke {
  opacity: 0.5;
}

/* =========================================================
   Hero portrait — real photo, styled like the template's original
   grayscale-photo-with-accent-shape treatment, recoloured to brand blue.
   Background removed, so the photo sits flush with the bottom of the
   hero section with no card frame, matching the template's silhouette look.
   ========================================================= */
.section-hero-1 {
  padding-bottom: 0 !important;
  padding-top: 120px !important;
}
@media (min-width: 992px) {
  .section-hero-1 {
    padding-top: 140px !important;
    min-height: 640px;
  }
}
.hero-portrait-wrap {
  line-height: 0;
}
.hero-portrait-shape {
  width: 50%;
  left: -16%;
  bottom: 6%;
  z-index: 0;
  animation: heroShapeSpin 18s linear infinite;
}
.hero-portrait-shape img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes heroShapeSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.hero-portrait-img {
  display: block;
  z-index: 1;
  filter: grayscale(100%) contrast(1.05);
  width: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* Mobile / tablet: photo flows normally below the text, capped in height */
.hero-portrait-wrap.d-lg-none .hero-portrait-img {
  max-height: 60vh;
  margin: 0 auto;
}
/* Desktop: photo is pulled out of the text flow and pinned to the
   bottom-right of the section so its height never pushes the
   headline down, and its base sits flush with the next section. */
@media (min-width: 992px) {
  .hero-portrait-wrap.d-none.d-lg-block {
    bottom: 0;
    right: 6%;
    width: 30%;
    max-width: 400px;
  }
}

/* =========================================================
   Signature / logo — keep light & clean, never tinted blue
   ========================================================= */
.main-logo img {
  height: 40px;
  width: auto;
  max-width: 40px;
  object-fit: contain;
  /* Force the mark to a soft off-white silhouette regardless of
     the source file's original colours, per brand guidance:
     "soft white/off-white version, no large coloured treatment". */
  filter: brightness(0) invert(1) opacity(0.92);
}

/* =========================================================
   Links & hover states
   ========================================================= */
a {
  transition: color 0.2s ease;
}

.card_title_link:hover h3,
.project-card-content:hover h3,
.service-card-title a:hover {
  color: #4D7CFE;
}

/* =========================================================
   Form fields — dark, subtle border, blue focus ring
   ========================================================= */
.form-control {
  background-color: #111722 !important;
  border-color: #242D3A !important;
  color: #F5F7FA !important;
}
.form-control::placeholder {
  color: #626C7E;
}
.form-control:focus {
  border-color: #4D7CFE !important;
  box-shadow: 0 0 0 3px rgba(77, 124, 254, 0.15) !important;
}

/* =========================================================
   Skills icon circles — subtle border, blue icon only
   ========================================================= */
.skills-icon.icon-shape {
  border-color: #242D3A !important;
  background-color: #111722 !important;
}

/* =========================================================
   Fix: Dusens logo is a solid black wordmark designed for a
   light background. Invert it to soft white so it's visible
   against our dark cards/sections.
   ========================================================= */
.invert-logo {
  filter: brightness(0) invert(1) opacity(0.85);
}

/* =========================================================
   Hardcoded-purple fixes
   The template bakes #6e4ef2 (Zelio purple) directly into a
   couple of gradient-border declarations instead of using the
   theme CSS variables, so overriding variables alone doesn't
   reach them. Re-declaring the same selectors here (loaded
   after main.css) swaps them to the brand blue.
   ========================================================= */
.border-linear-2 {
  background: linear-gradient(var(--tc-neutral-1000), var(--tc-neutral-1000)) padding-box, linear-gradient(to bottom, #4D7CFE, transparent) border-box;
  border: 1px solid transparent;
}

.section-resume-1 .resume-card .resume-card-body .resume-card-item {
  background: linear-gradient(var(--tc-bg-1), var(--tc-bg-1)) padding-box, linear-gradient(to bottom, #4D7CFE, transparent) border-box;
}
.section-resume-1 .resume-card .resume-card-body .resume-card-item:hover {
  border: 1px solid #333D4D;
}

/* =========================================================
   Preloader — align with brand instead of default green/dark-gray
   ========================================================= */
#preloader {
  background-color: #080B12 !important;
}
#preloader .loader-cover .loader-container .loader-icon {
  background: conic-gradient(from 120deg at 50% 64%, rgba(0, 0, 0, 0), #4D7CFE 1deg 120deg, rgba(0, 0, 0, 0) 121deg) !important;
}
#preloader .loader-cover .loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
#preloader .loader-cover .loader-container .loader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: auto;
  filter: brightness(0) invert(1) opacity(0.95);
}

/* =========================================================
   Fix: work.html project-card meta text (Client / Years / Role)
   is hardcoded to a near-black navy in the source template,
   making it unreadable against our dark cards. Force it to the
   secondary text tone at every breakpoint the rule appears in.
   ========================================================= */
.section-work .card-scroll .cards .card-custom .card__inner .card__content .content .card__description {
  color: #98A2B3 !important;
}

/* =========================================================
   Tools showcase — logo chips
   ========================================================= */
.tool-chip {
  width: 92px;
}
.tool-chip-icon {
  width: 64px;
  height: 64px;
  padding: 14px;
  border: 1px solid #242D3A;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tool-chip-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tool-chip-fallback {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #4D7CFE;
}
.tool-chip:hover .tool-chip-icon {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -10px rgba(77, 124, 254, 0.45);
}

/* =========================================================
   Horizontal "Latest Work" project cards
   ========================================================= */
.project-row {
  border: 1px solid #242D3A;
  background: #111722;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.project-row:hover {
  border-color: #4D7CFE;
  transform: translateY(-3px);
  box-shadow: 0 20px 45px -25px rgba(77, 124, 254, 0.5);
}
.project-row-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.project-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.project-row:hover .project-row-img img {
  transform: scale(1.05);
}
.project-row-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .project-row {
    height: 360px;
  }
  .project-row-img {
    aspect-ratio: auto;
    height: 100%;
  }
}
.project-row-index {
  font-family: 'IBM Plex Mono', monospace;
  color: #333D4D;
  font-size: 14px;
  letter-spacing: 0.05em;
}