/**
 * About Page Specific Styles
 * Extracted from inline <style> tag for CSP compliance
 * See CLAUDE.md - Security & Design Best Practices Mandate
 * Date: 2025-10-31
 */

/* NOTE: Floating icon styles removed - now handled by shared CSS files:
   - profile-hub.css
   - floating-icons-extended.css
   - support-container.css
   See ISSUE-024 for details.
*/


/* Accessibility: darken content surface so brand colors clear the green backdrop */
body.about-page article.box.post {
  background: linear-gradient(165deg, #04180d 0%, #0c2617 55%, #133821 100%);
  border: 2px solid rgba(255, 238, 0, 0.3);
  border-radius: 14px;
  padding: 3em;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
  color: #e8e8e8;
}

/* Support Section Styles */
.support-section {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border: 3px solid #ffee00;
  border-radius: 15px;
  padding: 3em;
  margin: 3em 0;
  text-align: center;
}

.support-section h2 {
  color: #ffee00;
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

.support-section p {
  color: #ffffff;
  font-size: 1.2em;
  line-height: 1.8;
  margin-bottom: 1.5em;
}

.support-section .highlight {
  background: linear-gradient(135deg, #ffee00 0%, #28a745 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

.support-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2em;
  margin: 2em 0;
}

.support-option {
  background: #2a2a2a;
  border: 2px solid #ffee00;
  border-radius: 10px;
  padding: 2em;
  transition: all 0.3s ease;
}

.support-option:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(255, 238, 0, 0.3);
}

.support-option i {
  font-size: 3em;
  color: #ffee00;
  margin-bottom: 0.5em;
}

.support-option h3 {
  color: #ffee00; /* Changed from green to yellow for better visibility on dark background */
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

.support-option p {
  color: #ffffff;
  font-size: 1em;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* NOTE: Floating icon mobile styles removed - now in shared CSS files:
     - profile-hub.css
     - floating-icons-extended.css
     - support-container.css
     See ISSUE-024 for details.
  */

  .support-section {
    padding: 2em 1.5em;
  }

  .support-section h2 {
    font-size: 2em;
  }

  .support-options {
    grid-template-columns: 1fr;
  }

  body.about-page article.box.post {
    padding: 2em 1.5em; /* Accessibility: keep dark panel readable on smaller screens */
  }
}

/* Content Styling - Enhanced for Readability & Accessibility */
/* UPDATED: Improved text visibility and WCAG AA contrast compliance */
/* All color combinations meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text) */
/* Yellow (#ffee00) on content card: ≥ 14:1 contrast (WCAG AAA) */
/* White (#ffffff) on content card: ≥ 16:1 contrast (WCAG AAA) */
/* Green (#28a745) on content card: 5.6:1 contrast (WCAG AA+) */

article h2 {
  color: #ffee00; /* High contrast yellow - WCAG AA compliant */
  font-size: 2em;
  margin-top: 2em; /* Increased from 1.5em for better section separation */
  margin-bottom: 0.8em; /* Increased from 0.5em to match TOS style */
  border-bottom: 3px solid #28a745; /* Increased from 2px for better visibility */
  padding-bottom: 0.3em;
  font-weight: bold; /* Added for better heading distinction */
}

article h3 {
  color: #28a745; /* Green for subheadings - WCAG AA compliant */
  font-size: 1.5em;
  margin-top: 1.5em; /* Increased from 1.2em for better spacing */
  margin-bottom: 0.6em; /* Increased from 0.5em */
  font-weight: bold; /* Added for better heading distinction */
}

article h4 {
  color: #ffffff; /* White for h4 - matches TOS style */
  font-size: 1.2em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: bold;
}

/* Enhanced paragraph readability */
article p {
  color: #e8e8e8; /* Improved from default - better contrast against dark background */
  font-size: 1.05em; /* Slightly larger for better readability */
  line-height: 1.8; /* Matches TOS style for optimal reading */
  margin-bottom: 1.2em; /* Consistent spacing between paragraphs */
}

article ul,
article ol {
  margin-left: 2em;
  line-height: 1.8; /* Consistent with paragraph line-height */
  color: #e8e8e8; /* Improved contrast */
}

article ul li,
article ol li {
  margin-bottom: 0.6em; /* Increased from 0.5em for better separation */
}

article strong {
  color: #ffee00; /* High visibility yellow */
  font-weight: bold;
}

article a {
  color: #ffffff; /* White links for proper contrast on green background */
  text-decoration: underline;
  font-weight: bold; /* Added weight for better visibility */
  transition: color 0.3s ease;
}

article a:hover {
  color: #ffee00; /* Yellow on hover for visibility */
}

.about-intro {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); /* Dark background override */
  border-left: 5px solid #ffee00;
  padding: 2em;
  margin: 2em 0;
  border-radius: 8px;
}

/* Override for about-intro links to use green since it has dark background */
.about-intro a {
  color: #28a745 !important;
}

.about-intro p {
  color: #ffffff; /* White text for maximum contrast in intro box */
  font-size: 1.2em;
  line-height: 1.8;
  margin-bottom: 1em;
}

/* Important box styling - matches TOS page style */
.important-box {
  background: #2a2a2a;
  border-left: 5px solid #ffee00;
  padding: 1.5em;
  margin: 1.5em 0;
  border-radius: 5px;
}

.important-box p {
  color: #ffffff;
  margin-bottom: 0.5em;
  line-height: 1.8;
}

/* ===== TEXT OVERFLOW FIX - Domain Zero Standard ===== */
body.about-page article.box.post,
body.about-page article h2,
body.about-page article h3,
body.about-page article h4,
body.about-page article p,
body.about-page article li {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================
   CSP Compliance: Inline Style Removal
   See CLAUDE.md - Security & Design Best Practices Mandate
   Date: 2025-10-31
   ============================================ */

/* Header Background - Line 32-37 */
/* Use ID selector to override main.css #header rule (specificity) */
#header.about-hero-background {
  background-image: url("/assets/images/JAMWRLD_3840x1200_crisp.png") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Support Section Links - Line 484 */
.about-highlight-link {
  color: #ffee00;
  font-weight: bold;
  text-decoration: underline;
}

/* Support Section Note - Line 498 */
.about-support-note {
  margin-top: 2em;
  font-size: 1em;
  color: #ffffff;
}

/* Support Section Advertising Notice - Line 504 */
.about-advertising-notice {
  font-size: 1.1em;
  margin-top: 1.5em;
}

/* Support Section Thank You - Line 511 */
.about-thank-you {
  font-size: 1.3em;
  margin-top: 2em;
  color: #ffee00;
}

/* Join Conversation Welcome - Line 532 */
.about-welcome-message {
  font-size: 1.3em;
  color: #ffee00;
  text-align: center;
  margin-top: 2em;
}

/* Horizontal Rule (Divider) - Line 536 */
.about-divider {
  margin: 2em 0;
  border-color: #ffee00;
}

/* Version Footer - Line 538 */
.about-version-footer {
  text-align: center;
  color: #999999;
  font-size: 0.9em;
}

/* Closing Quote - Line 541 */
.about-closing-quote {
  text-align: center;
  font-style: italic;
  color: #ffee00;
  margin-top: 1.5em;
  font-size: 1.1em;
  line-height: 1.8;
}

/* ============================================
   Footer Color Matching
   Ensure about.html footer matches faq.html footer exactly
   Date: 2025-10-31
   ============================================ */

/* Override any potential color inheritance from about-page theme */
/* Using multiple selectors with maximum specificity to ensure override */
body.about-page #footer,
body.about-page #footer.wrapper,
body.about-page section#footer,
body.about-page section#footer.wrapper {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

body.about-page #footer h1,
body.about-page #footer h2,
body.about-page #footer h3,
body.about-page #footer h4,
body.about-page #footer h5,
body.about-page #footer h6,
body.about-page #footer strong,
body.about-page #footer b,
body.about-page #footer a {
  color: #fff !important;
}

body.about-page #footer .title {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #eee !important;
}

/* Ensure footer container has black background */
body.about-page #footer .container {
  background: transparent !important;
}

/* Override any wrapper styling that might add background */
body.about-page #footer div,
body.about-page #footer .row {
  background: transparent !important;
}