/* ============================================================================
 * sidebar-spacing-fix.css  (v2 — covers index page + listing pages)
 * ============================================================================
 * Load LAST in the css: list in _quarto.yml so it can override theme defaults.
 *
 * Three concerns, in order:
 *   A.  Right sidebar spacing on every page (the original bug)
 *   B.  Listing page (.quarto-post) row layout
 *   C.  Home page hero, stats, topics, connect blocks
 * ========================================================================== */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  A.  RIGHT SIDEBAR — applies site-wide                              ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Push the right sidebar away from the article column with both internal
   padding and an external margin. The double cushion is intentional:
   margin handles the gutter between Bootstrap columns, padding handles
   text inside the sidebar. */
@media (min-width: 992px) {
  #quarto-margin-sidebar,
  .quarto-margin-sidebar {
    padding-left: 1rem !important;
    margin-left: 0.5rem !important;
    min-width: 300px;
    flex: 1 1 auto;
  }
}

/* Flatter sidebar look — kills the heavy box-shadow + 8px border-radius
   from styles.css which makes it look like a payment form. */
@media (min-width: 992px) {
  #quarto-margin-sidebar {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 1.5rem 0 1.5rem 2rem !important;
  }
  #quarto-margin-sidebar .sidebar-title,
  #quarto-margin-sidebar h2 {
    border-bottom: none !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem !important;
    color: #6c757d !important;
    font-weight: 500 !important;
  }
  #quarto-margin-sidebar nav a:hover,
  #quarto-margin-sidebar a:hover {
    background: transparent !important;
    color: #4895ab !important;
    transform: none !important;
    text-decoration: underline !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] {
    font-family: 'PT Serif', Georgia, serif;
    padding: 1.25rem 1rem !important;
    border: 1px solid #c9c9c9 !important;
    border-radius: 5px !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] > h2,
  #quarto-margin-sidebar nav[role="doc-toc"] > .h2 {
    margin: 0 0 0.7rem 0 !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #868e96 !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] ul,
  #quarto-margin-sidebar nav[role="doc-toc"] li {
    list-style: none !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] > ul,
  #quarto-margin-sidebar nav[role="doc-toc"] ul {
    margin: 0 !important;
    padding-left: 0 !important;
    font-size: 0.88rem !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] ul ul {
    margin-top: 0.15rem !important;
    margin-left: 1.1rem !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] li {
    margin: 0.2rem 0 !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] li > a {
    position: relative;
    display: block;
    padding: 0.2rem 0.5rem !important;
    border-left: none !important;
    background: transparent !important;
    color: #495057 !important;
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    border-radius: 3px;
    transition: all 0.15s ease !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] li > a::before {
    content: none !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] ul ul > li > a {
    padding-left: 0.5rem !important;
    font-size: 0.84rem !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] ul ul > li > a::before {
    content: none !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] ul ul ul > li > a {
    font-size: 0.8rem !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] ul ul ul > li > a::before {
    content: none !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] li > a:hover {
    color: #4895ab !important;
    background: transparent !important;
    text-decoration: underline !important;
  }

  #quarto-margin-sidebar nav[role="doc-toc"] li > a.active,
  #quarto-margin-sidebar nav[role="doc-toc"] li > ul > li > a.active {
    color: #d46c5b !important;
    font-weight: 600 !important;
    background: transparent !important;
    border-left: none !important;
    text-decoration: none !important;
  }
}

/* Hide empty Other Links / TOC stub cards. Remove if you start using them. */
.quarto-other-links:empty,
.quarto-other-links:has(.quarto-other-links-text-target:empty) {
  display: none;
}

/* Collapse the dead gap between sibling blocks in the right sidebar.
   Three independent causes are handled defensively:
     (1) empty children (TOC nav with no headings, secondary-nav stub)
         reserving full-height boxes
     (2) the sidebar parent using flex with justify-content other than
         flex-start, pushing the last child to the bottom
     (3) descendant elements with large auto top/bottom margins */
