/* ==========================================================================
   1. ROOT VARIABLES & GLOBAL UTILITIES
   ========================================================================== */

/* 1.1 KEYPOPPY Header Color Variables */
:root {
  --kp-header-bg: #000000;
  --kp-header-link: #ffffff;
  --kp-header-hover: #CBBDA9;   /* warm accent */
  --kp-dd-text: #222222;        /* dark gray for dropdown text */
}

/* 1.2 Fix the tan break at the top of articles */
.com-content.view-article #sp-main-body {
  background: linear-gradient(
    180deg,
    var(--sppb-bg-variant-4) 0px,
    var(--sppb-bg-variant-4) 800px,
    transparent 800px,
    transparent 100%
  ) !important;
}

/* 1.3 Article title line-height fix */
.article-details .article-header h1,
.article-details .article-header h2 {
  line-height: 1.3;
}


/* ==========================================================================
   2. HEADER & NAVIGATION (KEYPOPPY)
   ========================================================================== */

/* 2.1 Logo Handling */
#sp-header .logo img,
#sp-header .sp-default-logo,
#sp-header .logo-image img {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* Force the white (dark) logo version */
#sp-header .logo-image .logo-dark  { display: block !important; }
#sp-header .logo-image .logo-light { display: none !important; }


/* 2.2 Header Background & Base Link Colors */
#sp-header,
.header-transparent #sp-header,
.is-sticky #sp-header,
.sticky-header #sp-header,
.menu-fixed #sp-header {
  background-color: var(--kp-header-bg) !important;
}

#sp-header .container,
#sp-header .row,
#sp-header .sp-header,
#sp-header .navbar {
  background-color: transparent !important;
}

/* Base link colors in header */
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-contact-info a,
#sp-header .sp-contact-info {
  color: var(--kp-header-link) !important;
}

/* Hover / active link color */
#sp-header .sp-megamenu-parent > li > a:hover,
#sp-header .sp-megamenu-parent > li.active > a {
  color: var(--kp-header-hover) !important;
}


/* 2.3 Menu Numbers (01, 02, 03…) */
#sp-header .spmenu-number {
  color: var(--kp-header-link) !important;
  opacity: 0.7;
}
#sp-header .sp-menu-item:hover .spmenu-number,
#sp-header .sp-menu-item.current-item.active .spmenu-number {
  color: var(--kp-header-hover) !important;
  opacity: 1;
}

/* Ensure numbers stay white in Helix theme modes */
html[data-bs-theme="light"] #sp-header .spmenu-number,
html[data-bs-theme="dark"]  #sp-header .spmenu-number {
  color: #ffffff !important;
}


/* 2.4 Dropdown Menus */
#sp-header .sp-megamenu-parent .sp-dropdown,
#sp-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: #ffffff !important;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

#sp-header .sp-megamenu-parent .sp-dropdown li > a {
  color: var(--kp-dd-text) !important;
  background: transparent !important;
}

#sp-header .sp-megamenu-parent .sp-dropdown li:hover > a,
#sp-header .sp-megamenu-parent .sp-dropdown li:focus-within > a,
#sp-header .sp-megamenu-parent .sp-dropdown li.active > a {
  background: #000000 !important;
  color: #ffffff !important;
}


/* 2.5 Contact Icons & Button in Header */
#sp-header .sp-contact-info i {
  color: var(--kp-header-link) !important;
}

/* Clean, borderless button style */
#sp-header .sp-contact-info a,
#sp-header .sppb-btn,
#sp-header .sppb-btn.sppb-btn-custom {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* Hover state for contact CTA */
#sp-header .sp-contact-info a:hover,
#sp-header .sppb-btn.sppb-btn-custom:hover {
  color: var(--kp-header-hover) !important;
  background: transparent !important;
}

/* Hide the hard-coded SP Page Builder Contact Button in Header */
#sp-header .sppb-btn {
  display: none !important;
}


