/* Blog bridge v1 — applies the edgeuno.cloud design to the editorial templates:
   the Blog, News and Success Stories archives and their single pages.

   These templates are Kadence Elements driving live query loops, pagination and
   search. Restyling them through CSS instead of editing the templates keeps that
   functionality untouched — the same approach used for the header. Selectors
   target markup verified in the rendered output: .kb-query-item (all three
   archives), .single-content (singles), .sidebar-toc and .tm-card (theme). */

/* ============ Shared: archive header ============ */
.archive .entry-title,
.blog .entry-title,
.post-type-archive .entry-title {
  font-family: var(--font-sans);
  color: var(--color-brand-navy-deep);
  letter-spacing: -0.02em;
}

/* Search field on the archives */
.kadence-search-modal .kadence-search-form input[type="search"],
.wp-block-search__input,
.search-form input[type="search"] {
  border: 1px solid rgba(160, 160, 160, .45);
  border-radius: var(--radius-button);
  background: var(--color-surface-card);
  padding: 12px 16px;
  color: var(--color-text-slate);
  font-family: var(--font-sans);
  font-size: .9375rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.wp-block-search__input:focus,
.search-form input[type="search"]:focus {
  border-color: var(--color-brand-teal-contrast);
  outline: none;
  box-shadow: 0 0 0 3px rgba(71, 175, 180, .18);
}

/* ============ Archive cards (Blog / News / Success Stories) ============ */
.kb-query-item,
.kt-blocks-post-grid-item {
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Only lift the standard grid cards; the featured row is a wide split layout
   where a hover transform would look like a glitch. */
.kb-query-grid-wrap .kb-query-item:hover,
.kt-blocks-post-grid-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 1px rgba(0, 0, 0, .12), 0 8px 32px rgba(0, 0, 76, .10);
}

.kb-query-item img,
.kt-blocks-post-grid-item img {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* Card titles */
.kb-query-item h2,
.kb-query-item h3,
.kt-blocks-post-grid-item h2,
.kt-blocks-post-grid-item h3 {
  font-family: var(--font-sans);
  color: var(--color-brand-navy-deep);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.kb-query-item a:hover h2,
.kb-query-item a:hover h3 {
  color: var(--color-brand-teal-contrast);
}

/* Excerpts */
.kb-query-item p,
.kt-blocks-post-grid-item p {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* "Read the full story" — align with the redesign primary button */
.kb-query-item .wp-block-kadence-advancedbtn .kb-button.kb-button,
.kb-query-item .kb-button.kb-button,
.kb-query-item .wp-block-button__link {
  border-radius: var(--radius-button);
  background: var(--color-brand-navy-deep);
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: 500;
  transition: background .15s ease, box-shadow .15s ease;
}

.kb-query-item .wp-block-kadence-advancedbtn .kb-button.kb-button:hover,
.kb-query-item .kb-button.kb-button:hover,
.kb-query-item .wp-block-button__link:hover {
  background: var(--color-brand-navy);
  color: #ffffff;
  box-shadow: 0 15px 25px -7px rgba(0, 0, 0, .15);
}

/* ============ Pagination ============ */
.kb-query-pagination .page-numbers,
.navigation.pagination .page-numbers {
  display: inline-flex;
  min-width: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(160, 160, 160, .45);
  border-radius: var(--radius-button);
  color: var(--color-text-slate);
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.kb-query-pagination .page-numbers:hover,
.navigation.pagination .page-numbers:hover {
  border-color: var(--color-brand-teal-contrast);
  background: var(--color-brand-teal-soft);
  color: var(--color-brand-navy-deep);
}

.kb-query-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
  border-color: var(--color-brand-navy-deep);
  background: var(--color-brand-navy-deep);
  color: #ffffff;
}

/* ============ Single article ============ */
.single-content,
.single .entry-content {
  font-family: var(--font-sans);
  color: var(--color-text-slate);
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* A comfortable measure. Media and block-level embeds opt out below so wide
   figures and tables keep the full column. */
.single-content > p,
.single-content > ul,
.single-content > ol,
.single-content > h2,
.single-content > h3,
.single-content > h4,
.single-content > blockquote {
  max-width: 68ch;
}

.single-content h2,
.single-content h3,
.single-content h4 {
  font-family: var(--font-sans);
  color: var(--color-brand-navy-deep);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.single-content h2 { margin: 2.25em 0 .6em; font-size: 1.75rem; }
.single-content h3 { margin: 1.85em 0 .5em; font-size: 1.3125rem; }
.single-content h4 { margin: 1.6em 0 .45em; font-size: 1.0625rem; }
.single-content p  { margin: 0 0 1.15em; }

.single-content :where(p, li, td, th, blockquote, h2, h3, h4) a {
  color: var(--color-brand-teal-contrast);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.single-content :where(p, li, td, th, blockquote, h2, h3, h4) a:hover {
  color: var(--color-brand-navy-deep);
}

.single-content ul,
.single-content ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.single-content li { margin-bottom: .5em; }

.single-content blockquote {
  border-left: 3px solid var(--color-brand-teal);
  margin: 1.75em 0;
  padding: .25em 0 .25em 1.15em;
  color: var(--color-text-slate);
  font-style: normal;
}

.single-content img,
.single-content figure img { border-radius: var(--radius-card); }

.single-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.single-content th,
.single-content td {
  border-bottom: 1px solid rgba(160, 160, 160, .35);
  padding: 10px 12px;
  text-align: left;
}

.single-content th {
  background: var(--color-brand-teal-soft);
  color: var(--color-brand-navy-deep);
  font-weight: 600;
}

/* ============ Table of contents sidebar ============ */
.sidebar-toc {
  border: 1px solid rgba(160, 160, 160, .4);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  padding: 20px;
}

.sidebar-toc__title {
  margin: 0 0 12px;
  color: var(--color-brand-teal-contrast);
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-toc a {
  display: block;
  border-radius: 4px;
  padding: 6px 8px;
  color: var(--color-text-slate);
  font-size: .875rem;
  line-height: 1.45;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.sidebar-toc a:hover {
  background: var(--color-brand-teal-soft);
  color: var(--color-brand-navy-deep);
}

/* ============ Author card ============ */
.tm-card {
  display: block;
  border: 1px solid rgba(160, 160, 160, .4);
  border-radius: var(--radius-card);
  background: var(--color-surface-card);
  padding: 20px;
}

.tm-card__avatar { border-radius: 999px; }

.tm-card__name {
  margin: 0 0 2px;
  color: var(--color-brand-navy-deep);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.tm-card__role {
  color: var(--color-text-muted);
  font-size: .875rem;
}

.tm-card__bio {
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: .875rem;
  line-height: 1.55;
}

.tm-card__linkedin {
  color: var(--color-brand-teal-contrast);
  font-size: .875rem;
  font-weight: 500;
}

/* The TOC and author card render inside .single-content, so the article link
   rule above was underlining them. Exclude both — they are navigation and
   metadata, not prose. */
.single-content .sidebar-toc a,
.single-content .tm-card a {
  text-decoration: none;
}

.single-content .sidebar-toc a:hover {
  text-decoration: none;
}

/* Neither is body copy, so the reading measure does not apply to them. */
.single-content .sidebar-toc,
.single-content .tm-card {
  max-width: none;
}

/* ============ Editorial hero =============================================
   Gives the Blog / News / Success Stories archives the same hero treatment as
   the product pages, without touching the Kadence Elements that drive them.

   The product hero uses three extra <span>s for its background layers; the
   archives have no such markup, so the same visual is rebuilt from the row's
   own background plus ::before (grid) and ::after (blob). Reuses the tokens
   and the drift keyframes already shipped in redesign-components.css.

   The target is the header sub-row: the one containing the H1 but no cards.
   Selecting it by shape rather than by element ID means it survives someone
   re-creating the Kadence Element. */
.blog main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item)),
.post-type-archive-news main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item)),
.post-type-archive-success_story main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item)) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(216, 243, 243, .72), transparent 44%), var(--color-surface-page);
  /* Full-bleed like the product hero. The parent row wrapper is already the
     full viewport width — the only thing boxing this in was Kadence's
     max-width:1140px — so lifting the cap is enough, and the padding puts the
     copy back on the 1140px content column. No negative margins, so no
     scrollbar-width overflow to chase. */
  max-width: none;
  width: auto;
  margin-bottom: 40px;
  padding: 56px max(20px, calc(50% - 570px)) 60px;
}

/* Grid pattern, faded out at the bottom like the product hero. */
.blog main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item))::before,
.post-type-archive-news main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item))::before,
.post-type-archive-success_story main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 76, .05) 1px, transparent 0),
    linear-gradient(180deg, rgba(0, 0, 76, .05) 1px, transparent 0);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
  pointer-events: none;
}

/* Teal blob, same drift animation as the product hero. */
.blog main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item))::after,
.post-type-archive-news main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item))::after,
.post-type-archive-success_story main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item))::after {
  content: "";
  position: absolute;
  top: -30vmax;
  right: -22vmax;
  z-index: 0;
  width: 50vmax;
  height: 50vmax;
  border-radius: 50%;
  background: radial-gradient(circle at center, #47afb4 0, transparent 70%);
  opacity: .28;
  filter: blur(80px);
  animation: redesign-hero-blob-drift-1 40s ease-in-out infinite alternate;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .blog main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item))::after,
  .post-type-archive-news main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item))::after,
  .post-type-archive-success_story main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item))::after {
    animation: none;
  }
}

/* Keep the H1 and search above the background layers. */
.blog main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item)) > *,
.post-type-archive-news main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item)) > *,
.post-type-archive-success_story main.wrap .kt-row-column-wrap:has(h1):not(:has(.kb-query-item)) > * {
  position: relative;
  z-index: 1;
}

/* Match the product hero's title scale. */
.blog main.wrap h1,
.post-type-archive-news main.wrap h1,
.post-type-archive-success_story main.wrap h1 {
  margin: 0;
  color: var(--color-brand-navy-deep);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}