/*
 * Task #1473405 — CRITICAL: Homepage 10-point surgical fix
 *
 * This file owns: Nav, search dedup, contrast, buttons, pills, overflow, pricing alignment
 * Does NOT own: Base design-system tokens, font loading, layout-head armor
 *
 * Sections:
 *  1. SEARCH BAR DEDUP — ensure only one search visible per viewport
 *  2. BUTTON OUTLINES — clean emerald fills, no visible borders
 *  3. PILL CONTRAST — dark text on light pills
 *  4. HORIZONTAL SCROLL FIX — verified payouts overflow
 *  5. PRICING ALIGNMENT — left-align pricing grid content
 *  6. WHITE/INVISIBLE TEXT — contrast enforcement for homepage sections
 *  7. MOBILE 375px — all fixes verified at mobile viewport
 *  8. DESKTOP 1440px — all fixes verified at desktop viewport
 */


/* ═══════════════════════════════════════════════════════════
   1. SEARCH BAR DEDUP — only one visible search bar at any time
   Root cause: Desktop header search (.hn-search) and mobile menu
   search (.hn-mobile-search) could both render in the 769-1023px gap.
   Fix: Hide desktop search below 1024px, mobile search only shows
   inside the mobile menu (already hidden by default).
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
  .hn-header .hn-search {
    display: none !important;
  }
}

/* Mobile search only shows inside the mobile menu when open */
.hn-mobile-search {
  display: block;
}


/* ═══════════════════════════════════════════════════════════
   2. BUTTON OUTLINES — clean emerald fills only, no visible borders
   Root cause: .btn-secondary has 2px emerald border; .btn base has
   border: 2px solid transparent (visible outline on some browsers).
   Other buttons inherit outline/border from cascading rules.
   Fix: Remove visible borders on homepage CTA buttons, use solid fills.
   ═══════════════════════════════════════════════════════════ */

