/* ============================================================
   GTC Cranex — additions for the dynamic build only.
   Small, additive rules for pieces that don't exist in the
   static source: hotspot tooltips for standalone figures, and
   making the ACF-driven technical drawing fill its stage so the
   percentage coordinates from the picker map 1:1.
   Uses the design tokens defined in both site.css and home.css.
   ============================================================ */

/* Dynamic technical drawing: image fills the stage (contain), so a hotspot
   at x%/y% sits where the editor placed it in the admin picker. */
.tsheet--dyn .tsheet__img,
.gtc-hotspot-figure .tsheet__img {
	position: absolute;
	inset: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.gtc-hotspot-figure {
	position: relative;
	width: 100%;
}

/* Standalone hotspot tooltip (when a dot isn't paired with a spec table). */
.tsdot__tip {
	position: absolute;
	bottom: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	min-width: max-content;
	max-width: 220px;
	padding: 9px 12px;
	background: var(--ink, #141922);
	color: #fff;
	border-radius: 9px;
	font-size: 12px;
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	pointer-events: none;
	z-index: 6;
	box-shadow: 0 12px 30px -8px rgba(10, 16, 26, .5);
}
.tsdot__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--ink, #141922);
}
.tsdot:hover .tsdot__tip,
.tsdot:focus .tsdot__tip,
.tsdot:focus-within .tsdot__tip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.tsdot__k { display: block; color: rgba(255, 255, 255, .68); font-size: 11px; font-weight: 400; }
.tsdot__v { display: block; font-weight: 700; }

/* Language switcher: when TranslatePress supplies real URLs, options are <a>. */
.langsel__menu a.langsel__opt { text-decoration: none; }

/* WordPress alignment/caption safety inside article bodies. */
.artbody img { height: auto; }
.artbody .wp-caption-text,
.artbody figcaption { font-size: clamp(11px, .82vw, 13px); color: rgba(20, 25, 34, .6); margin-top: 8px; }

/* ---- Mobile menu drawer (theme enhancement; the source burger had no JS) ---- */
@media (max-width: 960px) {
	.gtc-nav-open { overflow: hidden; }
	.gtc-nav-open .nav__menu {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		position: fixed;
		inset: 0;
		z-index: 1200;
		padding: 96px clamp(22px, 7vw, 44px) 48px;
		background: rgba(16, 22, 31, .97);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		overflow-y: auto;
	}
	.gtc-nav-open .nav__menu a {
		color: #fff !important;
		font-size: clamp(20px, 6vw, 28px);
		font-weight: 700;
		padding: 12px 0;
		opacity: 1;
	}
	.gtc-nav-open .nav__menu a.is-current::before { background: var(--yellow, #F5B21B); }
	.gtc-nav-open .nav__burger {
		display: grid;
		position: fixed;
		top: clamp(20px, 4vw, 30px);
		right: clamp(16px, 4vw, 26px);
		z-index: 1300;
		border-color: rgba(255, 255, 255, .7);
	}
	.gtc-nav-open .nav__burger span { background: transparent; box-shadow: none; position: relative; }
	.gtc-nav-open .nav__burger span::before,
	.gtc-nav-open .nav__burger span::after { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 2px; background: #fff; }
	.gtc-nav-open .nav__burger span::before { transform: rotate(45deg); }
	.gtc-nav-open .nav__burger span::after { transform: rotate(-45deg); }
}