/*
  Beautiful & Enhanced Comic Book Style CSS
  A more polished and visually rich take on the vintage comic aesthetic.
*/

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');

/* --- CSS Variables --- */
:root {
  /* Vibrant, comic-inspired color palette */
  --color-paper: #f7f3e8;
  --color-panel-bg: #ffffff;
  --color-accent-green: #28a745; /* A friendly, positive green */
  --color-accent-blue: #0096c7;
  --color-accent-yellow: #ffc300;
  --color-accent-purple: #8338ec;
  --color-ink-black: #1c1c1c;

  /* Fonts */
  --font-headings: 'Bangers', cursive;
  --font-body: 'Comic Neue', sans-serif;

  /* Borders & Shadows */
  --border-ink: 3px solid var(--color-ink-black);
  --border-radius-slight: 4px;
  --shadow-hard-offset: 6px;
  --shadow-hard: var(--shadow-hard-offset) var(--shadow-hard-offset) 0 var(--color-ink-black);
}

/* --- Base & Background --- */
body {
  background-color: var(--color-paper);
  /* Subtle noise texture for a more authentic paper feel */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
  opacity: 0.9;
  
  color: var(--color-ink-black);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  padding: 2rem;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 1.5rem 0 1rem;
}

/* Big, double-shadowed headings */
h1, h2, h3 {
  -webkit-text-stroke: 1.5px var(--color-ink-black);
  /* Default shadow for h1 */
  text-shadow:
    3px 3px 0 var(--color-ink-black),
    6px 6px 0 var(--color-accent-purple);
}

h1 {
  font-size: clamp(4rem, 10vw, 6rem);
  color: var(--color-accent-yellow);
}

h2 {
  font-size: clamp(3rem, 8vw, 4rem);
  color: var(--color-accent-blue);
  /* Shadow override for h2 */
  text-shadow:
    3px 3px 0 var(--color-ink-black),
    6px 6px 0 var(--color-accent-yellow);
}

h3 {
  font-size: clamp(2.2rem, 7vw, 3rem);
  color: var(--color-accent-green);
  /* Shadow override for h3 */
  text-shadow:
    3px 3px 0 var(--color-ink-black),
    6px 6px 0 var(--color-accent-blue);
}

/* Smaller, single-shadowed heading */
h4 {
  font-size: clamp(1.8rem, 6vw, 2.5rem);
  color: var(--color-accent-blue);
  -webkit-text-stroke: 1px var(--color-ink-black);
  text-shadow: 3px 3px 0 var(--color-ink-black);
}

/* Simpler stroked heading */
h5 {
  font-size: clamp(1.4rem, 5vw, 2rem);
  color: var(--color-accent-purple);
  -webkit-text-stroke: 1px var(--color-ink-black);
}

/* Simplest ink heading */
h6 {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  color: var(--color-ink-black);
  letter-spacing: 1px;
}

p { margin-bottom: 1rem; }

a, a:visited {
  color: var(--color-accent-blue);
  text-decoration: none;
  font-weight: 700;
  padding-bottom: 2px;
  border-bottom: 3px solid var(--color-accent-yellow);
  transition: color 0.2s, border-bottom-color 0.2s;
}

a:hover, a:active {
  color: var(--color-accent-purple);
  border-bottom-color: var(--color-accent-blue);
}

/* --- Comic Panel --- */
.comic-panel {
  background: var(--color-panel-bg);
  border: var(--border-ink);
  border-radius: var(--border-radius-slight);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  position: relative;
  /* Hard offset shadow + subtle inner glow for depth */
  box-shadow: var(--shadow-hard), inset 0 0 15px rgba(0,0,0,0.1);
}

/* --- Interactive Button --- */
.btn-comic {
  display: inline-block;
  background: var(--color-accent-blue);
  color: var(--color-ink-black);
  -webkit-text-stroke: 1px white;
  text-shadow: 1px 1px 0 white; /* Fallback for non-webkit */

  padding: 12px 24px;
  font-family: var(--font-headings);
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--border-ink);
  border-radius: var(--border-radius-slight);
  box-shadow: var(--shadow-hard);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
  cursor: pointer;
}

.btn-comic:hover {
  background: var(--color-accent-yellow);
  color: var(--color-ink-black);
  -webkit-text-stroke: 0;
  text-shadow: none;
  transform: translate(-3px, -3px);
  box-shadow: calc(var(--shadow-hard-offset) + 3px) calc(var(--shadow-hard-offset) + 3px) 0 var(--color-ink-black);
}

