/* Section: Rules Repository
   Apply by setting menu Page Class to: section-rules
   Goal: Cyberpunk-themed rules display with clean readability
*/

body.section-rules {
  --rules-bg: #0a0a0a;
  --rules-surface: #1a1a1a;
  --rules-accent: #a78bfa;
  --rules-accent-2: #38bdf8;
  --rules-text: #e6f0ff;
  --rules-text-secondary: #9bb4d8;
  --rules-glow: rgba(167, 139, 250, 0.4);
  background: radial-gradient(1200px 800px at 50% -10%, #1a051a 0%, #0a0a0a 55%, #000000 100%) fixed;
  color: var(--rules-text);
}

/* Navbar and Footer styling */
.section-rules .navbar,
.section-rules .footer {
  background: #0f0f0f !important;
  border-bottom: 1px solid rgba(167, 139, 250, 0.25);
}

/* Content container */
.section-rules .siteBody .container { 
  max-width: 1400px;
}

.section-rules main { 
  padding: 1rem 0; 
}

/* Typography - maintain readability with cyberpunk aesthetic */
.section-rules h1 { 
  color: var(--rules-accent);
  text-shadow: 0 0 20px var(--rules-glow);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.section-rules h2,
.section-rules h3 { 
  color: var(--rules-accent-2);
}

.section-rules h2 { 
  margin-top: 2rem;
  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
  padding-bottom: .5rem;
}

.section-rules p { 
  line-height: 1.75;
  font-size: 1.05rem;
  color: var(--rules-text-secondary);
}

/* Links */
.section-rules a {
  color: var(--rules-accent);
  transition: color 0.3s ease;
}

.section-rules a:hover {
  color: var(--rules-accent-2);
}

/* Code styling */
.section-rules code,
.section-rules pre {
  background: #0f0f0f;
  padding: .2rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(167, 139, 250, 0.2);
  color: var(--rules-accent-2);
}

/* Hide breadcrumbs on rules pages */
.section-rules .breadcrumbs { 
  display: none;
}

/* EOTG Rules Module Integration */
.section-rules .mod-eotg-rules {
  /* Override module's background if needed */
  background: transparent;
}

/* Ensure module blends with page background */
.section-rules .mod-eotg-rules::before {
  /* Module already has grid background; optionally enhance or disable */
  opacity: 0.3;
}

/* Optional: Add subtle glow to module headers when on rules section */
.section-rules .eotg-rules-header h1 {
  text-shadow: 0 0 30px var(--rules-glow), 0 0 60px rgba(230, 57, 70, 0.15);
}

/* Panel/Card styling for other content on rules pages */
.section-rules .card,
.section-rules .well,
.section-rules .panel {
  background: linear-gradient(180deg, rgba(26, 5, 26, 0.78), rgba(15, 3, 15, 0.9));
  backdrop-filter: blur(6px);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 12px;
}

/* Forms and inputs */
.section-rules input,
.section-rules select,
.section-rules textarea {
  background: #0f0f0f;
  color: var(--rules-text);
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 8px;
}

.section-rules input:focus,
.section-rules select:focus,
.section-rules textarea:focus {
  border-color: var(--rules-accent-2);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
  outline: none;
}

/* Buttons */
.section-rules .btn,
.section-rules button {
  background: linear-gradient(135deg, var(--rules-accent), #c084fc);
  border: 0;
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: all 0.3s ease;
}

.section-rules .btn:hover,
.section-rules button:hover {
  background: linear-gradient(135deg, #c084fc, var(--rules-accent));
  box-shadow: 0 6px 24px rgba(167, 139, 250, 0.35);
  color: white;
}

/* Tables */
.section-rules table,
.section-rules .table {
  color: var(--rules-text);
  border-color: rgba(167, 139, 250, 0.2);
}

.section-rules table thead {
  background: rgba(167, 139, 250, 0.1);
  color: var(--rules-accent);
}

.section-rules table tbody tr:hover {
  background: rgba(56, 189, 248, 0.05);
}

/* Lists - maintain readability */
.section-rules ul,
.section-rules ol {
  color: var(--rules-text-secondary);
}

.section-rules li {
  margin-bottom: 0.5rem;
}

/* Strong/Bold text */
.section-rules strong {
  color: var(--rules-accent);
  font-weight: 600;
}

/* Emphasis/Italic text */
.section-rules em {
  color: var(--rules-text);
  font-style: italic;
}

/* Blockquotes */
.section-rules blockquote {
  border-left: 4px solid var(--rules-accent);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: var(--rules-text-secondary);
  background: rgba(167, 139, 250, 0.05);
  padding: 1rem 1.5rem;
  border-radius: 4px;
}

/* Scrollbar styling for consistency */
.section-rules ::-webkit-scrollbar {
  width: 10px;
}

.section-rules ::-webkit-scrollbar-track {
  background: #0a0a0a;
}

.section-rules ::-webkit-scrollbar-thumb {
  background: var(--rules-accent);
  border-radius: 5px;
}

.section-rules ::-webkit-scrollbar-thumb:hover {
  background: var(--rules-accent-2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-rules .siteBody .container {
    padding: 10px;
  }
  
  .section-rules h1 {
    font-size: 2rem;
  }
  
  .section-rules .mod-eotg-rules {
    padding: 10px;
  }
}