/* make inner pages look nice without tailwind */

.trumbowyg-editor{
    text-align: left;
    display: grid;
    font-weight: 300;
    gap: 1rem;
    line-height: 1.5;
    tab-size: 4;
    font-size: 1rem;
    line-height: 1.5rem;
}

.trumbowyg-editor a{
    color: #26aefd;
}
.trumbowyg-editor a:hover{
    text-decoration: underline;
}
.trumbowyg-editor a{
    color: #26aefd;
    cursor: pointer;
}
.trumbowyg-editor h2{
    font-weight: bold;
    padding-bottom: 10px;
    padding-top: 30px;
    font-size: 16px;

}


/* --- Broken-image guard --------------------------------------------------
   Images that fail to load (e.g. dead /wp-content/uploads/ URLs left over from
   the old WordPress site) are tagged with .img-load-error by js, see
   pages/partials/inc.broken_image_guard.php. Without this, a broken <img> with
   width/height attributes keeps its implicit aspect-ratio and explodes inside
   the grid-based article/editor layout, forcing the content onto one huge
   horizontal line. Resetting the sizing makes a missing image collapse quietly.
   Scoped to .img-load-error only, so loaded/editor-resized images are untouched. */
img.img-load-error {
    aspect-ratio: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
}


/* --- Content images: responsive, never stretched -------------------------
   WordPress-migrated <img> tags carry width/height attributes, which give the
   element an implicit aspect-ratio. Inside the .trumbowyg-editor grid that
   inflated the image's height (vertical stretch) - and, when broken, its width.
   Forcing height:auto + aspect-ratio:auto restores the real proportions for
   loaded images and collapses missing ones. width is deliberately NOT touched,
   so images resized in the editor keep their chosen width. */
.blogpost-content img,
.trumbowyg-editor img {
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
}


/* scrollbars in admin */

.admin-scrollbar::-webkit-scrollbar {
    width: 12px;
  }
  .admin-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(148 173 195 / 93%);
    border-radius: 6px;
  }
  .admin-scrollbar::-webkit-scrollbar-track {
    background-color:  rgb(243 243 243);
    border-radius: 6px;
  }

  .admin-scrollbar {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgb(148 173 195 / 93%) rgb(243 243 243); /* Firefox */
  }