/* Park map (src/park-map.js). The new map sits over the Google embed and only shows once it has drawn cleanly
   (.pmap-on); until then, and whenever it fails, the embed is the map. */
body[data-page-family=facility] .mxmap .pmap-canvas{position:absolute;inset:0 0 var(--pmap-form-h,112px) 0;z-index:1;opacity:0;pointer-events:none;transition:opacity .45s var(--mx-ease)}
body[data-page-family=facility] .mxmap .pmap-route{position:absolute;left:0;right:0;bottom:0;z-index:2;min-height:var(--pmap-form-h,112px);box-sizing:border-box;padding:16px 18px 14px;background:var(--mx-navy);color:var(--mx-white);
  opacity:0;visibility:hidden;transition:opacity .45s var(--mx-ease),visibility 0s .45s}
body[data-page-family=facility] .mxmap.pmap-on .pmap-canvas{opacity:1;pointer-events:auto}
body[data-page-family=facility] .mxmap.pmap-on .pmap-route{opacity:1;visibility:visible;transition:opacity .45s var(--mx-ease)}
body[data-page-family=facility] .mxmap.pmap-on iframe{visibility:hidden;transition:visibility 0s .45s}
@media (prefers-reduced-motion:reduce){body[data-page-family=facility] .mxmap :is(.pmap-canvas,.pmap-route){transition:none}}

/* the park: name plate above the outline, with a stem down to it */
.pmap-layer>*{position:absolute;white-space:nowrap}
.pmap-tag{transform:translate(calc(-100% - 22px),-50%);display:grid;gap:3px;padding:10px 14px 9px;border:0;border-left:3px solid var(--mx-orange,#ff7d01);background:var(--mx-navy,#001523);color:#fffdfc;text-align:left;cursor:pointer;
  box-shadow:0 10px 30px rgba(0,12,19,.35);transition:transform .16s ease-out}
.pmap-tag::after{content:"";position:absolute;left:100%;top:50%;width:22px;height:2px;background:var(--mx-orange,#ff7d01)}
.pmap-tag.is-right{transform:translate(calc(22px + var(--pmap-parcel-w,10px)),-50%)}
.pmap-tag.is-right::after{left:auto;right:100%}
.pmap-tag.is-below{transform:translate(-50%,var(--pmap-below,64px))}
.pmap-tag.is-below::after{left:50%;top:auto;bottom:100%;width:2px;height:12px}
.pmap-tag b{font:400 14px/1.1 var(--mx-display,Helvetica,Arial,sans-serif);letter-spacing:.08em;text-transform:uppercase}
.pmap-tag span{font:400 12px/1.2 var(--mx-body,Helvetica,Arial,sans-serif);color:rgba(255,253,252,.74)}
.pmap-tag:active{transform:translate(calc(-100% - 22px),-50%) scale(.97)}
.pmap-tag.is-right:active{transform:translate(calc(22px + var(--pmap-parcel-w,10px)),-50%) scale(.97)}
.pmap-tag.is-below:active{transform:translate(-50%,var(--pmap-below,64px)) scale(.97)}
.pmap-tag:focus-visible{outline:2px solid var(--mx-orange,#ff7d01);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.pmap-tag:hover span{color:var(--mx-orange,#ff7d01)}}

.pmap-gate{transform:translate(-50%,8px);padding:4px 8px;background:#fffdfc;color:var(--mx-navy,#001523);font:600 11px/1.2 var(--mx-body,Helvetica,Arial,sans-serif)}
.pmap-gate::before{content:"";position:absolute;left:50%;top:-8px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--mx-orange,#ff7d01);box-shadow:0 0 0 3px #fffdfc}
.pmap-ring{transform:translate(6px,-50%);padding:2px 7px;background:rgba(255,125,1,.92);color:var(--mx-deep,#000c13);font:400 11px/1.4 var(--mx-display,Helvetica,Arial,sans-serif);letter-spacing:.1em;text-transform:uppercase}

/* places: a dot on the spot, the name and the minutes beside it; folded to dot + minutes when crowded */
.pmap-poi{transform:translate(-11px,-50%);display:flex;align-items:center;gap:7px;padding:4px 9px 4px 4px;border-radius:999px;background:rgba(0,21,35,.9);color:#fffdfc;
  font:500 12px/1 var(--mx-body,Helvetica,Arial,sans-serif);box-shadow:0 4px 14px rgba(0,12,19,.3);outline:0}
.pmap-poi svg{width:14px;height:14px;padding:2px;border-radius:50%;background:var(--mx-orange,#ff7d01);fill:var(--mx-deep,#000c13);flex:none}
.pmap-poi[data-kind=highway] svg{background:#fffdfc}
.pmap-poi b{font-weight:600;color:var(--mx-orange,#ff7d01)}
.pmap-poi.is-folded{padding:3px;gap:0;cursor:pointer}
.pmap-poi.is-folded:not(:hover,:focus-visible,.is-open) :is(.pmap-poi-name,b){display:none}
.pmap-poi.is-folded:is(:hover,:focus-visible,.is-open){z-index:3;padding:4px 9px 4px 4px;gap:7px}
.pmap-poi.is-hidden{display:none}
.pmap-poi:focus-visible{box-shadow:0 0 0 2px var(--mx-orange,#ff7d01)}

/* how far is it from you? */
.pmap-route label{display:block;margin-bottom:8px;font:400 12px/1.2 var(--mx-display,Helvetica,Arial,sans-serif);letter-spacing:.12em;text-transform:uppercase;color:var(--mx-orange,#ff7d01)}
.pmap-route-row{display:flex;gap:8px}
.pmap-route input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid rgba(255,253,252,.28);border-radius:0;background:rgba(255,253,252,.06);color:#fffdfc;font:400 16px/1 var(--mx-body,Helvetica,Arial,sans-serif)}
.pmap-route input::placeholder{color:rgba(255,253,252,.55)}
.pmap-route input:focus-visible{outline:2px solid var(--mx-orange,#ff7d01);outline-offset:0}
.pmap-route button{min-height:44px;padding:0 18px;border:0;background:var(--mx-orange,#ff7d01);color:var(--mx-deep,#000c13);font:400 12px/1 var(--mx-display,Helvetica,Arial,sans-serif);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:transform .16s ease-out,background-color .2s ease}
.pmap-route button:active{transform:scale(.97)}
.pmap-route.is-busy button{opacity:.7;pointer-events:none}
.pmap-route-out{min-height:1.4em;margin:8px 0 0;font:400 13px/1.4 var(--mx-body,Helvetica,Arial,sans-serif);color:rgba(255,253,252,.8)}
.pmap-route-out:empty{display:none}
.pmap-route-out a{color:var(--mx-orange,#ff7d01);text-decoration:none;font-weight:600}
@media (hover:hover) and (pointer:fine){.pmap-route button:hover{background:#fffdfc}.pmap-route-out a:hover{text-decoration:underline}}

@media (max-width:640px){
  body[data-page-family=facility] .mxmap[data-park-map]{min-height:460px}
  .pmap-poi{font-size:11px}
  .pmap-tag{padding:8px 11px 7px}
  .pmap-tag b{font-size:12px}
}

/* The labels wait while the camera glides in (park-map.js glide), then fade in where they land. */
.mxmap .pmap-layer{transition:opacity .4s var(--mx-ease,ease-out),transform .4s var(--mx-ease,ease-out)}
.mxmap.pmap-gliding .pmap-layer{opacity:0;transform:translateY(6px);visibility:hidden;transition:none}