/* =========================================================
   Theme D — blog-only overrides
   Blog-specific adjustments for theme D, kept out of theme-D.css
   (shared with the site vitrine, already deployed on live client
   sites) and out of assets/css/blog.css (theme-agnostic by default).
   Loaded only when brand.ui.themePreset = "D" on a blog project.
   ========================================================= */

/* theme-D.css sets a generic `html.theme-D h1/h2` rule sized for
   its own hero context (48-86px) — with no `.hero` wrapper around
   blog titles, that generic rule applies unmoderated. Scaled back
   down here instead. */
html.theme-D .blogHero h1,
html.theme-D .postTitle,
html.theme-D .sgTitle,
html.theme-D .mzHeroInner h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.12;
}
html.theme-D .postCardTitle,
html.theme-D .featuredCardTitle {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  padding-bottom: 0;
}

/* Card visuals removed in favor of hairline separators, matching
   theme D's own list idiom (see .faqItem in theme-D.css). */
html.theme-D .postList {
  gap: 0;
}
html.theme-D .postCard {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  background: transparent;
  padding: 30px 0;
}
html.theme-D .postCard:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* Right below a featured post, .featuredCard already draws its own
   border-bottom hairline as the section divider — without this, the
   first .postCard's own border-top drew a second hairline a few px
   below it, reading as one separator too many. */
html.theme-D .blogFeaturedSection + .blogListSection .postCard:first-child {
  border-top: none;
}
html.theme-D .featuredCard {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 0 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Classic square checkbox instead of the default theme's circular
   checkmark — matches theme D's flatter, editorial style. */
html.theme-D .checklistItem input[type="checkbox"] {
  border-radius: 3px;
}
/* theme-D.css decorates every <li> in .richtext with a "✓" — our
   checklist items already have their own checkbox, so suppress the
   duplicate decorative tick there specifically. */
html.theme-D .richtext .checklistItem::before {
  content: none;
}
/* theme-D.css's generic `.richtext li` rule (align-items: center,
   margin: 0, padding: 0 — sized for its own short single-line checkmark
   items) is more specific than blog-post.css's .checklistItem rules and
   was silently winning: checkbox centered instead of top-aligned, and
   the spacing between checklist points collapsed to 0. Re-assert both
   here, scoped to theme D's blog checklist specifically. */
html.theme-D .richtext .checklistItem {
  align-items: flex-start;
}
html.theme-D .richtext .checklistItem + .checklistItem {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
}
/* html.theme-D strong dims all bold text to 500 — re-assert 700 here,
   scoped to theme D only. Default theme's bold weight is untouched
   until its own heading/bold treatment is decided (see blog-post.css). */
html.theme-D .richtext strong {
  font-weight: 700;
}
/* social-grid index tiles (blog-index-social-grid.css) — same treatment
   as the checklist lead: body font instead of the heading font, bolder
   weight. Default theme's tiles keep their original heading-font/600
   look until decided. */
html.theme-D .sgTileTitle {
  font-family: var(--ff-body);
  font-weight: 700;
}
/* Thin vertical line instead of the default theme's "·" dot between
   blogCategoryNav items — matches theme D's flatter, hairline-driven
   idiom (see .postCard border-top above) better than a round dot. */
html.theme-D .blogCategoryNavItem + .blogCategoryNavItem::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin: 0 var(--space-lg);
  background: rgba(0, 0, 0, 0.15);
  vertical-align: -0.1em;
}
/* Borderless cards under theme D, matching the flatter editorial look
   it already gives .postCard/.featuredCard on the "list" layout
   (see below) — magazine's own card classes weren't covered by that
   existing override. */
html.theme-D .mzLargeCard,
html.theme-D .mzSmallCard {
  border: none;
}
/* theme-D.css's "✓" applies to every <li> regardless of list type — on a
   numbered list (<ol>, e.g. a sequence of steps), that replaces the
   meaningful "1. / 2. / 3." with an identical tick on every item,
   erasing the order. Restore real numbers for <ol> specifically; <ul>
   keeps the checkmark treatment as-is. */
html.theme-D .richtext ol {
  counter-reset: theme-d-ol;
}
html.theme-D .richtext ol > li {
  counter-increment: theme-d-ol;
}
html.theme-D .richtext ol > li::before {
  content: counter(theme-d-ol) ".";
}