/* Big Powderhorn Mountain — 3D trail map (WordPress plugin build)
 *
 * Every rule lives under .bpm-trailmap. Nothing is set on html, body or any
 * bare element, so the plugin cannot reach into the theme and the theme's own
 * resets cannot quietly undo the map chrome.
 *
 * Brand tokens are the estate's, verified against bigpowderhornlodging.com:
 * Archivo 500 headings at −0.02em, Noto Sans body, brown #371f1d on cream
 * #fff1e9, red #a63234 pills at 50px with uppercase 0.8px tracking. They are
 * declared on the container rather than :root so they do not leak into a page
 * that already defines its own.
 *
 * Sizing is fluid rather than stepped — clamp() on type, gutters, the wordmark
 * and the compass — so the map does not snap between breakpoints. The measures
 * follow the CONTAINER, not the viewport, wherever a container query is
 * available, because an embedded map may be narrow on a wide screen.
 */

.bpm-trailmap{
  /* ---- estate brand tokens ---- */
  --bpm-brown:#371f1d;            /* ink */
  --bpm-cream:#fff1e9;            /* ground, and the 3D background */
  --bpm-red:#a63234;              /* buttons, CTAs, the compass needle */
  --bpm-edge:rgb(55 31 29 / .2);
  --bpm-edge-soft:rgb(55 31 29 / .11);
  --bpm-dim:rgb(55 31 29 / .62);

  --bpm-ink:var(--bpm-brown);
  --bpm-panel:rgb(255 241 233 / .93);
  --bpm-shadow:0 8px 26px rgb(55 31 29 / .16);

  --bpm-display:"Archivo",ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --bpm-sans:"Noto Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --bpm-gut:clamp(12px, 2.6cqw, 24px);
  --bpm-logo:clamp(116px, 17cqw, 178px);
  --bpm-compass:clamp(44px, 8cqw, 60px);
  --bpm-tap:44px;

  /* the embed box. --bpm-height is written inline by the shortcode. */
  position:relative;
  container-type:inline-size;
  height:var(--bpm-height, clamp(420px, 72vh, 860px));
  margin-block:clamp(16px, 3vw, 32px);
  border-radius:var(--bpm-radius, 24px);
  overflow:hidden;
  background:var(--bpm-cream);
  color:var(--bpm-ink);
  font-family:var(--bpm-sans);
  font-size:16px;
  line-height:1.55;
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
}

/* a browser without container queries still gets sensible sizes */
@supports not (container-type: inline-size){
  .bpm-trailmap{
    --bpm-gut:clamp(12px, 2.6vw, 24px);
    --bpm-logo:clamp(116px, 15vw, 178px);
    --bpm-compass:clamp(44px, 7vw, 60px);
  }
}

.bpm-trailmap *,
.bpm-trailmap *::before,
.bpm-trailmap *::after{box-sizing:border-box}

.bpm-trailmap [hidden]{display:none !important}

.bpm-trailmap button{
  cursor:pointer;border:0;background:none;
  font:inherit;color:inherit;margin:0;
}
.bpm-trailmap input{font:inherit;color:inherit}
.bpm-trailmap :focus-visible{
  outline:3px solid var(--bpm-red);outline-offset:3px;border-radius:4px;
}

/* full-bleed variant, for a page template that hands the map the viewport */
.bpm-trailmap.bpm-fullscreen{
  height:100dvh;margin:0;border-radius:0;
}

/* ---------------------------------------------------------------- stage */
.bpm-stage{position:absolute;inset:0}

.bpm-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:none;cursor:grab;
  /* the theme may have set a max-width on media; the canvas is not media */
  max-width:none;
}
.bpm-canvas:active{cursor:grabbing}

.bpm-loading{
  position:absolute;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;gap:11px;
  padding:var(--bpm-gut);
  background:var(--bpm-cream);color:var(--bpm-dim);
  font-size:clamp(11.5px, 1.2cqw, 13px);
  text-align:center;
  transition:opacity .45s ease;
}
.bpm-loading.bpm-done{opacity:0;pointer-events:none}
.bpm-loading--failed{opacity:1;color:var(--bpm-red);pointer-events:auto}
.bpm-loading--failed p{margin:0;max-width:34em}
.bpm-loading--failed a{color:inherit}

.bpm-spinner{
  width:17px;height:17px;border-radius:50%;flex:none;
  border:2px solid rgb(55 31 29 / .16);border-top-color:var(--bpm-red);
  animation:bpm-spin .8s linear infinite;
}
@keyframes bpm-spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------- wordmark */
/* The estate nav is the theme's job on a WordPress page, so only the wordmark
   survives from the standalone header. It floats over the artwork rather than
   sitting in a bar, which would duplicate the site header two rows up. */
