/* ─── Shared UI atoms ────────────────────────────────────────────────────────
   Kicker, buttons, pills, chips, section heads, fine print, byline, art
   frame, search pill, empty state, pagination, breadcrumbs, tabs.
   ────────────────────────────────────────────────────────────────────────── */

.ha-fine {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 14px;
}

.ha-meta {
  font: 400 12px var(--f-m);
  color: var(--muted);
}

.ha-anchor {
  display: block;
  height: 0;
}

/* Kicker: mono caps label with a breathing dot */
.ha-kick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font: 400 11.5px var(--f-m);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);

  &::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--sage) 0 30%, color-mix(in srgb, var(--pastel-green) 25%, transparent) 31% 100%);
    animation: ha-breathe 5s ease-in-out infinite;
  }
}

@keyframes ha-breathe {
  50% {
    transform: scale(0.7);
  }
}

/* Buttons */
.ha-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 15px var(--f-b);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: box-shadow 0.6s, color 0.4s;

  span {
    position: relative;
    display: inline-block;
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.6s;
  }

  &:hover::before {
    opacity: 1;
  }

  @media (min-width: 640px) {
    padding: 15px 28px;
  }
}

.ha-btn--neon {
  color: var(--white);
  background: var(--deep);
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--primary-color) 60%, transparent);

  &::before {
    background: var(--grad-button);
  }

  &:hover {
    box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--lav-deep) 55%, transparent);
  }
}

.ha-btn--ghost {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface-color) 70%, transparent);
  border-color: var(--line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  &::before {
    background: var(--surface-color);
  }

  &:hover {
    box-shadow: var(--shadow);
  }
}

.ha-btn[hidden] {
  display: none;
}

.ha-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Category pill */
.ha-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font: 400 11px var(--f-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tint-green);
  color: var(--deep);
  transition: background var(--hover-duration);

  &:hover {
    background: var(--tint-green-2);
  }
}

/* "Sample" / live badge */
.ha-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 11.5px var(--f-m);
  color: var(--deep);

  i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sage);
    animation: ha-breathe 3s infinite;
  }
}

/* Section head */
.ha-sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 40px;

  h2 {
    font-size: clamp(36px, 5vw, 68px);
  }
}

.ha-sh--sm {
  align-items: center;
  margin-bottom: 14px;

  h2 {
    font-size: 21px;
  }
}

.ha-lnk {
  font: 400 12px var(--f-m);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep);
  border-bottom: 1px solid currentColor;
}

.ha-sec {
  padding: 70px 0;

  @media (min-width: 640px) {
    padding: 100px 0;
  }
}

.ha-center {
  text-align: center;
  margin-top: 36px;
}

/* Filter chips (buttons or links) */
.ha-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;

  a,
  button {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-color) 70%, transparent);
    font-size: 14px;
    color: var(--muted);
    transition: background var(--hover-duration), color var(--hover-duration), box-shadow var(--hover-duration);

    &:hover {
      color: var(--ink);
      box-shadow: var(--shadow);
    }

    &[aria-pressed="true"] {
      background: var(--deep);
      border-color: var(--deep);
      color: var(--white);
    }
  }
}

/* Byline: date · reading time (never an author) */
.ha-by {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font: 400 12px var(--f-m);
  color: var(--muted);
}

.ha-by--lg {
  font-size: 12.5px;
}

/* Art / image frame (featured image or the generated SVG) */
.ha-art {
  display: block;
  overflow: hidden;
  background: var(--soft);

  img,
  svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Breadcrumbs */
.ha-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 28px 0 8px;
  font: 400 12px var(--f-m);
  color: var(--muted);

  a:hover {
    color: var(--deep);
  }

  [aria-current] {
    color: var(--ink);
  }
}

/* Segmented tabs (links) */
.ha-tabs {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-color) 75%, transparent);
  border: 1px solid var(--line);

  a {
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--muted);
    white-space: nowrap;
    transition: background var(--hover-duration), color var(--hover-duration);

    &[aria-current] {
      background: var(--deep);
      color: var(--white);
    }
  }
}

/* Search pill (inline forms) */
.ha-qform {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 420px;

  .ha-qform__input {
    width: 100%;
    height: 48px;
    padding: 0 52px 0 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-color) 85%, transparent);
    color: var(--ink);
    font: 400 15px var(--f-b);

    &:focus {
      outline: 0;
      box-shadow: var(--ring);
    }

    &::placeholder {
      color: var(--muted);
    }
  }

  .ha-qform__btn {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--deep);
    display: grid;
    place-items: center;

    svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: var(--white);
      stroke-width: 1.8;
      stroke-linecap: round;
    }
  }
}

/* Pagination (the_posts_pagination output) */
.ha-pager .nav-links,
.ha-pager--inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.ha-pager .page-numbers,
.ha-pager--inline .post-page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-color) 80%, transparent);
  transition: background var(--hover-duration);

  &.current {
    background: var(--deep);
    border-color: var(--deep);
    color: var(--white);
  }

  &.dots {
    border: 0;
    background: none;
  }

  &:is(a):hover {
    background: var(--surface-color);
    box-shadow: var(--shadow);
  }
}

/* Empty state */
.ha-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 24px;
  text-align: center;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow);

  .ha-qform {
    margin-top: 8px;
  }
}

.ha-none__orb {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--surface-color), var(--tint-green) 40%, var(--tint-green-2) 70%);
  animation: ha-idle 6s ease-in-out infinite;
}

.ha-none__title {
  font-size: 30px;
}

.ha-none__text {
  color: var(--muted);
  max-width: 440px;
}

@keyframes ha-idle {
  50% {
    transform: scale(1.08);
  }
}