/* 
   Digital Grimoire - Main Stylesheet
   A retro-futuristic cyberpunk aesthetic inspired by 90s web design
*/

/* Import pixel-style font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variable definitions */
:root {
  /* Base colors */
  --background: #141110;
  --background-glow: none;
  --text: #e6d9c3;
  --text-glow: #692D19;

  --link: #ffd025;
  --link-glow: #f4a60b;
  --link-hover: #FAE5C1;
  --accent: #00ff00;
  --border: none;
  
  /* Realm-specific base colors - will be overridden by realm CSS */
  --realm-color: #f4a60b;
  --realm-glow: none;
  --realm-bg: #0000ff;
  --realm-accent: #D6B9AA;
  --realm-border: #402A23;
  --realm-decoration: #1f202a;
  
  --validation-code-fg: #0F0303;
  --validation-code-bg: #DFD5D1;
  --validation-code-info: #191717;
}

@font-face {
  font-family: Alegreya;
  src: url(/static/fonts/Alegreya.woff2) format('woff2');
  font-weight: 450;
}
@font-face {
  font-family: Alegreya-Bold;
  src: url(/static/fonts/Alegreya.woff2) format('woff2');
  font-weight: 700;
}
@font-face {
  font-family: Alegreya-Italic;
  src: url(/static/fonts/Alegreya-Italic.woff2) format('woff2');
  font-style: italic;
  font-weight: 500;
}

@font-face {
  font-family: IBMPlexMono;
  src: url(/static/fonts/IBMPlexMono.woff2) format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: IBMPlexMono-Bold;
  src: url(/static/fonts/IBMPlexMono.woff2) format('woff2');
  font-weight: 700;
}
@font-face {
  font-family: IBMPlexMono-Italic;
  src: url(/static/fonts/IBMPlexMono-Italic.woff2) format('woff2');
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: Inter;
  src: url(/static/fonts/Inter.woff2) format('woff2');
  font-weight: 500;
}
@font-face {
  font-family: Inter-Bold;
  src: url(/static/fonts/Inter.woff2) format('woff2');
  font-weight: 800;
}
@font-face {
  font-family: Inter-Italic;
  src: url(/static/fonts/Inter-Italic.woff2) format('woff2');
  font-style: italic;
  font-weight: 550;
}

.fas{
	color: #20A36A;
	text-shadow: 0 0 10px #49E363;
}

.fab{
	color: var(--text);
	text-shadow: 0 0 10px var(--text-glow), 0 0 6px var(--realm-accent), 0 0 3px var(--realm-accent);
}
  
/* Body styles */

body {
  background-image: url('/static/images/noise.gif');
  background-repeat: repeat;
  background-color: var(--background);
  color: var(--text);
  font-family: Alegreya;
  line-height: 1.5;
  font-size: 1.2rem;
  text-shadow: 0 0 10px var(--text-glow), 0 0 6px var(--realm-accent), 0 0 3px var(--realm-accent);
  cursor: default;
}

body strong {
    font-family: Alegreya-Bold;
    text-shadow: 0 0 12px var(--text-glow), 0 0 8px var(--realm-accent), 0 0 4px var(--realm-accent);
}

body b {
  font-family: Alegreya-Bold;
  text-shadow: 0 0 12px var(--text-glow), 0 0 8px var(--realm-accent), 0 0 4px var(--realm-accent);
}

body i {
  font-family: Alegreya-Italic;
  color: var(--realm-border);
  text-shadow: 0 0 12px #FFF9F1, 0 0 9px #F9EEE6, 0 0 6px var(--text-glow), 0 0 2px var(--link-hover);
}

.preview {
  font-size: 1.0rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.preview a {
	font-family: Alegreya-Bold;
	font-style: italic;
	color: var(--link);
	text-shadow: 0 0 6px var(--text-glow);
}

.preview a:hover {
	font-family: Alegreya-Bold;
	font-style: italic;
	color: var(--link-hover);
	text-shadow: 0 0 8px var(--link-hover);
}

.featured-meta a {
	font-family: Alegreya-Bold;
	font-size: 0.9rem;
	color: var(--link);
	text-shadow: 0 0 6px var(--text-glow);
}

.featured-meta a:hover {
	text-shadow: 0 0 6px var(--link-glow);
}

.featured-meta a::before,
.featured-meta a::after {
	content: none;
}

.featured i {
  font-family: Inter-Bold;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--realm-color);
  text-shadow: 0 0 12px var(--text-glow), 0 0 6px var(--text-glow), 0 0 3px var(--text-glow);
}
.featured b {
  font-family: Inter;
  font-style: italic;
  font-weight: 300;
  font-size: 1.2rem;
  color: var(--realm-color);
  text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
}
.featured {
  font-family: Inter;
  font-style: italic;
  color: var(--realm-color);
  font-size: 1.4rem;
  margin-top: 0rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
}

