/* ═══════════════════════════════════════════════════════════
   HELMSMAN — DARK MODE
   Applied when html.dark-mode class is present (set by JS in
   header.php based on localStorage or prefers-color-scheme).
   ═══════════════════════════════════════════════════════════ */

/* ── Palette ─────────────────────────────────────────────── */
html.dark-mode {
  --dk-bg:       #0f1117;   /* page background */
  --dk-surface:  #1a1f2e;   /* cards, panels, sections */
  --dk-raised:   #212840;   /* elevated surfaces */
  --dk-border:   rgba(255,255,255,0.10);
  --dk-text:     #e8edf5;   /* primary text */
  --dk-muted:    #b0c4de;   /* secondary text - brightened from #9daec4 for contrast */
  --dk-accent:   #99ccff;   /* navy headings → bright blue */
  --dk-navy:     #0a2a55;   /* navbar / CTA bg */
  --dk-input:    #1e2436;
  --dk-input-bd: #3a4560;
}

/* ── Base ────────────────────────────────────────────────── */
html.dark-mode body {
  background-color: var(--dk-bg) !important;
  color: var(--dk-text);
}

/* ── Navbar ──────────────────────────────────────────────── */
html.dark-mode nav#navbar,
html.dark-mode #navcol-1 {
  background: var(--dk-navy) !important;
}

/* Services dropdown + theme menu */
html.dark-mode #dropdownmenu,
html.dark-mode #theme-menu {
  background-color: var(--dk-raised) !important;
  border: 1px solid var(--dk-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
html.dark-mode #dropdownmenu .dropdown-item,
html.dark-mode #theme-menu .dropdown-item {
  color: var(--dk-text) !important;
}
html.dark-mode #dropdownmenu .dropdown-item:hover,
html.dark-mode #theme-menu .dropdown-item:hover:not(.active) {
  background-color: rgba(88,166,255,0.10) !important;
  color: var(--dk-accent) !important;
}
html.dark-mode #theme-menu .dropdown-item.active {
  background-color: #1a5fa8 !important;
  color: #fff !important;
}

/* Theme selector – always readable in both modes */
#theme-menu {
  min-width: 130px;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
#theme-menu .dropdown-item {
  color: #212529;
  padding: 7px 16px;
  font-family: Lato, sans-serif;
  text-transform: none;
}
#theme-menu .dropdown-item.active {
  background-color: #08376b !important;
  color: #fff !important;
}
#theme-menu .dropdown-item:hover:not(.active) {
  background-color: rgba(8,55,107,0.08);
  color: #08376b;
}

/* ── All content sections → dark surface ─────────────────── */
html.dark-mode .bg-light {
  background-color: var(--dk-surface) !important;
}
html.dark-mode .showcase,
html.dark-mode .features-icons,
html.dark-mode .features-clean,
html.dark-mode .section1,
html.dark-mode .section2,
html.dark-mode .section3 {
  background-color: var(--dk-surface) !important;
}
html.dark-mode .showcase .showcase-text {
  background-color: var(--dk-surface) !important;
}

/* Inline white/light backgrounds */
html.dark-mode [style*="background: #ffffff"],
html.dark-mode [style*="background:#ffffff"],
html.dark-mode [style*="background: rgb(255,255,255)"],
html.dark-mode [style*="background-color: #ffffff"],
html.dark-mode [style*="background-color: rgb(255,255,255)"],
html.dark-mode [style*="background: rgb(248,249,250)"] {
  background-color: var(--dk-surface) !important;
}

/* Features-clean uses rgba(255,255,255,0.8) — override it */
html.dark-mode .features-clean,
html.dark-mode .section1,
html.dark-mode .section2,
html.dark-mode .section3 {
  background: var(--dk-surface) !important;
  box-shadow: none !important;
}

/* education gradient → dark gradient */
html.dark-mode [style*="linear-gradient"] {
  background: linear-gradient(var(--dk-surface), var(--dk-navy)) !important;
}

/* ── Typography ──────────────────────────────────────────── */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
  color: var(--dk-text) !important;
}
html.dark-mode p,
html.dark-mode li {
  color: var(--dk-muted) !important;
}
html.dark-mode .lead {
  color: var(--dk-muted) !important;
}

/* Navy brand headings (inline color:#08376b) → bright accent blue */
html.dark-mode [style*="color: #08376b"],
html.dark-mode [style*="color:#08376b"],
html.dark-mode [style*="color: rgb(8,55,107)"] {
  color: var(--dk-accent) !important;
}
/* Exception: text inside a masthead header sits on a photo — keep white */
html.dark-mode header.masthead [style*="color: #08376b"],
html.dark-mode header.masthead [style*="color:#08376b"] {
  color: #fff !important;
}

/* Inline black text */
html.dark-mode [style*="color: rgb(0,0,0)"],
html.dark-mode [style*="color: #000000"],
html.dark-mode [style*="color:#000000"] {
  color: var(--dk-text) !important;
}