.btn-comic:active {
  transform: translate(var(--shadow-hard-offset), var(--shadow-hard-offset));
  box-shadow: 0 0 0 var(--color-ink-black);
}

/* --- Textures & Patterns --- */
.halftone-dot {
  background: 
    radial-gradient(circle, rgba(217, 4, 41, 0.5) 2px, transparent 2.5px),
    var(--color-panel-bg);
  background-size: 10px 10px;
}

.halftone-lines {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(0, 150, 199, 0.3),
      rgba(0, 150, 199, 0.3) 5px,
      transparent 5px,
      transparent 10px
    ), var(--color-panel-bg);
}


/* --- Sound Effect Text --- */
.sound-effect {
  display: inline-block;
  font-family: var(--font-headings);
  font-size: clamp(3rem, 10vw, 5rem);
  color: var(--color-accent-yellow);
  -webkit-text-stroke: 2px var(--color-ink-black);
  text-shadow: 4px 4px 0 var(--color-ink-black), -4px -4px 0 var(--color-accent-purple);
  transform: rotate(-8deg);
  position: relative;
  margin: 2rem;
}

/* --- Speech Bubble (Refined) --- */
.speech-bubble {
  position: relative;
  background: var(--color-panel-bg);
  border: var(--border-ink);
  border-radius: 40px;
  padding: 1.5rem;
  max-width: 400px;
  margin: 3rem 0;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 30px;
  height: 30px;
  background: var(--color-panel-bg);
  border: var(--border-ink);
  border-top-color: transparent;
  border-left-color: transparent;
  transform: translate(-50%, 50%) rotate(45deg);
  box-shadow: 4px 4px 0 var(--color-ink-black);
}

/* --- Table of Contents Specific Styles --- */

/* General reset for links in the TOC container to remove the default underline */
#toc-container a,
#toc-container a:visited {
    border-bottom: none;
    font-weight: normal; /* Reset from default link style */
}

/* Chapter & Appendix Title Links */
#toc-container h3 a,
#toc-container div.mb-4 > a {
    color: var(--color-accent-blue);
    font-family: var(--font-headings);
    font-size: 1.5rem;
    letter-spacing: 1px;
    transition: color 0.2s;
    display: inline-block;
    padding: 4px 0;
}

#toc-container h3 a:hover,
#toc-container div.mb-4 > a:hover {
    color: var(--color-accent-purple);
}

/* --- Reusable Comic Badge Style --- */
.comic-badge {
    /* Font and Text Style */
    font-family: var(--font-headings); /* Use 'Bangers' font */
    font-size: 1rem;
    letter-spacing: 1px;
    color: white !important;
    -webkit-text-stroke: 1px var(--color-ink-black); /* Add a thin black outline */
    text-shadow: 1px 1px 0 var(--color-ink-black); /* Add a slight shadow for depth */

    /* Sizing, Border, and Spacing */
    padding: 0.4em 0.6em 0.2em; /* Fine-tune padding for Bangers font */
    border: 2px solid var(--color-ink-black);
    border-radius: var(--border-radius-slight);
    vertical-align: middle; /* Align better with the text */
    transition: background-color 0.2s !important;
}

/* Applying the color from the framework's classes */
.comic-badge.bg-primary {
    background-color: var(--color-accent-blue) !important;
}
a:hover .comic-badge.bg-primary {
    background-color: var(--color-accent-purple) !important;
}

.comic-badge.bg-secondary {
    background-color: var(--color-accent-green) !important;
}
a:hover .comic-badge.bg-secondary {
    background-color: var(--color-accent-purple) !important;
}


/* Section links within the nested list */
#toc-container ul li a {
    color: #555;
    font-family: var(--font-body);
    font-weight: 700;
    display: block;
    padding: 6px 12px;
    border-radius: var(--border-radius-slight);
    transition: color 0.2s, background-color 0.2s, transform 0.2s;
}

#toc-container ul li a:hover {
    background-color: var(--color-accent-yellow);
    color: var(--color-ink-black);
    transform: translateX(4px);
}

/* --- TOC H2 Style Override --- */
#toc-container h2.card-title {
    /* Reset any sticker/vintage styles */
    display: block;
    transform: none;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 1rem 0;
    margin-bottom: 1.5rem !important;
    position: static;
    text-align: left;
    
    /* Apply standard H2 comic style, overriding the .h4 utility class */
    font-size: clamp(3rem, 8vw, 4rem) !important;
    color: var(--color-accent-blue) !important;
    -webkit-text-stroke: 1.5px var(--color-ink-black);
    text-shadow: 3px 3px 0 var(--color-ink-black), 6px 6px 0 var(--color-accent-yellow);
    
    /* Restore the border from the original element, but themed */
    border-bottom: var(--border-ink) !important;
}

