/* Custom styles inspired by rsms.me - Override Minima theme completely */

/* Reset Minima theme completely */
* {
  box-sizing: border-box !important;
}

/* Main Layout - Two Column - Warm Dark Mode */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #b8b8b8 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #1c1c1c !important;
  display: block !important;
  min-height: 100vh !important;
  flex-direction: unset !important;
}

/* Override Minima's flex layout */
body > * {
  display: block !important;
}

/* Container for responsive centered layout */
.site-container {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  min-height: 100vh !important;
  padding-top: 112px !important;
  padding-left: clamp(1rem, 5vw, 3rem) !important;
  padding-right: clamp(1rem, 5vw, 3rem) !important;
  justify-content: center !important;
  position: relative !important;
}

/* Desktop layout with sidebar */
@media screen and (min-width: 900px) {
  .site-container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Left Sidebar - Responsive */
.site-sidebar {
  width: 100% !important;
  padding: 2rem 1.5rem 1rem 1.5rem !important;
  background: #1c1c1c !important;
  border-right: none !important;
  position: static !important;
  height: auto !important;
  overflow: visible !important;
  min-width: 250px !important;
  max-width: 250px !important;
}

/* Desktop sidebar positioning - positioned absolutely to not affect centering */
@media screen and (min-width: 890px) {
  .site-sidebar {
    position: absolute !important;
    left: 0 !important;
    top: 112px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    height: auto !important;
    z-index: 1 !important;
  }
}

/* Main Content Area - Always Centered */
.site-main {
  width: 100% !important;
  min-width: 600px !important;
  max-width: 600px !important;
  padding: 2rem 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  margin: 0 auto !important;
}

/* Center content within main area */
.site-main > * {
  text-align: left !important;
  min-width: 600px !important;
  max-width: 600px !important;
  width: 100% !important;
}

/* Desktop main content positioning - always centered regardless of sidebar */
@media screen and (min-width: 890px) {
  .site-main {
    min-width: 600px !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
  }
}

/* Hide sidebar on contents page */
.site-container:has(.site-main .sidebar-section) .site-sidebar {
  display: none !important;
}

/* Alternative approach for browsers that don't support :has() */
body.contents-page .site-sidebar {
  display: none !important;
}

/* Sidebar Styling - Simplified */
.sidebar-section {
  margin-bottom: 1.5rem !important;
}

.sidebar-heading {
  font-size: 0.9em !important;
  font-weight: bold !important;
  color: #7a7a7a !important;
  margin-bottom: 0.8rem !important;
  text-transform: lowercase !important;
}

.sidebar-separator {
  height: 1px !important;
  background-color: #2a2a2a !important;
  margin: 1.5rem 0 !important;
}

.sidebar-nav {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sidebar-nav li {
  margin-bottom: 0.8rem !important;
}

.sidebar-nav a {
  color: #7a7a7a !important;
  text-decoration: none !important;
  font-size: 1.1em !important;
  display: block !important;
  padding: 0.2rem 0 !important;
  transition: color 0.2s ease !important;
  line-height: 1.4 !important;
}

.sidebar-nav a:hover {
  color: #9a9a9a !important;
}

.sidebar-nav a.active {
  color: #d0d0d0 !important;
  font-weight: 500 !important;
}

/* Headers - Warm Dark Mode */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 2em 0 1em 0 !important;
  color: #d0d0d0 !important;
}

h1 {
  font-size: 2.5em !important;
  margin-top: 0 !important;
  margin-bottom: 0.5em !important;
}

h2 {
  font-size: 1.8em !important;
  margin-top: 2em !important;
}

h3 {
  font-size: 1.4em !important;
}

/* Links - Minimal like rsms.me - Warm Dark Mode */
a {
  color: #d0d0d0 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: #9a9a9a !important;
}

/* Article content links - underlined for better visibility */
.post-content a,
.article-content a,
main a[href^="http"] {
  color: #d0d0d0 !important;
  text-decoration: underline !important;
  text-decoration-color: #7a7a7a !important;
  text-underline-offset: 2px !important;
  transition: all 0.2s ease !important;
}

.post-content a:hover,
.article-content a:hover,
main a[href^="http"]:hover {
  color: #9a9a9a !important;
  text-decoration-color: #9a9a9a !important;
}

/* Article links open in new window - handled by JavaScript */

/* Remove old header styles - we're using sidebar now */
.site-header {
  display: none !important;
}

/* Main content styling */
.site-main h1 {
  font-size: 2.8em !important;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.1 !important;
}

.site-main h2 {
  font-size: 1.6em !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

.site-main p {
  font-size: 1.1em !important;
  line-height: 1.7 !important;
  margin-bottom: 1.5rem !important;
  color: #a0a0a0 !important;
}

/* Post content */
.post-content {
  margin-bottom: 4rem !important;
}

.post-header {
  margin-bottom: 3rem !important;
}

.post-title {
  font-size: 2.2em !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin-bottom: 0.5rem !important;
  color: #d0d0d0 !important;
}

.post-meta {
  color: #666 !important;
  font-size: 0.9em !important;
  margin-bottom: 2rem !important;
}

/* Post list */
.post-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.post-list li {
  margin-bottom: 3rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.post-list li:last-child {
  border-bottom: none !important;
}

.post-list .post-link {
  font-size: 1.4em !important;
  font-weight: 500 !important;
  color: #000 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  line-height: 1.3 !important;
  transition: color 0.2s ease !important;
}

.post-list .post-link:hover {
  color: #666 !important;
}

.post-list .post-meta {
  margin-top: 0.8rem !important;
  font-size: 0.85em !important;
  color: #666 !important;
}

.post-list .post-excerpt {
  margin-top: 1rem !important;
  font-size: 0.95em !important;
  color: #555 !important;
  line-height: 1.5 !important;
}

.post-list-heading {
  font-size: 1.5em !important;
  font-weight: 600 !important;
  margin: 3rem 0 2rem 0 !important;
  color: #000 !important;
}

/* About page and homepage content */
.page-content {
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

.page-content p {
  font-size: 1.1em !important;
  line-height: 1.7 !important;
  color: #333 !important;
  margin-bottom: 2rem !important;
}

/* Post previews on homepage */
.post-preview {
  margin-bottom: 3rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.post-preview:last-child {
  border-bottom: none !important;
}

.post-preview h3 {
  margin-bottom: 0.5rem !important;
}

.post-preview h3 a {
  color: #000 !important;
  font-size: 1.4em !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}

.post-preview h3 a:hover {
  color: #666 !important;
}

.post-preview .post-meta {
  color: #666 !important;
  font-size: 0.85em !important;
  margin-bottom: 1rem !important;
}

.post-preview p {
  color: #555 !important;
  font-size: 0.95em !important;
  line-height: 1.5 !important;
}

/* Footer - Minimal like rsms.me - Dark Mode */
.site-footer {
  border-top: none !important;
  padding: 3rem 0 !important;
  margin-top: 6rem !important;
  color: #666 !important;
  font-size: 0.9em !important;
}

.footer-content {
  max-width: 600px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.footer-left {
  margin: 0 !important;
  color: #666 !important;
}

.footer-right {
  display: flex !important;
  gap: 2rem !important;
}

.footer-right a {
  color: #7a7a7a !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.footer-right a:hover {
  color: #9a9a9a !important;
}

/* Remove default minima styles that conflict */
.wrapper {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile Layout - Sidebar Stacked Above (when gap < 40px) */
@media screen and (max-width: 889px) {
  body {
    font-size: 17px !important;
  }
  
  .site-container {
    flex-direction: column !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  
  .site-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 0 !important;
    border-bottom: 1px solid #2a2a2a !important;
    order: 1 !important;
    margin-bottom: 1rem !important;
  }
  
  .site-main {
    padding: 0 !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    order: 2 !important;
  }
  
  .site-main > * {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  
  .site-main h1 {
    font-size: clamp(1.8em, 4vw, 2.2em) !important;
  }
  
  .post-title {
    font-size: clamp(1.5em, 3.5vw, 1.8em) !important;
  }
  
  .post-list .post-link {
    font-size: clamp(1em, 2.5vw, 1.1em) !important;
  }
  
  /* Mobile footer - stack vertically */
  .footer-content {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
  }
  
  .footer-right {
    gap: 1.5rem !important;
  }
}

/* Contents page styling */
.contents-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 3rem 0 !important;
}

.contents-list li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1rem 0 !important;
  border-bottom: 1px solid #2a2a2a !important;
  transition: background-color 0.2s ease !important;
}

.contents-list li:hover {
  background-color: #252525 !important;
  margin: 0 -1rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.contents-list li:last-child {
  border-bottom: none !important;
}

.site-main .sidebar-nav a {
  color: #d0d0d0 !important;
  text-decoration: none !important;
  font-size: 1.4em !important;
  transition: color 0.2s ease !important;
}

.site-main .sidebar-nav a:hover {
  color: #9a9a9a !important;
}

.post-date {
  color: #7a7a7a !important;
  font-size: 0.9em !important;
  font-variant-numeric: tabular-nums !important;
}

/* Tablet breakpoint - Sidebar still stacked */
@media screen and (min-width: 600px) and (max-width: 889px) {
  .site-container {
    padding-left: clamp(1.5rem, 3vw, 2rem) !important;
    padding-right: clamp(1.5rem, 3vw, 2rem) !important;
  }
  
  .site-main {
    padding: 2rem 0 !important;
  }
}