/* =========================================================================
   Canonical component: Section heading (Requirement 3.8)

   `.tkc-heading` owns heading type: family, size, weight, leading, color, and
   the space above and below. Level modifiers set size only, so the visual level
   is chosen independently of the markup level -- an `<h2>` that should read as a
   page title takes `.tkc-heading-1` without breaking the document outline, which
   is how the heading-level sequence stays valid (Requirement 8.x) while the
   visual hierarchy stays consistent.

     .tkc-heading-1 .. .tkc-heading-6   size, from the display scale down
     .tkc-heading-rule                  hairline rule beneath the heading
     .tkc-heading-quiet                 muted, text-family, for eyebrow labels

   Compositions add layout only: grid placement, gap, order. They may not
   declare `background`, `border`, `border-radius`, `box-shadow`, or `padding` --
   which is why the rule modifier lives here, since a rule needs both a border
   and the padding that separates it from the text.

   Every declared value reaches `assets/css/tokens.css` through `var(--tkc-...)`
   (Requirements 3.6, 9.5). `thin` names the hairline width and `0` collapses a
   leading margin; neither is a design decision a token could hold.

   Nothing here goes below `--tkc-size-100`, the prose floor, so the smallest
   heading is still at least as large as the body copy beneath it.
   ========================================================================= */

.tkc-heading {
  font-family: var(--tkc-font-display);
  font-size: var(--tkc-size-500);
  font-weight: var(--tkc-weight-bold);
  line-height: var(--tkc-leading-tight);
  color: var(--tkc-color-text);
  margin-block: var(--tkc-space-6) var(--tkc-space-4);
  text-wrap: balance;
}

/* A heading that opens its container carries no space above it: the container's
   own padding already provides it, and doubling them is how the current layout
   drifts between tiles. */
.tkc-heading:first-child {
  margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   Level modifiers -- size only
   ------------------------------------------------------------------------- */

.tkc-heading-1 {
  font-size: var(--tkc-size-700);
}

.tkc-heading-2 {
  font-size: var(--tkc-size-600);
}

.tkc-heading-3 {
  font-size: var(--tkc-size-500);
}

.tkc-heading-4 {
  font-size: var(--tkc-size-400);
}

.tkc-heading-5 {
  font-size: var(--tkc-size-300);
}

.tkc-heading-6 {
  font-size: var(--tkc-size-200);
}

/* -------------------------------------------------------------------------
   Treatment modifiers
   ------------------------------------------------------------------------- */

/* The section rule: a hairline in the border token, separated from the text by
   one spacing step. Padding rather than margin so the rule belongs to the
   heading box and a composition never needs to reach for either. */
.tkc-heading-rule {
  padding-block-end: var(--tkc-space-2);
  border-block-end: thin solid var(--tkc-color-border);
}

/* An eyebrow or a label above a heading: text family, muted, medium weight. */
.tkc-heading-quiet {
  font-family: var(--tkc-font-text);
  font-weight: var(--tkc-weight-medium);
  line-height: var(--tkc-leading-normal);
  color: var(--tkc-color-text-muted);
}

/* -------------------------------------------------------------------------
   Reduced motion (Requirement 3.10)

   Headings declare no transition and no animation of their own, but they are a
   common target for a staggered reveal. Under `reduce` every heading is held at
   zero duration in its final visible state, so a reveal added by the
   composition layer cannot leave one unpainted.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tkc-heading {
    transition-duration: 0s;
    transition-delay: 0s;
    animation-duration: 0s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    opacity: 1;
    transform: none;
    visibility: visible;
  }
}