/* --- coq-terminal-style.css --- */
/* Caves of Qud Inspired Terminal Style - Reusable */

/* Color Palette Variables */
:root {
  --coq-r: #a64a2e;
  /* dark red */
  --coq-R: #d74200;
  /* red */
  --coq-o: #f15f22;
  /* dark orange */
  --coq-O: #e99f10;
  /* orange */
  --coq-w: #98875f;
  /* brown */
  --coq-W: #cfc041;
  /* gold/yellow */
  --coq-g: #009403;
  /* dark green */
  --coq-G: #00c420;
  /* green */
  --coq-b: #0048bd;
  /* dark blue */
  --coq-B: #0096ff;
  /* blue */
  --coq-c: #40a4b9;
  /* dark cyan */
  --coq-C: #77bfcf;
  /* cyan */
  --coq-m: #b154cf;
  /* dark magenta */
  --coq-M: #da5bd6;
  /* magenta */
  --coq-k: #0f3b3a;
  /* dark black/grey */
  --coq-K: #155352;
  /* dark grey/black */
  --coq-y: #b1c9c3;
  /* grey */
  --coq-Y: #ffffff;
  /* white */
  --coq-true-black: #000000;

  /* Glow Effects */
  --glow-cyan: 0 0 1px var(--coq-C), 0 0 3px var(--coq-c), 0 0 5px var(--coq-b);
  --glow-magenta:
    0 0 3px var(--coq-M), 0 0 5px var(--coq-m), 0 0 7px var(--coq-b);
  --glow-green:
    0 0 3px var(--coq-G), 0 0 5px var(--coq-g), 0 0 7px var(--coq-k);
  --glow-yellow:
    0 0 3px var(--coq-W), 0 0 5px var(--coq-O), 0 0 7px var(--coq-w);
  --glow-red: 0 0 3px var(--coq-R), 0 0 5px var(--coq-o), 0 0 7px var(--coq-r);
}

/* Apply base styles to body or a specific container if needed */
body.coq-theme {
  /* Or apply to a wrapper div like <div class="coq-terminal"> */
  font-family:
    "Source Code Pro", "Consolas", "Courier New", "Courier", "Lucida Console";
  /* "Consolas", "Monaco", "Courier New", monospace; */
  line-height: 1.7;
  color: var(--coq-y);
  /* Default grey text */
  background-color: var(--coq-k);
  /* Dark background */
  /*     transparent 3px, */
  /*     transparent 6px); */
  /* background-attachment: fixed; */
  /* background-size: 100% 6px; */
  margin: -10px;
  padding: 30px 0 10px;
  min-height: 100vh;
  filter: brightness(1.2);
  position: relative;
  isolation: isolate;
}

body.coq-theme::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background-image: var(--coq-random-lines, none);
  background-size: var(--coq-random-lines-size, auto);
  background-position: var(--coq-random-lines-position, 0 0);
  background-repeat: var(--coq-random-lines-repeat, repeat);
  mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 30%,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0));
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

body.coq-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.4) 1px,
      transparent 1px,
      transparent 2px);

  background-attachment: fixed;
  background-size: 2px 3px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 999;
}

/* Basic Reset (Optional - depends on your existing CSS) */
.coq-theme * {
  /* box-sizing: border-box; Optional reset */
}

/* Container Styling (Optional - if you wrap content) */
.coq-theme .content-wrapper {
  position: relative;
  z-index: 1;
  max-width: 950px;
  margin: 0 auto;
  padding: 10px 42px;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid var(--coq-c);
  box-shadow: 0 0 15px rgba(119, 191, 207, 0.2);
  border-radius: 3px;

}

.coq-theme .coq-site-banner {
  margin-bottom: 25px;
  text-align: center;
}

.coq-site-banner__link {
  display: inline-block;
  color: var(--coq-Y);
  text-decoration: none;
  border-bottom: none;
  font-size: 2.8rem;
  letter-spacing: 0.04em;
}

