/* rte-content.css
   Deploy to: public/fileadmin/twipla/typo3-website-theme/css/rte-content.css
   Loaded twice: on the front end (page.includeCSS, after legacy-bridge.css) and inside the
   RTE editor (contentsCss in Twipla.yaml). Both load after core.css, so all tokens exist.

   Scope: text content on the front end and the editor itself. To cover another content
   block that outputs RTE text, add its wrapper class to the list inside :is(...) in each
   rule, or define one custom property below and use it everywhere. */

/* ---------- Editor only: base look so editors see the real fonts ---------- */
.ck-content {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  color: var(--color-text);
}

/* ---------- Headings (H2, H3, H4) ---------- */
:is(.ck-content, .frame-type-text, .frame-type-textpic, .frame-type-textmedia) h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-text);
  margin: 1.6em 0 0.5em;
}
:is(.ck-content, .frame-type-text, .frame-type-textpic, .frame-type-textmedia) h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-tracking);
  color: var(--text-h3-color, var(--color-text));
  margin: 1.5em 0 0.5em;
}
:is(.ck-content, .frame-type-text, .frame-type-textpic, .frame-type-textmedia) h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  letter-spacing: var(--text-h4-tracking);
  color: var(--color-text);
  margin: 1.4em 0 0.4em;
}
:is(.ck-content, .frame-type-text, .frame-type-textpic, .frame-type-textmedia) :is(h2, h3, h4):first-child {
  margin-top: 0;
}

/* ---------- Emphasis ---------- */
.tw-accent { color: var(--color-primary); }
.tw-muted { color: var(--color-text-muted); }

/* ---------- Callouts ---------- */
.tw-callout {
  padding: 16px 20px;
  background: var(--color-core-50);
  border: 1px solid var(--color-core-200);
  border-radius: var(--radius-md, 12px);
  color: var(--color-text);
}
.tw-callout--warning {
  background: var(--color-accent-50);
  border-color: var(--color-accent-200);
  color: var(--color-accent-900);
}

/* ---------- Links as buttons ---------- */
a.tw-button {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: 600;
  text-decoration: none;
}
a.tw-button:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
a.tw-button.tw-button--secondary { background: transparent; color: var(--color-primary); }
a.tw-button.tw-button--secondary:hover { background: var(--color-primary-subtle); }

/* ---------- Pull quote ---------- */
blockquote.tw-pullquote {
  margin: 1.6em 0;
  padding: 0;
  border: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line-height);
  letter-spacing: var(--text-h4-tracking);
  color: var(--color-primary);
}

/* ---------- Tables: same language as the pricing comparison ----------
   Only tables with the tw-table class are touched. Old tables (class="table") keep
   their current look until we migrate them. */
table.tw-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5em;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line-height);
  letter-spacing: var(--text-body-sm-tracking);
}
table.tw-table th,
table.tw-table td {
  padding: 14px 12px;
  text-align: left;
  vertical-align: top;
  border-top: var(--border-default);
  color: var(--color-text-muted);
}
table.tw-table th:first-child,
table.tw-table td:first-child { padding-left: 20px; }
table.tw-table thead th {
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 0;
  background: var(--color-core-neutral-100);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
}
table.tw-table tbody th {
  font-weight: 400;
  color: var(--color-text);
}
table.tw-table caption {
  caption-side: bottom;
  padding: 10px 20px 0;
  text-align: left;
  font-size: var(--text-caption-size);
  color: var(--color-text-subtle);
}

/* Compact */
table.tw-table--compact th,
table.tw-table--compact td { padding: 8px 10px; }
table.tw-table--compact th:first-child,
table.tw-table--compact td:first-child { padding-left: 14px; }

/* Comparison: first column is the label, the other columns are centered.
   Bold text in a cell reads as a "yes" and takes the brand color, like .is-yes in pricing. */
table.tw-table--comparison th:not(:first-child),
table.tw-table--comparison td:not(:first-child) { text-align: center; }
table.tw-table--comparison td strong { color: var(--color-core-700); font-weight: 600; }