/* =========================================================
   Accent layer — Lemon + Sun, matching the VYPA mobile app.
   Loaded LAST on every page, after the page's own sheets.

   Rules this file keeps (from the accent brief):
   - Lemon = "do this / this benefits you". Sun = "notice this".
   - Text on lemon, sun or white is always --ink.
   - Lemon/sun as TEXT only on dark or blue backgrounds. The site
     defaults to a light theme, so in light mode lemon appears as a
     fill (buttons, chips, the highlighted card) and headline accents
     stay brand blue; in dark mode they switch to lemon.
   - No new glass. Nothing here adds backdrop-filter.
   ========================================================= */


/* ---------- 1. Primary buttons -------------------------------------- */
/* Get Started / Start Free Trial / Become a Host / Sign up.
   The old hover was a dark sweep drawn by ::before; lemon replaces it
   with a ~6% darken and a 1px lift. */
.btn-filled,
.cta-btn,
.pricing-card.featured .cta-button.primary,
.pp-cta-line .cta-button.primary,
.hero-buttons > a.btn-outline:only-child,
.mobile-nav .buttons a.btn-outline[href*="/signup"] {
  background: var(--lemon);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  font-weight: 600;
  min-height: 44px;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-filled::before,
.hero-buttons > a.btn-outline:only-child::before,
.mobile-nav .buttons a.btn-outline[href*="/signup"]::before {
  display: none;
}

.btn-filled:hover,
.cta-btn:hover,
.pricing-card.featured .cta-button.primary:hover,
.pp-cta-line .cta-button.primary:hover,
.hero-buttons > a.btn-outline:only-child:hover,
.mobile-nav .buttons a.btn-outline[href*="/signup"]:hover {
  background: var(--lemon-hover);
  color: var(--ink) !important;
  transform: translateY(-1px);
}

.btn-filled:active,
.cta-btn:active,
.pricing-card.featured .cta-button.primary:active,
.pp-cta-line .cta-button.primary:active {
  transform: translateY(0);
}

/* On dark, the ink border would read as a black hole; drop it into the fill. */
body.dark-mode .btn-filled,
body.dark-mode .cta-btn,
body.dark-mode .pricing-card.featured .cta-button.primary,
body.dark-mode .pp-cta-line .cta-button.primary,
body.dark-mode .hero-buttons > a.btn-outline:only-child,
body.dark-mode .mobile-nav .buttons a.btn-outline[href*="/signup"],
.cta-highlight-section .cta-btn {
  background: var(--lemon);
  color: var(--ink);
  border-color: var(--lemon);
}

body.dark-mode .btn-filled:hover,
body.dark-mode .hero-buttons > a.btn-outline:only-child:hover,
body.dark-mode .cta-btn:hover,
body.dark-mode .pricing-card.featured .cta-button.primary:hover,
body.dark-mode .pp-cta-line .cta-button.primary:hover,
.cta-highlight-section .cta-btn:hover {
  background: var(--lemon-hover);
  border-color: var(--lemon-hover);
  color: var(--ink);
  box-shadow: 0 10px 24px rgb(182 242 58 / .22);
}

/* Focus: the brief's white ring on dark and blue; on the light theme a
   white ring is invisible, so it becomes a blue ring there. */
.btn-filled:focus-visible,
.btn-outline:focus-visible,
.cta-btn:focus-visible,
.cta-button:focus-visible,
nav a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .btn-filled:focus-visible,
body.dark-mode .btn-outline:focus-visible,
body.dark-mode .cta-btn:focus-visible,
body.dark-mode .cta-button:focus-visible,
body.dark-mode nav a:focus-visible,
.cta-highlight-section .cta-btn:focus-visible {
  box-shadow: var(--focus-ring);
}


/* ---------- 2. Active nav item -------------------------------------- */
/* A small lemon pill behind the label, inside the existing glass nav.
   Negative margin keeps the label where it was, so nothing shifts. */
/* Top-level desktop links only; dropdown items have their own padding. */
.navbar > nav > a.active,
.navbar > nav > .nav-drop > a.active {
  color: var(--ink) !important;          /* beats Advertise's inline green */
  background: var(--lemon);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  margin: -4px -12px;
  text-shadow: none !important;
}

.navbar > nav > a.active::after,
.navbar > nav > .nav-drop > a.active::after {
  display: none;
}

/* Mobile overlay links already carry padding, so the pill needs no offset. */
.mobile-nav nav > a.active.active {
  color: var(--ink) !important;
  background: var(--lemon);
  border-radius: var(--radius-pill);
}

.mobile-nav nav > a.active::after {
  display: none;
}

/* Dropdown items: blue on light stays; lemon on dark. */
body.dark-mode .nav-drop-menu a.active,
body.dark-mode .mobile-nav .m-drop-m a.active {
  color: var(--lemon);
}

/* Links on dark: lemon. Nav hover in dark mode follows. */
body.dark-mode nav a:not(.active):not([aria-current="page"]):hover {
  color: var(--lemon);
}


/* ---------- 3. Headline accents ------------------------------------- */
/* .highlight is a background-clip text fill. Light theme keeps brand
   blue (lemon on white is ~1.3:1); dark theme goes lemon. */
body.dark-mode .highlight {
  background: var(--lemon);
  -webkit-background-clip: text;
  background-clip: text;
}

/* The morphing word in "Your Brand Deserves ___" sits on blue: lemon. */
.letter.visible {
  color: var(--lemon);
}


/* ---------- 4. Eyebrows --------------------------------------------- */
/* Small caps, +2px tracking, sun on dark/blue. On the light theme sun
   text would fail contrast, so light eyebrows keep their current colour. */
body.dark-mode .pp-kicker,
body.dark-mode .ooh-kicker {
  color: var(--sun);
  letter-spacing: calc(0.16em + 2px);
}

/* Existing dark-mode subheads were a hard-coded near-yellow (#ecf010). */
body.dark-mode .features-header p,
body.dark-mode #privacy-subtext,
body.dark-mode #terms-subtext {
  color: var(--sun);
}

