/* Remove default focus ring. Closed-state fill/opacity are locked via
   [aria-expanded="false"] below so :focus cannot leave a solid white button. */
.share-toggle:focus {
  outline: none;
}

/* Only show focus affordance for keyboard navigation */
.share-toggle:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

/* Remove mobile tap highlight (iOS/Android) */
.share-toggle {
  -webkit-tap-highlight-color: transparent;
}

.share-container{
  position: relative;
  z-index:1200;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  font-family:inherit;
  width: 48px;
  margin-left: auto;
  margin-right: 110px;
}

/* In-flow share stays at z-index 1200, under .header--stripes (1300).
   Raise it only while the floating control's popover is shown, including
   the fade-out that keeps [hidden] off. */
.share-container.share-container--floating:has(.share-popover:not([hidden])) {
  z-index: 1400;
}

body.site-nav-open .share-container {
  z-index: 1;
}

@media (min-width: 880px) and (max-width: 1299px) {
  .share-container{
   margin-right: 95px;
  }
}

@media (max-width: 879px){
  .share-container{
   margin-right: 16px;
  }
}
.share-toggle{
  position: absolute;
  width:48px;
  height:48px;
  border-radius:50%;
  background: #fff url("../icons/icon_share.svg") center/55% no-repeat;
  border: 1px solid #E2E2E2;
  box-shadow: 0px 0.5px 4px rgba(0,0,0,0.12);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  opacity:0.8;
  transform: translateZ(0);
  backface-visibility: hidden;
  z-index: 2;
}
/* :focus must not change fill, opacity, or box-shadow — those caused solid
   white after close and hid the :focus-visible keyboard ring. */
.share-toggle:focus {
  border: 1px solid #E2E2E2;
}

/* Lock the closed (default) appearance. Beats sticky :hover/:focus so the
   button cannot stay solid white after the popover closes.
   Do not set box-shadow here — :focus-visible must keep the keyboard ring. */
.share-toggle[aria-expanded="false"] {
  background-color: #fff;
  opacity: 0.8;
}

.share-toggle[aria-expanded="false"]:not(:focus-visible) {
  box-shadow: 0px 0.5px 4px rgba(0,0,0,0.12);
}

/* Hover gray only on fine-pointer devices, and only while closed. */
@media (hover: hover) and (pointer: fine) {
  .share-toggle[aria-expanded="false"]:hover {
    background-color: #EDEDED;
    box-shadow: none;
    opacity: 1;
  }
}

/* Source of truth for open/active visual state */
.share-toggle[aria-expanded="true"] {
  background-color: #EDEDED;
  box-shadow: none;
  opacity: 1;
}
.share-popover{
  position:absolute;
  bottom:calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width:auto;
  padding:3px;
  border-radius: 32px;
  background:#fff;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  border:1px solid #E2E2E2;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1;
}
.share-popover[hidden] {
  display: none !important;
}
.share-popover:focus,
.share-popover:focus-visible {
  outline: none;
  box-shadow: none;
}
.share-popover[aria-hidden="false"]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  animation:share-popover-fade-in 300ms ease;
  /* Always show the full icon stack; do not clamp height near the H1. */
  max-height: none;
  overflow: visible;
}
.share-popover.share-popover--closing{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  animation:none;
}
.share-popover .placeholder {
  width:auto;
  height:auto;
}

.share-popover .placeholder .share-widget {
    float: none;
    margin: 0;
    padding: 0;
}

.share-popover .placeholder .share-widget .custom_images {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.share-widget .js-share-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #fff;
  transition: background-color 120ms ease;
}

.share-widget .js-share-link:focus {
  outline: none;
  box-shadow: none;
}

.share-widget .share-image-icon {
  width: 26px;
  height: 26px;
  display: block;
}

.share-widget .share-image-link {
  width: 48px;
  height: 48px;
}

.share-widget .share-image-link .share-image-icon {
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  filter: none;
}

.share-widget .js-share-link:hover,
.share-widget .js-share-link:active {
  background-color: #EDEDED;
}

.share-widget .share-text-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #d7d7d7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #333;
  background-color: #fafafa;
  letter-spacing: 0.2px;
}

.share-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  max-width: min(92vw, 460px);
  padding: 4px;
  border-radius: 4px;
  background: #222;
  box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #FFF;
  font-family: "ff-zwo-web-pro", "Franklin Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 2500;
}

.share-toast.share-toast--visible {
  opacity: 1;
  visibility: visible;
}

.share-toast.share-toast--copied {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: left;
  white-space: nowrap;
  width: 7.1rem;
  padding: 4px;
}

.share-toast.share-toast--email {
  display: block;
  text-align: left;
  white-space: normal;
  width: max-content;
  max-width: min(50vw, 460px);
  padding: 8px 10px;
  box-sizing: border-box;
}

@media (max-width: 37.4375em) {
  .share-toast.share-toast--email {
    font-size: 14px;
    line-height: 1.35;
    padding: 6px 8px;
  }
}

.share-toast__icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
}

@keyframes share-popover-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
/* small responsive tweak */
@media (max-width:37.4375em){
  .article-storyline-wrap{
    position: relative;
    /* Above newsletter-signup-wrap (z-index: 100). The sticky ad is raised
       above this wrap so the share toggle paints underneath it. */
    z-index: 110;
  }

  /* Above the open share stack (1400) so the popover paints under the ad.
     The open stack stays above .header--stripes (1300). */
  #cont_with_ad2_mobile {
    z-index: 1500;
  }

  /* This wrap is the stacking context that holds the fixed share control
     and its popover. .share-popover z-index cannot escape it. Lift the wrap
     only while the popover is shown: above the sticky header (1300) and
     below the sticky ad (1500). In-flow share keeps the wrap at 110. */
  .article-storyline-wrap:has(.share-container--floating .share-popover:not([hidden])) {
    z-index: 1400;
  }

  .share-container{
    position: relative;
    margin-right:12px;
    z-index: 110;
  }

  .share-container.share-container--floating{
    position: fixed;
    right: 12px;
    margin-right: 0;
    width: 48px;
    height: 48px;
    /* Above the byline and lead image so the visible button receives taps.
       The sticky ad (1500) paints above this wrap, so the toggle and the
       open popover sit under the ad where they overlap. */
    z-index: 400;
    /* top + opacity are set in JS. The button tracks the byline, then holds
       above the sticky bottom ad. */
  }

  .share-popover{
    z-index: 111;
  }
}

/* Drawer stays above an open share stack. Closed wrap keeps z-index 110.
   Drop the sticky ad with it so the drawer is not covered at the bottom. */
body.site-nav-open .article-storyline-wrap:has(.share-popover:not([hidden])) {
  z-index: 1;
}

body.site-nav-open #cont_with_ad2_mobile {
  z-index: 50;
}