/* GetComply — Blue/Teal Brand Dark Mode */

/* ============================================================
   STEP 1: CSS CUSTOM PROPERTIES (design tokens)
   ============================================================ */

:root {
  --brand-blue:       #3B82F6;
  --brand-blue-hover: #2563EB;
  --brand-teal:       #14B8A6;
  --brand-cyan:       #22D3EE;

  /* Light mode neutrals */
  --bg:           #F8FAFC;
  --surface:      #FFFFFF;
  --surface-2:    #F1F5F9;
  --border:       #E2E8F0;
  --text:         #0F172A;
  --text-muted:   #475569;
  --text-faint:   #64748B;
}

html.dark {
  color-scheme: dark;

  /* Dark mode neutrals */
  --bg:           #0B1220;
  --bg-elev-1:    #0F172A;
  --surface:      #111827;
  --surface-2:    #1F2937;
  --border:       #334155;
  --text:         #E5E7EB;
  --text-muted:   #94A3B8;
  --text-faint:   #64748B;
}

/* ============================================================
   STEP 2: LIGHT MODE — Override purple primary with blue
   ============================================================ */

.bg-primary                      { background-color: #3B82F6 !important; }
.hover\:bg-primary\/90:hover     { background-color: #2563EB !important; }
.text-primary                    { color: #3B82F6 !important; }
.border-primary                  { border-color: #3B82F6 !important; }
.bg-primary\/10                  { background-color: rgba(59,130,246,0.1) !important; }
.bg-primary\/5                   { background-color: rgba(59,130,246,0.05) !important; }
.border-primary\/30              { border-color: rgba(59,130,246,0.3) !important; }
.from-primary\/5 {
  --tw-gradient-from: rgba(59,130,246,0.05) var(--tw-gradient-from-position) !important;
  --tw-gradient-to:   rgba(59,130,246,0)    var(--tw-gradient-to-position)   !important;
}
.bg-primary.animate-pulse,
.animate-pulse.bg-primary        { background-color: #3B82F6 !important; }
.text-primary-foreground         { color: #ffffff !important; }


/* ============================================================
   STEP 3: DARK MODE — Background & body
   ============================================================ */

html.dark body {
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(59,130,246,0.10), transparent 60%),
    radial-gradient(700px 400px at 85% 20%, rgba(20,184,166,0.08), transparent 55%),
    linear-gradient(180deg, #0B1220 0%, #0A1020 100%) !important;
  color: var(--text-muted) !important;
}

/* Reset the wrapper div so body gradient shows */
html.dark .min-h-screen.bg-background {
  background: transparent !important;
}

/* Background classes */
html.dark .bg-background,
html.dark .supports-\[backdrop-filter\]\:bg-background\/60 {
  background-color: #0B1220 !important;
}
html.dark .bg-background\/80 {
  background-color: rgba(11,18,32,0.85) !important;
}
html.dark header.bg-background\/80 {
  background-color: rgba(11,18,32,0.92) !important;
}

/* Cards and secondary surfaces */
html.dark .bg-card {
  background-color: rgba(17,24,39,0.70) !important;
}
html.dark .bg-secondary,
html.dark .hover\:bg-secondary:hover {
  background-color: rgb(31 41 55) !important;
}
html.dark .bg-secondary\/80  { background-color: rgba(31,41,55,0.80) !important; }
html.dark .bg-secondary\/60  { background-color: rgba(31,41,55,0.60) !important; }
html.dark .bg-secondary\/40  { background-color: rgba(31,41,55,0.40) !important; }
html.dark .bg-secondary\/30  { background-color: rgba(31,41,55,0.60) !important; }
html.dark .bg-secondary\/20  { background-color: rgba(31,41,55,0.50) !important; }
html.dark .bg-secondary\/10  { background-color: rgba(31,41,55,0.40) !important; }


/* ============================================================
   STEP 4: DARK MODE — Typography comfort
   ============================================================ */

html.dark .text-foreground {
  color: var(--text) !important;
}
html.dark .text-muted-foreground {
  color: var(--text-muted) !important;
}
html.dark .text-card-foreground {
  color: var(--text) !important;
}
html.dark .text-background {
  color: #0B1220 !important;
}
html.dark .text-primary {
  color: rgb(96 165 250) !important;
}

/* Better paragraph readability */
html.dark p {
  line-height: 1.7;
  font-weight: 400;
}
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4 {
  color: var(--text) !important;
}

/* Foreground (used as dark-on-light button bg) */
html.dark .bg-foreground           { background-color: rgb(241 245 249) !important; }
html.dark .hover\:bg-foreground\/90:hover { background-color: rgb(226 232 240) !important; }


/* ============================================================
   STEP 5: DARK MODE — Nav CTA premium pill button
   ============================================================ */

/* Calm nav links */
html.dark nav a.text-foreground,
html.dark nav a.text-muted-foreground {
  color: var(--text-muted) !important;
}
html.dark nav a:not(.nav-cta):hover {
  color: var(--text) !important;
}

/* Header SVG logo — transparent, scales to 24px tall */
.logo-header {
  height: 24px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* Legacy nav-logo kept for backwards compatibility */
.nav-logo {
  height: 36px;
  width: auto;
  display: block;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Premium nav CTA — pill + gradient + glow */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 10px 18px;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(59,130,246,0.95), rgba(20,184,166,0.90));
  border: 1px solid rgba(34,211,238,0.35);
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(59,130,246,0.20);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(59,130,246,0.28);
  filter: brightness(1.05);
}
.nav-cta:focus-visible {
  outline: 2px solid rgba(34,211,238,0.65);
  outline-offset: 2px;
}

/* Dark mode keeps same gradient (already looks great on dark) */
html.dark .nav-cta {
  background: linear-gradient(135deg, rgba(59,130,246,0.95), rgba(20,184,166,0.90)) !important;
  border-color: rgba(34,211,238,0.40) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(59,130,246,0.25) !important;
}
html.dark .nav-cta:hover {
  box-shadow: 0 14px 40px rgba(59,130,246,0.35) !important;
  filter: brightness(1.06) !important;
}


/* ============================================================
   STEP 6: DARK MODE — Trust band + chips
   ============================================================ */

/* Trust band: softer, no heavy flat gray */
html.dark section.bg-secondary\/20 {
  background-color: rgba(15,23,42,0.60) !important;
  border-top: 1px solid rgba(51,65,85,0.50);
  border-bottom: 1px solid rgba(51,65,85,0.50);
}
html.dark section.bg-secondary\/30 {
  background-color: rgba(15,23,42,0.80) !important;
}

/* Chips (cloud platform tags etc.) */
html.dark .px-4.py-2.rounded-full.border.border-border.bg-card {
  background: rgba(148,163,184,0.06) !important;
  border-color: rgba(148,163,184,0.14) !important;
  color: var(--text-muted) !important;
  transition: border-color .15s ease;
}
html.dark .px-4.py-2.rounded-full.border.border-border.bg-card:hover {
  border-color: rgba(34,211,238,0.35) !important;
}


/* ============================================================
   STEP 7: DARK MODE — Card polish
   ============================================================ */

html.dark .rounded-xl.border.border-border.bg-card {
  background: rgba(17,24,39,0.70) !important;
  border: 1px solid rgba(148,163,184,0.12) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
html.dark .rounded-xl.border.border-border.bg-card:hover {
  border-color: rgba(59,130,246,0.25) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(59,130,246,0.08);
}


/* ============================================================
   BORDERS
   ============================================================ */

html.dark .border-border       { border-color: var(--border) !important; }
html.dark .border-t.border-border,
html.dark .border-b.border-border { border-color: var(--border) !important; }
html.dark .border-foreground   { border-color: rgb(241 245 249) !important; }


/* ============================================================
   PRIMARY ACCENT — dark mode
   ============================================================ */

html.dark .bg-primary               { background-color: rgb(59 130 246) !important; }
html.dark .hover\:bg-primary\/90:hover { background-color: rgb(37 99 235) !important; }
html.dark .border-primary           { border-color: rgb(59 130 246) !important; }
html.dark .border-primary\/30       { border-color: rgba(59,130,246,0.3) !important; }
html.dark .bg-primary\/10           { background-color: rgba(59,130,246,0.15) !important; }
html.dark .bg-primary\/5            { background-color: rgba(59,130,246,0.08) !important; }
html.dark .text-primary-foreground  { color: #ffffff !important; }


/* ============================================================
   GRADIENT SECTIONS
   ============================================================ */

html.dark .from-secondary\/50 {
  --tw-gradient-from: rgba(31,41,55,0.5) var(--tw-gradient-from-position) !important;
  --tw-gradient-to:   rgba(31,41,55,0)   var(--tw-gradient-to-position) !important;
}
html.dark .bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
}
html.dark .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
}
html.dark .from-primary\/5 {
  --tw-gradient-from: rgba(59,130,246,0.08) var(--tw-gradient-from-position) !important;
}

/* ── THE CORE FIX ──────────────────────────────────────────────
 * Tailwind's from-background / to-background / via-background
 * classes hardcode rgb(255 255 255) into the gradient stop CSS
 * variables at the utility level. Our bg-background color override
 * does NOT propagate into those variables.
 *
 * Result without this fix: every bg-gradient-to-b that uses
 * from-background or to-background fades to WHITE in dark mode —
 * the most visible case being the hero vignette overlay div.
 *
 * Fix: redirect the gradient-stop variables to the dark bg token.
 * ─────────────────────────────────────────────────────────────── */
html.dark .from-background {
  --tw-gradient-from: #0B1220 var(--tw-gradient-from-position) !important;
  --tw-gradient-to:   rgba(11,18,32,0) var(--tw-gradient-to-position) !important;
}
html.dark .to-background {
  --tw-gradient-to: #0B1220 var(--tw-gradient-to-position) !important;
}
html.dark .via-background {
  --tw-gradient-via: #0B1220 var(--tw-gradient-via-position) !important;
}

/* Same fix for any section/div using the final-CTA gradient:
 * "via-background to-background" in the CTA section */
html.dark .from-primary\/5.bg-gradient-to-br,
html.dark .via-background.bg-gradient-to-br,
html.dark .to-background.bg-gradient-to-br {
  background-image: linear-gradient(
    to bottom right,
    rgba(59,130,246,0.06),
    #0B1220 50%,
    #0B1220 100%
  ) !important;
}


/* ============================================================
   INPUTS
   ============================================================ */

html.dark input,
html.dark textarea,
html.dark select {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--text-faint) !important;
}
html.dark input:hover,
html.dark textarea:hover { border-color: rgb(75 85 99) !important; }
html.dark input:focus,
html.dark textarea:focus {
  border-color: var(--brand-blue) !important;
  outline: none;
}


/* ============================================================
   DARK MODE TOGGLE BUTTON
   ============================================================ */

.dm-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgb(220 228 236);
  background: transparent;
  cursor: pointer;
  color: rgb(71 85 105);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.dm-toggle:hover {
  background: rgb(241 245 249);
  color: rgb(15 23 42);
}
html.dark .dm-toggle {
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
  background: transparent !important;
}
html.dark .dm-toggle:hover {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

/* Icon visibility */
.dm-toggle .icon-sun  { display: none; }
.dm-toggle .icon-moon { display: block; }
html.dark .dm-toggle .icon-sun  { display: block; }
html.dark .dm-toggle .icon-moon { display: none; }


/* ============================================================
   SMOOTH TRANSITIONS
   ============================================================ */

body, header, section, footer, div, a, button, input, textarea, span, p,
h1, h2, h3, h4, h5, h6 {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}


/* ============================================================
   MISC / PAGE-SPECIFIC
   ============================================================ */

/* Backdrop blur in dark */
html.dark .backdrop-blur { backdrop-filter: blur(12px); }

/* FAQ accordion */
html.dark .faq-item.open .faq-answer > div {
  background-color: rgba(17,24,39,0.6) !important;
  border-color: var(--border) !important;
}
html.dark .faq-item button:hover {
  background-color: rgba(31,41,55,0.8) !important;
}

/* Radial gradient override */
html.dark .bg-\[radial-gradient\(circle_at_30\%_20\%\,rgba\(99\,91\,255\,0\.05\)\,transparent_50\%\)\] {
  background: radial-gradient(circle at 30% 20%, rgba(59,130,246,0.08), transparent 50%) !important;
}
html.dark .bg-\[radial-gradient\(circle_at_30\%_20\%\,rgba\(59\,130\,246\,0\.05\)\,transparent_50\%\)\] {
  background: radial-gradient(circle at 30% 20%, rgba(59,130,246,0.08), transparent 50%) !important;
}

/* Step number circles (process page) */
html.dark .bg-secondary.border.border-border {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
}

/* Animate pulse (hero badge) */
html.dark .bg-primary.animate-pulse,
html.dark .animate-pulse.bg-primary {
  background-color: var(--brand-blue) !important;
}

/* ============================================================
   HERO WATERMARK — circuit logo background graphic
   ============================================================ */

/*
 * Positions the logo SVG behind hero text.
 * The SVG viewBox is 841×595 (A4 landscape): the circular circuit
 * graphic sits in the left ~45% of the canvas, so we nudge it left
 * to keep the circle centered in the right half of the hero section.
 *
 * Layering: section has `position:relative`.
 *           hero content has `relative z-10` (above the watermark).
 *           watermark uses z-index: 0 (below content, above -z-10 blobs).
 */

/* Base (light mode): very faint */
.hero-watermark {
  position: absolute;
  right: -6vw;
  top: 50%;
  transform: translateY(-48%);
  width: clamp(380px, 52vw, 860px);
  pointer-events: none;
  user-select: none;
  opacity: 0.05;
  z-index: 0;
}

.hero-watermark img {
  width: 100%;
  height: auto;
  display: block;
  /* Pull image left so the circular logo (left side of SVG canvas)
     is centered in the right half of the hero, not the text portion */
  transform: translateX(-12%) translateY(-2%);
}

/* Dark mode: slightly more visible */
html.dark .hero-watermark {
  right: -6vw;
  width: clamp(380px, 52vw, 860px);
  opacity: 0.08;
}

/* On mobile: shrink, push right, reduce opacity so text stays readable */
@media (max-width: 768px) {
  .hero-watermark {
    right: -30vw;
    top: 55%;
    width: 90vw;
    opacity: 0.04;
  }
  html.dark .hero-watermark {
    opacity: 0.05;
  }
}

/* Very small screens: hide entirely */
@media (max-width: 480px) {
  .hero-watermark {
    display: none;
  }
}

/* ============================================================
   BRAND UTILITY CLASSES
   ============================================================ */

/* Step number circles — blue→teal brand gradient */
.step-circle {
  background: linear-gradient(135deg, #3B82F6, #14B8A6);
}

/* Blockquote / pull-quote left accent bar */
.brand-accent-left {
  border-left: 2px solid #3B82F6;
}


/* ============================================================
   HERO SECTION — enhanced radial glows for dark mode
   ============================================================ */

/*
 * Hero section glow + dark vignette overlay.
 *
 * The hero already has Tailwind blob divs (opacity-60 / opacity-40)
 * and a "from-background via-transparent to-background" vignette div.
 * The from/to-background fix above prevents those from going white, but
 * we also want a richer multi-layer glow specific to the hero.
 *
 * We target the hero section precisely: it is the only <section> on the
 * page that has both `relative` and `overflow-hidden` in its class list.
 */
html.dark section.relative.overflow-hidden::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(59,130,246,0.12), transparent 60%),
    radial-gradient(800px 500px at 80% 15%, rgba(20,184,166,0.10), transparent 58%),
    linear-gradient(180deg,
      rgba(11,18,32,0.00)  0%,
      rgba(11,18,32,0.85) 70%,
      rgba(11,18,32,1.00) 100%
    );
  pointer-events: none;
  z-index: 0;
}