/* ===== Cover image darkening ===== */
.intro-header.big-img{position:relative}
.intro-header.big-img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:1;pointer-events:none}
.intro-header.big-img :is(.container-md,.post-heading){position:relative;z-index:2}

/* ===== Poem styling ===== */
.poem{margin:1.5rem auto;padding-left:1.25rem;border-left:3px solid #e0e0e0;font-style:italic;max-width:40em}
.poem p{margin:0 0 .5rem}
.poem p:last-child{margin-bottom:0}

/* ===== Theme variables (system dark mode) ===== */
:root{
  color-scheme:light dark;
  --bg:#fff;--text:#222;--muted:#666;
  --link:#0b66d6;--hover:#339D79;
  --border:#e5e5e5;--card-bg:#fff;--code-bg:#f6f8fa;

  --stripe:rgba(0,0,0,.03);--hoverRow:rgba(0,0,0,.05);
  --dropdownHoverBg:rgba(0,0,0,.06);--dropdownActiveBg:rgba(0,0,0,.10);
  --pagerHoverBg:rgba(0,0,0,.06);

  --accent:#339D79;--accentText:#fff;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1115;--text:#e8e8e8;--muted:#a5a5a5;
    --link:#7ab7ff;
    --border:#2a2f3a;--card-bg:#151923;--code-bg:#1b2130;

    --stripe:rgba(255,255,255,.04);--hoverRow:rgba(255,255,255,.06);
    --dropdownHoverBg:rgba(255,255,255,.08);--dropdownActiveBg:rgba(255,255,255,.12);
    --pagerHoverBg:rgba(255,255,255,.08);
  }

  :is(h1,h2,h3,h4,h5,h6){color:var(--text)!important}

  :is(.navbar,.navbar-custom,.navbar-collapse,footer){
    background-color:var(--card-bg)!important;
    color:var(--text)!important;
    border-color:var(--border)!important;
  }
  :is(.navbar a,.navbar-brand,.navbar-nav .nav-link,footer a){
    color:var(--link)!important;
  }
  :is(.navbar,.navbar-custom,footer) a:is(:hover,:focus),
  :is(.navbar,.navbar-custom,footer) .nav-link:is(:hover,:focus),
  :is(.navbar,.navbar-custom,footer) .navbar-brand:is(:hover,:focus){
    color:var(--hover)!important;
  }

  :is(.dropdown-menu,.dropdown-menu.show,.dropdown-menu[data-bs-popper]){
    background-color:var(--card-bg)!important;
    border-color:var(--border)!important;
  }
  .dropdown-item{color:var(--text)!important;background:transparent!important}
  .dropdown-item:is(:hover,:focus){background-color:var(--dropdownHoverBg)!important;color:var(--hover)!important}
  .dropdown-item:is(.active,:active){background-color:var(--dropdownActiveBg)!important;color:var(--text)!important}

  .blog-tags :is(span,a){color:var(--muted)!important}
  .blog-tags a:hover{color:var(--hover)!important}

  .post-read-more{color:var(--link)!important}
  .post-read-more:hover{color:var(--hover)!important}

  .post-preview{border-color:var(--border)!important}

  .pagination .page-link{
    background-color:var(--card-bg)!important;
    color:var(--text)!important;
    border-color:var(--border)!important;
  }
  .pagination .page-link:is(:hover,:focus){
    background-color:var(--pagerHoverBg)!important;
    color:var(--hover)!important;
    border-color:var(--hover)!important;
  }
  .pagination .page-item.disabled .page-link{
    background-color:var(--card-bg)!important;
    color:var(--muted)!important;
    border-color:var(--border)!important;
  }
}

/* ===== Common application (works for both light + dark) ===== */
body{background:var(--bg);color:var(--text)}
a{color:var(--link)}
a:is(:hover,:focus){color:var(--hover)!important}
.text-muted{color:var(--muted)!important}

:is(hr,.border-top,.border-bottom){border-color:var(--border)!important}
:is(.card,.list-group-item,table,.table){background-color:var(--card-bg);color:var(--text)}
:is(pre,code,.highlight){background:var(--code-bg)}

:is(table th,table td,.table th,.table td,.table thead th){
  background-color:var(--card-bg)!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}
.table-striped tbody tr:nth-of-type(odd) > *{background-color:var(--stripe)!important}
.table-hover tbody tr:hover > *{background-color:var(--hoverRow)!important}

/* ===== YouTube card + responsive embed ===== */
.yt-card{
  border:1px solid var(--border);
  border-radius:.5rem;
  overflow:hidden;
  background:var(--card-bg);
}
.yt-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.6rem .9rem;
  background:var(--accent);
  color:var(--accentText);
  font-weight:600;
}
.yt-card__link{font-weight:600}
.yt-card__link:hover,
.yt-card__link:focus{opacity:.9}
.yt-card__body{padding:.9rem}

/* Keep links in the card white (overrides global hover) */
.yt-card a,
.yt-card a:hover,
.yt-card a:focus{color:var(--accentText)!important}

.yt-embed{
  position:relative;
  width:100%;
  max-width:500px;
  margin:0 auto;
}
.yt-embed::before{content:"";display:block;padding-top:56.25%}
.yt-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Sticky footer */
html{ height: 100%; background: var(--bg); }
body{min-height: 100vh;display: flex;flex-direction: column;background: var(--bg);}
:is(main, [role="main"]) {flex: 1 0 auto;padding-bottom:3.125rem;}
footer{margin-top: auto;}

/* Social share buttons: preserve brand colors on hover */
#social-share-section .btn-social-icon {
  color: #fff !important;
}
#social-share-section .btn-social-icon:hover,
#social-share-section .btn-social-icon:focus {
  color: #fff !important;
  filter: brightness(1.08);   /* subtle hover feedback */
}

/* Tag buttons: keep white text on hover */
.tag-btn,
.tag-btn:hover,
.tag-btn:focus {
  color: #fff !important;
}