/*
 *  rich-text.css
 *
 *  Styling for CKEditor-authored rich HTML. Applied by adding `rich-text`
 *  alongside the content wrapper -- see site/actions/help/view.html.
 *
 *  Ported from the USA Lacrosse new-brand site (the BaseContentRichText
 *  component with asHtml=true) to hand-written CSS so AMMS does not need a
 *  Tailwind build step. Token values below are verbatim from that site's
 *  @theme block.
 *
 *  Every selector is rooted at `.rich-text`, and the design tokens are
 *  re-declared as `--rt-*` scoped to `.rich-text`, so nothing here can
 *  collide with core.min.css, style.min.css, bootstrap, or b2uPanel --
 *  the same isolation rule nb_footer.css and nb_style.css follow.
 *
 *  Font families are defined in assets/css/fonts.css, which must be
 *  loaded before this file.
 */

.rich-text {
  /*  Palette -- verbatim from the reference @theme block  */
  --rt-default: #010b1ce6;
  --rt-default-secondary: #010b1c80;
  --rt-midnight: #010b1c;
  --rt-navy-blue: #001f58;
  --rt-navy-800: #151f26;
  --rt-off-white: #faf7f6;
  --rt-sky-500: #cde8fb;
  --rt-sky-300: #e3eff9;
  --rt-usal-blue: #2622fc;
  --rt-usal-red: #fc222d;
  --rt-generic-card: #f0eeeb;
  --rt-divider-1: #d6d3ce;

  /*  Type. @NOTE: the reference never declared a line-height-body token;
   *  1.25rem is taken from its text-body-small utility, which the table
   *  cell rule below pairs it with.  */
  --rt-font-body: "Mundial Narrow Variable", system-ui, "-apple-system", sans-serif;
  --rt-bold: 640;
  --rt-line-height-body: 1.25rem;
}

/* Paragraphs */
.rich-text p {
  margin-bottom: 1rem;
}

.rich-text p:last-child {
  margin-bottom: 0;
}

/* Headings — h2–h6 use body font (Mundial Narrow), matching title/body scale */
.rich-text h2 {
  font-family: var(--rt-font-body);
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 490;
  letter-spacing: -0.031rem;
  color: var(--rt-default);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.rich-text h3 {
  font-family: var(--rt-font-body);
  font-size: 1.75rem;
  line-height: 1.75rem;
  font-weight: 490;
  color: var(--rt-default);
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

.rich-text h4 {
  font-family: var(--rt-font-body);
  font-size: 1.625rem;
  line-height: 2.125rem;
  font-weight: var(--rt-bold);
  color: var(--rt-default);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.rich-text h5 {
  font-family: var(--rt-font-body);
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: var(--rt-bold);
  color: var(--rt-default);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.rich-text h6 {
  font-family: var(--rt-font-body);
  font-size: 1rem;
  line-height: 1.125rem;
  font-weight: var(--rt-bold);
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--rt-default);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Remove top margin when a heading is the first element */
.rich-text h2:first-child,
.rich-text h3:first-child,
.rich-text h4:first-child,
.rich-text h5:first-child,
.rich-text h6:first-child {
  margin-top: 0;
}

/* Inline formatting */
.rich-text strong,
.rich-text b {
  font-weight: var(--rt-bold);
}

.rich-text em,
.rich-text i {
  font-style: italic;
}

.rich-text u {
  text-decoration: underline;
}

.rich-text s,
.rich-text del {
  text-decoration: line-through;
  color: var(--rt-default-secondary);
}

/* Links — usal-blue with underline, hover to usal-red (mirrors BaseLink hover) */
.rich-text a {
  color: var(--rt-usal-blue);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  transition: color 0.15s ease;
}

.rich-text a:hover {
  color: var(--rt-usal-red);
}

/* Lists */
.rich-text ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.rich-text ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.rich-text li {
  margin-bottom: 0.5rem;
}

.rich-text li:last-child {
  margin-bottom: 0;
}

.rich-text li::marker {
  color: var(--rt-usal-blue);
}

/* Blockquote — left accent bar in usal-red, italic, secondary text */
.rich-text blockquote {
  border-left: 0.25rem solid var(--rt-usal-red);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--rt-default-secondary);
}

.rich-text blockquote p:last-child {
  margin-bottom: 0;
}

/* Horizontal rule — matches --rt-divider-1 used throughout */
.rich-text hr {
  border: none;
  border-top: 0.0625rem solid var(--rt-divider-1);
  margin: 1.5rem 0;
}

/* Tables — header in navy-blue, alternating sky-blue rows, no border separators */
.rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-family: var(--rt-font-body);
}

.rich-text th {
  background-color: var(--rt-navy-blue);
  color: var(--rt-off-white);
  font-family: var(--rt-font-body);
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: 835;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  padding: 1.25rem;
  text-align: left;
}

.rich-text td {
  /*  Expanded from the reference `@apply text-body-small`  */
  font-family: var(--rt-font-body);
  font-size: 1rem;
  padding: 1.25rem;
  line-height: var(--rt-line-height-body);
  color: var(--rt-default);
  vertical-align: middle;
}

.rich-text tbody tr:nth-child(odd) {
  background-color: var(--rt-sky-500);
}

.rich-text tbody tr:nth-child(even) {
  background-color: var(--rt-sky-300);
}

/* Inline code */
.rich-text code {
  font-family: monospace;
  font-size: 0.9em;
  background-color: var(--rt-generic-card);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: var(--rt-midnight);
}

/* Code blocks */
.rich-text pre {
  background-color: var(--rt-navy-800);
  color: var(--rt-off-white);
  padding: 1.25rem 1.5rem;
  border-radius: 0.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.rich-text pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
  font-size: 1em;
}