/**/
/* .coq-theme .content-wrapper { */
/*   border: 17px solid transparent; */
/*   border-image-source: url("../images/border3.png"); */
/*   border-image-slice: 16; */
/*   border-image-repeat: round round; */
/*   border-image-width: 16px; */
/*   image-rendering: pixelated; */
/**/
/*   padding: 5px; */
/*   background-color: rgba(0, 0, 0, 0.4); */
/*   max-width: 950px; */
/*   margin: 30px auto; */
/* } */
/**/
/* Headings */
.coq-theme h1,
.coq-theme h2,
.coq-theme h3,
.coq-theme h4,
.coq-theme h5,
.coq-theme h6 {
  font-weight: normal;
  line-height: 1.4;
  margin-bottom: 15px;
  /* text-transform: uppercase; */
}

.coq-theme h1 {
  text-align: center;
  font-size: 2.1em;
  margin-top: 5px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--coq-C);
  padding-bottom: 10px;
  color: var(--coq-Y);
  /* text-shadow: var(--glow-cyan); */
}


.coq-theme h2 {
  font-size: 1.6em;
  margin-top: 35px;
  border-bottom: 1px solid var(--coq-g);
  padding-bottom: 8px;
  color: var(--coq-G);
  text-shadow: var(--glow-green);
}

.coq-theme h2::before {
  content: "⬒ ";
  color: var(--coq-C);
}


.coq-theme h3 {
  font-size: 1.2em;
  color: var(--coq-B);
  margin-top: 25px;
  text-shadow: var(--glow-cyan);
}

.coq-theme h3::before {
  content: " ⬓ ";
  color: var(--coq-B);
}


/* Paragraphs and Lists */
.coq-theme p,
.coq-theme li {
  margin-bottom: 14px;
  color: var(--coq-y);
}

.coq-theme ul,
.coq-theme ol {
  margin-left: 30px;
  margin-bottom: 18px;
  list-style-type: none;
}

.coq-theme ol {
  counter-reset: coq-ol;
}

.coq-theme ul li::before {
  content: "□";
  color: var(--coq-Y);
  margin-right: 8px;
  display: inline-block;
  width: 1em;
  margin-left: -1.2em;
}

.coq-theme ol li {
  counter-increment: coq-ol;
  position: relative;
  padding-left: 2.2em;
}

.coq-theme ol li::before {
  content: counter(coq-ol) ".";
  color: var(--coq-O);
  position: absolute;
  left: 0;
  top: 0;
  width: 2em;
  text-align: right;
}

.coq-theme ul li:has(> input[type="checkbox"]) {
  padding-left: 0;
}

.coq-theme ul li:has(> input[type="checkbox"])::before {
  display: none;
}

.coq-theme input[type="checkbox"] {
  vertical-align: text-bottom;
  /* position: relative; */
  /* transform: scale(0.2); */
  /* transform-origin: center; */
}

.coq-theme .coq-task {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-left: 0;
  padding-left: 0;
}

.coq-theme .coq-task::before {
  display: none;
}

.coq-theme .coq-taskbox {
  cursor: pointer;
  margin-top: 0.2em;
}

.coq-theme .coq-task--checked {
  text-decoration: line-through;
  color: var(--coq-y);
  opacity: 0.8;
}

/* Code Styling */
/* Inline code */
.coq-theme code {
  font-family: inherit;
  background-color: rgba(15, 59, 58, 0.4);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.95em;
  color: var(--coq-G);
  border: 1px double var(--coq-G);
}

/* Code block */
.coq-theme pre {
  background-color: rgba(15, 59, 58, 0.4);
  color: var(--coq-G);
  padding: 22px;
  border-radius: 3px;
  border: 1px double var(--coq-G);
  overflow-x: auto;
  margin: 18px 0 24px 0;
  font-size: 0.95em;
  line-height: 1.6;
  box-shadow: inset 0 0 8px rgba(0, 148, 3, 0.35);
}