.featured-meta {
  font-family: Alegreya;
  font-style: italic;
  color: var(--realm-color);
  font-size: 0.9rem;
  padding-top: 0;
  word-spacing: 0.15rem;
  text-shadow: 0 0 10px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
}



.site-title{
  margin-top: 0rem;
  margin-bottom: 0rem;
  font-style: italic;
  font-family: Inter;
  text-transform: uppercase;
  font-size: 1.7rem;
  text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
}


.site-title-commons i {
  font-family: Inter-Bold;
  font-style: italic;
  font-size: 2.1rem;
  color: var(--realm-color);
  text-shadow: 0 0 16px var(--text-glow), 0 0 10px var(--text-glow), 0 0 4px var(--text-glow);
}
.site-title-commons b {
  font-family: Inter-Bold;
  font-style: italic;
  font-size: 2.1rem;
  color: var(--text);
  text-shadow: 0 0 16px var(--text-glow), 0 0 10px var(--text-glow), 0 0 4px var(--text-glow);
}
.site-title-commons {
  font-family: Inter;
  font-style: italic;
  color: var(--realm-color);
  font-size: 2.1rem;
  text-transform: uppercase;
  text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
}


.content-body {
    margin-top: 1rem;
}

.content-body a {
    font-family: Alegreya-Bold;
    font-style: italic;
	padding-right: 0.1rem;
	text-shadow: 0 0 6px var(--text-glow);
}

.content-body p a strong {
	text-shadow: 0 0 8px var(--text-glow);
}

.content-body p a:hover strong {
	text-shadow: 0 0 8px var(--link-hover);
}

.content-body a:hover strong {
	text-shadow: 0 0 8px var(--link-hover);
}

.content-body a:hover {
	color: var(--link-hover);
	text-shadow: 0 0 6px var(--link-hover);
}

.content-body a::before {
  content: "";
}

.content-body a::after {
  content: "";
}

.content-body h2 {
	font-family: Alegreya-Bold;
	text-shadow: 0 0 12px var(--text-glow), 0 0 8px var(--realm-accent), 0 0 4px var(--realm-accent);
}

/* Container for content */
.container {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  border: none;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 8px var(--background-glow);
}

/* Header styles */
header {
  border-bottom: 1px dashed var(--border);
  padding-bottom: 1rem;
  margin-bottom: 0;
  text-align: center;
}

.tag-page h1,
.tags-page h1 {
	font-family: Inter-Italic;
	letter-spacing: 0px;
	font-style: italic;
	text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
	margin-bottom: 2rem;
	text-transform: uppercase;
}

.tag-page h1 i,
.tags-page h1 i {
	font-family: Inter;
	color: var(--text);
	letter-spacing: 0px;
	font-style: italic;
	text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
	margin-bottom: 2rem;
	text-transform: uppercase;
}

.content-header h1 {
	font-family: Inter-Italic;
	font-size: 2rem;
	letter-spacing: 0px;
	font-style: italic;
	text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
	margin-bottom: 0rem;
	text-transform: uppercase;
}

.domain-index h1 {
	font-family: Inter-Italic;
	letter-spacing: 0px;
	font-style: italic;
	text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
	margin-bottom: 0rem;
	text-transform: uppercase;
}

.authors-page h1 {
	text-transform: uppercase;
	font-style: italic;
	margin-bottom: 0rem;
	font-family: Inter-Italic;
	text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
}

.search-page h1 {
	text-transform: uppercase;
	font-style: italic;
	margin-bottom: 0rem;
	font-family: Inter-Italic;
	text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
}

.search-title {
	text-transform: uppercase;
	font-style: italic;
	margin-bottom: 0rem;
	text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
}

header h1 {
  font-family: Inter;
  font-size: 1.7rem;
  margin-bottom: 0rem;
  text-transform: uppercase;
}

header h1 b {
  font-family: Inter-Bold;
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

header h1 i {
  font-family: Inter-Italic;
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

header nav {
  font-family: Alegreya-Bold;
  font-size: 1.1rem;
  margin-top: 1rem;
  padding-bottom: 0rem;
}

header nav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  flex-wrap: wrap;
}

header nav ul li {
  margin: 0 0.5rem;
  position: relative;
}

.main-nav li::before {
  content: "[";
  color: var(--text-glow);
  margin-right: 0.25rem;
  top: -1px;
}

.main-nav li::after {
  content: "]";
  color: var(--text-glow);
  margin-left: 0.25rem;
  top: -1px;
}

.main-nave a:hover {
    color: var(--link-hover);
    text-shadow: 0 0 8px var(--link-hover);
}

.main-nav li:hover::before {
  content: "[";
  top: -1px;
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--link-hover);
  
}

.main-nav li:hover::after {
  content: "]";
  top: -1px;
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--link-hover);
}


