/* ---------------------------------------------------------------------------
 * mbr-shim.css
 *
 * Replaces the AMP runtime stylesheet (cdn.ampproject.org/v0.js) that used to
 * lay out the <amp-*> custom elements.  The page markup now uses inert custom
 * elements with the same structural role, so the Mobirise theme CSS that
 * targeted `amp-img`, `amp-sidebar`, ... still applies unchanged after a plain
 * element rename (amp-  ->  mbr-).
 *
 * Load order:  mbr-shim.css  ->  <page>.css   (the page CSS must win, exactly
 * as the old <style amp-custom> won over the AMP runtime CSS).
 * ------------------------------------------------------------------------- */

/* --- base reset ---------------------------------------------------------
 * The Mobirise theme never reset the body margin: the AMP runtime stylesheet
 * did it (`html:not([amp4ads]) body { margin: 0 !important }`).  Without these
 * two rules every page below the fixed navbar sits 8px off. */
html { overflow-x: hidden; }
body { margin: 0; }

/* --- mbr-img : was <amp-img layout="responsive"> --------------------------
 * AMP produced  <amp-img><i-amphtml-sizer><img class=i-amphtml-fill-content>.
 * The sizer is replaced by `aspect-ratio` written inline on the wrapper by
 * the converter, so the intrinsic box is identical.                       */
mbr-img {
  display: block;
  position: relative;
  overflow: hidden;
}
mbr-img > img {                 /* == AMP's .i-amphtml-fill-content */
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  margin: auto;
}

/* Mobirise's spinner placeholder: visible until the image has decoded. */
mbr-img > [placeholder] {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}
mbr-img.is-loaded > [placeholder] { display: none; }

/* --- mbr-sidebar : was <amp-sidebar layout="nodisplay" side="right"> ----- */
mbr-sidebar {
  display: none;
  position: fixed;
  top: 0; bottom: 0;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 2147483647;
  transition: transform 233ms cubic-bezier(0, 0, .21, 1);
}
mbr-sidebar[side="right"] { right: 0; transform: translateX(100%); }
mbr-sidebar[side="left"]  { left: 0;  transform: translateX(-100%); }
mbr-sidebar[open] { display: block; }
mbr-sidebar[open].is-shown { transform: translateX(0); }

.mbr-sidebar-mask {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, .2);
  z-index: 2147483646;
}
html.mbr-scroll-lock, html.mbr-scroll-lock body { overflow: hidden; }

/* The Mobirise theme hides the sidebar and its hamburger from 992px up; keep
   that true even if the sidebar was left open while the window was resized. */
@media (min-width: 992px) {
  mbr-sidebar[open] { display: none; }
}

/* --- mbr-lightbox : was <amp-lightbox layout="nodisplay"> ---------------- */
mbr-lightbox {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2147483646;
}
mbr-lightbox[open] { display: block; }

/* --- mbr-youtube : was <amp-youtube layout="responsive" 16:9> ----------- */
mbr-youtube {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
mbr-youtube[hidden] { display: none; }
mbr-youtube > iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* --- forms : was <amp-form> --------------------------------------------
 * AMP hid the [submitting]/[submit-success]/[submit-error] regions and
 * revealed the matching one after the XHR.  Same contract, driven by a class
 * that assets/js/site.js puts on the <form>.                             */
form [submitting],
form [submit-success],
form [submit-error]           { display: none; }
form.mbr-submitting    [submitting],
form.mbr-submit-success [submit-success],
form.mbr-submit-error   [submit-error] { display: block; }

/* Honeypot: never shown, never announced, never focusable. */
.mbr-form-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- cookie bar : was <amp-user-notification layout="nodisplay"> -------- */
mbr-user-notification { display: none; }
mbr-user-notification.is-shown { display: inline-block; }