/* SPDX-License-Identifier: CC0
 *
 * Thank you ChatGPT
 */
  
/* Reset some default styles */
body, h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #333;
  /* background-color: #f9f9f9; */
  padding: 10px;
}

/* Headings */
h1, h2, h3 {
  font-weight: bold;
  color: #222;
}

h1 {
  font-size: 2em;
  border-bottom: 2px solid #ddd;
  margin-bottom: 10px;
}

h2 {
  font-size: 1.5em;
  margin-top: 20px;
}

/* Links */
a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Paragraphs */
p {
  margin-bottom: 15px;
}

/* Lists */
ul {
  margin: 10px 0 15px 20px;
}

/* Container with square borders, full-viewport width */
.parody-details {
  display: block;
  width: 100%;                 /* full width of viewport */
  border-bottom: 1px solid #ddd; /* border only at bottom */
}

.parody-flag {
  height: 1em;
}

.parody-details > summary {
  font-weight: normal;   /* remove bold */
  font-size: 0.75rem;    /* make text smaller */
  padding: 0.3rem 0.3rem; /* light padding for click area */
  cursor: pointer;
  list-style: none;      /* remove marker space in Firefox */
}

/* Remove native disclosure triangle and any custom icon */
.parody-details > summary::-webkit-details-marker { display: none; }
/* No ::after content added, so there is no drop-down button */

/* Revealed panel: two columns */
.parody-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  border-top: 1px solid #eee;
}

/* Each column is its own 2-col grid: small image + text */
.parody-col {
  display: grid;
  grid-template-columns: auto 1fr; /* narrow image column + flexible text */
  column-gap: .75rem;
  align-items: start;              /* image top-aligned with text */
}

.thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  display: block;
}

/* Responsive: stack the two main columns on small screens */
@media (max-width: 700px) {
  .parody-row { grid-template-columns: 1fr; }
}

.parody-header {
  font-size: 14pt;
  font-weight: bold;
}

.linklike {
  color: #0066cc;
  cursor: pointer;          /* shows the hand cursor */
}

.linklike:hover {
  text-decoration: underline;
}

.floated {
  float: right;
  margin: 10px;
}

/* Dark theme - auto applies if user prefers dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }

  h1, h2, h3 {
    color: #ffffff;
    border-color: #333;
  }

  a {
    color: #66aaff;
  }

  .linklike {
    color: #66aaff;
  }

  .linklike:hover {
    color: #99cfff;
  }

  a:hover {
    color: #99cfff;
  }
}