/*
 * visual-fixes-1582185.css — Task #1582185
 * Owns: 8 visual layout and contrast fixes from site audit
 * Does NOT own: page-specific content, design system base, navigation logic
 *
 * Fixes:
 *  1. Disclaimer hero — contrast fail (WCAG text color insufficient contrast ratio)
 *  2. Find-my-settlements — blank bottom (missing/insufficient bottom padding on matches grid)
 *  3. No-proof-required — broken tab pills (pill button alignment/overflow on mobile)
 *  4. About page — blank gap (hero section padding inconsistency)
 *  5. Contact page — icon misalignment (contact info icon vertical centering)
 *  6. Categories page — text truncated (settlement category title text overflow)
 *  7. Mobile homepage — trust bar 3 rows (trust logos should be 1-2 rows max at 375px)
 *  8. Mobile sticky elements — sticky header/CTA covers page content (z-index collision)
 */

/* ═══════════════════════════════════════════════════════════════
   FIX 1: Disclaimer hero — contrast fail
   Root cause: Text color insufficient contrast ratio against hero
   background (likely #666 text on light bg or similar).
   Fix: Enforce proper contrast with darker text color or stronger weight.
   ═══════════════════════════════════════════════════════════════ */
.disclaimer-hero,
.disclaimer-hero h1,
.disclaimer-hero p,
[class*="disclaimer"][class*="hero"],
[class*="disclaimer"][class*="header"] {
  color: #1a1a1a !important;
}

