/* Matches trafolo.eu's real site header, verified against its own theme
   stylesheet (wp-content/themes/eof/style.css): .header { background-color:
   #0C1924 } and the nav hover/active accent color #ff7802. mkdocs-material's
   built-in palette is a fixed named-color list (no arbitrary hex support
   there) -- theme.palette.primary/accent must be set to "custom" in
   mkdocs.yml for these CSS custom properties to apply. */
:root > * {
  --md-primary-fg-color: #0C1924;
  --md-primary-fg-color--light: #1E3A4F;
  --md-primary-fg-color--dark: #060B10;
  --md-accent-fg-color: #ff7802;
}

/* Wraps the <iframe> exporters.py's _embed_youtube_videos emits for a
   Confluence "embed" YouTube smart link. A bare 16:9 iframe would otherwise
   render at its fixed pixel size regardless of viewport width; this keeps it
   at a 16:9 aspect ratio while filling the available content width. */
.youtube-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Confluence status macros (confluence_html._rewrite_status_lozenges). Colours
   are Atlassian's lozenge palette as seen on the TEMP conversion test page
   (DEV-1563): subtle background, bold uppercase text. */
.confluence-status {
  display: inline-block;
  padding: 0 0.4em;
  border-radius: 3px;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  color: #42526e;
  background-color: #dfe1e6;
}
.confluence-status-green { color: #006644; background-color: #e3fcef; }
.confluence-status-yellow { color: #172b4d; background-color: #fff0b3; }
.confluence-status-red { color: #bf2600; background-color: #ffebe6; }
.confluence-status-blue { color: #0747a6; background-color: #deebff; }
.confluence-status-purple { color: #403294; background-color: #eae6ff; }

/* Confluence image alignment (confluence_html._annotate_images). The img
   rules are scoped to a bare image (inside a <p>): the image inside a
   captioned <figure> carries the same class, and floating it there put the
   caption beside the image instead of under it. Material
   centres a <figure> and lets a bare image sit inline; these restore the
   position the author chose in Confluence. Wrapped images float beside the
   following text, capped at half the column so the text keeps room. */
.md-typeset figure.confluence-image-left {
  margin-left: 0;
  align-items: flex-start;
}
.md-typeset figure.confluence-image-right {
  margin-right: 0;
  align-items: flex-end;
}
.md-typeset figure.confluence-image-wrap-right,
.md-typeset p > img.confluence-image-wrap-right {
  float: right;
  max-width: 50%;
  margin: 0 0 1em 1.5em;
}
.md-typeset figure.confluence-image-wrap-left,
.md-typeset p > img.confluence-image-wrap-left {
  float: left;
  max-width: 50%;
  margin: 0 1.5em 1em 0;
}
/* Material lays a figure out as a flex box; floated, it put the caption
   beside the image (seen in a real build, 2026-10-10). A plain block keeps
   the caption under it. */
.md-typeset figure.confluence-image-wrap-right,
.md-typeset figure.confluence-image-wrap-left {
  display: block;
  width: min-content;
}
/* min-content sizes the figure from the image, so the image cannot also be
   sized from the figure (a percentage would be circular); cap it by the
   viewport instead so a wide wrapped image cannot overflow a phone screen. */
.md-typeset figure.confluence-image-wrap-right img,
.md-typeset figure.confluence-image-wrap-left img {
  max-width: 45vw;
}
.md-typeset p > img.confluence-image-right {
  display: block;
  margin-left: auto;
}
/* A heading never sits beside a wrapped image from the previous section. */
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5, .md-typeset h6 {
  clear: both;
}

/* Confluence's small-text paragraph option (exporters._paragraph_attributes). */
.md-typeset p.confluence-text-small {
  font-size: 0.85em;
}

/* Decision list state (confluence_html._rewrite_decision_lists): the icon
   replaces the bullet, as in Confluence -- green when decided, grey when
   not. */
.md-typeset li:has(> .confluence-decision) {
  list-style: none;
  margin-left: 0;
}
.confluence-decision::before {
  display: inline-block;
  width: 1.2em;
  font-weight: 700;
}
.confluence-decision-decided::before {
  content: "\2713";
  color: #36b37e;
}
.confluence-decision-undecided::before {
  content: "\25CB";
  color: #97a0af;
}

/* Confluence panels (confluence_html: every info/note/tip/warning macro and
   panel is emitted as `!!! <type> confluence-panel ""`). Confluence draws a
   panel as a tinted box with the type icon in a left gutter and no title;
   Material's untitled admonition has a white box and no icon at all, because
   it draws the icon in the title bar. Tints and icon colours are Atlassian's
   panel palette; the icons are Material's own per-type icon variables. A
   custom panel's colour and emoji come from a per-page <style> block
   (confluence_html.panel_styles), which overrides these. */
.md-typeset .admonition.confluence-panel {
  position: relative;
  padding: 0.1rem 0.8rem 0.1rem 2.4rem;
  border: none;
  border-radius: 3px;
  box-shadow: none;
  font-size: 0.75rem;
  background-color: #f4f5f7;
}
.md-typeset .admonition.confluence-panel::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0.85rem;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.9rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--md-admonition-icon--note);
  mask-image: var(--md-admonition-icon--note);
  background-color: #5243aa;
}
.md-typeset .admonition.confluence-panel.info { background-color: #deebff; }
.md-typeset .admonition.confluence-panel.info::before {
  -webkit-mask-image: var(--md-admonition-icon--info);
  mask-image: var(--md-admonition-icon--info);
  background-color: #0052cc;
}
.md-typeset .admonition.confluence-panel.note { background-color: #eae6ff; }
.md-typeset .admonition.confluence-panel.success { background-color: #e3fcef; }
.md-typeset .admonition.confluence-panel.success::before {
  -webkit-mask-image: var(--md-admonition-icon--success);
  mask-image: var(--md-admonition-icon--success);
  background-color: #00875a;
}
.md-typeset .admonition.confluence-panel.warning { background-color: #fffae6; }
.md-typeset .admonition.confluence-panel.warning::before {
  -webkit-mask-image: var(--md-admonition-icon--warning);
  mask-image: var(--md-admonition-icon--warning);
  background-color: #ff8b00;
}
.md-typeset .admonition.confluence-panel.danger { background-color: #ffebe6; }
.md-typeset .admonition.confluence-panel.danger::before {
  -webkit-mask-image: var(--md-admonition-icon--danger);
  mask-image: var(--md-admonition-icon--danger);
  background-color: #de350b;
}

/* Confluence multi-column layouts (confluence_html._rewrite_layouts), with
   the same columns as in Confluence. Below Material's content-width
   breakpoint they stack, as Confluence's own mobile view does. */
.md-typeset .confluence-columns {
  display: grid;
  gap: 0.8rem 1.6rem;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 45em) {
  .md-typeset .confluence-columns-two-equal { grid-template-columns: 1fr 1fr; }
  .md-typeset .confluence-columns-three-equal { grid-template-columns: 1fr 1fr 1fr; }
  .md-typeset .confluence-columns-two-left-sidebar { grid-template-columns: 1fr 2fr; }
  .md-typeset .confluence-columns-two-right-sidebar { grid-template-columns: 2fr 1fr; }
  .md-typeset .confluence-columns-three-with-sidebars { grid-template-columns: 1fr 2fr 1fr; }
}
.md-typeset .confluence-columns > div { min-width: 0; }