/* web/css/richtext-spec.css

   CANONICAL rich-text typography spec — single source of truth.

   Consumed by THREE places, all of which load this file directly via
   URL or @import (no build-time copies, no sync scripts):

     1. Frontend bundle — `templates/css/app.pcss` @imports it; PostCSS
        inlines the contents into `web/css/app.css`. Any frontend
        markup wrapped in `<div class="ck-content">` picks up the spec.
     2. Shadow DOM in `templates/js/closed-richtext.js` — adds a
        <link rel="stylesheet" href="/css/richtext-spec.css"> inside
        the shadow root and wraps content in <div class="ck-content">.
     3. CKEditor admin pane — `config/ckeditor/Simple.css` is a
        one-line `@import url("/css/richtext-spec.css");` shim. Craft's
        CKEditor Field hoists @import statements out of its per-input
        wrapping (see Field.php inputHtml()), so the spec's
        `.ck-content` rules land at the top level and apply globally
        to every editor instance on the page.

   Pt units mirror the design spec (1pt ≈ 1.333px). Selectors are
   scoped to `.ck-content` so they only apply to wrapped rich-text
   content — other site headings keep their `_base.pcss` styles.

   Colours and the font family come from the project's design tokens
   (tokens.pcss). They're aliased to `--rt-*` custom properties on
   `.ck-content` (each `var(--token, fallback)`) rather than referenced
   inline, because the CKEditor pane and shadow DOM don't load
   tokens.pcss — the fallback supplies the value there while the
   frontend bundle picks up the live token. */

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/fonts/helvetica-neue-lt-std/HelveticaNeueLTStd-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 85.7%;
  descent-override: 14.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/fonts/helvetica-neue-lt-std/HelveticaNeueLTStd-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 85.7%;
  descent-override: 14.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/fonts/helvetica-neue-lt-std/HelveticaNeueLTStd-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 85.7%;
  descent-override: 14.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Helvetica Neue LT Std";
  src: url("/fonts/helvetica-neue-lt-std/HelveticaNeueLTStd-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  ascent-override: 85.7%;
  descent-override: 14.3%;
  line-gap-override: 0%;
}

.ck-content {
  /* Map the project's design tokens (tokens.pcss) onto rich-text use.
     Aliased here — not referenced inline — because two consumers, the
     CKEditor admin pane and the shadow DOM, never load tokens.pcss; the
     `var(--token, …)` fallback supplies the same value there while the
     frontend bundle picks up the live token. Distinct alias names avoid
     a self-referential custom-property cycle. The brand palette has a
     single text-weight grey (--color-muted), so the formerly-distinct
     h5/h6/small greys all collapse onto it. */
  --rt-font:   var(--font-sans,    "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif);
  --rt-ink:    var(--color-ink,    #002205); /* body, h1, h3 */
  --rt-accent: var(--color-accent, #a6ce39); /* h2 — Trader Green */
  --rt-muted:  var(--color-muted,  #7e8083); /* small/.text-small/.text-tiny, h5, h6 */
  --rt-link:   var(--color-link,   #a6ce39); /* links */
  font-family: var(--rt-font);
  font-size: 16pt;
  font-weight: 400; /* 55 Roman */
  line-height: 1.42;
  color: var(--rt-ink);
}

.ck-content h1 {
  font-family: var(--rt-font);
  font-size: 25pt;
  font-weight: 900; /* 95 Black */
  line-height: 1.2;
}

.ck-content h2 {
  font-family: var(--rt-font);
  font-size: 20pt;
  font-weight: 700; /* 75 Bold */
  color: var(--rt-accent); /* Trader Green — --color-accent */
  line-height: 1.2;
}

.ck-content h3 {
  font-family: var(--rt-font);
  font-size: 17pt;
  font-weight: 500; /* 65 Medium */
  color: var(--rt-ink);
  line-height: 1.2;
}

.ck-content p {
  font-family: var(--rt-font);
  font-size: 16pt;
  font-weight: 400; /* 55 Roman */
  line-height: 1.42;
}

.ck-content small,
.ck-content .text-tiny {
  font-family: var(--rt-font);
  font-size: 8pt;
  font-weight: 400; /* 55 Roman */
  color: var(--rt-muted);
}

.ck-content .text-small {
  font-family: var(--rt-font);
  font-size: 11pt;
  font-weight: 400; /* 55 Roman */
  color: var(--rt-muted);
}

/* Restore browser-default `bolder` for emphasis. Craft's admin
   `cp.css` ships `b, i em, strong { font-weight: 700; }`, which
   clamps `<strong>` to 700 even inside a 700-weight heading — so
   bolded text inside an H2 (Bold) doesn't visually pop, and the
   editor diverges from the frontend (where no such reset applies).
   Scoped to .ck-content so the admin reset still wins outside. */
.ck-content b,
.ck-content strong {
  font-weight: bolder;
}

/* --- Spacing & layout ---------------------------------------------
   Previously these lived inline in templates/js/closed-richtext.js and
   only reached the frontend shadow DOM. Folded in here so the CKEditor
   admin pane, the frontend bundle, and the shadow DOM all render
   identically. Covers margins, links, images, lists, h4–h6 and the
   .text-big/.text-huge size classes the typography block doesn't set. */
.ck-content h1,
.ck-content .h1 {
  margin-block-start: 0;
  margin-block-end: 24px;
}

.ck-content h2,
.ck-content .h2,
.ck-content h3,
.ck-content .h3 {
  margin-block: 14px;
  margin-inline: 0;
}

.ck-content h4,
.ck-content .h4 {
  margin-block: 14px;
  margin-inline: 0;
  font-weight: bold;
  line-height: 1.2;
}

.ck-content h5,
.ck-content .h5 {
  margin-block: 14px 3px;
  margin-inline: 0;
  font-weight: 400;
  line-height: 1.2;
  font-size: 10.5px;
  color: var(--rt-muted);
}

.ck-content h6,
.ck-content .h6 {
  color: var(--rt-muted);
  font-size: 11px;
  margin: 14px 0 3px;
  text-transform: uppercase;
  font-weight: 400;
}

.ck-content p {
  margin-block: 1em;
}

.ck-content a {
  color: var(--rt-link);
  cursor: pointer;
  text-decoration: none;
}

.ck-content .image {
  clear: both;
  display: table;
  margin: .9em auto;
  min-width: 50px;
  text-align: center;
}

.ck-content .image img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  min-width: 100%;
}

/* Keep embedded media (e.g. raw-html-embed YouTube iframes that carry a
   fixed width="560") from overflowing narrow viewports. */
.ck-content iframe,
.ck-content video,
.ck-content embed,
.ck-content object {
  max-width: 100%;
}

.ck-content figure.table {
  width: fit-content;
  margin: 1em auto;
}

.ck-content .text-big {
  font-size: 1.5em;
}

.ck-content .text-huge {
  font-size: 2em;
}

.ck-content ol,
.ck-content ul {
  padding: 0;
  padding-left: 40px;
  margin: 0;
}

.ck-content ol {
  list-style-type: decimal;
}

.ck-content ul {
  list-style-type: disc;
}

/* --- Component: exit-intent popup -----------------------------------
   Moved here from the exitIntentRichbox field's inline `css` so it
   survives the field-config unification (every CKEditor field now loads
   Simple.css → this spec). Colours mapped onto the rich-text tokens
   (exact matches, no visual change); the popup's original Helvetica
   face is kept deliberately. */
.ck-content .pop-green-heading {
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-align: left;
  color: var(--rt-accent);
}

.ck-content .pop-dot-points {
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: var(--rt-muted);
}