/* =========================================================
   ControlIO — Typography Primitives
   Handle: wb-type · depends on wb-tokens · Step 3 Pass A/B

   Roles, not sizes. A heading is chosen because of what it IS
   in the document, never because 32px looked right.

   Before this the theme had exactly three type classes —
   .wb-h3, .wb-label, .wb-price — so every other heading picked
   its own size and margin. That is why page headings had
   unrelated rhythm from one template to the next.

   Both halves matter:
     - element defaults, so prose and WooCommerce markup inherit
       the system with no classes at all
     - role classes, for when markup semantics and visual weight
       legitimately differ (a visual h2 that must be an <h1>)
   ========================================================= */

/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

body{
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--text);
  /* Only where the browser and font actually support it; harmless otherwise. */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------
   ROLES

   Sizes use clamp() so they scale with the viewport but are
   bounded at BOTH ends (brief 3.8). The lower bound stops a
   heading dominating a 390px phone; the upper bound stops it
   growing forever on a 3440px monitor, which is the failure
   mode pure vw units have.
   --------------------------------------------------------- */

.wbc-display,
.wbc-h1, h1,
.wbc-h2, h2,
.wbc-h3, h3,
.wbc-h4, h4{
  font-family: var(--font-display);
  color: var(--text);
  text-wrap: balance;   /* progressive: avoids a one-word last line */
}

.wbc-display{
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  line-height: var(--leading-tight);
  font-weight: 800;
  letter-spacing: -.02em;
}

.wbc-h1, h1{
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, var(--text-2xl));
  line-height: var(--leading-tight);
  font-weight: 800;
  letter-spacing: -.01em;
}

.wbc-h2, h2{
  font-size: clamp(1.25rem, 1.1rem + .8vw, var(--text-xl));
  line-height: var(--leading-snug);
  font-weight: 700;
  letter-spacing: -.01em;
}

.wbc-h3, h3{
  font-size: clamp(1.0625rem, 1rem + .35vw, var(--text-lg));
  line-height: var(--leading-snug);
  font-weight: 700;
}

.wbc-h4, h4{
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: 700;
}

.wbc-body-lg{
  font-size: var(--text-lg);
  line-height: var(--leading-base);
  font-weight: 400;
}

.wbc-body{
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: 400;
}

.wbc-body-sm{
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  font-weight: 400;
}

/* Form and metadata labels. Deliberately not italic and not muted by
   default — a label the customer has to squint at is not a label. */
.wbc-label-text{
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: 600;
  letter-spacing: .01em;
}

.wbc-caption{
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  font-weight: 400;
  color: var(--muted);
}

.wbc-eyebrow{
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* Numeric role. The price COMPONENT lives in commerce.css; this is the
   typography half, for any figure that should align in a column. */
.wbc-numeric{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---------------------------------------------------------
   HEADING RHYTHM

   Margins belong to the flow, not to the heading. Using
   margin-block-start on a sibling selector means a heading at
   the top of a container never introduces a phantom gap.
   --------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, blockquote, figure, table, pre{
  margin-block: 0;
}

* + h1, * + h2, * + .wbc-h1, * + .wbc-h2{ margin-block-start: var(--space-6); }
* + h3, * + h4, * + .wbc-h3, * + .wbc-h4{ margin-block-start: var(--space-5); }
* + p, * + ul, * + ol, * + dl,
* + blockquote, * + figure, * + table, * + pre{ margin-block-start: var(--space-4); }

/* A heading immediately followed by its own body text belongs closer to it
   than to whatever came before. */
h1 + p, h2 + p, h3 + p, h4 + p,
.wbc-h1 + p, .wbc-h2 + p, .wbc-h3 + p, .wbc-h4 + p{
  margin-block-start: var(--space-2);
}

/* ---------------------------------------------------------
   READING WIDTH (brief 3.9)

   Measured in characters, not pixels, so it holds at any font
   size and any zoom level.
   --------------------------------------------------------- */

.wbc-measure{ max-width: 72ch; }
.wbc-measure--tight{ max-width: 60ch; }
.wbc-measure--wide{ max-width: 84ch; }

/* Long-form content: product descriptions, guides, FAQs, support pages,
   checkout explanatory copy. Applied to the container, inherited by the prose. */
.wbc-prose{ max-width: 72ch; }
.wbc-prose > * + *{ margin-block-start: var(--space-4); }
.wbc-prose h2,
.wbc-prose h3{ margin-block-start: var(--space-6); }
.wbc-prose li + li{ margin-block-start: var(--space-1); }
.wbc-prose a:not([class]){
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ---------------------------------------------------------
   UTILITIES
   --------------------------------------------------------- */

.wbc-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wbc-clamp-2,
.wbc-clamp-3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wbc-clamp-2{ -webkit-line-clamp: 2; }
.wbc-clamp-3{ -webkit-line-clamp: 3; }

.wbc-text-muted{ color: var(--muted); }
.wbc-text-center{ text-align: center; }