/* =============================================================================
   SOCIAL-SHARE.CSS — Sticky Social Share Bar
   Hello Elementor Child Theme

   Desktop:  Fixed vertical bar on the left side of the viewport,
             vertically centered. Sticks as reader scrolls.
   Mobile:   Fixed horizontal bar at the bottom of the viewport.

   Structure:
     aside.hec-social-share
       span.hec-social-share__label        (rotated "Share" text)
       ul.hec-social-share__list
         li.hec-social-share__item (× 5)
           button.hec-social-share__btn
             svg (platform icon)
             span.hec-social-share__tooltip
       button.hec-social-share__copy-btn
         svg
         span.hec-social-share__copy-label
         span.hec-social-share__tooltip

   Design intent:
     The share bar is unobtrusive on desktop — it lives in the left
     margin column of the article grid, below the fixed left edge.
     Buttons are icon-only with tooltips on hover.
     Each button reveals its platform color on hover via
     --hec-share-color custom property set inline in social-share.php.
     On mobile it becomes a bottom bar — always within thumb reach.
   ============================================================================= */


/* =============================================================================
   1. SHARE BAR WRAPPER
   ============================================================================= */

.hec-social-share {
  /*
   * Desktop: sticky in the left column of .hec-article-grid.
   * position: sticky keeps it in the grid flow while sticking
   * to the top of the viewport as the reader scrolls.
   * This is superior to position:fixed because it respects
   * the grid column and does not overlap the content.
   */
  position:  sticky;
  top:       clamp(var(--hec-space-16), 15vh, 120px);
  left:      0;
  height:    fit-content;

  display:   flex;
  flex-direction: column;
  align-items:    center;
  gap:       var(--hec-space-3);

  padding:   var(--hec-space-4) var(--hec-space-3);

  background:    var(--hec-color-share-bg);
  border:        1px solid var(--hec-color-share-border);
  border-radius: var(--hec-radius-xl);
  box-shadow:    var(--hec-shadow-md);

  z-index:   var(--hec-z-social-share);

  transition:
    background    var(--hec-transition-slow),
    border-color  var(--hec-transition-slow),
    box-shadow    var(--hec-transition-slow);
}

/*
 * Entry animation — bar slides in from the left after
 * page load. Class .hec-share--visible added by main.js
 * after a short delay so it does not compete with the hero.
 */
.hec-social-share {
  opacity:   0;
  transform: translateX(-12px);
  transition:
    opacity   var(--hec-duration-slow) var(--hec-ease-spring) 0.4s,
    transform var(--hec-duration-slow) var(--hec-ease-spring) 0.4s,
    background    var(--hec-transition-slow),
    border-color  var(--hec-transition-slow),
    box-shadow    var(--hec-transition-slow);
}

.hec-social-share.hec-share--visible {
  opacity:   1;
  transform: translateX(0);
}


/* =============================================================================
   2. SHARE LABEL
   ============================================================================= */

.hec-social-share__label {
  font-family:    var(--hec-font-meta);
  font-size:      var(--hec-text-xs);
  font-weight:    var(--hec-weight-bold);
  letter-spacing: var(--hec-tracking-widest);
  text-transform: uppercase;
  color:          var(--hec-color-text-tertiary);

  /*
   * Rotate 90deg counter-clockwise so the text reads
   * vertically from bottom to top (reading direction preserved).
   */
  writing-mode:   vertical-rl;
  transform:      rotate(180deg);

  /*
   * Decorative top accent line above the word "Share".
   */
  padding-top:    var(--hec-space-3);
  position:       relative;
}

.hec-social-share__label::before {
  content:          '';
  position:         absolute;
  top:              0;
  left:             50%;
  transform:        translateX(-50%);
  width:            2px;
  height:           20px;
  background:       linear-gradient(
                      to bottom,
                      var(--hec-brand-amber),
                      transparent
                    );
  border-radius:    var(--hec-radius-full);
}


/* =============================================================================
   3. BUTTON LIST
   ============================================================================= */

.hec-social-share__list {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--hec-space-2);
  list-style:     none;
  padding:        0;
  margin:         0;
  width:          100%;
}

.hec-social-share__item {
  width:   100%;
  display: flex;
  justify-content: center;
}


/* =============================================================================
   4. SHARE BUTTONS
   ============================================================================= */

