/* Import Inconsolata font */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

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

body {
  font-family: 'Inconsolata', monospace;
  line-height: 1.6;
  color: #cdd6f4; /* Catppuccin Mocha text */
  background-color: #1e1e2e; /* Catppuccin Mocha base */
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Header styles */
header {
  margin-bottom: 2rem;
}

nav {
  display: flex;
  gap: 1rem;
}

nav a, a {
  color: #b4befe; /* Catppuccin Mocha lavender */
  text-decoration: none;
}

nav a:hover {
  color: #f5e0dc; /* Catppuccin Mocha rosewater */
  text-decoration: underline;
}

nav a.inactive, .subtle {
  color: #6c7086; /* Catppuccin Mocha surface2 */
  cursor: not-allowed;
  opacity: 0.7;
}

nav a.inactive:hover {
  color: #6c7086; /* Catppuccin Mocha surface2 */
  text-decoration: none;
}

.badge {
  display: inline-block;
  font-size: 0.6em;
  padding: 0.1em 0.4em;
  background-color: #313244; /* Catppuccin Mocha surface1 */
  color: #cdd6f4; /* Catppuccin Mocha text */
  border-radius: 3px;
  margin-left: 0.3em;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Main content styles */
main {
  min-height: 70vh;
}

/* Post list styles */
ul.posts {
  list-style: none;
}

.posts li {
  margin-bottom: 1rem;
  line-height: 1.4;
}

.posts {
  h2 {
      font-size: 1.1em
  }
}

ul {
  list-style: none;
  margin-bottom: 1rem;
}

hr {
  border: none;
  border-top: 1px dotted #6c7086; /* Catppuccin Mocha surface2, lighter */
  margin: 2.5rem 0;
  height: 0;
  background: none;
  opacity: 0.6; /* even lighter */
}

h2 {
  margin-top: 2.4rem;
}

h3 {
  margin-top: 1rem;
}

h4 {
  /* color: #f4b8e4; */
  font-size: inherit;
  font-weight: inherit;
  padding: 0;
  margin-bottom: 1rem;
  display: block;
}



li h2 {
  display: inline;
  margin-right: 1rem;
  margin-bottom: 0;
  line-height: 1.4;
}

li a {
  color: #b4befe; /* Catppuccin Mocha lavender */
  text-decoration: none;
}

li a:hover {
  color: #f5e0dc; /* Catppuccin Mocha rosewater */
  text-decoration: underline;
}

time {
  color: #6c7086; /* Catppuccin Mocha surface2 */
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Individual post styles */
article {
  margin-bottom: 2rem;
  font-size: 1.1rem;
  line-height: 1.4;
}

article h1 {
  font-size: 1.1em;
  margin-bottom: 1rem;
  /*color: #f5e0dc; */
}

article h2 {
  margin-bottom: 1rem;
  color: #f5e0dc; /* Catppuccin Mocha rosewater */
}

article h3 {
  margin-bottom: 1rem;
  
}

article time {
  display: block;
  margin-bottom: 1rem;
}

article p {
  margin-bottom: 1rem;
}

article p:last-child {
  margin-bottom: 0;
}

article img {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 1.5rem 0;  /* This left aligns the image */
    border-radius: 4px;
  }

  

article a {
  color: #b4befe; /* Catppuccin Mocha lavender */
  text-decoration: underline;
}

article a:hover {
  color: #f5e0dc; /* Catppuccin Mocha rosewater */
  text-decoration: underline;
}

/* Post footer */
article footer {
  margin-top: 2rem;
  padding-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

article footer time {
  margin-bottom: 0;
}

.share-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.share-buttons .post-link {
  background: none;
  border: none;
  color: #b4befe; /* Catppuccin Mocha lavender */
  text-decoration: none;
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}

.share-buttons .post-link:hover {
  color: #f5e0dc; /* Catppuccin Mocha rosewater */
  text-decoration: underline;
}

.platforms {
  display: none;
  gap: 0.5rem;
}

.platforms.visible {
  display: flex;
}

.platforms a {
  color: #b4befe; /* Catppuccin Mocha lavender */
  text-decoration: none;
  font-size: 0.9rem;
}

.platforms a:hover {
  color: #f5e0dc; /* Catppuccin Mocha rosewater */
  text-decoration: underline;
}

/* Blockquote styles */
article blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1rem; /* Added vertical padding */
  /* border-left: 3px solid #6c7086; Catppuccin Mocha surface2 */
  color: #a6adc8; /* Dimmed version of body text (#cdd6f4) */
  background: rgba(245, 189, 230, 0.02); /* Catppuccin Mocha surface1 with alpha 40% */
  /* border: 1.5px solid #b4befe; Catppuccin Mocha lavender */
  border-radius: 1.2em;
  /* box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07); */
}

article blockquote p {
  margin-bottom: 1rem;
}

article blockquote p:last-child {
  margin-bottom: 0;
}

article blockquote ol,
article blockquote ul {
  list-style-position: outside;
  padding-left: 2em; /* Adjust as needed for your design */
}

article blockquote li {
  text-indent: 0;
  padding-left: 0;
  margin-left: 0;
}

article blockquote h3 {
  color: #a6adc8; /* Match blockquote text color */
  margin-top: 0;
}

article blockquote li:last-child {
  margin-bottom: 0;
}

article blockquote ul {
  list-style-type: disc;
  padding-left: 1.2em; /* Reduced indentation for bullets */
}
article blockquote ol {
  list-style-type: decimal;
}

/* Footer styles */
footer {
  margin-top: 2rem;
  padding-top: 1rem;
  /*border-top: 1px solid #313244; */ /* Catppuccin Mocha surface1 */
  font-size: 0.9rem;
  color: #6c7086; /* Catppuccin Mocha surface2 */
}

.share-buttons {
  display: flex;
  gap: 0.5rem;
}

.share-buttons a {
  color: #b4befe; /* Catppuccin Mocha lavender */
  text-decoration: none;
  font-size: 0.9rem;
}

.share-buttons a:hover {
  color: #f5e0dc; /* Catppuccin Mocha rosewater */
  text-decoration: underline;
}

h5 {
  color: #6c7086;
}

/* Table styles */
table {
  width: 100%;
  border-collapse: collapse;
  color: #6c7086;
}
th, td {
  text-align: left;
  padding: 0.5em;
}