/* ==========================================================================
   OVERPLAY COMIC LEGAL PAGES STYLESHEET (comic-legal.css)
   Bespoke vibrant comic / pop-art theme for Privacy Policy & Terms of Service.
   High contrast, maximum legibility, zero mud, authentic comic styling.
   ========================================================================== */

body.page-legal {
  background-color: var(--comic-paper, #FFFDF2) !important;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.075) 1.3px, transparent 1.3px) !important;
  background-size: 18px 18px !important;
  background-position: 0 0 !important;
  background-attachment: fixed !important;
  color: var(--comic-ink, #000000) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
}

/* Fixed Manga Texture Background: Stays 100% stationary/fixed to viewport while scrolling */
body.page-legal::before,
body.comic-page.page-legal::before,
body#mainBody.page-legal::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-image: url('/images/manga-nav-bg.jpg') !important;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
  background-position: top center !important;
  background-attachment: fixed !important;
  opacity: 0.14 !important;
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translateZ(0) !important;
  will-change: transform !important;
}

body.page-legal main {
  position: relative !important;
  z-index: 10 !important;
}

/* Smooth scroll margin for sticky elements */
html {
  scroll-padding-top: 6rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   1. HERO HEADER BANNER
   ────────────────────────────────────────────────────────────────────────── */
.legal-hero-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 8px 8px 0px #000000 !important;
  border-radius: 20px !important;
  padding: clamp(1.25rem, 3.5vw, 2.25rem) !important;
  margin-bottom: 2rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.legal-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 4px 14px !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.legal-hero-title {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
  letter-spacing: 2px !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  text-shadow: 2px 2px 0px #FFE600, 4px 4px 0px #000000 !important;
  -webkit-text-stroke: 1.2px #000000;
}

.legal-hero-desc {
  color: #333333 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  margin-top: 10px !important;
  max-width: 48rem !important;
}

/* Quick Info Grid */
.legal-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-top: 3px solid #000000 !important;
  padding-top: 18px !important;
  margin-top: 20px !important;
}

@media (min-width: 768px) {
  .legal-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

.legal-info-box {
  background: #FFFDF2 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

.legal-info-label {
  display: block !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #555555 !important;
}

.legal-info-value {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #000000 !important;
  margin-top: 2px !important;
  word-break: break-word !important;
}

.legal-info-value.accent {
  color: #FF2E63 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. SIDEBAR TABLE OF CONTENTS (TOC)
   ────────────────────────────────────────────────────────────────────────── */
.toc-sticky {
  position: sticky !important;
  top: 5.5rem !important;
}

.legal-toc-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 8px 8px 0px #000000 !important;
  border-radius: 20px !important;
  padding: 18px !important;
}

.legal-toc-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 2.5px solid #000000 !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
}

.legal-toc-title {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 18px !important;
  letter-spacing: 1.5px !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.legal-toc-count {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  background: #00F0FF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 2.5px 2.5px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
}

.legal-toc-search {
  width: 100% !important;
  background: #FFFDF2 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  outline: none !important;
  margin-bottom: 14px !important;
  transition: all 0.2s ease !important;
}

.legal-toc-search:focus {
  border-color: #000000 !important;
  box-shadow: 4.5px 4.5px 0px #FFE600, 6.5px 6.5px 0px #000000 !important;
  background: #FFFFFF !important;
}

.legal-toc-search::placeholder {
  color: #888888 !important;
  font-weight: 600 !important;
}

.legal-toc-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  max-height: 58vh !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
}

.legal-toc-link {
  display: block !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1a1a24 !important;
  text-decoration: none !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 2px solid transparent !important;
}

.legal-toc-link:hover {
  background: #FFE600 !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 3.5px 3.5px 0px #000000 !important;
  transform: translateX(4px) !important;
}

.legal-toc-num {
  font-family: 'Bangers', cursive, sans-serif !important;
  color: #FF2E63 !important;
  font-size: 15px !important;
  margin-right: 6px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. MAIN LEGAL ARTICLES & SECTIONS
   ────────────────────────────────────────────────────────────────────────── */
.legal-article-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  box-shadow: 8px 8px 0px #000000 !important;
  border-radius: 20px !important;
  padding: clamp(1.25rem, 3.5vw, 2.25rem) !important;
  margin-bottom: 26px !important;
  position: relative !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.legal-section-badge {
  display: inline-block !important;
  background: #00F0FF !important;
  color: #000000 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  border-radius: 9999px !important;
  padding: 3px 14px !important;
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.legal-article-header {
  border-bottom: 3px solid #000000 !important;
  padding-bottom: 14px !important;
  margin-bottom: 20px !important;
}

.legal-article-title {
  font-family: 'Bangers', cursive, sans-serif !important;
  font-size: clamp(1.4rem, 2.8vw, 1.95rem) !important;
  letter-spacing: 1.5px !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}

.legal-subheading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  color: #000000 !important;
  margin-bottom: 8px !important;
}

.legal-section-border {
  border-left: 3.5px solid #FFE600 !important;
  padding-left: 16px !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}

.legal-text,
.legal-article-card p {
  color: #222222 !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
}

.legal-article-card strong {
  color: #000000 !important;
  font-weight: 800 !important;
}

.legal-list {
  list-style-type: disc !important;
  padding-left: 1.25rem !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  color: #222222 !important;
}

.legal-list li {
  color: #222222 !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

.legal-highlight-box {
  background: #FFFBE6 !important;
  border: 2.5px solid #000000 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  color: #000000 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

.legal-article-card a {
  color: #FF2E63 !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: all 0.15s ease !important;
}

.legal-article-card a:hover {
  background: #FFE600 !important;
  color: #000000 !important;
  text-decoration: none !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  box-shadow: 1.5px 1.5px 0px #000000 !important;
}