.hec-social-share__btn {
  position:        relative;
  display:         flex;
  align-items:     center;
  justify-content: center;

  width:           40px;
  height:          40px;
  border-radius:   var(--hec-radius-md);

  /*
   * Base icon color — muted. Platform color reveals on hover.
   */
  color:           var(--hec-color-share-icon);
  background:      transparent;

  transition:
    color         var(--hec-transition-fast),
    background    var(--hec-transition-fast),
    transform     var(--hec-transition-spring),
    box-shadow    var(--hec-transition-fast);
}

/*
 * Hover state — platform brand color reveals.
 * --hec-share-color is set as inline style per button in social-share.php.
 */
.hec-social-share__btn:hover {
  color:       var(--hec-white);
  background:  var(--hec-share-color, var(--hec-color-accent));
  transform:   translateX(3px) scale(1.08);
  box-shadow:  0 4px 12px rgba(0, 0, 0, 0.20);
}

.hec-social-share__btn:active {
  transform:   translateX(2px) scale(1.02);
  box-shadow:  none;
}

/* SVG icon sizing */
.hec-social-share__btn svg {
  flex-shrink:  0;
  width:        18px;
  height:       18px;
  fill:         currentColor;
  transition:   transform var(--hec-transition-spring);
}

.hec-social-share__btn:hover svg {
  transform: scale(1.05);
}


/* =============================================================================
   5. TOOLTIP
   ============================================================================= */

.hec-social-share__tooltip {
  position:         absolute;
  left:             calc(100% + var(--hec-space-3));
  top:              50%;
  transform:        translateY(-50%) translateX(6px);

  padding:          var(--hec-space-1) var(--hec-space-3);
  border-radius:    var(--hec-radius-md);

  background:       var(--hec-brand-brown-deep);
  color:            var(--hec-white);
  font-family:      var(--hec-font-meta);
  font-size:        var(--hec-text-xs);
  font-weight:      var(--hec-weight-medium);
  white-space:      nowrap;

  pointer-events:   none;
  opacity:          0;
  transition:
    opacity   var(--hec-transition-fast),
    transform var(--hec-transition-fast);

  /*
   * Arrow pointing left toward the button.
   */
  z-index:          var(--hec-z-raised);
}

.hec-social-share__tooltip::before {
  content:     '';
  position:    absolute;
  right:       100%;
  top:         50%;
  transform:   translateY(-50%);
  border:      5px solid transparent;
  border-right-color: var(--hec-brand-brown-deep);
}

[data-theme="dark"] .hec-social-share__tooltip {
  background: var(--hec-neutral-900);
}

[data-theme="dark"] .hec-social-share__tooltip::before {
  border-right-color: var(--hec-neutral-900);
}

.hec-social-share__btn:hover .hec-social-share__tooltip,
.hec-social-share__copy-btn:hover .hec-social-share__tooltip {
  opacity:   1;
  transform: translateY(-50%) translateX(0);
}


/* =============================================================================
   6. COPY LINK BUTTON
   ============================================================================= */

.hec-social-share__copy-btn {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--hec-space-1);

  width:           100%;
  padding:         var(--hec-space-2) var(--hec-space-1);
  border-radius:   var(--hec-radius-md);
  border-top:      1px solid var(--hec-color-border);

  color:           var(--hec-color-text-tertiary);
  font-family:     var(--hec-font-meta);
  font-size:       var(--hec-text-xs);
  font-weight:     var(--hec-weight-medium);
  text-align:      center;

  transition:
    color       var(--hec-transition-fast),
    background  var(--hec-transition-fast),
    transform   var(--hec-transition-spring);
}

.hec-social-share__copy-btn:hover {
  color:      var(--hec-color-accent);
  background: var(--hec-color-hover-bg);
  transform:  translateX(2px);
}

.hec-social-share__copy-btn:active {
  transform: translateX(1px) scale(0.97);
}

.hec-social-share__copy-label {
  font-size:  var(--hec-text-xs);
  line-height: 1.2;
  writing-mode: vertical-rl;
  transform:  rotate(180deg);
  max-height: 48px;
  overflow:   hidden;
}

/*
 * Copied state — class .hec-copy--success added by social-share.js.
 * Button turns green briefly then reverts.
 */
.hec-social-share__copy-btn.hec-copy--success {
  color:      var(--hec-color-success);
  background: var(--hec-color-success-bg);
  animation:  hec-pulse 0.4s var(--hec-ease-spring) 1;
}


