/* Shared custom overrides (theme-independent)
   Keep geometry/spacing/typography here.
   Keep colors in dark.css and light.css.
*/

@font-face {
  font-family: "Web437 IBM VGA 8x16";
  src: url("/fonts/woff_collection/Web437_IBM_VGA_8x16.woff") format("woff");
  font-display: swap;
}

/* Sidebar tag widget geometry shared across dark/light modes */
.widget-taglist .widget-taglist__link,
.widget-taglist .widget-taglist__link.btn,
.widget-taglist .widget__link.btn {
  font-size: 0.68rem;
  line-height: 1.0;
  padding: 0.28rem 0.52rem;
  font-family: "Apple II", monospace;
  font-weight: 400;
  letter-spacing: -0.05em;
  text-shadow: 0 0 0 currentColor, 0.35px 0 0 currentColor;
  text-transform: uppercase;
}

/* Sidebar tag widget chips as button-style controls (shared geometry) */
.widget-taglist .widget-taglist__link,
.widget-taglist .widget-taglist__link.btn,
.widget-taglist .widget__link.btn {
  display: inline-block;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 1px 2px rgba(0,0,0,0.14);
  transition: transform .06s ease, box-shadow .08s ease, filter .12s ease;
}

.widget-taglist .widget-taglist__link:hover,
.widget-taglist .widget-taglist__link.btn:hover,
.widget-taglist .widget__link.btn:hover {
  filter: brightness(1.03);
}

.widget-taglist .widget-taglist__link:active,
.widget-taglist .widget-taglist__link.btn:active,
.widget-taglist .widget__link.btn:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 -1px 0 rgba(0,0,0,0.24) inset,
    0 0 1px rgba(0,0,0,0.18);
}

/* Code readability tweak: make code text slightly smaller than body copy */
.post__content pre,
.post__content code,
.entry__content pre,
.entry__content code,
.page__body pre,
.page__body code,
.content__inner pre,
.content__inner code {
  font-size: 0.9em;
}

/* Reusable side-by-side media row for markdown/html content */
.media-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.media-row__image {
  width: 400px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
  flex: 0 0 auto;
}

.media-row__content {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 767px) {
  .media-row {
    flex-direction: column;
  }
}