/*
  !IMPORTANT: This code is not compiled and is simply copied from src/integration.css to public/integration.css
  so this means imports are not resolved. Updating integration.webpack.js to compile this file is an outstanding todo. 
*/

.zephrIframeOutcome.OverlayCramerInvestingGuide,
.zephrIframeOutcome.OverlayHomeStretch,
.zephrIframeOutcome.OverlayMadMoneyCramer,
.zephrIframeOutcome.OverlayApplicationPro,
.zephrIframeOutcome.OverlayApplicationProRss,
.zephrIframeOutcome.OverlayProNews,
.zephrIframeOutcome.OverlayThreeUp,
.zephrIframeOutcome.OverlayProPersonalFinance {
  z-index: 9999;
}

.zephrIframeOutcome.TopBarYourMoney,
.zephrIframeOutcome.BottomBarExpandable,
.zephrIframeOutcome.BottomBarProRSSFeed,
.zephrIframeOutcome.BottomBarProTargeting,
.zephrIframeOutcome.BottomBarStockAtNight,
.zephrIframeOutcome.GateRegisteredOnly,
.zephrIframeOutcome.GateArticle,
.zephrIframeOutcome.GateCondensed {
  z-index: 998;
}

.zephrIframeOutcome.GateArticle,
.zephrIframeOutcome.GateVideo,
.zephrIframeOutcome.GateCondensed,
.zephrIframeOutcome.GateRegisteredOnly {
  z-index: 98;
}

/* stylelint-disable selector-id-pattern, media-feature-range-notation */
.zephrIframeOutcome.TopBarYourMoney ~ #root #GlobalNavigation,
.zephrIframeOutcome.TopBarYourMoney ~ #root #MakeItGlobalNavigation,
.zephrIframeOutcome.TopBarYourMoney ~ #root #GlobalNavigation-Persistent {
  margin-top: 80px;
}

.zephrIframeOutcome.TopBarYourMoney ~ #root #MainContentContainer {
  margin-top: 165px;
}

/* 
  Page Product (marketing landing pages [MLP])
  Header is hidden when the top page header and footer are used (e.g., Web.Phoenix header and footer)
  to avoid double scrollbars from top page and iframe page we must iframe height must be set to the height
  off the content rendered inside of the iframe. In full page takeover scenarios (most MLPs) the top page
  header and footer are hidden so we set iframe max-height to 100vh to delegate scrolling to the iframe.

  Delegating scrolling to the iframe is important to enable sticky elements to work correctly.
*/
.zephrIframeOutcome.PageProduct[src*="hideHeader=true"] {
  /* 
    Resize observer is setting iframe `height` to be the height of the content rendered, this lets that take
    effect and delegates scrolling to the iframe.
  */
  max-height: unset;
}

.zephrIframeOutcome.PageProduct[src*="hideHeader=false"] {
  /*
    Full page takeover scenarios (most MLPs) the top page header and footer are hidden so we set iframe max-height
    to 100vh to delegate scrolling to the iframe and enable sticky elements to work correctly.
  */
  max-height: 100vh;
}

@media (max-width: 760px) {
  .zephrIframeOutcome.TopBarYourMoney ~ #root #GlobalNavigation,
  .zephrIframeOutcome.TopBarYourMoney ~ #root #MakeItGlobalNavigation,
  .zephrIframeOutcome.TopBarYourMoney ~ #root #GlobalNavigation-Persistent {
    margin-top: 196px;
  }

  .zephrIframeOutcome.TopBarYourMoney ~ #root #MainContentContainer {
    margin-top: 241px;
  }
}
/* stylelint-enable selector-id-pattern, media-feature-range-notation */

/* stylelint-disable-next-line media-feature-range-notation */
@media (max-width: 760px) {
  .zephrIframeOutcome.BottomBarExpandable,
  .zephrIframeOutcome.BottomBarProRSSFeed,
  .zephrIframeOutcome.BottomBarProTargeting,
  .zephrIframeOutcome.BottomBarStockAtNight {
    transform: translateY(-54px);
  }
}