.disclaimer-hero h1 {
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 2: Find-my-settlements — blank bottom
   Root cause: Settlement match cards grid has no bottom padding,
   causing last row to appear cut off or misaligned.
   Fix: Add bottom padding to settlements grid container.
   ═══════════════════════════════════════════════════════════════ */
[class*="find-my-settlement"],
[class*="settlement-match"],
[class*="match-card"][class*="grid"],
.settlement-matches-grid,
.matches-grid,
[class*="settlement"][class*="grid"] {
  padding-bottom: 2rem !important;
}

/* Ensure card container has proper spacing */
.settlement-match-card,
.match-card,
[class*="match-card"] {
  margin-bottom: 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 3: No-proof-required — broken tab pills
   Root cause: Tab pill buttons overflow horizontally on mobile,
   causing misalignment or text wrap in pill buttons.
   Fix: Make pills flex-wrap on mobile, ensure consistent sizing.
   ═══════════════════════════════════════════════════════════════ */
.no-proof-tabs,
.no-proof-required-tabs,
[class*="no-proof"][class*="tab"],
[class*="proof"][class*="pill"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.no-proof-tab-pill,
.tab-pill,
[class*="tab"][class*="pill"],
[class*="no-proof"][class*="btn"] {
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .no-proof-tabs,
  .no-proof-required-tabs,
  [class*="no-proof"][class*="tab"],
  [class*="proof"][class*="pill"] {
    gap: 0.375rem !important;
  }

  .no-proof-tab-pill,
  .tab-pill,
  [class*="tab"][class*="pill"] {
    padding: 0.375rem 0.875rem !important;
    font-size: 0.9rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 4: About page — blank gap
   Root cause: Hero section has inconsistent padding or margin,
   creating blank space below hero image/content.
   Fix: Normalize hero padding and ensure proper spacing to next section.
   ═══════════════════════════════════════════════════════════════ */
.about-hero,
[class*="about"][class*="hero"],
[class*="about"][class*="header"],
.page-hero[class*="about"] {
  padding-bottom: 3rem !important;
  margin-bottom: 0 !important;
}

.about-hero + *,
[class*="about"][class*="hero"] + * {
  margin-top: 0 !important;
  padding-top: 2rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 5: Contact page — icon misalignment
   Root cause: Contact info icons (phone, email, etc.) not vertically
   centered with their adjacent text labels.
   Fix: Apply flexbox alignment to contact info items.
   ═══════════════════════════════════════════════════════════════ */
.contact-info,
[class*="contact"][class*="item"],
[class*="contact-method"],
.contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.contact-icon,
.contact-info-icon,
[class*="contact"][class*="icon"],
[class*="info-icon"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 2rem !important;
  height: 2rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 6: Categories page — text truncated
   Root cause: Settlement category titles or headings exceed container
   width and overflow instead of wrapping.
   Fix: Apply proper text wrapping and word-break behavior.
   ═══════════════════════════════════════════════════════════════ */
.categories-grid,
[class*="categor"][class*="grid"],
[class*="category-card"],
.category-item {
  overflow: hidden !important;
}

.category-title,
.categories-title,
[class*="categor"][class*="title"],
[class*="category"][class*="name"],
.category-header h2,
.category-header h3 {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
}

/* Ensure category cards have proper height for titles */
.category-card,
[class*="category-card"],
[class*="categor"][class*="card"] {
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ═══════════════════════════════════════════════════════════════
   FIX 7: Mobile homepage — trust bar 3 rows
   Root cause: Trust logos/badges arranged vertically in 3 rows
   instead of fitting in 1-2 rows at 375px mobile width.
   Fix: Reduce spacing, scale down logos, apply flex-wrap.
   ═══════════════════════════════════════════════════════════════ */
.trust-bar,
.trust-logos,
[class*="trust"][class*="bar"],
[class*="trust"][class*="logo"],
[class*="social-proof"],
.social-proof-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

@media (max-width: 480px) {
  .trust-bar,
  .trust-logos,
  [class*="trust"][class*="bar"],
  [class*="social-proof"],
  .social-proof-badges {
    gap: 0.5rem !important;
  }

  .trust-logo,
  .trust-badge,
  [class*="trust"][class*="badge"],
  .social-proof-item,
  [class*="social-proof"][class*="item"] {
    width: auto !important;
    max-width: 100px !important;
    height: auto !important;
    max-height: 50px !important;
    flex-shrink: 1 !important;
  }

  .trust-logo img,
  .trust-badge img,
  [class*="trust"] img,
  .social-proof-item img {
    width: 100% !important;
    height: auto !important;
    max-width: 90px !important;
    max-height: 40px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 8: Mobile sticky elements — sticky header/CTA covers page content
   Root cause: Sticky header, mobile nav, or sticky CTA button has
   z-index >= content z-index, causing overlap and unreadability.
   Fix: Establish proper z-index stacking context: content < sticky < overlay/modal.
   ═══════════════════════════════════════════════════════════════ */

/* Ensure sticky header has appropriate z-index but doesn't exceed modals */
header[class*="sticky"],
.sticky-header,
.mobile-sticky-header,
nav[class*="sticky"],
[class*="sticky"][class*="nav"] {
  z-index: 100 !important;
}

/* Sticky CTA buttons should have a slightly higher z-index than header but lower than modals */
.sticky-cta,
.mobile-cta,
[class*="sticky"][class*="cta"],
[class*="sticky"][class*="btn"],
.cta-sticky,
button[class*="sticky"] {
  z-index: 105 !important;
}

/* Page content should have z-index lower than sticky */
main,
.page-content,
[role="main"],
.main-content {
  z-index: 1 !important;
  position: relative !important;
}

/* Modals and overlays should always be above sticky elements */
.modal,
[role="dialog"],
.overlay,
[class*="modal"],
[class*="overlay"],
.popup,
.popup-modal,
.alert-dialog {
  z-index: 1000 !important;
}

/* Additional safety: if content is hidden behind sticky, add top margin to body/main */
@media (max-width: 768px) {
  body.has-sticky-header,
  body[class*="sticky"],
  html[class*="sticky"] {
    scroll-padding-top: 60px !important;
  }

  main,
  .page-content,
  [role="main"] {
    scroll-margin-top: 60px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DEFENSIVE RULES: Ensure no conflicting older CSS breaks these fixes
   ═══════════════════════════════════════════════════════════════ */

/* Prevent text truncation via text-overflow for category titles */
.category-title,
[class*="category-title"],
[class*="category"][class*="name"],
.categories-title {
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
}

/* Ensure grid layouts wrap instead of overflow */
.settlement-matches-grid,
.matches-grid,
.settlements-grid,
.categories-grid,
[class*="grid"] {
  overflow: visible !important;
}