/**
 * =========================================
 * SHARED LEGAL PAGES STYLES
 * =========================================
 *
 * Standardized styles for all legal pages:
 * - About, Privacy, Rules, Terms
 *
 * Uses design tokens from /styles/main.css
 *
 * BUTTON USAGE:
 * - Use .btn classes from /styles/components/buttons.css
 * - Primary CTA: btn btn--primary btn--large btn--pill
 * - Secondary CTA: btn btn--outline btn--large btn--pill
 * - Small buttons: btn btn--secondary btn--small btn--pill
 */

/* ============================================
 * OVERFLOW PREVENTION - Global Rules
 * ============================================ */

/* Prevent overflow on all text and links */
.legal-main-container *,
.legal-page-wrapper * {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Prevent images and media from overflowing */
.legal-main-container img,
.legal-main-container video,
.legal-main-container iframe {
  max-width: 100%;
  height: auto;
}

/* Handle long URLs and code blocks */
.legal-main-container a,
.legal-main-container code,
.legal-main-container pre {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ============================================
 * LAYOUT - Consistent Container Sizing
 * ============================================ */

.legal-page-wrapper {
  width: 100%;
  max-width: var(--max-width-7xl, 80rem); /* 1280px */
  margin: 0 auto;
  padding: var(--spacing-container-mobile, 1rem);
  padding-bottom: 6rem; /* Space for footer */
}

@media (min-width: 768px) {
  .legal-page-wrapper {
    padding: var(--spacing-container-tablet, 1.5rem);
    padding-bottom: 6rem;
  }
}

@media (min-width: 1024px) {
  .legal-page-wrapper {
    padding: var(--spacing-container-desktop, 2rem);
    padding-bottom: 6rem;
  }
}

/* ============================================
 * MAIN CONTAINER - Glass Card Effect
 * ============================================ */

.legal-main-container {
  max-width: var(--max-width-4xl, 56rem); /* 896px - Better readability */
  margin: 1rem auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 1s ease-out;
  line-height: 1.7;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .legal-main-container {
    margin: 0.5rem auto;
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .legal-main-container {
    padding: 1rem;
  }
}

/* ============================================
 * BREADCRUMB NAVIGATION - Consistent Styling
 * ============================================ */

.breadcrumb {
  margin-bottom: 1.5rem;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  flex-wrap: wrap;
}

.breadcrumb-item {
  display: inline;
}

.breadcrumb-item a {
  color: #00ff88;
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-word;
}

.breadcrumb-item a:hover {
  color: #6c63ff;
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb-separator {
  margin: 0 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.6;
}

@media (max-width: 480px) {
  .breadcrumb-list {
    font-size: 0.85rem;
  }

  .breadcrumb-separator {
    margin: 0 0.3rem;
  }
}