/* qa-c-bottom — QA overrides */

/* 1. Sidebar active nav pill (yellow bg): icon + text must be black, not white */
.nav-item-bg.is-nav-active ~ .nav-item-icon,
.nav-menu-item .nav-item-bg.is-nav-active + .nav-item-icon,
.hero-navigation-link.is-spy-current ~ .nav-item-icon,
.nav-link.w--current:hover ~ .nav-item-icon {
  color: #000 !important;
}

/* 2. Sidebar Instagram/LinkedIn icon chips: the chip itself (.social-bg-path)
   is always rendered yellow via CSS below, so the icon marks must be black. */
.social-link .social-bg-path {
  color: #ffff23;
}
.social-link svg rect,
.social-link svg circle {
  stroke: #000 !important;
}
.social-link svg circle[fill="white"] {
  fill: #000 !important;
}

/* 3. .nav-webflow-bg is NOT the top "WEBX" brand chip (that's .nav-logo,
   already yellow via the template's own inline GSAP colors) — it's the
   translucent backdrop panel sitting behind the "25+ Projects" stat
   card's round icon (and the FLIP landing spot for the hero mark). Forcing
   it solid yellow turned that whole icon slot into a yellow block that
   swallowed the icon/number. Leave it transparent in both themes so only
   the round logo mark shows, sized to match the small icon (not the
   original 100%/100% translucent card, which would tint the stat panel
   the wrong color behind the pill row above it). */
.nav-webflow-bg {
  background-color: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 4. Sidebar stats "25+"/"10+" numbers: black on the light sidebar card
   (was always yellow, unreadable on the light cream card), yellow only
   once the section behind the sidebar goes dark. script.js flips the
   sidebar to dark mode by adding .text-color-white to the stat labels
   (.nav-experience-text / .nav-webflow-text) at the same moment, so use
   that as the light/dark signal via :has() instead of assuming DOM order. */
.stat-number-accent,
.nav-experience-numb {
  color: #000 !important;
}
.nav-stats-wrap:has(.text-color-white) .stat-number-accent,
.nav-stats-wrap:has(.text-color-white) .nav-experience-numb {
  color: #ffff23 !important;
}
.nav-experience-text.text-color-white,
.nav-webflow-text-wrap .nav-webflow-text.text-color-white {
  color: #fff !important;
}

/* 7. Mobile fixed header logo: replace the black-WEBX-on-yellow-chip with
   the real blue Webnixian mark (logo.svg) so the mobile top bar reads
   "blue logo left, hamburger right" per the dark-hero redesign. The WEBX
   svg/copyright mark are hidden and the chip's yellow fill removed; the
   logo image sits as a background on the (now transparent) logo slot. */
@media screen and (max-width: 767px) {
  .nav-logo .nesh-logo-svg,
  .nav-logo .nesh-copyright-wrap {
    display: none !important;
  }
  .nav-top-bg { background-color: transparent !important; }
  .nav-logo-item {
    background: url("../img/logo.svg") no-repeat left center;
    background-size: contain;
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
}
/* 5. Mobile menu background: near-opaque + blur, so content behind doesn't
   bleed through / reduce legibility. */
@media screen and (max-width: 767px) {
  .nav-menu-bg {
    background: rgba(235, 234, 218, 0.97) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
  }

  /* The company-logos marquee (ordered last inside the mobile menu) could
     overflow past the menu panel's own background, letting it and the
     hero content behind bleed through below the visible panel once the
     menu is open. Hide it for the duration the menu is open. */
  body:has(.mobile-menu.is-active) .nav-comapny-wrap {
    display: none !important;
  }
}

/* 6. Leftover purple / low-contrast cleanup across CTA, testimonials,
   footer wordmark, and FAQ sections. */
.faq-toggle:hover .faq-icon {
  background-color: #ffff23 !important;
}
.social-link:hover {
  background-color: #fffcb0 !important;
}

/* Social icons (sidebar + pricing): black tile, yellow glyph, readable on
   light and dark panels. LinkedIn's letters are cut-outs of the tile, so the
   link's own background shows through them: make that yellow. */
/* Sidebar/menu social icons render at their SVG's intrinsic ~28px box
   with no explicit sizing rule of their own; bump them to a real 40px tap
   target on small mobile widths (the pricing-card icons are intentionally
   smaller per their own scoped rule below, so this is excluded there). */
@media screen and (max-width: 414px) {
  .social-wrap .social-link {
    min-width: 40px;
    min-height: 40px;
  }
}
.social-link {
  background-color: #ffff23 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.social-link .social-bg-path,
.price-social-links .social-link .social-bg-path { color: #14120d !important; fill: #14120d !important; }
.social-link svg { width: 100% !important; height: 100% !important; display: block; }
.social-link svg rect:not(.social-bg-path),
.social-link svg circle,
.social-link svg path[stroke] { stroke: #ffff23 !important; }
.social-link svg circle[fill="white"],
.social-link svg circle[fill="whi"] { fill: #ffff23 !important; }
.social-link svg .social-path-white { fill: #ffff23 !important; }

/* Sidebar social icons: the black tile (an SVG path) was drawn ~1px short of
   the yellow button, leaving an uneven yellow edge (1px top/left, ~2px
   bottom/right). The button itself is now the black tile with an even yellow
   frame; the SVG only draws the glyph. */
.social-link {
  background-color: #14120d !important;
  border: 2px solid #ffff23 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.social-link svg { width: 88% !important; height: auto !important; }
.social-link svg .social-bg-path { fill: transparent !important; color: transparent !important; }

/* Phone/tablet header: the vector WEBNIXIAN wordmark (icon + outlined
   letters) replaces the icon + typed "Webnixian" text. White letters over
   the dark hero, dark letters once the header turns cream. */
@media screen and (max-width: 767px) {
  .nav-logo-item {
    background: url("../img/logo-wordmark-dark.svg") no-repeat left center !important;
    background-size: contain !important;
    width: 160px !important;
    min-width: 160px !important;
    height: 31px !important;
  }
  html.at-hero .nav-logo-item { background-image: url("../img/logo-wordmark.svg") !important; }
  .nav-logo-item::after { content: none !important; }
}
@media screen and (max-width: 767px) {
  /* the slot around the wordmark was 92px and centred it, pushing the icon
     off the left edge; left-align it and let it fit the wordmark. */
  .nav-logo { justify-content: flex-start !important; width: auto !important; min-width: 160px !important; }
}