/* ==========================================================
   SLGX Blog Engine v1.1.1 — Fixes your screenshot issues
   - removes the pink full-width line (separator block)
   - fixes messed up YouTube panel (invalid <p> wrapper + link styling bleed)
   - removes 1979 nav by default (min=1980)
   ========================================================== */

:root{
  --slgx-border: rgba(255,255,255,.12);
  --slgx-text: rgba(255,255,255,.92);
  --slgx-muted: rgba(255,255,255,.70);
  --slgx-glow: 0 0 18px rgba(255,0,200,.25), 0 0 28px rgba(0,200,255,.18);
  --slgx-radius: 18px;
}

/* Stop theme multi-columns + constraints on SLGX pages */
.slgx-be .entry-content,
.slgx-be .wp-block-post-content{
  columns: auto !important;
  column-count: 1 !important;
  column-width: auto !important;
  max-width: none !important;
}

/* Nuclear: kill columns anywhere inside SLGX blocks */
.slgx-be .slgx-hero,
.slgx-be .slgx-panel,
.slgx-be .slgx-countdown,
.slgx-be .slgx-row,
.slgx-be .slgx-hero *,
.slgx-be .slgx-panel *,
.slgx-be .slgx-countdown *,
.slgx-be .slgx-row *{
  columns: auto !important;
  column-count: 1 !important;
  column-width: auto !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  max-width: none !important;
}

/* Kill separator block lines inside SLGX posts (your “pink line”) */
.slgx-be hr,
.slgx-be .wp-block-separator{
  display: none !important;
}

/* Right rail should scroll normally (no sticky) */
.slgx-be .slgx-rail .slgx-rail-right .slgx-panel{
  position: static !important;
  top: auto !important;
}

/* Panels — neon rim + CRT texture (posts only) */
.slgx-be .slgx-panel{
  position: relative;
  overflow: hidden;
  border-radius: var(--slgx-radius);
  border: 1px solid var(--slgx-border);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding: clamp(16px, 2.5vw, 26px);
}
.slgx-be .slgx-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg,
    rgba(55,233,255,.85),
    rgba(255,55,214,.78),
    rgba(255,170,0,.45)
  ) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .65;
  pointer-events:none;
  z-index: 0;
}
.slgx-be .slgx-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.08), rgba(0,0,0,.65) 74%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,0) 1px 7px);
  opacity: .12;
  mix-blend-mode: overlay;
}
.slgx-be .slgx-panel > *{ position: relative; z-index: 1; }

/* Layout — rail, countdown cards */
.slgx-rail{
  display:grid !important;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) !important;
  gap: 14px !important;
  align-items:start;
}
.slgx-rail-left,.slgx-rail-right{ min-width:0 !important; }

.slgx-countdown{ width:100% !important; }
.slgx-countdown > .wp-block-group__inner-container{
  display:grid !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
}
.slgx-row{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.24);
  padding: 14px;
  width: 100% !important;
  box-sizing: border-box;
}
.slgx-row > .wp-block-group__inner-container{
  display:grid !important;
  grid-template-columns: 56px minmax(0,1fr) !important;
  gap: 14px !important;
  align-items:flex-start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.slgx-row > .wp-block-group__inner-container > :first-child{ grid-column:1 !important; }
.slgx-row > .wp-block-group__inner-container > :not(:first-child){ grid-column:2 !important; }

.slgx-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--slgx-glow);
  font-weight: 900;
}

/* Right rail link tiles — ONLY links inside paragraph lists (prevents bleeding into YouTube & nav) */
.slgx-be .slgx-rail-right .slgx-panel p > a{
  display: block;
  padding: 10px 12px;
  margin: 6px 0;
  border-radius: 14px;
  text-decoration: none !important;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.slgx-be .slgx-rail-right .slgx-panel p > a:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(55,233,255,.22),
    0 0 22px rgba(55,233,255,.10);
  filter:
    drop-shadow(0 0 10px rgba(55,233,255,.10))
    drop-shadow(0 0 14px rgba(255,55,214,.08));
}

/* Buttons */
.slgx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: var(--slgx-text);
  text-decoration:none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  white-space: nowrap;
}
.slgx-btn--ghost{ background: rgba(255,255,255,.04); }
.slgx-btn--neon{
  background: linear-gradient(90deg, rgba(55,233,255,1), rgba(255,55,214,1), rgba(255,0,200,1));
  border: none !important;
  color: rgba(10,11,18,.95) !important;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 16px;
  box-shadow: 0 20px 52px rgba(0,0,0,.55), 0 0 34px rgba(55,233,255,.22), 0 0 28px rgba(255,55,214,.16);
}