/* 2.6 Mobile Menu / Offcanvas Background & Icon */
#offcanvas-toggler i {
  color: var(--kp-header-link) !important;
}

.offcanvas-menu,
.offcanvas-menu .offcanvas-inner {
  background-color: var(--kp-header-bg) !important;
}

/* Fix mobile hamburger visibility */
#offcanvas-toggler .burger-icon span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 4px 0;
  background-color: #ffffff !important;
}

/* Make the "Menu" label white on dark header */
#offcanvas-toggler:after {
  color: #ffffff !important;
}


/* 2.7 Header Stability & Hover Underline */
#sp-header {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: background-color;
}

/* Remove sticky animations that cause flicker */
.sticky-header #sp-header,
.is-sticky #sp-header {
  animation: none !important;
  transform: none !important;
}

/* Reserve bottom border for hover line */
#sp-header .sp-megamenu-parent > li > a {
  border-bottom: 2px solid transparent;
}
#sp-header .sp-megamenu-parent > li > a:hover,
#sp-header .sp-megamenu-parent > li.active > a {
  border-bottom-color: rgba(203, 189, 169, 0.4);
}

/* Neutralize stray borders */
#sp-header,
#sp-header * {
  border-top-color: transparent;
  border-bottom-color: transparent;
}


/* 2.8 Offcanvas Menu Text & Active States */
.offcanvas-menu ul.mod-menu li a {
  color: #ffffff !important;
}

.offcanvas-menu .spmenu-number {
  color: #ffffff !important;
  opacity: 0.8 !important;
}

/* Active menu item in offcanvas */
.offcanvas-menu ul.mod-menu li.active > a {
  color: var(--kp-header-hover) !important;
}

/* Contact button in offcanvas */
.offcanvas-menu .sppb-btn,
.offcanvas-menu .sp-contact-info a {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Hover state */
.offcanvas-menu ul.mod-menu li a:hover {
  color: var(--kp-header-hover) !important;
}

.offcanvas-menu ul.mod-menu li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}


/* ==========================================================================
   3. THEME SWITCHER DOTS (SPPB COLOR SWITCHER)
   ========================================================================== */

/* 3.1 Hide Original Chevron / Toggle UI */
.sppb-color-switcher-toggle {
  display: none !important;
}

/* 3.2 Position Switcher in Top-Right Corner */
.sppb-color-switcher-modes {
  position: fixed !important;
  top: 30px !important;
  right: 20px !important;
  z-index: 9999 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

/* Hover reveals it more strongly */
.sppb-color-switcher-modes:hover {
  opacity: 1;
}

/* 3.3 Normalize Wrapper Spacing */
.sppb-color-switcher-colors-wrapper {
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* Vertical stack of the two dots */
.sppb-color-switcher-colors {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 3.4 Base Circle Styling */
.sppb-color-switcher-color {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  background-image: none !important;
  background-color: transparent !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease,
              box-shadow 0.15s ease;
}

/* Light mode dot */
.sppb-color-switcher-color[data-mode="Default"] {
  background-color: #f5f5f5 !important;
}

/* Dark mode dot */
.sppb-color-switcher-color[data-mode="Dark"] {
  background-color: #666666 !important;
}

/* Hover feedback */
.sppb-color-switcher-color:hover {
  transform: scale(1.12) !important;
  border-color: #ffffff !important;
}

/* Active mode highlight */
.sppb-color-switcher-color.sppb-switcher-active {
  border-color: #ffffff !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7) !important;
}

/* Prevent clipping */
.sppb-color-switcher-modes,
.sppb-color-switcher-colors-wrapper,
.sppb-color-switcher-colors {
  overflow: visible !important;
  height: auto !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide switcher on mobile for less clutter */
@media (max-width: 991px) {
  .sppb-color-switcher-modes {
    display: none !important;
  }
}


/* ==========================================================================
   4. ARTICLE BASE LAYOUT & TYPOGRAPHY
   ========================================================================== */

/* 4.1 Mobile Typography Boost */
@media (max-width: 768px) {

  /* Paragraphs */
  #sp-main-body p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }

  /* Headings inside article/SPPB */
  #sp-main-body h1,
  .sppb-addon-content h1 {
    font-size: 32px !important;
    line-height: 1.25 !important;
  }

  #sp-main-body h2,
  .sppb-addon-content h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
  }

  #sp-main-body h3,
  .sppb-addon-content h3 {
    font-size: 24px !important;
    line-height: 1.35 !important;
  }

  #sp-main-body h4,
  .sppb-addon-content h4 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
}

/* 4.2 Base Article Layout */
#sp-main-body article,
#sp-page-builder article {
  line-height: 1.6;
  color: #333333;
}

/* 4.3 Article Subtitle (if present) */
#sp-main-body article .article-subtitle,
#sp-page-builder article .article-subtitle {
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* 4.4 Section & Subsection Headers */
#sp-main-body article .section-header,
#sp-page-builder article .section-header {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
}

#sp-main-body article .subsection-header,
#sp-page-builder article .subsection-header {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* 4.5 Nicer HR inside Articles */
#sp-main-body article hr,
#sp-page-builder article hr {
  border: 0;
  border-top: 1px solid #e2e2e2;
  margin: 2.5rem 0;
}