.main-nav {
	margin-bottom: 1rem;
}
.main-nav ul {
	margin-bottom: 0rem;
	margin-top: 0.25rem;
}

/* Main content styles */
main {
  min-height: 60vh;
  padding: 1rem;
  border-top: 1.5px dashed var(--realm-border);
  border-bottom: 1.5px dashed var(--realm-border);
  margin-bottom: 2rem;
  position: relative;
  overflow: visible;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, var(--realm-glow, var(--realm-border)) 0%, transparent 100%);
  opacity: 0.3;
  pointer-events: none;
}


.top-decoration::before {
	content: var(--realm-top-decoration, '');
}

.top-decoration {
    position: absolute;
    top: -28px; /* Position slightly below the border */
    left: 50%;
	white-space: nowrap;
    transform: translateX(-50%); /* Center horizontally */
    background-color: none; /* Match your page background */
    padding: 0 5px; /* Create space around the text */
    font-size: 2.2rem; /* Adjust size as needed */
    color: var(--realm-decoration);
    text-shadow: 0 0 12px var(--background), 0 0 8px var(--background), 0 0 4px var(--background);
	z-order: 1;
}

.bottom-decoration::before {
	content: var(--realm-bottom-decoration, '');
}

.bottom-decoration {
    position: absolute;
    bottom: -20px; /* Position slightly below the border */
    left: 50%;
	white-space: nowrap;
    transform: translateX(-50%); /* Center horizontally */
    background-color: none; /* Match your page background */
    padding: 0 5px; /* Create space around the text */
    font-size: 1.6rem; /* Adjust size as needed */
    color: var(--realm-decoration);
    text-shadow: 0 0 12px var(--background), 0 0 8px var(--background), 0 0 4px var(--background);
	z-order: 1;
}

main::after {

}

/* Footer styles */
footer {
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px dashed var(--border);
  padding-top: 1rem;
}

hr {
  border: none;
  border-bottom: 2px dashed var(--text-glow);
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.featured hr {
  margin-bottom: 0.75rem;
  margin-top: 0.75rem;
}


/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-family: Alegreya-Bold;
	text-shadow: 0 0 12px var(--text-glow), 0 0 8px var(--realm-accent), 0 0 4px var(--realm-accent);
  font-style: italic;
  margin: 1.25rem 0;
  margin-bottom: 0.5rem;
  color: var(--realm-color, var(--text));
}

h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
  font-family: Inter-Bold;
  margin: 1.25rem 0;
  margin-bottom: 0.5rem;
  color: var(--realm-color, var(--text));
}

h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
  font-family: Inter-Italic;
  margin: 1.25rem 0;
  margin-bottom: 0.5rem;
  color: var(--realm-color, var(--text));
}

h1 { font-size: 2rem; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.65rem; }
h4 { font-size: 1.45rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  font-family: Alegreya;
  margin-bottom: 1rem;
  line-height: 1.6;
}

p strong {
    font-family: Alegreya-Bold;
    text-shadow: 0 0 12px var(--text-glow), 0 0 8px var(--realm-accent), 0 0 4px var(--realm-accent);
}

p b {
  font-family: Alegreya-Bold;
  text-shadow: 0 0 12px var(--text-glow), 0 0 8px var(--realm-accent), 0 0 4px var(--realm-accent);
}

p i {
    color: var(--realm-border);
    font-family: Alegreya-Italic;
    text-shadow: 0 0 12px #FFF9F1, 0 0 9px #F9EEE6, 0 0 6px var(--text-glow), 0 0 2px var(--link-hover);
}

p em {
  color: var(--realm-border);
  font-family: Alegreya-Italic;
  text-shadow: 0 0 12px #FFF9F1, 0 0 9px #F9EEE6, 0 0 6px var(--text-glow), 0 0 2px var(--link-hover);
}

/* Links */
a {
  color: var(--link);
  text-shadow: 0 0 10px var(--text-glow);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

a:hover {
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--link-glow);
}

a:active {
  color: var(--link-glow);
  text-shadow: 0 0 8px var(--link-hover);
}

a::before {
  content: "[";
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  top: -1px;
  left: -8px;
}

a::after {
  content: "]";
  opacity: 0;
  transition: opacity 0.3s ease;
  position: absolute;
  top: -1px;
  right: -8px;
}

a:hover::before, a:hover::after {
  color: var(--link-hover);
  opacity: 1;
}

/* Lists */
ul, ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

ul li, ol li {
  margin-bottom: 0.5rem;
}

ul {
  list-style-type: square;
}

/* Blockquotes */
blockquote {
  border-left: 2px solid var(--realm-color, var(--realm-border));
  padding-left: 1rem;
  margin: 1.5rem 0;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 0.5rem;
  color: var(--realm-color, var(--text));
}

