/* JamiiSafe — Shared Theme & i18n layer
   White (light) keeps existing tokens. Dark applies an attractive deep dark-blue palette
   that overrides the variables used across all stylesheets in this site. */

:root { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* ---------- DARK THEME (deep dark-blue) ---------- */
html[data-theme="dark"] {
  /* base */
  --background:#0B1A2F;
  --surface:#112742;
  --surface-alt:#16314F;
  --surface-warm:#16314F;
  --muted:#13294A;
  --muted-fg:#A8B6CC;

  /* text */
  --text:#E8EEF7;
  --dall:#F5A623;
  --text-secondary:#C0CCDF;
  --text-light:#8FA0B8;
  --foreground:#E8EEF7;

  /* borders + inputs */
  --border:#1F3A5F;
  --border-light:#1A3354;
  --input:#1F3A5F;
  --im:#1f3a5f9b;

  /* brand — keep green identity but brighter for AA contrast on dark blue */
  --primary:#074D24;
  --primary-light:#6EE7B7;
  --primary-dark:#10B981;
  --primary-glow:rgba(38, 142, 202, 0.349);

  /* accent gold a bit warmer */
  --accent:#F5B043;
  --accent-light:#F5A623;
  --accent-dark:#D4880F;

  /* status */
  --danger:#F87171; --danger-light:rgba(248,113,113,0.14);
  --success:#34D399; --success-light:rgba(52,211,153,0.14); --success-bg:rgba(52,211,153,0.14);
  --warning:#FBBF24; --warning-light:rgba(251,191,36,0.14); --warning-bg:rgba(251,191,36,0.14);
  --destructive:#F87171; --destructive-bg:rgba(248,113,113,0.14);
  --accent-bg:rgba(245,176,67,0.14);

  /* shadows + gradients */
  --shadow-sm:0 1px 4px rgba(0,0,0,0.45);
  --shadow-md:0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.55);
  --shadow-soft:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --shadow-glow:0 12px 32px -8px rgba(52,211,153,.45);
  --gradient-primary:linear-gradient(135deg,#0E6B40,#10B981);
  --gradient-hero:linear-gradient(160deg,#0B1A2F 0%,#13345C 60%,#0E6B40 100%);
}

/* ---------- universal smooth transitions ---------- */
html, body, .navbar, .card, .stat-card, .footer, .btn, .modal, .sheet,
section, header, footer, aside, .surface, .panel {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ---------- DARK overrides for hard-coded whites/lights ---------- */
html[data-theme="dark"] body { background:var(--background); color:var(--text); }
html[data-theme="dark"] .navbar,
html[data-theme="dark"] header.navbar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .appbar,
html[data-theme="dark"] .pageheader,
html[data-theme="dark"] .tabbar,
html[data-theme="dark"] nav {
  background:rgba(11,26,47,0.92) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
html[data-theme="dark"] .navbar a,
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] nav a { color:var(--text); }
html[data-theme="dark"] .dall { color:var(--dall); }
html[data-theme="dark"] .navbar a:hover,
html[data-theme="dark"] nav a:hover { color:var(--primary-light); }

/* logo text wordmark should follow theme color */
html[data-theme="dark"] .logo, html[data-theme="dark"] .brand,
html[data-theme="dark"] .logo-text, html[data-theme="dark"] .nav-logo,
html[data-theme="dark"] .navbar-brand { color:var(--text) !important; }
/* logo image keeps original colors; ensure it stays visible on dark */
html[data-theme="dark"] img.logo, html[data-theme="dark"] .logo img,
html[data-theme="dark"] .brand img {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* cards, surfaces, sections */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .surface,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .benefit-card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .dropdown,
html[data-theme="dark"] .popover {
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* form controls */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .input {
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--input) !important;
}
html[data-theme="dark"] ::placeholder { color:var(--text-light); }
html[data-theme="dark"] label { color:var(--text-secondary); }

/* footer / sections with light fills */
html[data-theme="dark"] .footer,
html[data-theme="dark"] footer,
html[data-theme="dark"] .section-alt,
html[data-theme="dark"] .section.light,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
  background:var(--surface) !important; color:var(--text) !important;
}

/* hero / background image overlay for readability */
html[data-theme="dark"] .hero-overlay,
html[data-theme="dark"] .image-overlay {
  background:linear-gradient(180deg,rgba(11,26,47,.55),rgba(11,26,47,.85)) !important;
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .hero-with-image { color:#fff !important; }
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero h2,
html[data-theme="dark"] .hero p { color:#fff !important; text-shadow:0 2px 12px rgba(0,0,0,.45); }

/* text generic */
html[data-theme="dark"] p, html[data-theme="dark"] li,
html[data-theme="dark"] span, html[data-theme="dark"] dd, html[data-theme="dark"] dt { color:inherit; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color:var(--text) !important; }
html[data-theme="dark"] .muted, html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary, html[data-theme="dark"] small { color:var(--text-secondary) !important; }

/* tables */
html[data-theme="dark"] table { color:var(--text); }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-color:var(--border) !important; }
html[data-theme="dark"] thead th { background:var(--surface-alt) !important; }
html[data-theme="dark"] tbody tr:hover { background:rgba(255,255,255,0.03); }

/* buttons keep brand on primary, lighten on outline */
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .benefit-box,
html[data-theme="dark"] .btn-outline-white {
  background:transparent !important; color:var(--text) !important; border-color:var(--border) !important;
}
html[data-theme="dark"] .btn-outline:hover { background:var(--surface-alt) !important; }

/* terms / modals */
html[data-theme="dark"] .jst-modal { background:var(--surface) !important; color:var(--text) !important; }
html[data-theme="dark"] .jst-body { color:var(--text) !important; }
html[data-theme="dark"] .jst-body h4 { color:var(--primary-light) !important; }
html[data-theme="dark"] .jst-foot { background:var(--surface-alt) !important; border-color:var(--border) !important; }
html[data-theme="dark"] .jst-foot span { color:var(--text-secondary) !important; }

/* ---------- Floating Preferences (Theme + Language) ----------
   Pinned to bottom-LEFT so it never overlaps the WhatsApp button (bottom-right).
   On wide screens the panel is always visible; on small screens it collapses
   into a single round icon — tap it to expand and choose. */
.js-pref-fab{
  position:fixed; right:16px; bottom:80px; z-index:99990;
  display:flex; gap:8px; align-items:center;
  background:var(--surface,#fff);
  border:1px solid var(--border,#e5e7eb);
  border-radius:999px;
  padding:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  font-family:inherit;
  max-width:calc(60vw - 32px);
}
html[data-theme="dark"] .js-pref-fab{ background:var(--surface) !important; border-color:var(--border) !important; }
.js-pref-fab button{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; min-width:38px; padding:0 12px;
  border-radius:999px; border:0; cursor:pointer;
  background:transparent; color:var(--text,#1f2937);
  font-size:13px; font-weight:700; line-height:1;
  -webkit-tap-highlight-color:transparent;
}
html[data-theme="dark"] .js-pref-fab button{ color:var(--text) !important; }
.js-pref-fab button:hover{ background:var(--muted,#f1f5f4); }
html[data-theme="dark"] .js-pref-fab button:hover{ background:var(--surface-alt) !important; }
.js-pref-fab .js-lang.active{ background:var(--primary,#0E6B35); color:#fff; }
.js-pref-fab svg{ width:18px; height:18px; }

.js-pref-fab .js-pref-panel{
  display:flex; gap:6px; align-items:center;
  overflow:hidden; transition:max-width .25s ease, opacity .2s ease, margin .2s ease;
}
.js-pref-fab .js-pref-toggle{ display:none; }

/* Mobile: collapse to a single icon, expand on tap */
@media (max-width:720px){
  .js-pref-fab{ padding:5px; }
  .js-pref-fab .js-pref-toggle{ display:inline-flex; }
  .js-pref-fab .js-pref-panel{
    max-width:0; opacity:0; margin-left:0; pointer-events:none;
  }
  .js-pref-fab.open .js-pref-panel{
    max-width:240px; opacity:1; margin-left:4px; pointer-events:auto;
  }
  .js-pref-fab button{ height:40px; min-width:40px; padding:0 12px; font-size:13px; }
}

/* Make sure WhatsApp floating button stays on the right and on top */
.whatsapp-float{ left:auto !important; right:20px !important; z-index:99991 !important; }
@media (max-width:720px){
  .whatsapp-float{ right:16px !important; bottom:16px !important; }
}

/* Responsive: nav mobile collapse helper */
@media (max-width:720px){
  .navbar .nav-links, nav .nav-links { gap:8px !important; }
  .navbar .nav-links a, nav .nav-links a { font-size:14px !important; padding:6px 10px !important; }
}

/* Smooth image fade-in when lazy-loaded */
img[loading="lazy"]{ opacity:0; transition:opacity .35s ease; }
img[loading="lazy"].is-loaded, img[loading="lazy"].loaded { opacity:1; }
img.skeleton{ background:linear-gradient(90deg,var(--muted,#eee) 0%,var(--surface-alt,#f5f5f5) 50%,var(--muted,#eee) 100%); background-size:200% 100%; animation:jsShimmer 1.2s infinite; }
@keyframes jsShimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Fix: prevent iOS Safari auto-zoom when focusing form inputs */
input, select, textarea, button {
  font-size: 16px !important;
  touch-action: manipulation;
}
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ========== DARK theme overrides — Magonjwa (FAQ) page ========== */
html[data-theme="dark"] .search-section,
html[data-theme="dark"] .results-section,
html[data-theme="dark"] .page-header { background: var(--background) !important; color: var(--text) !important; }
html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .page-header .badge { color: var(--text) !important; }
html[data-theme="dark"] .page-header .badge { background: var(--surface-alt) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .search-box { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] .search-box input { background: transparent !important; color: var(--text) !important; }
html[data-theme="dark"] .search-box .search-icon,
html[data-theme="dark"] .search-box .clear-btn { color: var(--text-secondary) !important; }
html[data-theme="dark"] .filter-label { color: var(--text-secondary) !important; }
html[data-theme="dark"] .chip,
html[data-theme="dark"] .filter-chips .chip {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}
html[data-theme="dark"] .chip.active,
html[data-theme="dark"] .filter-chips .chip.active {
  background: var(--primary-dark) !important; color: #fff !important; border-color: var(--primary-dark) !important;
}
html[data-theme="dark"] .results-meta { color: var(--text-secondary) !important; }
html[data-theme="dark"] .disease-card,
html[data-theme="dark"] .disease-header,
html[data-theme="dark"] .disease-body,
html[data-theme="dark"] .disease-list > * {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}
html[data-theme="dark"] .disease-header:hover { background: var(--surface-alt) !important; }
html[data-theme="dark"] .disease-name,
html[data-theme="dark"] .disease-body h4,
html[data-theme="dark"] .body-section h4 { color: var(--text) !important; }
html[data-theme="dark"] .disease-body p,
html[data-theme="dark"] .disease-body li,
html[data-theme="dark"] .body-section p,
html[data-theme="dark"] .body-section li { color: var(--text-secondary) !important; }
html[data-theme="dark"] .disease-icon { background: var(--surface-alt) !important; color: var(--primary-light) !important; }
html[data-theme="dark"] .tag { background: var(--surface-alt) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .tag.danger { background: rgba(248,113,113,.18) !important; color: #FCA5A5 !important; }
html[data-theme="dark"] .tag.warn,
html[data-theme="dark"] .tag.warning { background: rgba(251,191,36,.18) !important; color: #FCD34D !important; }
html[data-theme="dark"] .tag.info { background: rgba(96,165,250,.18) !important; color: #93C5FD !important; }
html[data-theme="dark"] .tag.success { background: rgba(52,211,153,.18) !important; color: #6EE7B7 !important; }
html[data-theme="dark"] .stage,
html[data-theme="dark"] .stage-text,
html[data-theme="dark"] .stages > * { background: var(--surface-alt) !important; color: var(--text) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .stage-num { background: var(--primary-dark) !important; color: #fff !important; }
html[data-theme="dark"] .support-box { background: var(--surface-alt) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] .support-box h4 { color: var(--primary-light) !important; }
html[data-theme="dark"] .support-item { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] .support-item .label { color: var(--text-secondary) !important; }
html[data-theme="dark"] .support-item .value { color: var(--text) !important; }
html[data-theme="dark"] .support-item.no { opacity: .55; }
html[data-theme="dark"] .support-note { background: var(--surface) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .empty-state { color: var(--text-secondary) !important; }
html[data-theme="dark"] .empty-state h3 { color: var(--text) !important; }
html[data-theme="dark"] mark { background: rgba(245,176,67,.28) !important; color: var(--accent) !important; }
html[data-theme="dark"] .cta-section,
html[data-theme="dark"] .cta-with-image { background: var(--surface-alt) !important; color: var(--text) !important; }
html[data-theme="dark"] .cta-overlay { background: linear-gradient(180deg, rgba(11,26,47,.55), rgba(11,26,47,.85)) !important; }

/* ========== DARK theme overrides — Mlezi Mkuu / Admin pages ========== */
html[data-theme="dark"] .sa-card,
html[data-theme="dark"] .shell,
html[data-theme="dark"] .main,
html[data-theme="dark"] .tabs,
html[data-theme="dark"] #tabs,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .list-item {
  background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important;
}
html[data-theme="dark"] .sa-table th,
html[data-theme="dark"] .sa-table td { border-color: var(--border) !important; color: var(--text) !important; }
html[data-theme="dark"] .sa-table thead th { background: var(--surface-alt) !important; }
html[data-theme="dark"] .sa-table code,
html[data-theme="dark"] code { background: var(--surface-alt) !important; color: var(--accent) !important; }
html[data-theme="dark"] body { background: var(--background) !important; }
html[data-theme="dark"] .center-screen { background: var(--background) !important; color: var(--text) !important; }
html[data-theme="dark"] .field-row label,
html[data-theme="dark"] .field label,
html[data-theme="dark"] label { color: var(--text-secondary) !important; }
html[data-theme="dark"] .muted, html[data-theme="dark"] .text-xs.muted { color: var(--text-light) !important; }
html[data-theme="dark"] .row, html[data-theme="dark"] .between { color: var(--text) !important; }

/* Mobile nav: ensure the menu opens cleanly + tap targets large enough */
@media (max-width: 768px){
  html[data-theme="dark"] .nav-links { background: var(--surface) !important; border-color: var(--border) !important; }
  .navbar .hamburger { display: inline-flex !important; }
  .nav-links { z-index: 99980; }
}