/* RabiaTech site theme — shared light mode + mobile hardening.
 * Dark is the default. Light mode activates via html[data-theme="light"].
 * Page styles keep working untouched: this file only overrides through
 * higher-specificity selectors, never by editing page sources. */

/* ---------- base guards (both modes) ---------- */
html, body { overflow-x: hidden; }
img { max-width: 100%; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ---------- light-mode palette (page :root vars are overridden here) ---------- */
html[data-theme="light"] {
  --bg-dark: #edf1f7;
  --bg-card: #ffffff;
  --border-glow: #d6dfee;
  --text-primary: #0f1e33;
  --text-secondary: #4d5f7c;
}

/* ---------- light-mode surfaces with hardcoded dark colors ---------- */
html[data-theme="light"] .main-header { background: rgba(255,255,255,.92); }
html[data-theme="light"] header { background-color: rgba(255,255,255,.94); }
html[data-theme="light"] h1,
html[data-theme="light"] .header-logo,
html[data-theme="light"] .logo,
html[data-theme="light"] .article-title {
  background: none;
  -webkit-text-fill-color: #0f1e33;
  color: #0f1e33;
}
html[data-theme="light"] .article-content { color: #33415c; }
html[data-theme="light"] .article-content h2,
html[data-theme="light"] .highlight-box h3,
html[data-theme="light"] .faq-title,
html[data-theme="light"] .faq-question,
html[data-theme="light"] .toc-title,
html[data-theme="light"] .bottom-cta h3,
html[data-theme="light"] .spec-card h3,
html[data-theme="light"] .kc-hero-shot figcaption { color: #0f1e33; }
html[data-theme="light"] .faq-question { background: rgba(15,30,51,.03); }
html[data-theme="light"] .btn-youtube { background: #e9eef6; color: #0f1e33; }
html[data-theme="light"] .toc-list a { color: #0284c7; }
html[data-theme="light"] .badge { color: #0284c7; }
html[data-theme="light"] .bottom-cta {
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(6,182,212,.10));
}
html[data-theme="light"] .browser-top { background: #e8edf5; }
html[data-theme="light"] figure.shot {
  background: #ffffff !important;
  border-color: var(--border-glow) !important;
}
html[data-theme="light"] figure.shot figcaption { color: var(--text-secondary) !important; }

/* ---------- theme toggle button ---------- */
.theme-toggle {
  background: rgba(127,140,160,.12);
  border: 1px solid var(--border-glow);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: none;
}
.theme-toggle::before { content: "◐"; }
.theme-toggle:hover { border-color: var(--accent-cyan); }
.theme-toggle.floating {
  position: fixed;
  bottom: 18px;
  inset-inline-end: 18px;
  z-index: 2000;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* ---------- mobile hardening ---------- */
/* ---------- light-mode fixes II: hardcoded light text on light surfaces ---------- */
html[data-theme="light"] body { background: var(--bg-dark); color: var(--text-primary); }
html[data-theme="light"] .hero-section,
html[data-theme="light"] .services-hero {
  background: radial-gradient(circle at 50% 0%, #ffffff 0%, var(--bg-dark) 78%);
}
html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .back-link:hover,
html[data-theme="light"] .footer-links a:hover,
html[data-theme="light"] .close-modal-btn:hover,
html[data-theme="light"] .dropdown-item:hover { color: #0f1e33; }
html[data-theme="light"] .dropdown-user-name,
html[data-theme="light"] .modal-header h3,
html[data-theme="light"] .arch-title,
html[data-theme="light"] .section-title h2,
html[data-theme="light"] .module-card h3,
html[data-theme="light"] .start-box h2,
html[data-theme="light"] .kc-section h2,
html[data-theme="light"] .faq-item h3,
html[data-theme="light"] .policy-section h2,
html[data-theme="light"] .policy-header h1,
html[data-theme="light"] .policy-list strong,
html[data-theme="light"] .page-title-block h1,
html[data-theme="light"] .card-header-block h3,
html[data-theme="light"] .upload-controls h4,
html[data-theme="light"] .matrix-table th,
html[data-theme="light"] th { color: #0f1e33; }
html[data-theme="light"] th { background-color: rgba(15,30,51,.04); }
html[data-theme="light"] tr:hover td { color: #0f1e33; background-color: rgba(15,30,51,.03); }
html[data-theme="light"] .dropdown-item:hover { background: rgba(15,30,51,.05); }
html[data-theme="light"] .dropdown-header-info { background: rgba(15,30,51,.04); }
html[data-theme="light"] .dropdown-company-name,
html[data-theme="light"] .modal-footer-text a,
html[data-theme="light"] .card-details h4,
html[data-theme="light"] .footer-links a { color: #0284c7; }
html[data-theme="light"] .modal-input { background: #f1f5fa; border-color: var(--border-glow); color: #0f1e33; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: #f1f5fa;
  border-color: var(--border-glow);
  color: #0f1e33;
}
html[data-theme="light"] .pricing-btn { background: #e9eef6; color: #0f1e33; }
html[data-theme="light"] .start-steps a {
  background: rgba(2,132,199,.12);
  border-color: #bae6fd;
  color: #0c4a6e;
}
html[data-theme="light"] .logo-upload-wrapper { background: #eef2f7; }
html[data-theme="light"] .logo-preview-box { background: #e2e8f0; }
html[data-theme="light"] .btn-outline:hover { background: #e2e8f0; border-color: var(--accent-cyan); color: #0f1e33; }
html[data-theme="light"] .alert-banner { color: #b91c1c; }
html[data-theme="light"] #authLoadingOverlay { color: #0f1e33; }
html[data-theme="light"] [style*="color: #fff"],
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #ffffff"],
html[data-theme="light"] [style*="color:#ffffff"] { color: #0f1e33 !important; }
html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

@media (max-width: 880px) {
  html .main-header { padding: 0 16px; }
  html .header-nav { gap: 12px; }
  html .header-nav .nav-link { display: none; }
  html .hero-section { padding: 56px 16px; }
  html .hero-shot { margin: 28px auto 0; border-radius: 12px; }
  html .screenshot-grid { grid-template-columns: minmax(0, 1fr); }
  html .concept-grid { grid-template-columns: minmax(0, 1fr); }
  html .spec-grid { grid-template-columns: minmax(0, 1fr); }
  html .article-title { font-size: 1.9rem; }
  html .container { padding-left: 16px; padding-right: 16px; }
  html .kc-grid .kc-card { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  html .hero-guest-ctas a { width: 100%; max-width: 340px; text-align: center; }
  html .header-cta-btn { padding: 8px 12px; font-size: 0.78rem; }
  html .theme-toggle { width: 34px; height: 34px; }
}