/* ═══════════════════════════════════════════════════════════════════
   CourtOracle Brand Tokens
   ───────────────────────────────────────────────────────────────────
   To retheme the entire site, edit ONLY the values in :root below.
   The semantic role tokens (--co-header-bg, --co-btn-bg, etc.) map
   palette colors to UI roles — change a role to affect that element
   everywhere at once.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Palette ─────────────────────────────────────────────────── */
  --co-dark:   #171719;        /* primary dark, near-black         */
  --co-purple: #7c3aed;        /* brand purple                     */
  --co-yellow: #d4ed26;        /* tennis ball yellow (test)        */

  /* ── Semantic Roles ───────────────────────────────────────────
     Swap palette colors here to retheme individual UI roles.
     e.g. change --co-btn-bg to var(--co-purple) to revert to dark. */

  /* Accent: icons, eyebrow labels, checkmarks, highlights */
  --co-accent:           var(--co-purple);

  /* Header / nav bar */
  --co-header-bg:        #ffffff;            /* nav background — matches Voice Journal section */
  --co-header-text:      var(--co-dark);     /* nav link text on header        */

  /* Primary action buttons (hero, features, CTA section) */
  --co-btn-bg:           var(--co-purple);   /* button background              */
  --co-btn-text:         #ffffff;            /* button label text              */
  --co-btn-hover-bg:     var(--co-dark);     /* button hover background        */
  --co-btn-hover-text:   #ffffff;            /* button hover text              */

  /* Section backgrounds */
  --co-hero-bg:          #ffffff;           /* hero section — matches Voice Journal */
  --co-hero-text:        var(--co-dark);    /* hero h1/p text                      */
  --co-achievement-bg:   var(--co-purple);
  --co-cta-bg:           #ffffff;           /* call-to-action section              */
  --co-cta-text:         var(--co-dark);    /* CTA h2/p text                       */
  --co-dark-section-bg:  var(--co-dark);    /* app-feature.dark-bg section (intentionally dark for contrast) */
  --co-dark-section-text: #ffffff;          /* text inside dark-bg feature section */
  --co-testimonials-bg:  #f4f0fc;
  --co-footer-bg:        var(--co-dark);    /* footer background                   */
}

/* ── Logo sizing (all pages) ────────────────────────────────────── */
.header .navbar-brand img {
  height: 42px !important;
  width: auto !important;
  border-radius: 0 !important;
}
.single-footer.f-about .logo img {
  height: 48px !important;
  width: auto !important;
  border-radius: 0 !important;
}

