@font-face {
  font-family: 'FiraCodeNerd';
  src: url('/fonts/FiraCodeNerdFont-Regular.subset.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}

/* 1. Apollo Color Palette (with automatic dark mode) */
:root {
  --bg: #ffffff;
  --text: #333333;
  --text-light: #999999;
  --accent: #8A9A5B; /* The classic Apollo green */
  --border: #eaeaea;
  --code-bg: #f8f8f8;
--font-main: 'FiraCodeNerd', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #c4c4c4;
    --text-light: #666666;
    --accent: #8A9A5B;
    --border: #333333;
    --code-bg: #222222;
  }
}

/* 2. Base Typography */
body {
  font-family: var(--font-main);
  font-size: 1.15rem;
  max-width: 900px; /* Slightly wider than before */
  margin: 0 auto;
  padding: 0 2rem;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.75;

/* This forces the main content area to stretch, pushing the footer to the bottom */
main {
  flex-grow: 1;
}

/* ADD THESE THREE LINES: */
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Forces the body to be at least 100% of the viewport height */
}

/* 3. The Apollo Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0 3rem 0; /* Lots of breathing room at the top */
}

/* =========================================
   1. UNIVERSAL LINK STYLE (The Highlight Box)
   ========================================= */
a {
  color: var(--accent);
  text-decoration: none;
  transition: all 0.1s ease;
  padding: 2px 4px;      /* Gives the hover box that nice breathing room */
  border-radius: 2px;
}

/* Apply the green box and white/dark text to ALL links on hover */
a:hover,
header h1 a:hover,
nav a:hover,
.post-title:hover {
  background-color: var(--accent);
  color: var(--bg);
}

/* =========================================
   2. IN-POST LINKS ONLY (The Underline)
   ========================================= */
/* The <article> tag targets only your Markdown content */
article a {
	color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px; 
  margin: 0 -4px; /* Prevents inline paragraph text from shifting when hovered */
}

article a:hover {
  text-decoration-color: transparent; /* Hides underline when the green box appears */
}

/* =========================================
   3. STRUCTURAL COLORS (Default States)
   ========================================= */
header h1 a {
  color: var(--text);
}

nav a {
  color: var(--text-light);
  margin-left: 0.3em; /* Slightly reduced so the new padding fits well */
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s ease;

line-height: 1; 
  display: inline-block;
}

.post-title {
  color: var(--text);
  padding: 2px 4px;
  border-radius: 2px;
  text-decoration: none; /* Fixed the # typo here! */
  transition: all 0.1s ease;
  line-height: 1.2;      /* This is the magic bullet that shrinks the hover box */
}

/* 4. The Apollo Post List (Homepage) */
.post-list {
  list-style: none;
  padding: 0;
}

.post-item {
  display: flex;
  align-items: baseline;
  margin-bottom: 1.5rem;
}

.post-date {
  color: var(--text-light);
  min-width: 120px; /* Forces the dates to line up perfectly */
  font-size: 0.9em;
}




/* 5. General Post Content */

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem 0;
}
code {
  background: var(--code-bg);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
}

/* Make Pagefind search text match our new size */
#search {
    --pagefind-ui-font: system-ui, sans-serif;
    font-size: 1.1em; 
}


/* 1. Base style for all social icons */
.social-links a {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-color: var(--text-light); /* This is the default color! */
  
  /* The Masking Magic */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  
  transition: all 0.1s ease;
transform: translateY(3px);
}

/* 2. Change the color on hover */
.social-links a:hover {
  background-color: var(--accent); /* Pops to green on hover */
  transform: translateY(1px);
}

/* 3. Link each class to its downloaded SVG file */
.icon-codeberg {
  -webkit-mask-image: url('/icons/codeberg.svg'); /* Adjust path if needed */
  mask-image: url('/icons/codeberg.svg');
}

.icon-lemmy {
  -webkit-mask-image: url('/icons/lemmy.svg');
  mask-image: url('/icons/lemmy.svg');
}

.icon-mastodon {
  -webkit-mask-image: url('/icons/mastodon.svg');
  mask-image: url('/icons/mastodon.svg');
}

.icon-reddit {
  -webkit-mask-image: url('/icons/reddit.svg');
  mask-image: url('/icons/reddit.svg');
}
.icon-search {
  -webkit-mask-image: url('/icons/reddit.svg');
  mask-image: url('/icons/reddit.svg');
}
.header-left {
  display: flex;
  flex-direction: row; /* Forces them side-by-side strictly */
  align-items: center; /* Centers them vertically */
  gap: 0.5em; /* The gap between the title and the icons */
font-size: 0.8em;
}

/* Strip out the bulky default spacing from the title */
.header-left h1 {
  margin: 0; 
  line-height: 1;
}

nav {
  display: flex;
  flex-direction: row; /* Forces everything onto one line */
  align-items: center; /* Centers the text and icon vertically */
}

/* Change the color of text highlighted by the user's mouse */
::selection {
  background-color: var(--accent); /* Uses your green accent color */
  color: #1a1a1a; /* Makes the text dark so it's easy to read against the green */
}