/* ==========================================================================
   5. ARTICLE STRUCTURAL COMPONENTS (LIGHT MODE)
   ========================================================================== */

/* 5.1 Emphasis Box – Blue Bar + Light Grey Background */
#sp-main-body article .emphasis-box,
#sp-page-builder article .emphasis-box {
  background-color: #f8f9fa;
  border-left: 4px solid #0d6efd;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 6px;
}

/* 5.2 Scenario Cards – Light Red Card-like */
#sp-main-body article .scenario-box,
#sp-page-builder article .scenario-box {
  background-color: #ffecec;
  border-left: 4px solid #e55353;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

#sp-main-body article .scenario-title,
#sp-page-builder article .scenario-title {
  font-weight: 600;
  color: #c43a3a;
  margin-bottom: 0.5rem;
}

/* 5.3 Series Navigation Card */
#sp-main-body article .series-nav,
#sp-page-builder article .series-nav {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 3rem;
}

/* 5.4 Author Bio Card */
#sp-main-body article .author-bio,
#sp-page-builder article .author-bio {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 3rem;
  font-style: italic;
}

/* 5.5 Inline Code (Light Mode) */
#sp-main-body article code,
#sp-page-builder article code {
  background-color: #f8f9fa;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}


/* ==========================================================================
   6. ARTICLE ENHANCEMENT MODULE
   ========================================================================== */

/* 6.1 Callout Boxes (Light Mode) */
.callout {
  border-left: 5px solid #0d6efd;
  background: #f8f9fa;
  padding: 1.2rem 1.4rem;
  border-radius: 8px;
  margin: 1.75rem 0;
}
.callout h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

