/* ================================================
   Chris Saves Energy — Micro.blog custom.css
   Matches the dark green Netlify site aesthetic
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --page-background:               #0a0f0d;
  --main-text:                     #e8f0ea;
  --main-link:                     #e8f0ea;
  --main-link-hover:               #00e67a;
  --main-link-border:              #1e2e22;
  --main-link-border-hover:        #00e67a;
  --profile-border:                #1e2e22;
  --navigation-button-border:      #1e2e22;
  --navigation-button-background:  transparent;
  --navigation-button-border-hover:#00e67a;
  --navigation-button-background-hover: #00e67a;
  --navigation-text:               #7a9482;
  --navigation-text-hover:         #0a0f0d;
  --heading-color:                 #ffffff;
  --button-border:                 #1e2e22;
  --button-background:             transparent;
  --button-border-hover:           #00e67a;
  --button-background-hover:       #00e67a;
  --button-text:                   #7a9482;
  --button-text-hover:             #0a0f0d;
  --hr:                            #1e2e22;
  --blockquote-border:             #00e67a;
  --blockquote-background:         rgba(0,230,122,0.05);
  --blockquote-text:               #e8f0ea;
  --code-border:                   #1e2e22;
  --code-background:               #111a15;
  --pre-border:                    #1e2e22;
  --pre-background:                #111a15;
  --note:                          rgba(0,230,122,0.08);
  --alert:                         rgba(255,77,77,0.1);
  --aside:                         #111a15;
  --callout:                       rgba(0,179,94,0.1);
  --conversation-background:       #111a15;
  --comment-border:                #1e2e22;
  --footnotes:                     #7a9482;
  --footnote-super:                #00e67a;
  --page-fold:                     #111a15;
  --video-placeholder:             #111a15;
  --comment-form-background-color: #111a15;
  --comment-form-border-color:     #1e2e22;
  --shared-note:                   rgba(0,230,122,0.08);
  --red-text:                      #ff4d4d;
  --highlight:                     rgba(0,230,122,0.25);
}

/* ── BASE TYPOGRAPHY ── */

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  background-color: var(--page-background);

  /* Subtle grid overlay matching the Netlify site */
  background-image:
    linear-gradient(rgba(0,230,122,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,122,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── HEADINGS ── */

.page-content h1,
.page-content h2,
.page-content h3 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--heading-color);
}

.page-content h1 { font-size: 2.6em; }
.page-content h2 { font-size: 2em; }
.page-content h3 { font-size: 1.5em; }

h2.post-title a,
h2.post-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.7em;
  letter-spacing: 0.04em;
  color: var(--heading-color);
  line-height: 1.1;
}

/* ── SITE HEADER ── */

.site-header {
  margin-top: 60px;
  margin-bottom: 40px;
  position: relative;
}

/* Glow behind profile photo */
.site-header .profile_photo {
  box-shadow: 0 0 40px rgba(0,230,122,0.2);
}

.site-header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  letter-spacing: 0.08em;
  color: #ffffff;
  margin-top: 0.4em;
  line-height: 1;
}

.site-header h1 a {
  color: #ffffff;
  border: none;
}

/* ── NAVIGATION BUTTONS ── */

.site-header nav a {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 0.45em 1em;
}

/* ── POST DATE ── */

a.post-date,
.post-date-wrapper > time,
.microblog_time a {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: #00e67a;
  opacity: 0.6;
}

a.post-date:hover,
.microblog_time a:hover {
  opacity: 1;
  color: #00e67a;
}

/* ── POSTS ── */

.post {
  border-bottom: 1px solid var(--hr);
  padding-bottom: 2em;
  margin-bottom: 2.5em;
}

.post:last-of-type {
  border-bottom: none;
}

/* ── LINKS ── */

a {
  color: var(--main-link);
  border-bottom: 1px solid #1e2e22;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover {
  color: #00e67a;
  border-color: #00e67a;
}

/* ── BLOCKQUOTE ── */

blockquote {
  border-left: 3px solid #00e67a;
  background-color: rgba(0,230,122,0.04);
  padding: 0.75em 1.25em;
  margin-left: 0;
  border-radius: 0 2px 2px 0;
}

/* ── CODE ── */

p code, li code {
  font-family: 'DM Mono', monospace;
  font-size: 0.82em;
  background-color: #111a15;
  border: 1px solid #1e2e22;
  color: #00e67a;
  border-radius: 2px;
  padding: 0.15em 0.5em;
}

pre {
  font-family: 'DM Mono', monospace;
  background-color: #111a15;
  border-top: 1px solid #1e2e22;
  border-bottom: 1px solid #1e2e22;
  font-size: 0.85em;
}

/* ── HR ── */

hr {
  background: linear-gradient(90deg, transparent, #00e67a, transparent);
  height: 1px;
  border: none;
  opacity: 0.3;
  width: 80%;
}

/* ── PROFILE PHOTO ── */

.site-header .profile_photo {
  border: 2px solid #1e2e22;
  box-shadow: 0 0 20px rgba(0,230,122,0.15);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.site-header .profile_photo:hover {
  box-shadow: 0 0 32px rgba(0,230,122,0.35);
  transform: scale(1.08);
}

/* ── FOOTER ── */

footer {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #7a9482;
  border-top: 1px solid #1e2e22;
  padding-top: 2rem;
}

footer a {
  color: #7a9482;
  border-color: transparent;
}

footer a:hover {
  color: #00e67a;
}

/* ── MICROBLOG CONVERSATION ── */

.microblog_post {
  border: 1px solid #1e2e22;
  background: #111a15;
  border-radius: 4px;
}

.microblog_user {
  color: #00e67a;
}

/* ── PAGE FOLD (used for archive/extra sections) ── */

.page-fold {
  border-top: 1px solid #1e2e22;
  border-bottom: 1px solid #1e2e22;
  background-color: #111a15;
}

/* ── REPLY / TAG BUTTONS ── */

a.button, button,
.conversation-on-mb,
.reply-on-mastodon,
.reply-by-email {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* ── POST TAGS ── */

ul.post-tags {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #7a9482;
}

/* ── SUBTLE GREEN GLOW ON IMAGES ── */

.page-content img {
  border: 1px solid #1e2e22;
  border-radius: 2px;
}

/* ── PAGE LINKS ── */

.page-content a {
  color: #00e67a;
  border-bottom: 1px solid #00e67a;
}

.page-content a:hover {
  color: #00ff88;
  border-bottom-color: #00ff88;
}