/*
 * Task #1581941: Critical Visual Audit Fixes
 *
 * CRITICAL #6: /disclaimer hero badge WCAG AA contrast
 *   The badge text (#047857 dark green) on the badge background fails WCAG AA
 *   (2.6:1 ratio). Change to white text. Badge background stays semi-transparent
 *   green — white text achieves 13:1+ contrast. Hero text (h1 + sub) already fixed.
 *
 * CRITICAL #7: /blog missing thumbnail placeholders
 *   Placeholder divs (.ch-card-img-placeholder, .ch-featured-card-img-placeholder)
 *   render as blank white rectangles because they lack explicit dimensions.
 *   Add min-height, full dimensions, visible border + gradient to make them clearly
 *   readable when images fail to load.
 *
 * CRITICAL #8: /find-my-settlements massive blank whitespace
 *   mobile-ux-fixes-1581944.css sets padding-bottom: calc(60px+60px+16px)=136px
 *   on mobile, creating a massive empty gap below the quiz card.
 *   Override with 80px — sufficient clearance above mobile sticky bars (60px),
 *   no empty gap. Also cap desktop padding to prevent excess.
 */

/* ─────────────────────────────────────────────────────────
   1. DISCLAIMER HERO BADGE — White text for WCAG AA
   Apply with high specificity to beat inline styles
───────────────────────────────────────────────────────── */

/* Use html body to match mobile-ux-fixes specificity (0,1,1) and override */
html body .policy-hero-badge,
html body .policy-hero .policy-hero-badge {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Slightly increase badge background opacity for better visibility on dark hero */
html body .policy-hero-badge {
  background: rgba(0, 135, 90, 0.25) !important;
  border-color: rgba(0, 135, 90, 0.45) !important;
}

/* ─────────────────────────────────────────────────────────
   2. BLOG IMAGE PLACEHOLDERS — Visible on image error
   No height set → renders as blank white rectangle.
   Add explicit min-height + full dimensions + border to make visible.
───────────────────────────────────────────────────────── */

.ch-card-img-placeholder,
.ch-featured-card-img-placeholder {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 180px !important;
  width: 100% !important;
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 50%, #f0fdf8 100%) !important;
  border: 1px solid #a7f3d0 !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.05em !important;
  color: #00643e !important;
}

/* SVG icon before the text */
.ch-card-img-placeholder::before,
.ch-featured-card-img-placeholder::before {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 8px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300863f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat !important;
  opacity: 0.6 !important;
}

/* Skeleton pulse — clearly indicates loading, not missing */
@keyframes ch-img-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.ch-card-img-placeholder,
.ch-featured-card-img-placeholder {
  animation: ch-img-skeleton-pulse 1.8s ease-in-out infinite !important;
}

/* Featured card placeholder — larger variant */
.ch-featured-card-img-placeholder {
  min-height: 280px !important;
}

/* ─────────────────────────────────────────────────────────
   3. FIND-MY-SETTLEMENTS BLANK WHITESPACE — Cap excessive padding
   Override the calc(60px+60px+16px)=136px rule from mobile-ux-fixes-1581944.css
   with a more reasonable 80px — sufficient clearance above mobile sticky bars,
   no massive blank gap below the quiz card.
───────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .fms2-page {
    /* Reduce from 136px (calc 60+60+16) to 80px — reasonable clearance above sticky bars */
    padding-bottom: 80px !important;
  }
}

/* Desktop: cap at 3rem — prevents excessive gap on large viewports */
@media (min-width: 768px) {
  .fms2-page {
    padding-bottom: 3rem !important;
  }
}