/* =====================================================================
   custom.css — EDITABLE PLAYGROUND
   Linked as a real <link> in app/layout.tsx, NOT bundled by Next and NOT
   listed in scripts/build-css.mjs, so it is served verbatim and is fully
   editable in browser DevTools (no italics / read-only lock).
   Tweak values here or live in DevTools, then keep what you like.
   ===================================================================== */

/* Content pages — the hero image becomes the fixed, full-page background.
   Scoped via :has(#page-title) so the homepage (no #page-title) is unaffected. */
body:has(#page-title) {
  background:
    linear-gradient(rgb(15 2 35 / 46%), rgba(0, 0, 0, 0.55)),
    linear-gradient(rgba(20, 0, 40, 0.4), rgba(20, 0, 40, 0.55)),
    url(https://retro.astromatrix.app/assets/main-splash.jpg) center center / cover no-repeat fixed !important;
}

/* Let the image show through every section instead of the theme's white fills */
body:has(#page-title) section { background-color: transparent !important; }

/* Top hero now blends into the page background instead of being a separate banner */
#page-title {
  background: transparent !important;
  margin-bottom: 0 !important;
  top: 0 !important;
  min-height: unset !important;
  padding: 25px 0 24px !important;
  position: relative;
}
/* Slight breathing room for the hero "Download" button */
#page-title .breadcrumb {
  margin-top: 12px !important;
}
#page-title .container-fullscreen,
#page-title .container {
  position: relative;
  z-index: 1;
  min-height: unset !important;
  height: auto !important;
}

/* Article sits in a slightly-transparent dark panel so white text stays readable.
   ← This is "the container" — change background-color to taste. */
body:has(#page-title) #page-content { padding-top: 0 !important; }
body:has(#page-title) .single-post .post-item .post-item-wrap {
  background-color: rgb(76 8 144 / 55%) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 14px !important;
  padding: 13px !important;
}