/* Shared, scoped controls; keep the sites' cream/ink palette and square edges. */
.contact-icon, button.site-share {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px;
  border: 1px solid currentColor; border-radius: 0; background: transparent;
  color: inherit; text-decoration: none !important; vertical-align: middle;
  line-height: 1; cursor: pointer; flex-shrink: 0;
}
.contact-icon svg { display: block; width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; }
.site-share svg { display: block; width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
button.site-share { border-color: transparent; }
.contact-icon:hover, button.site-share:hover { background: rgba(128, 112, 85, .10); }
.contact-icon:focus-visible, button.site-share:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.contact-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* Labels remain out of the reading flow; keyboard focus and hover reveal them. */
.contact-icon, button.site-share { position: relative; }
.contact-icon::before, button.site-share::before {
  content: attr(title); position: absolute; z-index: 20; bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%); padding: 5px 8px;
  background: #2b2724; color: #faf7f2; font: 12px/1.4 sans-serif;
  white-space: nowrap; pointer-events: none; opacity: 0;
}
.contact-icon:hover::before, .contact-icon:focus-visible::before,
button.site-share:hover::before, button.site-share:focus-visible::before { opacity: 1; }
.contact-icons .contact-icon:first-of-type::before { left: 0; transform: none; }
.contact-icons .contact-icon:last-of-type::before { left: auto; right: 0; transform: none; }
.onsil-nav .site-share::before, .mio-nav .site-share::before, #site-navigation > .site-share::before { bottom: auto; top: calc(100% + 6px); }
#site-navigation > .site-share::before { left: auto; right: 0; transform: none; }
.contact-icon .contact-sr-only, .site-share .contact-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.contact-icons .channel-sep, .contact-icons .mio-channel-sep { display: none; }
.site-share[hidden] { display: none; }
.share-status {
  position: fixed; z-index: 200; left: 50%; bottom: 80px; transform: translateX(-50%);
  max-width: calc(100vw - 40px); padding: 12px 20px; background: #2b2724; color: #faf7f2;
  font: 14px/1.5 sans-serif; text-align: center; pointer-events: none;
}
.share-status:empty { display: none; }
dialog.share-dialog { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid #8a8278; border-radius: 0; background: #faf7f2; color: #2b2724; }
.share-dialog::backdrop { background: rgba(0,0,0,.35); }
.share-dialog label { display: block; margin-bottom: 12px; font: 16px/1.5 sans-serif; }
.share-dialog input { box-sizing: border-box; width: 100%; min-height: 44px; font: 16px/1.5 sans-serif; padding: 8px; }
.share-dialog button { min-height: 44px; margin-top: 16px; padding: 8px 20px; background: transparent; border: 1px solid currentColor; color: inherit; font: 14px/1.5 sans-serif; cursor: pointer; }
/* Mini Ink's two existing header templates. */
.mio-nav > .site-share { order: 2; margin-left: 8px; }
.mio-nav > .mio-burger { order: 3; }
.mio-nav > .mio-menu { order: 1; }
.bottom-header > .site-share { vertical-align: middle; margin-right: 12px; }
.mio-home .mio-band .ch.contact-icons { font-size: 14px; justify-content: center; gap: 10px; }
.mio-home .mio-band .ch .channel-prompt { flex-basis: 100%; }
.mio-home a.contact-icon, .post-content a.contact-icon { padding: 10px; border: 1px solid currentColor; color: inherit; }
.post-content .contact-icons { margin: 16px 0; }
@media (max-width: 768px) {
  .mio-nav > .site-share { margin-left: auto; margin-right: 6px; }
  .mio-nav > .mio-menu { order: 4; }
}

/* Override legacy link hover gold while retaining at least 3:1 icon contrast. */
a.contact-icon:hover, a.contact-icon:focus-visible,
.post-content .booking-options a.contact-icon:hover,
.site-footer a.contact-icon:hover { color: #7A5F2B; }

@media (max-width: 768px) {
  .mio-nav { padding-inline: 20px; column-gap: 4px; }
  .mio-nav .mio-brand { white-space: nowrap; letter-spacing: .10em; }
  .mio-nav .mio-brand small { white-space: normal; max-width: 180px; }
}

/* Legacy Mini Ink header: place sharing in existing whitespace, not a new row. */
.wp-theme-tattoo-studio #site-navigation { position: relative; }
#site-navigation > .site-share { position: absolute; top: 18px; right: 20px; margin: 0; z-index: 5; }