/* Jeddle Learn — editorial blog + AEO styles.
 * Loaded only on single Learn posts, the /learn hub, and blog_category hubs
 * (see includes/blog.php). Scoped to body.jeddle-learn / .jeddle-* classes so
 * it can't affect other pages. The site header (#masthead) is fixed, 122px,
 * transparent with white links, so Learn headers are deep-purple bands that
 * the nav sits on and that clear the fixed bar. */

/* =========================================================================
 * 1. ARTICLE — header band
 * ====================================================================== */

.jeddle-article {
  background: #fff;
}

.jeddle-article__header {
  background: linear-gradient(152deg, #2b1a66 0%, #5a2bd8 100%);
  padding: 140px 1.5rem 2.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* faint squiggle echo of the brand mark, decorative only */
.jeddle-article__header::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.10), transparent 60%);
  pointer-events: none;
}
.jeddle-article__header-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}
.jeddle-article__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9b6ff;
  text-decoration: none;
  margin: 0 0 0.85rem;
}
.jeddle-article__eyebrow:hover { color: #fff; }
.jeddle-article__title {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.12;
  font-weight: 800;
  color: #fff;
  margin: 0;
  max-width: 18ch;
}
.jeddle-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
}
.jeddle-article__meta .jeddle-article__dot { opacity: 0.5; }

/* breadcrumb sits in the purple band */
.jeddle-article__header .jeddle-learn-breadcrumb {
  font-size: 0.82rem;
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.7);
}
.jeddle-article__header .jeddle-learn-breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.jeddle-article__header .jeddle-learn-breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* =========================================================================
 * 2. ARTICLE — asymmetric content + sticky rail
 * ====================================================================== */

.jeddle-article__layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 4.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
}
@media (min-width: 1040px) {
  .jeddle-article__layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }
}
.jeddle-article__main {
  max-width: 720px;
  min-width: 0;
}

/* rail */
.jeddle-article__rail { display: none; }
@media (min-width: 1040px) {
  .jeddle-article__rail { display: block; }
}
.jeddle-article__rail-inner { position: sticky; top: 140px; }

