/* Wellnessist — plain content pages (pages with no Bricks content template)
 *
 * WHY THIS EXISTS
 * Bricks stamps `#brx-content.wordpress` ONLY on pages it renders WITHOUT a content
 * template. Verified 2026-08-12 by probing nine URLs: /disclaimer/, /garantie/ and the
 * three AffiliatePress pages all carry `.wordpress`; /, /contact/, /oferte/, /blog/ and
 * /produse/ carry no class at all. So this selector is a precise handle on exactly the
 * untemplated set, and every Bricks-built page is untouched by everything below.
 *
 * WHAT WAS BROKEN
 * Those pages got no wrap, no measure and — the visible defect — no clearance for the
 * site's `position: fixed`, 77px nav (`.wn-nav`, template 442). The H1 and first
 * paragraph rendered UNDERNEATH the header, and body copy ran full-bleed edge to edge.
 * Affects the 11 legal pages, /disclaimer/ (1126) and the 3 affiliate pages (1133-1135).
 *
 * The clearance token is `--wn-nav-h: 88px` — the same global the PDP uses. Per
 * pdp-and-header-activation.md § 3, do NOT hardcode 77px here: that is the measured
 * height of today's nav, not the contract.
 */

#brx-content.wordpress {
  /* NOT --wn-measure: that is a ch value, and ch resolves against EACH element's own
     font-size, so an h1 at 2.8rem computed ~1700px, overflowed the wrap and lost its
     auto margins. A single px measure centres every child identically. */
  --wn-plain-measure: 760px;

  /* 🔴 `width: 100%` IS LOAD-BEARING. Do not drop it back to max-width alone.
     Bricks sets `body { display: flex }`, so #brx-content is a FLEX ITEM. The
     `margin-inline: auto` below is a cross-axis auto margin, which defeats
     `align-items: stretch` — so without an explicit width the item sizes to
     fit-content, i.e. min(max-content, max-width) = a flat 1240px at EVERY
     viewport. Measured 2026-08-13: 1240px of content in a 390px viewport,
     850px of horizontal overflow, on all 15 plain pages. `width: 100%` with
     border-box makes it min(100%, --wn-wrap-max) as intended. */
  width: 100%;
  box-sizing: border-box;
  max-width: var(--wn-wrap-max);
  margin-inline: auto;
  padding-top: calc(var(--wn-nav-h) + clamp(24px, 3vw, 40px));
  padding-bottom: clamp(56px, 7vw, 96px);
  padding-inline: var(--wn-wrap-pad);
}

/* Reading measure. Applied to direct children, centred, so the prose column sits in
   the middle of the wrap while wide children (tables) can still break out below. */
#brx-content.wordpress > * {
  max-width: var(--wn-plain-measure);
  margin-inline: auto;
}

#brx-content.wordpress h1 {
  margin: 0 auto 28px;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
}

#brx-content.wordpress h2 {
  margin: 44px auto 14px;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.25;
}

#brx-content.wordpress h3 {
  margin: 32px auto 10px;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.3;
}

#brx-content.wordpress p,
#brx-content.wordpress li {
  font-size: var(--wn-fs-body);
  line-height: 1.7;
}

#brx-content.wordpress p {
  margin: 0 auto 18px;
}

#brx-content.wordpress ul,
#brx-content.wordpress ol {
  margin: 0 auto 18px;
  padding-left: 1.3em;
}

#brx-content.wordpress li {
  margin-bottom: 8px;
}

#brx-content.wordpress a {
  color: var(--wn-color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#brx-content.wordpress a:hover {
  text-decoration-thickness: 2px;
}

/* Long unbroken tokens (email addresses, bare URLs, CUI/registration strings) must not
   push the prose column wider than the measure at narrow viewports. */
#brx-content.wordpress p,
#brx-content.wordpress li,
#brx-content.wordpress td,
#brx-content.wordpress th {
  overflow-wrap: break-word;
}

#brx-content.wordpress table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto 22px;
}

#brx-content.wordpress th,
#brx-content.wordpress td {
  border: 1px solid var(--wn-rule);
  padding: 10px 12px;
  text-align: left;
  font-size: var(--wn-fs-body-sm);
  line-height: 1.5;
}

#brx-content.wordpress th {
  font-weight: 700;
}

/* Tables are the one thing on the legal pages that genuinely needs the full wrap
   (the warranty matrix), and they must scroll rather than overflow the viewport. */
#brx-content.wordpress > figure.wp-block-table,
#brx-content.wordpress > .wp-block-table {
  max-width: none;
  overflow-x: auto;
}

/* AffiliatePress ships its own card UI (Vue-rendered sign-in / registration panels).
   It must not be clamped to the prose measure. Higher specificity than the `> *`
   rule above, so it wins regardless of source order. */
#brx-content.wordpress [class*="affiliatepress"],
#brx-content.wordpress [id*="affiliatepress"],
#brx-content.wordpress [class*="ap-front"] {
  max-width: none;
}

@media (max-width: 700px) {
  #brx-content.wordpress {
    padding-inline: 20px;
  }
}