.coq-theme pre code {
  font-family: inherit;
  background-color: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  border: none;
}

.coq-code-shell {
  margin: 20px 0;
}

.coq-code-shell--ready {
  border: 1px double var(--coq-G);
  border-radius: 3px;
  box-shadow: 0 0 18px rgba(119, 191, 207, 0.15);
  background-color: rgba(15, 59, 58, 0.4);
  overflow: hidden;
}

.coq-code-body {
  margin: 0;
  border-radius: 0 0 3px 3px;
}

/* Syntax token colors (Hugo/Chroma) */
.coq-theme pre code .nx,
.coq-theme pre code .nn,
.coq-theme pre code .nt {
  color: var(--coq-G);
}

.coq-theme pre code .k,
.coq-theme pre code .kd,
.coq-theme pre code .kn,
.coq-theme pre code .kp,
.coq-theme pre code .kr {
  color: var(--coq-C);
}

.coq-theme pre code .s,
.coq-theme pre code .s1,
.coq-theme pre code .s2,
.coq-theme pre code .sr {
  color: var(--coq-O);
}

.coq-theme pre code .m,
.coq-theme pre code .mi,
.coq-theme pre code .mf {
  color: var(--coq-W);
}

.coq-theme pre code .p,
.coq-theme pre code .o,
.coq-theme pre code .w {
  color: var(--coq-C);
}

.coq-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(15, 59, 58, 0.75);
  border-bottom: 1px solid rgba(0, 196, 32, 0.5);
  padding: 10px 18px;
  font-size: 0.78em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--coq-C);
  border-radius: 3px 3px 0 0;
}

.coq-code-label {
  opacity: 0.85;
}

.coq-code-copy {
  background-color: transparent;
  color: var(--coq-G);
  border: 1px solid var(--coq-G);
  border-radius: 2px;
  padding: 4px 12px;
  font-size: 0.65em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  min-width: 92px;
}

.coq-code-copy:hover {
  background-color: rgba(0, 148, 3, 0.2);
}

.coq-code-copy.is-copied {
  background-color: var(--coq-G);
  color: var(--coq-k);
}

.coq-code-shell pre {
  background-color: transparent !important;
  color: var(--coq-G) !important;
  border: none;
  margin: 0;
  padding: 14px 16px 16px 16px;
  overflow-x: auto;
  /* font-size: 0.92em; */
  line-height: 1.6;
}

.coq-code-shell code {
  background-color: transparent !important;
  border: none;
  padding: 0;
  color: inherit !important;
  display: block;
  counter-reset: coq-line;
}

.coq-code-shell code>span {
  display: block !important;
  padding-left: 2em;
  position: relative;
  counter-increment: coq-line;
}

.coq-code-shell code>span::before {
  content: counter(coq-line);
  position: absolute;
  left: 0;
  width: 1.4em;
  text-align: right;
  color: var(--coq-c);
  opacity: 0.55;
  /* font-size: 0.8em; */
}


/* Links */
.coq-theme a {
  color: var(--coq-C);
  text-decoration: underline dashed;
  text-decoration-color: var(--coq-C);
  transition: all 0.2s ease-in-out;
}

.coq-theme a.no-highlight {
  color: inherit;
  text-decoration: underline dashed;
  text-decoration-color: var(--coq-b);
  transition: all 0.2s ease-in-out;
}

.coq-theme a:hover {
  color: var(--coq-C);
  background-color: rgba(64, 164, 185, 0.1);
  text-decoration: underline solid;
  text-shadow: var(--glow-cyan);
}

/* Tables */
.coq-theme table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.95em;
  border: 1px solid var(--coq-c);
  box-shadow: 0 0 8px rgba(64, 164, 185, 0.15);
}