/* Variants */
.callout.info    { border-left-color: #0d6efd; background: #eef5ff; }
.callout.success { border-left-color: #198754; background: #e8f5ec; }
.callout.warning { border-left-color: #ffc107; background: #fff7db; }
.callout.danger  { border-left-color: #dc3545; background: #ffe7e9; }


/* 6.2 Pull Quotes */
.pull-quote {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.45;
  border-left: 4px solid #0d6efd;
  padding-left: 1rem;
  margin: 2rem 0;
  font-style: italic;
}


/* 6.3 Figures + Captions */
.figure {
  margin: 2rem 0;
  text-align: center;
}
.figure img {
  max-width: 100%;
  border-radius: 12px;
}
.figure .caption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #6c757d;
}


/* 6.4 Inline Badges */
.badge-inline {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 4px;
  font-weight: 600;
  vertical-align: middle;
}
.badge-inline.info    { background: #0d6efd; color: #ffffff; }
.badge-inline.success { background: #198754; color: #ffffff; }
.badge-inline.warning { background: #ffc107; color: #222222; }
.badge-inline.danger  { background: #dc3545; color: #ffffff; }


/* 6.5 Margin Notes (Desktop Only) */
.margin-note {
  float: right;
  width: 240px;
  margin: 0 0 1rem 1.5rem;
  padding: 1rem;
  font-size: 0.9rem;
  background: #f8f9fa;
  border-left: 4px solid #0d6efd;
  border-radius: 6px;
}

/* Hide margin note on smaller screens */
@media (max-width: 991px) {
  .margin-note {
    display: none;
  }
}


/* 6.6 Mini Table of Contents */
.article-toc {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 10px;
  margin: 2rem 0;
  border-left: 5px solid #0d6efd;
}

.article-toc h4 {
  margin-top: 0;
  font-weight: 600;
  margin-bottom: 1rem;
}

.article-toc ul {
  padding-left: 1.2rem;
  margin: 0;
}

.article-toc li {
  margin-bottom: 0.35rem;
}


/* ==========================================================================
   7. TABLE STYLING (LIGHT & DARK BASE)
   ========================================================================== */

/* 7.1 Base Table Style */
#sp-main-body article table,
#sp-page-builder article table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08) !important;
}

#sp-main-body article table th,
#sp-main-body article table td,
#sp-page-builder article table th,
#sp-page-builder article table td {
  padding: 0.85rem 1.2rem !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* 7.2 Rounded Corners */
#sp-main-body article thead th:first-child,
#sp-page-builder article thead th:first-child {
  border-top-left-radius: 14px !important;
}
#sp-main-body article thead th:last-child,
#sp-page-builder article thead th:last-child {
  border-top-right-radius: 14px !important;
}

#sp-main-body article tbody tr:last-child td:first-child,
#sp-page-builder article tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px !important;
}
#sp-main-body article tbody tr:last-child td:last-child,
#sp-page-builder article tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px !important;
}

/* 7.3 Hover (Light Mode) */
#sp-main-body article table tbody tr:hover td,
#sp-page-builder article table tbody tr:hover td {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* 7.4 SPPB .table-responsive Wrapper */
#sp-main-body article .table-responsive,
#sp-page-builder article .table-responsive {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* 7.5 Light Mode Base Table Colors */
html[data-bs-theme="light"] #sp-main-body article table,
html[data-bs-theme="light"] #sp-page-builder article table {
  background-color: #ffffff;
}


/* ==========================================================================
   8. DARK MODE (UNIFIED FOR HELIX + SPPB)
   ========================================================================== */

/* NOTE:
   - Helix can use html[data-theme="Dark"]
   - SP Page Builder uses body[data-sppb-color-mode="Dark"]
   - We support both (Option C) with SPPB having priority
*/

/* 8.1 Article Base Text & Headings */
html[data-theme="Dark"] #sp-main-body article,
html[data-theme="Dark"] #sp-page-builder article,
body[data-sppb-color-mode="Dark"] #sp-main-body article,
body[data-sppb-color-mode="Dark"] #sp-page-builder article {
  color: #e5e5e5 !important;
}

html[data-theme="Dark"] #sp-main-body article h1,
html[data-theme="Dark"] #sp-main-body article h2,
html[data-theme="Dark"] #sp-main-body article h3,
html[data-theme="Dark"] #sp-main-body article h4,
html[data-theme="Dark"] #sp-page-builder article h1,
html[data-theme="Dark"] #sp-page-builder article h2,
html[data-theme="Dark"] #sp-page-builder article h3,
html[data-theme="Dark"] #sp-page-builder article h4,
body[data-sppb-color-mode="Dark"] #sp-main-body article h1,
body[data-sppb-color-mode="Dark"] #sp-main-body article h2,
body[data-sppb-color-mode="Dark"] #sp-main-body article h3,
body[data-sppb-color-mode="Dark"] #sp-main-body article h4,
body[data-sppb-color-mode="Dark"] #sp-page-builder article h1,
body[data-sppb-color-mode="Dark"] #sp-page-builder article h2,
body[data-sppb-color-mode="Dark"] #sp-page-builder article h3,
body[data-sppb-color-mode="Dark"] #sp-page-builder article h4 {
  color: #ffffff !important;
}


