/* org-bootstrap-publish: hyde-style sidebar shim for Bootstrap 5 */

:root {
  --obp-sidebar-bg: #202020;
  --obp-sidebar-fg: #e8e8e8;
  --obp-sidebar-muted: #9a9a9a;
  --obp-accent: #ff6f3c;
  --obp-content-max: 780px;

  --obp-body-bg: #fafafa;
  --obp-body-fg: #222;
  --obp-card-bg: #ffffff;
  --obp-card-border: #e3e3e3;
  --obp-card-title: #222;
  --obp-inline-code-bg: #eee;
  --obp-inline-code-fg: #c7254e;
  --obp-blockquote-fg: #555;
  --obp-link: #b5461c;
}

[data-bs-theme="dark"] {
  --obp-body-bg: #1a1a1a;
  --obp-body-fg: #e2e2e2;
  --obp-card-bg: #262626;
  --obp-card-border: #3a3a3a;
  --obp-card-title: #f1f1f1;
  --obp-inline-code-bg: #2c2c2c;
  --obp-inline-code-fg: #ff8a80;
  --obp-blockquote-fg: #a5a5a5;
  --obp-link: #ff9a6b;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  color: var(--obp-body-fg);
  background: var(--obp-body-bg);
}

.site {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 18rem;
  flex: 0 0 18rem;
  background: var(--obp-sidebar-bg);
  color: var(--obp-sidebar-fg);
  padding: 2rem 1.75rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.sidebar-inner { display: flex; flex-direction: column; height: 100%; }

.site-title {
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
  font-weight: 700;
}
.site-title a {
  color: var(--obp-sidebar-fg);
  text-decoration: none;
}
.site-title a:hover { color: var(--obp-accent); }

.site-tagline {
  color: var(--obp-sidebar-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.sidebar-nav ul { margin: 0; padding: 0; }
.sidebar-nav li { margin-bottom: 0.4rem; }
.sidebar-nav a {
  color: var(--obp-sidebar-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.sidebar-nav a:hover {
  color: var(--obp-accent);
  border-bottom-color: var(--obp-accent);
}

.sidebar-footer {
  margin-top: auto;
  color: var(--obp-sidebar-muted);
  font-size: 0.85rem;
  padding-top: 2rem;
}

.content {
  flex: 1 1 auto;
  padding: 2.5rem 3rem;
  overflow-x: auto;
}

.content-inner {
  max-width: var(--obp-content-max);
  margin: 0 auto;
}

/* Post cards on index */
.post-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: var(--obp-card-bg);
  border: 1px solid var(--obp-card-border);
  color: var(--obp-body-fg);
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.post-card .card-title a { color: var(--obp-card-title); }
.post-card .card-title a:hover { color: var(--obp-accent); }
.post-card .post-summary p { margin-bottom: 0.5rem; font-size: 0.95rem; }
.post-card .post-summary :last-child { margin-bottom: 0; }

/* Post body */
.post-header h1 {
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 700;
}
.post-meta { font-size: 0.9rem; }
.post-body h2 { margin-top: 2rem; font-size: 1.5rem; }
.post-body h3 { margin-top: 1.5rem; font-size: 1.2rem; }
.post-body p, .post-body ul, .post-body ol { margin-bottom: 1rem; }

.post-body pre {
  background: #1e1e1e;
  color: #dcdcdc;
  padding: 1rem;
  border-radius: 0.4rem;
  overflow-x: auto;
  font-size: 0.9rem;
  line-height: 1.5;
}
.post-body code {
  background: var(--obp-inline-code-bg);
  color: var(--obp-inline-code-fg);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.92em;
}
.post-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.post-body img { margin: 1rem 0; }

.post-body blockquote {
  color: var(--obp-blockquote-fg);
  font-style: italic;
}

.post-body a { color: var(--obp-link); }
.post-body a:hover { color: var(--obp-accent); }

/* Tag lists / cloud */
.tag-cloud a { font-size: 0.95rem; }
.post-list li { font-size: 1.02rem; }

.page-header h2 { font-weight: 700; }

/* Search widget */
.search-widget { position: relative; margin: 1rem 0; }
.search-widget input[type="search"] {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 4px;
  outline: none;
}
.search-widget input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.6); }
.search-widget input[type="search"]:focus {
  border-color: var(--obp-accent);
  background: rgba(255, 255, 255, 0.14);
}
.search-results {
  list-style: none;
  margin: 0.4rem 0 0 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--obp-card-bg);
  color: var(--obp-body-fg);
  border: 1px solid var(--obp-card-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0; right: 0;
  z-index: 20;
}
.search-results li { border-bottom: 1px solid var(--obp-card-border); }
.search-results li:last-child { border-bottom: 0; }
.search-results li a {
  display: block;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  color: inherit;
}
.search-results li a:hover,
.search-results li.active a { background: rgba(255, 111, 60, 0.12); }
.search-results .search-title { display: block; font-weight: 600; font-size: 0.95rem; }
.search-results .search-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--obp-blockquote-fg);
  margin-top: 0.15rem;
}
.search-results .search-empty { padding: 0.6rem 0.7rem; color: var(--obp-blockquote-fg); font-style: italic; }

/* Theme toggle button */
.theme-toggle {
  margin-top: 0.8rem;
  background: transparent;
  color: var(--obp-sidebar-fg);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--obp-accent);
  color: var(--obp-accent);
}
.theme-toggle .theme-toggle-label::before { content: "Light mode"; }
[data-bs-theme="dark"] .theme-toggle .theme-toggle-label::before { content: "Dark mode"; }

/* Responsive: collapse sidebar on top on small screens */
@media (max-width: 768px) {
  .site { flex-direction: column; }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    padding: 1.5rem;
  }
  .content { padding: 1.5rem; }
  .sidebar-footer { padding-top: 1rem; }
}