/* Fallback for older versions of Firefox */
::-moz-selection {
  background-color: var(--accent);
  color: #1a1a1a; 
}

/* --- SEARCH BUTTON IN HEADER --- */
.search-btn {
  background: none;
  border: none;
  color: var(--text-light); /* Or whatever your main grey text color is */
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
margin-left: 1em;
transform: translateY(-2px);
}

.search-btn:hover {
  color: var(--accent); /* Lights up green on hover! */
}

/* --- SEARCH MODAL OVERLAY --- */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 /* FIX: 85% opaque version of your theme background */
  background-color: color-mix(in srgb, var(--bg), transparent 40%);
  
  /* RE-ADD THE BLUR: and maybe make it a little stronger (8px) for a better effect */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* For Safari support */

  z-index: 999; /* Ensures it sits on top of absolutely everything */
  justify-content: center;
  align-items: flex-start; /* Aligns to the top... */
  padding-top: 15vh; /* ...but pushes it down 15% of the screen height */
}

.search-modal-content {
  width: 100%;
  max-width: 600px; /* Keeps the search bar from getting too wide on huge monitors */
  padding: 20px;
}

/* --- THE INPUT BOX --- */
.search-modal-content input {
  width: 100%;
  padding: 1rem;
  font-size: 1.2rem;
  font-family: inherit; /* Matches your site font */
 /* FIX: A semi-transparent input box to match the overlay, with readable text */
  background-color: color-mix(in srgb, var(--bg), transparent 15%);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-modal-content input:focus {
  border-color: var(--accent); /* Glows green when you click it */
}

/* =========================================
   PAGEFIND SEARCH OVERRIDES
   ========================================= */

/* 1. Base Variables */
#search {
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--bg);
  --pagefind-ui-border: var(--border);
}

/* 2. Fix the Input Box */
.pagefind-ui__search-input {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-weight: normal !important;
}

/* 3. Fix the Text Colors (Titles and Excerpts) */
.pagefind-ui__result-title,
.pagefind-ui__result-link {
  color: var(--text) !important;
  background-color: transparent !important; /* Stops your global link hover box from breaking it */
}

.pagefind-ui__result-link:hover {
  color: var(--accent) !important;
}

.pagefind-ui__message,
.pagefind-ui__result-excerpt {
  color: var(--text-light) !important;
}

/* 4. Kill the Yellow Highlight (Use Apollo Green) */
#search mark {
  background-color: var(--accent) !important;
  color: var(--bg) !important; /* Keeps the text legible inside the green highlight */
  padding: 0 4px;
  border-radius: 2px;
  font-weight: bold;
}

/* Style the metadata (Dates) to look sleek, not like bulky pills */
.pagefind-ui__result-tag {
  background: none !important; /* Kills the white background */
  color: var(--text-light) !important;
  padding: 0 !important;
  margin-top: 0.5rem;
  font-family: monospace;
  font-size: 0.9rem;
}

/* Remove the bulky padding Pagefind puts around the entire search app */
.pagefind-ui {
  padding: 0 !important;
}

/* =========================================
   FOOTER STYLES
   ========================================= */

.site-footer {
  margin-top: 4rem; 
  padding-bottom: 2rem;
  font-family: inherit; 
}

.footer-divider {
  border: none;
  border-top: 1px solid var(--border); 
  margin-bottom: 1rem; 
}

.footer-content {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-light); 
}

