/* ==========================================================================
   Swagger UI in de huisstijl

   Swagger UI brengt een eigen groen-blauw palet en een eigen letter mee. Dat
   maakt van de API-pagina een vreemde eend naast de rest van de dienst. Wat
   hier staat trekt kleur, letter en ruimte gelijk — de structuur van Swagger
   blijft zoals hij is, want die kent de lezer al.
   ========================================================================== */

body {
    background:
        linear-gradient(rgba(16, 26, 42, 0.028) 1px, transparent 1px),
        var(--site-paper);
    background-size: 100% 48px;
}

.swagger-ui {
    font-family: var(--site-sans);
    color: var(--site-ink);
}

/* De eigen kop van Swagger valt weg: de mast erboven doet dat werk al. */
.swagger-ui .topbar {
    display: none;
}

.swagger-ui .wrapper {
    width: min(var(--site-content), calc(100% - 2 * var(--site-gutter)));
    max-width: none;
    padding: 0;
    margin-inline: auto;
}

.swagger-ui .information-container {
    padding-block: clamp(2rem, 5vw, 3.5rem) 1rem;
}

.swagger-ui .info {
    margin: 0 0 2rem;
}

.swagger-ui .info .title,
.swagger-ui h1, .swagger-ui h2, .swagger-ui h3, .swagger-ui h4, .swagger-ui h5 {
    font-family: var(--site-sans);
    color: var(--site-ink);
    letter-spacing: -0.02em;
}

.swagger-ui .info .title {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 700;
}

.swagger-ui .info .title small.version-stamp {
    background: var(--site-night);
}

.swagger-ui .info li,
.swagger-ui .info p,
.swagger-ui .info table,
.swagger-ui .markdown p,
.swagger-ui .renderedMarkdown p {
    font-family: var(--site-sans);
    color: var(--site-muted);
}

.swagger-ui .info a,
.swagger-ui .markdown a,
.swagger-ui .renderedMarkdown a {
    color: var(--site-orange-ink);
}

.swagger-ui .info a:hover {
    color: var(--site-orange);
}

/* ------------------------------------------------------------ bewerking --- */

.swagger-ui .opblock-tag {
    font-family: var(--site-sans);
    border-bottom-color: var(--site-line-dark);
    color: var(--site-ink);
}

.swagger-ui .opblock {
    margin-bottom: 1rem;
    border: 1px solid var(--site-line-dark);
    border-radius: 14px;
    background: var(--site-white);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

/* POST is bij Swagger groen; hier is het de accentkleur van het merk. De rand
   links houdt het onderscheid tussen methoden zichtbaar. */
.swagger-ui .opblock.opblock-post {
    border-color: var(--site-line-dark);
    background: var(--site-white);
}

.swagger-ui .opblock.opblock-post .opblock-summary {
    border-color: transparent;
    border-left: 3px solid var(--site-orange);
}

.swagger-ui .opblock.opblock-post .opblock-summary-method {
    background: var(--site-orange);
}

.swagger-ui .opblock.opblock-get .opblock-summary {
    border-color: transparent;
    border-left: 3px solid var(--site-night);
}

.swagger-ui .opblock.opblock-get .opblock-summary-method {
    background: var(--site-night);
}

.swagger-ui .opblock .opblock-summary-method {
    border-radius: 8px;
    font-family: var(--site-sans);
    font-weight: 650;
}

.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-path__deprecated {
    font-family: var(--site-mono);
    font-size: 0.95rem;
    color: var(--site-ink);
}

/* ---------------------------------------------------------------- knop --- */

.swagger-ui .btn {
    border-radius: 10px;
    font-family: var(--site-sans);
    font-weight: 650;
}

.swagger-ui .btn.execute {
    border-color: var(--site-orange);
    background: var(--site-orange);
    color: var(--site-white);
}

.swagger-ui .btn.execute:hover {
    background: #f05a10;
}

.swagger-ui .btn.authorize {
    border-color: var(--site-night);
    color: var(--site-night);
}

.swagger-ui .btn.authorize svg {
    fill: var(--site-night);
}

.swagger-ui .btn.try-out__btn {
    border-color: var(--site-line-dark);
    color: var(--site-ink);
}

/* --------------------------------------------------------------- code --- */

.swagger-ui .microlight,
.swagger-ui .highlight-code,
.swagger-ui table.model tr td,
.swagger-ui .model {
    font-family: var(--site-mono);
}

.swagger-ui section.models {
    border-color: var(--site-line-dark);
    border-radius: 14px;
    background: var(--site-white);
}

.swagger-ui section.models .model-container {
    background: var(--site-paper-deep);
    border-radius: 10px;
}

/* Swagger tekent een eigen focusring die niet aansluit op de rest. */
.swagger-ui *:focus-visible {
    outline: 2px solid var(--site-orange);
    outline-offset: 2px;
}

/* Swagger UI zet zijn eigen linkkleur op alle `a`-elementen, dus ook op die in
   de mast en de voet. Die staan buiten zijn bereik en horen bij de huisstijl. */
.mast a,
.mast a:hover {
    color: var(--site-white);
}

.mast__dienst a {
    color: var(--site-muted-light);
    text-decoration: none;
}

.mast__dienst a:hover {
    color: var(--site-orange-soft);
}

.voet a {
    color: var(--site-muted);
}