/* Named element overrides */
html.dark-mode #section1-heading,
html.dark-mode #section2-heading,
html.dark-mode #price-header {
  color: var(--dk-accent) !important;
}
html.dark-mode #section1-subheading,
html.dark-mode #solution-h1,
html.dark-mode .solution-h2,
html.dark-mode #virtue-heading,
html.dark-mode #virtue-h,
html.dark-mode #vision-h {
  color: var(--dk-text) !important;
}
html.dark-mode #section1-paragraph,
html.dark-mode #section2-paragraph,
html.dark-mode #solution-p1,
html.dark-mode #virtue-p,
html.dark-mode #virtue-p2,
html.dark-mode #card-body-header,
html.dark-mode #card-body-paragraph {
  color: var(--dk-muted) !important;
}

/* ── Cards ───────────────────────────────────────────────── */
html.dark-mode .card {
  background-color: var(--dk-raised) !important;
  border-color: var(--dk-border) !important;
}
html.dark-mode .card-body {
  background-color: var(--dk-raised) !important;
  color: var(--dk-text) !important;
}
html.dark-mode .card-title,
html.dark-mode .card-text {
  color: var(--dk-text) !important;
}
/* Navy featured card — keep dark blue, brighten text */
html.dark-mode .card[style*="background: #08376b"] {
  background-color: #0e2d5a !important;
}
html.dark-mode .card[style*="background: #08376b"] * {
  color: #e8edf5 !important;
}

/* ── Contact form ────────────────────────────────────────── */
html.dark-mode .contact-clean form {
  background-color: var(--dk-raised) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}
html.dark-mode .contact-clean h2 {
  color: var(--dk-text) !important;
}
html.dark-mode .form-control,
html.dark-mode .custom-select {
  background-color: var(--dk-input) !important;
  color: var(--dk-text) !important;
  border-color: var(--dk-input-bd) !important;
}
html.dark-mode .form-control::placeholder {
  color: var(--dk-muted) !important;
  opacity: 1;
}
html.dark-mode .form-control:focus {
  border-color: var(--dk-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(88,166,255,0.25) !important;
}
html.dark-mode .alert-success {
  background: #0d2e1e !important;
  border-color: #1a5c38 !important;
  color: #5ccb8a !important;
}
html.dark-mode .alert-danger {
  background: #2e0d0d !important;
  border-color: #5c1a1a !important;
  color: #e07070 !important;
}

/* ── Pricing tables ──────────────────────────────────────── */
html.dark-mode table td,
html.dark-mode table th {
  border-color: var(--dk-border) !important;
  color: var(--dk-muted) !important;
}
html.dark-mode .price-header th {
  color: #fff !important;   /* coloured headers keep their bg, text stays white */
}
html.dark-mode .tl,
html.dark-mode .tl2 {
  background-color: var(--dk-raised) !important;
  color: var(--dk-text) !important;
}
html.dark-mode tbody td {
  color: var(--dk-muted) !important;
}

/* ── Footer ──────────────────────────────────────────────── */
html.dark-mode .footer-dark h3,
html.dark-mode .footer-dark-2 h3 {
  color: var(--dk-text) !important;
}
html.dark-mode .footer-dark a,
html.dark-mode .footer-dark-2 a {
  color: var(--dk-muted) !important;
}
html.dark-mode .footer-dark p,
html.dark-mode .footer-dark-2 p,
html.dark-mode .footer-dark .copyright,
html.dark-mode .footer-dark-2 .copyright {
  color: #5d7290 !important;
}

/* ── Pricing table ───────────────────────────────────────── */
html.dark-mode #pricing-section h1.pricing {
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
html.dark-mode .comparison {
  color: var(--dk-text);
}
html.dark-mode tbody tr,
html.dark-mode td.package-btn,
html.dark-mode .last-tr td {
  background: var(--dk-surface) !important;
  color: var(--dk-text);
}
html.dark-mode .comparison .compare-row {
  background: var(--dk-raised) !important;
}
html.dark-mode .comparison td,
html.dark-mode .comparison th {
  border-color: var(--dk-border);
}
html.dark-mode .comparison .tickblue {
  color: var(--dk-accent);
}
html.dark-mode .comparison .tickgreen {
  color: #5dde5d;
}
html.dark-mode .price-options-desc {
  background: var(--dk-navy);
}

/* ── About masthead logo: blue logo on dark overlay is invisible ─── */
/* Light mode: drop-shadow makes the blue show against the dark overlay */
img.about-masthead-logo {
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.6)) brightness(1.3);
}
/* Dark mode: invert to white so it's clearly visible */
html.dark-mode img.about-masthead-logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.4));
}

/* ── Education masthead: no overlay div, darken via CSS ──── */
html.dark-mode header.masthead:not(:has(.overlay)) {
  position: relative;
}
html.dark-mode header.masthead:not(:has(.overlay))::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,15,40,0.70);
  z-index: 0;
  pointer-events: none;
}
html.dark-mode header.masthead:not(:has(.overlay)) .container {
  position: relative;
  z-index: 1;
}