/* Rich-text content styling — shared across the admin editor preview,
   admin detail pages, and the public site. Single source of truth for
   everything that gets rendered with class="ck-content" (the class
   TipTap sets on its editor area via editorProps.attributes.class and
   that every public/admin detail page applies on the rich-text container).
   Loaded from the root layout (app/layout.tsx), same place as Bootstrap,
   so both admin and public inherit it. */

/* Normalize legacy migrated content (which carries inline
   `font-size: 11pt; color: ...; background: ...;` from Power Pages
   CKEditor) to readable defaults. Exclude inline elements that need
   their own size: <sub>/<sup> would otherwise be flattened to 1rem
   and stop looking like subscripts/superscripts (breaks chemical
   formulas like NO₂, µg/m³, etc.); <figcaption> has its own caption
   sizing further down. Scoped to .tab-pane so it only affects the
   tabbed country-profile / MCM / stakeholder detail pages — the
   admin editor's content area isn't inside a .tab-pane. */
.tab-pane div.ck-content *:not(sub):not(sup):not(figcaption),
.no-content-msg *:not(sub):not(sup):not(figcaption) {
  color: #333 !important;
  font-size: 1rem !important;
  background: transparent !important;
}

/* Centered, block-level images. Matches the legacy Power Pages
   inline-figure look and applies to new <img> tags inserted via the
   admin's TipTap editor (which don't get a figure wrapper). */
.ck-content img {
  display: block;
  margin: 0.9em auto;
  max-width: 100%;
  height: auto;
}
.ck-content figure {
  display: block;
  margin: 0.9em auto;
  text-align: center;
}
.ck-content figure img {
  margin: 0 auto;
}

/* Italic, small, centered figcaption. The `figcaption *` rule forces
   inner spans/strongs to italic too — legacy Power Pages content
   occasionally wraps caption text in <span style="font-style: normal">
   which would otherwise win. */
.ck-content figcaption,
.ck-content figcaption * {
  font-style: italic;
}
.ck-content figcaption {
  font-size: 0.72em;
  color: #475569;
  text-align: center;
  margin-top: 0.4em;
  line-height: 1.35;
}

/* Tables embedded in rich-text content (legacy CKEditor markup).
   Striped rows + a distinct header row. Selectors cover both the
   "modern" shape (<thead><th>) and the CKEditor 5 variant where the
   first <tr> uses <td><strong>...</strong></td> with no <th> at all.
   `!important` is required because individual cells often carry
   inline `border` / `background` legacy styles. */
.ck-content figure.table {
  display: block !important;
  width: 100% !important;
  margin: 1em 0 !important;
  overflow-x: auto;
}
.ck-content table {
  width: 100% !important;
  border-collapse: collapse;
  border: 1px solid #d1d5db;
  font-size: 0.95em;
  margin: 1em 0;
}
.ck-content table th,
.ck-content table td {
  border: 1px solid #e5e7eb;
  padding: 0.5em 0.75em;
  vertical-align: top;
  text-align: left;
}
/* Legacy CKEditor placed `text-align: center` on either the <td>, an
   inner <p>, or an inner <div>. Force inner elements to inherit their
   cell's alignment so only the <td>'s text-align matters — keeps
   editor preview and portal rendering identical. */
.ck-content table td > *,
.ck-content table th > *,
.ck-content table td > * > *,
.ck-content table th > * > * {
  text-align: inherit !important;
}
/* Header row: any <th>, or the first <tr> of the table / its tbody
   (covers the no-<th> CKEditor variant). */
.ck-content table thead th,
.ck-content table thead td,
.ck-content table > tr:first-child > th,
.ck-content table > tr:first-child > td,
.ck-content table > tbody > tr:first-child > th,
.ck-content table > tbody > tr:first-child > td {
  background-color: #e0f2fe !important;
  color: #0c4a6e;
  font-weight: 600;
  border-bottom: 2px solid #38bdf8 !important;
}
/* Striped data rows. The :not(:first-child) guard keeps the header
   styling above from being overwritten when the header sits inside
   tbody. */
.ck-content table > tbody > tr:nth-child(even):not(:first-child) > td,
.ck-content table > tr:nth-child(even):not(:first-child) > td {
  background-color: #f8fafc !important;
}

/* Underline links inside rich-text content. The :not(.btn) raises
   specificity above the legacy `a:not(.btn) { text-decoration: none }`
   rule that portalbasictheme.css used to ship — without this, links
   here would render without an underline. */
.ck-content a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ck-content a:not(.btn):hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
/* Append a small external-link icon after every text link (skip
   image-wrapping anchors). The icon is a lucide external-link SVG
   used as a CSS mask so it inherits the link's text color via
   background-color: currentColor. */
.ck-content a:not(.btn):not(:has(img))::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.25em;
  vertical-align: -0.05em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6'/><path d='M10 14 21 3'/><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6'/><path d='M10 14 21 3'/><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/></svg>");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.75;
}