/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites...
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: astra-child
Template: astra
*/

/* =========================================================
   NexusChallenge — Home CSS (front-page.php + Astra Child)
   - Fix Astra/WP spacing (home only)
   - Styles NX (sections, cards, buttons, table)
   - HERO cinematic (PERFGAMER-like) : video full-bleed
========================================================= */

/* ---------- Astra / WordPress FIXES (HOME ONLY) ---------- */
body.home{
  margin:0;
  background:#07080b;
}

body.home #content,
body.home .site-content,
body.home .ast-container,
body.home .site-primary,
body.home #primary{
  width:100%;
  max-width:none;
}

body.home .ast-container{
  padding-left:0 !important;
  padding-right:0 !important;
}

body.home .site-content{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

body.home .entry-header,
body.home .entry-title,
body.home header.entry-header{
  display:none !important;
}

/* Header transparent (home) */
body.home .main-header-bar{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* ---------- NX TOKENS ---------- */
:root{
  --nx-bg:#07080b;
  --nx-bg2:#0c0f16;
  --nx-card:#111522;
  --nx-text:#e9eefc;
  --nx-muted:#b4bfd9;
  --nx-line:rgba(255,255,255,.10);
  --nx-accent:#ff7a18;
  --nx-accent2:#ffb15a;
  --nx-shadow: 0 18px 60px rgba(0,0,0,.55);
  --nx-radius: 18px;
}

/* ---------- PAGE WRAP ---------- */
.nx-home{
  color:var(--nx-text);
  background:
    radial-gradient(900px 500px at 18% 12%, rgba(255,122,24,.18), transparent 55%),
    radial-gradient(700px 450px at 85% 10%, rgba(255,177,90,.10), transparent 55%),
    linear-gradient(180deg, var(--nx-bg), var(--nx-bg2));
  padding-bottom: 40px;
}

.nx-container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

.nx-section{ padding: 64px 0; }
.nx-section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-top:1px solid var(--nx-line);
  border-bottom:1px solid var(--nx-line);
}

/* =========================================================
   PERF-STYLE HERO (IMAGE ONLY) — final (updated for screenshot content panel)
   ========================================================= */

/* Astra full width home fix */
body.home #content,
body.home .site-content,
body.home .ast-container,
body.home #primary,
body.home .site-primary{
  max-width:none !important;
  width:100% !important;
}
body.home .ast-container{
  padding-left:0 !important;
  padding-right:0 !important;
}

.pg-hero{
  position:relative;
  height:92vh;
  min-height:700px;
  overflow:hidden;
  background:#06070a;
  isolation:isolate; /* force z-index layering to behave */
}

/* Background image full-bleed */
.pg-hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.03);
  filter: contrast(1.08) saturate(1.04);
  z-index:0;
}

/* HUD overlay */
.pg-hero__hud{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.30;
  mix-blend-mode:screen;
  z-index:1;
}

/* overlays like PerfGamer */
.pg-hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 68% 50%, rgba(0,170,255,.12), transparent 62%),
    radial-gradient(900px 560px at 28% 45%, rgba(255,80,0,.10), transparent 66%),
    linear-gradient(90deg, rgba(0,0,0,.86) 12%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.86) 92%);
  z-index:2;
}

.pg-hero__vignette{
  position:absolute;
  inset:0;
  box-shadow: inset 0 0 170px rgba(0,0,0,.92);
  z-index:3;
}

/* =========================================================
   LEFT CONTENT PANEL — matches your screenshot (card, not angled)
   ========================================================= */
/* =====================================================
   HERO TEXT BLOCK — NO CARD (floating text)
   ===================================================== */

.pg-hero__panel{
  position:absolute;
  left:4.5vw;
  top:50%;
  transform:translateY(-50%);

  width:640px;
  max-width:92vw;

  padding:0;                 /* remove card spacing */
  background:none;           /* 🚨 removes black box */
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  border-radius:0;

  z-index:10;
}
/* =====================================================
   HUD CORNER BRACKETS
   ===================================================== */

.pg-hero__panel::before,
.pg-hero__panel::after{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  pointer-events:none;
  opacity:.9;
  filter: drop-shadow(0 0 10px rgba(0,170,255,.15));
}

/* top-left */
.pg-hero__panel::before{
  top:-18px;
  left:-18px;
  border-top:2px solid rgba(0,170,255,.45);
  border-left:2px solid rgba(0,170,255,.45);
}

/* bottom-right */
.pg-hero__panel::after{
  bottom:-18px;
  right:-18px;
  border-bottom:2px solid rgba(0,170,255,.40);
  border-right:2px solid rgba(0,170,255,.40);
}

/* Eyebrow */
.pg-hero__eyebrow{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
}

/* Big title like screenshot */
.pg-hero__title{
  margin: 0 0 14px;
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.03;
  font-weight: 850;
  color: rgba(255,255,255,.92);
}

/* Supporting text */
.pg-hero__lead{
  margin: 0 0 20px;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  line-height: 1.65;
  max-width: 62ch;
}

/* =====================================================
   HERO CTA — GAMING STYLE (replace the whole CTA section)
   ===================================================== */