/* 8.2 Emphasis & Scenario Boxes */
html[data-theme="Dark"] #sp-main-body article .emphasis-box,
html[data-theme="Dark"] #sp-page-builder article .emphasis-box,
body[data-sppb-color-mode="Dark"] #sp-main-body article .emphasis-box,
body[data-sppb-color-mode="Dark"] #sp-page-builder article .emphasis-box {
  background-color: #222222 !important;
  border-left-color: #66aaff !important;
  color: #e5e5e5 !important;
}

html[data-theme="Dark"] #sp-main-body article .scenario-box,
html[data-theme="Dark"] #sp-page-builder article .scenario-box,
body[data-sppb-color-mode="Dark"] #sp-main-body article .scenario-box,
body[data-sppb-color-mode="Dark"] #sp-page-builder article .scenario-box {
  background-color: #3a2020 !important;
  border-left-color: #ff7b7b !important;
  color: #f3dede !important;
}

html[data-theme="Dark"] #sp-main-body article .scenario-title,
html[data-theme="Dark"] #sp-page-builder article .scenario-title,
body[data-sppb-color-mode="Dark"] #sp-main-body article .scenario-title,
body[data-sppb-color-mode="Dark"] #sp-page-builder article .scenario-title {
  color: #ff9ea1 !important;
}


/* 8.3 Series Nav & Author Bio */
html[data-theme="Dark"] #sp-main-body article .series-nav,
html[data-theme="Dark"] #sp-page-builder article .series-nav,
html[data-theme="Dark"] #sp-main-body article .author-bio,
html[data-theme="Dark"] #sp-page-builder article .author-bio,
body[data-sppb-color-mode="Dark"] #sp-main-body article .series-nav,
body[data-sppb-color-mode="Dark"] #sp-page-builder article .series-nav,
body[data-sppb-color-mode="Dark"] #sp-main-body article .author-bio,
body[data-sppb-color-mode="Dark"] #sp-page-builder article .author-bio {
  background-color: #222222 !important;
  color: #cccccc !important;
}


/* 8.4 Inline Code & HR */
html[data-theme="Dark"] #sp-main-body article code,
html[data-theme="Dark"] #sp-page-builder article code,
body[data-sppb-color-mode="Dark"] #sp-main-body article code,
body[data-sppb-color-mode="Dark"] #sp-page-builder article code {
  background-color: #444444 !important;
  color: #ffffff !important;
  border-color: #666666 !important;
}

html[data-theme="Dark"] #sp-main-body article hr,
html[data-theme="Dark"] #sp-page-builder article hr,
body[data-sppb-color-mode="Dark"] #sp-main-body article hr,
body[data-sppb-color-mode="Dark"] #sp-page-builder article hr {
  border-top-color: #444444 !important;
}


/* 8.5 Callout Boxes (Unified Dark Mode) */
html[data-theme="Dark"] .callout,
body[data-sppb-color-mode="Dark"] .callout {
  background: #1f1f1f !important;
  color: #e6e6e6 !important;
}

html[data-theme="Dark"] .callout.info,
body[data-sppb-color-mode="Dark"] .callout.info {
  background: rgba(80, 140, 250, 0.22) !important;
  border-left-color: #6ea8fe !important;
}

html[data-theme="Dark"] .callout.success,
body[data-sppb-color-mode="Dark"] .callout.success {
  background: rgba(90, 200, 120, 0.24) !important;
  border-left-color: #6fdd8b !important;
}

