/* theme-doom override: compatibility mappings and enforcement for hero layout */

/* Map legacy column names to new classnames so older rules still apply */
.hero-left-column, .hero-left-top { grid-column: 1; }
.hero-right-column, .hero-right-top { grid-column: 2; }

/* Bottom row should span full width and align its children horizontally */
.hero-bottom-row { grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:center; gap:1.2rem; }
.hero-left-bottom, .hero-right-bottom { display:flex; align-items:center; }
.hero-right-bottom { justify-content:flex-end; }

/* Visual sizing tweaks */
.hero-visual-image-new { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.hero-reinforcing-visual-new-container { display: flex; align-items: center; }
.cta-reinforcement-visual-image-new { width: 110px; max-width: 25vw; height: auto; display:block; }

/* Force grid layout on wider screens and give priority to these rules */
@media (min-width: 961px) {
  .hero-content-wrapper { display: grid !important; grid-template-columns: 3fr 2fr !important; gap: 1.5rem !important; align-items: start !important; }
  .hero-left-top { grid-column: 1; }
  .hero-right-top { grid-column: 2; }
  .hero-bottom-row { display:flex !important; }
}

/* Small accessibility/helpful touch */
.hero-bottom-row .cta-buttons > a { white-space: nowrap; }

/* Override DOOM theme's absolute monitoring box so right column stacks vertically
   Keep selectors scoped to body.theme-doom to match theme specificity */
body.theme-doom .hero-right-top {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* center children horizontally */
}

/* Put monitoring box into document flow (no overlay) */
body.theme-doom .hero-right-top > .hero-reinforcing-visual {
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 320px !important;
  margin-top: 12px !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  pointer-events: auto !important;
  align-self: flex-start !important;
}

/* Remove extra portrait top gap the theme previously used to make room for absolute box */
body.theme-doom .hero-right-top > img.hero-visual-image-new {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  position: relative !important;
  z-index: 1 !important;
  align-self: flex-start !important;
}

/* Small spacing for PoE profile under the portrait */
body.theme-doom .hero-right-top > .poe-profile {
  margin-top: 8px !important;
  align-self: flex-start !important;
}

/* Make portrait, PoE and monitoring box the same width and centered */
body.theme-doom .hero-right-top > img.hero-visual-image-new,
body.theme-doom .hero-right-top > .poe-profile,
body.theme-doom .hero-right-top > .hero-reinforcing-visual {
  width: 100% !important;
  max-width: 280px !important; /* unified width */
  box-sizing: border-box !important;
  align-self: center !important;
}

/* Slightly lift the demon CTA image to reduce gap (approx. 5px) */
body.theme-doom .hero-right-bottom .cta-reinforcement-visual-image-new {
  transform: translateY(-10px) !important;
  transition: transform 120ms ease !important;
}

/* Mobile: single-column stacking and demon handling (Option A = hide demon) */
@media (max-width: 960px) {
  /* Make hero wrapper flow vertically */
  body.theme-doom .hero-content-wrapper {
    display: block !important;
    padding: 0 !important;
  }

  /* Ensure left/top content appears first, then right-top stack follows visually */
  body.theme-doom .hero-left-top,
  body.theme-doom .hero-right-top {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto 1rem auto !important;
  }

  /* Stack order inside right-top: image -> poe -> monitoring */
  body.theme-doom .hero-right-top { display: flex !important; flex-direction: column !important; align-items: center !important; }
  body.theme-doom .hero-right-top > img.hero-visual-image-new,
  body.theme-doom .hero-right-top > .poe-profile,
  body.theme-doom .hero-right-top > .hero-reinforcing-visual {
    width: 90% !important;
    max-width: 320px !important;
    margin: 6px auto !important;
    align-self: center !important;
  }

  /* Ensure bottom row stacks under content on mobile */
  body.theme-doom .hero-bottom-row {
    display: block !important;
    gap: 0 !important;
    margin-top: 12px !important;
  }
  body.theme-doom .hero-left-bottom,
  body.theme-doom .hero-right-bottom {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 12px !important;
  }

  /* Option A: hide the demon CTA image on mobile so it doesn't obstruct reading flow */
  body.theme-doom .hero-right-bottom .hero-reinforcing-visual-new-container,
  body.theme-doom .hero-right-bottom .cta-reinforcement-visual-image-new {
    display: none !important;
  }

  /* Collapse any reserved height for bottom-row cells so layout doesn't leave blank gaps */
  body.theme-doom .hero-left-bottom,
  body.theme-doom .hero-right-bottom,
  body.theme-doom .hero-bottom-row {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Reduce section padding on mobile to tighten the gap under header */
  body.theme-doom section.game-screen, body.theme-doom .hero-section {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Remove any large top margin reserved by hero-right-top children */
  body.theme-doom .hero-right-top > img.hero-visual-image-new {
    margin-top: 0 !important;
  }

  /* Ensure mobile nav is off-screen when closed (defensive) */
  body.theme-doom #mobile-nav[aria-hidden="true"] { right: -100% !important; }
  body.theme-doom #mobile-nav[aria-hidden="false"] { right: 0 !important; }

  /* Hide mobile nav if it was forced visible by other rules; only open via aria-hidden attribute */
  body.theme-doom #mobile-nav { right: -100% !important; }
}

/* Remove unnecessary gap between header and the first section when theme and header are present */
body.theme-doom header + section.game-screen,
body.theme-doom header + .hero-section {
  margin-top: 0 !important;
  padding-top: 12px !important; /* keep a little breathing room */
}

/* Stronger mobile fixes: hide monitoring/demon visuals and remove reserved heights */
@media (max-width: 960px) {
  /* Hide the monitoring panel that sits over the portrait on mobile */
  body.theme-doom .hero-right-top > .hero-reinforcing-visual {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  /* Ensure any demon CTA in the bottom row is hidden on mobile (covers multiple selectors) */
  body.theme-doom .hero-right-bottom > .hero-reinforcing-visual-new-container,
  body.theme-doom .hero-right-bottom .hero-reinforcing-visual-new-container,
  body.theme-doom .hero-right-bottom .cta-reinforcement-visual-image-new,
  .hero-reinforcing-visual-new-container,
  .cta-reinforcement-visual-image-new {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove reserved min-heights that create blank gaps */
  body.theme-doom .hero-bottom-row,
  body.theme-doom .hero-left-bottom,
  body.theme-doom .hero-right-bottom {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove portrait top spacing reserved for absolute monitoring box */
  body.theme-doom .hero-right-top > img.hero-visual-image-new {
    margin-top: 0 !important;
    max-width: 180px !important;
    display: block !important;
  }

  /* Ensure mobile nav is fully off-screen and not visible due to conflicting rules */
  body.theme-doom #mobile-nav { right: -120% !important; transform: translateX(0) !important; }
  
  /* Hide main portrait on small screens to remove large visual block if requested */
  body.theme-doom .hero-right-top > img.hero-visual-image-new {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Respect aria-hidden explicitly for mobile nav: hide when closed, show when open */
  body.theme-doom #mobile-nav[aria-hidden="true"] { display: none !important; right: -120% !important; }
  body.theme-doom #mobile-nav[aria-hidden="false"] { display: block !important; right: 0 !important; }

  /* Remove top padding / reserved space for game-screen / hero-section on mobile */
  body.theme-doom section.game-screen,
  body.theme-doom .hero-section,
  body.theme-doom .new-hero-layout {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Prevent system nodes and arsenal cards from using full-height that can cause overlap */
  body.theme-doom .system-node,
  body.theme-doom .arsenal-card {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Make the three green cards (system nodes / arsenal cards) uniform and stacked vertically */
  body.theme-doom .system-diagram-container,
  body.theme-doom .arsenal-grid {
    display: grid !important;
    grid-template-columns: 1fr !important; /* single column */
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  body.theme-doom .system-node,
  body.theme-doom .arsenal-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 220px !important; /* give them uniform visual size */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* Ensure card content flows and buttons sit at bottom */
  body.theme-doom .arsenal-card .cta-button {
    margin-top: auto !important;
  }
}

/* Extra defensive mobile rules to catch monitoring visuals rendered outside of .hero-right-top */
@media (max-width: 960px) {
  /* Hide any monitoring / reinforcing visuals anywhere on the page */
  body.theme-doom .hero-reinforcing-visual,
  body.theme-doom .hero-reinforcing-visual-new-container,
  body.theme-doom .hero-reinforcing-visual-new-container img,
  .hero-reinforcing-visual,
  .hero-reinforcing-visual-new-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Normalize any hero anchors that may reserve space */
  #hero-briefing-anchor { display: block !important; padding-top: 0 !important; margin-top: 0 !important; height: 0 !important; }

  /* Make sure hero cells collapse and don't create phantom tall columns */
  body.theme-doom .hero-content-wrapper,
  body.theme-doom .hero-left-top,
  body.theme-doom .hero-right-top,
  body.theme-doom .hero-bottom-row {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}