@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ==========================================================================
   NoMoreGreens front-page redesign — hero-led port (PR1).
   This file restyles the parent PixieFreak hero slider into the hero-led look
   and lays the persistent brand overlay on top. The Owl engine, progress bar
   and thumbnails are the parent's; we only re-skin them.
   Scope everything under .nmg-hero so nothing leaks into the rest of the site.
   ========================================================================== */
/* The parent forces `header{height:988px;padding-bottom:100px}`. We instead make
   the header exactly one screen minus the ticker. The hero is pulled up under
   the nav so the translucent bar tints the cover art, while the ticker still
   lands flush at the fold. (--tick = ticker bar height.) */
:root{--tick:44px; --nmg-nav-h:68px}
body.home header{height:calc(100vh - var(--tick)) !important; min-height:0 !important; padding-bottom:0 !important; display:grid !important; grid-template:1fr / 1fr; position:relative}
body.home header > .nav-placeholder,
body.home header > .nmg-hero{grid-area:1 / 1}
body.home header > .nav-placeholder{align-self:start}

/* --- navbar restyle (hero-led look) — px sizes since the parent root is 10px ---
   Every rule is scoped under `header ` so it matches/beats the parent's
   `header .nav-placeholder…` rules (specificity 0,1,1). Un-scoped (0,1,0) the
   base rule lost to the parent on subpages, making the nav look different from
   home; `header `-prefixed it wins uniformly (home + subpages). The home nav is
   the reference look. */
/* Transparent-ish home nav: a LIGHT top-anchored scrim, not a solid bar. It's
   strongest behind the links at the very top and fades to fully transparent
   within the bar's own height, so the hero reads through and there is no dark
   block and no band below it. Legibility comes from this gentle scrim plus the
   per-link text-shadow. No backdrop-blur (it caused the old seam/haze) and no
   mask-image (it clipped the LINKS dropdown) — the fade is pure background
   paint, which never clips children. The separate 40px ::after strip that used
   to sit under the bar is gone (style.css). */