/* ── Header / Navbar ────────────────────────────────────────────── */
.header.navbar-area {
  background: var(--co-header-bg) !important;
  box-shadow: none !important;
}
/* Non-sticky nav link text */
.header .navbar .navbar-nav .nav-item a {
  color: var(--co-header-text) !important;
}
.header .navbar .navbar-nav .nav-item a:hover,
.header .navbar .navbar-nav .nav-item a.active {
  color: var(--co-accent) !important;
}
/* Nav "Get Started" button — always accent-colored for visibility */
.header .button .btn,
.header.sticky .button .btn {
  background-color: var(--co-accent) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.header .button .btn:hover,
.header.sticky .button .btn:hover {
  background-color: var(--co-btn-bg) !important;
  color: var(--co-btn-text) !important;
}

/* ── Sticky navbar ──────────────────────────────────────────────── */
/* Override Appvila's white sticky background */
.navbar-area.sticky,
.sticky {
  background: var(--co-header-bg) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}
.sticky .navbar .navbar-nav .nav-item a {
  color: var(--co-header-text) !important;
}
.sticky .navbar .navbar-nav .nav-item a.active,
.sticky .navbar-nav .nav-item:hover a {
  color: var(--co-accent) !important;
}
.sticky .navbar .mobile-menu-btn .toggler-icon {
  background: var(--co-dark) !important;
}

/* ── Hero section ───────────────────────────────────────────────── */
.hero-area {
  background: var(--co-hero-bg) !important;
}
/* Text colors must flip to dark when hero background is light (e.g. yellow) */
.hero-area .hero-content h1,
.hero-area .hero-content p {
  color: var(--co-hero-text) !important;
}
.hero-area .hero-content .button .btn {
  background-color: var(--co-btn-bg) !important;
  color: var(--co-btn-text) !important;
}
.hero-area .hero-content .button .btn:hover {
  background-color: var(--co-btn-hover-bg) !important;
  color: var(--co-btn-hover-text) !important;
}

/* ── General primary buttons ────────────────────────────────────── */
.btn {
  background-color: var(--co-btn-bg) !important;
  color: var(--co-btn-text) !important;
}
.btn:hover {
  background-color: var(--co-btn-hover-bg) !important;
  color: var(--co-btn-hover-text) !important;
}

/* ── Section title eyebrow (h3 above h2) ───────────────────────── */
.section-title h3 {
  color: var(--co-accent) !important;
}
.section-title h3::after {
  background: var(--co-accent) !important;
}

/* ── Feature icons ──────────────────────────────────────────────── */
.features .single-feature i {
  color: var(--co-accent) !important;
  background-color: rgba(124, 58, 237, 0.1) !important;
}
.app-feature .feature-text h3 {
  color: var(--co-accent) !important;
}
.app-feature .feature-text .feature-list li i {
  color: var(--co-accent) !important;
}

/* ── Achievement / stats banner ─────────────────────────────────── */
.our-achievement {
  background: var(--co-achievement-bg) !important;
}

/* ── Pricing table ──────────────────────────────────────────────── */
.pricing-table .single-table .table-head .button .btn:hover {
  background-color: var(--co-accent) !important;
  color: #ffffff !important;
}
.pricing-table .single-table .table-content .table-list li i {
  color: var(--co-accent) !important;
}

/* ── Call-to-action section ─────────────────────────────────────── */
.call-action {
  background-color: var(--co-cta-bg) !important;
}
/* Text must flip to dark when CTA background is light (e.g. yellow) */
.call-action .cta-content h2,
.call-action .cta-content p {
  color: var(--co-cta-text) !important;
}
.call-action .cta-content .button .btn {
  background-color: var(--co-btn-bg) !important;
  color: var(--co-btn-text) !important;
}
.call-action .cta-content .button .btn:hover {
  background-color: var(--co-btn-hover-bg) !important;
  color: var(--co-btn-hover-text) !important;
}

/* ── Scroll-to-top button ───────────────────────────────────────── */
.scroll-top {
  background: var(--co-accent) !important;
}
.scroll-top:hover {
  background: var(--co-dark) !important;
}

/* ── Preloader ──────────────────────────────────────────────────── */
.preloader-icon span {
  background: var(--co-accent) !important;
}

/* ── Footer background ──────────────────────────────────────────── */
.footer {
  background-color: var(--co-footer-bg) !important;
}

/* ── Footer links hover ─────────────────────────────────────────── */
.footer .single-footer.f-about .social li a:hover,
.footer .single-footer.f-about .copyright-text a:hover,
.footer .single-footer.f-link li a:hover {
  color: var(--co-accent) !important;
}
.footer a {
  color: rgba(255, 255, 255, 0.7) !important;
}
.footer a:hover {
  color: #ffffff !important;
}

/* ── Testimonials section background ───────────────────────────── */
.testimonials {
  background: var(--co-testimonials-bg) !important;
}

/* ── Pagination ─────────────────────────────────────────────────── */
.pagination .pagination-list li:hover a {
  background: var(--co-accent) !important;
  color: #ffffff !important;
  border-color: transparent;
}

/* ── CTA Button (large button inside pricing section) ──────────── */
.cta-button {
  background: var(--co-btn-bg) !important;
  color: var(--co-btn-text) !important;
}
.cta-button:hover {
  background: var(--co-btn-hover-bg) !important;
  color: var(--co-btn-hover-text) !important;
}

/* ── Discount Modal primary button ─────────────────────────────── */
.discount-modal-button.primary {
  background: var(--co-btn-bg) !important;
  color: var(--co-btn-text) !important;
}
.discount-modal-button.primary:hover {
  background: var(--co-btn-hover-bg) !important;
  color: var(--co-btn-hover-text) !important;
}
.discount-modal-button.secondary {
  border-color: var(--co-dark) !important;
  color: var(--co-dark) !important;
}

/* ── App feature dark section ───────────────────────────────────── */
.app-feature.dark-bg {
  background: var(--co-dark-section-bg) !important;
}
/* Text must flip to dark when section background is light (e.g. yellow) */
.app-feature.dark-bg .feature-text h2,
.app-feature.dark-bg .feature-text p,
.app-feature.dark-bg .feature-text .feature-list li {
  color: var(--co-dark-section-text) !important;
}