/* --- Hero Button on Homepage --- */
.btn-hero {
  /* Make it larger */
  padding: 14px 32px;
  font-size: 1.8rem;
  letter-spacing: 2px;
  
  /* Add pulsing animation */
  animation: pulse-shadow 2.5s infinite;
}

@keyframes pulse-shadow {
  0% {
    box-shadow: var(--shadow-hard);
  }
  50% {
    box-shadow: calc(var(--shadow-hard-offset) + 4px) calc(var(--shadow-hard-offset) + 4px) 0px var(--color-accent-purple);
  }
  100% {
    box-shadow: var(--shadow-hard);
  }
}

/* --- Reusable Comic Title Effect --- */
.comic-title-effect {
    font-family: var(--font-headings);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent-yellow);
    -webkit-text-stroke: 1.5px var(--color-ink-black);
    text-shadow: 2px 2px 0 var(--color-ink-black), 4px 4px 0 var(--color-accent-purple);
    text-decoration: none;
    font-weight: normal; /* Override Bootstrap's fw-bold */
    border-bottom: none !important; /* Override default link style */
    padding-bottom: 0 !important;
}

.comic-title-effect:hover, .comic-title-effect:active {
    border-bottom: none !important; /* Ensure no underline on hover */
}

/* Specific styling for the navbar brand to override Bootstrap */
.navbar-light .navbar-brand.comic-title-effect {
    font-size: 2rem;
    line-height: 1;
    color: var(--color-accent-yellow); /* Explicitly set color here */
}

/* Navbar hover state */
.navbar-light .navbar-brand.comic-title-effect:hover {
    color: var(--color-accent-purple);
}

/* Specific font size for the footer */
.footer .comic-title-effect {
    font-size: 1.8rem;
    line-height: 1;
}

/* --- Comic Style for Code Blocks --- */
.prose pre {
    background-color: var(--color-panel-bg);
    border: var(--border-ink);
    border-radius: var(--border-radius-slight);
    box-shadow: var(--shadow-hard);
    padding: 1.5rem;
    white-space: pre-wrap;       /* Wrap long lines */
    word-break: break-all;     /* Break long words/strings */
    margin-bottom: 2rem;
}

.prose pre code {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.1rem;
    color: var(--color-ink-black);
    background: none; /* No background on the inner code element */
    padding: 0;
    -webkit-text-stroke: 0; /* No stroke on code */
    text-shadow: none; /* No shadow on code */
}

/* For inline <code> tags within paragraphs */
.prose p > code {
    font-family: 'Source Code Pro', monospace;
    background-color: rgba(255, 255, 255, 0.6);
    border: 2px solid var(--color-ink-black);
    color: var(--color-ink-black);
    padding: 0.1em 0.4em;
    border-radius: var(--border-radius-slight);
    font-size: 1rem;
    -webkit-text-stroke: 0;
    text-shadow: none;
}
/* --- Comic Style for Images --- */
.prose img {
    /* Make images responsive */
    max-width: 100%;
    height: auto;
    display: block; /* To handle margins correctly */
    margin: 2rem auto; /* Center images and give them space */

    /* Add comic book styling */
    border: var(--border-ink);
    border-radius: var(--border-radius-slight);
    box-shadow: var(--shadow-hard);
}
/* --- Comic Style for Lists --- */
.prose ul,
.prose ol {
    list-style: none;
    padding-left: 1.5rem;
}

.prose li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: 0.75rem;
}

/* Unordered List Bullets */
.prose ul > li::before {
    content: '■'; /* A solid square */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-accent-blue);
    text-shadow: 2px 2px 0px var(--color-ink-black);
}

/* Ordered List Numbers */
.prose ol {
    counter-reset: list-counter;
}

.prose ol > li::before {
    counter-increment: list-counter;
    content: counter(list-counter);
    position: absolute;
    left: -0.5rem;
    top: -0.2rem;
    
    /* Style it like a badge */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.2rem;
    height: 2.2rem;
    background-color: var(--color-accent-yellow);
    border: 2px solid var(--color-ink-black);
    border-radius: 50%; /* Make it a circle */
    font-family: var(--font-headings);
    font-size: 1.2rem;
    color: var(--color-ink-black);
    text-shadow: 1px 1px 0px white;
}