/* The phone call and request bar (#mbar, ues_mbar() in ues-resources.php) on every UES page with a request
   section (mail 032): fixed at the bottom on phones, two buttons side by side, hidden on desktop, and stepping aside
   while the request section is in view (body.req-in, mbar.js). Moved here from resource.css so a page does not need
   the posts' stylesheet; the posts, the rules pages and the listing load it too. Loads only where the bar prints.
   v1.1 (mail 033): it also stays down while the hero's call and request buttons are on screen (body.hero-in).
   Source of truth: ues-homepage git repo on Manny's machine. v1.1 */
#mbar{display:none}
@media(max-width:760px){
  #mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:95;transition:transform .3s,visibility 0s}
  #mbar .btn{padding:12px 8px;font-size:14.5px}
  /* down below the screen, then invisible once the slide ends: nothing shows through a translucent browser toolbar
     and the hidden links leave the keyboard and screen reader order */
  body.req-in #mbar,body.hero-in #mbar{transform:translateY(110%);visibility:hidden;transition:transform .3s,visibility 0s .3s}
  body.ues-page{padding-bottom:70px}
}
/* Start state, only where scripts run: on a page whose hero row has the call or request button, the bar starts down
   until mbar.js has looked (html.mbar-on), so it never flashes over the hero. Without scripts it shows from the start,
   as before; if mbar.js never arrives it comes up after 4 seconds (cancelled once mbar.js runs, html.mbar-run, so a
   page opened in a background tab waits for the script instead). The !important outranks resource.css's
   reduced motion rule, which cancels every animation; this one moves nothing. */
@media(max-width:760px) and (scripting:enabled){
  html:not(.mbar-on) body:has(.hero .cta-row :is(a[href^="tel:"],a[href*="#request"])) #mbar{transform:translateY(110%);visibility:hidden}
  html:not(.mbar-on):not(.mbar-run) body:has(.hero .cta-row :is(a[href^="tel:"],a[href*="#request"])) #mbar{animation:mbar-late 0s 4s forwards!important}
}
@keyframes mbar-late{to{transform:none;visibility:visible}}
@media(prefers-reduced-motion:reduce){#mbar,body.req-in #mbar,body.hero-in #mbar{transition:none}}
@media print{#mbar{display:none!important}}