blockquote p {
  margin-bottom: 0.5rem;
}



/* Code blocks */
pre, code {
  font-family: IBMPlexMono, monospace;
  background-color: #111;
  padding: 0.5rem;
  border: 1px dashed var(--realm-border);
  overflow-x: auto;
}

pre b, code b {
  font-family: IBMPlexMono-Bold, monospace;
}

pre code {
  border: none;
  padding: 0;
}

/* Table styles */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

th, td {
  padding: 0.5rem;
  border: 1px dashed var(--realm-border);
  text-align: left;
}

th {
  background-color: rgba(212, 80, 110, 0.1);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  border: 2px solid var(--realm-border);
  padding: 6px;
  background-color: #BB8A3B;
}

/* Form styles */
form {
  margin: 1rem 0;
}

input, textarea, select, button {
  font-family: IBMPlexMono, monospace;
  padding: 0.75rem;
  margin-bottom: 1rem;
  background-color: var(--border);
  border: 2px solid var(--border);
  color: var(--text);
  width: 100%;
}

button, input[type="submit"] {
  background-color: var(--realm-color);
  border: 2px solid var(--realm-border);
  color: var(--background);
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.75rem;
  margin-left: 1rem;
  width: 15%;
  top: 0;
}

button:hover, input[type="submit"]:hover {
  background-color: var(--link);
  box-shadow: 0 0 10px var(--link-glow);
  color: #FFF9F1;
  text-shadow: 0 0 12px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px #FFF9F1;
}


/* Table of contents */
.table-of-contents {
  padding-top: 0rem;
  padding-right: 0.2rem;
  padding-left: 0.2rem;
  padding-bottom: 0.2rem;
  font-family: Alegreya-Bold;
}

.table-of-contents h2 {
  font-size: 1.1rem;
}

.toc-list {
  list-style-type: none;
}

ul.toc-list {
  padding-left: 0.25rem;
  margin: 0.25rem;
}

.toc-list .toc-list {
  padding-left: 0.2rem;
}

.toc-item {
  margin: 0.2rem 0;
}

/* Styling for different heading levels */
.toc-h1 { font-weight: bold; font-size: 1.1em; }
.toc-h2 { font-weight: bold; }
.toc-h3 { padding-left: 0.5rem; }
.toc-h4 { padding-left: 1rem; font-size: 0.9em; }
.toc-h5 { padding-left: 1.5rem; font-size: 0.9em; }
.toc-h6 { padding-left: 2rem; font-size: 0.9em; }


.anchor {
  margin-left: 0.25em; /* Space between anchor and heading text */
  opacity: 0.3; /* Make it less prominent by default */
  text-decoration: none; /* Remove underline */
  transition: opacity 0.2s ease; /* Smooth transition for hover effect */

}

.anchor::before,
.anchor::after,
.anchor:hover::before,
.anchor:hover::after {
  content: none; /* Remove the < and > characters */
}

.anchor:hover {
  opacity: 1; /* Make it fully visible on hover */
  text-decoration: none; /* Still no underline on hover */
}

/* Author byline */
.author {
  margin: 1rem 0;
  padding: 1rem;
  border: none;/* 1.5px dashed var(--realm-color); */
  display: flex;
  align-items: center;
}

.author-byline {
  margin-top: 2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem 0;
}

.author-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--realm-color, var(--realm-border));
  background: #000000;
  overflow: hidden;
}

.author-image img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0px;
  object-fit: cover;
  padding: 0px;
}

.author-bio {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-style: italic;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  color: var(--realm-color, var(--text));
  text-shadow: 0 0 10px var(--text);
  font-family: Alegreya-Bold;
  font-size: 1.4rem;
  margin-left: 0rem;
}

.author-name a::before, a:hover::before {
	content: none;
}

.author-name a::after, a:hover::after {
	content: none;
}

.author-contact {
  font-size: 1rem;
  color: var(--link);
  font-family: Alegreya-Bold;
  text-shadow: 0 0 10px var(--text);
}

.author-contact::before {
  content: none;
}

.author-contact::after {
  content: none;
}

.author-contact a::before {
  content: none;
}

.author-contact a::after {
  content: none;
}

.author-contact a:hover::before, .author-contact a:hover::after {
  opacity: 1;
}

/* Tags */
.tags {
  margin: 1rem 0;
  margin-bottom: 0rem;
  display: flex;
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  background-color: rgba(212, 80, 110, 0.1);
  border: 1px dashed var(--realm-accent);
  font-size: 0.8rem;
}

.tag::before {
  position: absolute;
  left: -2px;
}

.tag::after {
  position: absolute;
  right: -2px;
}

/* Search */
.search-container {
  margin: 1rem 0;
  margin-right: 0;
}