/* Features tagline was #00ff2f on white (~1.4:1). */
.features-tagline {
  color: var(--lemon-ink);
}
body.dark-mode .features-tagline {
  color: var(--lemon);
}


/* ---------- 5. Key numbers ------------------------------------------ */
/* Entry prices sit on the blue CTA card: lemon number on blue. */
.adprice__amount {
  color: var(--lemon);
  text-shadow: 0 0 28px rgb(182 242 58 / .35);
}

body.dark-mode .stat-number,
body.dark-mode .ooh-stat-v {
  color: var(--lemon);
}


/* ---------- 6. The one highlighted value card ----------------------- */
.feature-card-vypa--benefit,
body.dark-mode .feature-card-vypa--benefit {
  background: var(--lemon);
  border-color: var(--lemon);
}

.feature-card-vypa--benefit h3,
.feature-card-vypa--benefit p,
body.dark-mode .feature-card-vypa--benefit h3,
body.dark-mode .feature-card-vypa--benefit p {
  color: var(--ink);
}

.feature-card-vypa--benefit:hover {
  box-shadow: 0 30px 60px rgb(182 242 58 / .35);
}


/* ---------- 7. Pricing ---------------------------------------------- */
.pricing-card.featured,
body.dark-mode .pricing-card.featured {
  border-color: var(--lemon);
}

.featured-badge {
  background: var(--lemon);
  color: var(--ink);
}


/* ---------- 8. Badges & chips --------------------------------------- */
/* "LATEST" in the blog ticker is a "notice this": sun. */
.ticker-badge {
  background: var(--sun);
  color: var(--ink);
}


/* ---------- 8b. Selected tabs, switches, toggles -------------------- */
/* Active/complete state is lemon. Hover keeps the existing blue so the
   selected item stays distinguishable from the one under the pointer. */
.filter-btn.active,
.filter-btn.active:hover,
body.dark-mode .filter-btn.active,
body.dark-mode .filter-btn.active:hover,
.pp-switch button[aria-pressed="true"],
.tab-btn.active,
body.dark-mode .tab-btn.active {
  background: var(--lemon);
  border-color: var(--lemon);
  color: var(--ink);
  box-shadow: none;
}

.filter-btn:focus-visible,
.pp-switch button:focus-visible,
.tab-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode .filter-btn:focus-visible,
body.dark-mode .pp-switch button:focus-visible,
body.dark-mode .tab-btn:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Theme switch in the header: "on" is lemon. */
input:checked + .slider {
  background-color: var(--lemon);
}


/* ---------- 9. Testimonials ----------------------------------------- */
.testimonial-dots .dot.active,
body.dark-mode .testimonial-dots .dot.active {
  background-color: var(--lemon);
  box-shadow: 0 0 0 1px var(--ink);
}

body.dark-mode .testimonial-dots .dot.active {
  box-shadow: none;
}


/* ---------- 10. Footer ---------------------------------------------- */
body.dark-mode footer a:hover,
body.dark-mode footer a:focus-visible {
  color: var(--lemon);
}


/* ---------- 11. Links on dark --------------------------------------- */
/* Brand blue text on the dark theme fails contrast (~2.5:1). Links go
   lemon, per the brief; decorative blue text goes to the soft blue. */
body.dark-mode .blog-read-more,
body.dark-mode .blog-view-all,
body.dark-mode .blog-post-back,
body.dark-mode .pp-note a {
  color: var(--lemon);
}

