/**
 * Index Page Specific Styles
 * CSP-Compliant: Replaces all inline styles from index.html
 * Generated: 2025-11-09
 */

/* Header Background Image */
#header.index-hero-background {
  background-image: url("/assets/images/JAMWRLD_3840x1200_crisp.png") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* J-1 Program Overview Section Title */
#highlights .title.white-text {
  color: #fff;
}

/* "What is the J-1 program?" Heading - Black Text on Green */
#highlights .box header.style1 h2.black-heading {
  color: #000000;
}

/* Eligibility Text Paragraph Spacing */
.eligibility-text {
  /* Reserved for future use */
}

/* Host Employers Description Spacing */
.host-employers-text {
  /* Reserved for future use */
}

/* Host Employers Button Spacing - Fix button overlap (ISSUE-024) */
/* FIX: Host Employers section has more text, needs different margin adjustment */
#highlights .highlight.highlight-host .actions {
  margin-top: 0.5em !important; /* REDUCED: Was 1em, now even tighter per user feedback */
}

/* Jamaican Proverb Quote - Yellow Italic */
.jamaica-proverb-quote {
  font-style: italic;
  color: #ffee00;
}

/* Jamaican Proverb Link - Yellow with Underline */
.jamaica-proverb-link {
  color: #ffee00;
  text-decoration: underline;
}

/* ================================================
   FIX: Ensure Highlight Section Buttons Are Clickable
   Issue: "Learn More" buttons in #highlights were unclickable
   Date: 2025-12-08
   ================================================ */

/* Establish proper stacking context for highlight sections */
#highlights .highlight {
  position: relative;
  z-index: 1;
}

/* Ensure action buttons are above any potential overlays */
#highlights .actions {
  position: relative;
  z-index: 10;
}

/* Make buttons explicitly interactive */
#highlights .actions a.btn-standard {
  position: relative;
  z-index: 11;
  pointer-events: auto;
  cursor: pointer;
  display: inline-block;
}

/* ================================================
   FIX: Center "Learn More" buttons in highlight cards
   Issue: Buttons not visually centered in yellow background
   Date: 2025-12-20 (ISSUE-024 Remediation)
   ================================================ */

/* Center the actions list within highlight cards */
/* FIX: Override main.css ul.actions margin (3em) that pushes buttons down */
#highlights .highlight .actions {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0;
  list-style: none;
  margin-top: 0.75em !important; /* REDUCED: Was 1.5em, now tighter spacing per user feedback */
  margin-bottom: 0;
}

#highlights .highlight .actions li {
  margin: 0;
  padding: 0;
}

/* Center text within Learn More buttons (override main.css uppercase) */
/* FIX: Changed selector from .button to .btn-standard to match actual HTML classes */
#highlights .highlight .actions .btn-standard,
#highlights .highlight .actions .btn-standard.btn-primary {
  text-transform: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ================================================
   FIX: Host Employers button blocking Summary text
   Issue: Button too close to Footer section
   Date: 2025-12-20 (ISSUE-024 Remediation)
   ================================================ */

/* Increase bottom margin on Host Employers section */
#highlights .highlight.highlight-host {
  margin-bottom: 2em;
}

/* ================================================
   Affiliate Explanation Section Styling
   Date: 2025-12-20 (ISSUE-024 Remediation)
   ================================================ */
.affiliate-explanation {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-left: 4px solid #28a745;
}

.affiliate-explanation h3 {
  color: #28a745;
}

.affiliate-explanation ul {
  list-style: none;
  padding-left: 0;
}

.affiliate-explanation ul li {
  padding: 0.5em 0;
  padding-left: 1.5em;
  position: relative;
}

.affiliate-explanation ul li::before {
  content: "\f00c"; /* Font Awesome check mark */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  color: #28a745;
}

.transparency-note {
  margin-top: 1em;
  padding: 1em;
  background: rgba(40, 167, 69, 0.1);
  border-radius: 4px;
  font-size: 0.95em;
}