.pg-hero__actions{
  display:flex;
  flex-direction:column;   /* stacked like your screenshot */
  align-items:flex-start;
  gap:12px;
  margin:22px 0 14px;
}

/* BASE */
.pg-hero__cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 26px;
  font-weight:800;
  text-decoration:none;
  border-radius:10px;      /* less “pill”, more gaming UI */

  letter-spacing:.02em;
  transition: all .25s ease;
  overflow:hidden;
  border: none;
}

/* =========================
   PRIMARY BUTTON
========================= */
.pg-hero__cta--primary{
  background: linear-gradient(135deg,#ff512f,#ff2d2d);
  color:#fff;

  box-shadow:
    0 8px 30px rgba(255,60,40,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* light sweep */
.pg-hero__cta--primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  transform:translateX(-120%);
  opacity:.9;
  transition: transform .55s ease;
}

.pg-hero__cta--primary:hover::before{
  transform:translateX(120%);
}

.pg-hero__cta--primary:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow: 0 14px 45px rgba(255,70,40,.55);
}

/* =========================
   SECONDARY BUTTON
========================= */
.pg-hero__cta--ghost{
  background: rgba(255,255,255,.06);
  color:#fff;
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
}

.pg-hero__cta--ghost:hover{
  transform:translateY(-2px);
  border-color:#00aaff;
  box-shadow: 0 0 18px rgba(0,170,255,.35);
}

/* Badges row */
.pg-hero__badges{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pg-hero__badge{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);

  border: 1px solid rgba(255,122,24,.35);
  background: rgba(255,122,24,.10);
  padding: 8px 10px;
  border-radius: 999px;
}

/* =========================================================
   RIGHT VISUAL — keeps the “scene” feel
   ========================================================= */
.pg-hero__visual{
  position:absolute;
  right: 1.5vw;
  bottom: 0;
  height: 96%;
  width: min(860px, 55vw);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  z-index:9;
  pointer-events:none;
}

.pg-hero__img{
  height: 100%;
  width: auto;
  max-height: 900px;
  filter: drop-shadow(0 42px 120px rgba(0,0,0,.90));
}

/* Bottom chips */
.pg-hero__bottom{
  position:absolute;
  left:50%;
  bottom: 26px;
  transform: translateX(-50%);
  display:flex;
  gap: 12px;
  z-index:12;
}

.pg-hero__chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 20px;
  border-radius: 12px;
  background: rgba(0,0,0,.40);
  color:#fff;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease;
}
.pg-hero__chip:hover{
  transform: translateY(-1px);
  border-color: rgba(0,170,255,.30);
}

/* Responsive */
@media (max-width: 980px){
  .pg-hero{
    height:auto;
    min-height:0;
    padding: 72px 0 44px;
  }

  .pg-hero__panel{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    margin: 0 auto;
  }

  .pg-hero__visual{
    position:relative;
    right:auto;
    bottom:auto;
    height:auto;
    width:100%;
    justify-content:center;
    margin-top: 18px;
  }

  .pg-hero__img{
    max-height: 460px;
    height:auto;
    width: min(620px, 92vw);
  }

  .pg-hero__bottom{
    position:relative;
    left:auto;
    bottom:auto;
    transform:none;
    justify-content:center;
    margin-top: 18px;
  }
}
/* ---------- BRAND / LOGO ---------- */
.nx-brand{ margin-bottom: 14px; }

.nx-brand__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nx-brand__logo{
  width: 120px;
  height: auto;
  display:block;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.55));
}

/* ---------- BUTTONS (NX sections) ---------- */
.nx-cta{
  display:flex;
  gap:12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.nx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none !important;
  font-weight:700;
  border:1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  font-size: 14px;
  text-transform: lowercase;
}

