/* ═══════════════════════════════════════════════════════════════════
   Page chrome: the three fixed widgets the rest of the site carries.
   Markup: parts/chrome.php. Behaviour: chromeInit() in nsvs.js.

   Geometry is measured off the live pages, not re-invented:
   the dock and the arrow off /gbt, the video widget off the production
   home page. The colours are the layer's own tokens where the original
   used the theme's --main-color (#66cccc → --teal), exactly as the 2px
   brand scrollbar was ported.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Bottom action bar (phones only, like the original ≤900px) ────
   Was the theme's old dock: a red gradient, a mint gradient and two PNG
   icons, none of it from the brandbook. This is the bar the rest of the site
   got on 2026-08-25 (template-parts/footer-tail.php `.mact`), value for value
   in this layer's tokens: brand teal gradient on the primary action,
   teal-soft on the second, stroke icons from the sprite, one line of label,
   52px buttons (touch target well over the 44 minimum).

   It rides the smart header's own state instead of running a second scroll
   listener: `[data-nsvs-bar="off"]` is set by barHideInit() in nsvs.js, so the
   top and the bottom of the screen move together, and the bar stays put while
   the burger menu is open (that handler returns early on an open menu). */
.nchrome-dock{position:fixed;left:0;right:0;bottom:0;z-index:102;display:none;
  background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -18px rgba(15,40,42,.35);
  padding:10px 12px calc(14px + env(safe-area-inset-bottom,0px));
  transform:translateY(0);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
[data-nsvs-bar="off"] .nchrome-dock{transform:translateY(110%)}
.nchrome-dock__row{display:flex;gap:8px;width:100%}
.nchrome-dock__btn{flex:1 1 0;min-width:0;height:52px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:-.2px;line-height:1;
  border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,background .15s ease,box-shadow .15s ease}
.nchrome-dock__btn .n-ico{width:18px;height:18px;flex:0 0 18px}
.nchrome-dock__btn--book{flex:1.45 1 0;color:#fff;
  background:linear-gradient(135deg,var(--teal-deep),var(--teal-dark));
  box-shadow:0 12px 26px -14px rgba(34,120,127,.75)}
.nchrome-dock__btn--book:active{background:linear-gradient(135deg,var(--teal-abyss),var(--teal-deep));
  box-shadow:0 6px 14px -10px rgba(34,120,127,.75);transform:scale(.98)}
.nchrome-dock__btn--call{background:var(--teal-soft);color:var(--teal-deep)}
.nchrome-dock__btn--call:active{background:#D2F0F0;transform:scale(.98)}
.nchrome-dock__btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:900px){
  .nchrome-dock{display:block}
  /* The bar sits over the last rows of the page; reserve its height instead of
     letting it cover the footer. 10 + 52 + 14 = 76. The same height, declared
     once, is what the back-to-top button and the video widget below stand on:
     the bar is z-index 102 and covered both of them. */
  :root{--nchrome-dock-h:calc(76px + env(safe-area-inset-bottom,0px))}
  .nsvs-page{padding-bottom:var(--nchrome-dock-h)}
}
@media (max-width:360px){
  .nchrome-dock{padding:8px 10px calc(12px + env(safe-area-inset-bottom,0px))}
  .nchrome-dock__btn{height:48px;font-size:14px;gap:8px}
  .nchrome-dock__btn .n-ico{width:17px;height:17px;flex:0 0 17px}
  :root{--nchrome-dock-h:calc(68px + env(safe-area-inset-bottom,0px))}
}

/* ── 2. Back to top ───────────────────────────────────────────────── */
/* vw units, as on the rest of the site: the button scales with the viewport
   instead of stepping at a breakpoint. 1.5625vw / 3.3333vw are the live
   values; the phone block below is the site's own second set. */
.nchrome-top{position:fixed;right:1.5625vw;bottom:1.5625vw;z-index:50;
  width:3.3333vw;height:3.3333vw;min-width:34px;min-height:34px;border:0;border-radius:50%;
  background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,background-color .2s}
.nchrome-top.is-on{opacity:1;pointer-events:auto}
.nchrome-top:hover{background:var(--teal-dark)}
.nchrome-top svg{width:.8234vw;height:.4708vw;min-width:12px;min-height:7px}
@media (max-width:900px){
  /* 56px used to put the button behind the action bar. It starts 12px above
     the bar now, whatever height the bar has on this screen. */
  .nchrome-top{width:9.375vw;height:9.375vw;right:3.125vw;
    bottom:calc(var(--nchrome-dock-h,76px) + 12px)}
  .nchrome-top svg{width:3.125vw;height:1.7875vw}
}

/* ── 3. Video widget ──────────────────────────────────────────────── */
/* The wrapper slides in from below; the box inside it is what grows when the
   visitor opens the clip. Two states, `default` and `opened`, on the wrapper. */
.nchrome-video{position:fixed;left:0;bottom:-300px;z-index:100;transition:bottom .4s ease}
.nchrome-video.is-on{bottom:0}
.nchrome-video.is-off{display:none}
.nchrome-video__box{position:absolute;left:20px;bottom:50px;width:130px;height:180px;
  border:5px solid #fff;border-radius:20px;background:#eee;overflow:hidden;cursor:pointer;
  box-shadow:0 10px 20px rgba(0,0,0,.2);
  transition:width .3s ease-in-out,height .3s ease-in-out,transform .2s ease-in-out,border-color .2s ease-in-out}
.nchrome-video__box:hover{transform:scale(1.05) translate(5px,-5px);border-color:var(--teal)}
.nchrome-video__media{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;object-fit:cover}
.nchrome-video__close{position:absolute;top:6px;right:6px;width:20px;height:20px;z-index:250;
  border:0;background:transparent;padding:0;cursor:pointer;opacity:0;transition:opacity .2s ease-in-out}
.nchrome-video__box:hover .nchrome-video__close,
.nchrome-video[data-state="opened"] .nchrome-video__close{opacity:.5}
/* No hover on a touch screen, so the dismiss button stays visible there:
   the original does the same below 1023px. */
@media (pointer:coarse){ .nchrome-video__close{opacity:.5} }
.nchrome-video__close:hover{opacity:1}
.nchrome-video__close::before,.nchrome-video__close::after{content:'';position:absolute;left:9px;top:1px;
  width:2px;height:18px;background:#fff;box-shadow:1px 1px 10px rgba(0,0,0,.5)}
.nchrome-video__close::before{transform:rotate(45deg)}
.nchrome-video__close::after{transform:rotate(-45deg)}
/* opened: the crossed lines become one bar, the original's «collapse» glyph */
.nchrome-video[data-state="opened"] .nchrome-video__close::before{display:none}
.nchrome-video[data-state="opened"] .nchrome-video__close::after{transform:rotate(90deg)}
.nchrome-video__cta{position:absolute;left:20px;right:20px;bottom:20px;height:65px;z-index:300;
  border:0;border-radius:12px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  background:var(--teal-deep);color:#fff;box-shadow:0 8px 13px rgba(0,0,0,.35),inset 0 -4px 1px #1C666C;
  opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,background-color .2s ease-in-out}
.nchrome-video[data-state="opened"] .nchrome-video__box{width:280px;height:500px;border-color:var(--teal)}
.nchrome-video[data-state="opened"] .nchrome-video__box:hover{transform:none}
.nchrome-video[data-state="opened"] .nchrome-video__cta{opacity:1;visibility:visible}
.nchrome-video__cta:hover{background:var(--teal-dark)}
@media (max-width:900px){
  /* 15vw is 58px on a 390px screen: the bottom half of the widget sat behind
     the action bar. Same 12px clearance as the arrow. */
  .nchrome-video__box{left:15px;bottom:calc(var(--nchrome-dock-h,76px) + 12px);
    width:90px;height:125px;border-width:4px}
  .nchrome-video__box:hover{transform:none}
  .nchrome-video[data-state="opened"] .nchrome-video__box{width:min(240px,calc(100vw - 40px));height:420px}
  .nchrome-video__cta{left:14px;right:14px;bottom:14px;height:54px;font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .nchrome-video,.nchrome-video__box,.nchrome-top,.nchrome-dock{transition:none}
  .nchrome-video__box:hover{transform:none}
  .nchrome-dock__btn:active{transform:none}
}

/* Printing a page should not print its floating furniture. */
@media print{
  .nchrome-dock,.nchrome-top,.nchrome-video{display:none}
}