header .nav-placeholder{padding:14px 0 !important; background:linear-gradient(to bottom,rgba(8,10,14,.80) 0%,rgba(8,10,14,.46) 55%,rgba(8,10,14,0) 100%); backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border:0 !important; box-shadow:none !important; position:sticky; top:0; z-index:60}
header .nav-placeholder .custom-logo-link img{max-height:40px !important; width:auto !important}
header .nav-placeholder .navbar{align-items:center}
header .nav-placeholder .navbar > li > a{padding:8px 0}
header .nav-placeholder .navbar > li > a .title{font-family:'Inter',system-ui,sans-serif; font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:#b7c0ca; text-shadow:0 1px 10px rgba(0,0,0,.9); transition:color .2s}
header .nav-placeholder .navbar > li:hover > a .title,
header .nav-placeholder .navbar > li.current-menu-item > a .title,
header .nav-placeholder .navbar > li > a:hover .title{color:#fff}
/* turn the "Application" menu item (links to /apply/) into a purple Apply pill */
header .nav-placeholder .navbar > li > a[href*="/apply/"]{background:linear-gradient(135deg,#a335ee,#7b27b4); border-radius:8px; padding:9px 16px !important; box-shadow:0 8px 22px -10px rgba(163,53,238,.8)}
header .nav-placeholder .navbar > li > a[href*="/apply/"] .title{color:#fff !important; font-weight:600}
/* kill the green accent bits the parent paints from its primary-color setting */
header .nav-placeholder .search:before{display:none !important}            /* green vertical separator */
header .nav-placeholder .navbar li:not(.search) > a:after{background-color:#a335ee !important} /* underline: green -> purple */
header .nav-placeholder .navbar li > a[href*="/apply/"]:after{display:none !important}        /* no underline on the Apply pill */
.nmg-hero{
  --disp:'Chakra Petch',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --epic:#a335ee; --epic-dim:#7b27b4; --legend:#ff8000; --green:#1eff00; --rare:#3fc7eb;
  --txt:#ece8e1; --muted:#9aa6b2; --border:#28323f; --maxw:1180px;
  /* hero fills the header space, including the nav overlap */
  flex:1 1 auto; position:relative; overflow:hidden; background:#000; min-height:0;
}

/* --- the rotating images (parent Owl slider) --- */
.nmg-hero .hero-slider,
.nmg-hero .hero-slider .owl-stage-outer,
.nmg-hero .hero-slider .owl-stage,
.nmg-hero .hero-slider .owl-item,
.nmg-hero .hero-slider .slide{min-height:100% !important; height:100% !important}
.nmg-hero .hero-slider,
.nmg-hero .hero-slider .owl-stage-outer,
.nmg-hero .hero-slider .owl-stage,
.nmg-hero .hero-slider .owl-item{min-height:100% !important; height:100% !important}
/* drop the parent's 152px nav-clearance padding — our nav is separate, overlay is absolute */
.nmg-hero .hero-slider .slide{padding-top:0 !important; background-position:center 26% !important; background-size:cover !important}
.nmg-hero .nmg-hero-fallback{position:absolute; inset:0; background:#0a0c11 center/cover}
/* persistent brand -> hide the parent per-slide captions */
.nmg-hero .slide-caption{display:none !important}

/* --- dark gradient + brand overlay --- */
.nmg-hero-overlay{position:absolute; inset:0; z-index:6; display:flex; align-items:flex-end;
  pointer-events:none;
  /* Top stop is TRANSPARENT (was .5): on home the overlay begins at top:nav-h,
     so a .5-dark top edge painted a dark band right under the navbar — that was
     the "header weirdness". Fading the top to 0 lets the hero meet the nav with
     no band; the bottom stays fully dark for hero-title legibility. */
  background:linear-gradient(0deg,rgba(12,13,16,1) 4%,rgba(12,13,16,.25) 46%,rgba(12,13,16,0) 100%)}
body.home .nmg-hero .nmg-hero-overlay{top:var(--nmg-nav-h)}
.nmg-hero-in{max-width:var(--maxw); margin:0 auto; padding:0 28px 58px; width:100%; pointer-events:auto}
.nmg-eyebrow{font-family:var(--mono); font-size:1.152rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.nmg-eyebrow b{color:var(--epic); font-weight:700}
.nmg-hero .nmg-hero-title{font-family:var(--disp); font-weight:700; color:var(--txt);
  font-size:clamp(5.76rem,10vw,12.8rem) !important; line-height:.86 !important; letter-spacing:-.015em; text-transform:uppercase; margin:0}
.nmg-strike{color:var(--green); position:relative; white-space:nowrap}
.nmg-strike::after{content:""; position:absolute; left:-1%; right:-1%; top:54%; height:.06em;
  background:var(--green); transform:rotate(-2.4deg); box-shadow:0 0 18px rgba(30,255,0,.4)}
.nmg-hero-tagline{font-family:var(--disp); font-weight:500; font-size:clamp(1.6rem,2vw,2.24rem);
  color:var(--muted); margin:14px 0 30px; letter-spacing:.01em}
.nmg-hero-tagline b{color:var(--txt); font-weight:600}
.nmg-gx{color:var(--green)}
.nmg-hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px}
.nmg-btn{font-family:var(--disp); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  font-size:1.312rem; padding:12px 22px; border-radius:8px; border:0; cursor:pointer; transition:.22s; display:inline-block}
.nmg-btn-primary{background:linear-gradient(135deg,var(--epic),var(--epic-dim)); color:#fff;
  box-shadow:0 8px 22px -10px rgba(163,53,238,.8)}
.nmg-btn-primary:hover{transform:translateY(-2px); filter:brightness(1.1); color:#fff}
.nmg-btn-ghost{background:transparent; color:var(--txt); border:1px solid var(--border)}
.nmg-btn-ghost:hover{border-color:var(--epic); color:#fff}

/* --- progression pip-bar (static for now) --- */
.nmg-pipbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:22px}
.nmg-pip-lab{font-family:var(--mono); font-size:1.152rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.nmg-pips{display:flex; gap:7px}
.nmg-pips i{width:30px; height:6px; border-radius:3px; background:#1b232d; border:1px solid var(--border)}
.nmg-pips i.done{background:var(--epic); border-color:var(--epic)}
.nmg-pips i.final{background:var(--legend); border-color:var(--legend); box-shadow:0 0 14px rgba(255,128,0,.5)}
.nmg-score{font-family:var(--mono); font-weight:700; font-size:1.92rem; color:var(--legend)}
.nmg-ce{font-family:var(--mono); font-size:1.088rem; letter-spacing:.16em; text-transform:uppercase; color:var(--legend); border:1px solid var(--legend); border-radius:5px; padding:4px 8px}

/* --- bottom strip: full-width progress bar at the very bottom, dot row tucked
   just above it (mirrors the mockup). The parent constrains .slider-thumbnails to
   1200px/centered and the Owl thumbnail carousel is tall (150px tiles) — force
   full-bleed and compact the Owl widget down to a 4px dot row. --- */
.nmg-hero .slider-thumbnails{position:absolute !important; left:0; right:0; bottom:0; top:auto !important; height:auto !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0; background:none; border:0; z-index:7; overflow:visible}
.nmg-hero .slider-progress-bar{position:absolute !important; left:0; right:0; bottom:0; width:100%; height:4px; margin:0 !important; background:rgba(255,255,255,.14); z-index:8}
.nmg-hero .slider-progress-bar .progress-line{height:100%; background:var(--legend)}
.nmg-hero .thumbnails{position:absolute !important; right:28px !important; left:auto !important; bottom:16px; top:auto; width:auto !important; max-width:none !important; text-align:right; z-index:9}
.nmg-hero .thumbnails .owl-stage-outer{overflow:visible !important; height:auto !important; width:auto !important; display:inline-block}
.nmg-hero .thumbnails .owl-stage{overflow:visible !important; height:auto !important; width:auto !important; transform:none !important; display:inline-block}
.nmg-hero .thumbnails .owl-item{width:auto !important; height:auto !important; margin:0 0 0 8px !important; float:none; display:inline-block}
.nmg-hero .thumbnails li{list-style:none; margin:0}
.nmg-hero .thumbnails .slide-item{display:block !important; width:26px !important; height:4px !important; min-height:0 !important; border-radius:2px; background:rgba(255,255,255,.32) !important; opacity:1 !important; transition:.2s}
.nmg-hero .thumbnails .slide-item.active{background:var(--legend) !important}

@media(max-width:760px){
  .nmg-hero-in{padding-bottom:40px}
}

/* ==========================================================================
   Front-page sections (ticker, kills bento, progression, recruit).
   ========================================================================== */
.nmg-front{
  --disp:'Chakra Petch',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --epic:#a335ee; --epic-dim:#7b27b4; --legend:#ff8000; --green:#1eff00; --rare:#3fc7eb;
  --bg:#0a0c11; --surface:#141a21; --surface2:#1b232d; --border:#28323f; --txt:#e7ebf0; --muted:#9aa6b2; --maxw:1180px;
  font-family:var(--body); color:var(--txt); padding-bottom:64px;
  background:var(--bg);   /* the parent content area is white — paint our dark base */
}
.nmg-front a{color:inherit; text-decoration:none}
/* belt-and-braces: also darken the body on the home page so nothing white shows through */
body.home{background:#0a0c11}

/* kill-feed ticker */
.nmg-ticker{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#070a0e; overflow:hidden; white-space:nowrap; padding:10px 0}
.nmg-ticker-run{display:inline-block; animation:nmg-ticker 80s linear infinite; font-family:var(--mono); font-size:1.216rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.nmg-ti{display:inline-flex; align-items:center; gap:7px}
.nmg-ti .b{color:var(--legend); font-weight:700}   /* boss name — orange */
.nmg-ti .k{color:var(--green); font-weight:700}    /* "Down!" — green */
.nmg-ti .p{color:var(--muted)}                      /* progress 6/6 (M)… — muted gray */
.nmg-ti .d{color:var(--rare); opacity:.82}          /* post date — blue metadata */
.nmg-ti .s{color:var(--epic); opacity:.65}          /* date/title separator */
.nmg-dot{color:var(--epic); margin:0 14px}          /* separator — purple */
@keyframes nmg-ticker{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.nmg-ticker-run{animation:none}}

/* section scaffold */
.nmg-wrap{max-width:var(--maxw); margin:0 auto; padding-left:28px; padding-right:28px}
.nmg-sec{padding-top:80px}
.nmg-sec-head{display:flex; align-items:baseline; gap:18px; margin-bottom:30px}
.nmg-marker{font-family:var(--mono); color:var(--epic); font-weight:700; font-size:1.92rem}
.nmg-sec-head h2{font-family:var(--disp); font-weight:700; font-size:clamp(2.56rem,3.4vw,4rem); letter-spacing:-.01em; text-transform:uppercase; margin:0}
.nmg-rest{margin-left:auto; color:var(--muted); font-size:1.376rem; font-family:var(--mono)}

/* kills bento */
.nmg-bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:16px}
.nmg-cell{position:relative; border-radius:16px; overflow:hidden; background:var(--surface2); border:1px solid var(--border); display:block}
.nmg-cell img{width:100%; height:100%; object-fit:cover; transition:.5s; display:block}
.nmg-cell:hover img{transform:scale(1.06)}
.nmg-cell.hero-cell{grid-column:span 2; grid-row:span 2}
.nmg-cell.wide{grid-column:span 2}
.nmg-cap{position:absolute; left:0; right:0; bottom:0; padding:16px; background:linear-gradient(0deg,rgba(10,12,17,.95),transparent)}
.nmg-cap .b{font-family:var(--disp); font-weight:600; font-size:1.632rem; color:#fff}
.nmg-cell.hero-cell .nmg-cap .b{font-size:2.32rem}

/* progression (frames the Raider.IO plugin output) */
.nmg-prog{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; overflow-x:auto}

/* raid composition (class-colored) */
.nmg-comp{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:34px; display:grid; grid-template-columns:1fr 2fr; gap:30px 44px; align-items:start}
.nmg-comp-left{display:grid; gap:28px; align-content:start}
.nmg-comp-col h3{font-family:var(--disp); font-weight:600; text-transform:uppercase; font-size:1.68rem; margin:0 0 16px; display:flex; gap:9px; align-items:center}
.nmg-comp-col h3 span{font-family:var(--mono); font-size:1.152rem; color:var(--muted); background:var(--surface2); border:1px solid var(--border); border-radius:5px; padding:2px 7px}
.nmg-clist{display:grid; gap:9px}
.nmg-dps .nmg-clist{grid-template-columns:1fr 1fr; gap:9px 24px}
.nmg-toon{display:flex; align-items:center; gap:9px; font-size:1.472rem}
.nmg-toon .nmg-dot{width:9px; height:9px; border-radius:50%; background:var(--cc); box-shadow:0 0 8px var(--cc); flex:none}
.nmg-toon .nmg-n{color:var(--cc); font-weight:600}
.nmg-toon .nmg-il{margin-left:auto; font-family:var(--mono); font-size:1.12rem; color:var(--muted)}

/* roster / masthead */
.nmg-roster-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px}
.nmg-pc{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; position:relative; overflow:hidden; transition:.22s}
.nmg-pc::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cc,var(--muted))}
.nmg-pc:hover{transform:translateY(-4px); border-color:var(--cc,var(--border))}
.nmg-av{width:54px; height:54px; border-radius:10px; object-fit:cover; background:var(--surface2); margin-bottom:14px; border:1px solid var(--border); display:block}
.nmg-nm{font-family:var(--disp); font-weight:600; font-size:1.728rem}
.nmg-spec{color:var(--cc,var(--muted)); font-size:1.344rem; font-weight:500; margin-top:2px}
.nmg-role{font-family:var(--mono); font-size:1.056rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:10px}

/* recruit */
.nmg-recruit{background:radial-gradient(120% 160% at 100% 0%,rgba(163,53,238,.22),transparent 60%),radial-gradient(120% 160% at 0% 100%,rgba(255,128,0,.14),transparent 55%),var(--surface); border:1px solid var(--border); border-radius:22px; padding:48px; display:flex; gap:40px; align-items:center; flex-wrap:wrap}
.nmg-recruit h2{font-family:var(--disp); font-weight:700; font-size:clamp(2.88rem,4vw,4.8rem); text-transform:uppercase; line-height:1; flex:1 1 320px; margin:0}
.nmg-recruit h2 .nmg-rg{color:var(--green); text-decoration:line-through; text-decoration-thickness:3px}
.nmg-recruit h2 .nmg-rp{color:var(--epic)}
.nmg-needs{font-family:var(--mono); font-size:1.376rem; color:var(--muted); display:flex; flex-direction:column; gap:10px}
.nmg-needs b{color:var(--txt)} .nmg-needs .open{color:var(--green)}
.nmg-recruit-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.nmg-recruit-tag{font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 12px}
.nmg-form{margin-top:24px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:30px}
.nmg-recruit-cta{margin-top:24px}

@media(max-width:760px){
  .nmg-bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px}
  .nmg-cell.hero-cell{grid-column:span 2}
  .nmg-comp{grid-template-columns:1fr}
  .nmg-dps .nmg-clist{grid-template-columns:1fr}
  .nmg-recruit{padding:32px}
}

/* ==========================================================================
   Footer (child footer.php) — site-wide, branded. px sizes (parent root=10px).
   ========================================================================== */
.nmg-footer{--epic:#a335ee; --green:#1eff00; --border:#28323f; --bg:#0a0c11; --txt:#e7ebf0; --muted:#9aa6b2;
  background:var(--bg); border-top:1px solid var(--border); color:var(--txt); font-family:'Inter',system-ui,sans-serif}
.nmg-footer-in{max-width:1180px; margin:0 auto; padding:46px 28px; display:flex; flex-wrap:wrap; align-items:center; gap:20px}
.nmg-footer-brand{font-family:'Chakra Petch',system-ui,sans-serif; font-weight:700; text-transform:uppercase; font-size:24px; letter-spacing:.04em; line-height:1}
.nmg-footer-brand .nmg-strike{color:var(--green); position:relative}
.nmg-footer-brand .nmg-strike::after{content:""; position:absolute; left:-2%; right:-2%; top:54%; height:2px; background:var(--green); transform:rotate(-2.4deg)}
.nmg-footer-tag{color:var(--muted); font-size:14px; margin:8px 0 0}
.nmg-footer-links{margin-left:auto; display:flex; flex-wrap:wrap; gap:22px; font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.04em; text-transform:uppercase}
.nmg-footer-links a{color:var(--muted); text-decoration:none; transition:color .2s}
.nmg-footer-links a:hover{color:var(--epic)}
.nmg-footer-bottom{border-top:1px solid var(--border)}
.nmg-footer .nmg-footer-bottom{max-width:1180px; margin:0 auto; padding:16px 28px; display:flex; justify-content:space-between; align-items:center; gap:14px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted)}
.nmg-totop{position:static !important; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--border); border-radius:7px; color:var(--muted); cursor:pointer; background:none; transition:.2s}
.nmg-totop:hover{border-color:var(--epic); color:var(--txt)}
@media(max-width:640px){.nmg-footer-links{margin-left:0}}