/* tibu-afrika sections/long-form.css */

/*
 * Plan 07-09's section partial: the Long-form content section
 * (patterns/long-form.php, D-05), used for the Privacy body and longer
 * narratives. Loaded right after theme.css on the front end and in the
 * editor (includes/assets.php), under the same rules: presets and
 * color-mix() only, no hex, no preset variable declared (D-13). Every
 * selector is scoped under .tibu-section--long-form.
 *
 * The prose follows the Astro large reading style (07-UI-SPEC Typography):
 * an 18px body at 1.778 line height inside a 48rem measure; h2 30px, 800,
 * 1.2 and h3 24px, 700, 1.333, both Poppins in brand maroon; brand-blue
 * inline links. The 30px h2 is a literal inside this rule, never a preset
 * variable (D-13): the section-title preset steps up at wider screens and
 * the long-form h2 does not.
 *
 * Tables: includes/prose.php makes each table's figure a labelled,
 * focusable region, and here it scrolls sideways on its own, so a wide
 * table never gives the page a horizontal scroll bar.
 */

/* The 48rem reading measure. */
.tibu-section--long-form.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
}

/* ---- Body text and lists ---- */

.tibu-section--long-form :where(p, ul, ol, li) {
  color: var(--wp--preset--color--ink-900);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.778;
}

.tibu-section--long-form > p {
  margin-block: var(--wp--preset--spacing--6);
}

.tibu-section--long-form :where(ul, ol) {
  margin-block: var(--wp--preset--spacing--6);
  padding-inline-start: var(--wp--preset--spacing--6);
}

.tibu-section--long-form ul {
  list-style-type: disc;
}

.tibu-section--long-form ol {
  list-style-type: decimal;
}

.tibu-section--long-form li {
  margin-block: var(--wp--preset--spacing--3);
  padding-inline-start: var(--wp--preset--spacing--2);
}

.tibu-section--long-form li > :where(ul, ol) {
  margin-block: var(--wp--preset--spacing--3);
}

/* ---- Headings ---- */

.tibu-section--long-form :where(h2, h3) {
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  letter-spacing: normal;
}

.tibu-section--long-form h2 {
  margin-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--6);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}

.tibu-section--long-form h3 {
  margin-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--3);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 700;
  line-height: 1.333;
}

.tibu-section--long-form > :first-child {
  margin-block-start: 0;
}

.tibu-section--long-form > :last-child {
  margin-block-end: 0;
}

/* ---- Inline links ---- */

.tibu-section--long-form :where(p, li, td, th) a {
  color: var(--wp--preset--color--brand-blue);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms;
}

.tibu-section--long-form :where(p, li, td, th) a:hover {
  color: var(--wp--preset--color--brand-blue-dark);
}

/* ---- Tables ---- */

/*
 * The figure is the scroll container and the keyboard stop: it scrolls
 * sideways inside the measure when the table is wider than the screen, and
 * shows the site's 2px focus ring when it takes focus.
 */
.tibu-section--long-form .wp-block-table {
  box-sizing: border-box;
  max-width: 100%;
  margin-block: var(--wp--preset--spacing--8);
  overflow-x: auto;
}

.tibu-section--long-form .wp-block-table:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-blue-dark);
  outline-offset: 2px;
}

.tibu-section--long-form .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  color: var(--wp--preset--color--ink-900);
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.5;
}

.tibu-section--long-form .wp-block-table :where(th, td) {
  padding: var(--wp--preset--spacing--3);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-grey) 40%, transparent);
  text-align: start;
  vertical-align: top;
}

.tibu-section--long-form .wp-block-table th {
  font-weight: 600;
}

/* Core draws a 3px currentColor rule under thead and above tfoot; the cells carry the rules here. */
.tibu-section--long-form .wp-block-table :where(thead, tfoot) {
  border: 0;
}

.tibu-section--long-form .wp-block-table thead :where(th, td) {
  border-bottom-width: 2px;
}

/* The caption stays at the start edge while the table scrolls under it. */
.tibu-section--long-form .wp-block-table figcaption {
  position: sticky;
  inset-inline-start: 0;
  margin-block: var(--wp--preset--spacing--2) 0;
  color: var(--wp--preset--color--ink-500);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.43;
}