/*
 * Task #1452842 — Homepage remaining visual issues
 *
 * Owns: Targeted fixes for oversized checkmarks, pill contrast, footer centering
 * Does NOT own: Layout structure, section order, design system tokens
 *
 * All values reference design-system.css tokens. No magic numbers.
 */

/* ═══════════════════════════════════════════════════════════
   1. OVERSIZED CHECKMARK ICONS — trust bar SVGs had no dimensions
   ═══════════════════════════════════════════════════════════ */

/* Trust bar checkmarks: enforce 16px inline size */
.trust-bar .trust-item-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Any stray SVGs in trust items without explicit sizing */
.trust-bar .trust-item svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   2. PILL / BADGE CONTRAST — WCAG AA minimum everywhere
   ═══════════════════════════════════════════════════════════ */

/*
 * The hp-unclaimed section uses --color-primary (#0A0A0A) background.
 * Pills inside it had rgba(255,255,255,0.1) backgrounds — nearly invisible
 * "lined bubbles" on dark. Fix: solid light-tint backgrounds with dark text.
 */
/* Task #1453281: pill border overrides moved to design-system.css §18c.
   Solid fills, no outlines — per Fortune 500 quality bar. */
.hp-unclaimed__pill {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
  border: none !important;
  backdrop-filter: none !important;
}

.hp-unclaimed__pill-dot {
  border: none !important;
}

/*
 * Badge/pill elements anywhere on the page: enforce WCAG-safe combos.
 * The design system already defines these, but override any rogue
 * dark-on-dark combos from inline styles or legacy CSS.
 */

