/* styles.css — modern neutral palette, responsive layout, print-friendly
   Updated to ensure .site-footer always sits at the bottom of the page
   and the Table of contents (.toc) displays on all screen sizes,
   with footer coming after the TOC on tablet and mobile. */

/* Fonts and base */
:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0f766e;
  --nav:#0b2545;
  --glass: rgba(255,255,255,0.6);
  --radius:10px;
  --shadow: 0 6px 18px rgba(11,37,69,0.08);
  --max-width:1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  /* layout helpers */
  --header-height: 64px;   /* adjust if your header is taller/shorter */
  --footer-height: 72px;   /* adjust to match .site-footer padding/height */
}

/* Ensure main content grows so footer stays at bottom */
.layout,
.page {
  flex: 1 1 auto;
  min-height: 0; /* allow children to scroll properly inside flex items */
}

[data-theme="dark"]{
  --bg:#071022;
  --card:#071827;
  --muted:#9aa6b2;
  --accent:#2dd4bf;
  --nav:#021124;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 8px 24px rgba(2,6,23,0.6);
}

*{box-sizing:border-box}

/* ensure the body fills the viewport and acts as a column flex container */
html,body{
  height:100%;
  min-height:100vh;
}
body{
  margin:0;
  font-family:var(--sans);
  background:linear-gradient(180deg,var(--bg),#ffffff00);
  color: #0b2545;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;

  display:flex;
  flex-direction:column;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(6px);
  background:var(--glass);
  border-bottom:1px solid rgba(11,37,69,0.04);
}
.header-inner{
  max-width:var(--max-width); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.logo{width:36px;height:36px}
.site-title{font-weight:600}
.header-actions{display:flex; gap:12px; align-items:center}
.version-banner{background:linear-gradient(90deg,#e6fffa,#ecfeff); padding:6px 10px; border-radius:8px; font-weight:600; color:#064e3b}

/* Layout
   .site-main is an optional wrapper you may have around .layout.
   Ensure it is flexible so footer is pushed to bottom. */
.site-main {
  flex: 1 1 auto;
  min-height: 0;
}

.layout{
  display:flex;
  flex: 1 1 auto;           /* allow layout to grow/shrink and fill remaining space */
  min-height: 0;            /* allow children to scroll properly inside flex item */
  gap:20px;
  max-width:var(--max-width);
  margin:20px auto;
  padding:0 20px;
  /* default desktop padding-bottom left unset; tablet/mobile override below */
}
.sidebar{
  width:300px; min-width:220px; background:var(--card); border-radius:var(--radius); padding:16px;
  box-shadow:var(--shadow);
  /* replace fixed 100vh-based height with max-height so the layout can shrink */
  max-height: calc(100vh - var(--header-height) - var(--footer-height) - 40px);
  overflow:auto;
}
.content{flex:1; padding:0 8px}
.hero{background:var(--card); padding:20px; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px}
.lead{color: black}
.card{background:var(--card); padding:16px; border-radius:12px; box-shadow:var(--shadow); margin-bottom:16px}

/* Sidebar elements */
.search-wrap{display:flex; flex-direction:column; gap:8px}
#search{padding:10px; border-radius:8px; border:1px solid rgba(11,37,69,0.06)}
.toc{
  list-style:none;
  padding:0;
  margin:12px 0;
  display:block;            /* ensure TOC is visible by default */
  position:relative;
  z-index:2;                /* keep TOC above footer and other low z-index elements */
  max-height: none;         /* allow TOC to expand naturally unless constrained by sidebar */
  overflow: visible;
}
.toc li{margin:6px 0}
.toc a{color:inherit; text-decoration:none}
.collapsible{background:none;border:none;padding:6px 0;font-weight:700;cursor:pointer}

/* Page */
.page{max-width:var(--max-width); margin:20px auto; padding:0 20px}
.page-header{display:flex; align-items:center; gap:12px}
.page-header .back{color:var(--muted); text-decoration:none}
.page-content{margin-top:12px}
.figure{margin:18px 0; text-align:center}
.figure img{max-width:100%; border-radius:8px; box-shadow:var(--shadow)}
.figure figcaption{color:var(--muted); margin-top:8px}

/* Tables */
table{width:100%; border-collapse:collapse; margin:12px 0}
table th, table td{padding:10px; border:1px solid rgba(11,37,69,0.06); text-align:left}
.responsive{overflow:auto}

/* Code */
pre{background:#0b1220; color:#e6eef6; padding:12px; border-radius:8px; overflow:auto; font-family:var(--mono); font-size:13px}
pre code{white-space:pre}
.language-bash, .language-python, .language-vb{background:#0b1220; display:block; padding:12px; border-radius:8px}

/* Footer
   Keep footer in normal flow and push it to the bottom using margin-top:auto */
.site-footer{
  margin-top:auto;
  flex-shrink:0;
  position:relative;
  z-index:0;
  color:var(--muted);
  text-align:center;
  padding:20px;
  border-top:1px solid rgba(11,37,69,0.06);
  background:var(--card);
}

/* Ensure cards and other content appear above footer if stacking occurs */
.card,
.sidebar,
.toc,
.hero {
  position: relative;
  z-index: 1;
}

/* Buttons */
.btn{background:var(--accent); color:white; border:none; padding:8px 12px; border-radius:8px; cursor:pointer}

/* Responsive */
/* On smaller screens we make sure the layout is column and reserve space at the bottom
   so the footer does not overlap the TOC or other cards. */
@media (max-width:900px){
  .layout{flex-direction:column}
  .sidebar{width:100%; height:auto; order:2}
  .content{order:1}

  /* Reserve space equal to footer height + small gap so footer sits after all content */
  .layout {
    padding-bottom: calc(var(--footer-height) + 24px);
  }
}

/* Tablet and Medium Screens (600px - 899px) */
@media (max-width:899px){
  .header-inner{
    flex-wrap:wrap;
    gap:8px;
  }
  .site-title{
    font-size:18px;
  }
  .layout{
    gap:16px;
    margin:16px auto;
    padding:0 16px;
    /* ensure footer sits after TOC and other cards */
    padding-bottom: calc(var(--footer-height) + 20px);
  }
  .sidebar{
    width:100%;
    height:auto;
    padding:12px;
    margin-bottom:16px;
    max-height: none; /* allow natural flow on small screens */
    overflow: visible; /* ensure TOC is visible and not clipped */
  }
  .content{
    padding:0;
  }
  .card{
    padding:14px;
    margin-bottom:14px;
  }
  .hero{
    padding:16px;
  }
  table th, table td{
    padding:8px;
    font-size:14px;
  }
  pre{
    padding:10px;
    font-size:12px;
  }
  .header-actions{
    flex-wrap:wrap;
    gap:8px;
  }

  /* Force TOC to be visible on tablet sizes even if other rules attempted to hide it */
  .toc { display:block !important; max-height: none !important; overflow: visible !important; }
  .toc-toggle { display:inline-block; }
}

/* Mobile Phones (320px - 599px) */
@media (max-width:599px){
  .header-inner{
    padding:10px 12px;
    gap:6px;
  }
  .logo{
    width:28px;
    height:28px;
  }
  .site-title{
    font-size:16px;
  }
  .breadcrumb{
    font-size:13px;
    padding:8px 12px;
  }
  .version-banner{
    padding:4px 8px;
    font-size:12px;
  }
  .btn{
    padding:6px 10px;
    font-size:13px;
  }
  .layout{
    gap:12px;
    margin:12px auto;
    padding:0 12px;
    /* reserve footer space so it comes after TOC and other cards */
    padding-bottom: calc(var(--footer-height) + 18px);
  }
  #search{
    padding:8px;
    font-size:14px;
  }
  .search-item{
    padding:8px;
    margin:4px 0;
  }
  .search-item strong{
    font-size:13px;
  }
  .search-item .snippet{
    font-size:12px;
  }
  .toc{
    margin:8px 0;
    display:block !important;   /* ensure TOC is visible on mobile */
    max-height: none !important;
    overflow: visible !important;
    z-index: 2;
  }
  .toc li{
    margin:4px 0;
    font-size:13px;
  }
  .collapsible{
    padding:4px 0;
    font-size:13px;
  }
  .content{
    padding:0;
  }
  .hero{
    padding:12px;
    margin-bottom:12px;
  }
  .hero h1{
    font-size:20px;
    margin:8px 0;
  }
  .lead{
    font-size:13px;
  }
  .card{
    padding:12px;
    margin-bottom:12px;
  }
  .card h2{
    font-size:16px;
    margin:8px 0;
  }
  .page{
    margin:12px auto;
    padding:0 12px;
  }
  .page-header{
    flex-wrap:wrap;
    gap:8px;
  }
  .figure{
    margin:12px 0;
  }
  .figure img{
    max-width:100%;
  }
  table{
    font-size:12px;
    margin:8px 0;
  }
  table th, table td{
    padding:6px;
    font-size:12px;
  }
  pre{
    padding:8px;
    font-size:11px;
    overflow-x:auto;
  }
  .site-footer{
    margin-top:16px;
    font-size:12px;
    padding:12px;
  }
  .content-cards{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }
  ol, ul{
    padding-left:16px;
    font-size:13px;
  }
  h1{font-size:22px}
  h2{font-size:18px}
  h3{font-size:16px}
  h4{font-size:14px}
}

/* Small Tablets (600px - 899px) */
@media (min-width:600px) and (max-width:899px){
  .header-inner{
    padding:11px 18px;
  }
  .logo{
    width:32px;
    height:32px;
  }
  .site-title{
    font-size:17px;
  }

  .layout{
    gap:18px;
    margin:18px auto;
    padding:0 18px;
    padding-bottom: calc(var(--footer-height) + 20px);
  }
  .sidebar{
    width:100%;
    padding:14px;
    max-height: none;
    overflow: visible;
  }
  .card{
    padding:15px;
  }
  .content-cards{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  table th, table td{
    padding:9px;
    font-size:13px;
  }

  /* Ensure TOC is visible on small tablets */
  .toc { display:block !important; max-height: none !important; overflow: visible !important; }
}

/* Laptops and Large Screens (900px+) */
@media (min-width:900px){
  .layout{
    flex-direction:row;
    gap:24px;
  }
  .sidebar{
    width:280px;
    /* use a slightly different max-height on large screens to account for header/footer */
    max-height: calc(100vh - var(--header-height) - var(--footer-height) - 24px);
  }
  .content-cards{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }

  /* TOC is visible by default on large screens */
  .toc { display:block; }
}

/* Extra Large Screens (1400px+) */
@media (min-width:1400px){
  :root{
    --max-width:1300px;
  }
  .layout{
    gap:32px;
  }
  .sidebar{
    width:320px;
  }
  .card{
    padding:20px;
  }
  .hero{
    padding:24px;
  }
}

/* Print */
@media print{
  body{background:white; color:black}
  .sidebar, .header-actions, .version-banner, .toc-toggle, #search {display:none}
  .page{max-width:100%; margin:0; padding:0}
  pre{page-break-inside:avoid}
}

/* TOC styling when moved into main content */
.toc-in-content {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  margin: 12px 0;
  max-height: none;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Ensure TOC in sidebar keeps original look on large screens */
@media (min-width:900px) {
  .toc {
    display: block;
    margin: 12px 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    max-height: none;
  }
  /* remove any content-specific styling if present */
  .toc.toc-in-content { 
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 12px 0;
  }
}

/* Tablet and mobile: ensure TOC is visible and styled when in content */
@media (max-width:899px) {
  /* keep TOC visible in sidebar if JS hasn't moved it yet */
  .toc { display:block !important; }

  /* layout padding-bottom reserved so footer sits after TOC */
  .layout { padding-bottom: calc(var(--footer-height) + 20px); }

  /* If TOC is moved into content, apply the content styling */
  .toc.toc-in-content { 
    display:block !important;
  }

  /* If you want TOC to appear above main content cards, ensure it is placed before them in DOM.
     The JS will append it to .content at the top; this CSS ensures spacing and visual separation. */
  .content > .toc-in-content { order: -1; }
}

/* Helpers for elements when moved into .content */
.search-in-content,
.toc-header-in-content,
.toc-in-content {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  margin: 12px 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Visual ordering inside .content when moved:
   - search above toc header above toc list */
.content > .search-in-content { order: -3; }
.content > .toc-header-in-content { order: -2; }
.content > .toc-in-content { order: -1; }

/* Keep desktop sidebar appearance unchanged */
@media (min-width:900px) {
  .search-in-content,
  .toc-header-in-content,
  .toc-in-content {
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 12px 0;
    order: 0;
  }
}

/* Ensure layout reserves footer space on small screens */
@media (max-width:899px) {
  .layout { padding-bottom: calc(var(--footer-height) + 20px); }
}

/* Optional: small spacing tweak so TOC header visually groups with TOC list */
.toc-header-in-content + .toc-in-content {
  margin-top: 6px;
}