body.dark-mode .blog-read-more:hover,
body.dark-mode .blog-view-all:hover,
body.dark-mode .blog-post-back:hover,
body.dark-mode .pp-note a:hover {
  color: var(--lemon);
  text-decoration: underline;
}

body.dark-mode .features-tagline-vypa h4 {
  color: var(--vypa-blue-soft);
}

body.dark-mode .cmp-eyebrow {
  color: var(--sun);
}

body.dark-mode .pp-slot-n {
  color: var(--lemon);
}


/* ---------- 12. Muted meta text ------------------------------------- */
/* #9ca3af on white is 2.5:1; these are read, so they need 4.5:1. */
.blog-date,
.blog-author-mini,
.blog-ad-label {
  color: #6b7280;
}

body.dark-mode .blog-date,
body.dark-mode .blog-author-mini,
body.dark-mode .blog-ad-label {
  color: #a0aec0;
}


/* ---------- 13. Out of Home ----------------------------------------- */
/* Hero primary and the navy CTA band's primary are the page's "do this". */
.ooh-btn-blue,
.ooh-cta .ooh-btn-solid,
body.dark-mode .ooh-btn-blue,
body.dark-mode .ooh-cta .ooh-btn-solid {
  background: var(--lemon);
  color: var(--ink);
}

.ooh-btn-blue:hover,
.ooh-cta .ooh-btn-solid:hover {
  background: var(--lemon-hover);
  transform: translateY(-1px);
}

.ooh-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

.ooh-cta .ooh-btn:focus-visible,
body.dark-mode .ooh-btn:focus-visible {
  box-shadow: var(--focus-ring);
}

body.dark-mode .ooh-eyebrow {
  color: var(--sun);
}


/* ---------- 14. Log in / Sign up ------------------------------------ */
#loginBtn,
#signupBtn,
body.dark-mode #loginBtn,
body.dark-mode #signupBtn {
  background: var(--lemon);
  color: var(--ink);
  font-weight: 600;
  border-radius: var(--radius-pill);
  min-height: 48px;
  transition: background-color .2s ease, transform .2s ease;
}

#loginBtn:hover,
#signupBtn:hover,
body.dark-mode #loginBtn:hover,
body.dark-mode #signupBtn:hover {
  background: var(--lemon-hover);
  color: var(--ink);
  transform: translateY(-1px);
}

#loginBtn:focus-visible,
#signupBtn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

body.dark-mode #loginBtn:focus-visible,
body.dark-mode #signupBtn:focus-visible {
  box-shadow: var(--focus-ring);
}

#loginBtn:disabled,
#signupBtn:disabled {
  opacity: .6;
  cursor: progress;
  transform: none;
}


/* ---------- 15. Compare pages --------------------------------------- */
.cmp-btn-solid,
.cmp-cta .cmp-btn-solid {
  background: var(--lemon);
  color: var(--ink);
  box-shadow: none;
}

.cmp-btn-solid:hover,
.cmp-cta .cmp-btn-solid:hover {
  background: var(--lemon-hover);
}

.cmp-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-light);
}

.cmp-cta .cmp-btn:focus-visible,
body.dark-mode .cmp-btn:focus-visible {
  box-shadow: var(--focus-ring);
}


/* ---------- 16. Solutions CTA cards --------------------------------- */
/* Three side-by-side options; "Start Trial" is the lemon one. "Schedule
   Call" takes the brief's secondary style (white fill, blue text). */
.cta-option a.btn-filled[href="/contact"],
body.dark-mode .cta-option a.btn-filled[href="/contact"] {
  background: #fff;
  color: var(--vypa-blue);
  border-color: #fff;
}

.cta-option a.btn-filled[href="/contact"]:hover,
body.dark-mode .cta-option a.btn-filled[href="/contact"]:hover {
  background: var(--lemon-tint);
  color: var(--ink) !important;
}


/* ---------- 17. Glass fallback -------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cta-card {
    background: var(--vypa-blue-700);
  }
}


/* Existing bug: secondary hover text went near-white on a white card. */
.cta-button.secondary:hover {
  color: var(--vypa-blue);
}
body.dark-mode .cta-button.secondary:hover {
  color: var(--lemon);
}


/* Tap targets: 44px minimum on mobile for the buttons people act on. */
@media (max-width: 768px) {
  .hero-buttons a,
  .cta-btn,
  .cta-option a,
  .cmp-btn,
  .ooh-btn,
  .mobile-nav .buttons a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


@media (prefers-reduced-motion: reduce) {
  .btn-filled, .cta-btn, .cta-button.primary {
    transition: none;
  }
  .btn-filled:hover, .cta-btn:hover, .cta-button.primary:hover {
    transform: none;
  }
}