/* Primary buttons: solid emerald, NO outline */
.hp-hero__ctas .btn-primary,
.hp-unclaimed__cta,
.hp-cotd__cta,
.hp-email-capture__btn,
.hp-final-cta .btn-primary,
.hp-bounty__cta,
.hp-pricing-card .btn-primary,
.mobile-cta-bar .btn-primary,
.hn-sticky-bottom a {
  background: #00875A !important;
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.hp-hero__ctas .btn-primary:hover,
.hp-unclaimed__cta:hover,
.hp-pricing-card .btn-primary:hover,
.hp-email-capture__btn:hover {
  background: #006B4D !important;
  border: none !important;
}

/* Secondary/ghost buttons on homepage: remove visible outlines */
.hp-hero__ctas .btn-secondary {
  background: transparent !important;
  border: 2px solid #00875A !important;
  color: #00643E !important;
  -webkit-text-fill-color: #00643E !important;
}

.hp-hero__ctas .btn-secondary:hover {
  background: #f0fdf4 !important;
  border-color: #006B4D !important;
}

/* Ghost buttons: no border, just text */
.hp-feed__header .btn-ghost,
.hp-final-cta .btn-ghost {
  border: none !important;
  outline: none !important;
  color: #00875A !important;
  -webkit-text-fill-color: #00875A !important;
}

/* Full-width pricing card buttons: solid emerald fills */
.hp-pricing-card .btn-full {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: #00875A !important;
  border: none !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

.hp-pricing-card .btn-full:hover {
  background: #006B4D !important;
}

/* Bounty CTA link — no outline */
.hp-bounty__cta {
  border: none !important;
  outline: none !important;
}


/* ═══════════════════════════════════════════════════════════
   3. PILL CONTRAST — dark text on light pills
   Root cause: Some pills/badges use light blue text (#60A5FA, #93C5FD)
   on light backgrounds, yielding < 3:1 contrast ratio.
   Fix: Force dark text on all light-background pills on homepage.
   ═══════════════════════════════════════════════════════════ */

/* Category pills in homepage */
.hp-cat-card__name {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-cat-card__count {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* SOTD badges/categories */
.hp-sotd__category {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
}

/* Feed category pills */
.hp-feed-row__cat {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  background: #f3f4f6 !important;
}

/* Unclaimed category pills — these are on dark bg, keep light text */
.hp-unclaimed__pill {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
  background: rgba(241, 245, 249, 0.9) !important;
  border: 1px solid #e2e8f0 !important;
}

/* Badge pills — ensure all light badges have dark text */
.hp-sotd__badges .badge,
.hp-feed-row .badge,
.hp-bounty-card__deadline {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* Badge accent (trending) — green text on light green */
.badge-accent {
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
  background: #DCFCE7 !important;
}

/* Badge warning (most popular) — amber text on light amber */
.badge-warning {
  color: #92400E !important;
  -webkit-text-fill-color: #92400E !important;
  background: #FEF3C7 !important;
}

/* Badge deadline variants */
.badge-deadline-green {
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
  background: #DCFCE7 !important;
}

.badge-deadline-yellow {
  color: #92400E !important;
  -webkit-text-fill-color: #92400E !important;
  background: #FEF3C7 !important;
}

.badge-deadline-red {
  color: #991B1B !important;
  -webkit-text-fill-color: #991B1B !important;
  background: #FEE2E2 !important;
}

.badge-success {
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
  background: #DCFCE7 !important;
}

.badge-error {
  color: #991B1B !important;
  -webkit-text-fill-color: #991B1B !important;
  background: #FEE2E2 !important;
}


/* ═══════════════════════════════════════════════════════════
   4. HORIZONTAL SCROLL FIX — verified payouts section
   Root cause: .hp-payout-scroll uses overflow-x: auto but the
   parent .container doesn't constrain width, causing page-wide
   horizontal scrollbar when cards exceed viewport.
   Fix: Contain the scroll within the section, hide overflow on
   the parent, and ensure the scroll container uses max-width.
   ═══════════════════════════════════════════════════════════ */

.hp-payouts {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.hp-payouts .container {
  overflow: hidden !important;
  max-width: 100% !important;
}

.hp-payout-scroll {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* Prevent cards from pushing container wider than viewport */
  width: 100% !important;
}

/* Ensure no section causes page-wide horizontal scroll */
html, body {
  overflow-x: hidden;
}

/* Also constrain the bounty section and trust bar */
.hp-bounty,
.trust-bar,
.hp-unclaimed {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}


/* ═══════════════════════════════════════════════════════════
   5. PRICING ALIGNMENT — left-align pricing grid content
   Root cause: Pricing section uses centered text in cards.
   Fix: Left-align all pricing card content while keeping
   the grid itself centered on the page.
   ═══════════════════════════════════════════════════════════ */

.hp-pricing .container {
  max-width: 1200px;
}

.hp-pricing__grid {
  justify-content: start !important;
}

.hp-pricing-card {
  text-align: left !important;
}

.hp-pricing-card__header {
  text-align: left !important;
}

.hp-pricing-card__features {
  text-align: left !important;
}

.hp-pricing-card__features li {
  text-align: left !important;
}

/* Badge "Most Popular" stays centered above card */
.hp-pricing-card__badge {
  text-align: center !important;
}

/* Pricing note stays centered */
.hp-pricing__note {
  text-align: center !important;
}


/* ═══════════════════════════════════════════════════════════
   6. WHITE/INVISIBLE TEXT — contrast enforcement
   Root cause: Various CSS layers (armor, contrast-enforcement,
   design-system) can force white text or near-white text on
   light backgrounds. The hp-hero already gets special treatment
   in layout-head.ejs contrast block. Other sections may not.
   Fix: Explicit dark text on all light-background homepage sections.
   ═══════════════════════════════════════════════════════════ */

/* Hero section — ensure ALL text is visible on white bg */
.hp-hero__headline {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}

.hp-hero__sub {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}

.hp-hero__proof-text {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* Unclaimed section — dark bg, white text */
.hp-unclaimed {
  background: #06101F !important;
  color: #FFFFFF !important;
}

.hp-unclaimed__number {
  color: #00E5A0 !important;
  -webkit-text-fill-color: #00E5A0 !important;
}

.hp-unclaimed__label,
.hp-unclaimed__label strong {
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
}

.hp-unclaimed__eyebrow {
  color: rgba(255,255,255,0.7) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.7) !important;
}

.hp-unclaimed__cta {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: #00875A !important;
}

/* Steps section — dark text on light bg */
.hp-step__title {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-step__desc {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}

/* Section headings — always dark on light bg */
.section-heading {
  color: #0A1628 !important;
  -webkit-text-fill-color: #0A1628 !important;
}

.section-subheading {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}

.section-label {
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
}

/* Feed table text */
.hp-feed-row__company span {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-feed-table__head th {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

/* Testimonial text */
.hp-testimonial-card__quote {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

.hp-testimonial-card__name {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-testimonial-card__location {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

/* Pricing card text */
.hp-pricing-card__name {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-pricing-card__amount {
  color: #00875A !important;
  -webkit-text-fill-color: #00875A !important;
}

.hp-pricing-card__period {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

.hp-pricing-card__features li {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* Stats section — emerald values, dark labels */
.hp-stat__value,
.hp-stat__value .count-up {
  color: #00875A !important;
  -webkit-text-fill-color: #00875A !important;
}

.hp-stat__label {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* Payout cards */
.hp-payout-card__name {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-payout-card__amount {
  color: #00875A !important;
  -webkit-text-fill-color: #00875A !important;
}

.hp-payout-card__label {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

.hp-payout-card__settlement {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

/* Email capture section */
.hp-email-capture__headline {
  color: #0A1628 !important;
  -webkit-text-fill-color: #0A1628 !important;
}

.hp-email-capture__sub {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}

.hp-email-capture__note {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

/* Final CTA section */
.hp-final-cta__headline {
  color: #0A1628 !important;
  -webkit-text-fill-color: #0A1628 !important;
}

.hp-final-cta__note {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

/* For Business section */
.hp-for-business__title {
  color: #0A1628 !important;
  -webkit-text-fill-color: #0A1628 !important;
}

.hp-for-business__eyebrow {
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
}

.hp-for-business__card-name {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-for-business__card-desc {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}

.hp-for-business__card-link {
  color: #00875A !important;
  -webkit-text-fill-color: #00875A !important;
}

/* Bounty card text */
.hp-bounty__title {
  color: #0A1628 !important;
  -webkit-text-fill-color: #0A1628 !important;
}

.hp-bounty__sub {
  color: #4B5563 !important;
  -webkit-text-fill-color: #4B5563 !important;
}

.hp-bounty-card__title {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-bounty-card__company {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

.hp-bounty-card__payout {
  color: #00875A !important;
  -webkit-text-fill-color: #00875A !important;
}

/* COTD text */
.hp-cotd__title {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-cotd__company {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

.hp-cotd__blurb {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}

/* SOTD text */
.hp-sotd__title {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-sotd__card-title {
  color: #1F2A37 !important;
  -webkit-text-fill-color: #1F2A37 !important;
}

.hp-sotd__company {
  color: #6B7280 !important;
  -webkit-text-fill-color: #6B7280 !important;
}

.hp-sotd__payout {
  color: #00875A !important;
  -webkit-text-fill-color: #00875A !important;
}

/* Counter pill text */
.hp-counter__label {
  color: #065F46 !important;
  -webkit-text-fill-color: #065F46 !important;
}

.hp-counter__value {
  color: #00643E !important;
  -webkit-text-fill-color: #00643E !important;
}


/* ═══════════════════════════════════════════════════════════
   7. MOBILE 375px — all fixes verified at mobile viewport
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* Pricing grid stacks on mobile — left-aligned */
  .hp-pricing__grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Payout cards: prevent horizontal page scroll */
  .hp-payout-scroll {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .hp-payout-card {
    min-width: 200px !important;
    max-width: 240px !important;
  }

  /* Unclaimed pills: stack vertically on narrow screens */
  .hp-unclaimed__breakdown {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* Trust bar: wrap cleanly */
  .trust-bar {
    padding: 0.5rem 0.75rem !important;
    gap: 0.4rem 0.75rem !important;
  }

  /* All buttons: 48px+ touch targets */
  .hp-hero__ctas .btn,
  .hp-unclaimed__cta,
  .hp-email-capture__btn,
  .hp-pricing-card .btn-full,
  .hp-final-cta .btn,
  .hp-bounty__cta,
  .hp-cotd__cta {
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  /* No horizontal scroll anywhere */
  section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 375px) {
  /* Extra-tight mobile: tighten padding */
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .hp-bounty__grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .hp-testimonials__grid {
    gap: 0.75rem !important;
  }

  /* For Business cards: stack vertically */
  .hp-for-business__cards {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   8. DESKTOP 1440px — all fixes verified at desktop viewport
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* Pricing: 3-column grid, left-aligned content */
  .hp-pricing__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 1100px !important;
  }

  /* Payout scroll: contained within section */
  .hp-payout-scroll {
    max-width: 1200px !important;
    margin: 0 auto !important;
  }

  /* Ensure all dropdowns work — mega menus show on hover/click */
  .hn-mega.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Business mega menu: same styling as other mega menus */
  #hnMegaBusiness {
    /* Inherits from .hn-mega base styles in design-system.css */
  }
}