/*
 * Task #1473379 — CRITICAL: Homepage 10-point fix
 *
 * This file owns: All visual fixes for homepage contrast, button styling,
 * pill readability, horizontal overflow, and pricing alignment.
 * Does NOT own: Navigation structure (handled in header-new.ejs).
 *
 * Fixes:
 *  #4  White/invisible text on homepage — force dark readable text
 *  #5  Button outlines/borders — clean emerald solid fills, no borders
 *  #6  Light blue text on light pills — enforce dark readable text
 *  #7  Horizontal scrollbar on Verified Payouts — contain overflow
 *  #9  Pricing alignment — left-aligned cards
 */

/* ═══════════════════════════════════════════════════════════
   #4 — White text / contrast enforcement
   Ensure ALL homepage text is readable on light backgrounds.
   ═══════════════════════════════════════════════════════════ */

/* Hero section: force dark text regardless of variable resolution */
.hp-hero__headline,
.hp-hero__headline em {
  color: #0A0A0A !important;
}
.hp-hero__headline em {
  color: #00643E !important;
}
.hp-hero__sub {
  color: #374151 !important;
}
.hp-hero__proof-text {
  color: #4B5563 !important;
}
.hp-hero__eyebrow {
  color: #047857 !important;
}

/* Section labels and headings: dark on light */
.section-label {
  color: #047857 !important;
}
.section-heading {
  color: #0A0A0A !important;
}
.section-subheading {
  color: #4B5563 !important;
}

/* Stats section: dark values and labels */
.hp-stat__value {
  color: #0A0A0A !important;
}
.hp-stat__label {
  color: #4B5563 !important;
}

/* Trust bar: dark readable text */
.trust-bar,
.trust-item {
  color: #1F2A37 !important;
}

/* Final CTA: dark readable text */
.hp-final-cta__headline {
  color: #0A0A0A !important;
}
.hp-final-cta__note,
.hp-final-cta__note span {
  color: #4B5563 !important;
}

/* Email capture: dark text */
.hp-email-capture__headline {
  color: #0A0A0A !important;
}
.hp-email-capture__sub {
  color: #4B5563 !important;
}
.hp-email-capture__note {
  color: #6B7280 !important;
}

/* Testimonial cards: dark text */
.hp-testimonial-card__quote {
  color: #1F2A37 !important;
}
.hp-testimonial-card__name {
  color: #0A0A0A !important;
}
.hp-testimonial-card__location {
  color: #6B7280 !important;
}

/* Pricing card text: dark readable */
.hp-pricing-card__name {
  color: #0A0A0A !important;
}
.hp-pricing-card__amount {
  color: #00875A !important;
}
.hp-pricing-card__period {
  color: #6B7280 !important;
}
.hp-pricing-card__features li {
  color: #1F2A37 !important;
}
.hp-pricing__note {
  color: #6B7280 !important;
}

/* For Business section: dark text */
.hp-for-business__title {
  color: #0A0A0A !important;
}
.hp-for-business__eyebrow {
  color: #047857 !important;
}
.hp-for-business__card-name {
  color: #0A0A0A !important;
}
.hp-for-business__card-desc {
  color: #4B5563 !important;
}
.hp-for-business__card-link {
  color: #00875A !important;
}

/* Bounty card text */
.hp-bounty__title {
  color: #0A0A0A !important;
}
.hp-bounty__sub {
  color: #4B5563 !important;
}
.hp-bounty-card__company {
  color: #6B7280 !important;
}
.hp-bounty-card__title {
  color: #0A0A0A !important;
}

/* SOTD: dark text */
.hp-sotd__title {
  color: #0A0A0A !important;
}
.hp-sotd__card-title {
  color: #0A0A0A !important;
}
.hp-sotd__company {
  color: #6B7280 !important;
}

/* Category cards: dark text */
.hp-cat-card__name {
  color: #0A0A0A !important;
}
.hp-cat-card__count {
  color: #6B7280 !important;
}

/* Payout cards: dark text */
.hp-payout-card__name {
  color: #0A0A0A !important;
}
.hp-payout-card__settlement {
  color: #6B7280 !important;
}
.hp-payout-card__label {
  color: #6B7280 !important;
}

/* Feed table: dark text */
.hp-feed-row__company span {
  color: #0A0A0A !important;
}
.hp-feed-row__cat {
  color: #374151 !important;
}

/* Counter section: accessible on dark bg */
.hp-counter__label {
  color: #6B7280 !important;
}
.hp-counter__value {
  color: #00875A !important;
}

/* Steps section: dark text */
.hp-step__title {
  color: #0A0A0A !important;
}
.hp-step__desc {
  color: #4B5563 !important;
}

