/* ============================================================
   MOBILE OVERRIDES — DO NOT TOUCH DESKTOP
   ============================================================ */
@media (max-width: 768px) {

  /* ------------------------------------------------------------
     GLOBAL MOBILE STABILITY (CRITICAL)
     Prevent white flash + repaint during navigation
     ------------------------------------------------------------ */

  html,
  body {
    background-color: #f5f5f5; /* match site background */
    overflow-x: hidden;
  }

  body {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
  }

  /* Prevent container-based viewport wipe */
  #page,
  .site,
  .site-content {
    overflow-x: hidden;
  }

  /* ------------------------------------------------------------
     ABOUT PAGE TYPOGRAPHY + SPACING
     ------------------------------------------------------------ */

  .about-the-compound .entry-content {
    padding: 32px 0;
    max-width: 100% !important;
  }

  .about-the-compound h1 {
    font-size: 32px;
  }

  .about-the-compound h2 {
    font-size: 24px;
  }

  /* Intro stacks */
  .about-the-compound .compound-intro {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* ------------------------------------------------------------
     PB DATA BOX — FULL BLEED (FINAL, STABLE)
     ------------------------------------------------------------ */

  .pb-data-box {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    box-sizing: border-box;
  }

  .pb-data-box ul {
    grid-template-columns: 1fr !important;
  }

  /* Beaver column safety */
  .pb-data-box .fl-col-group {
    display: flex !important;
    flex-direction: column !important;
  }

  .pb-data-box .fl-col {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------
     ASTRA + BEAVER — FULL WIDTH OVERRIDE (SAFE VERSION)
     ------------------------------------------------------------ */

  .about-the-compound .ast-container,
  .about-the-compound .entry-content,
  .about-the-compound .fl-row-content {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .about-the-compound .fl-col-content,
  .about-the-compound .fl-col-content .fl-node-content {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    box-sizing: border-box;
  }

  .about-the-compound .fl-col-content * {
    box-sizing: border-box;
  }

  /* ------------------------------------------------------------
     PB COMPOUND CONTENT — FULL BLEED (FINAL)
     ------------------------------------------------------------ */

  .pb-compound-content {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    box-sizing: border-box;
  }
@media (max-width: 768px) {

  /* FORCE menu state reset on navigation */
  body.menu-open,
  body.mobile-menu-active {
    overflow: auto !important;
    position: static !important;
  }

  /* Prevent content wipe */
  .site-content,
  #content,
  main {
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  /* Kill transform-based viewport bugs */
  body,
  #page {
    transform: none !important;
  }
}