/* =====================================================================
   SILVER SKIN  —  Apple-style light homepage (DRAFT / opt-in)
   ---------------------------------------------------------------------
   Everything here is scoped under `body.kk-silver`, so the original dark
   theme is 100% untouched and this is fully reversible.

   Activate on the HOMEPAGE only via ?skin=silver (see inc/silver.php).
   Palette (Apple-ish):
     page   #f5f5f7   surface/cards #ffffff
     ink    #1d1d1f   muted #6e6e73   hairline rgba(0,0,0,.10)
     accent (brand red) #ba0013 is kept for eyebrows/links.
   To fully revert: delete this file + inc/silver.php + its require.
   ===================================================================== */

/* ---- Page base ---------------------------------------------------- */
body.kk-silver {
  background: #f5f5f7 !important;
  color: #1d1d1f;
}

/* ---- Dark surfaces (Tailwind color utilities) --------------------- */
body.kk-silver [class~="bg-dark-100"]  { background-color: #f5f5f7 !important; }
body.kk-silver [class~="bg-dark-deep"] { background-color: #ececef !important; }
body.kk-silver [class*="bg-dark-100/"] { background-color: rgba(245,245,247,0.90) !important; }

/* Cards lift on the silver page with a hairline + soft shadow */
body.kk-silver [class~="bg-dark-200"],
body.kk-silver [class*="bg-dark-200/"] {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 34px rgba(0,0,0,0.05);
}

/* ---- Text --------------------------------------------------------- */
body.kk-silver [class~="text-white"]  { color: #1d1d1f !important; }  /* solid white -> near-black */
body.kk-silver [class*="text-white/"] { color: #6e6e73 !important; }  /* translucent -> Apple grey */
/* keep the emphasis tiers (…/80 …/88 …/90 …/95) dark */
body.kk-silver [class*="text-white/8"],
body.kk-silver [class*="text-white/9"] { color: #1d1d1f !important; }

/* Component helpers that bake white in via @apply */
body.kk-silver .lede,
body.kk-silver .kk-stat-label { color: #6e6e73 !important; }
body.kk-silver .h-sub,
body.kk-silver h1, body.kk-silver h2, body.kk-silver h3,
body.kk-silver h4, body.kk-silver h5, body.kk-silver h6 { color: #1d1d1f; }

/* Signature clipped-gradient headings -> dark gradient */
body.kk-silver .heading-gradient,
body.kk-silver .h-display,
body.kk-silver .h-label,
body.kk-silver .kk-stat-num {
  background: linear-gradient(180deg, #1d1d1f 8%, #52525a 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* keep the red highlight word inside a gradient title */
body.kk-silver .kk-title-red { color: #ba0013; -webkit-text-fill-color: currentColor; }

/* ---- Borders / dividers (skip hover & group-hover variants) ------- */
body.kk-silver [class*="border-white"]:not([class*="hover:border-white"]):not([class*="group-hover:border-white"]) {
  border-color: rgba(0,0,0,0.10) !important;
}
body.kk-silver [class*="bg-white/"]:not([class*="hover:bg-white"]):not([class*="group-hover:bg-white"]) {
  background-color: rgba(0,0,0,0.08) !important;
}

/* ---- Hover states that used white -> darken instead --------------- */
body.kk-silver [class*="hover:text-white"]:hover    { color: #1d1d1f !important; }
body.kk-silver [class*="hover:bg-white/"]:hover      { background-color: rgba(0,0,0,0.05) !important; }
body.kk-silver [class*="hover:border-white"]:hover   { border-color: rgba(0,0,0,0.22) !important; }

/* ---- Buttons ------------------------------------------------------ */
/* Primary: solid dark (Apple) */
body.kk-silver .btn-white {
  background: #1d1d1f !important;
  color: #ffffff !important;
  border-color: #1d1d1f !important;
}
body.kk-silver .btn-white:hover { background: #000000 !important; }
/* Glass -> light glass, dark label (used on the light page) */
body.kk-silver .btn-glass {
  background: rgba(0,0,0,0.045) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
}
/* the red-sweep hover still fills red, so the label turns white */
body.kk-silver .btn-glass:hover,
body.kk-silver .btn-glass:focus-visible { color: #ffffff !important; border-color: rgba(0,0,0,0.22) !important; }
/* Icon buttons */
body.kk-silver .btn-icon {
  background: rgba(0,0,0,0.045) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  color: #1d1d1f !important;
}
body.kk-silver .btn-icon:hover { background: #1d1d1f !important; color: #ffffff !important; }
/* .btn-red keeps the brand red as-is */

/* ---- Glass surfaces & floating nav -------------------------------- */
body.kk-silver .glass {
  background: rgba(255,255,255,0.70) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.kk-silver .nav-pill {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
body.kk-silver .nav-dropdown {
  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,0.12);
}

/* ---- Bespoke components ------------------------------------------- */
body.kk-silver .kk-stats {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
body.kk-silver .kk-stat { background: #ffffff !important; }
body.kk-silver .kk-spq-pagination .swiper-pagination-bullet { background: rgba(0,0,0,0.25); }
body.kk-silver .kk-globe3d .scene-tooltip {
  background: rgba(255,255,255,0.96);
  border-color: rgba(0,0,0,0.10);
  color: #1d1d1f;
}
/* finale starfield: faint grey speckle instead of white-on-dark */
body.kk-silver .starfield {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,0.10), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(0,0,0,0.08), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(0,0,0,0.06), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(0,0,0,0.08), transparent),
    radial-gradient(1px 1px at 10% 70%, rgba(0,0,0,0.05), transparent);
}
/* red cursor glow stays (subtle brand accent on light) */

/* ---- Neutralize hard-coded dark inline overlays (hero + testimonials)
   These <div style="…#0A0B11 / rgba(10,11,17,…)"> scrims darken photos for
   white text; on the light skin we clear them and re-scrim in light. ---- */
body.kk-silver [style*="0A0B11"],
body.kk-silver [style*="0a0b11"],
body.kk-silver [style*="10,11,17"],
body.kk-silver [style*="10, 11, 17"] { background: transparent !important; }

/* Hero: light legibility scrim so the (now dark) headline reads over the photo.
   Hero is the first <section> inside #main. */
body.kk-silver #main > section:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top right,
      rgba(245,245,247,0.96) 0%,
      rgba(245,245,247,0.72) 34%,
      rgba(245,245,247,0.30) 60%,
      rgba(245,245,247,0.10) 100%);
}

/* =====================================================================
   EXCEPTIONS — keep white where content genuinely sits on dark media
   (must come after the general rules; higher specificity wins).
   ===================================================================== */

/* Text/badges rendered OVER a photo inside image cards stay white.
   (roadmap, expertise: text lives in an .absolute overlay over the image;
   articles keep dark text because their text is in a static card body.) */
body.kk-silver .kk-hovercard .absolute [class~="text-white"],
body.kk-silver .kk-hovercard .absolute [class*="text-white/"],
body.kk-silver .kk-video-facade [class~="text-white"],
body.kk-silver .kk-video-facade [class*="text-white/"] { color: #ffffff !important; }

/* Glass CTA sitting on a dark photo (expertise cards) -> keep it light-on-dark */
body.kk-silver .kk-hovercard .btn-glass {
  background: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.30) !important;
}

/* Overlays on genuinely black surfaces (video/reel frames) keep white ink */
body.kk-silver [class*="bg-black"][class*="text-white"],
body.kk-silver [class*="bg-black"] [class*="text-white"] { color: #ffffff !important; }
body.kk-silver [class*="bg-black"][class*="border-white"],
body.kk-silver [class*="bg-black"] [class*="border-white"] { border-color: rgba(255,255,255,0.80) !important; }

/* Global-presence legend: the solid-white "home" dot needs a dark fill on light */
body.kk-silver #global .bg-white { background-color: #1d1d1f !important; }