/* ═══════════════════════════════════════════════════════════
   #5 — Button outlines/borders — clean emerald fills only
   Remove all visible borders and outlines from buttons.
   ═══════════════════════════════════════════════════════════ */

/* Primary buttons: solid emerald, NO border/outline */
.hp-hero__ctas .btn-primary,
.hp-pricing-card .btn-primary,
.hp-email-capture__btn,
.hp-final-cta .btn-primary,
.hp-unclaimed__cta,
.hp-bounty__cta,
.hp-cotd__cta,
.btn-primary {
  background: #00875A !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 2px 12px rgba(0, 135, 90, 0.25);
}
.btn-primary:hover {
  background: #006B4D !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 20px rgba(0, 135, 90, 0.35);
}
.btn-primary:focus-visible {
  outline: 2px solid #00875A !important;
  outline-offset: 2px !important;
  border: none !important;
}

/* Secondary buttons: solid light emerald fill, NO border */
.btn-secondary {
  background: #f0fdf4 !important;
  color: #00643E !important;
  border: none !important;
  outline: none !important;
}
.btn-secondary:hover {
  background: #d1fae5 !important;
  color: #00643E !important;
  border: none !important;
  outline: none !important;
}
.btn-secondary:focus-visible {
  outline: 2px solid #00875A !important;
  outline-offset: 2px !important;
  border: none !important;
}

/* Ghost buttons: no border/outline */
.btn-ghost {
  border: none !important;
  outline: none !important;
}
.btn-ghost:focus-visible {
  outline: 2px solid #00875A !important;
  outline-offset: 2px !important;
}

/* Full-width card buttons — pricing cards */
.btn-full {
  border: none !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════
   #6 — Light blue text on light pills — fix contrast
   Ensure all pills/badges have readable dark text or dark bg.
   ═══════════════════════════════════════════════════════════ */

/* Force all badges/pills with light backgrounds to use dark text */
.badge,
.badge-accent,
.badge-success,
.badge-warning,
.badge-error,
.badge-danger,
.badge-deadline-green,
.badge-deadline-yellow,
.badge-deadline-red {
  font-weight: 700 !important;
}

.badge-accent,
.badge-success,
.badge-deadline-green {
  background: #d1fae5 !important;
  color: #065F46 !important;
}

.badge-warning,
.badge-deadline-yellow {
  background: #FEF3C7 !important;
  color: #78350F !important;
}

.badge-error,
.badge-danger,
.badge-deadline-red {
  background: #FEE2E2 !important;
  color: #991B1B !important;
}

/* Category pills in SOTD/Feed: ensure contrast */
.hp-sotd__category,
.hp-sotd__badge {
  background: #d1fae5 !important;
  color: #065F46 !important;
  font-weight: 700;
}

.hp-feed-row__new {
  background: #d1fae5 !important;
  color: #065F46 !important;
  font-weight: 700;
}

/* Badge-dot/accent: force high-contrast */
.badge-dot::before {
  background: currentColor !important;
}

/* Bounty rank badges: ensure dark text on colored bg */
.hp-bounty-card__rank {
  color: #fff !important;
  font-weight: 800;
}

/* Unclaimed pills on dark section: already white text on dark — ok */
/* But enforce in case cascade overrides */
.hp-unclaimed__pill {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
}

/* ec-pill-filing: emerald fill, white text */
.ec-pill-filing {
  background: #00875A !important;
  color: #fff !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════
   #7 — Horizontal scrollbar on Verified Payouts
   Contain the payout cards within the viewport.
   ═══════════════════════════════════════════════════════════ */

/* Wrap payout cards instead of horizontal scroll */
.hp-payout-scroll {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  justify-content: center;
}

/* Cards: flexible width instead of fixed to fit in wrapped layout */
.hp-payout-card {
  flex: 0 1 220px !important;
  min-width: 180px !important;
  max-width: 260px !important;
}

/* Prevent page-level horizontal scroll from any section */
.hp-payouts {
  overflow-x: hidden !important;
}
.hp-payouts .container {
  overflow-x: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   #9 — Pricing alignment — left-aligned
   ═══════════════════════════════════════════════════════════ */

.hp-pricing__grid {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   #2 — Double search bar prevention
   Ensure only one search bar is visible at any time.
   ═══════════════════════════════════════════════════════════ */

/* Desktop: hide mobile search explicitly */
@media (min-width: 1024px) {
  .hn-mobile-search {
    display: none !important;
  }
}

/* Mobile: hide desktop search explicitly */
@media (max-width: 1023px) {
  .hn-search {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Mobile responsive fixes for all of the above
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Payout cards: single column on small screens */
  .hp-payout-scroll {
    justify-content: stretch;
  }
  .hp-payout-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  /* Pricing grid: single column on mobile */
  .hp-pricing__grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}