.bpm-brand{
  position:absolute;z-index:22;
  inset-block-start:var(--bpm-gut);
  inset-inline-start:var(--bpm-gut);
  display:block;line-height:0;
  padding:9px 14px;
  background:rgb(255 241 233 / .88);
  border:1px solid var(--bpm-edge-soft);
  border-radius:50px;
  backdrop-filter:blur(8px);
  box-shadow:var(--bpm-shadow);
  transition:opacity .15s ease;
}
.bpm-brand:hover{opacity:.82}
.bpm-brand img{
  width:var(--bpm-logo);height:auto;display:block;max-width:100%;
  border-radius:0;box-shadow:none;
}

/* ---------------------------------------------------------------- compass */
.bpm-compass{
  position:absolute;z-index:20;
  inset-block-start:var(--bpm-gut);
  inset-inline-end:var(--bpm-gut);
  width:var(--bpm-compass);aspect-ratio:1;
  pointer-events:none;
  filter:drop-shadow(0 4px 14px rgb(55 31 29 / .16));
}
.bpm-compass svg{width:100%;height:100%;display:block}
.bpm-compass .bpm-dial{fill:rgb(255 241 233 / .94);stroke:var(--bpm-edge);stroke-width:2}
.bpm-compass .bpm-ticks line{stroke:rgb(55 31 29 / .34);stroke-width:3;stroke-linecap:round}
.bpm-compass .bpm-north{fill:var(--bpm-red)}
.bpm-compass .bpm-south{fill:rgb(55 31 29 / .34)}
.bpm-compass .bpm-hub{fill:var(--bpm-cream);stroke:rgb(55 31 29 / .4);stroke-width:1.6}
.bpm-compass .bpm-n{
  fill:var(--bpm-red);
  font:600 16px/1 var(--bpm-display);
  text-anchor:middle;letter-spacing:.01em;
}
.bpm-rose{transform-origin:50px 50px;transition:transform .12s linear}

/* ---------------------------------------------------------------- controls */
.bpm-controls{
  position:absolute;z-index:20;
  inset-block-end:var(--bpm-gut);
  inset-inline:0;margin-inline:auto;
  width:max-content;max-width:calc(100% - var(--bpm-gut) * 2);
  display:flex;align-items:center;gap:clamp(6px, 1.2cqw, 10px);
  padding:7px 9px 7px clamp(13px, 2cqw, 18px);
  background:var(--bpm-panel);border:1px solid var(--bpm-edge);border-radius:50px;
  backdrop-filter:blur(12px);box-shadow:var(--bpm-shadow);
}

/* the estate button: 50px pill, uppercase, 0.8px tracking — sized for map
   chrome rather than a page CTA. Used on a <button> and an <a>, so it resets
   link styling too. */
.bpm-trailmap .bpm-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:none;
  min-height:34px;padding:8px clamp(12px, 1.8cqw, 18px);
  background:var(--bpm-cream);border:1px solid var(--bpm-edge);border-radius:50px;
  font-family:var(--bpm-sans);
  font-size:clamp(10.5px, 1cqw, 11.5px);
  font-weight:600;text-transform:uppercase;letter-spacing:.8px;
  color:var(--bpm-ink);white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.bpm-trailmap .bpm-ghost:hover{border-color:var(--bpm-red);color:var(--bpm-red);background:var(--bpm-cream)}
.bpm-trailmap .bpm-ghost[aria-pressed="true"],
.bpm-trailmap .bpm-ghost.bpm-on{
  background:var(--bpm-red);border-color:var(--bpm-red);color:var(--bpm-cream);
}

.bpm-slider{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(10.5px, 1cqw, 11.5px);
  font-weight:600;text-transform:uppercase;letter-spacing:.8px;
  color:var(--bpm-dim);
}
.bpm-trailmap .bpm-slider input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:clamp(62px, 11cqw, 92px);height:3px;padding:0;margin:0;
  background:rgb(55 31 29 / .24);border:0;border-radius:2px;outline:none;
}
.bpm-trailmap .bpm-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--bpm-red);border:0;cursor:pointer;
}
.bpm-trailmap .bpm-slider input[type="range"]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;
  background:var(--bpm-red);border:0;cursor:pointer;
}

/* the hint sits over the artwork, which is light snow in places and dark forest
   in others, so it carries its own ground rather than trusting the map */
.bpm-hint,
.bpm-scrollnote{
  position:absolute;z-index:15;inset-inline:0;margin:0 auto;
  width:max-content;max-width:calc(100% - var(--bpm-gut) * 2);
  padding:6px 15px;border-radius:50px;
  background:rgb(255 241 233 / .88);border:1px solid var(--bpm-edge-soft);
  backdrop-filter:blur(8px);
  font-size:clamp(10.5px, 1cqw, 11.5px);color:var(--bpm-dim);
  text-align:center;pointer-events:none;
  transition:opacity .35s ease;
}
.bpm-hint{inset-block-end:calc(var(--bpm-gut) + 66px)}
.bpm-hint.bpm-gone{opacity:0}

