/* Adjust these variables per site. Keep clear of existing controls. */
.forest-signature{--signature-colour:#a2c9af;--signature-size:230px;--signature-bottom:72px;position:fixed;left:16px;bottom:var(--signature-bottom);width:var(--signature-size);z-index:5;color:var(--signature-colour)}
.forest-signature button,.forest-signature a{-webkit-tap-highlight-color:transparent}
.forest-toggle{display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--signature-colour) 40%,transparent))}
.forest-toggle img{display:block;width:100%;height:auto}.forest-toggle:focus-visible,.forest-links a:focus-visible{outline:2px solid var(--signature-colour);outline-offset:5px;border-radius:8px}
.forest-links{position:absolute;right:10px;bottom:calc(58% + 5px);display:flex;gap:8px}.forest-links[hidden]{display:none}
.forest-links a{display:grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:7px;color:inherit;background:#080e0be6;box-shadow:0 0 9px color-mix(in srgb,currentColor 18%,transparent);transition:none}
.forest-links svg{width:18px;height:18px}

@media(max-width:600px){.forest-signature{--signature-size:170px;left:10px}.forest-links a{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.forest-links a{transition:none}}

/* Match PSYOP lettering without altering the approved frog artwork. */
.forest-toggle{position:relative;touch-action:manipulation}
.forest-toggle::after{content:"";position:absolute;inset:0;background:var(--signature-colour);mask:url("signature.png") center/contain no-repeat;-webkit-mask:url("signature.png") center/contain no-repeat;clip-path:inset(0 0 0 35%);pointer-events:none}

.forest-links svg{fill:currentColor;stroke:none}
@media(max-width:760px){.forest-signature{--signature-size:180px}}

/* Shared, immediate glow for the contact artwork and social buttons. */
.forest-signature{
 --forest-rest-glow:drop-shadow(0 0 3px color-mix(in srgb,var(--signature-colour) 30%,transparent));
 --forest-hover-glow:drop-shadow(0 0 3px color-mix(in srgb,var(--signature-colour) 95%,transparent)) drop-shadow(0 0 9px color-mix(in srgb,var(--signature-colour) 70%,transparent));
}
.forest-toggle,.forest-links a{
 filter:var(--forest-rest-glow);
 transition:none;
}
.forest-links a{box-shadow:none;transform:none;touch-action:manipulation}
.forest-toggle:hover,.forest-toggle:focus-visible,
.forest-links a:hover,.forest-links a:focus-visible{
 filter:var(--forest-hover-glow);
 transition:none;
}

/* Compact social boxes, layered above the artwork's transparent hit area. */
.forest-links{z-index:2;bottom:calc(65% + 5px);gap:7px}
.forest-links a{box-sizing:border-box;width:28px;height:28px;padding:0}
.forest-links svg{width:17px;height:17px;pointer-events:none}
.forest-toggle{z-index:1}
/* Keep the glow unclipped; the higher social layer owns its click targets. */
.forest-toggle{overflow:visible}
@media(max-width:760px){.forest-links{gap:8px}.forest-links a{width:44px;height:44px}}

/* Aim the original hand-drawn arrow upward; preserve the source artwork. */
.forest-toggle img{clip-path:inset(0 15% 0 0)}
.forest-toggle::after{clip-path:inset(0 15% 0 35%)}
.forest-toggle::before{content:"";position:absolute;inset:0;background:var(--signature-colour);mask:url("signature.png") center/contain no-repeat;-webkit-mask:url("signature.png") center/contain no-repeat;clip-path:inset(0 0 0 85%);transform:rotate(-45deg);transform-origin:89.3% 56.3%;pointer-events:none}

/* Default edge placement compensates for transparent padding in the original PNG. */
.forest-signature{left:calc(env(safe-area-inset-left,0px) - var(--signature-size)*0.1064);bottom:calc(env(safe-area-inset-bottom,0px) - var(--signature-size)*0.129/3.00293)}

/* Site palette and clearance; approved artwork and interaction preserved. */
body .forest-signature{--signature-colour:#a7d8ff}
.forest-signature .forest-toggle{box-shadow:none;border:0;border-radius:0;min-width:0;min-height:0;height:auto;background:transparent;padding:0}
.forest-signature .forest-links a{text-decoration:none;min-width:0;min-height:0;box-shadow:none}
body:has(#desktop:not([hidden])) .forest-signature{bottom:calc(36px - var(--signature-size)*0.129/3.00293);z-index:950}
body:has(#start-menu:not([hidden])) .forest-signature{visibility:hidden;pointer-events:none}
.office-bottom>span{margin-left:210px}
@media(max-width:600px){.office-bottom>span{margin-left:0;transform:translateY(-88px)}}

/* Isolate the transparent toggle from XP's native hover bevel. */
body .forest-signature button.forest-toggle:hover,body .forest-signature button.forest-toggle:active,body .forest-signature button.forest-toggle:focus{box-shadow:none!important;background:transparent}
