/* Footer effects and the bottom dock (parts/footer.html, parts/dock.html); behaviour in assets/js/global/footer.js.
   - .foot-prox on a heading: its letters thin out near the mouse (variable font weight).
   - .foot-velocity on a Group › Marquee: the strip speeds up and leans while the page scrolls.
   - .foot-dock: quick contact icons (magnify under the mouse on wide screens; a labelled bar fixed to the bottom on
     phones) and a back-to-top button whose ring fills with the reading progress. Both appear after some scrolling. */

/* ---------- proximity heading ---------- */
.foot-prox{--foot-prox-dur:120ms;--foot-prox-w:800}
.foot-prox .foot__wd{display:inline-block;white-space:nowrap}
.foot-prox .foot__ch{display:inline-block;font-variation-settings:"wght" var(--foot-prox-w);transition:font-variation-settings var(--foot-prox-dur) linear}

/* ---------- velocity marquee: footer.js sets --foot-skew from the scroll speed ---------- */
.foot-velocity{--foot-skew:0deg}
.foot-velocity .dn-marquee__track > *{transform:skewX(var(--foot-skew))}

/* ---------- dock + back-to-top ring ---------- */
.foot-dock{
  --foot-dock-z:60; /* above the header bar (40), below the open card menu (66) and dialogs */
  --foot-dock-p:0;
  --foot-dock-s:1;
  --foot-dock-dur:160ms;
  --foot-dock-shift:14px;
  --foot-dock-ring:calc(var(--ctl) + var(--s-2));
  --foot-dock-ring-w:3px;
  --foot-dock-edge:var(--s-5);
  --foot-dock-bar-h:calc(var(--ctl-s) + var(--s-2) * 2 + 2px);
  --foot-dock-shadow:0 14px 36px var(--shadow);
  display:contents;
}
/* the dock and ring are fixed: their wrappers (this group, the template-part block around it) take no room wherever the part is placed */
.wp-block-template-part:has(> .foot-dock){display:contents}
/* back to top moves keyboard focus to the page wrapper (footer.js), which needs no focus ring of its own */
.wp-site-blocks[tabindex="-1"]:focus{outline:0}
.foot-dock__bar,.foot-dock__top{position:fixed;bottom:calc(var(--foot-dock-edge) + env(safe-area-inset-bottom));z-index:var(--foot-dock-z);margin:0;
  transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out),visibility var(--dur-m) step-start}
/* hidden near the top of the page (only when the script can show them again) */
.js .foot-dock:not(.is-on) :is(.foot-dock__bar,.foot-dock__top),
body:has(.hm-templates__tray.is-on) .foot-dock__bar{visibility:hidden;opacity:0;transform:translateY(var(--s-4));pointer-events:none;
  transition:opacity var(--dur-m) var(--ease-out),transform var(--dur-m) var(--ease-out),visibility var(--dur-m) step-end}

.foot-dock__bar{left:var(--foot-dock-edge);padding:var(--s-2);border:1px solid var(--rule);border-radius:var(--r-card);background:var(--nav-glass);-webkit-backdrop-filter:blur(var(--s-4));backdrop-filter:blur(var(--s-4));box-shadow:var(--foot-dock-shadow)}
.foot-dock__items{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:var(--s-2);margin:0}
.foot-dock__item{position:relative;margin:0 calc((var(--foot-dock-s) - 1) * var(--foot-dock-shift));transform:scale(var(--foot-dock-s));transform-origin:bottom center;
  transition:transform var(--foot-dock-dur) var(--ease-out),margin var(--foot-dock-dur) var(--ease-out)}
.foot-dock__item > .wp-block-button__link{position:relative;min-width:var(--ctl);min-height:var(--ctl);padding:0 var(--s-3);border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--card);color:var(--ink);font:600 var(--t-s)/1 var(--font-body);box-shadow:none}
/* .foot-dock in front: base.css sets the ic-* icon size with a longer selector */
.foot-dock .foot-dock__item > .wp-block-button__link::before{width:var(--icon-m);height:var(--icon-m)}
.foot-dock__item > .wp-block-button__link:is(:hover,:focus-visible){background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);transform:none;box-shadow:none}
.foot-dock__item > .wp-block-button__link:active{transform:none;box-shadow:none}