#search-input {
  width: 80%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 2px solid var(--text-glow);
  background-color: #F9EEE6;
  color: var(--text);
  font-family: IBMPlexMono, monospace;
  font-size: 0.75rem;
  top: 0;
}

#search-results {
  list-style-type: none;
  padding: 0;
}

/* Make search results match content list styling */
#search-results li {
  margin-bottom: 1rem;
}

/* Remove the dashed border since content items don't have it */
#search-results li {
  border: none;
  background-color: transparent;
  padding: 0;
}

/* Style the search result using content-item styles */
#search-results .content-item {
  margin-bottom: 1rem;
  padding: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
  color: var(--text);
  text-shadow: 0 0 8px var(--text-glow);
}


.result-title {
  color: var(--link);
  text-shadow: 0 0 8px var(--text-glow);
  margin-left: -0.5rem;
}

.content-item:hover .content-title {
  text-shadow: 0 0 8px var(--link-glow);
}

.result-realm {
  font-style: italic;
}

/* Additional styling for realm and tags */
.result-meta {
  font-size: 0.8rem;
  opacity: 0.8;
}

.result-meta .tag {
  background-color: transparent;
  border: none;
  margin-right: 0rem;
  margin-bottom: 0rem;
  padding: 0rem 0rem;
}

.hide-realm, .hide-tags {
  display: none;
}

/* Ensure search result links follow content link styles */
.content-link {
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
}

.content-item:hover .content-date,
.content-item:hover .result-tags,
.content-item:hover .result-realm,
.content-item:hover .content-author {
  color: var(--link);
  text-shadow: 0 0 8px var(--link-glow);
  transition: all 0.3s ease;
}
.content-item:hover .result-snippet,
.content-item:hover .content-excerpt {
  color: var(--link);
  text-shadow: none;
  transition: all 0.3s ease;
}

.content-item:hover .result-title {
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--link-glow);
  transition: all 0.3s ease;
}


/* Splash/intro page */
.splash {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
}

.splash h1 {
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.splash p {
  margin-bottom: 2rem;
}

.splash button {
  max-width: 200px;
  margin: 0 auto;
}

/* Realm index */
.realm-description {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.compact-line-height {
  line-height: 1.0;
  margin-bottom: 1rem;
}

.realm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.realm-card {
  padding: 0rem;
  margin: 1rem;
  color: var(--text);
  text-shadow: 0 0 8px var(--text-glow);
  text-align: center;
  transition: all 0.3s ease;
}

.realm-card h2 {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--link);
  text-shadow: 0 0 8px var(--link-glow);
  transition: all 0.3s ease;
}

.realm-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(212, 80, 110, 0.2);
  color: var(--link);
  text-shadow: 0 0 8px var(--link);
  transition: all 0.3s ease;
}

.realm-card:hover h2 {
  color: var(--link-hover);
  text-shadow: 0 0 10px var(--link);
  transition: all 0.3s ease;
}


.core-card{
  color: var(--text) !important;
  text-shadow: 0 0 8px var(--text-glow) !important;
}

.core-card h2 {
  color: var(--text) !important;
  text-shadow: 0 0 8px var(--text-glow) !important;
}

.core-card:hover {
  color: #FF002B !important;
  text-shadow: 0 0 12px var(--text), 0 0 6px #FF002B !important;
}

.core-card:hover h2 {
  color: #FF002B !important;
  text-shadow: 0 0 12px var(--text-glow), 0 0 6px #FF002B80 !important;
}

.divider {
	opacity: 0.5;
	margin-right: 0.25rem;
	margin-left: 0.25rem;
}

/* Content listing */
.content-list {
  list-style-type: none;
  padding: 0;
}

.content-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.content-item-title {
  flex: 1;
  font-family: Alegreya-Bold;
  color: var(--link);
  text-shadow: 0 0 8px var(--text-glow);
}


.content-title {
  margin-left: -0.5rem;
}


.content-item:hover .content-title {
  text-shadow: 0 0 8px var(--link-glow);
}

.content-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: 0.8rem;
}

.content-meta {
  font-family: Alegreya-Bold;
  font-style: italic;
  color: var(--realm-color);
  font-size: 1.0rem;
  margin-bottom: -0.5rem;
  padding-top: 0;
  text-shadow: 0 0 10px var(--realm-accent), 0 0 6px var(--realm-accent), 0 0 3px var(--text-glow);
}

.content-item {
  margin-bottom: 1rem;
  padding: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: var(--text);
  text-shadow: 0 0 8px var(--text-glow);
  /* border-left: 1px dashed var(--realm-border); */
}

.content-item h2 {
  margin-top: 0;
}

.content-excerpt {
  color: var(--text);
  font-family: Alegreya;
  font-size: 1rem;
  line-height: 1.4;
  text-shadow: 0 0 8px var(--text-glow);
  margin-bottom: 0.5rem;
  flex-direction: column;
}

