/* =============================================================================
   META-BAR.CSS — Article Meta Strip
   Hello Elementor Child Theme

   Renders the slim horizontal meta bar directly below the hero.
   Contains author, dates, reading time, and tag pills.

   Design intent:
     Visually quiet. This strip should not compete with the hero above
     or the content below. Small type, muted color, generous whitespace.
     The reader glances at it for orientation, then moves on.
   ============================================================================= */


/* =============================================================================
   1. META BAR CONTAINER
   ============================================================================= */

.hec-meta-bar {
  width:            100%;
  max-width:        var(--hec-site-max-width);
  margin:           0 auto;
  padding:          var(--hec-space-5) var(--hec-article-side-padding);

  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  flex-wrap:        wrap;
  gap:              var(--hec-space-4);

  border-bottom:    1px solid var(--hec-color-border);

  /*
   * Subtle top accent — a very thin amber line at the very top
   * of the meta bar transitions the reader from the hero to content.
   */
  background:       linear-gradient(
                      to right,
                      var(--hec-color-bg) 0%,
                      var(--hec-brand-amber-pale) 50%,
                      var(--hec-color-bg) 100%
                    );
  background-size:  200% 100%;

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

[data-theme="dark"] .hec-meta-bar {
  background: linear-gradient(
    to right,
    var(--hec-color-bg) 0%,
    rgba(209, 106, 11, 0.06) 50%,
    var(--hec-color-bg) 100%
  );
}


/* =============================================================================
   2. LEFT GROUP — Author + Dates + Reading Time
   ============================================================================= */

.hec-meta__left {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--hec-space-3);

  font-family: var(--hec-font-meta);
  font-size:   var(--hec-text-sm);
  color:       var(--hec-color-meta-text);
  line-height: var(--hec-leading-snug);
}


/* =============================================================================
   3. AUTHOR
   ============================================================================= */

.hec-meta__author-link {
  display:     flex;
  align-items: center;
  gap:         var(--hec-space-2);
  color:       var(--hec-color-text-primary);
  font-weight: var(--hec-weight-medium);

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

.hec-meta__author-link:hover {
  color:     var(--hec-color-accent);
  transform: translateX(1px);
}

/* Avatar image output by WordPress get_avatar() */
.hec-meta__avatar {
  width:         36px;
  height:        36px;
  border-radius: var(--hec-radius-full);
  object-fit:    cover;
  flex-shrink:   0;

  border:        2px solid var(--hec-color-border);
  transition:    border-color var(--hec-transition-fast);

  /*
   * Micro ring on hover — brand amber border reveals.
   */
}

.hec-meta__author-link:hover .hec-meta__avatar {
  border-color: var(--hec-color-accent);
}

.hec-meta__author-name {
  font-size:   var(--hec-text-sm);
  font-weight: var(--hec-weight-semibold);
  white-space: nowrap;
  color:       var(--hec-color-text-primary);
  transition:  color var(--hec-transition-fast);
}


/* =============================================================================
   4. SEPARATOR DOT
   ============================================================================= */

.hec-meta__sep {
  color:      var(--hec-color-text-disabled);
  font-size:  var(--hec-text-sm);
  flex-shrink: 0;
  user-select: none;
}


/* =============================================================================
   5. DATES
   ============================================================================= */

.hec-meta__dates {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--hec-space-2);
}

.hec-meta__publish-date,
.hec-meta__modified-date {
  font-size:   var(--hec-text-sm);
  color:       var(--hec-color-meta-text);
  white-space: nowrap;
}

.hec-meta__updated-label {
  font-size:   var(--hec-text-xs);
  font-weight: var(--hec-weight-medium);
  color:       var(--hec-color-accent);
  letter-spacing: var(--hec-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}


/* =============================================================================
   6. READING TIME
   ============================================================================= */

.hec-meta__reading-time {
  display:     flex;
  align-items: center;
  gap:         var(--hec-space-1);
  font-size:   var(--hec-text-sm);
  color:       var(--hec-color-meta-text);
  white-space: nowrap;

  /*
   * Subtle amber accent on the reading time — it is the most
   * actionable piece of meta information for the reader.
   */
  font-weight: var(--hec-weight-medium);
  color:       var(--hec-color-accent);
}

.hec-meta__icon {
  flex-shrink: 0;
  color:       currentColor;
  fill:        currentColor;
  opacity:     0.80;
}


/* =============================================================================
   7. TAG PILLS
   ============================================================================= */

.hec-meta__tags {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--hec-space-2);
}

.hec-meta__tag-pill {
  display:          inline-flex;
  align-items:      center;
  padding:          3px var(--hec-space-3);
  border-radius:    var(--hec-radius-full);

  background-color: var(--hec-color-meta-pill-bg);
  color:            var(--hec-color-meta-pill-text);
  border:           1px solid var(--hec-color-meta-pill-border);

  font-family:      var(--hec-font-meta);
  font-size:        var(--hec-text-xs);
  font-weight:      var(--hec-weight-medium);
  letter-spacing:   var(--hec-tracking-wide);
  white-space:      nowrap;

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

.hec-meta__tag-pill:hover {
  background-color: var(--hec-color-meta-pill-hover);
  color:            var(--hec-color-accent);
  border-color:     var(--hec-color-accent);
  transform:        translateY(-1px);
  box-shadow:       var(--hec-shadow-xs);
}

.hec-meta__tag-pill:active {
  transform:  translateY(0);
  box-shadow: none;
}

/* Prepend hash symbol to tags via pseudo element */
.hec-meta__tag-pill::before {
  content:    '#';
  opacity:    0.50;
  margin-right: 1px;
  font-size:  var(--hec-text-xs);
}


/* =============================================================================
   8. RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
  .hec-meta-bar {
    padding:        var(--hec-space-4) var(--hec-space-6);
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--hec-space-3);
  }

  .hec-meta__left {
    flex-wrap: wrap;
    gap:       var(--hec-space-2);
  }

  /* Stack tags below author row on mobile */
  .hec-meta__tags {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hec-meta-bar {
    padding: var(--hec-space-4) var(--hec-space-5);
  }

  .hec-meta__author-name {
    max-width: 140px;
    overflow:  hidden;
    text-overflow: ellipsis;
  }
}


/* =============================================================================
   9. REVEAL ANIMATION
   ============================================================================= */

.hec-meta-bar[data-reveal="meta-bar"] {
  opacity:    0;
  transform:  translateY(8px);
  transition:
    opacity    var(--hec-transition-slow) var(--hec-ease-out),
    transform  var(--hec-transition-slow) var(--hec-ease-out),
    background var(--hec-transition-slow),
    border-color var(--hec-transition-slow);
}

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

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