/* Override styles to unify the layout across all project pages.
   This stylesheet centers the top banner and ensures the home button
   stays aligned at the top right.  It uses !important to override
   existing page‑specific CSS rules without modifying them directly.
*/

/* Center the top banner horizontally on desktop. */
.top-center-banner {
  /* Force centering rather than a fixed left offset used in the original pages */
  left: 50% !important;
  /* Support the logical property used on some pages (Graphene etc.). */
  inset-inline-start: 50% !important;
  transform: translateX(-50%) !important;
}

/* Ensure the home button (utility) is consistently sized and anchored
   to the top right corner on desktop. */
.zui--utility.home-btn {
  position: fixed !important;
  top: max(16px, 2vh) !important;
  right: max(16px, 2vw) !important;
  width: 50px !important;
  height: 50px !important;
  /* Ensure the background image fills the button without distortion. */
  background-size: cover !important;
  background-position: center !important;
}

/* Adjust the label position below the home button to stay centered. */
.zui--utility.home-btn .utility-label-below {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Mobile adjustments: preserve centering of the top banner and
   keep the home button accessible. */
@media (max-width: 768px) {
  .top-center-banner {
    left: 50% !important;
    inset-inline-start: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 100px) !important;
    max-width: 350px !important;
  }
  .zui--utility.home-btn {
    width: 35px !important;
    height: 35px !important;
    top: 15px !important;
    right: 15px !important;
  }
}