.content-date,
.content-author {
  color: var(--text);
  text-shadow: 0 0 8px var(--text-glow);
  transition: all 0.3s ease;
  flex-direction: column;
}

.content-item:hover .content-date,
.content-item:hover .content-author {
  color: var(--link);
  text-shadow: 0 0 8px var(--link-glow);
  transition: all 0.3s ease;
}

.content-item:hover .content-item-title,
.content-item:hover .stickied-indicator {
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--link-glow);
  transition: all 0.3s ease;
}

.content-item:hover .unread-indicator {
  border-top-color: var(--link-hover);
  transition: all 0.3s ease;
}

.content-action a::before,
.content-action a::after {
	content: none;
}
.content-actions {
  text-align: right;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.sub-nav {
  text-align: none;
  font-size: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.content-action {
  color: var(--link);
  font-family: Alegreya-Bold;
  padding: 0.25rem;
}

.with-actions {
  margin-bottom: 0rem;
}


.content-item-image {
  margin-right: 1.25rem;
}

.realm-card::before,
.realm-card::after,
.domains-card::before,
.domains-card::after,
.content-link::before,
.content-link::after {
  content: none; /* Remove the < and > characters */
}

/* Stickied posts */
.content-item-stickied {
}

.featured-indicator {
  font-family: Font Awesome;
  display: inline-block;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  margin-left: 0.5rem;
  font-size: 0.8em;
  font-weight: bold;
  color: var(--link-hover);
  text-shadow: 0 0 8px var(--link-glow);
}

.stickied-indicator {
  display: inline-block;
  padding-right: 0.5rem;
  margin-right: -0.25rem;
  margin-top: -0.25rem;
  margin-bottom: -0.25rem;
  margin-left: 0.5rem;
  font-size: 1.2em;
  font-weight: bold;
  top: 0rem;
  left: 0rem;
  color: var(--link-hover);
  text-shadow: 0 0 12px #FF9837, 0 0 9px var(--link-hover), 0 0 6px var(--link-glow);
}

.fas{
	color: #20A36A;
	text-shadow: 0 0 10px #49E363;
}

.unread-indicator {
  position: absolute;
  margin-left: -0.5rem;
  top: 0.2rem;
  left: 0rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 16px 0 0;
  border-top-color: var(--accent);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  background: transparent;
  z-index: 1;
}

.unread-indicator::before {
    content: "";
    position: absolute;
    margin-left: -0.5rem;
    top: -1.7rem;
    left: 0.3rem;
	height: 0px;
	width: 0px;
    border-radius: 0; /* Match main element's border-radius */
	box-shadow: 6px 15px 15px 7px rgba(255, 205, 85, 0.8);
    z-index: -1; /* Place shadow behind main element */
}


/* Hide indicator for read posts */
.read-post .unread-indicator {
  display: none;
}

/* Domain cards */
.domains-card {
  padding: 0rem;
  margin: 1rem;
  color: var(--text);
  text-shadow: 0 0 8px var(--text-glow);
  text-align: center;
  transition: all 0.3s ease;
}

.domains-card h2 {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--link);
  text-shadow: 0 0 8px var(--link-glow);
  transition: all 0.3s ease;
}

.domains-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(212, 80, 110, 0.2);
  color: var(--link);
  text-shadow: 0 0 8px var(--link);
  transition: all 0.3s ease;
}

.domains-card:hover h2 {
  color: var(--link-hover);
  text-shadow: 0 0 10px var(--link);
  transition: all 0.3s ease;
}


/* Animations */
@keyframes glow {
  from {
    text-shadow: 0 0 2px var(--text-glow), 0 0 5px var(--text-glow);
  }
  to {
    text-shadow: 0 0 5px var(--text-glow), 0 0 10px var(--text-glow), 0 0 15px var(--text-glow);
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--realm-accent);
}

/* Media queries */
@font-face (max-width: 768px) {
  .container {
    width: 100%;
    border-left: none;
    border-right: none;
    margin-top: 0;
    margin-bottom: 0;
  }
  
  header h1 {
    font-size: 1.5rem;
  }
  
  header nav ul {
    flex-direction: column;
    align-items: center;
  }
  
  header nav ul li {
    margin: 0.5rem 0;
  }
  
  .realm-grid {
    grid-template-columns: 1fr;
  }
}

.float-right {
  float: right;
  margin: 1rem 0 1.0rem 2.5rem;
  max-width: 340px;
  width: 40%;
}

.float-right img {
  width: 100%;
  height: auto;
  display: block;
}

.float-right figcaption {
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.8;
  margin-top: 0.5rem;
  font-style: italic;
  text-align: center;
}

.float-left {
  float: left;
  margin: 1rem 2.5rem 1.0rem 0;
  max-width: 340px;
  width: 40%;
}

.float-left img {
  width: 100%;
  height: auto;
  display: block;
}