/* Emerald/accent badges on white backgrounds: light-tint bg, dark text */
html body .badge-accent,
html body .badge-success,
html body .pill-accent,
html body .pill-emerald {
  background: var(--badge-success-bg, #E6F9F3) !important;
  color: var(--badge-success-color, #00643E) !important;
}

/* Warning badges */
html body .badge-warning,
html body .pill-warning {
  background: var(--badge-warning-bg, #FEF3C7) !important;
  color: var(--badge-warning-color, #92400E) !important;
}

/* Error badges */
html body .badge-error,
html body .badge-danger {
  background: var(--badge-error-bg, #FEF2F2) !important;
  color: var(--badge-error-color, #B91C1C) !important;
}

/* Deadline badges: ensure they always use light-tint backgrounds */
html body .badge-deadline-green {
  background: var(--badge-success-bg, #E6F9F3) !important;
  color: #047857 !important;
}
html body .badge-deadline-yellow {
  background: var(--badge-warning-bg, #FEF3C7) !important;
  color: #92400E !important;
}
html body .badge-deadline-red {
  background: var(--badge-error-bg, #FEF2F2) !important;
  color: #B91C1C !important;
}

/* Settlement of the Day badges */
html body .hp-sotd__badge {
  background: var(--badge-success-bg, #E6F9F3) !important;
  color: var(--badge-success-color, #00643E) !important;
}

html body .hp-sotd__category {
  color: var(--color-text-secondary, #6B7280) !important;
  background: transparent !important;
}

/* Feed row "New" badge */
html body .hp-feed-row__new {
  background: var(--badge-success-bg, #E6F9F3) !important;
  color: var(--badge-success-color, #00643E) !important;
}

/* Feed row category text */
html body .hp-feed-row__cat {
  color: var(--color-text-secondary, #6B7280) !important;
  background: transparent !important;
}

/* Category card icons: light emerald bg, emerald icon */
html body .hp-cat-card__icon {
  background: var(--badge-success-bg, #E6F9F3) !important;
  color: var(--color-accent, #00B37D) !important;
}

/* Pricing "Most Popular" badge */
html body .hp-pricing-card__badge {
  background: var(--color-accent, #00B37D) !important;
  color: #FFFFFF !important;
}

/* ── Footer trust strip badges ── */
/* The Veteran-Owned badge had dark blue (#0f2d1f) text which is fine on white,
   but must not combine with dark backgrounds elsewhere */
html body .sr-ft-trust-item {
  color: var(--color-text, #1F2A37) !important;
  -webkit-text-fill-color: var(--color-text, #1F2A37) !important;
}

/* ═══════════════════════════════════════════════════════════
   3. FOOTER CENTERING — bottom bar address/terms pushed left
   ═══════════════════════════════════════════════════════════ */

/* Force center alignment on the footer bottom section */
html body .sr-ft-bottom-section {
  text-align: center !important;
  width: 100% !important;
}

html body .sr-ft-bottom-bar {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 24px 0 32px !important;
}

html body .sr-ft-copy {
  text-align: center !important;
  width: 100% !important;
}

html body .sr-ft-address {
  text-align: center !important;
  width: 100% !important;
  color: var(--color-text-secondary, #6B7280) !important;
  font-size: 0.78rem !important;
}

html body .sr-ft-terms-links {
  text-align: center !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 0.78rem !important;
}

html body .sr-ft-terms-links a {
  color: var(--color-text-secondary, #6B7280) !important;
  text-decoration: none !important;
}

html body .sr-ft-terms-links a:hover {
  color: var(--color-accent, #00B37D) !important;
}

/* ═══════════════════════════════════════════════════════════
   4. FOOTER COLUMNS — ensure <details> sections show on desktop
   ═══════════════════════════════════════════════════════════ */

/* On desktop (≥1024px): force all footer column links visible */
@media (min-width: 1024px) {
  html body .sr-ft-columns {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 40px 28px !important;
  }

  /* Force details elements open on desktop */
  html body .sr-ft-col-details,
  html body details.sr-ft-col-details {
    overflow: visible !important;
  }

  html body .sr-ft-col-details > .sr-ft-col-links,
  html body details.sr-ft-col-details > .sr-ft-col-links,
  html body .sr-ft-col-details .sr-ft-col-links,
  html body details.sr-ft-col-details .sr-ft-col-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  /* Column headers: non-interactive on desktop */
  html body .sr-ft-col-details > summary,
  html body details.sr-ft-col-details > summary {
    pointer-events: none !important;
    cursor: default !important;
  }

  /* Hide the accordion chevron on desktop */
  html body .sr-ft-col-details > summary::after,
  html body details.sr-ft-col-details > summary::after {
    display: none !important;
  }
}

/* Tablet (640–1023px): 3-column grid, links visible */
@media (min-width: 640px) and (max-width: 1023px) {
  html body .sr-ft-columns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 24px !important;
  }

  html body .sr-ft-col-details .sr-ft-col-links,
  html body details.sr-ft-col-details .sr-ft-col-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
  }

  html body .sr-ft-col-details > summary::after {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   5. TRUST BAR LAYOUT — ensure proper inline display
   ═══════════════════════════════════════════════════════════ */

/* Trust bar: horizontal strip with centered items */
.trust-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px 16px !important;
  padding: 16px var(--container-padding, 24px) !important;
  background: var(--color-bg-alt, #F5F5F7) !important;
  border-top: 1px solid var(--color-border, #E5E7EB) !important;
  border-bottom: 1px solid var(--color-border, #E5E7EB) !important;
}

/* Trust items: inline-flex with proper sizing */
.trust-bar .trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--color-text, #1F2A37) !important;
  white-space: nowrap !important;
}

/* Trust separators */
.trust-bar .trust-item-sep {
  color: var(--color-border, #D1D5DB) !important;
  font-size: 0.7rem !important;
}

/* Mobile: stack trust items */
@media (max-width: 768px) {
  .trust-bar {
    gap: 6px 12px !important;
    padding: 12px 16px !important;
    font-size: 0.75rem !important;
  }
  .trust-bar .trust-item {
    font-size: 0.75rem !important;
  }
  .trust-bar .trust-item-icon {
    width: 14px !important;
    height: 14px !important;
  }
  .trust-bar .trust-item svg {
    width: 14px !important;
    height: 14px !important;
  }
}