@media (min-width: 992px) {
  #quarto-margin-sidebar > *:empty,
  #quarto-margin-sidebar nav#TOC:empty,
  #quarto-margin-sidebar nav#TOC > ul:empty,
  #quarto-margin-sidebar .quarto-secondary-nav:empty {
    display: none !important;
  }

  #quarto-margin-sidebar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 1.25rem !important;
    align-items: stretch !important;
  }

  #quarto-margin-sidebar > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  B.  LISTING PAGES — .quarto-post row layout                         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

.quarto-post {
  padding: 1.25rem 0;
  border-bottom: 1px solid #e9ecef;
  display: grid;
  grid-template-columns: 110px 1fr auto;   /* date | text | thumbnail */
  gap: 1.5rem;
  align-items: start;
}

.quarto-post .metadata {
  color: #6c757d;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quarto-post .body {
  min-width: 0;
  padding-right: 2rem;
}

.quarto-post .body h3,
.quarto-post .body .listing-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: 1.3;
}

.quarto-post .body .listing-description {
  color: #495057;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-top: 0.5rem;
}

.quarto-post .thumbnail,
.quarto-post .thumbnail img,
.quarto-post img.thumbnail-image {
  max-width: 220px;
  max-height: 160px;
  object-fit: cover;
  border-radius: 2px;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  C.  HOME PAGE — hero, stats, topics, connect                        ║
   ║  These selectors pair with the new index.qmd. If you keep the old    ║
   ║  index.qmd with inline style="" attributes, the rules in styles.css  ║
   ║  already cover those — these are additive.                           ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Hero block */
.home-hero {
  text-align: center;
  padding: 2.5rem 0 1.5rem;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 2.5rem;
}
.home-hero .home-logo {
  display: block;
  margin: 0 auto 1rem;
}
.home-hero p {
  color: #6c757d;
  font-size: 1.05rem;
  font-style: italic;
  margin: 0 auto;
  max-width: 540px;
}

/* Stats strip — three pill cards */
.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0 0 3rem;
}
.home-stat {
  text-align: center;
  padding: 1.25rem 1rem;
  background: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #eef0f2;
}
.home-stat-num {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  color: #4895ab;
  line-height: 1;
  margin-bottom: 0.35rem;
}
.home-stat-num.accent {
  color: #d46c5b;
}
.home-stat-label {
  display: block;
  color: #6c757d;
  font-size: 0.875rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.home-stat-label:hover {
  color: #4895ab;
}

/* CTA links between sections — text link, not a button */
.home-cta {
  display: inline-block;
  margin: 1rem 0 2.5rem;
  color: #4895ab;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.home-cta:hover {
  border-bottom-color: #4895ab;
}

/* Topics grid — 3 columns on wide, 2 on medium, 1 on narrow */
.home-topics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1rem 0 3rem;
}
.home-topic {
  padding: 1.25rem 1.25rem 1rem;
  background: #fafbfc;
  border: 1px solid #eef0f2;
  border-left: 3px solid #4895ab;
  border-radius: 2px;
  transition: border-left-color 0.15s, background 0.15s;
}
.home-topic:hover {
  border-left-color: #d46c5b;
  background: #ffffff;
}
.home-topic strong a {
  color: #2a3f4f;
  text-decoration: none;
  font-size: 1.05rem;
}
.home-topic strong a:hover {
  color: #4895ab;
}
.home-topic p {
  margin: 0.4rem 0 0;
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Connect section — two columns */
.home-connect {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 1rem 0 2rem;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 4px;
}
.home-connect-block h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #2a3f4f;
}
.home-connect-block p {
  margin: 0;
  color: #495057;
  line-height: 1.6;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  D.  Mobile (<768px) — collapse all grids to single column           ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 768px) {
  .quarto-post {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .quarto-post .body {
    padding-right: 0;
  }
  .quarto-post .thumbnail,
  .quarto-post .thumbnail img,
  .quarto-post img.thumbnail-image {
    max-width: 100%;
    max-height: none;
  }

  .home-stats,
  .home-topics,
  .home-connect {
    grid-template-columns: 1fr;
  }
  .home-stat {
    padding: 1rem;
  }
}

@media (min-width: 769px) and (max-width: 991px) {
  .home-topics {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  E.  Dark mode — match theme-dark.scss tokens                        ║
   ║      body-bg:    #1a1a1a                                             ║
   ║      surface:    #2d2d2d (elevated cards)                            ║
   ║      surface-2:  #242424 (subtle wells)                              ║
   ║      border:     #3a3a3a                                             ║
   ║      text:       #e0e0e0                                             ║
   ║      text-muted: #adb5bd                                             ║
   ║      accent:     #5aa9bd (lighter teal for contrast)                 ║
   ║      coral:      #e08573                                             ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* Hero divider */
body.quarto-dark .home-hero {
  border-bottom-color: #3a3a3a;
}
body.quarto-dark .home-hero p {
  color: #adb5bd;
}

/* Stats strip */
body.quarto-dark .home-stat {
  background: #242424;
  border-color: #3a3a3a;
}
body.quarto-dark .home-stat-num {
  color: #5aa9bd;
}
body.quarto-dark .home-stat-num.accent {
  color: #e08573;
}
body.quarto-dark .home-stat-label {
  color: #adb5bd;
}
body.quarto-dark .home-stat-label:hover {
  color: #5aa9bd;
}

/* CTA links */
body.quarto-dark .home-cta {
  color: #5aa9bd;
}
body.quarto-dark .home-cta:hover {
  border-bottom-color: #5aa9bd;
}

/* Topics grid */
body.quarto-dark .home-topic {
  background: #242424;
  border-color: #3a3a3a;
  border-left-color: #5aa9bd;
}
body.quarto-dark .home-topic:hover {
  background: #2d2d2d;
  border-left-color: #e08573;
}
body.quarto-dark .home-topic strong a {
  color: #e0e0e0;
}
body.quarto-dark .home-topic strong a:hover {
  color: #5aa9bd;
}
body.quarto-dark .home-topic p {
  color: #adb5bd;
}

/* Connect block */
body.quarto-dark .home-connect {
  background: #242424;
}
body.quarto-dark .home-connect-block h3 {
  color: #e0e0e0;
}
body.quarto-dark .home-connect-block p {
  color: #adb5bd;
}

/* Listing rows — dark borders */
body.quarto-dark .quarto-post {
  border-bottom-color: #3a3a3a;
}
body.quarto-dark .quarto-post .metadata {
  color: #adb5bd;
}
body.quarto-dark .quarto-post .body .listing-description {
  color: #adb5bd;
}

/* Right sidebar in dark mode — soften the divider */
body.quarto-dark #quarto-margin-sidebar {
  border-left-color: transparent !important;
}
body.quarto-dark #quarto-margin-sidebar .sidebar-title,
body.quarto-dark #quarto-margin-sidebar h2 {
  color: #adb5bd !important;
}
body.quarto-dark #quarto-margin-sidebar nav a:hover,
body.quarto-dark #quarto-margin-sidebar a:hover {
  color: #5aa9bd !important;
}
body.quarto-dark #quarto-margin-sidebar nav[role="doc-toc"] {
  border-color: #404040;
}
body.quarto-dark #quarto-margin-sidebar nav[role="doc-toc"] > h2,
body.quarto-dark #quarto-margin-sidebar nav[role="doc-toc"] > .h2 {
  color: #98a2aa !important;
}
body.quarto-dark #quarto-margin-sidebar nav[role="doc-toc"] li > a {
  color: #c6ccd2 !important;
}
body.quarto-dark #quarto-margin-sidebar nav[role="doc-toc"] li > a:hover {
  color: #5aa9bd !important;
}
body.quarto-dark #quarto-margin-sidebar nav[role="doc-toc"] li > a.active,
body.quarto-dark #quarto-margin-sidebar nav[role="doc-toc"] li > ul > li > a.active {
  color: #e08573 !important;
}