/* Compact navbar title */
.navbar-brand h1, .navbar-brand span { font-size: inherit; }

/* Page transitions via View Transitions API */
@keyframes vt-fade-in  { from { opacity: 0; } }
@keyframes vt-fade-out { to   { opacity: 0; } }
::view-transition-old(root) { animation: 150ms ease-out vt-fade-out; }
::view-transition-new(root) { animation: 150ms ease-in  vt-fade-in;  }

/* Card image overlay — matches banasiak.com */
.mask-light { background-color: rgba(251, 251, 251, 0.15); }

/* Tag cloud in footer */
.tag-cloud a { font-size: 0.85rem; line-height: 1.9; color: rgba(255, 255, 255, 0.8); text-decoration: none; margin-right: 0.25rem; }
.tag-cloud a:hover { color: #fff; }
@media (max-width: 767.98px) {
  .tag-cloud a { font-size: 0.72rem; line-height: 1.2; }
  .social-icon { font-size: 0.9rem; margin: 0 5px; }
  #blog-back-link i { font-size: 0.8rem; }
}

/* Social icons in footer */
.social-icon { color: #fff; margin: 0 10px; font-size: 1.5rem; text-decoration: none; }
.social-icon:hover { color: rgba(255, 255, 255, 0.8); }
#blog-back-link { display: inline-flex; align-items: center; }
#blog-back-link i { font-size: 1.25rem; }

/* Post content typography */
.post-content h2, .post-content h3, .post-content h4 { border-top: 1px solid rgba(0,0,0,0.1); padding-top: 1.5rem; margin-top: 2rem; }
.post-content > :first-child { border-top: none; padding-top: 0; margin-top: 0; }
[data-mdb-theme="dark"] .post-content h2, [data-mdb-theme="dark"] .post-content h3, [data-mdb-theme="dark"] .post-content h4 { border-top-color: rgba(255,255,255,0.15); }
.post-content { font-size: 1.05rem; line-height: 1.8; }
.post-content img { max-width: 100%; height: auto; border-radius: 0.375rem; margin: 1rem 0; }
.post-content pre { border-radius: 0.375rem; padding: 1rem; overflow-x: auto; }
.post-content blockquote { border-left: 4px solid #3b71ca; padding-left: 1rem; font-style: italic; }
.post-content code { font-size: 0.9em; }
.post-content :not(pre) > code { background: rgba(0, 0, 0, 0.08); padding: 0.15em 0.35em; border-radius: 0.25rem; }
[data-mdb-theme="dark"] .post-content :not(pre) > code { background: rgba(255, 255, 255, 0.1); }

/* Lite YouTube embed */
.youtube-player { position: relative; aspect-ratio: 16/9; background: #000; cursor: pointer; border-radius: 0.375rem; overflow: hidden; margin: 1rem 0; }
.youtube-player img { width: 100%; height: 100%; object-fit: cover; }
.youtube-player .youtube-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; border: none; cursor: pointer; padding: 0; opacity: 0.8; transition: opacity 0.2s; }
.youtube-player:hover .youtube-play { opacity: 1; }
.youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* Hero card images — cap height on mobile to avoid excessively tall cards */
@media (max-width: 767.98px) {
  .hero-img { max-height: 180px; object-fit: cover; width: 100%; }
}

/* Tag badge colors */
.badge-tag-0 { background-color: #3b71ca; color: #fff; }
.badge-tag-1 { background-color: #14a44d; color: #fff; }
.badge-tag-2 { background-color: #dc4c64; color: #fff; }
.badge-tag-3 { background-color: #9c27b0; color: #fff; }
.badge-tag-4 { background-color: #e65100; color: #fff; }
.badge-tag-5 { background-color: #00897b; color: #fff; }
.badge-tag-6 { background-color: #0277bd; color: #fff; }
.badge-tag-7 { background-color: #6a1b9a; color: #fff; }

/* Gallery grid — triggered by ul containing linked images ([![alt](url)](url) list format) */
.post-content ul:has(> li > a > img) { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.5rem; }
.post-content ul:has(> li > a > img) li { margin: 0; }
.post-content ul:has(> li > a > img) a { display: block; border-radius: 0.375rem; overflow: hidden; }
.post-content ul:has(> li > a > img) img { width: 100%; height: 200px; object-fit: cover; border-radius: 0; margin: 0; display: block; transition: transform 0.2s; }
.post-content ul:has(> li > a > img) a:hover img { transform: scale(1.03); }
.post-content a.glightbox { cursor: zoom-in; }

/* Tables in post content — responsive + striped + hover */
.post-content table { width: 100%; margin-bottom: 0; border-collapse: collapse; }
.post-content table th,
.post-content table td { padding: 0.5rem 0.75rem; vertical-align: top; border-top: 1px solid rgba(0,0,0,0.1); }
.post-content table thead th { vertical-align: bottom; border-bottom: 2px solid rgba(0,0,0,0.2); font-weight: 600; }
.post-content table tbody tr:nth-child(odd) { background-color: rgba(0,0,0,0.04); }
.post-content table tbody tr:hover { background-color: rgba(0,0,0,0.07); }
[data-mdb-theme="dark"] .post-content table th,
[data-mdb-theme="dark"] .post-content table td { border-color: rgba(255,255,255,0.15); }
[data-mdb-theme="dark"] .post-content table thead th { border-bottom-color: rgba(255,255,255,0.25); }
[data-mdb-theme="dark"] .post-content table tbody tr:nth-child(odd) { background-color: rgba(255,255,255,0.04); }
[data-mdb-theme="dark"] .post-content table tbody tr:hover { background-color: rgba(255,255,255,0.07); }

/* Pagefind search widget — match MDB color scheme.
   Use html[...] (specificity 0,1,1) to beat pagefind-ui.css :root (0,1,0),
   since pagefind-ui.css loads after style.css and would otherwise win. */
html {
  --pagefind-ui-primary: #3b71ca;
  --pagefind-ui-tag: #3b71ca;
}
html[data-mdb-theme="dark"] {
  --pagefind-ui-text: rgba(255, 255, 255, 0.87);
  --pagefind-ui-background: #2d2d2d;
  --pagefind-ui-border: rgba(255, 255, 255, 0.2);
}
html[data-mdb-theme="dark"] .pagefind-ui__button {
  color: #fff;
}