/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Theme styles */
body.wordperfect {
    font-family: "Courier New", monospace;
    background-color: #0000aa;  /* Classic WordPerfect blue */
    color: #ffffff;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    line-height: 1.4;
    margin-top: 60px;
}

body.wordperfect a, 
body.wordperfect .function-key {
    color: #ffff55;  /* Yellow links for WordPerfect */
}

body.wordperfect a:hover,
body.wordperfect .function-key:hover {
    background-color: #ffffff;
    color: #0000aa;
}

/* Base styles - only include non-theme specific styles */
body {
    font-family: "Courier New", monospace;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    line-height: 1.4;
    margin-top: 60px;
}

/* Links */
a {
    color: #ffff55;  /* Classic DOS yellow */
    text-decoration: none;
}

a:hover {
    background-color: #ffffff;
    color: #0000aa;
}

/* Add brackets around links */
a::before {
    content: '[';
    color: #ffffff;
}

a::after {
    content: ']';
    color: #ffffff;
}

/* Menu styling */
.menu-bar {
    font-family: "Courier New", monospace;
    background-color: #0000aa;
    color: #ffffff;
    padding: 2px 0;
    border-bottom: 1px solid #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.menu-item {
    font-family: "Courier New", monospace;
    display: inline-block;
    padding: 2px 10px;
    cursor: pointer;
}

.dropdown {
    font-family: "Courier New", monospace;
    display: none;
    position: fixed;
    background: #0000aa;
    border: 1px solid #ffffff;
    padding: 2px;
    min-width: 150px;
}

/* Footer base styles */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    text-align: center;
}

/* Theme-specific footer styles */
body.wordperfect .footer {
    background-color: #0000aa;
}

body.dos .footer {
    background-color: #1a1a1a;
}

body.matrix .footer {
    background-color: #000000;
}

/* Function key styling for each theme */
body.wordperfect .footer a {
    color: #ffff55;
}

body.dos .footer a {
    color: #f0f0f0;
}

body.matrix .footer a {
    color: #00ff41;
}

/* Hover effects for each theme */
body.wordperfect .footer a:hover {
    background-color: #ffffff;
    color: #0000aa;
}

body.dos .footer a:hover {
    background-color: #f0f0f0;
    color: #1a1a1a;
}

body.matrix .footer a:hover {
    background-color: #00ff41;
    color: #000000;
}

/* Bracket colors for each theme */
body.wordperfect .footer a::before,
body.wordperfect .footer a::after {
    color: #ffffff;
}

body.dos .footer a::before,
body.dos .footer a::after {
    color: #f0f0f0;
}

body.matrix .footer a::before,
body.matrix .footer a::after {
    color: #00ff41;
}

/* Text formatting */
pre, code {
    white-space: pre-wrap;       /* wrap long lines */
    word-break: break-word;      /* allow breaking long tokens like "Table1[Region]" */
    overflow-x: auto;            /* still allows scrolling if needed */
}

/* Language-specific code blocks */
pre[class*="language-"] {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Image styles */
.retro-image {
    max-width: 100%;
    height: auto;
    border: 1px solid #ffffff;
    margin: 20px 0;
    image-rendering: pixelated;
}

.image-caption {
    color: #ffff55;
    margin: 10px 0 20px 0;
    text-align: center;
}

/* Post list specific styles */
#post-list {
    margin-top: 20px;
}

#post-list a::before {
    content: '[';
    color: #ffffff;
}

#post-list a::after {
    content: ']';
    color: #ffffff;
}

/* Misspelled text effect */
.misspelled {
    text-decoration: red wavy underline;
    text-decoration-thickness: 2px;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.cursor {
    display: inline-block;
    background-color: #ffffff;
    width: 8px;
    height: 15px;
    animation: blink 1s step-end infinite;
}

/* DOS theme with softer colors */
body.dos {
    font-family: "Courier New", monospace;
    background-color: #1a1a1a;  /* Slightly off-black */
    color: #f0f0f0;  /* Soft white */
}

body.dos a,
body.dos .function-key {
    color: #ffcc00;  /* Amber/gold links - classic DOS color */
}

body.dos a:hover,
body.dos .function-key:hover {
    background-color: #f0f0f0;
    color: #1a1a1a;
}

/* Matrix theme with authentic green */
body.matrix {
    font-family: "Courier New", monospace;
    background-color: #000000;
    color: #00ff41;  /* Classic Matrix green */
}

body.matrix a,
body.matrix .function-key {
    color: #00ffff;  /* Cyan links for contrast */
    text-decoration: none;
}

body.matrix a:hover,
body.matrix .function-key:hover {
    background-color: #00ff41;
    color: #000000;
}

body.matrix pre {
    text-shadow: 0 0 5px #00ff41;  /* Subtle glow effect */
}

/* Function key styling */
.function-key {
    color: inherit;
    text-decoration: none;
}

.function-key:hover {
    background-color: inherit;
    color: inherit;
}

/* Theme-specific function key colors */
body.dos .function-key {
    color: #ffcc00;  /* Match the amber links */
}

body.dos .function-key:hover {
    background-color: #f0f0f0;
    color: #1a1a1a;
}

body.matrix .function-key {
    color: #00ffff;  /* Cyan to match other links */
}

body.matrix .function-key:hover {
    background-color: #00ff41;
    color: #000000;
}

/* More specific selector for h1 and h2 within pre tags */
pre h1, pre h2, .wordperfect h1, .wordperfect h2 {
    font-size: inherit !important; /* Use the same font size as the parent element */
    font-weight: normal !important; /* Reset font weight to normal */
    color: inherit !important; /* Use the same color as the parent element */
    margin: 0 !important; /* Remove default margin */
    padding: 0 !important; /* Remove default padding */
    display: inline !important; /* Make it display inline like regular text */
    font-family: inherit !important; /* Use the same font family */
    line-height: inherit !important; /* Use the same line height */
}

/* General h1, h2 reset as a fallback */
h1, h2 {
    font-size: inherit;
    font-weight: normal;
    color: inherit;
    margin: 0;
    padding: 0;
    display: inline;
    font-family: inherit;
    line-height: inherit;
}

/* Share link and submenu styles */
.share-container {
    position: relative;
    display: inline-block;
    margin: 10px 0;
    font-family: 'Courier New', monospace;
}

.share-link {
    color: #00AAAA;
    text-decoration: none;
}

.share-submenu {
    display: none;
    position: absolute;
    background-color: #000;
    border: 1px solid #00AAAA;
    padding: 5px;
    z-index: 100;
    top: 20px;
    left: 0;
    width: 150px;
}

.share-container:hover .share-submenu {
    display: block;
}

.share-option {
    display: block;
    color: #00AAAA;
    text-decoration: none;
    padding: 3px 5px;
}

.share-option:hover {
    background-color: #333;
}

.retro-quote {
    margin: 10px 20px;
    padding: 5px 10px;
    border-left: 2px solid #00AAAA;
    color: #00AAAA;
    font-style: italic;
}

/* Theme-specific quote styling */
body.wordperfect .retro-quote {
    border-left: 2px solid #ffff55;  /* WordPerfect yellow */
    color: #ffff55;
}

body.dos .retro-quote {
    border-left: 2px solid #ffcc00;  /* DOS amber */
    color: #ffcc00;
}

body.matrix .retro-quote {
    border-left: 2px solid #00ff41;  /* Matrix green */
    color: #00ff41;
}

/* Header styles */
#header {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    background-color: #0000aa;
    z-index: 100;
}

#header pre,
#header .share-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-right {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}