/*
 * The handful of WordPress rules that fight the ported design.
 *
 * Tailwind v4 emits everything inside @layer, and an unlayered rule beats a
 * layered one at ANY specificity. So core's global styles — which are
 * unlayered — silently win over utility classes. Three of them mattered:
 *
 *   .wp-site-blocks > *   a 24px block gap that pushed the sticky bar down
 *   a                     an underline on every link
 *   .wp-block-group       core's own box-sizing and layout padding
 *
 * Scoped as tightly as the rules being answered. Setting --wp--style--block-gap
 * to 0 instead looked like the obvious fix and was not: it zeroes
 * margin-block-start on every block child, which took Tailwind's mt-* with it
 * and collapsed the spacing on every page.
 *
 * Loaded after rtafrica.css and deliberately unlayered, so it sits in the same
 * cascade tier as the rules it is correcting.
 */

.wp-site-blocks > *,
.wp-site-blocks > * > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Core pads any group that carries a background. The design does its own. */
:where(.wp-block-group.has-background) {
  padding: 0;
}

/*
 * Post body typography.
 *
 * Everything else on this site is markup the design controls class by class.
 * A post body is not: it is whatever the editor produces — h2s, lists, quotes,
 * images — with no classes to hang utilities on. So this is the one place the
 * theme styles bare elements, scoped to .prose-rt so it cannot leak into the
 * ported pages.
 *
 * Values are the site's own: navy headings in the display face, slate body at
 * 17px/1.7, orange on links, and the 72ch measure the rest of the long-form
 * copy uses.
 */
.prose-rt > * + * { margin-block-start: 1.5em; }

.prose-rt h2,
.prose-rt h3 {
  font-family: var(--font-display);
  color: var(--color-navy);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-block-start: 2em;
}
.prose-rt h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.prose-rt h3 { font-size: 1.2rem; }

.prose-rt p,
.prose-rt li { color: var(--color-slate); }

.prose-rt a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 300ms;
}
.prose-rt a:hover { color: var(--color-orange); }

.prose-rt ul,
.prose-rt ol { padding-inline-start: 1.4em; }
.prose-rt ul { list-style: disc; }
.prose-rt ol { list-style: decimal; }
.prose-rt li + li { margin-block-start: 0.5em; }

.prose-rt blockquote {
  border-inline-start: 2px solid var(--color-orange);
  padding-inline-start: 1.25em;
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--color-navy);
}

.prose-rt img { border-radius: 6px; height: auto; max-width: 100%; }

.prose-rt hr {
  border: 0;
  border-block-start: 1px solid var(--color-hairline);
  margin-block: 2.5em;
}

.prose-rt code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-offwhite);
  padding: 0.15em 0.4em;
  border-radius: 2px;
}

/*
 * Issuu publications.
 *
 * Core carries an Issuu oEmbed provider already, so the embed block resolves
 * an issuu.com/<user>/docs/<doc> URL without a plugin — which is the right
 * answer for a site that should be running as few plugins as possible.
 *
 * The provider returns a fixed-size iframe. These rules make it behave: full
 * width, 4:3, and the site's own 6px corner instead of a bare rectangle.
 */
.rt-issuu .wp-block-embed__wrapper { position: relative; }

.rt-issuu iframe {
  width: 100% !important;
  aspect-ratio: 4 / 3;
  height: auto !important;
  min-height: 420px;
  border: 1px solid var(--color-hairline);
  border-radius: 6px;
  background: #fff;
}

/* Empty until someone pastes a URL, so it should take up no room on the page. */
.rt-issuu .wp-block-embed:not(:has(iframe)) { display: none; }

/*
 * Core's element resets, which land unlayered and so beat Tailwind's preflight.
 *
 * `figure { margin: 0 0 1em }` from the block library was adding 17px under
 * the Zeroth Cloud console — 1em at the body's 17px, exactly the gap that
 * showed up in the measurements.
 *
 * Scoped away from core's own blocks: anything with a wp-block-* class is a
 * real core block (an image, a gallery, an embed) and should keep the margins
 * core gives it. Everything else is ported markup whose spacing is already
 * decided by a utility class.
 */
figure:not([class*='wp-block']),
figcaption:not([class*='wp-block']) {
  margin: 0;
}

/*
 * Contact form: the honeypot, and what happened after you pressed send.
 *
 * The honeypot is hidden from people the way a screen reader also respects —
 * off-canvas rather than display:none, which some bots check for.
 */
.rt-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rt-note {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.55;
}

.rt-note--ok {
  border: 1px solid rgba(0, 23, 56, 0.12);
  background: rgba(0, 23, 56, 0.04);
  color: var(--color-navy);
}

.rt-note--bad {
  border: 1px solid rgba(255, 103, 0, 0.45);
  background: rgba(255, 103, 0, 0.08);
  color: #8a3b06;
}