/* =========================================================
   GLOBAL.CSS (cleaned + de-duped)
   - Single token set
   - Single body/html foundation
   - Sticky footer kept
   - Site shell fixed so content never lands in the left rail
   ========================================================= */

/* ---------- Theme tokens ---------- */
:root{
  --bg: #0f131a;
  --panel: #161b22;
  --panel-2: #1c2029;
  --text: #e6edf3;
  --muted: #9aa7b2;

  --accent: #9b5cff;
  --accent-2: #7b3ff2;

  --danger: #ff6b6b;
  --border: #242c3a;

  --radius: 14px;
}

/* ---------- Base reset / sizing ---------- */
*{ box-sizing: border-box; }

html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  min-height: 100%;
}

body{
  margin: 0;
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background: var(--bg);

  /* Sticky footer foundation */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Links ---------- */
a{
  color: var(--accent);
  transition: color 0.2s ease;
}
a:hover{ color: var(--accent-2); }

/* ---------- Headings / text ---------- */
h1,h2{ margin: 0 0 12px; }
p{ margin: 0; color: var(--muted); }

/* If WP content is being overly dimmed by theme defaults */
article, .primer-body{ color: var(--text); }
.entry-content a{ color: #a58cff; }

/* ---------- Generic panel utility ---------- */
.panel, .section{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.section{
  margin-top: 28px;
  padding: 20px;
}

/* WP image cap (optional) */
.wp-block-image img{
  max-width: 500px;
  height: auto;
}

/* ---------- Main spacing + “grow” for sticky footer ---------- */
main{
  padding-top: 100px;  /* matches your current header height approach */
  flex: 1 0 auto;      /* grows so footer stays at bottom */
}

/* Your common page wrapper */
.jt-page{
  max-width: 1060px;
  padding: 24px 20px 80px;
  margin: 0 auto;
}

/* Some pages use these classes instead of a consistent <main> wrapper */
#main,
.main,
.home,
.content,
.library-wrap,
.submit-wrap{
  flex: 1 0 auto;
}

/* =========================================================
   GLOBAL LAYOUT SHELL (future ad rails)
   FIXED: force content into the middle column so it never “squishes”
   ========================================================= */

.site-shell{
  width: 100%;
  display: grid;

  /* left rail | main content | right rail */
  grid-template-columns: 180px minmax(0, 1100px) 180px;

  /* center the entire 3-col block */
  justify-content: center;

  column-gap: 24px;
  align-items: start;
}

/* Rails are OFF by default */
.ad-rail{ display: none; }

/* Only show rails on wide screens */
@media (min-width: 1400px){
  .ad-rail{
    display: block;
    width: 180px;
    min-height: 600px;
  }
}

/* IMPORTANT: Force the actual page content into the center column */
.site-shell > main,
.site-shell > .jt-page,
.site-shell > #page-content,
.site-shell > .site-main{
  grid-column: 2;
  width: 100%;
  min-width: 0;
}

/* If you used explicit IDs/classes for rails, pin them */
#ad-left, .ad-left{ grid-column: 1; }
#ad-right, .ad-right{ grid-column: 3; }

/* On smaller screens: collapse to one column and hide rails */
@media (max-width: 1200px){
  .site-shell{ grid-template-columns: 1fr; }

  .ad-rail,
  #ad-left, #ad-right,
  .ad-left, .ad-right{
    display: none !important;
  }

  .site-shell > main,
  .site-shell > .jt-page,
  .site-shell > #page-content,
  .site-shell > .site-main{
    grid-column: 1;
  }
}

/* Shell hardening: prevent grid children from forcing overflow shrink */
.site-shell > *{ min-width: 0; }
.site-shell > main > *,
.site-shell > .jt-page > *,
.site-shell > #page-content > *,
.site-shell > .site-main > *{
  min-width: 0;
}