.coq-theme th,
.coq-theme td {
  border: 1px dashed var(--coq-K);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.coq-theme th {
  background-color: rgba(21, 83, 82, 0.5);
  color: var(--coq-C);
  /* text-transform: uppercase; */
  font-weight: normal;
}

.coq-theme tr:nth-child(even) td {
  background-color: rgba(15, 59, 58, 0.3);
}

.coq-theme tr:hover td {
  background-color: rgba(119, 191, 207, 0.1);
  color: var(--coq-Y);
}

.coq-theme td code {
  color: var(--coq-R);
  border-color: var(--coq-r);
}

/* Style for the keyword span generated by JS/Shortcode */
/* Add a subtle glow or base style if needed */
.coq-theme .keyword {
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
  /* Faint white glow */
}

.coq-theme span.keyword {
  display: inline-block;
  /* Prevents weird line breaks sometimes */
}

.coq-theme .keyword span {
  /* Individual letter spans */
}

/* Optional: Add other element styles (blockquotes, hr, etc.) */
.coq-theme hr {
  border: none;
  height: 2px;
  background-color: rgba(119, 191, 207, 0.8);
  box-shadow: 0 0 6px rgba(119, 191, 207, 0.35);
  margin: 30px 0;
}

.coq-theme blockquote {
  border-left: 3px solid var(--coq-m);
  margin-left: 10px;
  padding-left: 15px;
  color: var(--coq-C);
  background-color: rgba(15, 59, 58, 0.2);
  font-style: italic;
}

.coq-template-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
  margin: 20px 0 10px;
}

.coq-template-item {
  border: 1px solid var(--coq-g);
  padding: 12px;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: 0 0 6px rgba(119, 191, 207, 0.15);
}

.coq-template-name {
  font-family: "Source Code Pro", monospace;
  font-size: 0.9em;
  color: var(--coq-W);
}

.coq-template-preview {
  display: block;
  margin-top: 6px;
  font-size: 1em;
}

/* Figure helpers */
.coq-figure {
  margin: 1.5rem auto;
  text-align: center;
}

.coq-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.coq-figure figcaption {
  font-size: 0.9em;
  color: var(--coq-C);
  margin-top: 0.5rem;
}

.coq-cite-ref,
.coq-footnote-ref {
  font-size: 0.65em;
  margin-left: 0.2em;
}

.coq-cite-ref a,
.coq-footnote-ref a {
  color: var(--coq-C);
  text-decoration: none;
}

.coq-cite-ref a:hover,
.coq-footnote-ref a:hover {
  color: var(--coq-Y);
}

.coq-footnotes ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.coq-footnotes li {
  margin-bottom: 0.6em;
  display: flex;
  gap: 0.6em;
  align-items: baseline;
}

.coq-footnote-label {
  font-weight: bold;
  color: var(--coq-C);
  min-width: 2em;
}

.coq-figure.figure-split {
  display: inline-block;
  width: calc(50% - 0.75rem);
  margin: 0 0.75rem 1.5rem 0;
  vertical-align: top;
}

.coq-figure.figure-split:nth-of-type(2n) {
  margin-right: 0;
}

@media (max-width: 720px) {
  .coq-figure.figure-split {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}

/* Responsive Design Adjustments (Optional) */
@media (max-width: 768px) {

  .coq-theme body.coq-theme,
  .coq-theme .content-wrapper {
    font-size: 15px;
  }

  .coq-theme .content-wrapper {
    margin: 0 15px;
    padding: 15px;
  }

  .coq-theme h1 {
    font-size: 1.8em;
  }

  .coq-theme h2 {
    font-size: 1.4em;
  }

  .coq-theme h3 {
    font-size: 1.1em;
  }

  .coq-theme table,
  .coq-theme th,
  .coq-theme td {
    font-size: 0.9em;
    padding: 8px;
  }

  .coq-theme pre {
    padding: 12px;
    font-size: 0.85em;
  }
}
