/* Amend 6, W7: real links laid over the buttons drawn into posters
   (includes/amend6/a6-w7-hotspots.php). The wrapper is exactly the size of
   the picture, so the boxes, in percent, stay on the drawn buttons. */
.gft-hs { position: relative; display: inline-block; max-width: 100%; line-height: 0; vertical-align: middle; }
.gft-hs.gft-hs-block { display: block; width: 100%; }
.gft-hs-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.gft-hs-spot { position: absolute; display: block; box-sizing: border-box; pointer-events: auto; cursor: pointer; border-radius: 6px; background: rgba(255, 255, 255, 0); text-decoration: none; -webkit-tap-highlight-color: rgba(168, 128, 45, .25); transition: box-shadow .2s ease, background-color .2s ease; }
.gft-hs-spot:hover { box-shadow: 0 0 0 2px rgba(168, 128, 45, .65); background: rgba(255, 255, 255, .08); }
.gft-hs .gft-hs-layer a.gft-hs-spot:focus { outline: none; }
/* the theme draws a thin dotted ring on focused links; here the ring is gold, thick and has a white halo so it shows on dark and light artwork */
.gft-hs .gft-hs-layer a.gft-hs-spot:focus-visible { outline: 3px solid #8A6A1F !important; outline-offset: 2px; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 6px rgba(138, 106, 31, .35); background: rgba(255, 255, 255, .10); }
.gft-hs-t { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (hover: none) { .gft-hs-spot:hover { box-shadow: none; background: transparent; } }

/* posters whose own CSS lifts the picture 4px on hover: the links lift with it */
.gft-hs-lift .gft-hs-layer { transition: transform .35s ease; }
.elementor-widget:hover .gft-hs-lift .gft-hs-layer { transform: translateY(-4px); }

/* a fading slider keeps every slide stacked in the same place: only the slide
   on show may take a click, or a hidden slide's links would catch it
   (this also covers the links amend5/w3.js lays over the Gold Bars slide) */
.swiper-fade .swiper-slide:not(.swiper-slide-active) .gft-hs-spot,
.swiper-fade .swiper-slide:not(.swiper-slide-active) .gft-w3-spot { pointer-events: none; }

/* a small painted button gets a bigger place to tap: the script works out how
   far each link may reach past its button without touching a neighbour
   (at least 24px, 40px on a phone where there is room) and the invisible
   ::after takes the tap. Older poster links (amend5/w3.js, cad-grillz-posters,
   w1-nav, the directory) are covered as well. */
.gft-hs-spot::after,
.gft-poster-spot::after,
.gft-w3-spot::after { content: ''; position: absolute; left: calc(-1 * var(--gft-hs-l, 0px)); right: calc(-1 * var(--gft-hs-r, 0px)); top: calc(-1 * var(--gft-hs-t, 0px)); bottom: calc(-1 * var(--gft-hs-b, 0px)); }