/*
 * Small compatibility layer on top of the compiled Tailwind bundle.
 * Keep this file minimal — anything the source already styles belongs in app.css.
 */

/* WordPress admin bar must not sit on top of the fixed navbar. */
body.admin-bar [data-xl-navbar] { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar [data-xl-navbar] { top: 46px; }
}

/* Editor-inserted media keeps the site's rounded, contained look. */
.wp-block-image img,
.alignnone,
.aligncenter { max-width: 100%; height: auto; }

/* Grid and flex children default to min-width:auto, so a wide comparison table
   stretches its whole column past the viewport (the source site scrolls
   sideways on phones because of this). Bounding the column lets the table's own
   overflow-x-auto wrapper scroll instead. */
[data-xl-article],
.prose-flymate { min-width: 0; max-width: 100%; }

/* An auto-sized grid track grows to its widest item, so the article column has
   to be pinned to the available space for the rule above to bite. */
[data-xl-post-grid] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  [data-xl-post-grid] { grid-template-columns: minmax(0, 1fr) 300px; }
}
.overflow-x-auto { -webkit-overflow-scrolling: touch; max-width: 100%; }
img, svg, video { max-width: 100%; }

/* The source renders article bodies through .prose-flymate; the inline styles it
   emits cover typography, so only list markers need restoring here. */
.prose-flymate ul { list-style: none; }
.prose-flymate li.list-disc { list-style: disc; }
.prose-flymate li.list-decimal { list-style: decimal; }

/* Screen-reader-only helper used by the blog index search label. */
.xl-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