html[data-theme="Dark"] .callout.warning,
body[data-sppb-color-mode="Dark"] .callout.warning {
  background: rgba(255, 210, 90, 0.26) !important;
  border-left-color: #ffd76e !important;
}

html[data-theme="Dark"] .callout.danger,
body[data-sppb-color-mode="Dark"] .callout.danger {
  background: rgba(255, 120, 120, 0.24) !important;
  border-left-color: #ff8787 !important;
}


/* 8.6 Pull Quotes */
html[data-theme="Dark"] .pull-quote,
body[data-sppb-color-mode="Dark"] .pull-quote {
  border-left-color: #4f8cff !important;
  color: #e6e6e6 !important;
}


/* 8.7 Figure Captions */
html[data-theme="Dark"] .figure .caption,
body[data-sppb-color-mode="Dark"] .figure .caption {
  color: #cccccc !important;
}


/* 8.8 Margin Notes */
html[data-theme="Dark"] .margin-note,
body[data-sppb-color-mode="Dark"] .margin-note {
  background: rgba(255, 255, 255, 0.07) !important;
  border-left-color: rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}


/* 8.9 Mini Table of Contents */
html[data-theme="Dark"] .article-toc,
body[data-sppb-color-mode="Dark"] .article-toc {
  background: rgba(255, 255, 255, 0.07) !important;
  border-left-color: #4f8cff !important;
  color: #e6e6e6 !important;
}


/* 8.10 Tables (Dark Mode) */
html[data-theme="Dark"] #sp-page-builder article table.table,
body[data-sppb-color-mode="Dark"] #sp-page-builder article table.table {
  background-color: #1c1c1c !important;
  border-color: #3d3d3d !important;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35) !important;
}

/* Header row */
html[data-theme="Dark"] #sp-page-builder article table.table thead th,
body[data-sppb-color-mode="Dark"] #sp-page-builder article table.table thead th {
  background: linear-gradient(180deg, #2b2b2b, #1f1f1f) !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

/* Data cells */
html[data-theme="Dark"] #sp-page-builder article table.table > :not(caption) > * > *,
body[data-sppb-color-mode="Dark"] #sp-page-builder article table.table > :not(caption) > * > * {
  color: #e6e6e6 !important;
  background-color: #1c1c1c !important;
  border-color: #3d3d3d !important;
}

/* Striped rows */
html[data-theme="Dark"] #sp-page-builder article table.table.table-striped > tbody > tr:nth-of-type(odd) > *,
body[data-sppb-color-mode="Dark"] #sp-page-builder article table.table.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #242424 !important;
  color: #e6e6e6 !important;
}

html[data-theme="Dark"] #sp-page-builder article table.table.table-striped > tbody > tr:nth-of-type(even) > *,
body[data-sppb-color-mode="Dark"] #sp-page-builder article table.table.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: #1c1c1c !important;
  color: #e6e6e6 !important;
}

/* Hover rows */
html[data-theme="Dark"] #sp-page-builder article table.table.table-hover > tbody > tr:hover > *,
body[data-sppb-color-mode="Dark"] #sp-page-builder article table.table.table-hover > tbody > tr:hover > * {
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* Preserve bottom rounding in dark mode */
html[data-theme="Dark"] #sp-page-builder article table.table tbody tr:last-child td:first-child,
body[data-sppb-color-mode="Dark"] #sp-page-builder article table.table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 14px !important;
}
html[data-theme="Dark"] #sp-page-builder article table.table tbody tr:last-child td:last-child,
body[data-sppb-color-mode="Dark"] #sp-page-builder article table.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 14px !important;
}

/* Homepage font made larger */
#sppb-addon-85604ae9-5e3c-493c-8be0-aacfdb96afab .sppb-dynamic-content-text {
    font-family: Plus Jakarta Sans;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.56;
}

@media (max-width: 768px) {
    #sppb-addon-85604ae9-5e3c-493c-8be0-aacfdb96afab .sppb-dynamic-content-text {
        font-size: 16px;
    }
}

