/* Google Fonts — sophisticated serif for headings, monospace for code */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
  --color-bg-raised: #0d1424;
  --color-border: #1e293b;
  --color-heading: #f8fafc;
  --color-muted: #94a3b8;
  --color-faint: #64748b;
  --color-blue: #3b82f6;
  --color-gold: #c9a876;
  --color-gold-soft: rgba(201, 168, 118, 0.10);
}

/*==================================================
  TITLE BLOCK
==================================================*/

#title-block-header {
    width: 100%;
}

#title-block-header .quarto-title {

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    margin: 0 auto 2rem auto !important;
    max-width: 850px !important;
}

#title-block-header h1.title {

    width: 100% !important;

    text-align: center !important;

    font-family: 'Playfair Display', serif !important;

    font-size: 3rem !important;

    font-weight: 700 !important;

    line-height: 1.15 !important;

    color: var(--color-heading);

    margin-bottom: .6rem !important;
}

#title-block-header p.subtitle {

    width: 100% !important;

    text-align: center !important;

    font-family: 'Playfair Display', serif !important;

    font-style: italic;

    font-size: 1.4rem;

    color: var(--color-muted);

    margin-bottom: 1rem !important;
}

/* category tags */

#title-block-header .quarto-categories{

    justify-content:center !important;

    width:100%;
}

/* ==========================================================================
   SPLIT METADATA GRID (AUTHOR LEFT / PUBLISHED RIGHT)
   ========================================================================== */


.custom-metadata-grid {

    margin-top: 0.8rem !important;
    margin-bottom: 3rem !important;

    padding-bottom: 1.5rem !important;

    border-bottom: 1px solid rgba(255,255,255,.08);

    color: var(--color-muted);

    font-family: "Inter", sans-serif !important;
    row-gap:.5rem !important;
}


/* AUTHOR / PUBLISHED */

.custom-metadata-grid strong {

  font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--color-faint) !important;

    margin-bottom: 0.05rem !important;
    display: block !important;
}


/* Author name + date */

.custom-metadata-grid a,
.custom-metadata-grid .text-end {

    font-size: 1.08rem !important;

    font-weight: 500;

    color: #dbe4ee !important;

    text-decoration: none !important;

    line-height: 1.3;
}

.custom-metadata-grid p{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.05 !important;
}

.custom-metadata-grid a:hover {

    color: white !important;

    border-bottom: 1px dotted rgba(255,255,255,.25);
}

.custom-metadata-grid strong{
    margin-bottom:.1rem !important;
}

/* ==========================================================================
   BLOG LISTING CARDS
   Covers both of Quarto's listing markups ('grid' → .quarto-grid-item/.card,
   'default' → .quarto-post) so the fix holds regardless of which listing
   type the Blog index page uses. The white card-body background from the
   underlying Bootstrap theme was swallowing the title text — this removes
   it and re-themes the card to match the rest of the dark site.
   ========================================================================== */

.quarto-grid-item,
.quarto-post {
  background: var(--color-bg-raised) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.quarto-grid-item:hover,
.quarto-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
  border-color: var(--color-gold) !important;
}

.quarto-grid-item .card,
.quarto-grid-item .card-body,
.quarto-grid-item .card-img-top,
.quarto-grid-item .thumbnail-image,
.quarto-post .body,
.quarto-post .thumbnail,
.quarto-post .metadata {
  background: transparent !important;
  border: none !important;
}

.quarto-grid-item .listing-title,
.quarto-grid-item .card-title,
.quarto-post .listing-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--color-heading) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 1rem 1.1rem 0.4rem !important;
}

.quarto-grid-item .listing-subtitle,
.quarto-grid-item .listing-description,
.quarto-grid-item .card-text,
.quarto-post .listing-subtitle,
.quarto-post .listing-description {
  color: var(--color-muted) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  margin: 0 1.1rem 1.1rem !important;
}


/*==================================================
  STATISTICS CORNER
==================================================*/