.jeddle-article__toc { margin: 0 0 1.5rem; }
.jeddle-article__toc-title {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a7fb0;
  margin: 0 0 0.7rem;
}
.jeddle-article__toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid #ece9f5; }
.jeddle-article__toc li { margin: 0; }
.jeddle-article__toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.9rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: #5a5670;
  font-size: 0.9rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.jeddle-article__toc a:hover { color: #6b21ff; border-left-color: #6b21ff; }

.jeddle-article__rail-cta {
  border: 1px solid #e4ddff;
  border-radius: 14px;
  padding: 1.35rem 1.4rem;
  background: linear-gradient(150deg, #f6f3ff, #efeaff);
}
.jeddle-article__rail-cta-kicker {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b21ff;
  margin-bottom: 0.45rem;
}
.jeddle-article__rail-cta-text { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.5; color: #3f3a52; }
.jeddle-article__rail-cta-btn {
  display: block;
  text-align: center;
  background: #6b21ff;
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 0.65rem 1rem;
  border-radius: 9px;
  transition: background 0.15s ease;
}
.jeddle-article__rail-cta-btn:hover { background: #571bcc; color: #fff; }

/* =========================================================================
 * 3. ARTICLE — body components
 * ====================================================================== */

/* Answer-first lede — the chunk answer engines quote. */
.jeddle-learn-answer {
  position: relative;
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 500;
  color: #2b1a66;
  margin: 0 0 2.25rem;
  padding: 1.3rem 1.5rem 1.4rem;
  border-left: 4px solid #6b21ff;
  background: #f6f3ff;
  border-radius: 0 12px 12px 0;
}
.jeddle-learn-answer::before {
  content: "Quick answer";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b21ff;
  margin-bottom: 0.5rem;
}
.jeddle-learn-answer p { margin: 0 0 0.6rem; }
.jeddle-learn-answer p:last-child { margin-bottom: 0; }

/* Video embed (responsive 16:9). */
.jeddle-learn-video { margin: 0 0 2.25rem; }
.jeddle-learn-video__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgba(43, 26, 102, 0.14);
}
.jeddle-learn-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Key takeaways card. */
.jeddle-learn-takeaways {
  margin: 0 0 2.5rem;
  padding: 1.4rem 1.6rem 1.5rem;
  border: 1px solid #e4ddff;
  border-radius: 14px;
  background: #faf9ff;
}
.jeddle-learn-takeaways__title {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.9rem;
  color: #4a2db5;
}
.jeddle-learn-takeaways ul { margin: 0; padding: 0; list-style: none; }
.jeddle-learn-takeaways li {
  position: relative;
  padding-left: 1.85rem;
  margin: 0.6rem 0;
  line-height: 1.55;
  color: #3f3a52;
}
.jeddle-learn-takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #6b21ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.72rem no-repeat;
}

/* Body prose typography. */
.jeddle-article__main > p,
.jeddle-article__main > ul,
.jeddle-article__main > ol { color: #3f3a52; }
.jeddle-article__main p { font-size: 1.075rem; line-height: 1.72; margin: 0 0 1.35rem; }
.jeddle-article__main h2 {
  font-size: clamp(1.4rem, 1rem + 1.3vw, 1.8rem);
  line-height: 1.25;
  font-weight: 800;
  color: #1f1147;
  margin: 2.75rem 0 1rem;
  scroll-margin-top: 140px;
}
.jeddle-article__main h3 { font-size: 1.2rem; color: #2b1a66; margin: 2rem 0 0.75rem; }
.jeddle-article__main ul,
.jeddle-article__main ol { margin: 0 0 1.35rem; padding-left: 1.3rem; line-height: 1.7; }
.jeddle-article__main li { margin: 0.4rem 0; }
.jeddle-article__main a { color: #6b21ff; text-decoration: underline; text-underline-offset: 2px; }
.jeddle-article__main a:hover { color: #571bcc; }

/* Comparison tables. */
.jeddle-article__main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.97rem;
  border: 1px solid #e8e4f3;
  border-radius: 12px;
  overflow: hidden;
}
.jeddle-article__main table th,
.jeddle-article__main table td {
  border-bottom: 1px solid #ece9f5;
  padding: 0.7rem 0.95rem;
  text-align: left;
  vertical-align: top;
}
.jeddle-article__main table thead th { background: #2b1a66; color: #fff; font-weight: 600; }
.jeddle-article__main table tbody tr:nth-child(even) { background: #faf9ff; }
.jeddle-article__main table tbody tr:last-child td { border-bottom: 0; }

/* FAQ. */
.jeddle-learn-faq { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid #ece9f5; }
.jeddle-learn-faq__title {
  font-size: clamp(1.4rem, 1rem + 1.3vw, 1.8rem);
  font-weight: 800;
  color: #1f1147;
  margin: 0 0 1.25rem;
}
.jeddle-learn-faq__item { padding: 1.1rem 0; border-bottom: 1px solid #f0eef7; }
.jeddle-learn-faq__item:last-child { border-bottom: 0; }
.jeddle-learn-faq__q { margin: 0 0 0.45rem; font-size: 1.12rem; font-weight: 700; color: #2b1a66; }
.jeddle-learn-faq__a { color: #4a4a4a; line-height: 1.65; }
.jeddle-learn-faq__a p:last-child { margin-bottom: 0; }

/* End-of-article conversion CTA. */
.jeddle-learn-cta {
  margin: 3rem 0 0;
  padding: 2rem 2.25rem 2.25rem;
  border: 1px solid #e4ddff;
  border-radius: 18px;
  background: linear-gradient(140deg, #f3efff 0%, #ece4ff 55%, #e7defc 100%);
}
.jeddle-learn-cta__title { margin: 0 0 0.5rem; font-size: 1.65rem; font-weight: 800; color: #2b1a66; }
.jeddle-learn-cta__lead { margin: 0 0 1.25rem; font-size: 1.08rem; line-height: 1.55; color: #3a3a3a; }
.jeddle-learn-cta__actions { margin: 0 0 1rem; }
.jeddle-learn-cta__button {
  display: inline-block;
  background: #6b21ff;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: 10px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.jeddle-learn-cta__button:hover { background: #571bcc; color: #fff; transform: translateY(-1px); }
.jeddle-learn-cta__resources { margin: 0; font-size: 0.97rem; line-height: 1.55; color: #4a4a4a; }
.jeddle-learn-cta__resources a { color: #6b21ff; }

/* Native share row. */
.jeddle-article__share {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid #ece9f5;
}
.jeddle-article__share-label { font-weight: 700; color: #1f1147; font-size: 0.95rem; }
.jeddle-article__share-btns { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.jeddle-article__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f3eeff;
  color: #6b21ff;
  border: 1px solid #e4ddff;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jeddle-article__share-btn:hover { background: #6b21ff; color: #fff; border-color: #6b21ff; }
.jeddle-article__share-btn svg { display: block; }
.jeddle-article__share-copy { width: auto; padding: 0 1rem; border-radius: 20px; font-weight: 600; font-size: 0.88rem; }

/* =========================================================================
 * 4. HUB (/learn) + pillar archives
 * ====================================================================== */

.jeddle-hub { background: #fff; }

.jeddle-hub__hero {
  background: linear-gradient(152deg, #2b1a66 0%, #5a2bd8 100%);
  color: #fff;
  padding: 140px 1.5rem 3rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.jeddle-hub__hero::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at 55% 45%, rgba(255, 255, 255, 0.10), transparent 62%);
  pointer-events: none;
}
.jeddle-hub__hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
.jeddle-hub__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9b6ff;
  text-decoration: none;
  margin: 0 0 0.85rem;
}
a.jeddle-hub__eyebrow:hover { color: #fff; }
.jeddle-hub__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.85rem); line-height: 1.12; font-weight: 800; color: #fff; margin: 0 0 1rem; }
.jeddle-hub__lede { font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin: 0; }
.jeddle-hub__lede p { margin: 0; }

/* pillar filter chips */
.jeddle-hub__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 1180px;
  margin: 2.25rem auto 0;
  padding: 0 1.5rem;
}
.jeddle-hub__chip {
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid #e4ddff;
  background: #fff;
  color: #4a2db5;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.jeddle-hub__chip:hover { border-color: #6b21ff; color: #6b21ff; }
.jeddle-hub__chip.is-active { background: #6b21ff; border-color: #6b21ff; color: #fff; }

.jeddle-hub__body { max-width: 1180px; margin: 0 auto; padding: 2.25rem 1.5rem 4.5rem; }

/* card grid */
.jeddle-learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.75rem;
}

.jeddle-learn-card {
  margin: 0;
  border: 1px solid #ece9f5;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.jeddle-learn-card:hover {
  box-shadow: 0 14px 36px rgba(43, 26, 102, 0.13);
  transform: translateY(-3px);
  border-color: #e0d7fb;
}
.jeddle-learn-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.jeddle-learn-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #efeaff, #f6f3ff);
  overflow: hidden;
}
.jeddle-learn-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jeddle-learn-card__media-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.jeddle-learn-card__media-fallback img { width: 45%; height: auto; object-fit: contain; opacity: 0.45; }
.jeddle-learn-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.6rem; }
.jeddle-learn-card__pillar {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #6b21ff;
  margin-bottom: 0.5rem;
}
.jeddle-learn-card__title { margin: 0 0 0.6rem; font-size: 1.25rem; line-height: 1.3; font-weight: 800; color: #1f1147; }
.jeddle-learn-card__excerpt { margin: 0 0 1.1rem; color: #5a5670; line-height: 1.55; font-size: 0.97rem; flex: 1; }
.jeddle-learn-card__more { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: #6b21ff; font-size: 0.95rem; }
.jeddle-learn-card__arrow { transition: transform 0.15s ease; }
.jeddle-learn-card:hover .jeddle-learn-card__arrow { transform: translateX(4px); }

.jeddle-hub__pagination { margin-top: 2.5rem; }

/* =========================================================================
 * 5. Responsive
 * ====================================================================== */
@media (max-width: 880px) {
  .jeddle-article__header { padding-top: 104px; }
  .jeddle-hub__hero { padding-top: 104px; }
}
@media (max-width: 600px) {
  .jeddle-article__header { padding-left: 1.25rem; padding-right: 1.25rem; }
  .jeddle-article__layout { padding-left: 1.25rem; padding-right: 1.25rem; }
  .jeddle-learn-grid { grid-template-columns: 1fr; }
  .jeddle-learn-answer { font-size: 1.1rem; }
}

/* =========================================================================
 * 6. Fixes + polish (2026-07) — override theme common-styles leakage
 * ====================================================================== */

/* 6.1 End-of-article CTA button text was purple-on-purple: the scoped
 * `.jeddle-article__main a { color:#6b21ff }` (0,2,1) beat the button's own
 * `.jeddle-learn-cta__button { color:#fff }` (0,1,0). Re-assert white at
 * matching specificity, and suppress the theme's injected underline ::after. */
.jeddle-article__main a.jeddle-learn-cta__button,
.jeddle-article__main a.jeddle-learn-cta__button:hover,
.jeddle-article__main a.jeddle-learn-cta__button:focus { color: #fff; }
.jeddle-article__main a.jeddle-learn-cta__button::after { content: none !important; display: none !important; }
.jeddle-learn-cta__resources a::after { content: none !important; display: none !important; }

/* 6.2 The theme's common-styles injects `article ul li::before { content:"•" }`
 * (specificity 0,3,5) which list-style:none cannot remove and which was
 * painting stray dots on the TOC and overriding our takeaway checkmarks.
 * Neutralise it on every Learn component, then re-apply the marks we want. */
body.jeddle-learn .jeddle-article__toc li::before,
body.jeddle-learn .jeddle-article__toc li::after,
body.jeddle-learn .jeddle-article__main li::before,
body.jeddle-learn .jeddle-learn-faq li::before,
body.jeddle-learn .jeddle-learn-takeaways li::before,
body.jeddle-learn .jeddle-learn-card li::before { content: none !important; display: none !important; }
.jeddle-article__toc ul { list-style: none !important; }
.jeddle-article__toc li { padding-left: 0; }

/* body prose lists: clean native markers (theme • removed above) */
.jeddle-article__main ul { list-style: disc outside; }
.jeddle-article__main ol { list-style: decimal outside; }

/* re-assert the takeaways checkmark (theme • otherwise wins on specificity) */
body.jeddle-learn .jeddle-learn-takeaways li::before {
  content: "" !important;
  display: block !important;
  position: absolute; left: 0; top: 0.18em; margin: 0 !important;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: #6b21ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.72rem no-repeat !important;
}

/* 6.3 Branded per-pillar gradient placeholder for cards with no featured image
 * (avoids the faint-squiggle empty look + Kinsta's broken-webp-for-new-images). */
.jeddle-learn-card__media-fallback {
  display: flex; align-items: flex-end; justify-content: flex-start;
  width: 100%; height: 100%; padding: 1.05rem 1.15rem;
  background: linear-gradient(135deg, #2b1a66 0%, #5a2bd8 115%);
  position: relative; overflow: hidden;
}
.jeddle-learn-card__media-fallback img { display: none; } /* retire the old squiggle */
.jeddle-learn-card__media-fallback::before {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, rgba(255,255,255,0.16), transparent 62%);
}
.jeddle-learn-card__media-fallback::after {
  content: ""; position: absolute; left: -46px; bottom: -66px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0,222,254,0.20), transparent 60%);
}
.jeddle-learn-card__ph-label {
  position: relative; z-index: 1; color: #fff; font-weight: 800;
  font-size: 1.02rem; line-height: 1.25; letter-spacing: 0.01em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.18); max-width: 92%;
}
.jeddle-learn-card__media-fallback[data-pillar="ai-in-education"] { background: linear-gradient(135deg, #201a5e 0%, #0093c7 125%); }
.jeddle-learn-card__media-fallback[data-pillar="feedback-assessment"] { background: linear-gradient(135deg, #2b1a66 0%, #6b21ff 120%); }
.jeddle-learn-card__media-fallback[data-pillar="teaching-practice"] { background: linear-gradient(135deg, #3a1c66 0%, #b043c9 125%); }
.jeddle-learn-card__media-fallback[data-pillar="edtech-tools"] { background: linear-gradient(135deg, #1c2a63 0%, #23b487 130%); }
.jeddle-learn-card__media-fallback[data-pillar="using-jeddle"] { background: linear-gradient(135deg, #2b1a66 0%, #7a3ce0 120%); }

/* 6.4 Numbered pagination (the_posts_pagination) as a centred button row. */
.jeddle-hub__pagination { margin-top: 3.25rem; }
.jeddle-hub__pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.jeddle-hub__pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 0.8rem; border-radius: 11px;
  border: 1px solid #e4ddff; background: #fff; color: #4a2db5 !important;
  font-weight: 600; font-size: 0.98rem; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.jeddle-hub__pagination a.page-numbers:hover { border-color: #6b21ff; color: #6b21ff !important; background: #faf9ff; }
.jeddle-hub__pagination .page-numbers.current { background: #6b21ff; border-color: #6b21ff; color: #fff !important; }
.jeddle-hub__pagination .page-numbers.dots { border: 0; background: none; min-width: 1.5rem; color: #8a7fb0 !important; }
.jeddle-hub__pagination .page-numbers.prev,
.jeddle-hub__pagination .page-numbers.next { padding: 0 1.1rem; }
.jeddle-hub__pagination .page-numbers::after { content: none !important; display: none !important; }
.jeddle-hub__pagination .screen-reader-text { position: absolute; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
  .jeddle-hub__pagination .page-numbers { min-width: 40px; height: 40px; padding: 0 0.55rem; }
}

/* 6.6 Filter chips: clear breathing room down to the card grid. */
.jeddle-hub__filter { margin: 0.25rem auto 2.75rem; }

/* 6.5 Keep the purple hero on paged hub views too, so the fixed white site nav
 * always sits on a dark backdrop (readable) and content clears the fixed header. */
.jeddle-hub__hero.is-paged { padding-top: 132px; padding-bottom: 1.9rem; }
.jeddle-hub__hero.is-paged .jeddle-hub__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); margin: 0; }
@media (max-width: 880px) { .jeddle-hub__hero.is-paged { padding-top: 96px; } }

/* =========================================================================
 * 7. AEO comparison page (template-comparison.php)
 *
 * Shares this stylesheet so it inherits the filemtime cache-busting in
 * jeddle_blog_enqueue_assets(). Scoped to .jeddle-cmp / .jeddle-cmp-header so
 * nothing here can reach a Learn article or any other page.
 *
 * The purple header band is load-bearing, not decorative: #masthead is
 * position:fixed, ~122px tall, transparent, with WHITE links, so a light page
 * top renders the nav invisible and slides the H1 under the bar.
 * ====================================================================== */

.jeddle-cmp-header {
  background: #301b72;
  color: #fff;
  padding: 140px 1.25rem 2.25rem;
}
@media (max-width: 880px) { .jeddle-cmp-header { padding-top: 104px; } }

.jeddle-cmp-header__inner { max-width: 880px; margin: 0 auto; }
body .jeddle-cmp-header__inner h1 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.4rem);
  line-height: 1.2;
}
.jeddle-cmp-header__meta {
  margin: 0.7rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
}

.jeddle-cmp { max-width: 880px; margin: 0 auto; padding: 2.25rem 1.25rem 3rem; line-height: 1.6; }
.jeddle-cmp h2 { margin: 2.25rem 0 0.9rem; font-size: 1.4rem; color: #301b72; }
.jeddle-cmp h3 { margin-top: 0; font-size: 1.05rem; color: #301b72; }

.jeddle-cmp__notice {
  border: 1px solid #f0c36d;
  background: #fdf6e3;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.93rem;
}
.jeddle-cmp__notice code {
  background: rgba(48, 27, 114, 0.08);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.jeddle-cmp__verdict {
  font-size: 1.08rem;
  background: #f5f3fb;
  border-left: 4px solid #6b21ff;
  padding: 1rem 1.25rem;
  border-radius: 6px;
  margin: 0 0 1.25rem;
}

/* Wide tables scroll inside their own box rather than the page body. */
.jeddle-cmp__tablewrap { overflow-x: auto; margin: 1.25rem 0; }
.jeddle-cmp table { width: 100%; border-collapse: collapse; font-size: 0.96rem; min-width: 520px; }
.jeddle-cmp th, .jeddle-cmp td {
  border: 1px solid #e3e6ee;
  padding: 0.62rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.jeddle-cmp thead th { background: #301b72; color: #fff; font-weight: 600; }
.jeddle-cmp tbody th { background: #faf9fd; font-weight: 600; }

.jeddle-cmp__best { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.75rem 0; }
.jeddle-cmp__card { border: 1px solid #e3e6ee; border-radius: 10px; padding: 1.1rem 1.25rem; }
@media (max-width: 640px) { .jeddle-cmp__best { grid-template-columns: 1fr; } }

/* The theme's common-styles injects `article ul li::before { content:"•" }` at
 * a specificity (0,3,5) that list-style:none cannot beat — same fix as §6.2. */
.jeddle-cmp__card ul { list-style: disc; padding-left: 1.15rem; margin: 0; }
.jeddle-cmp__card ul li::before { content: none !important; }
.jeddle-cmp__card ul li { margin-bottom: 0.4rem; }

.jeddle-cmp__faq { border-bottom: 1px solid #eee; padding: 0.8rem 0; }
.jeddle-cmp__faq summary { font-weight: 600; cursor: pointer; color: #301b72; }
.jeddle-cmp__faq p { margin: 0.6rem 0 0; }

.jeddle-cmp__body { margin-top: 1.75rem; }

.jeddle-cmp__cta {
  display: inline-block;
  margin-top: 1.4rem;
  background: #6b21ff;
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}
/* Beat the theme's `.jeddle-article__main a { color:#6b21ff }`-style rules at
 * matching specificity, or the label renders purple-on-purple (see §6.1). */
.jeddle-cmp .jeddle-cmp__cta,
.jeddle-cmp a.jeddle-cmp__cta { color: #fff; }
.jeddle-cmp a.jeddle-cmp__cta:hover,
.jeddle-cmp a.jeddle-cmp__cta:focus { background: #5a18db; color: #fff; }

/* 8. Provenance: byline, review date, and third-party fact-check notice.
 * Dating is an E-E-A-T signal and a safety rail. A reader deciding whether to
 * trust advice about a syllabus needs to know how old it is, and a claim about
 * someone else's product goes stale silently. */
.jeddle-article__verified {
  margin: 0 0 1.5rem;
  padding: 0.7rem 0.95rem;
  border-left: 3px solid #6b21ff;
  background: #f7f5fd;
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4a4560;
}
.jeddle-article__verified time { font-weight: 600; color: #301b72; }

/* 9. Related reading. Topical clustering: the library had 187 articles and zero
 * article-to-article links, so every page was an orphan. Rendered from the
 * pillar taxonomy so it needs no prose changes and cannot go stale. */
.jeddle-related { margin: 2.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid #e3e6ee; }
body .jeddle-related__title { font-size: 1.15rem; color: #301b72; margin: 0 0 1rem; }
.jeddle-related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.jeddle-related__list li::before { content: none !important; }
.jeddle-related__item { padding: 0; margin: 0; }
.jeddle-related .jeddle-related__link {
  display: block;
  font-weight: 600;
  color: #6b21ff;
  text-decoration: none;
  line-height: 1.35;
}
.jeddle-related .jeddle-related__link:hover,
.jeddle-related .jeddle-related__link:focus { text-decoration: underline; }
.jeddle-related__teaser { display: block; margin-top: 0.25rem; font-size: 0.9rem; color: #5a5570; line-height: 1.5; }
@media (min-width: 720px) { .jeddle-related__list { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.75rem; } }

/* The site header is a single 90px row only below 768px and again from 1024px;
 * between those it stacks brand over nav - 122px up to ~860px, and 142px once
 * the nav wraps. All three paddings below were sized for the 90px row, so the
 * first line of each header sat underneath the fixed, fully opaque site header.
 * Restated across the whole tall-header band at 156/148, which clears the band
 * maximum of 142. Each variant keeps the clearance it already has under the
 * 90px header - 18px full hub, 10px paged hub, 14px article.
 * .is-paged needs its own line: the paged padding is set at (0,2,0), so a bare
 * .jeddle-hub__hero override could never reach it and the paged hub and the
 * /topics/ archives would keep the bug. .jeddle-article__header has the
 * identical shape and the same bug on ~187 article pages, where it hid the
 * whole breadcrumb. */
@media (min-width: 768px) and (max-width: 1023px) {
  .jeddle-hub__hero { padding-top: 156px; }
  .jeddle-hub__hero.is-paged { padding-top: 148px; }
  .jeddle-article__header { padding-top: 156px; }
}