/* About text larger */
#sppb-addon-4483b76d-0913-4a73-9683-869a9683fc86 .sppb-addon-text-block .sppb-addon-content {
    font-family: Plus Jakarta Sans;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.56;
}

@media (max-width: 768px) {
    #sppb-addon-4483b76d-0913-4a73-9683-869a9683fc86 .sppb-addon-text-block .sppb-addon-content {
        font-size: 16px;
    }
}

/* author bio color */
#sppb-addon-8df32d41-c3be-45c6-87a4-4e3990cdb160 {
    color: #323232;
}

/* ===========================================================
   KEYPOPPY — ACYMAILING SUBSCRIPTION FORM (CLEAN + OPTIMIZED)
   =========================================================== */


/* ===========================================================
   1) BASE FORM WRAPPER (Light Mode)
   =========================================================== */

.acym_module_form,
#acym_module_form {
    max-width: 550px;
    margin: 40px auto;
    padding: 30px 35px;
    background: #f8f9fa;
    border-left: 5px solid #0d6efd;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}


/* ===========================================================
   2) FORM ELEMENTS
   =========================================================== */

/* Labels */
.acym_form label {
    font-family: Plus Jakarta Sans;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sppb-text-primary);
    margin-bottom: 6px;
    display: block;
}

/* Fields */
.acym_form input[type="text"],
.acym_form input[type="email"] {
    width: 100% !important;
    padding: 14px 16px;
    border-radius: 8px !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    font-size: 1rem;
    line-height: 1.4;
    transition: all 0.25s ease;
}

/* Field Focus */
.acym_form input[type="text"]:focus,
.acym_form input[type="email"]:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 3px rgba(13,110,253,0.2);
    outline: none !important;
}

/* Error Message */
.acym__field__error_block {
    color: #dc3545 !important;
    font-weight: 600;
    margin-top: 6px;
}

/* Spacing between fields */
.acym_form .onefield { margin-bottom: 18px; }


/* ===========================================================
   3) SUBMIT BUTTON
   =========================================================== */

.acysubbuttons input[type="submit"],
.acysubbuttons button {
    display: block;
    width: 100%;
    padding: 14px 0;
    background: #0d6efd !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
    font-family: Plus Jakarta Sans;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.25s ease, transform 0.15s ease;
}

.acysubbuttons input[type="submit"]:hover {
    background: #0b59d0 !important;
    transform: translateY(-1px);
}


/* ===========================================================
   4) DARK MODE — ACYMAILING FORM
   =========================================================== */

body[data-sppb-color-mode="Dark"] .acym_module_form,
body[data-sppb-color-mode="Dark"] #acym_module_form {
    background: #1f1f1f !important;
    border-left-color: #4f8cff !important;
    color: #e5e5e5 !important;
}

body[data-sppb-color-mode="Dark"] .acym_form input[type="text"],
body[data-sppb-color-mode="Dark"] .acym_form input[type="email"] {
    background: #2b2b2b !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}


/* ===========================================================
   5) SUBSCRIPTION CARD WITH HEADING + SUBTITLE
   (This wraps the entire block when using SP Page Builder)
   =========================================================== */

#sp-page-builder .acymodule_form_wrapper {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 50px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border-left: 5px solid #1A73E8 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
}

/* Title in card */
.insights-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111;
}

/* Subtitle in card */
.insights-subtitle {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 35px;
    color: #444;
    max-width: 680px;
}

/* Dark Mode */
body[data-sppb-color-mode="Dark"] #sp-page-builder .acymodule_form_wrapper {
    background: #1f1f1f !important;
    border-left-color: #4f8cff !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5) !important;
}

body[data-sppb-color-mode="Dark"] .insights-title {
    color: #ffffff !important;
}

body[data-sppb-color-mode="Dark"] .insights-subtitle {
    color: #bbbbbb !important;
}