/* YouTube module layout */
.slgx-panel--youtube{
  background:
    radial-gradient(900px 320px at 18% 10%, rgba(55,233,255,.18), transparent 60%),
    radial-gradient(900px 320px at 82% 40%, rgba(255,55,214,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.slgx-youtube{
  display:grid !important;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 14px;
  align-items:center;
}
.slgx-youtube-btn{ grid-column: 1 / -1; }
@media (min-width: 981px){
  .slgx-youtube{ grid-template-columns: 54px minmax(0,1fr) auto; }
  .slgx-youtube-btn{ grid-column: auto; }
}
.slgx-youtube-badge{
  width:54px; height:54px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(90deg, rgba(55,233,255,1), rgba(255,55,214,1));
  color: rgba(10,11,18,.95);
  box-shadow: 0 18px 44px rgba(0,0,0,.50), 0 0 28px rgba(55,233,255,.22), 0 0 22px rgba(255,55,214,.16);
  font-weight: 900;
}
.slgx-youtube-kicker{
  display:inline-flex;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .18em;
  opacity: .85;
  margin-bottom: 2px;
}
.slgx-youtube-title{ margin:0 0 4px !important; }
.slgx-youtube-note{ margin:0 !important; opacity:.85; }

/* Nav */
.slgx-panel--nav{ padding: 14px; }
.slgx-nav{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items:center;
}
.slgx-nav a:nth-child(1){ justify-self:start; }
.slgx-nav a:nth-child(2){ justify-self:center; }
.slgx-nav a:nth-child(3){ justify-self:end; }

/* Related cards */
.slgx-cards{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.slgx-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  padding: 14px;
  text-decoration:none !important;
  color: var(--slgx-text);
  transition: transform .12s ease, border-color .12s ease;
}
.slgx-card:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); }
.slgx-card-title{ font-weight: 700; margin:0 0 .3em !important; }
.slgx-card-meta{ font-size:.92em; color: var(--slgx-muted); }

/* Responsive */
@media (max-width: 980px){
  .slgx-rail{ grid-template-columns: 1fr !important; }
  .slgx-cards{ grid-template-columns: 1fr !important; }
  .slgx-row > .wp-block-group__inner-container{ grid-template-columns: 48px minmax(0,1fr) !important; }
}



/* ==========================================================
   SLGX Hotfix Overrides v1.1.2
   - Kill any remaining separator/HR lines inside SLGX posts
   - Make YouTube panel layout robust in narrow right rail
   - Prevent theme link/highlight styles from stretching the neon CTA
   ========================================================== */

/* 1) Nuke separators no matter how Mockup Rebuild styles them */
body.slgx-be .entry-content hr,
body.slgx-be .entry-content .wp-block-separator,
body.slgx-be .entry-content .wp-block-separator::before,
body.slgx-be .entry-content .wp-block-separator::after{
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Slightly soften neon rings so they don't read like a “laser line” */
body.slgx-be .slgx-panel::before{ opacity: .50 !important; }
body.slgx-be .slgx-panel--youtube::before{ opacity: .70 !important; }

/* 3) YouTube panel — force a clean two-column layout + button below */
body.slgx-be .slgx-panel--youtube .slgx-youtube{
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 14px !important;
  align-items: start !important;
}

body.slgx-be .slgx-panel--youtube .slgx-youtube-badge{
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.slgx-be .slgx-panel--youtube .slgx-youtube-text{
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

body.slgx-be .slgx-panel--youtube .slgx-youtube-btn{
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: 6px !important;
}

/* Title should wrap normally (not one word per line due to weird widths) */
body.slgx-be .slgx-panel--youtube .slgx-youtube-title{
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* 4) Force neon CTA to fit content (stop full-width magenta bar) */
body.slgx-be .slgx-panel--youtube a.slgx-btn--neon{
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  align-self: flex-start !important;
  justify-content: center !important;
  background: linear-gradient(90deg, rgba(55,233,255,1), rgba(255,55,214,1), rgba(255,0,200,1)) !important;
  background-image: linear-gradient(90deg, rgba(55,233,255,1), rgba(255,55,214,1), rgba(255,0,200,1)) !important;
  background-size: 100% 100% !important;
  text-decoration: none !important;
}

/* Kill any theme pseudo/highlight on links that might overlay */
body.slgx-be .slgx-panel--youtube a.slgx-btn--neon::before,
body.slgx-be .slgx-panel--youtube a.slgx-btn--neon::after{
  content: none !important;
  display: none !important;
}



/* ==========================================================
   SLGX Spacing + “Line” Killer v1.1.3
   The “line” you’re seeing is the neon rim of adjacent panels
   lining up across the 2-column rail. Fix = add real vertical
   spacing between modules in BOTH columns.
   ========================================================== */

/* Make each rail column a vertical stack with consistent gaps */
body.slgx-be .slgx-rail-left,
body.slgx-be .slgx-rail-right{
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Remove default margins that can fight the gap */
body.slgx-be .slgx-rail-left > *,
body.slgx-be .slgx-rail-right > *{
  margin: 0 !important;
}

/* Ensure panels don’t “touch” and create a continuous neon seam */
body.slgx-be .slgx-panel{
  margin: 0 !important;
}

/* Give the YouTube panel a touch more breathing room */
body.slgx-be .slgx-panel--youtube{
  padding-bottom: 28px !important;
}

/* Absolute last-resort: if Mockup Rebuild injects a 1px line overlay,
   hide any pseudo elements on the main content wrapper. */
body.slgx-be #content::before,
body.slgx-be #content::after,
body.slgx-be main::before,
body.slgx-be main::after,
body.slgx-be .site::before,
body.slgx-be .site::after{
  box-shadow: none !important;
  background-image: none !important;
}



/* ==========================================================
   SLGX Rim Softening v1.1.4
   Keeps the borders, but removes the “laser line” effect.
   ========================================================== */
body.slgx-be .slgx-panel::before{
  padding: 1px !important; /* thinner ring */
  opacity: .28 !important; /* softer */
  background: linear-gradient(135deg,
    rgba(55,233,255,.70),
    rgba(255,55,214,.60)
  ) border-box !important; /* remove orange stop */
}
body.slgx-be .slgx-panel--youtube::before{ opacity: .50 !important; }



/* ==========================================================
   SLGX Line Killer v1.1.5
   If a “laser line” is STILL visible, it is reading as a horizontal rim.
   This removes horizontal rim segments while keeping vertical neon edges.
   ========================================================== */

/* Remove horizontal borders (top/bottom) so no full-width seam can form */
body.slgx-be .slgx-panel{
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Clip the neon ring so it only shows LEFT/RIGHT edges (no top/bottom line) */
body.slgx-be .slgx-panel::before{
  clip-path: inset(8px 0 8px 0 round 18px) !important;
}

/* Optional: keep a very soft top/bottom via inner shadow (won’t read as a line) */
body.slgx-be .slgx-panel{
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 10px 24px rgba(255,255,255,.02),
    inset 0 -10px 24px rgba(0,0,0,.20) !important;
}



/* ==========================================================
   SLGX Laser-Line Fix v1.1.6
   The “line” is the FIRST scanline in the CRT overlay (::after).
   When panels line up in both columns, that first scanline aligns
   and looks like one long neon line.
   Fix: remove scanlines from panel overlay (keep only vignette).
   ========================================================== */

body.slgx-be .slgx-panel::after{
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.07), rgba(0,0,0,.68) 74%) !important;
  opacity: .10 !important;
  mix-blend-mode: overlay !important;
}



/* ==========================================================
   SLGX iOS Mobile Post Visibility Fix v1.1.8
   Symptoms on iPhone: only hero shows, rest looks blank.
   Likely cause in Mockup Rebuild: hero/background layer + overflow/clip
   creates a huge composited layer (especially with blur=10000px),
   and iOS Safari stops painting content below.
   Fix: disable heavy blur + unclamp/clip hero on small screens.
   ========================================================== */

@media (max-width: 820px){

  /* Ensure the page can scroll normally */
  html, body{
    height: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Unclip hero so it can't trap the rest of the post */
  body.slgx-be .slgx-hero{
    overflow: visible !important;
    clip-path: none !important;
    max-height: none !important;
    height: auto !important;
  }

  /* Disable the insane blur layer on mobile (this is the big one) */
  body.slgx-be .slgx-hero-bg{
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Make sure post content is above any background layers */
  body.slgx-be .entry-content,
  body.slgx-be .wp-block-post-content{
    position: relative !important;
    z-index: 2 !important;
    overflow: visible !important;
    max-height: none !important;
    transform: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}