@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@500&display=swap');

/* =====================================================================
   Stage Portal: rich text styles (white background)
   Styles whatever Umbraco's rich text editor outputs, so it matches the site.

   Used in two places:
   1. On the site: wrap the rich text in <div class="sp-prose"> ... </div>
      and load this file in the <head>. Tailwind's reset strips bold, list
      bullets and heading sizes; these rules put them back on purpose.
   2. In the editor: tick this stylesheet on the Rich Text Editor data type.
      The editor's body has the class "mce-content-body", so it looks the same.

   Colours are Tailwind's own:
   neutral-900 #171717 (text) · zinc-500 #71717a (grey text, bullets)
   zinc-400 #a1a1aa (link underline) · zinc-200 #e4e4e7 (lines)
   zinc-100 #f4f4f5 (boxes) · green-600 #16a34a (takeaway dots)
   ===================================================================== */

/* ---- The editor canvas (Umbraco back office only) ---- */
.mce-content-body {
  background: #fff;
  padding: 24px 32px 48px;
  max-width: 740px;
  margin: 0 auto;
}

/* ---- Base text ---- */
.sp-prose,
.mce-content-body {
  font-family: 'Archivo', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #171717;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Even spacing between blocks */
.sp-prose > * + *,
.mce-content-body > * + * { margin-top: 1.5rem; }
.sp-prose > :first-child,
.mce-content-body > :first-child { margin-top: 0; }

.sp-prose p:empty,
.sp-prose p:has(> br:only-child) { display: none; }

/* ---- Headings ---- */
.sp-prose h2,
.mce-content-body h2 {
  margin-top: 4rem;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: #171717;
}
.sp-prose h3,
.mce-content-body h3 {
  margin-top: 3rem;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  color: #171717;
}
.sp-prose h4,
.mce-content-body h4 {
  margin-top: 2.5rem;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #71717a;
}
.sp-prose h2 + *, .sp-prose h3 + *, .sp-prose h4 + *,
.mce-content-body h2 + *, .mce-content-body h3 + *, .mce-content-body h4 + * { margin-top: 1rem; }

/* ---- Inline ---- */
.sp-prose strong, .sp-prose b,
.mce-content-body strong, .mce-content-body b { font-weight: 600; color: #171717; }
.sp-prose em, .sp-prose i,
.mce-content-body em, .mce-content-body i { font-style: italic; }

.sp-prose a,
.mce-content-body a {
  color: #171717;
  font-weight: 500;
  text-decoration: underline;
  font-weight: bold;
  text-decoration-color: #a1a1aa;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.sp-prose a:hover,
.mce-content-body a:hover { text-decoration-color: #171717; }

.sp-prose code,
.mce-content-body code {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: .85em;
  padding: .1em .35em;
  border-radius: 6px;
  background: #f4f4f5;
}

/* ---- Bulleted lists: small grey dots ---- */
.sp-prose ul,
.mce-content-body ul { list-style: none; padding: 0; margin-left: 0; }
.sp-prose ul > li,
.mce-content-body ul > li { position: relative; padding-left: 1.75rem; }
.sp-prose ul > li + li,
.mce-content-body ul > li + li { margin-top: .75rem; }
.sp-prose ul > li::before,
.mce-content-body ul > li::before {
  content: '';
position: absolute;
  left: .25rem;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #71717a;
}

/* ---- Numbered lists: grey numbers ---- */
.sp-prose ol,
.mce-content-body ol { list-style: decimal; padding-left: 1.75rem; margin-left: 0; }
.sp-prose ol > li,
.mce-content-body ol > li { padding-left: .25rem; }
.sp-prose ol > li + li,
.mce-content-body ol > li + li { margin-top: .75rem; }
.sp-prose ol > li::marker,
.mce-content-body ol > li::marker { color: #71717a; font-weight: 500; }

/* Lists inside lists */
.sp-prose li > ul, .sp-prose li > ol,
.mce-content-body li > ul, .mce-content-body li > ol { margin-top: .75rem; }

/* ---- Quotes: large, like the site's quote sections ---- */
.sp-prose blockquote,
.mce-content-body blockquote {
  margin: 3rem 0;
  padding: 0;
  border: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-style: normal;
  color: #171717;
}
.sp-prose blockquote p,
.mce-content-body blockquote p { margin: 0; }

/* ---- Images and video ---- */
.sp-prose img,
.mce-content-body img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border-radius: 20px;
}
.sp-prose figure,
.mce-content-body figure { margin: 2.5rem 0; }
.sp-prose figure img,
.mce-content-body figure img { margin: 0; }
.sp-prose figcaption,
.mce-content-body figcaption {
  margin-top: .75rem;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  font-size: 13px;
  color: #71717a;
}
.sp-prose iframe,
.mce-content-body iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 20px; }

/* ---- Rules ---- */
.sp-prose hr,
.mce-content-body hr { margin: 3.5rem 0; border: 0; border-top: 1px solid #e4e4e7; }

/* ---- Tables: scroll sideways on phones ---- */
.sp-prose table,
.mce-content-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}
.sp-prose th, .sp-prose td,
.mce-content-body th, .mce-content-body td {
  padding: .75rem 1rem .75rem 0;
  border-bottom: 1px solid #e4e4e7;
  text-align: left;
  vertical-align: top;
}
.sp-prose th,
.mce-content-body th { font-weight: 600; color: #171717; }

/* =====================================================================
   Extra styles for the editor's Formats menu.
   Umbraco reads the umb_name comments and lists each one by that name.
   ===================================================================== */








div.sp-box > * + * { margin-top: 1rem; }
div.sp-box ul > li::before { background: #16a34a; }


a.sp-button:hover { background: #000; }

/**umb_name:Lead paragraph*/
p.sp-lead {
	font-size: clamp(22px, 2.4vw, 25px);
	line-height: 1.45;
	color: #171717;
}

/**umb_name:Small print*/
p.sp-small {
	font-size: 12px;
	line-height: 1.5;
	color: #71717a;
}

/**umb_name:Label (mono)*/
p.sp-label {
	font-family: 'IBM Plex Mono', 'Courier New', monospace;
	font-size: 14px;
	font-weight: 500;
	color: #71717a;
}

/**umb_name:Button link*/
a.sp-button {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 24px;
	border-radius: 9999px;
	background: #171717;
	color: #fff !important;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none !important;
	transition: background .2s;
}