/* ============================================================================
   noem.ai — Blog (archive + single article) premium re-skin
   The blog templates predate the design-unification work and are styled by the
   legacy light-theme `style.min.css` (navy/teal palette, light-grey panels).
   On the new dark brand (body #07080c) those panels render as bright light-grey
   boxes with low-contrast text. This sheet rebinds them to the brand tokens
   (tokens.css) and adds premium card treatment. Loaded only on the blog
   archive + single `article` views (see functions.php), after components.css.
   Scoped under `.premium-theme` to win specificity over style.min.css.
   ============================================================================ */

/* ---------------------------------------------------------------- HERO ---- */
/* Premium-restrained: the hero blends into the dark page (no loud gradient
   block) with a soft brand glow rising behind the heading. Both `.blog-intro`
   and its `::before` (the strip painted behind the transparent sticky header)
   are SOLID dark, so they meet seamlessly; the glow lives only on `.blog-intro`
   and fades out before its top edge, so no seam shows at the join. */
.premium-theme .blog-intro,
.premium-theme .blog-intro::before {
  background: var(--bg-deep);
}
.premium-theme .blog-intro {
  background-image:
    radial-gradient(78% 68% at 50% 60%, rgba(164,92,224, .20), transparent 64%),
    radial-gradient(62% 60% at 14% 82%, rgba(77, 97, 254, .16), transparent 60%),
    radial-gradient(56% 56% at 88% 78%, rgba(193,96,226, .13), transparent 60%);
  background-repeat: no-repeat;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  border-bottom: 1px solid var(--line-1);
  box-shadow: none;
}
/* gradient-text headline — the brand signature, replaces the flat white */
.premium-theme .blog-intro__heading {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

/* --------------------------------------------------------- BREADCRUMBS ---- */
/* Archive hero sits on the bright brand gradient → light crumbs. */
.premium-theme .blog-intro .site-breadcrumbs span { color: rgba(255, 255, 255, .72); }
.premium-theme .blog-intro .site-breadcrumbs a { color: #fff; }
.premium-theme .blog-intro .site-breadcrumbs span.breadcrumb_last { color: #fff; }
/* Single-article hero sits on the DARK page → the legacy dark crumb color
   (`--color-font` #000a3f) is invisible; rebind to the ink scale. */
.premium-theme .article-intro .site-breadcrumbs span { color: var(--ink-40); }
.premium-theme .article-intro .site-breadcrumbs a { color: var(--periwinkle); }
.premium-theme .article-intro .site-breadcrumbs span.breadcrumb_last { color: var(--ink-80); }

/* ------------------------------------------------------------ SEARCH ------ */
/* components.css forces all premium fields to dark glass (`background:
   var(--bg-glass) !important`). On the vivid gradient hero a clean white pill
   reads better and matches the original design + the solid indigo Search
   button, so override with !important. */
.premium-theme .blog-intro .search-form__container {
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(255, 255, 255, .6);
}
.premium-theme .blog-intro .search-form__input {
  color: var(--indigo-ink) !important;
  background: transparent !important;
}
.premium-theme .blog-intro .search-form__input::placeholder { color: var(--ink-40) !important; }
/* the magnifier icon mask is a dark SVG — fine on the white pill */

/* ----------------------------------------------------- CATEGORY TAGS ------ */
/* base / unchecked pill */
.premium-theme .ui-tag__name {
  --c: var(--ink-80);
  --bg: var(--bg-elev);
  --cb: var(--line-2);
  font-weight: var(--fw-medium);
}
.premium-theme .ui-tag__name:hover { --cb: var(--periwinkle); --c: var(--ink); }
/* active / checked pill — set the background explicitly. The legacy rule pipes
   `--bg` through `background-color`, which cannot render a gradient (it would
   resolve to transparent), so we paint the gradient via background-image. */
.premium-theme .ui-tag__control:checked ~ .ui-tag__name {
  color: #fff;
  background-color: transparent;
  background-image: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 8px 22px -12px rgba(164,92,224, .8);
}
/* tags pinned over a card image are decorative — dark glass chip, not a fill
   (higher specificity than the checked rule above; card tags are always checked) */
.premium-theme .article-card__tag-list .ui-tag__control:checked ~ .ui-tag__name,
.premium-theme .article-card__tag-list .ui-tag__name {
  color: #fff;
  background-color: rgba(11, 13, 19, .62);
  background-image: none;
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* -------------------------------------------------------- ARTICLE CARD ---- */
.premium-theme .article-card {
  gap: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.premium-theme .article-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-3);
  box-shadow: var(--shadow-lg);
}
.premium-theme .article-card__image-wrapper {
  height: 21rem;
  border: none;
  border-radius: 0;
  background-color: var(--bg-elev-2);
}
.premium-theme .article-card__image {
  border-radius: 0;
  aspect-ratio: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.premium-theme .article-card:hover .article-card__image { transform: scale(1.05); }
.premium-theme .article-card__info { padding: 2.2rem 2.2rem 2.4rem; }
.premium-theme .article-card__info-date { color: var(--ink-40); }
.premium-theme .article-card__heading { color: var(--ink); }
.premium-theme .article-card__heading a { color: inherit; }
.premium-theme .article-card__heading a:hover { color: var(--periwinkle); }
.premium-theme .article-card__text { color: var(--ink-60); }
.premium-theme .article-card__credentials-item { color: var(--ink-40); }

/* ----------------------------------------------------- ARCHIVE HELPERS ---- */
.premium-theme .blog-categories__form { gap: 1.2rem; }
.premium-theme .found-error { color: var(--ink-60); }

/* preloader flash during AJAX filtering — dark glass, not white */
.premium-theme .preloader {
  background-color: rgba(7, 8, 12, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* pagination */
.premium-theme .pagination,
.premium-theme .nav-links { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.premium-theme .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4rem; height: 4rem; padding: 0 1.2rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  color: var(--ink-60);
  transition: all var(--dur-fast) var(--ease-out);
}
.premium-theme .page-numbers:hover { border-color: var(--periwinkle); color: var(--ink); }
.premium-theme .page-numbers.current {
  background: var(--grad-brand); color: #fff; border-color: transparent;
}

/* ====================================================== SINGLE ARTICLE ==== */

/* reading-progress bar */
.premium-theme .article-progress__track { background: var(--grad-brand); }

/* intro meta */
.premium-theme .article-intro__heading { color: var(--ink); }
.premium-theme .article-intro__credentials { color: var(--ink-40); }
.premium-theme .article-intro__credentials-item { color: var(--ink-40); }
.premium-theme .article-intro__image {
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
}

/* body copy */
.premium-theme .article-content__section { color: var(--ink-60); }
.premium-theme .article-content__section h2,
.premium-theme .article-content__section h3,
.premium-theme .article-content__section h4,
.premium-theme .article-content__section h5,
.premium-theme .article-content__section h6 { color: var(--ink); }
.premium-theme .article-content__section a { color: var(--periwinkle); }
.premium-theme .article-content__section a:hover { color: var(--ink); }
.premium-theme .article-content__section strong,
.premium-theme .article-content__section b { color: var(--ink-80); }
.premium-theme .article-content__section ul li::before { background-color: var(--violet); }
.premium-theme .article-content__section hr { background-color: var(--line-2); }

/* blockquote — brand-tinted glass, accent rule, lighter ink */
.premium-theme .article-content__section blockquote {
  background: var(--grad-brand-soft);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--violet);
  color: var(--ink-80);
}
.premium-theme .article-content__section blockquote p { color: var(--ink-80); }
.premium-theme .article-content__section blockquote p:nth-last-of-type(1) { color: var(--ink-40); }
.premium-theme .article-content__section .colored-paragraph {
  background: var(--grad-brand-soft);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--ink-80);
}

/* table of contents / share panel */
.premium-theme .article-navigation {
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
}
.premium-theme .article-navigation__item-link { color: var(--ink-60); }
.premium-theme .article-navigation__item-link.is-active,
.premium-theme .article-navigation__sub-item-link.is-active { color: var(--periwinkle); }
.premium-theme .article-navigation__sub-item-link { color: var(--ink-40); }
.premium-theme .article-navigation__footer { border-top-color: var(--line-2); }
.premium-theme .article-navigation__small-label { color: var(--ink-40); }

/* aside CTA */
.premium-theme .article-content__aside-text { color: var(--ink); }
/* "Try It for Free" button: components.css `.premium-theme a{color:var(--periwinkle)}`
   (0,1,1) beats the button's own `.ui-button{color:var(--c)}` (0,1,0) and tints the
   label periwinkle. Force white on the gradient button in every state. */
.premium-theme .article-content__aside-btn .ui-button,
.premium-theme .article-content__aside-btn .ui-button:hover,
.premium-theme .article-content__aside-btn .ui-button__text { color: #fff; }

/* author card */
.premium-theme .article-content__author { border-top-color: var(--line-2); }
.premium-theme .article-content__author-container {
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
}
.premium-theme .article-content__author-name { color: var(--ink); }
.premium-theme .article-content__author-descr { color: var(--ink-60); }

/* "More from the Noem blog" band + carousel */
.premium-theme .grey-bg-wrapper {
  background-color: var(--bg-base);
  background-image: var(--glow-brand);
  background-repeat: no-repeat;
}
.premium-theme .more-articles__heading { color: var(--ink); }
.premium-theme .more-articles .article-card__image-wrapper { background-color: var(--bg-elev-2); }
.premium-theme .departments__swiper-nav-btn {
  background-color: var(--bg-elev);
  border: 1px solid var(--line-2);
}
.premium-theme .departments__swiper-nav-btn:hover {
  background-color: var(--indigo);
  border-color: transparent;
}