/* =============================================================================
   7. SEPARATOR BETWEEN LIST AND COPY
   ============================================================================= */

.hec-social-share__list + .hec-social-share__copy-btn {
  margin-top: var(--hec-space-1);
  padding-top: var(--hec-space-3);
}


/* =============================================================================
   8. DESKTOP — within article grid column
   ============================================================================= */

@media (min-width: 769px) {
  /*
   * On desktop the share bar sits in the left column of
   * .hec-article-grid and is 64px wide (--hec-share-bar-width).
   * It scrolls with the page initially then sticks.
   */
  .hec-social-share {
    width:       var(--hec-share-bar-width);
    margin-left: calc(-1 * var(--hec-space-2));
  }
}


/* =============================================================================
   9. MOBILE — bottom fixed bar
   ============================================================================= */

@media (max-width: 768px) {

  /*
   * On mobile the article grid collapses to a single column.
   * The share bar is removed from the grid and becomes a
   * fixed bottom bar spanning the full viewport width.
   */
  .hec-social-share {
    position:       fixed;
    bottom:         0;
    left:           0;
    right:          0;
    top:            auto;
    width:          100%;
    height:         auto;

    flex-direction: row;
    justify-content: center;
    align-items:    center;
    gap:            var(--hec-space-1);

    padding:        var(--hec-space-3) var(--hec-space-4);
    border-radius:  var(--hec-radius-xl) var(--hec-radius-xl) 0 0;
    border-bottom:  none;
    border-left:    none;
    border-right:   none;

    /*
     * Safe area inset for iOS home indicator.
     */
    padding-bottom: calc(var(--hec-space-3) + env(safe-area-inset-bottom));

    box-shadow:     0 -4px 20px rgba(39, 26, 14, 0.12);

    transform:      translateY(100%);
    opacity:        1;
    transition:
      transform var(--hec-duration-slow) var(--hec-ease-spring) 0.6s,
      background   var(--hec-transition-slow),
      border-color var(--hec-transition-slow);
  }

  .hec-social-share.hec-share--visible {
    transform: translateY(0);
    opacity:   1;
  }

  /* Hide the vertical label on mobile */
  .hec-social-share__label {
    display: none;
  }

  /* Horizontal list */
  .hec-social-share__list {
    flex-direction: row;
    gap:            var(--hec-space-1);
    width:          auto;
    flex:           1;
    justify-content: center;
  }

  .hec-social-share__item {
    width: auto;
  }

  /* Slightly smaller buttons on mobile */
  .hec-social-share__btn {
    width:  44px;
    height: 44px;
  }

  /* Mobile tooltips appear above the button */
  .hec-social-share__tooltip {
    left:      50%;
    top:       auto;
    bottom:    calc(100% + var(--hec-space-2));
    transform: translateX(-50%) translateY(-4px);
  }

  .hec-social-share__tooltip::before {
    right:  auto;
    top:    100%;
    left:   50%;
    transform: translateX(-50%);
    border-right-color: transparent;
    border-top-color:   var(--hec-brand-brown-deep);
  }

  .hec-social-share__btn:hover .hec-social-share__tooltip,
  .hec-social-share__copy-btn:hover .hec-social-share__tooltip {
    transform: translateX(-50%) translateY(0);
  }

  /* Copy button on mobile — horizontal layout */
  .hec-social-share__copy-btn {
    flex-direction: row;
    width:          auto;
    padding:        var(--hec-space-2) var(--hec-space-3);
    border-top:     none;
    border-left:    1px solid var(--hec-color-border);
    margin-top:     0;
    padding-top:    var(--hec-space-2);
  }

  .hec-social-share__copy-label {
    writing-mode: horizontal-tb;
    transform:    none;
    max-height:   none;
  }

  [data-theme="dark"] .hec-social-share__tooltip::before {
    border-top-color: var(--hec-neutral-900);
  }
}


/* =============================================================================
   10. REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hec-social-share {
    opacity:   1;
    transform: none;
    transition:
      background   var(--hec-transition-slow),
      border-color var(--hec-transition-slow);
  }

  .hec-social-share__btn:hover {
    transform: none;
  }

  .hec-social-share__copy-btn:hover {
    transform: none;
  }

  .hec-social-share__copy-btn.hec-copy--success {
    animation: none;
  }

  @media (max-width: 768px) {
    .hec-social-share {
      transform: none;
    }
  }
}