/* shown only when a visitor scrolls the page over a map they have not used */
.bpm-scrollnote{
  inset-block-start:50%;transform:translateY(-50%);
  opacity:0;
  padding:10px 20px;
  background:rgb(255 241 233 / .95);border-color:var(--bpm-edge);
  box-shadow:var(--bpm-shadow);
  color:var(--bpm-ink);font-weight:600;letter-spacing:.4px;
}
.bpm-scrollnote.bpm-shown{opacity:1}

/* ------------------------------------------------------- the written list */
/* Present in the document and in the accessibility tree, but never painted:
   this is the page's text equivalent of the canvas, for search engines, screen
   readers and language models. Clipped rather than display:none, so it stays in
   the accessibility tree and the skip link still reaches it. */
.bpm-trails{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:normal;
}
/* shown when the 3D map could not start, so the page is never empty */
.bpm-trails.bpm-trails--shown{
  position:relative;
  width:auto;height:auto;margin:0;
  overflow:visible;clip-path:none;
  padding:var(--bpm-gut);
  background:var(--bpm-cream);
  z-index:60;
}
.bpm-trails a{color:inherit}

/* ----------------------------------------------------- narrow containers */
/* Each control label ships in two lengths and exactly one is ever shown, so no
   text node sits next to another inside a flex button. The default has to be
   declared BEFORE the container rule that overrides it — at equal specificity
   the later declaration wins, and a short label that loses leaves an empty
   button. */
.bpm-narrow{display:none}

@container (max-width: 620px){
  .bpm-hint{display:none}
  .bpm-controls{inset-inline:var(--bpm-gut);width:auto;justify-content:center}
  .bpm-wide{display:none}
  .bpm-narrow{display:inline}
  .bpm-brand{padding:7px 11px}
}

@supports not (container-type: inline-size){
  @media (max-width:620px){
    .bpm-hint{display:none}
    .bpm-controls{inset-inline:var(--bpm-gut);width:auto;justify-content:center}
    .bpm-wide{display:none}
    .bpm-narrow{display:inline}
  }
}

/* a mouse can hover; a finger cannot, so give touch bigger targets */
@media (hover:none){
  .bpm-trailmap .bpm-ghost{min-height:var(--bpm-tap);padding-inline:16px}
  .bpm-trailmap .bpm-slider input[type="range"]{height:6px}
}

/* a short embed has no room for chrome stacked three deep */
@container (max-height: 460px){
  .bpm-hint{display:none}
  .bpm-trailmap{--bpm-compass:42px}
}

@media (prefers-reduced-motion:reduce){
  .bpm-trailmap *,
  .bpm-trailmap *::before,
  .bpm-trailmap *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ------------------------------------------------------- the block editor */
/* The block shows a still rather than a live canvas, so an editor session does
   not spend a GPU context on something with no content to arrange. */
.bpm-block-preview{position:absolute;inset:0}
.bpm-block-preview__label{
  position:absolute;inset-block-end:14px;inset-inline:0;margin-inline:auto;
  width:max-content;max-width:calc(100% - 28px);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 18px;border-radius:50px;
  background:rgb(255 241 233 / .94);border:1px solid rgb(55 31 29 / .2);
  box-shadow:0 8px 26px rgb(55 31 29 / .16);
  color:#371f1d;text-align:center;
  font-family:"Noto Sans",ui-sans-serif,system-ui,sans-serif;
}
.bpm-block-preview__label strong{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;
}
.bpm-block-preview__label span{font-size:11px;color:rgb(55 31 29 / .62)}

/* A printed page of the map is a blank rectangle — a WebGL canvas does not
   print. The run list prints instead, which is worth having on paper. */
@media print{
  .bpm-trailmap{height:auto;border:0;margin:0;overflow:visible}
  .bpm-stage,.bpm-brand{display:none !important}
  .bpm-trails{
    position:static;width:auto;height:auto;margin:0;padding:0;
    overflow:visible;clip-path:none;
  }
  .bpm-trails h2{font-family:var(--bpm-display);font-weight:500;font-size:19pt;margin:0 0 4px}
  .bpm-trails h3{margin:0 0 3pt;font-size:8pt;letter-spacing:.09em;text-transform:uppercase}
  .bpm-trails section{margin-block:11pt}
  .bpm-trails table{border-collapse:collapse;width:100%}
  .bpm-trails th,.bpm-trails td{
    text-align:left;padding:3pt 8pt;border-bottom:.5pt solid #999;vertical-align:top;
  }
  .bpm-trails caption{position:absolute;clip-path:inset(50%)}
  .bpm-trails .bpm-links{display:none}
}