/* Fira Code: https://github.com/tonsky/FiraCode */
@import url('https://cdn.staticdelivr.com/gfonts/css2?family=Fira+Code:wght@300..700&display=swap');

:root {
  --background: #1d2021;
  --foreground: #eadab2;
  --accent: #ff6247;
  --radius: 0;
  --font-size: 1rem;
  --line-height: 1.54em;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family:
    "Fira Code",
    "JetBrains Mono",
    Monaco,
    Consolas,
     "Ubuntu Mono",
    monospace;
  font-size: var(--font-size);
  font-weight: 400;
  line-height: var(--line-height);
  background-color: var(--background);
  color: var(--foreground);
  text-rendering: optimizeLegibility;
  font-variant-ligatures: contextual;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: calc(var(--font-size) * 1.45);
  letter-spacing: 0;
}

h2 {
  font-size: calc(var(--font-size) * 1.35);
  letter-spacing: 0;
}

h3 {
  font-size: calc(var(--font-size) * 1.15);
  letter-spacing: 0;
}

h4,
h5,
h6 {
  font-size: calc(var(--font-size) * 1);
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol,
img, figure, video,
table {
  margin: 25px 0;
}

a {
  color: var(--accent);
}

img {
  height: auto;
  display: block;
  max-width: 100%;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px;
  overflow: hidden;
  justify-self: center;
}

/* Header */
.header {
  display: flex;
  flex-direction: row;
  position: relative;
  margin: 0 0 2rem 0;
}

.header-logo {
  white-space: nowrap;
  text-decoration: none;
  height: 35px;
  background: var(--accent);
  color: var(--background);
  font-weight: 700;
  padding: 5px 10px;
}

header::after {
  content: "";
  background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
  display: block;
  width: 100%;
  height: 35px;
  margin: 0 8px;
  order: 2;
}

/* Container */
.container {
  display: flex;
  flex-direction: column;
  padding: 40px;
  max-width: 864px;
  min-height: 100vh;
  margin: 0 auto;
}

img {
  height: auto;
}

.container.full,
.container.center {
  border: none;
  margin: 0 auto;
}

.container.full {
  max-width: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Index content */
.index-content {
  margin-bottom: 40px;
}

.index-content.framed {
  margin-bottom: 20px;
}

/* Framed content */
.framed {
  border: 2px solid var(--accent);
  padding: 20px;
}

/* Figure with caption - matching Hugo theme */
figure {
  display: inline-block;
  margin: 25px auto;
  padding: 0;
  background: transparent;
  text-align: center;
  width: fit-content;
}

figure img {
  display: block;
  margin-bottom: -8px !important;
  /* Image already has border from terminal.css */
}

/* Override figcaption from terminal.css to match Hugo theme */
figure figcaption {
  margin-top: 0 !important;
  padding: 15px 20px !important;
  background: var(--accent) !important;
  color: var(--background) !important;
  font-weight: normal !important;
  text-align: center !important;
  /* Thicker bottom border effect */
  border: none !important;
  border-radius: 0 !important;
  position: relative;
}

figure figcaption p {
  margin: 0;
}

/* Page styles */
.page {
  max-width: 100%;
  margin: 0 auto;
}

.page h1, 
article h1 {
  position: relative;
  color: var(--accent);
  margin-top: 0 !important;
  margin-bottom: 15px !important;
  padding-bottom: 15px;
  border-bottom: 3px dotted var(--accent);
}

.page h1::after, 
article h1::after {
  content: "";
  position: absolute;
  bottom: 2px;
  display: block;
  width: 100%;
  border-bottom: 3px dotted var(--accent);
}

/* Responsive */
@media (max-width: 684px) {
  .container {
    padding: 20px;
  }
  
  .content {
    margin-top: 20px;
  }
}

/* Print styles */
@media print {
  .container {
    display: initial;
  }

  .content {
    display: initial;
  }
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Read more link */
.read-more {
  display: inline-block;
  text-decoration: none;
  font-weight: 400;
  color: var(--accent);
  margin-top: 15px;
  padding: 0;
  border: none;
}

.read-more:hover {
  color: black;
  background-color: var(--accent);
}

/* Pagination */
.pagination {
  margin-top: 50px;
}

.pagination__title {
  display: flex;
  text-align: center;
  position: relative;
  margin: 20px 0;
}

.pagination__title-h {
  text-align: center;
  margin: 0 auto;
  padding: 5px 10px;
  background: var(--background);
  color: color-mix(in srgb, var(--foreground) 65%, transparent);
  font-size: calc(var(--font-size) * .8);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .1em;
  z-index: 1;
}

.pagination__title hr {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 15px;
  z-index: 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
}

.pagination__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  text-align: center;
}

.button.previous,
.button.next {
  position: relative;
}

.button.previous {
  margin-right: auto;
}

.button.next {
  margin-left: auto;
}

/* Post navigation - override for centered layout */
.pagination__buttons .button.inline.prev,
.pagination__buttons .button.inline.next {
  margin: 0;
}

/* Page numbers */
.button.number {
  font-weight: 700;
  min-width: 40px;
  padding: 5px 10px;
}

.button.number.active {
  background: var(--accent);
  color: var(--background);
}

/* Pagination info */
.pagination-info {
  text-align: center;
  margin: 20px 0;
  color: color-mix(in srgb, var(--foreground) 65%, transparent);
  font-size: calc(var(--font-size) * .9);
}

/* Simple pagination (prev/next only) */
.pagination-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 50px 0;
}

.pagination-simple .prev,
.pagination-simple .next {
  flex: 1;
}

.pagination-simple .prev {
  text-align: left;
}

.pagination-simple .next {
  text-align: right;
}

/* Responsive */
@media (max-width: 684px) {
  .pagination__buttons {
    flex-direction: column;
  }
  
  .button.previous,
  .button.next {
    margin: 0;
    width: 100%;
  }
}

/* Footer */
.footer {
  padding: 40px 0;
  flex-grow: 0;
  opacity: .65;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  max-width: 100%;
}

.footer a {
  color: inherit;
}

.footer .copyright {
  display: flex;
  flex-flow: row wrap;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.footer .copyright--user {
  margin: auto;
  text-align: center;
}

.footer .copyright > *:first-child:not(:only-child) {
  margin-right: 10px;
}

.footer .copyright span {
  white-space: nowrap;
}

.footer .copyright span:not(:last-child) {
  margin-right: 5px;
}

/* Responsive */
@media (max-width: 900px) {
  .footer__inner {
    flex-direction: column;
  }
}

@media (max-width: 684px) {
  .footer {
    padding: 20px 0;
  }
  
  .footer__inner {
    padding: 0 10px;
  }
  
  .copyright {
    flex-wrap: wrap;
    text-align: center;
    gap: 5px;
  }
  
  .copyright span {
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
  }
  
  /* Hide separators on mobile for cleaner layout */
  .copyright .separator {
    display: none;
  }
  
  /* Each text span on its own line on mobile */
  .copyright span:not(.separator) {
    display: block;
    width: 100%;
  }
  
  /* Make links more touch-friendly on mobile */
  .footer a {
    padding: 2px 4px;
    display: inline-block;
  }
}

/* Posts */
.posts {
  width: 100%;
}

.post {
  width: 100%;
  text-align: left;
  padding: 30px 0;
}

.post:not(:last-of-type) {
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
}

.post-meta {
  font-size: inherit;
  color: color-mix(in srgb, var(--foreground) 65%, transparent);
}

.post-author::before {
  content: " :: ";
  display: inline;
}

.post-title {
  position: relative;
  color: var(--accent);
  margin-top: 0 !important;
  margin-bottom: 15px !important;
  padding-bottom: 15px;
  border-bottom: 3px dotted var(--accent);
  text-decoration: none !important;
}

.post-title::after {
  content: "";
  position: absolute;
  bottom: 2px;
  display: block;
  width: 100%;
  border-bottom: 3px dotted var(--accent);
}

.post-title a {
  text-decoration: none;
}

.post-tags {
  display: block;
  font-size: inherit;
  color: var(--accent);
}

.post-tags a {
  color: var(--accent);
  text-decoration: none;
}

.post-tags:hover {
  text-decoration: underline;
}

.post-tags a::before {
  content: "#";
}

.post-tags a:not(:last-child)::after {
  content: ", ";
}

.post-cover {
  margin: 20px 0;
}

.post-cover img {
  border: 10px solid var(--accent);
  background: transparent;
  padding: 20px;
}

.post ul {
  list-style: none;
}

.post ul li {
  position: relative;
}

.post ul li:not(:empty)::before {
  content: "-";
  position: absolute;
  left: -20px;
  color: var(--accent);
}

.post-content {
  margin-top: 15px;
}

.post-content h1 {
  margin-top: 2em !important;
}

.post-content p {
  margin: 0;
}

/* Post navigation */
.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
  padding-top: 25px;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
}

.post-nav-prev,
.post-nav-next {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-nav-next {
  text-align: right;
}

/* Metadata in single posts */
article time {
  color: color-mix(in srgb, var(--foreground) 65%, transparent);
}

/* Posts list */
.posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.posts-list li {
  margin-bottom: 30px;
}

/* List page title */
.posts-title {
  position: relative;
  color: var(--accent);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 15px;
  border-bottom: 3px dotted var(--accent);
}

.posts-title::after {
  content: "";
  position: absolute;
  bottom: 2px;
  display: block;
  width: 100%;
  border-bottom: 3px dotted var(--accent);
}