* { box-sizing: border-box; }
html { line-height: 1.5; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #111; background: #fff; }
img, picture, video { max-width: 100%; height: auto; display: block; }
.content img { max-width: 100%; height: auto; }
figure { margin: 1rem 0; }
figure > picture, figure > img { display: block; }

.skiplink { position: absolute; left: -9999px; }
.skiplink:focus { left: 0; background: #000; color: #fff; padding: .5rem; }

.site-header, .site-footer { padding: .75rem 1rem; border-bottom: 1px solid #e5e5e5; }
.site-footer { border-top: 1px solid #eee; border-bottom: 0; color: #666; }

/* Brand + inline menu */
.site-branding { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; }
.brand { font-weight: 700; text-decoration: none; color: inherit; white-space: nowrap; }
.topnav ul { list-style: none; display: flex; align-items: center; gap: 1rem; margin: 0; padding: 0; flex-wrap: wrap; }
.topnav li { display: inline; }
.topnav a { text-decoration: none; color: inherit; padding: .25rem .5rem; }
.topnav a:hover { text-decoration: underline; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; width: min(1200px, 100%); margin: 0 auto; padding: 1rem; }
.content { min-width: 0; overflow-wrap: anywhere; }
.sidebar { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow: auto; border-left: 1px solid #eee; padding-left: 1rem; }

.page-header h1 { margin: .2rem 0; }
h2.post-title {
    display: initial;
}
.pubdate { color: #666; font-size: .9rem; }

/* TOC */
.toc-title, .recent-title { font-weight: 600; margin: .5rem 0; }
.toc-tree ul { list-style: none; padding-left: .75rem; }
.toc-tree a { text-decoration: none; }
.toc-tree a.active { text-decoration: underline; }

/* Recent posts */
.recent-list { list-style: none; padding-left: 0; margin: 0; }
.recent-list li { margin: .25rem 0; }

/* Post lists */
.postlist { list-style: none; padding-left: 0; }
.postlist li { padding: .5rem 0; border-bottom: 1px solid #eee; }
.postlist .meta { color: #666; font-size: .9rem; margin-left: .5rem; }

/* Code blocks and inline code */
.content pre, .content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.content pre { overflow: auto; max-width: 100%; padding: .75rem; border: 1px solid #eee; background: #f8f8f8; }
.content pre code { white-space: pre; }
.content code { background: #f1f1f1; padding: .1rem .25rem; }
.content a { word-break: break-word; }

/* Tables (prevent overflow) */
.content table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.content th, .content td { padding: .4rem .5rem; border: 1px solid #eaeaea; }
.content table thead { background: #fafafa; }

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; border-left: none; padding-left: 0; }
}
@media (max-width: 700px) {
  .site-branding { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* Light/Dark based on system preference */
@media (prefers-color-scheme: dark) {
  body { background: #0b0b0c; color: #e6e6e6; }
  .site-header, .site-footer { border-color: #222; }
  .sidebar { border-color: #222; }
  a { color: #9ecbff; }
  .content pre { background: #111; border-color: #222; }
  .content code { background: #1a1a1a; }
  .content table thead { background: #121212; }
}

/* Footer menu */
.footnav { margin-top: .5rem; }
.footnav ul { list-style: none; display: flex; gap: .75rem; padding: 0; margin: 0; flex-wrap: wrap; }
.footnav li { display: inline; }
.footnav a { text-decoration: none; color: inherit; }
.footnav a:hover { text-decoration: underline; }

/* Pagination: support both nav.pagination and ul.pagination */
nav.pagination, ul.pagination { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; list-style: none; padding: 0; }
nav.pagination a, nav.pagination span,
ul.pagination a, ul.pagination span { padding: .25rem .6rem; border: 1px solid #ddd;  text-decoration: none; color: inherit; }
nav.pagination a:hover, ul.pagination a:hover { background: #f6f6f6; }
nav.pagination span[aria-current="page"], ul.pagination span[aria-current="page"] { font-weight: 700; background: #efefef; }
@media (prefers-color-scheme: dark) {
  nav.pagination a, nav.pagination span,
  ul.pagination a, ul.pagination span { border-color: #333; }
  nav.pagination a:hover, ul.pagination a:hover { background: #161616; }
  nav.pagination span[aria-current="page"], ul.pagination span[aria-current="page"] { background: #1a1a1a; }
}

/* Footer inline layout */
.site-footer { padding: .75rem 1rem; border-top: 1px solid #eee; }
.site-footer-inner { display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; }
.site-footer .copyright { white-space: nowrap; }
.footnav { margin-top: 0; margin-left: auto; }
.footnav ul { list-style: none; display: flex; gap: .75rem; padding: 0; margin: 0; flex-wrap: wrap; }
.footnav li { display: inline; }
.footnav a { text-decoration: none; color: inherit; padding: .25rem .5rem; }

/* Pagination without borders */
nav.pagination a, nav.pagination span,
ul.pagination a, ul.pagination span { border: none !important; background: transparent; }
nav.pagination a:hover, ul.pagination a:hover { background: rgba(0,0,0,0.04); }
nav.pagination span[aria-current="page"], ul.pagination span[aria-current="page"] { font-weight: 700; background: rgba(0,0,0,0.06); }

@media (prefers-color-scheme: dark) {
  .site-footer { border-top-color: #222; }
  nav.pagination a:hover, ul.pagination a:hover { background: rgba(255,255,255,0.06); }
  nav.pagination span[aria-current="page"], ul.pagination span[aria-current="page"] { background: rgba(255,255,255,0.08); }
}

/* Footer responsive stacking */
@media (max-width: 640px) {
  .site-footer-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .footnav { margin-left: 0; }
}


/* Small screens: header menu one item per line */
@media (max-width: 700px) {
  .site-branding { flex-direction: column; align-items: stretch; }
  .topnav ul { flex-direction: column; align-items: stretch; gap: .25rem; }
  .topnav a { display: block; padding: .6rem .75rem; }
}


/* Table refinements */
.content table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; width: 100%; table-layout: auto; }
.content th, .content td { padding: .4rem .5rem; border: 1px solid #eaeaea; vertical-align: top; word-break: normal; overflow-wrap: break-word; }
.content td a, .content th a { word-break: break-all; }


/* Refined wrapping for general content */
.content p, .content li { overflow-wrap: break-word; word-break: normal; }

/* Copy-to-clipboard for code blocks */
.content pre { position: relative; }
.copy-btn {
  position: absolute;
  top: .4rem;
  right: .4rem;
  font: inherit;
  font-size: .85rem;
  padding: .2rem .5rem;
  border: 1px solid #ddd;
  cursor: pointer;
}
.copy-btn:hover { background: #f6f6f6; }
.copy-btn:disabled { opacity: .6; cursor: default; }
.copy-status {
  position: absolute;
  top: .4rem;
  right: 3.4rem;
  font-size: .8rem;
  opacity: .9;
  background: rgba(0,0,0,0.04);
  padding: .1rem .4rem;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .copy-status { background: rgba(255,255,255,0.07); }
}

/* tabbed content */
.nav-link {
    padding: .5rem 1rem
}

.nav-link:hover,.nav-link:focus {
    text-decoration: none
}

.nav-link.disabled {
    color: #6c757d;
    pointer-events: none;
    cursor: default
}

.nav-tabs {
    border-bottom: 1px solid var(--off-white)
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus {
    border-color: var(--e9ecef)
}

.nav-tabs .nav-link.disabled {
    color: #6c757d;
    background-color: initial;
    border-color: transparent
}

.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link {
    color: var(--tab-nav-text);
    background-color: var(--white);
    border-color: var(--white)
}

.nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.tab-content>.tab-pane {
    display: none
}

.tab-content>.active {
    display: block;
    min-height: 500px
}

.tab-content pre {
    margin: 0
}

/* Site search */
.site-search-results { z-index: 1000; }

/* Search input polish */
.site-search input[type="search"] {
  padding: .45rem .75rem .45rem 2rem;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: .55rem 50%;
  background-size: 14px 14px;
}
.site-search input[type="search"]::placeholder { color: #888; }
.site-search input[type="search"]:focus {
  border-color: #bbb;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

/* Results list hover states */
.site-search .sr-list li:hover { background: #fafafa; }
@media (prefers-color-scheme: dark) {
  .site-search input[type="search"]::placeholder { color: #aaa; }
  .site-search input[type="search"]:focus {
    border-color: #444;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
  }
  .site-search .sr-list li:hover { background: #121212; }
}

/* Sidebar search layout */
.sidebar .site-search { width: 100%; margin: 0 0 .75rem 0; }
.sidebar .site-search input[type="search"] { width: 100%; }
.sidebar .site-search-results { left: 0; right: 0; max-width: 100%; }

/* Main-column search results */
.site-search-results-main {
  margin: 0 0 1rem 0;
  padding: .75rem 1rem;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
}
.site-search-results-main .sr-list { list-style: none; margin: 0; padding: 0; }
.site-search-results-main .sr-list li { padding: .5rem 0; border-bottom: 1px solid #eee; }
.site-search-results-main .sr-list li:last-child { border-bottom: 0; }
.site-search-results-main .sr-list a { text-decoration: none; font-weight: 600; color: inherit; }
.site-search-results-main .sr-list p { margin: .25rem 0 0; color: #666; font-size: .95rem; }
.site-search-results-main .sr-empty { color: #666; font-size: .95rem; }

@media (prefers-color-scheme: dark) {
  .site-search-results-main {
    border-color: #333;
    background: #0b0b0c;
    box-shadow: 0 4px 10px rgba(0,0,0,.6);
  }
  .site-search-results-main .sr-list li { border-bottom-color: #222; }
  .site-search-results-main .sr-list p, .site-search-results-main .sr-empty { color: #aaa; }
}