/* ==========================================================================
   03-text-treatment.css — typography
   ========================================================================== */

/* ==========================================================================
   TYPOGRAPHY CONTROL PANEL — tune everything here
   Every value for body copy and the three heading levels lives in this
   one block. Change a number here and it applies sitewide; you should
   not need to touch anything below this panel.

   Notion has only three heading levels (H1, H2, H3) — there is no H4.

   LINE HEIGHT: unitless numbers (1.7, 1.2) = multiples of the font
   size, so they scale with Super's Typography sliders. Use those
   rather than px/rem.

   SPACE BEFORE / AFTER: the gap above and below a block. Adjacent
   gaps do NOT add together (CSS collapses them), so the space between
   a paragraph and the heading under it is the LARGER of the
   paragraph's "after" and the heading's "before", not the sum.

   Current values match how the site looks now, so changing nothing
   changes nothing.

   NOT controlled here (deliberate exceptions, left as-is below or in
   other files): gallery card text, gallery group headers, the
   homepage hero's line-height, eyebrow labels sitting directly above
   a divider, the page title, and navbar/button text.
   ========================================================================== */
:root {
  /* Body copy */
  --dj-body-line-height: 1.6;
  --dj-body-space-before: 0;
  --dj-body-space-after: .8rem;

  /* H1 — applies to plain, bold, and mixed H1s alike */
  --dj-h1-line-height: 1.25;
  --dj-h1-space-before: 0;
  --dj-h1-space-after: 0.5rem;
  /* Super header — bold H1 only. Independent of --dj-h1-line-height. */
  --dj-h1-bold-line-height: .9;

  /* H2 */
  --dj-h2-line-height: 1.35;
  --dj-h2-space-before: 0;
  --dj-h2-space-after: 0.5rem;

  /* H3 */
  --dj-h3-line-height: 1.35;
  --dj-h3-space-before: 0;
  --dj-h3-space-after: 0.5rem;
	
  /* H4 */
  --dj-h4-line-height: 1.6;
  --dj-h4-space-before: 0;
  --dj-h4-space-after: 0.25rem;
}

/* --------------------------------------------------------------------------
   Panel wiring — applies the values above. No numbers here on purpose;
   edit the panel, not this section.
   Each level is targeted twice (the heading itself + its inner spans)
   because Horizon's stock rules set line-height on both, and bold
   headings carry their own more specific rule.
   -------------------------------------------------------------------------- */

/* Body */
.notion-text.notion-text__content.notion-semantic-string,
.notion-semantic-string {
  line-height: var(--dj-body-line-height) !important;
}

.notion-text {
  margin-top: var(--dj-body-space-before) !important;
  margin-bottom: var(--dj-body-space-after) !important;
}

/* Stock adds a second gap inside the block; zeroed so only the
   panel's value applies and spacing stays predictable. */
.notion-text p {
  margin-bottom: 0 !important;
}

/* H1 */
h1.notion-heading,
h1.notion-heading *,
h1.notion-heading strong,
strong h1.notion-heading {
  line-height: var(--dj-h1-line-height) !important;
}

h1.notion-heading,
h1.notion-heading strong,
strong h1.notion-heading {
  margin-top: var(--dj-h1-space-before) !important;
  margin-bottom: var(--dj-h1-space-after) !important;
}

/* Super header — bold H1 gets its own line-height, overriding the
   general H1 value above. The .notion-root prefix raises specificity
   so this wins regardless of where it sits in the file. */
.notion-root h1.notion-heading strong,
.notion-root strong h1.notion-heading {
  line-height: var(--dj-h1-bold-line-height) !important;
}

/* H2 */
h2.notion-heading,
h2.notion-heading * {
  line-height: var(--dj-h2-line-height) !important;
}

h2.notion-heading,
h2.notion-heading:not(.toggle) {
  margin-top: var(--dj-h2-space-before) !important;
  margin-bottom: var(--dj-h2-space-after) !important;
}

/* H3 */
h3.notion-heading,
h3.notion-heading.notion-semantic-string,
h3.notion-heading * {
  line-height: var(--dj-h3-line-height) !important;
}

h3.notion-heading {
  margin-top: var(--dj-h3-space-before) !important;
  margin-bottom: var(--dj-h3-space-after) !important;
}

/* H4 */
h4.notion-heading,
h4.notion-heading.notion-semantic-string,
h4.notion-heading * {
  line-height: var(--dj-h4-line-height) !important;
}

h4.notion-heading {
  margin-top: var(--dj-h4-space-before) !important;
  margin-bottom: var(--dj-h4-space-after) !important;
}

/* --------------------------------------------------------------------------
   Exception: an eyebrow label sitting directly above a divider wants
   tight line-height and a smaller gap than body copy. Kept out of the
   panel deliberately — it's a one-off, not a level.
   -------------------------------------------------------------------------- */
.notion-semantic-string:has(+ .notion-divider) {
  line-height: 1.2 !important;
}

.notion-text:has(+ .notion-divider) {
  margin-bottom: .5rem !important;
}

/* --------------------------------------------------------------------------
   Gallery cards — title weight/size, no-cover text truncation
   Structure/positioning for these same has-cover / no-cover cards
   lives in 01-layout.css — this file only touches typography.
   -------------------------------------------------------------------------- */
.notion-collection-gallery .notion-collection-card:has(.notion-collection-card__cover) .notion-property__title {
  font-weight: 700 !important;
  /* Size removed — now set in Super › Databases › Title size. */
}

/* Stock clamps property text to 2 lines — fine for a caption over an
   image, wrong for a no-cover card meant to show full content */
.notion-collection-gallery .notion-collection-card:not(:has(.notion-collection-card__cover)) .notion-collection-card__property {
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   Gallery group headers — title size/weight
   Color for this same title lives in 02-design.css.
   -------------------------------------------------------------------------- */
.notion-collection-group__section-header .notion-property__title {
  font-size: 1.3em !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Navbar links & CTA button — bold
   Stock sets these to font-weight: 100, quite thin.
   -------------------------------------------------------------------------- */
.super-navbar__item-list .super-navbar__item,
.super-navbar__actions .super-navbar__cta {
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Inline pill buttons (e.g. "Learn more") — punchier text
   Stock sets these to font-weight: 100, quite thin.
   -------------------------------------------------------------------------- */
.notion-root .notion-text .notion-link strong,
.notion-root .notion-text .notion-text__content .notion-semantic-string span .notion-link strong,
.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link,
.notion-root .notion-text strong .notion-link {
  font-size: 1.1em !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Notion button blocks (e.g. "Learn more") — bold, enlarged text
   -------------------------------------------------------------------------- */
.notion-button__content {
  font-size: 1.15em !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Gallery card properties — tighter line-height
   Body copy's line-height (see the control panel above) is right for
   legibility in a column of prose
   but too airy inside a card full of short descriptions. This gives
   card text its own setting. Unitless, so it scales with whatever
   font size Super is using.
   Applies to secondary properties only — card titles keep their own
   sizing, and body copy elsewhere on the site is untouched.
   -------------------------------------------------------------------------- */
:root {
  --dj-card-line-height: 1.5;
}

.notion-collection-card .notion-collection-card__property,
.notion-collection-card .notion-collection-card__property .notion-semantic-string,
.notion-collection-card .notion-collection-card__property .notion-text__content {
  line-height: var(--dj-card-line-height) !important;
}