/* =========================
   THEME
========================= */
:root{
  --primary: #D70926;

  --card: rgba(17,26,51,.92);
  --text: #e8eeff;
  --muted: rgba(232,238,255,.72);
  --border: rgba(255,255,255,.14);

  --container-width: 1100px;

  --header-height: 92px;
  --header-radius: 6px;
  --header-margin-top: 12px;
  --header-margin-sides: 12px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* =========================
   IMPORTANT iOS FIX
   If ANY parent has transform/filter/perspective,
   position:fixed can behave like absolute on iOS.
   We neutralize common culprits.
========================= */
body, .site, .app, .page, .wrapper, .content, main{
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

/* =========================
   BODY + GLOBAL FIXED BACKGROUND
========================= */
body{
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
  background: #0b1020;

  /* ✅ Push ALL page content below the fixed header */
  padding-top: calc(
    var(--header-height) +
    (var(--header-margin-top) * 2) +
    16px
  );
}

/* ✅ fixed background layer that never scrolls */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: url("/images/bg.jpg") center / cover no-repeat;
  z-index: -9999;
  pointer-events: none;
}

/* Optional overlay (remove if you don’t want darkening) */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.20);
  z-index: -9998;
  pointer-events: none;
}

/* Make wrappers transparent (don’t cover the bg) */
main, .page, .app, .content, .wrapper, .site, .site-main{
  background: transparent !important;
}

/* =========================
   FIXED HEADER
========================= */
.site-header{
  position: fixed;
  top: var(--header-margin-top);
  left: var(--header-margin-sides);
  right: var(--header-margin-sides);
  z-index: 10000;

  height: var(--header-height);
  background: var(--primary);
  color:#fff;

  border-radius: var(--header-radius);
  display: flex;
  align-items: center;
  padding: 0 30px;

  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* =========================
   VERY COMMON CAUSE OF YOUR SCREENSHOT:
   A "hero"/banner section with a big background image
   that overlaps the page.
   We force those sections to behave normally.
========================= */
.hero, .banner, .cover, .bg, .bg-image, .page-bg, .header-bg, .list-bg{
  position: relative !important;
  z-index: 0 !important;
}

/* If some section uses a background image and is "fixed" or too tall */
.hero, .banner, .cover{
  background-attachment: scroll !important;
  min-height: auto !important;
  height: auto !important;
}

/* If the bg is an <img> inside a hero */
.hero img, .banner img, .cover img, .bg img{
  position: static !important;
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   CONTAINER
========================= */
.container{
  max-width: var(--container-width);
  margin: 24px auto; /* reduced since body has padding-top now */
  padding: 0 20px;
}

/* =========================
   CARDS
========================= */
.card{
  background: var(--card);
  border-radius: 16px;
  padding: 20px;
}

.muted{
  color: var(--muted);
  font-size: 13px;
}

/* =========================
   MOBILE MENU (LIGHT GREY)
========================= */
@media (max-width: 720px){
  .nav-menu{
    background: #f2f2f2 !important;
    color: #111 !important;
  }
  .nav-menu a{ color:#111 !important; }
  .nav-menu a:hover{ background: rgba(0,0,0,.06) !important; }
}