/* back to top: round button, ring = conic fill masked to a thin circle */
.foot-dock__top{right:var(--foot-dock-edge)}
/* its text stays the accessible name but takes no room in the circle (font-size 0, no gap), with or without the script */
.foot-dock__top .wp-block-button__link{position:relative;gap:0;width:var(--foot-dock-ring);min-height:0;height:var(--foot-dock-ring);padding:0;border:0;font-size:0;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:var(--foot-dock-shadow)}
.foot-dock__top .wp-block-button__link::before{content:"";width:var(--icon-m);height:var(--icon-m);background:currentColor;-webkit-mask:url(../../../icons/up.svg) center / contain no-repeat;mask:url(../../../icons/up.svg) center / contain no-repeat;transition:transform var(--dur) var(--ease-press)}
.foot-dock__top .wp-block-button__link::after{content:"";position:absolute;inset:0;padding:var(--foot-dock-ring-w);border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--accent-fill) calc(var(--foot-dock-p) * 1turn), var(--rule) 0);
  -webkit-mask:linear-gradient(currentColor 0 0) content-box,linear-gradient(currentColor 0 0);-webkit-mask-composite:xor;mask:linear-gradient(currentColor 0 0) content-box exclude,linear-gradient(currentColor 0 0)}
.foot-dock__top .wp-block-button__link:is(:hover,:focus-visible),.foot-dock__top .wp-block-button__link:active{transform:none;box-shadow:var(--foot-dock-shadow)}
.foot-dock__top .wp-block-button__link:is(:hover,:focus-visible)::before{transform:translateY(calc(var(--s-1) * -1))}
/* while the picked-templates tray is up, the ring sits just above it */
body:has(.hm-templates__tray.is-on) .foot-dock__top{bottom:calc(var(--s-4) + env(safe-area-inset-bottom) + var(--ctl) + var(--s-2) * 2 + var(--s-3))}

/* the label (wrapped by footer.js) is the accessible name; on wide screens with a mouse it shows as a tooltip on hover
   or focus. Touch screens and pages without the script keep the text inside the button (icon + text). */
.foot-dock__lbl{white-space:nowrap}
@media (min-width: 768px) and (hover: hover){
  .foot-dock .wp-block-button__link:has(.foot-dock__lbl){padding:0}
  .foot-dock__item > .wp-block-button__link:has(.foot-dock__lbl){width:var(--ctl)}
  .foot-dock__lbl{position:absolute;bottom:calc(100% + var(--s-2));left:50%;padding:var(--s-1) var(--s-2);border-radius:var(--r);background:var(--ink);color:var(--paper);font:500 var(--t-2xs)/1.4 var(--font-body);opacity:0;pointer-events:none;transform:translate(-50%, var(--s-1));
    transition:opacity var(--dur) var(--ease-press),transform var(--dur) var(--ease-press)}
  .foot-dock__top .foot-dock__lbl{left:auto;right:0;transform:translateY(var(--s-1))}
  .foot-dock .wp-block-button__link:is(:hover,:focus-visible) .foot-dock__lbl{opacity:1;transform:translate(-50%, 0)}
  .foot-dock__top .wp-block-button__link:is(:hover,:focus-visible) .foot-dock__lbl{transform:none}
}

/* phones: a labelled contact bar across the bottom; email is left for the footer; booking fills the rest */
@media (max-width: 767px){
  .foot-dock{--foot-dock-edge:var(--s-3)}
  .foot-dock__bar{right:var(--foot-dock-edge)}
  .foot-dock__items{align-items:stretch}
  .foot-dock__item{margin:0;transform:none}
  .foot-dock__item > .wp-block-button__link{min-height:var(--ctl-s)}
  .foot-dock .foot-dock__mail{display:none} /* beats core .wp-block-buttons > .wp-block-button{display:inline-block} */
  .foot-dock__item{min-width:0}
  .foot-dock__book{flex:1 1 auto}
  .foot-dock__book > .wp-block-button__link{width:100%;background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
  .foot-dock__top{bottom:calc(var(--foot-dock-edge) * 2 + var(--foot-dock-bar-h) + env(safe-area-inset-bottom))}
  /* room at the end of the page, so the bar never covers the last line of the footer; toasts sit above the bar */
  body:has(.foot-dock__bar){padding-bottom:calc(var(--s-3) * 2 + var(--ctl-s) + var(--s-2) * 2 + env(safe-area-inset-bottom))}
  body:has(.foot-dock.is-on) .dg-toasts{bottom:calc(var(--s-3) * 2 + var(--ctl-s) + var(--s-2) * 2 + var(--s-3) + env(safe-area-inset-bottom))}
}
/* the narrowest phones: Zalo and call keep only their icon (the label stays for screen readers), booking keeps its words */
@media (max-width: 374px){
  .foot-dock__item:not(.foot-dock__book) > .wp-block-button__link{width:var(--ctl-s);min-width:var(--ctl-s);padding:0}
  .foot-dock__item:not(.foot-dock__book) .foot-dock__lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ds-ok: standard visually-hidden pattern */
}

@media (prefers-reduced-motion: reduce){
  .foot-prox .foot__ch,.foot-dock__item,.foot-dock__bar,.foot-dock__top,.foot-dock__lbl,.foot-dock__top .wp-block-button__link::before{transition:none}
  .foot-velocity .dn-marquee__track > *{transform:none}
}