/* =============================================================================
   AUTHOR-BOX.CSS — Author Biography Card
   Hello Elementor Child Theme

   Renders the author biography card below the post content.

   Structure:
     section.hec-author-box
       p.hec-author-box__eyebrow              ("Written by")
       div.hec-author-box__card
         div.hec-author-box__avatar-wrap
           a > img.hec-author-box__avatar
         div.hec-author-box__details
           div.hec-author-box__name-row
             a.hec-author-box__name
             span.hec-author-box__role-badge
           div.hec-author-box__bio
           div.hec-author-box__footer
             a.hec-author-box__post-count-link
             a.hec-author-box__website-link

   Design intent:
     Premium editorial card. Warm and inviting.
     The author is a person — this card makes them approachable.
     The avatar ring uses brand amber. The card has subtle depth.
     The bio text is slightly muted so the name is the focal point.
     On hover, the card lifts slightly and the accent glows.
   ============================================================================= */


/* =============================================================================
   1. SECTION WRAPPER
   ============================================================================= */

.hec-author-box {
  width:         100%;
  max-width:     var(--hec-content-width);
  margin:        var(--hec-space-12) auto var(--hec-space-10);
  padding:       0;

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


/* =============================================================================
   2. EYEBROW — "Written by"
   ============================================================================= */

.hec-author-box__eyebrow {
  font-family:    var(--hec-font-meta);
  font-size:      var(--hec-text-xs);
  font-weight:    var(--hec-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--hec-tracking-widest);
  color:          var(--hec-color-accent);
  margin-bottom:  var(--hec-space-4);

  /*
   * Accent line before the eyebrow text.
   * Short amber gradient line for visual continuity.
   */
  display:     flex;
  align-items: center;
  gap:         var(--hec-space-3);
}

.hec-author-box__eyebrow::before {
  content:       '';
  display:       block;
  width:         32px;
  height:        2px;
  background:    linear-gradient(
                   90deg,
                   var(--hec-brand-amber) 0%,
                   var(--hec-brand-gold)  100%
                 );
  border-radius: var(--hec-radius-full);
  flex-shrink:   0;
}


/* =============================================================================
   3. CARD
   ============================================================================= */

.hec-author-box__card {
  display:        flex;
  align-items:    flex-start;
  gap:            var(--hec-space-6);
  padding:        var(--hec-space-8);

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

  /*
   * Left accent border — brand amber line.
   * Gives the card a warm editorial feel.
   */
  border-left:    3px solid var(--hec-color-author-accent);

  position:       relative;
  overflow:       hidden;

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

/*
 * Subtle hover lift.
 * The card rises slightly and the shadow deepens.
 * The accent border glow intensifies via box-shadow.
 */
.hec-author-box__card:hover {
  transform:  translateY(-3px);
  box-shadow:
    var(--hec-shadow-xl),
    -3px 0 12px rgba(209, 106, 11, 0.12);
}

/*
 * Decorative gradient in the top-right corner.
 * Creates a subtle ambient warmth that feels premium.
 * Purely decorative — aria-hidden through CSS pointer-events.
 */
.hec-author-box__card::after {
  content:        '';
  position:       absolute;
  top:            -60px;
  right:          -60px;
  width:          180px;
  height:         180px;
  border-radius:  var(--hec-radius-full);
  background:     radial-gradient(
                    circle at center,
                    rgba(209, 106, 11, 0.06) 0%,
                    transparent 70%
                  );
  pointer-events: none;
  z-index:        0;
  transition:     opacity var(--hec-transition-slow);
}

[data-theme="dark"] .hec-author-box__card::after {
  background: radial-gradient(
    circle at center,
    rgba(209, 106, 11, 0.08) 0%,
    transparent 70%
  );
}


/* =============================================================================
   4. AVATAR
   ============================================================================= */

.hec-author-box__avatar-wrap {
  flex-shrink: 0;
  position:    relative;
  z-index:     1;
}

.hec-author-box__avatar-wrap a {
  display: block;
  border-radius: var(--hec-radius-full);
}

/*
 * The avatar image is output by WordPress get_avatar().
 * We style via the .hec-author-box__avatar class added
 * to the <img> tag in author-box.php.
 */
.hec-author-box__avatar {
  width:           72px;
  height:          72px;
  border-radius:   var(--hec-radius-full);
  object-fit:      cover;

  /*
   * Brand amber ring around the avatar.
   * Double ring effect using box-shadow:
   *   Inner ring: 2px white/surface gap
   *   Outer ring: 2px brand amber
   */
  box-shadow:
    0 0 0 3px var(--hec-color-surface),
    0 0 0 5px var(--hec-brand-amber);

  transition:
    box-shadow var(--hec-transition-normal),
    transform  var(--hec-transition-spring),
    filter     var(--hec-transition-slow);
}

.hec-author-box__card:hover .hec-author-box__avatar {
  transform:  scale(1.05);
  box-shadow:
    0 0 0 3px var(--hec-color-surface),
    0 0 0 5px var(--hec-brand-amber),
    0 0 16px  rgba(209, 106, 11, 0.25);
}


/* =============================================================================
   5. DETAILS COLUMN
   ============================================================================= */

.hec-author-box__details {
  flex:     1;
  min-width: 0;
  position:  relative;
  z-index:   1;
}


/* =============================================================================
   6. NAME ROW
   ============================================================================= */

.hec-author-box__name-row {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--hec-space-3);
  margin-bottom: var(--hec-space-3);
}

.hec-author-box__name {
  font-family:    var(--hec-font-heading);
  font-size:      var(--hec-text-lg);
  font-weight:    var(--hec-weight-bold);
  color:          var(--hec-color-text-primary);
  line-height:    var(--hec-leading-tight);
  letter-spacing: var(--hec-tracking-tight);

  /*
   * Underline draw on hover — the underline grows from left to right.
   */
  position:                relative;
  text-decoration:         none;
  background-image:        linear-gradient(
                             var(--hec-brand-amber),
                             var(--hec-brand-amber)
                           );
  background-size:         0% 2px;
  background-repeat:       no-repeat;
  background-position:     left bottom;
  padding-bottom:          2px;
  transition:
    background-size var(--hec-transition-normal) var(--hec-ease-out),
    color           var(--hec-transition-fast);
}

.hec-author-box__name:hover {
  background-size: 100% 2px;
  color:           var(--hec-color-accent);
}


/* =============================================================================
   7. ROLE BADGE
   ============================================================================= */

.hec-author-box__role-badge {
  display:          inline-flex;
  align-items:      center;
  padding:          2px var(--hec-space-3);
  border-radius:    var(--hec-radius-full);

  background:       var(--hec-color-accent-subtle);
  color:            var(--hec-color-accent);
  border:           1px solid rgba(209, 106, 11, 0.20);

  font-family:      var(--hec-font-meta);
  font-size:        var(--hec-text-xs);
  font-weight:      var(--hec-weight-semibold);
  letter-spacing:   var(--hec-tracking-wider);
  text-transform:   uppercase;
  white-space:      nowrap;

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


/* =============================================================================
   8. BIO TEXT
   ============================================================================= */

.hec-author-box__bio {
  font-family:   var(--hec-font-body);
  font-size:     var(--hec-text-base);
  font-weight:   var(--hec-weight-regular);
  line-height:   var(--hec-leading-relaxed);
  color:         var(--hec-color-text-secondary);
  margin-bottom: var(--hec-space-5);
  word-break:    break-word;
  overflow-wrap: break-word;

  transition:
    color var(--hec-transition-slow);
}

/*
 * Links within the bio.
 */
.hec-author-box__bio a {
  color:                   var(--hec-color-accent);
  text-decoration:         underline;
  text-underline-offset:   3px;
  text-decoration-color:   transparent;
  transition:
    text-decoration-color var(--hec-transition-fast),
    color                 var(--hec-transition-fast);
}

.hec-author-box__bio a:hover {
  text-decoration-color: currentColor;
}


/* =============================================================================
   9. FOOTER — Post Count + Website
   ============================================================================= */

.hec-author-box__footer {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--hec-space-4);

  padding-top:  var(--hec-space-4);
  border-top:   1px solid var(--hec-color-border-subtle);

  transition:
    border-color var(--hec-transition-slow);
}

.hec-author-box__post-count-link,
.hec-author-box__website-link {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--hec-space-2);

  font-family:      var(--hec-font-meta);
  font-size:        var(--hec-text-xs);
  font-weight:      var(--hec-weight-medium);
  color:            var(--hec-color-text-tertiary);
  letter-spacing:   var(--hec-tracking-wide);

  padding:          var(--hec-space-1) var(--hec-space-3);
  border-radius:    var(--hec-radius-full);
  border:           1px solid var(--hec-color-border);

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

.hec-author-box__post-count-link:hover,
.hec-author-box__website-link:hover {
  color:        var(--hec-color-accent);
  background:   var(--hec-color-hover-bg);
  border-color: var(--hec-color-accent);
  transform:    translateY(-1px);
}

.hec-author-box__post-count-link:active,
.hec-author-box__website-link:active {
  transform: translateY(0);
}

.hec-author-box__post-count-link svg,
.hec-author-box__website-link svg {
  flex-shrink: 0;
  color:       currentColor;
  fill:        currentColor;
  opacity:     0.70;
}


/* =============================================================================
   10. RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
  .hec-author-box {
    margin: var(--hec-space-10) auto var(--hec-space-8);
  }

  .hec-author-box__card {
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        var(--hec-space-8) var(--hec-space-6);
    gap:            var(--hec-space-5);

    /* Center the left accent border on mobile */
    border-left:    none;
    border-top:     3px solid var(--hec-color-author-accent);
  }

  .hec-author-box__name-row {
    justify-content: center;
  }

  .hec-author-box__footer {
    justify-content: center;
  }

  .hec-author-box__eyebrow {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .hec-author-box__card {
    padding: var(--hec-space-6) var(--hec-space-5);
  }

  .hec-author-box__avatar {
    width:  56px;
    height: 56px;
  }

  .hec-author-box__name {
    font-size: var(--hec-text-md);
  }

  .hec-author-box__footer {
    flex-direction: column;
    gap:            var(--hec-space-2);
  }
}


/* =============================================================================
   11. REVEAL ANIMATION
   ============================================================================= */

.hec-author-box[data-reveal="author-box"] {
  opacity:    0;
  transform:  translateY(20px);
}

.hec-author-box[data-reveal="author-box"].hec-revealed {
  opacity:   1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hec-author-box[data-reveal="author-box"] {
    opacity:   1;
    transform: none;
    transition:
      color            var(--hec-transition-slow),
      background-color var(--hec-transition-slow);
  }
}