/* The CESMOD visual identity over Swagger UI at /docs (#664, docs/brand.md); Swagger keeps its layout and method colors. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/overview/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/overview/assets/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The content width and gutters of /overview (Tailwind max-w-7xl, px-4 sm:px-6 lg:px-8), so the header holds still between the pages. */
:root {
  --content-width: 1280px;
  --gutter: 16px;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
  }
}

body {
  margin: 0;
}

.swagger-ui .wrapper {
  max-width: var(--content-width);
  padding: 0 var(--gutter);
}

/* Swagger sizes the tag name to its text, so a long one (cesmod_pdp) shifts its description; 6.5em fits it at 24px. */
@media (min-width: 640px) {
  .swagger-ui .opblock-tag > a.nostyle {
    flex: 0 0 6.5em;
  }
}

/* The same bar as the /overview header: one project line on the left, the two-page nav on the right, no logo. */
.cesmod-bar {
  background-color: #0e1524;
  padding: 20px max(var(--gutter), calc((100% - var(--content-width)) / 2 + var(--gutter)));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  font-family: "Instrument Sans", Arial, sans-serif;
}

.cesmod-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.cesmod-name {
  color: #ffffff;
}

.cesmod-sep,
.cesmod-platform {
  color: #c0e4ef;
}

.cesmod-nav {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

/* Matches the /overview nav: flow links on smart, white on hover, the current page white with a solid flow underline. */
.cesmod-bar a {
  color: #c0e4ef;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(192 228 239 / 40%);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  white-space: nowrap;
}

.cesmod-bar a[aria-current="page"] {
  color: #ffffff;
  text-decoration-color: #c0e4ef;
}

.cesmod-bar a:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
}

.cesmod-bar a:focus-visible {
  outline: 2px solid #c0e4ef;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Swagger UI sets its family on dozens of selectors, so only !important reaches them all; code stays monospace. */
.swagger-ui,
.swagger-ui * {
  font-family: "Instrument Sans", Arial, sans-serif !important;
}

.swagger-ui :is(code, code *, pre, pre *, textarea, .microlight, .microlight *, .curl, .base-url),
.swagger-ui :is(.opblock-summary-path, .opblock-summary-path *, .opblock-summary-operation-id),
.swagger-ui :is(.parameter__type, .parameter__in, .prop-format, .prop-type),
.swagger-ui :is(.model, .model *):not(.model-title, .model-title *) {
  font-family: monospace !important;
}

.swagger-ui,
.swagger-ui .info .title,
.swagger-ui .info p,
.swagger-ui .info li,
.swagger-ui .info table,
.swagger-ui .markdown p,
.swagger-ui .renderedMarkdown p,
.swagger-ui .opblock-tag,
.swagger-ui .opblock-tag small,
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-operation-id,
.swagger-ui .opblock .opblock-summary-description,
.swagger-ui .opblock .opblock-section-header h4,
.swagger-ui .opblock .opblock-section-header > label,
.swagger-ui .opblock-description-wrapper p,
.swagger-ui .parameter__name,
.swagger-ui .parameter__type,
.swagger-ui table thead tr td,
.swagger-ui table thead tr th,
.swagger-ui .response-col_status,
.swagger-ui .response-col_links,
.swagger-ui .responses-inner h4,
.swagger-ui .responses-inner h5,
.swagger-ui .tab li,
.swagger-ui section.models h4,
.swagger-ui .model-title,
.swagger-ui .model,
.swagger-ui label,
.swagger-ui .btn {
  color: #0e1524;
}

/* A link shares the text color, so its underline is what marks it. */
.swagger-ui a:not(.nostyle),
.swagger-ui a:not(.nostyle):hover,
.swagger-ui .info a,
.swagger-ui .info a:hover {
  color: #0e1524;
  text-decoration: underline;
}

.swagger-ui .btn.execute {
  background-color: #0e1524;
  border-color: #0e1524;
  color: #ffffff;
}

.swagger-ui .btn.authorize {
  border-color: #0e1524;
  color: #0e1524;
}

.swagger-ui .btn.authorize svg {
  fill: #0e1524;
}