/* Kills the bulky default margins stretching the footer vertically */
.copyright {
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* --- THE LICENSE LINK --- */
.copyright a {
  color: var(--text-light);
  text-decoration: underline;
  text-decoration-color: var(--accent); /* The green underline! */
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 2px 4px;
  margin-left: -4px; /* Keeps the text perfectly aligned with the left edge */
  margin-right: 4px;
  border-radius: 2px;
}

.copyright a:hover {
  background-color: var(--accent) !important;
  color: var(--bg) !important; /* Forces the text to match the background */
  text-decoration-color: transparent; /* Hides the underline inside the solid box */
}

/* --- THE RIGHT-SIDE LINKS (kynzo.org, source, rss) --- */
.footer-links {
  display: flex;
  gap: 1rem; 
  align-items: center;
}

.footer-links a {
  color: var(--text-light);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 2px;
  line-height: 1; /* The magic rule that keeps the hover box perfectly slim! */
}

.footer-links a:hover {
  background-color: var(--accent) !important;
  color: var(--bg) !important; /* Makes the text visible inside the green box */
}

/* =========================================
   404 ERROR PAGE
   ========================================= */

.error-page {
  /* Because of our flexbox setup earlier, this will perfectly center the content 
     in the middle of the screen, pushing the footer to the bottom! */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.error-content h1 {
  font-size: 8rem; /* Makes the 404 huge */
  margin: 0;
  line-height: 1;
  color: var(--accent); /* Uses your Apollo green */
}

.error-content p {
  font-size: 1.2rem;
  color: var(--text-light);
  margin-bottom: 2rem;
}

.home-link {
  font-family: monospace;
  font-size: 1.2rem;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 4px;
}

/* =========================================
   PAGE / POST HEADER STYLES (FRONTMATTER)
   ========================================= */

.post-header {
  margin-top: 2rem;
  margin-bottom: 2rem;
  /* This kills whatever flex/grid row was making them display next to each other */
  display: flex;
  flex-direction: column; 
align-items: flex-start;
}

.post-title-main {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--text);
  text-align: left;
  width: 100%;
}

/* --- THE TOML FRONTMATTER BLOCK --- */
.frontmatter {
  font-family: monospace;
  font-size: 0.95rem;
  color: var(--text-light);
  /* Adds a subtle left border to frame the "code" block */
  border-left: 2px solid var(--accent);
  padding: 0.5rem 0 0.5rem 1rem;
margin-left: 0;
}

.fm-boundary {
  color: var(--border);
  margin: 0.25rem 0;
}

.fm-row {
  display: grid;
  /* 110px for the key name, 15px for the '=', and the rest for the value */
  grid-template-columns: 110px 15px 1fr;
  align-items: baseline;
  margin: 0.2rem 0;
  line-height: 1.5;
}

.fm-key {
  color: var(--accent); /* Makes the keys green */
}

.fm-eq {
  color: var(--border);
}

.fm-string {
  color: var(--text-light);
  font-style: italic;
}

.fm-value, .fm-array {
  color: var(--text);
}

/* =========================================
   UPDATED FRONTMATTER TAG STYLES
   ========================================= */

/* The actual clickable tag text */
.fm-tag-name {
  color: var(--text); /* Default color, same as in-post links */
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  
  /* THE MAGIC BULLET: this shrinks the hover box vertically and aligns it perfectly! */
  line-height: 1; 
  
  /* Gives the hover box its nice, perfect padding */
  padding: 2px 4px 5px 4px;
  
  /* Prevents inline text from shifting on hover */
  margin: 0 -4px; 
  
  border-radius: 2px;
  transition: all 0.1s ease;
  font-family: monospace; /* Keep it consistent with frontmatter */
  display: inline-block; /* Essential for line-height and vertical align to work */
}

/* Style the external quotes to match the commas and brackets */
.fm-quote {
  color: var(--text); /* Matches fm-array default color */
  font-family: monospace;
}

.fm-tag-name:hover {
  /* Apply the solid green box and dark text on hover */
  background-color: var(--accent) !important;
  color: var(--bg) !important; 
  
  /* Hides the underline seamlessly when the box appears */
  text-decoration-color: transparent; 
}

.post-content {
  line-height: 1.75; 
  margin-top: 2rem;
}


/* The divider between post and comments */
.post-comments-separator {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 5rem 0 3rem; /* Increased spacing for better separation */
}

.comments-section {
    padding: 2rem;
    background-color: var(--code-bg); /* Uses your theme's subtle offset background */
    border-radius: 8px;
    border: 1px solid var(--border);
}

.comments-section h2 {
    margin-top: 0;
    font-size: 1.5rem;
    border-bottom: 2px solid var(--accent); /* Uses your Apollo green for the section line */
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 1.5rem;
    color: var(--text);
}

.comment-info {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}

/* Style the individual comment "cards" */
.mastodon-comment {
    background: var(--bg); /* Keeps cards contrasting against the section background */
    border: 1px solid var(--border);
    padding: 1.25rem;
    border-radius: 4px; /* Matches your UI's sharper edges */
    margin-bottom: 1.5rem;
}

.comment-author-name {
    font-weight: bold;
    color: var(--text);
}

.comment-content {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
    }
/* Base style for replies */
.mastodon-comment.is-reply {
    margin-left: 2rem; /* Indent the reply */
    border-left: 3px solid var(--accent); /* Apollo green thread line */
    background-color: transparent; /* Makes it feel "attached" to the one above */
    box-shadow: none;
    margin-top: -1rem; /* Pull it closer to the parent */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Mobile fix: reduce indentation on small screens */
@media (max-width: 600px) {
    .mastodon-comment.is-reply {
        margin-left: 1rem;
    }
}

/* Optional: make the avatars smaller for replies to save space */
.is-reply .comment-header img {
    width: 24px !important;
    height: 24px !important;
}

.custom-emoji {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    display: inline-block;
}

/* The "Open" button on each comment */
.comment-mastodon-link {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--border);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--text-light) !important; /* Force override for your global link color */
    text-decoration: none !important;
    transition: all 0.2s ease;
	align-items: flex-end;
}

.comment-mastodon-link:hover {
    background-color: var(--accent) !important;
    color: var(--bg) !important;
    border-color: var(--accent);
}
/* Container for the tags */
.tags-cloud {
    display: flex;
    flex-wrap: wrap; /* Allows the tags to flow to the next line */
    gap: 0.8rem 1rem; /* Adds space between them: 0.8rem vertical, 1rem horizontal */
    line-height: 2; /* Gives them some breathing room */
}

/* The individual tag link */
.tag-badge {
    display: inline-block;
    white-space: nowrap; /* This is the magic rule that stops the text from breaking */
    text-decoration: none;
    /* You can put your green hover background transition here if it isn't already! */
}