/**
--------------------------------------------------
* General
--------------------------------------------------
*/
*,
::before,
::after {
  box-sizing: border-box;
}

:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--p-bg);
}

html {
  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji';
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: var(--p-header-height);
}

html.in-preview {
  scroll-behavior: initial;
}

body {
  margin: 0;
  font-family: var(--p-font);
  line-height: var(--p-body-line-height);
  font-style: var(--p-body-font-style);
  font-size: var(--p-body-font-size);
  font-weight: var(--p-body-font-weight);
  color: var(--p-text-color);
  letter-spacing: var(--p-body-letter-spacing);
  background-color: var(--p-bg);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body.disable-scroll {
  overflow: hidden;
}

hr {
  border: 0;
  color: inherit;
  height: 1px;
  background: var(--p-border);
  margin: var(--p-divider-margin, 2em) 0;
}

abbr[title] {
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: var(--p-body-line-height);
  margin: 0;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

:-moz-ui-invalid {
  box-shadow: none;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

img {
  block-size: auto;
  max-inline-size: 100%;
}

ul,
ol {
  padding-left: 20px;
  margin: 0 0 var(--p-p-margin-bottom);
}

li p:last-of-type {
  margin-bottom: 0; /* Remove the bottom margin for the last p */
}

#content {
  overflow-x: clip;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

dl {
  font-size: var(--p-font-size-normal);
  margin: 0 0 var(--p-p-margin-bottom);
  padding: 0;
}
dt {
  font-size: var(--p-font-size-small);
  opacity: var(--p-text-meta-opacity);
  word-break: break-word;
}

dd {
  margin: 0 0 0.8em;
  word-break: break-word;
}

dd:last-child {
  margin-bottom: 0;
}

.label {
  display: block;
  word-break: break-word;
  font-size: var(--p-label-font-size, 0.9rem);
  line-height: var(--p-label-line-height, 1.3);
  font-weight: var(--p-label-font-weight, bold);
  margin-bottom: var(--p-label-margin-bottom, 0.5em);
}

/**
--------------------------------------------------
* Links
--------------------------------------------------
*/
a {
  cursor: pointer;
  color: var(--p-link-text-color);
  text-decoration: var(--p-link-text-decoration);
}

a:hover {
  color: var(--p-link-text-color-hover);
  text-decoration: var(--p-link-text-decoration-hover);
}

[dark] {
  --p-link-text-color: var(--p-link-text-color-dark);
  --p-link-text-color-hover: var(--p-link-text-color-dark-hover);
}

/**
--------------------------------------------------
* Helpers
--------------------------------------------------
*/
.text-align-center {
  text-align: center;
}
.text-align-left {
  text-align: left;
}
.text-align-right {
  text-align: right;
}

/**
--------------------------------------------------
* Typography
--------------------------------------------------
*/
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  text-wrap: balance;
}

h1,
.h1 {
  font-family: var(--p-h1-font);
  font-size: var(--p-h1-font-size);
  font-weight: var(--p-h1-font-weight);
  font-style: var(--p-h1-font-style);
  line-height: var(--p-h1-line-height);
  text-transform: var(--p-h1-transform);
  letter-spacing: var(--p-h1-letter-spacing);
  margin: 0 0 var(--p-h1-margin-bottom);
  color: var(--p-h1-color, var(--p-heading-color));
}

h2,
.h2 {
  font-family: var(--p-h2-font);
  font-size: var(--p-h2-font-size);
  font-weight: var(--p-h2-font-weight);
  font-style: var(--p-h2-font-style);
  line-height: var(--p-h2-line-height);
  text-transform: var(--p-h2-transform);
  letter-spacing: var(--p-h2-letter-spacing);
  margin: 0 0 var(--p-h2-margin-bottom);
  color: var(--p-h2-color, var(--p-heading-color));
}

h3,
.h3 {
  font-family: var(--p-h3-font);
  font-size: var(--p-h3-font-size);
  font-weight: var(--p-h3-font-weight);
  font-style: var(--p-h3-font-style);
  line-height: var(--p-h3-line-height);
  text-transform: var(--p-h3-transform);
  letter-spacing: var(--p-h3-letter-spacing);
  margin: 0 0 var(--p-h3-margin-bottom);
  color: var(--p-h3-color, var(--p-heading-color));
}

h4,
.h4 {
  font-family: var(--p-h4-font);
  font-size: var(--p-h4-font-size);
  font-weight: var(--p-h4-font-weight);
  font-style: var(--p-h4-font-style);
  line-height: var(--p-h4-line-height);
  text-transform: var(--p-h4-transform);
  letter-spacing: var(--p-h4-letter-spacing);
  margin: 0 0 var(--p-h4-margin-bottom);
  color: var(--p-h4-color, var(--p-heading-color));
}

h5,
.h5 {
  font-family: var(--p-h5-font);
  font-size: var(--p-h5-font-size);
  font-weight: var(--p-h5-font-weight);
  font-style: var(--p-h5-font-style);
  line-height: var(--p-h5-line-height);
  text-transform: var(--p-h5-transform);
  letter-spacing: var(--p-h5-letter-spacing);
  margin: 0 0 var(--p-h5-margin-bottom);
  color: var(--p-h5-color, var(--p-heading-color));
}

h6,
.h6 {
  font-family: var(--p-h6-font);
  font-size: var(--p-h6-font-size);
  font-weight: var(--p-h6-font-weight);
  font-style: var(--p-h6-font-style);
  line-height: var(--p-h6-line-height);
  text-transform: var(--p-h6-transform);
  letter-spacing: var(--p-h6-letter-spacing);
  margin: 0 0 var(--p-h6-margin-bottom);
  color: var(--p-h6-color, var(--p-heading-color));
}

.pre-heading {
  font-family: var(--p-h-pre-font);
  font-size: var(--p-h-pre-font-size);
  font-weight: var(--p-h-pre-font-weight);
  font-style: var(--p-h-pre-font-style);
  line-height: var(--p-h-pre-line-height);
  text-transform: var(--p-h-pre-transform);
  letter-spacing: var(--p-h-pre-letter-spacing);
  margin: 0 0 var(--p-h-pre-margin-bottom);
  color: var(--p-h-pre-color, var(--p-heading-color));
}

p,
.p {
  margin: 0 0 var(--p-p-margin-bottom);
}

p:empty,
.p:empty {
  min-height: 1px;
}

.preamble {
  font-family: var(--p-preamble-font);
  font-size: var(--p-preamble-font-size);
  font-weight: var(--p-preamble-font-weight);
  font-style: var(--p-preamble-font-style);
  line-height: var(--p-preamble-line-height);
  letter-spacing: var(--p-preamble-letter-spacing);
  margin: 0 0 var(--p-preamble-margin-bottom);
}

/**
--------------------------------------------------
* RTE Tables
--------------------------------------------------
*/
table {
  border-collapse: collapse;
  margin: 0 0 var(--p-p-margin-bottom);
  overflow-x: auto;
  width: 100%;
  table-layout: fixed;
}

table td,
table th {
  border: 1px solid var(--p-border);
  box-sizing: border-box;
  min-width: 1em;
  padding: 0.5em;
  position: relative;
  vertical-align: top;
  word-wrap: break-word;
}

table th {
  text-align: left;
  font-weight: bold;
}

table td > *:last-child,
table th > *:last-child {
  margin-bottom: 0;
}

/**
--------------------------------------------------
* RTE Callouts
--------------------------------------------------
*/
:root {
  --p-callout-info-bg: color-mix(in srgb, var(--p-info) 10%, white);
  --p-callout-success-bg: color-mix(in srgb, var(--p-success) 10%, white);
  --p-callout-warning-bg: color-mix(in srgb, var(--p-warning) 10%, white);
}

blockquote.callout {
  margin: 0 0 var(--p-p-margin-bottom);
  padding: 1em;
  border-radius: var(--p-callout-border-radius, 4px);
  border-left: var(--p-callout-border-left-width, 4px) solid var(--p-border);
}

blockquote.callout > *:last-child {
  margin-bottom: 0;
}

/* Info callout - blue */
blockquote.callout.info {
  background-color: var(--p-callout-info-bg);
  border-left-color: var(--p-info);
}

/* Success callout - green */
blockquote.callout.success {
  background-color: var(--p-callout-success-bg);
  border-left-color: var(--p-success);
}

/* Warning callout - yellow */
blockquote.callout.warning {
  background-color: var(--p-callout-warning-bg);
  border-left-color: var(--p-warning);
}

/**
--------------------------------------------------
* RTE Code Blocks
--------------------------------------------------
*/
.code-block-wrapper {
  margin: 0 0 var(--p-p-margin-bottom);
}

.code-block-container {
  background-color: #1e1e1e;
  color: #d4d4d4;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  margin: 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
  font-size: 0.875em;
  line-height: 1.5;
  color-scheme: dark;
}

.code-block-container code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  border-radius: 3px;
  padding: 0.125em 0.25em;
  font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
}

/**
--------------------------------------------------
* Dark
--------------------------------------------------
*/
[dark] {
  --p-border: var(--p-border-dark);
  --p-text-color-contrast-50: var(--p-text-color-light-contrast-50);
  --p-text-color-contrast-100: var(--p-text-color-light-contrast-100);
  --p-text-color-contrast-200: var(--p-text-color-light-contrast-200);
  --p-dark-mode: 1;
  --p-boxed-bg: rgba(255, 255, 255, 0.07);
  --p-text-color: var(--p-text-color-light);
  --p-heading-color: var(--p-heading-color-light);
  --p-skeleton-loading-rgb: 90, 90, 90;
  --p-skeleton-bg: #ffffff1a;
  --p-callout-info-bg: color-mix(in srgb, var(--p-info) 30%, black);
  --p-callout-success-bg: color-mix(in srgb, var(--p-success) 30%, black);
  --p-callout-warning-bg: color-mix(in srgb, var(--p-warning) 30%, black);
}

/**
--------------------------------------------------
* Mediaflow player
--------------------------------------------------
*/
.media-player .mf-livewait {
  padding: 0;
  height: 100%;
  background-position: center;
}

p-hero .media-player {
  width: 100%;
  height: 100%;
  aspect-ratio: unset !important;
  pointer-events: none;
}

p-hero video {
  min-width: 100%;
  min-height: 100%;
  height: unset !important;
  width: unset !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

p-hero .plyr__controls,
p-hero .plyr__control,
p-hero .mf-loader {
  display: none !important;
}

p-hero .plyr__poster {
  background-size: cover;
}

/* p-hero .plyr__poster,
p-hero .plyr__video-wrapper,
p-hero .plyr--video {
  background-color: transparent;
} */
