/* =========================================================
   FAIR FUTURE FOUNDATION
   Floating Copy / Share
   DESIGN 02

   Documentary / restrained interface.
   Independent from page background.
   ========================================================= */


/* ---------------------------------------------------------
   Legacy Divi Copy Link controls

   Preserved in database, hidden only where the floating
   replacement is active.
   --------------------------------------------------------- */

body.fff-has-floating-share
.js-copy-link.et_pb_button_module_wrapper,

body.fff-has-floating-share
.et_pb_button.js-copy-link,

body.fff-has-floating-share
.et_pb_button_module_wrapper .et_pb_button.js-copy-link {
  display:
    none !important;
}


/* ---------------------------------------------------------
   Desktop control
   --------------------------------------------------------- */

.fff-floating-share {
  position:
    fixed;

  top:
    56%;

  right:
    0;

  z-index:
    9990;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    0.52rem;

  min-width:
    102px;

  min-height:
    40px;

  padding:
    5px 11px 5px 6px;

  margin:
    0;

  border:
    1px solid
    rgba(17, 17, 17, 0.15);

  border-right:
    0;

  border-left:
    2px solid
    var(--fff-brand-red);

  border-radius:
    6px 0 0 6px;

  background:
    #ffffff;

  color:
    #171717;

  box-shadow: none;

  font-family:
    var(--fff-font-action);

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    0.015em;

  text-align:
    left;

  text-decoration:
    none;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  transform:
    translateY(-50%);

  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}


/* ---------------------------------------------------------
   Icon
   --------------------------------------------------------- */

.fff-floating-share__icon {
  display:
    inline-flex;

  flex:
    0 0 auto;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  border-radius:
    7px;

  background:
    rgba(17, 17, 17, 0.055);

  color:
    var(--fff-brand-blue);

  transition:
    background-color 160ms ease,
    color 160ms ease;
}


.fff-floating-share__icon svg {
  display:
    block;

  width:
    17px;

  height:
    17px;
}


/* ---------------------------------------------------------
   Labels
   --------------------------------------------------------- */

.fff-floating-share__label {
  display:
    inline-flex;

  align-items:
    center;

  white-space:
    nowrap;
}


.fff-floating-share__mobile-label {
  display:
    none;
}


/* ---------------------------------------------------------
   Desktop hover
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  .fff-floating-share:hover {
    background:
      #111111;

    color:
      #ffffff;

    border-color:
      #111111;

    border-left-color:
      var(--fff-brand-red);

    box-shadow: none;

    transform:
      translate(-4px, -50%);
  }


  .fff-floating-share:hover
  .fff-floating-share__icon {
    background:
      rgba(255, 255, 255, 0.10);

    color:
      #ffffff;
  }

}


/* ---------------------------------------------------------
   Keyboard focus
   --------------------------------------------------------- */

.fff-floating-share:focus-visible {
  outline:
    3px solid
    var(--fff-brand-blue);

  outline-offset:
    3px;
}


/* ---------------------------------------------------------
   Mobile

   Smaller visual footprint.
   Native Web Share remains controlled by existing JS.
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .fff-floating-share {
    top:
      auto;

    right:
      10px;

    bottom:
      calc(
        16px
        + env(safe-area-inset-bottom)
      );

    min-width:
      90px;

    min-height:
      44px;

    gap:
      0.42rem;

    padding:
      6px 13px 6px 7px;

    border:
      1px solid
      rgba(17, 17, 17, 0.15);

    border-left:
      3px solid
      var(--fff-brand-red);

    border-radius:
      11px;

    background:
      #ffffff;

    box-shadow: none;

    font-size:
      12.5px;

    transform:
      none;
  }


  .fff-floating-share__icon {
    position:
      relative;

    width:
      28px;

    height:
      28px;

    border-radius:
      7px;

    color:
      #111111;
  }


  /*
   * Mobile uses a simple share arrow instead of the
   * desktop chain-link symbol.
   */

  .fff-floating-share__icon svg {
    display:
      none;
  }


  .fff-floating-share__icon::before {
    content:
      "↗";

    display:
      block;

    font-family:
      Arial,
      sans-serif;

    font-size:
      18px;

    font-weight:
      600;

    line-height:
      1;

    transform:
      translateY(-1px);
  }


  .fff-floating-share__desktop-label {
    display:
      none;
  }


  .fff-floating-share__mobile-label {
    display:
      inline;
  }

}


/* ---------------------------------------------------------
   Active/tap feedback
   --------------------------------------------------------- */

.fff-floating-share:active {
  box-shadow: none;
}


@media (max-width: 767px) {

  .fff-floating-share:active {
    transform:
      translateY(1px);
  }

}


/* ---------------------------------------------------------
   Reduced motion / print
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .fff-floating-share,
  .fff-floating-share__icon {
    transition:
      none;
  }

}


@media print {

  .fff-floating-share {
    display:
      none !important;
  }

}


/* =========================================================
   FFF FLOATING SHARE AUTO-REVEAL
   Visible on load and activity, discreet when idle.
   ========================================================= */

.fff-floating-share {
  transform:
    translateY(-50%)
    translateX(calc(100% - 34px));
}

.fff-floating-share.fff-floating-share--visible,
.fff-floating-share:focus-visible {
  transform:
    translateY(-50%)
    translateX(0);
}

@media (hover: hover) and (pointer: fine) {

  .fff-floating-share:hover {
    transform:
      translateY(-50%)
      translateX(0);
  }
}

@media (max-width: 767px) {

  .fff-floating-share {
    transform:
      translateX(calc(100% - 32px));
  }

  .fff-floating-share.fff-floating-share--visible,
  .fff-floating-share:focus-visible {
    transform:
      translateX(0);
  }
}

/* FFF FLOATING SHARE AUTO-REVEAL END */