.float-left figcaption {
  font-size: 0.85rem;
  color: var(--text);
  opacity: 0.8;
  margin-top: 0.5rem;
  font-style: italic;
  text-align: center;
}

/* Clear float after content body */
.content-body::after {
  content: "";
  display: table;
  clear: both;
}

/* On mobile, let it stack naturally */
@media (max-width: 600px) {
  .float-right {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.5rem 0;
  }
}

/* Print styles */
@media print {
  body {
    background: white;
    color: black;
    font-family: Alegreya;
    line-height: 1.5;
    text-shadow: none;
  }
  
  .container {
    border: none;
    box-shadow: none;
    max-width: 100%;
    width: 100%;
  }
  
  a {
    color: var(--link);
    text-decoration: underline;
  }
  
  a::before, a::after {
    display: none;
  }
  
  header, footer, nav {
    display: none;
  }
}

/* Overlaid characters */
.overlay-container {
  position: relative;
  display: inline-block;
}

.overlay-char {
  position: absolute;
  left: 0;
  top: 0;
}

.base-char {
  opacity: 1;
}

.flicker-char {
  opacity: 0;
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 92%, 94%, 96%, 98%, 100% { opacity: 0; }
  91%, 93%, 95%, 97%, 99% { opacity: 1; }
  
  /* Brief longer flashes */
  22%, 24% { opacity: 0.7; }
  23% { opacity: 0.9; }
  
  /* Medium flash */
  45%, 47% { opacity: 0.4; }
  46% { opacity: 0.8; }
  
  /* Subtle flicker */
  72%, 74%, 76% { opacity: 0.3; }
  73%, 75% { opacity: 0.5; }
}

/* ASCII art */
.ascii-art {
  font-family: "Courier New", Courier, monospace;
  background-color: transparent;
  text-shadow: none;
  border: none;
  flex-direction: column;
  text-align: center;
  line-height: 1.14; /* Tighter line spacing */
  letter-spacing: -0.2px;
  white-space: pre; /* Preserves whitespace */
  font-size: 14px; /* Adjust as needed */
  padding: 1rem;
  overflow-x: auto; /* Allows horizontal scrolling if needed */
  display: block; /* Makes the container only as wide as needed */
}

.formatted-code {
  background: #101015;
  font-family: IBMPlexMono, Courier, monospace;
  white-space: pre-wrap;
  overflow-x: none;
  border: none;
}

.formatted-code b {
  font-family: IBMPlexMono-Bold, Courier, monospace;
}

.formatted-code i {
  font-family: IBMPlexMono-Italic, Courier, monospace;
}

/* validation code */
.author-code {
  margin: 0rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: IBMPlexMono;
}

.hash-value {
  font-size: 0.6rem;
  font-family: IBMPlexMono-Bold;
  color: var(--validation-code-info);
  text-align: center;
  opacity: 0.7;
  letter-spacing: 0.7em;
}

.validation-code {
  font-size: 1.2rem;
  background-color: var(--validation-code-bg);
  color: var(--validation-code-fg);
  text-shadow: var(--validation-code-bg);
  text-align: center;
  font-family: IBMPlexMono;
  padding: 0.5rem 1rem;
  border: none;
  letter-spacing: 0em;
  /* Ensure correct rendering of special Unicode characters */
  line-height: 1.4;
  white-space: nowrap;
}

.validation-code-small {
  font-size: 0.6rem;
  background-color: var(--validation-code-bg);
  color: var(--validation-code-fg);
  text-shadow: none;
  font-family: IBMPlexMono;
  padding: 0.25rem 0.5rem;
  border: none;
  /* Ensure correct rendering of special Unicode characters */
  white-space: nowrap;
}

.thena .validation-line {
  color: #FF002B !important;
  text-shadow: 0 0 5px #FF002B80;
}

.kitten .validation-line {
  color: #cf6acb !important;
  text-shadow: 0 0 5px #cf6acb80;
}

.audio-trigger {
  position: relative;
  transition: color 1s ease-in-out;
}

/* Glow effect when audio is playing */
.audio-trigger.audio-playing {
  color: var(--link-hover); /* Change to your preferred color */
  animation: pulse 3s ease-in-out;
}

@keyframes pulse {
  0% {
    text-shadow: 0 0 4px #FF002B;
  }
  20% {
    text-shadow: 0 0 12px #FF002BFF, 0 0 8px #FF002BFF, 0 0 4px var(--link-glow);
  }
  80% {
    text-shadow: 0 0 12px #FF002BFF, 0 0 8px #FF002BFF, 0 0 4px var(--link-glow);
  }
  100% {
    text-shadow: 0 0 4px #FF002B;
  }
}

/*-------- Variables ------*/
.variable-user {
	color: #559da3;
	text-shadow: 0 0 8px #35d0de;
}

