/**
 * editor-styles.css
 *
 * CSS classes surfaced via the CKEditor 5 Styles dropdown in canvas_full_html.
 * Loaded both in the editor preview (via ckeditor5-stylesheets in inclind.info.yml)
 * and on the front-end (via inclind/editor-styles library) so saved content renders
 * correctly on all pages.
 *
 * Color values match the theme's design tokens:
 *   primary-600  = rgb(213 25 32)   — Red
 *   inclind-blue-800 = rgb(35 78 148) — Navy
 *   dark         = #222222           — Dark Gray
 *   light        = #F3F4F6           — Light Gray
 *   secondary-900 = rgb(42 51 66)   — Dark text
 *   secondary-300 = rgb(187 195 207) — Border
 */

/* ── Text size styles (applied to <p>) ────────────────────────────────────── */

p.style-lead {
  font-size: 20px;
  line-height: 1.6;
}

p.style-small {
  font-size: 12px;
  line-height: 1.4;
}

p.style-large {
  font-size: 24px;
  line-height: 1.4;
}

/* ── Button styles (applied to <a>) ───────────────────────────────────────── */

a.style-btn-red,
a.style-btn-navy,
a.style-btn-dark,
a.style-btn-light {
  display: inline-block;
  padding: 0.625rem 1rem;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: background-color 0.15s linear;
  cursor: pointer;
}

a.style-btn-red {
  background-color: rgb(213 25 32);
  color: #ffffff;
}

a.style-btn-red:hover {
  background-color: rgb(185 20 27);
  color: #ffffff;
}

a.style-btn-navy {
  background-color: rgb(35 78 148);
  color: #ffffff;
}

a.style-btn-navy:hover {
  background-color: rgb(29 64 121);
  color: #ffffff;
}

a.style-btn-dark {
  background-color: #222222;
  color: #ffffff;
}

a.style-btn-dark:hover {
  background-color: #111111;
  color: #ffffff;
}

a.style-btn-light {
  background-color: #F3F4F6;
  color: rgb(42 51 66);
  border: 1px solid rgb(187 195 207);
}

a.style-btn-light:hover {
  background-color: #e5e7eb;
  color: rgb(42 51 66);
}

/* ── Color styles (applied to <p> and <h2>–<h6>) ─────────────────────────── */

p.style-color-red,
h2.style-color-red,
h3.style-color-red,
h4.style-color-red,
h5.style-color-red,
h6.style-color-red {
  color: rgb(213 25 32); /* primary-600 */
}

p.style-color-white,
h2.style-color-white,
h3.style-color-white,
h4.style-color-white,
h5.style-color-white,
h6.style-color-white {
  color: #ffffff;
}

p.style-color-dark-gray,
h2.style-color-dark-gray,
h3.style-color-dark-gray,
h4.style-color-dark-gray,
h5.style-color-dark-gray,
h6.style-color-dark-gray {
  color: #222222; /* dark */
}

p.style-color-black,
h2.style-color-black,
h3.style-color-black,
h4.style-color-black,
h5.style-color-black,
h6.style-color-black {
  color: #000000;
}

/* ── Accordion (ckeditor_accordion module) ──────────────────────────────────
 * Restyles the CKEditor "Accordion" plugin's default blue/red theme to match
 * the Figma Accordion component (node 2782-5988): a plain divider list, a
 * red accent bar under the open item's body copy, and a literal +/− toggle
 * instead of the module's default chevron.
 *
 * The header <a> is switched to flex layout (icon + title as flex items)
 * rather than the module's absolute-positioned icon over padded text — that
 * absolute approach never actually centered vertically (top: calc(50% - 1px)
 * positions the icon box's *top* edge at mid-height, not its center), which
 * is why the icon sat low. Flex + align-items: center sidesteps that.
 *
 * The .on-dark-muted-copy block below pairs with the existing reusable class
 * in theme/style.css (white headings / #BABABA body on dark sections) so the
 * accordion matches when it's used inside a dark section's rich text, which
 * is how both reference examples (homepage "Finding your way, faster" and
 * the TidalHealth "What we've built" panel) use it. The un-prefixed rules
 * above it are sane light-background defaults for use elsewhere.
 */

.ckeditor-accordion-container > dl {
  border: 0;
}

.ckeditor-accordion-container > dl dt > a,
.ckeditor-accordion-container > dl dt > a:not(.button) {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: transparent !important;
  color: rgb(42 51 66); /* secondary-900 */
  font-weight: 600;
  font-size: 27px;
  line-height: 31px;
  text-decoration: none;
  padding: 14px 16px;
  border-bottom: 1px solid rgb(187 195 207); /* secondary-300 */
}

.ckeditor-accordion-container > dl dt > a:hover,
.ckeditor-accordion-container > dl dt > a:not(.button):hover {
  background-color: transparent !important;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
}

/* Open state — drop the row divider so only the red accent bar (dd::before,
   which sits right below) reads as the separator; keep it on closed rows so
   they still stay visually divided from each other. border-color instead of
   border: 0 so the box does not reflow by 1px when a row opens. */
.ckeditor-accordion-container > dl dt.active > a {
  background-color: transparent !important;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  border-bottom: none;
}

/* Custom focus style — replaces the browser's default focus ring (which
   rendered as a large rounded box around the whole header on this dark
   background) with a subtle inset outline that stays legible. */
.ckeditor-accordion-container > dl dt > a:focus,
.ckeditor-accordion-container > dl dt > a:not(.button):focus {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* +/− toggle — plain text characters, no drawn bars or animation. Fixed
   width keeps the title from shifting when the character swaps. */
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
/* The module'''s original rules put :before/:after at position: absolute
   with a fixed top/left/width/height (and z-index: -1) to draw the old
   chevron bars. Those declarations still cascade from the module'''s CSS
   since we only override individual properties, not the whole ruleset — so
   every one of them has to be explicitly reset here, or the pseudo-element
   stays absolutely positioned and out of flow, which is what made the +/-
   float in the page'''s top-left corner instead of sitting in the icon box. */
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before,
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  z-index: auto;
  display: inline;
  content: none;
  background: none;
  transform: none !important; /* module rotates this ±135deg/±45deg by default —
    must be reset explicitly, resetting position/size alone was not enough */
}
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before {
  content: "+";
}
.ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:before {
  content: "-";
}

/* Content area */
.ckeditor-accordion-container > dl dd {
  padding: 0 16px 24px 56px; /* 16px padding + 24px icon + 16px gap, matching the header */
  color: rgb(85 105 135); /* secondary-500 */
  font-size: 18px;
  line-height: 30px;
}

/* Red accent bar (Figma: color/accents/Red #ed1c24) — only visible on the
   open item, above its body copy, matching the Accordion component spec. */
.ckeditor-accordion-container > dl dd:before {
  content: "";
  display: block;
  width: 80px;
  height: 5px;
  margin-bottom: 24px;
  background-color: rgb(237 28 36); /* primary-500 = #ED1C24 */
}

/* Dark-section pairing — see .on-dark-muted-copy in theme/style.css */
.on-dark-muted-copy .ckeditor-accordion-container > dl dt > a,
.on-dark-muted-copy .ckeditor-accordion-container > dl dt > a:not(.button) {
  color: #ffffff;
  border-bottom-color: rgb(64 79 101); /* secondary-700 / Figma "Charcoal" */
}
.on-dark-muted-copy .ckeditor-accordion-container > dl dd {
  color: #bababa;
}