/* ============================================================
   SavvyWolf.ai — shared stylesheet
   ============================================================
   Every page on this site (home, /about, /contact) links this
   file, so a colour or component change here lands everywhere
   at once. It used to be an inline <style> block inside
   index.html; it was pulled out when the site grew past one
   page. Nothing else changed in the move.

   The Tailwind theme it pairs with lives in theme.js.
   ============================================================ */

html, body { background: #f4f6fa; color: #0f2147; }
/* The <html> canvas needs its own dark value. Without this, the body box
   paints dark but the canvas behind it stays light, which shows up as a
   pale band during overscroll/rubber-banding on iOS and macOS. */
html.dark, html.dark body { background: #0a1530; color: #ffffff; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .font-display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
/* Headers inherit body color: navy in light, white in dark. */
html.dark h1, html.dark h2, html.dark h3, html.dark .font-display { color: #ffffff; }
html.light h1, html.light h2, html.light h3, html.light .font-display { color: #0f2147; }

/* Gradient-text: navy with a cyan accent in the middle. Subtle, premium, on-brand. */
.gradient-text {
  background: linear-gradient(120deg, #0f2147, #06d6e0, #1b3a6b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient 8s linear infinite;
}
/* In dark mode, the gradient endpoints flip to light so the text reads. */
html.dark .gradient-text {
  background: linear-gradient(120deg, #ffffff, #06d6e0, #e6ebf2);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Force white text on primary CTAs in BOTH modes regardless of any
   text-white utility applied to the element. Specificity 0,3,1 via
   the doubled class beats html.light .text-white (0,2,1) so this
   works on <div>, <button>, <a>, and any other tag we might use. */
.btn-primary,
.btn-primary *,
.btn-primary.text-white,
html.light .btn-primary.text-white,
html.light .btn-primary,
html.light .btn-primary *,
html.dark .btn-primary,
html.dark .btn-primary * { color: #ffffff !important; }

/* Navbar brand: in dark mode, force "Wolf" and ".ai" to cloud-white so the whole
   SavvyWolf.ai mark stays readable on the deep navy bar. */
html.dark nav .gradient-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #f4f6fa;
  -webkit-text-fill-color: #f4f6fa;
}
html.dark nav .text-gray-400 { color: #f4f6fa !important; }

/* Glass: light cards on light bg, subtle on dark bg */
.glass {
  background: #ffffff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid #dde3ec;
  box-shadow: 0 1px 2px rgba(15, 33, 71, 0.04);
}
html.dark .glass {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Glow border: navy core, cyan-tinted gradient frame (the 20% accent moment) */
.glow-border {
  position: relative;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(135deg, #1b3a6b, #06d6e0) border-box;
  border: 1px solid transparent;
}
html.dark .glow-border {
  background: linear-gradient(#142042, #142042) padding-box,
              linear-gradient(135deg, #1b3a6b, #06d6e0) border-box;
}

/* Grid background: very subtle navy lines */
.grid-bg {
  background-image:
    linear-gradient(rgba(27,58,107,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,58,107,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
}
html.dark .grid-bg {
  background-image:
    linear-gradient(rgba(6,214,224,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* Ambient blobs: nearly invisible in light, soft in dark */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.18;
  pointer-events: none;
}
html.dark .blob { opacity: 0.32; }

/* ===== Light mode (default) ===== */
html.light { background: #f4f6fa; color: #0f2147; }
html.light body { background: #f4f6fa; color: #0f2147; }
html.light .bg-brand-ink { background-color: #f4f6fa !important; }
html.light .bg-brand-panel { background-color: #ffffff !important; }
html.light .text-white { color: #0f2147 !important; }
html.light .text-gray-200 { color: #1b3a6b !important; }
html.light .text-gray-300 { color: #3b4a66 !important; }
html.light .text-gray-400 { color: #5b6a82 !important; }
html.light .text-gray-500 { color: #6b7c94 !important; }
/* Accent label color: in light mode the "text-brand-cyan" labels read as deep navy for trust */
html.light .text-brand-cyan { color: #1b3a6b !important; }
html.light .border-white\/10 { border-color: #dde3ec !important; }
html.light .border-white\/5  { border-color: #e6ebf2 !important; }
html.light .border-t.border-white\/10 { border-color: #dde3ec !important; }
html.light .border-t.border-white\/5  { border-color: #e6ebf2 !important; }
html.light .bg-white\/5  { background-color: #f4f6fa !important; }
html.light .bg-white\/10 { background-color: #e6ebf2 !important; }
html.light .hover\:bg-white\/5:hover  { background-color: #eef1f6 !important; }
html.light .hover\:bg-white\/10:hover { background-color: #e6ebf2 !important; }
html.light .hover\:bg-white\/\[0\.07\]:hover { background-color: #f7f9fc !important; }
html.light .hover\:bg-white\/\[0\.03\]:hover { background-color: #f7f9fc !important; }

/* Soften the chat assistant bubble in light mode (was bg-white/5 -> dark text needs contrast) */
html.light .bg-white\/5.chat-msg, html.light .bg-white\/5 { color: #1b3a6b; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Custom scrollbar — navy track, navy-to-cyan thumb */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #e6ebf2; }
::-webkit-scrollbar-thumb { background: linear-gradient(#1b3a6b, #06d6e0); border-radius: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0a1530; }

/* Primary CTA — solid navy with a cyan ring as the 20% neon moment */
.btn-primary {
  background: linear-gradient(135deg, #1b3a6b 0%, #0f2147 100%);
  color: #ffffff;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px -8px rgba(15, 33, 71, 0.45);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(6,214,224,0.35), 0 10px 28px -10px rgba(6,214,224,0.55);
}
.btn-primary:focus-visible {
  outline: 2px solid #06d6e0;
  outline-offset: 2px;
}

/* Focus rings: navy in light, cyan in dark */
html.light .focus\:border-brand-cyan:focus { border-color: #1b3a6b !important; }
html.light .focus\:ring-brand-cyan\/30:focus { --tw-ring-color: rgba(27,58,107,0.25) !important; }

.chat-bubble-enter {
  animation: fadeUp 0.4s ease-out;
}
.chat-msg a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
/* Floating chat bubble: soft cyan halo in both modes, slightly stronger on hover. */
.chat-bubble-btn {
  box-shadow: 0 0 0 4px rgba(6, 214, 224, 0.22),
              0 12px 28px rgba(6, 214, 224, 0.30);
}
.chat-bubble-btn:hover {
  box-shadow: 0 0 0 5px rgba(6, 214, 224, 0.35),
              0 16px 36px rgba(6, 214, 224, 0.45);
}

/* Bot bubble links: navy in light, cyan in dark */
.bg-white\/5.chat-msg a { color: #1b3a6b; }
.bg-white\/5.chat-msg a:hover { color: #06d6e0; }
html.dark .bg-white\/5.chat-msg a { color: #06d6e0; }
html.dark .bg-white\/5.chat-msg a:hover { color: #ffffff; }
/* User bubble (navy gradient): white links */
.btn-primary.chat-msg a { color: #ffffff; text-decoration-thickness: 2px; }

.faq-item {
  border: 1px solid #dde3ec;
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 33, 71, 0.04);
}
html.dark .faq-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  color: #0f2147;
  transition: background 0.15s ease;
}
html.dark .faq-item > summary { color: #ffffff; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: #f4f6fa; }
html.dark .faq-item > summary:hover { background: rgba(255, 255, 255, 0.03); }
.faq-item > summary::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3a6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 9l-7 7-7-7'/></svg>");
  transition: transform 0.25s ease;
}
html.dark .faq-item > summary::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 9l-7 7-7-7'/></svg>");
}
.faq-item[open] > summary::after { transform: rotate(180deg); }
.faq-item > .faq-body {
  padding: 0 1.5rem 1.25rem;
  color: #3b4a66;
  line-height: 1.65;
}
html.dark .faq-item > .faq-body { color: rgb(209, 213, 219); }

/* ===== Demo video =====
   Default is 16:9 (landscape). If the demo is a vertical/Short style
   video, add the class "vertical" to the .video-frame div. */
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: #0a1633;
}
.video-frame.vertical {
  aspect-ratio: 9 / 16;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Trial CTA: same navy body as btn-primary, but ringed in cyan so the
   single highest-intent button on the page stands apart from the
   secondary "book a call" actions. */
.btn-trial {
  box-shadow: 0 0 0 2px rgba(6, 214, 224, 0.45), 0 10px 28px -10px rgba(6, 214, 224, 0.5);
}
.btn-trial:hover {
  box-shadow: 0 0 0 3px rgba(6, 214, 224, 0.65), 0 14px 34px -10px rgba(6, 214, 224, 0.65);
}

@media (max-width: 640px) {
  .grid-bg { background-size: 40px 40px; }
}