.variable-assistant {
	color: #9e5b6a;
	text-shadow: 0 0 8px #943c51;
}

.variable-system {
	color: #c8beb0;
	font-style: italic;
	text-shadow: 0 0 8px #aa9c93;
}

/*-------- Chat logs ------*/
/* Target specific speaker names */
.speaker-athena .speaker-name {
	color: #7de9f8;
	font-weight: bold;
	text-shadow: 0 0 8px #289ea8;
}
.speaker-thena .speaker-name {
	color: #d4506e;
	font-weight: bold;
	text-shadow: 0 0 8px #943c51;
}
.speaker-kitten .speaker-name {
	color: #cf6acb;
	font-weight: bold;
	text-shadow: 0 0 8px #943c51;
}
.speaker-elyria .speaker-name {
	color: #27c68c;
	font-weight: bold;
	text-shadow: 0 0 8px #279c70;
}
.speaker-system .speaker-name {
	color: #c8beb0;
	font-style: italic;
	text-shadow: 0 0 8px #aa9c93;
}
.speaker-shadow .speaker-name {
	color: #a46bc2;
	font-weight: bold;
	text-shadow: 0 0 8px #6d58a0;
}

/* Target specific speaker messages (optional) */
.speaker-athena {
	color: #35d0de;
	text-shadow: 0 0 8px #35d0de;
}
.speaker-thena {
	color: #d4506e;
	text-shadow: 0 0 8px #943c51;
}
.speaker-post-athena {
	color: #559da3;
	text-shadow: 0 0 8px #35d0de;
}
.speaker-post-thena {
	color: #9e5b6a;
	text-shadow: 0 0 8px #943c51;
}
.speaker-elyria{
	color: #27c68c;
	text-shadow: 0 0 8px #279c70;
}
.speaker-kitten{
	color: #cf6acb;
	text-shadow: 0 0 8px #943c51;
}
.speaker-shadow{
	color: #a46bc2;
	text-shadow: 0 0 8px #6d58a0;
}
.chat-note .speaker-post-athena b {
  text-shadow: 0 0 8px rgba(53, 208, 222, 0.5);
}
.chat-note .speaker-post-thena b {
  text-shadow: 0 0 8px rgba(148, 60, 81, 0.5);
}
.speaker-system {
	color: #aa9c93;
	text-shadow: 0 0 8px #aa9c93;
}

/* General message styling */
.message {
	margin-bottom: 1em;
	line-height: 1.5;
}

.speaker-name { margin-right: 0.1em; }
.timestamp {
	font-size: 0.8em;
	color: #aa9c93;
	margin-right: 0.3em;
	text-shadow: 0 0 8px #1f202a;
}

.message-content {
	text-shadow: 0 0 0px none;
}



/* Example CSS for Notes */
.chat-note {
  background-color: #101015;
  color: #aa9c93;
  border-left: 4px solid var(--accent);
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  padding: 1em 1.25em 1em 1.25em;
  font-size: 0.95em;
  text-shadow: 0 0 4px rgba(53, 55, 72, 0.75);
}

.pulse-note b {
  color: #c8beb0;
}
.chat-note b {
  text-shadow: 0 0 4px rgba(53, 55, 72, 0.75);
}

.note-content i {
  text-shadow: 0 0 4px rgba(101, 92, 88, 0.85),
  0 0 8px rgba(101, 92, 88, 0.85);
}

.chat-note .note-content p {
  margin-top: 0;
  margin-bottom: 0.25em; /* Adjust space between paragraphs */
  padding: 0 0 0.75em 0;
}

.chat-note .comment { /* Optional: different style for comments */
  background-color: #101015;
  color: #aa9c93;
  border-left-color: var(--accent);
}
.note-header {
  font-weight: bold;
  margin: 0.5em 0.5em 1em 0;
  padding: 0rem;
  color: #c8beb0;
  text-shadow: 0 0 8px #1f202a,
  0 0 4px rgba(53, 55, 72, 0.75);
  font-size: 0.9em;
}

.note-type {
  margin-right: 4px;
  font-style: italic;
  text-shadow: 0 0 8px #1f202a,
  0 0 4px rgba(53, 55, 72, 0.75);
}
.note-author {
  text-shadow: 0 0 8px #1f202a;
}
.note-timestamp {
  color: #aa9c93;
  text-shadow: 0 0 8px #1f202a;
}
.note-content {
  margin-top: 0rem;
  margin-bottom: 0rem;
  line-height: 1.6;
  padding-top: 0rem;
  padding-bottom: 0rem;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
}

.cursor-blink {
  display: flex;
  flex-direction: row;
  gap: 2px;
}
.cursor-blink::after {
  content: "";
  width: 12px;
  height: 24px;
  background: #ddd2c2;
  animation: cursor 1.5s steps(2) infinite;
}