:root {
  --ct-cat-ink: #0e2a3f;          /* CareThrive navy (logo "Care") */
  --ct-cat-teal: #00a68d;         /* logo teal, darkened for 3:1 on tint */
  --ct-cat-band: #e9f6f3;         /* teal-tinted band, CARE's cream equivalent */
  --ct-cat-rule: rgba(14, 42, 63, 0.12);
  --ct-cat-ease: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */
}

/* --- Band ---------------------------------------------------------------- */
.post-archive-hero-section {
  padding-top: 0 !important; /* removes the grey gap above the band on mobile */
}

.post-archive-hero-section .entry-hero-container-inner {
  position: relative;
  background: var(--ct-cat-band) !important;
  border-bottom: 1px solid var(--ct-cat-rule);
  overflow: hidden;
}

/* Kadence overlay stays inert */
.post-archive-hero-section .hero-section-overlay {
  background: transparent !important;
}

/* Align the title's left edge with the post grid below (1290 max + 24 gutter) */
.post-archive-hero-section .hero-container {
  max-width: 1290px !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}

.post-archive-hero-section .entry-header.post-archive-title {
  min-height: 0 !important;
  display: block !important;
  text-align: left !important;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.75rem, 6vw, 5rem);
}

/* --- Title --------------------------------------------------------------- */
.post-archive-hero-section .archive-title {
  position: relative;
  display: inline-block;
  margin: 0 !important;
  padding-bottom: clamp(1.1rem, 2vw, 1.6rem);
  max-width: 14ch;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(2.6rem, 7.2vw, 6rem) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.025em;
  color: var(--ct-cat-ink) !important;
  text-align: left !important;
  text-wrap: balance;
  font-kerning: normal;
  font-feature-settings: "kern", "liga", "lnum";
}

/* Teal underscore: draws in after the title lands */
.post-archive-hero-section .archive-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(4.5rem, 9vw, 7.5rem);
  height: clamp(5px, 0.5vw, 7px);
  border-radius: 1px;
  background: var(--ct-cat-teal);
  transform-origin: left center;
}

.post-archive-hero-section .archive-title::selection {
  background: var(--ct-cat-teal);
  color: #fff;
}

/* --- Motion: one authored moment on load ---------------------------------
   Title rises out of a mask and un-blurs; the underscore then draws across.
   Default state is fully visible; animation only runs when motion is OK.  */
@media (prefers-reduced-motion: no-preference) {
  .post-archive-hero-section .archive-title {
    animation: ct-cat-rise 1.05s var(--ct-cat-ease) 0.08s both;
  }

  .post-archive-hero-section .archive-title::after {
    animation: ct-cat-rule 0.9s var(--ct-cat-ease) 0.6s both;
  }
}

@keyframes ct-cat-rise {
  from {
    opacity: 0;
    transform: translateY(0.4em);
    clip-path: inset(100% -0.5em -0.5em -0.5em);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(-0.5em -0.5em -0.5em -0.5em);
    filter: blur(0);
  }
}

@keyframes ct-cat-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Duplicate H1 ---------------------------------------------------------
   The child theme prints a second <h1 class="custom-cat-title"> above the
   grid. When the hero title exists, hide the duplicate visually (still
   readable by screen readers). Removing it in PHP is the cleaner long-term
   fix, since two H1s on one page is an SEO warning.                       */
body:has(.post-archive-hero-section .archive-title) .custom-cat-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Small screens ------------------------------------------------------- */
@media (max-width: 767px) {
  .post-archive-hero-section .entry-header.post-archive-title {
    padding-block: 3rem 2.5rem;
  }

  .post-archive-hero-section .archive-title {
    max-width: none;
    letter-spacing: -0.02em;
  }
}