@tailwind base;
@tailwind components;
@tailwind utilities;

/* Universal Box Sizing & Body Resets */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f8fafc;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

html.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #1e293b;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Smooth Dropdown Opening */
#dropdown-menu:not(.hidden) {
  animation: dropdownSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Professional FAQ Accordion Styling */
details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.1);
}


/* Light theme polish: the public brand site opens clean and white by default. */
html:not(.dark) body {
  background-color: #ffffff;
  color: #0f172a;
}

html.dark body {
  background-color: #0f172a;
  color: #f1f5f9;
}

html {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

/* Keep theme changes smooth without affecting layout or functionality. */
body,
header,
section,
article,
nav,
button,
a,
div {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: ease;
}

/* --------------------------------------------------------------------------
   De-Blaise professional visual system
   -------------------------------------------------------------------------- */
:root {
  --brand-blue: #2563eb;
  --light-bg: #f8fafc;
  --light-surface: #ffffff;
  --light-surface-soft: #f1f5f9;
  --light-border: #e2e8f0;
  --light-heading: #0f172a;
  --light-copy: #475569;
  --dark-bg: #070b14;
  --dark-surface: #0d1422;
  --dark-surface-soft: #111b2d;
  --dark-border: #1e293b;
}

html:not(.dark) body {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--light-heading);
}

html.dark body {
  background: linear-gradient(180deg, var(--dark-bg) 0%, #0b1220 100%);
  color: #f8fafc;
}

/* Light-mode normalization for legacy dark-first utility classes. */
html:not(.dark) main .text-white,
html:not(.dark) footer .text-white {
  color: var(--light-heading) !important;
}
html:not(.dark) main .bg-slate-950,
html:not(.dark) main .bg-slate-900 {
  background-color: var(--light-surface) !important;
}
html:not(.dark) main .bg-slate-950\/80,
html:not(.dark) main .bg-slate-50\/90 {
  background-color: rgba(255,255,255,.92) !important;
}
html:not(.dark) main .border-slate-800,
html:not(.dark) main .border-slate-700 {
  border-color: var(--light-border) !important;
}
html:not(.dark) main .text-slate-300 { color: #475569 !important; }
html:not(.dark) main .text-slate-400 { color: #64748b !important; }
html:not(.dark) main .text-slate-500 { color: #64748b !important; }

/* Preserve intentional white button labels in light mode. */
html:not(.dark) main a.bg-blue-600,
html:not(.dark) main a.bg-emerald-600,
html:not(.dark) main button.bg-blue-600,
html:not(.dark) main button.bg-emerald-600,
html:not(.dark) main .bg-blue-600.text-white,
html:not(.dark) main .bg-emerald-600.text-white {
  color: #fff !important;
}

/* Make section cards feel like a coherent product website. */
main > section {
  position: relative;
}
main > section > div[class*="rounded-3xl"] {
  box-shadow: 0 20px 55px -35px rgba(15, 23, 42, .35);
}
html.dark main > section > div[class*="rounded-3xl"] {
  box-shadow: 0 24px 70px -42px rgba(0, 0, 0, .85);
}

/* Fix light-mode FAQ/summary readability and hover treatment. */
html:not(.dark) details summary {
  color: var(--light-heading) !important;
  background: rgba(255,255,255,.75);
}
html:not(.dark) details summary:hover {
  background: #f8fafc !important;
}
html.dark details summary {
  color: #f8fafc !important;
}

/* Header and controls. */
header {
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 10px 30px -28px rgba(15,23,42,.35);
}
html.dark header {
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 12px 35px -28px rgba(0,0,0,.8);
}

/* More polished focus states for keyboard/mobile accessibility. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .35);
  outline-offset: 3px;
}

/* DashCred mini-product presentation. */
#jamb-cbt .dashcred-card {
  position: relative;
  overflow: hidden;
}
#jamb-cbt .dashcred-card::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -80px;
  top: -80px;
  border-radius: 999px;
  background: rgba(37, 99, 235, .10);
  filter: blur(2px);
  pointer-events: none;
}

/* Keep animations subtle and professional for visitors who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

html:not(.dark) header .text-white { color: #0f172a !important; }
html:not(.dark) #jamb-cbt > div {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #eef5ff 100%) !important;
}
html:not(.dark) #waec-neco-cbt > div {
  background: linear-gradient(135deg, #ffffff 0%, #f8fffb 55%, #effaf5 100%) !important;
}
html:not(.dark) #hosting > div {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}
html:not(.dark) #media-showcase > div {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}
html:not(.dark) #estimator > div {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}