@import url("https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400..900;1,400..900&display=swap");

@font-face {
  font-family: "Besley";
  src:
    url("/fonts/Besley-Bold.woff2") format("woff2"),
    url("/fonts/Besley-Bold.woff") format("woff"),
    url("/fonts/Besley-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Font declarations */
@font-face {
  font-family: "Special Gothic Condensed One";
  src: url("/fonts/SpecialGothicCondensedOne-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Special Gothic Condensed One Fallback";
  src: local("Times New Roman");
  size-adjust: 65%;
  font-weight: bold;
}

@font-face {
  font-family: "Dunbar Tall";
  src:
    url("/fonts/Dunbar_Tall-Medium.woff2") format("woff2"),
    url("/fonts/Dunbar_Tall-Medium.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "DM Mono";
  src: url("/fonts/DMMono-Regular.ttf") format("truetype");
  font-display: swap;
}

/* Editor background */
.ProseMirror {
  background: #fff;
}

/* ... rest  of your existing styles ... */

/* Force list styles to show in Prose Editor */
.prose-mirror-editor ol,
.prose-mirror-editor ul,
.ProseMirror ol,
.ProseMirror ul,
[data-prose-mirror-editor] ol,
[data-prose-mirror-editor] ul {
  list-style-type: revert !important;
  padding-left: 40px !important;
  margin-left: 0 !important;
}

.prose-mirror-editor ol li,
.ProseMirror ol li,
[data-prose-mirror-editor] ol li {
  list-style-type: decimal !important;
}
/* Allow list type switching */
.prose-mirror-editor ol[data-list-type],
.prose-mirror-editor ul[data-list-type],
.ProseMirror ol[data-list-type],
.ProseMirror ul[data-list-type] {
  list-style-type: inherit !important;
}
.prose-mirror-editor ul li,
.ProseMirror ul li,
[data-prose-mirror-editor] ul li {
  list-style-type: disc !important;
}

/* Ensure proper display */
.prose-mirror-editor li,
.ProseMirror li,
[data-prose-mirror-editor] li {
  display: list-item !important;
}
/* Make empty Prose editor at least ~5 lines tall */
.prose-mirror-editor .ProseMirror,
.ProseMirror,
[data-prose-mirror-editor] .ProseMirror {
  min-height: 10em; /* ~5 lines depending on line-height */
}
/* Ensure floated embed placeholders expand the editor height (prevents overlap with fields below) */
.prose-mirror-editor .ProseMirror,
.ProseMirror,
[data-prose-mirror-editor] .ProseMirror {
  display: flow-root; /* modern clearfix; contains floats */
}

/* Fallback for older browsers (safe to keep even with flow-root) */
.prose-mirror-editor .ProseMirror::after,
.ProseMirror::after,
[data-prose-mirror-editor] .ProseMirror::after {
  content: "";
  display: block;
  clear: both;
}

/* Normal text / paragraphs */
.ProseMirror p {
  color: #32343a;
  font-family: Besley, serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 1em;
}

/* Base text for the editor */
.ProseMirror {
  color: #32343a;
  font-family: Besley, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}

/* H2 */
.ProseMirror h2 {
  color: #32343a;
  font-family: "Dunbar Tall", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.72px;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/* H3 */
.ProseMirror h3 {
  color: #32343a;
  font-family: "Dunbar Tall", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.56px;
  margin-top: 0.83em;
  margin-bottom: 0.5em;
}

/* H4 */
.ProseMirror h4 {
  color: #32343a;
  font-family: "Special Gothic Condensed One", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

/* H5 */
.ProseMirror h5 {
  color: #32343a;
  font-family: "Special Gothic Condensed One", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 0.67em;
  margin-bottom: 0.5em;
}

/* Wagtail-like list styles inside django-prose-editor's ProseMirror editor */

/* Base: make sure lists show markers and are indented a bit */
.ProseMirror ol,
.ProseMirror ul {
  list-style-position: outside;
  margin-left: 1.5em;
}

/* Top-level ordered list items: 1, 2, 3 */
.ProseMirror ol[data-type="decimal"] > li {
  list-style-type: decimal !important;
}

/* Second-level ordered list items: a, b, c */
.ProseMirror ol[data-type="decimal"] > li > ol[data-type="decimal"] > li {
  list-style-type: lower-alpha !important;
}

/* Third-level ordered list items: i, ii, iii */
.ProseMirror
  ol[data-type="decimal"]
  > li
  > ol[data-type="decimal"]
  > li
  > ol[data-type="decimal"]
  > li {
  list-style-type: lower-roman !important;
}

/* Optional: nested ULs indentation */
.ProseMirror ul ul {
  margin-left: 1.5em;
}

/* Don't clear floats on paragraphs - let text wrap naturally */
/* Clear only after the last floated image or after specific block elements */
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6,
.ProseMirror hr,
.ProseMirror .wagtail-image-embed[data-format="fullwidth"],
.ProseMirror .wagtail-chart-embed {
  clear: both;
}

/* Make the span containing the floated image not take up vertical space */
.ProseMirror p:has(.wagtail-image-embed[data-format="left"]),
.ProseMirror p:has(.wagtail-image-embed[data-format="right"]) {
  min-height: 0;
}

/* Add a clearfix after each paragraph to contain floats and prevent them from affecting subsequent paragraphs */
.ProseMirror p::after {
  content: "";
  display: table;
  clear: both;
}

.prose-editor-field {
  max-height: calc(100vh - 220px); /* adjust for admin chrome */
  overflow: auto;
}

.prose-editor-field .editor-toolbar {
  position: sticky;
  top: 50;
  z-index: 10;
  background: #fff;
}