.stats-corner {

    position: relative;

    margin: 2.5rem 0;

    padding: 2rem 2.4rem;

    background: linear-gradient(
        180deg,
        rgba(17,24,39,.95),
        rgba(13,20,36,.98)
    );

    border: 2px solid rgba(201,168,118,.55);

    border-radius: 38px;

    box-shadow:
        inset 0 0 0 5px rgba(255,255,255,.03),
        0 0 25px rgba(201,168,118,.18);

    color: var(--color-muted);

    font-size: .98rem;

    line-height: 1.8;
}


/* label */

.stats-corner::before {

    content: "💡 STATISTICS CORNER";

    display: block;

    margin-bottom: 1rem;

    font-size: .78rem;

    letter-spacing: 2px;

    font-weight: 700;

    color: var(--color-gold);

}

/* ==========================================================================
   CODE BLOCKS
   Fenced code (pre/div.sourceCode) and inline code get a visually distinct
   treatment so they read as artifacts, not body copy.
   ========================================================================== */

div.sourceCode {
  background: var(--color-bg-raised) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  margin: 1.5rem 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

div.sourceCode pre.sourceCode {
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  overflow-x: auto !important;
  background: transparent !important;
}

div.sourceCode code.sourceCode {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
  font-size: 0.85rem !important;
  line-height: 1.65 !important;
}

/* Small language label in the top-right corner of common languages used in this post */
div.sourceCode {
  position: relative !important;
  padding-top: 1.6rem !important;
}

div.sourceCode pre.python::before,
div.sourceCode pre.sourceCode.python::before {
  content: "Python";
}

div.sourceCode pre.bash::before,
div.sourceCode pre.sourceCode.bash::before,
div.sourceCode pre.sh::before,
div.sourceCode pre.sourceCode.sh::before {
  content: "Bash";
}

div.sourceCode pre.dax::before,
div.sourceCode pre.sourceCode.dax::before {
  content: "DAX";
}

div.sourceCode pre.json::before,
div.sourceCode pre.sourceCode.json::before {
  content: "JSON";
}

div.sourceCode pre.r::before,
div.sourceCode pre.sourceCode.r::before {
  content: "R";
}

div.sourceCode pre[class*="sourceCode"]::before {
  position: absolute !important;
  top: 0.55rem !important;
  right: 1rem !important;
  font-family: system-ui, -apple-system, sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-faint) !important;
}

/* Inline code spans (within paragraphs / lists) */
p code:not(.sourceCode code), li code:not(.sourceCode code) {
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
  font-size: 0.85em !important;
  background: var(--color-gold-soft) !important;
  color: #e2c894 !important;
  padding: 0.15em 0.4em !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   HIDE ANY REMAINING LEGACY WRAPPER
   ========================================================================== */

.custom-header-container {
  display: none !important;
}

h2{
    margin-top: 4.5rem !important;
    margin-bottom: 1rem !important;
}

.meta-label{
    font-family: Georgia, serif;
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--color-faint);
    margin-bottom:.1rem;
}

.meta-value{
    font-size:1.08rem;
    color:#dbe4ee;
    line-height:1.2;
}

.under-the-hood {

    position: relative;

    margin: 2.5rem 0;

    padding: 2rem 2.4rem;

    background: linear-gradient(

      180deg,

      rgba(16,25,44,.96),

      rgba(10,18,34,.99)

    );

    border: 2px solid rgba(86,173,255,.45);

    border-radius: 38px;

    box-shadow:

      inset 0 0 0 5px rgba(255,255,255,.03),

      0 0 26px rgba(86,173,255,.16);
    
    color: var(--color-muted);

    font-size: .98rem;

    line-height: 1.8;
}

.under-the-hood::before {

    content: "⚙️ Under The Hood";

    display: block;

    margin-bottom: 1rem;

    font-size: .78rem;

    letter-spacing: 2px;

    font-weight: 700;

    color: #6EE7FF;

}