.nx-btn--primary{
  background: linear-gradient(180deg, var(--nx-accent), #ff5f00);
  color:#101010;
}
.nx-btn--primary:hover{ transform: translateY(-1px); }

.nx-btn--ghost{
  background: rgba(255,255,255,.04);
  border-color: var(--nx-line);
  color: var(--nx-text);
}
.nx-btn--ghost:hover{ transform: translateY(-1px); border-color: rgba(255,122,24,.35); }

.nx-btn--block{ width:100%; margin-top: 10px; }
.nx-btn--lg{ padding: 14px 18px; font-size: 15px; }

/* ---------- BADGES ---------- */
.nx-badges{
  display:flex;
  flex-wrap: wrap;
  gap:8px;
  margin-top: 10px;
}
.nx-badge{
  font-size: 12px;
  color: var(--nx-muted);
  border:1px solid var(--nx-line);
  background: rgba(255,255,255,.03);
  padding: 8px 10px;
  border-radius: 999px;
}

/* ---------- TYPO ---------- */
.nx-h2{
  margin:0 0 8px;
  font-size: 26px;
  line-height: 1.2;
}
.nx-sub{ margin:0; color: var(--nx-muted); }

.nx-h3{
  margin:0 0 10px;
  font-size: 16px;
}

.nx-text{
  margin:0 0 12px;
  color: var(--nx-muted);
  line-height: 1.65;
}

/* ---------- MINI LIST ---------- */
.nx-mini .nx-h3{ margin: 6px 0 10px; }

.nx-mini__list{
  list-style:none;
  padding:0;
  margin:0 0 10px;
}
.nx-mini__list li{ margin: 8px 0; }
.nx-mini__list a{
  color: var(--nx-text);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.nx-mini__list a:hover{ border-bottom-color: rgba(255,122,24,.55); }
.nx-mini__note{ color: var(--nx-muted); font-size: 13px; margin:0; }

/* ---------- GRIDS / CARDS ---------- */
.nx-grid{ display:grid; gap: 14px; }
.nx-grid--3{ grid-template-columns: repeat(3, 1fr); }

.nx-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 18px;
  box-shadow: var(--nx-shadow);
}
.nx-card--soft{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.nx-card__meta{
  display:inline-flex;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(255,122,24,.14);
  border:1px solid rgba(255,122,24,.25);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.nx-link{
  color: var(--nx-accent2);
  text-decoration:none;
  font-weight:700;
}
.nx-link:hover{ text-decoration: underline; }

/* ---------- TWO COL ---------- */
.nx-two{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  align-items: start;
}

.nx-panel{
  background: linear-gradient(180deg, rgba(255,122,24,.10), rgba(255,255,255,.02));
  border:1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 18px;
  box-shadow: var(--nx-shadow);
}

.nx-list{
  margin: 0;
  padding-left: 18px;
  color: var(--nx-muted);
}
.nx-list li{ margin: 8px 0; }

/* ---------- TABLE ---------- */
.nx-table-wrap{
  overflow:auto;
  border-radius: var(--nx-radius);
  border:1px solid var(--nx-line);
  background: rgba(0,0,0,.25);
  box-shadow: var(--nx-shadow);
}
.nx-table{
  width:100%;
  border-collapse: collapse;
  min-width: 720px;
}
.nx-table th, .nx-table td{
  padding: 12px 14px;
  border-bottom:1px solid var(--nx-line);
  text-align:left;
}
.nx-table th{
  background: rgba(255,255,255,.04);
  font-size: 12px;
  color: rgba(255,255,255,.9);
  text-transform: uppercase;
  letter-spacing: .10em;
}
.nx-table td{ color: var(--nx-muted); }
.nx-footnote{ margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.60); }

/* ---------- FINAL CTA ---------- */
.nx-final{
  padding: 62px 0;
  border-top: 1px solid var(--nx-line);
  background:
    radial-gradient(700px 450px at 50% 0%, rgba(255,122,24,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.nx-final__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--nx-line);
  border-radius: var(--nx-radius);
  padding: 20px;
  box-shadow: var(--nx-shadow);
}
.nx-final__cta{ display:flex; gap: 10px; flex-wrap: wrap; }

/* ---------- RESPONSIVE (sections) ---------- */
@media (max-width: 960px){
  .nx-grid--3{ grid-template-columns: 1fr; }
  .nx-two{ grid-template-columns: 1fr; }
  .nx-final__inner{ flex-direction: column; align-items: flex-start; }
}

/* Extra Responsive Fixes */
@media (max-width: 920px){
  .nx-two,
  .nx-grid--3{
    grid-template-columns: 1fr !important;
  }
}

/* Accessibility */
.nx-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===============================
   HERO BUTTONS ONLY — FIX
   (does NOT touch panel/title/bg)
   =============================== */

/* container buttons */
.pg-hero__actions{
  display:flex !important;
  flex-direction:column !important;   /* comme sur ta photo */
  align-items:flex-start !important;
  gap:12px !important;
  margin:18px 0 12px !important;
}

/* base button */
.pg-hero__cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:14px 22px !important;
  border-radius:12px !important;
  font-weight:800 !important;
  text-decoration:none !important;

  border:1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important;
  color:#fff !important;

  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

/* primary (orange) */
.pg-hero__cta--primary{
  background: linear-gradient(180deg, #ff8a2a, #ff6a00) !important;
  color:#101010 !important;
  border-color: rgba(255,120,20,.55) !important;
  box-shadow: 0 10px 30px rgba(255,100,20,.28) !important;
}

/* ghost */
.pg-hero__cta--ghost{
  background: rgba(255,255,255,.05) !important;
  color:#fff !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* hover */
.pg-hero__cta:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
}

.pg-hero__cta--primary:hover{
  box-shadow: 0 16px 44px rgba(255,100,20,.42) !important;
}

.pg-hero__cta--ghost:hover{
  border-color: rgba(0,170,255,.35) !important;
  box-shadow: 0 0 18px rgba(0,170,255,.22) !important;
}

.pg-hero__panel{
  /* juste un halo léger, pas une carte */
  background: radial-gradient(900px 520px at 15% 35%,
              rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
}

.pg-hero__cta--primary{
  box-shadow: 0 14px 40px rgba(255,120,20,.25);
}
.pg-hero__cta--primary:hover{
  box-shadow: 0 20px 55px rgba(255,120,20,.40);
}