/* ================================
   The WordPress Anchor – PRO UI
   Dark background + Blue/White text
   Light panels auto-switch to dark text
================================= */

:root{
  /* If your existing variables exist, we respect them */
  --color-bg-dark: #0b0f14;
  --color-bg-panel: #0f172a;
  --color-bg-light: #f4f6fa;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-text-light: var(--color-white);
  --color-text-soft: rgba(255,255,255,0.82);
  --color-text-muted: rgba(255,255,255,0.70);
  --color-text-dark: #0f172a;

  --color-accent: #00e5ff;
  --color-accent-soft: rgba(0,229,255,0.15);

  --radius: 14px;
  --transition: 220ms ease;
}

/* Base */
body{
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}
h1,h2,h3,h4,h5,h6{ color: var(--color-text-light); font-weight: 800; }
p,li,small,label,.text-muted{ color: var(--color-text-soft) !important; }
a{ color: var(--color-accent); text-decoration:none; transition: var(--transition); }
a:hover{ color: var(--color-white); }

/* Accent helpers */
.text-accent{ color: var(--color-accent) !important; }
.text-white-soft{ color: var(--color-text-soft) !important; }
.text-white-strong{ color: var(--color-text-light) !important; }
.hr-accent{ border-top: 1px solid rgba(0,229,255,0.35); }

/* Panels/Cards */
.card, .content-section, .panel, .box{
  background: var(--color-bg-panel);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
}
.card-glow{
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card-glow:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,229,255,0.18);
  border-color: rgba(0,229,255,0.35);
}

/* Light surfaces (forum sidebar etc) */
.bg-light, .sidebar, .forum-sidebar, .light-panel{
  background: var(--color-bg-light) !important;
  color: var(--color-text-dark) !important;
}
.bg-light h1,.bg-light h2,.bg-light h3,.bg-light h4,
.sidebar h1,.sidebar h2,.sidebar h3,.sidebar h4{
  color: var(--color-text-dark) !important;
}
.bg-light p,.bg-light li,.bg-light span,.bg-light a,
.sidebar p,.sidebar li,.sidebar span,.sidebar a{
  color: #334155 !important;
}
.bg-light a:hover, .sidebar a:hover{ color: #0f172a !important; }

/* Buttons */
.btn{ border-radius: 999px; font-weight: 800; padding: .65rem 1.2rem; transition: var(--transition); }
.btn-primary-accent, .btn-primary{
  background: var(--color-accent) !important;
  border: none !important;
  color: #001018 !important;
}
.btn-primary-accent:hover, .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,229,255,0.35);
  background: #ffffff !important;
  color: #001018 !important;
}
.btn-outline-accent, .btn-outline{
  background: transparent !important;
  border: 1px solid rgba(0,229,255,0.7) !important;
  color: var(--color-accent) !important;
}
.btn-outline-accent:hover, .btn-outline:hover{
  background: rgba(0,229,255,0.15) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Badges */
.badge-accent{
  background: rgba(0,229,255,0.16);
  border: 1px solid rgba(0,229,255,0.45);
  color: var(--color-accent);
  padding: .45rem .7rem;
  border-radius: 999px;
  font-weight: 800;
}

/* Forms */
.form-control-dark, input, textarea, select{
  background: rgba(2,6,23,0.85) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--color-white) !important;
  border-radius: 12px !important;
}
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,0.45) !important; }
.form-control-dark:focus, input:focus, textarea:focus, select:focus{
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(0,229,255,0.18) !important;
  border-color: rgba(0,229,255,0.55) !important;
}

/* Tables */
.table-dark th{ color: var(--color-accent) !important; }
.table-dark td{ color: var(--color-text-soft) !important; }

/* Page hero */
.page-hero{
  padding: 3.2rem 0 1.2rem;
  background: radial-gradient(700px 250px at 50% 0%, rgba(0,229,255,0.18), transparent 60%);
}

/* Lists with check */
.list-check{ list-style: none; padding-left: 0; }
.list-check li{
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .55rem;
  color: var(--color-text-soft);
}
.list-check li::before{
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 900;
}

/* Subtle reveal animations */
.reveal{ opacity: 0; transform: translateY(26px); animation: revealUp .8s ease forwards; }
.delay-1{ animation-delay: .15s; }
.delay-2{ animation-delay: .30s; }
.delay-3{ animation-delay: .45s; }
@keyframes revealUp{ to{ opacity: 1; transform: translateY(0); } }