/*
 * WP QUADS responsive compatibility for TiHi Calculator.
 * Targets the plugin's real frontend wrappers instead of Ad Inserter classes.
 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

.tihi-site-content,
#root,
.tihi-blog-main,
.tihi-blog-wrap,
.tihi-layout,
.tihi-post,
.tihi-post-content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ordinary WP QUADS placements must never widen their content column. */
:where(
  .quads-location,
  [id^="quads-ad"],
  [class^="quads-ad"],
  [class*=" quads-ad"]
) {
  max-width: 100%;
  box-sizing: border-box;
}

:where(
  .quads-location,
  [id^="quads-ad"],
  [class^="quads-ad"],
  [class*=" quads-ad"]
) :where(img, video, object, embed, canvas, ins.adsbygoogle) {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* WP QUADS' sticky placement wrapper. */
.quads-sticky,
.tihi-wpquads-sticky {
  box-sizing: border-box !important;
  max-width: calc(100vw - 12px) !important;
  overflow: visible !important;
}

.quads-sticky > :not(.quads-sticky-ad-close),
.tihi-wpquads-sticky > :not(.quads-sticky-ad-close) {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.quads-sticky :where(.quads-location, [id^="quads-ad"], ins.adsbygoogle),
.tihi-wpquads-sticky :where(.quads-location, [id^="quads-ad"], ins.adsbygoogle) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.quads-sticky :where(iframe, img, video, object, embed, canvas),
.tihi-wpquads-sticky :where(iframe, img, video, object, embed, canvas) {
  display: block;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Keep WP QUADS' close/reopen controls inside the screen as well. */
.quads-sticky-ad-close,
.quads-sticky-show-btn {
  box-sizing: border-box !important;
  max-width: calc(100vw - 12px) !important;
}

@media (max-width: 782px) {
  .quads-sticky,
  .tihi-wpquads-sticky {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
  }

  .quads-sticky :where(.quads-location, [id^="quads-ad"], ins.adsbygoogle, iframe),
  .tihi-wpquads-sticky :where(.quads-location, [id^="quads-ad"], ins.adsbygoogle, iframe) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .quads-sticky-ad-close {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }

  .quads-sticky-show-btn {
    max-width: calc(100vw - 12px) !important;
  }
}
