/* =====================================================================
   NovoDeblur unified stylesheet
   Shared by the website pages (body) and the user manual (body.manual)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --ink: #16252d;
    --muted: #5f7076;
    --teal: #087f8c;
    --teal-dark: #075c68;
    --cyan: #b7edf0;
    --paper: #f5f7f3;
    --white: #ffffff;
    --line: #d8e2df;
    --warning: #a64b24;
    --code-bg: #f0f5f7;
    --code-border: #d8e2df;
}

html {
    scroll-behavior: smooth;
}

a {
    color: var(--teal-dark);
    font-weight: 600;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--warning);
}

/* =====================================================================
   WEBSITE
   Legacy class-based layout (.heading-large, .p-normal, ...) plus the
   site-wide visual refresh. Scoped to body:not(.manual) so it never
   affects manual pages.
   ===================================================================== */

body:not(.manual) {
    box-sizing: border-box;
    margin: 0;
    padding: 0 0 5rem;
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Sans', 'Trebuchet MS', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
}

body:not(.manual) *,
body:not(.manual) *::before,
body:not(.manual) *::after {
    box-sizing: border-box;
}

.header-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 2rem 1.5rem;
}

.header-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
    margin: 0;
}

.header-title {
    margin: 0;
    color: var(--ink);
    font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
    font-size: clamp(1.55rem, 3vw, 2.65rem);
    font-weight: 500;
    line-height: 1.15;
}

.header-title em {
    color: var(--teal);
    font-style: normal;
}

nav.navbar-expand-lg,
.navbar-expand-lg.navbar-dark {
    max-width: 1180px;
    margin: 0 auto 2rem;
    padding: .35rem 1.25rem;
    background: var(--ink) !important;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(22, 37, 45, .12);
}

.navbar-dark .navbar-nav .nav-link {
    padding: .7rem 1rem;
    color: #dcebea;
    font-size: .94rem;
    font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--cyan);
}

.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
}

body:not(.manual)>div:not(.header-container),
body:not(.manual)>p,
body:not(.manual)>h1,
body:not(.manual)>h2,
body:not(.manual)>h3,
body:not(.manual)>ul,
body:not(.manual)>ol,
body:not(.manual)>table,
body:not(.manual)>.header-container+nav,
body:not(.manual)>.page-fullscreen {
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
}

body:not(.manual)>div[style*="text-align: left"] {
    max-width: 1180px;
}

.heading-large,
.heading-small,
.heading-very-small,
.heading-examples {
    color: var(--ink);
    font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
    font-weight: 600;
    line-height: 1.18;
}

.heading-large {
    margin-top: 3.5rem;
    margin-bottom: 1.25rem;
    padding-left: 1rem;
    border-left: 5px solid var(--teal);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
}

.heading-small {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 2.3vw, 1.9rem);
}

.heading-very-small {
    margin-top: 2rem;
    margin-bottom: .9rem;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.heading-examples {
    max-width: 980px;
    margin: 3rem auto 1rem;
    color: var(--teal-dark);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.p-normal,
.p-small,
.p-large,
.p-important,
.p-examples {
    max-width: 980px;
    margin: 0 auto 1.25rem;
    text-align: left;
    font-family: 'DM Sans', 'Trebuchet MS', sans-serif;
}

.p-normal {
    font-size: 1.08rem;
}

.p-small {
    font-size: .95rem;
}

.p-large {
    font-size: 1.35rem;
}

.p-important {
    color: var(--warning);
    font-size: 1.2rem;
    font-weight: 700;
}

.p-examples {
    font-size: 1rem;
}

.list-large,
.list-small,
.list-inside {
    max-width: 980px;
    margin: 0 auto 1.5rem;
    padding-left: 1.5rem;
    font-size: 1.03rem;
}

.list-inside {
    list-style-position: outside;
}

.list-small {
    font-size: .98rem;
}

body:not(.manual) li {
    margin-bottom: .45rem;
}

.table-font {
    max-width: 900px;
    margin: 1.5rem auto;
    font-size: .98rem;
    background: var(--white);
    border: 1px solid var(--line);
}

.table-font th {
    color: var(--white);
    background: var(--teal-dark);
    font-family: 'Space Grotesk', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.table-font td,
.table-font th {
    padding: .8rem 1rem;
    border-color: var(--line);
}

.img-heading {
    height: auto;
    margin: 0rem 0rem 0.5rem 0rem;
    width: 50%
}

body:not(.manual) .img-float-left {
    height: auto;
    margin: 1rem 3rem 2rem 5rem;
    float: left;
    border-radius: 5px;
    width: 25%
}

.img-float-left-large {
    height: auto;
    margin: 1rem 3rem 2rem 5rem;
    float: left;
    border-radius: 5px;
    width: 35%
}

.img-float-right {
    height: auto;
    margin: 1rem 3rem 2rem 5rem;
    float: right;
    border-radius: 5px;
    width: 25%
}

.img-float-right-large {
    height: auto;
    margin: 1rem 3rem 2rem 5rem;
    float: right;
    border-radius: 5px;
    width: 35%
}

.img-examples {
    height: auto;
    border-radius: 5px;
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 0rem
}

.img-fullscreen {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.page-fullscreen {
    margin-top: 2%;
    margin-bottom: 2%;
}

.fullscreen-figure {
    margin: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body:not(.manual) .img-float-left,
.img-float-left-large,
.img-float-right,
.img-float-right-large,
.img-examples {
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(22, 37, 45, .1);
}

body:not(.manual) .img-float-left,
.img-float-left-large,
.img-float-right,
.img-float-right-large {
    margin-top: .35rem;
    margin-bottom: 1.25rem;
}

.img-examples {
    width: min(60%, 820px);
    margin: 1.5rem auto .75rem;
}

.btn-primary {
    background: var(--teal);
    border-color: var(--teal);
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
}

@media (max-width: 767px) {
    body:not(.manual) {
        padding-bottom: 2rem;
        font-size: 1rem;
    }

    .header-container {
        gap: .85rem;
        padding: 1.25rem 1rem;
    }

    .header-logo {
        width: 58px;
        height: 58px;
    }

    nav.navbar-expand-lg,
    .navbar-expand-lg.navbar-dark {
        margin-bottom: 1.25rem;
        border-radius: 0;
    }

    .heading-large,
    .heading-small,
    .heading-very-small,
    .heading-examples,
    .p-normal,
    .p-small,
    .p-large,
    .p-important,
    .p-examples,
    .list-large,
    .list-small,
    .list-inside {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    .heading-large {
        margin-top: 2.25rem;
    }

    body:not(.manual) .img-float-left,
    .img-float-left-large,
    .img-float-right,
    .img-float-right-large {
        float: none;
        display: block;
        width: min(100%, 520px);
        margin: 1rem auto;
    }

    .img-examples {
        width: calc(100% - 2rem);
    }

    .table-font {
        display: block;
        width: calc(100% - 2rem);
        overflow-x: auto;
        margin: 1rem !important;
    }
}

/* =====================================================================
   MANUAL
   Scoped under body.manual so its plain-tag styling (h1-h6, pre, code,
   table, ...) never leaks into the website pages above.
   ===================================================================== */

body.manual {
    box-sizing: border-box;
    hyphens: auto;
    font-family: 'DM Sans', 'Trebuchet MS', sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink);
    background-color: var(--paper);
    padding: 1.5rem 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}

body.manual *,
body.manual *::before,
body.manual *::after {
    box-sizing: border-box;
}

body.manual> :first-child {
    margin-top: 0 !important;
}

body.manual> :last-child {
    margin-bottom: 0 !important;
}

/* BLOCKS */
body.manual p,
body.manual blockquote,
body.manual ul,
body.manual ol,
body.manual dl,
body.manual table,
body.manual pre {
    margin: 1rem 0;
}

/* HEADERS */
body.manual h1,
body.manual h2,
body.manual h3,
body.manual h4,
body.manual h5,
body.manual h6 {
    margin: 1.75rem 0 0.75rem;
    padding: 0;
    font-weight: 600;
    font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.25;
    color: var(--ink);
}

body.manual h1 tt,
body.manual h1 code,
body.manual h2 tt,
body.manual h2 code,
body.manual h3 tt,
body.manual h3 code,
body.manual h4 tt,
body.manual h4 code,
body.manual h5 tt,
body.manual h5 code,
body.manual h6 tt,
body.manual h6 code {
    font-size: inherit;
}

body.manual h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--ink);
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--teal);
    margin-bottom: 1.5rem;
}

body.manual h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--ink);
    padding-left: 0.75rem;
    border-left: 5px solid var(--teal);
    margin-top: 2.5rem;
}

body.manual h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    color: var(--teal-dark);
    margin-top: 2rem;
}

body.manual h4 {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: var(--ink);
    margin-top: 1.5rem;
}

body.manual h5,
body.manual h6 {
    font-size: 1.05rem;
    color: var(--muted);
    margin-top: 1rem;
    font-weight: 600;
}

body.manual>h2:first-child,
body.manual>h1:first-child,
body.manual>h1:first-child+h2,
body.manual>h3:first-child,
body.manual>h4:first-child,
body.manual>h5:first-child,
body.manual>h6:first-child {
    margin-top: 0;
    padding-top: 0;
}

body.manual a:first-child h1,
body.manual a:first-child h2,
body.manual a:first-child h3,
body.manual a:first-child h4,
body.manual a:first-child h5,
body.manual a:first-child h6 {
    margin-top: 0;
    padding-top: 0;
}

body.manual h1+p,
body.manual h2+p,
body.manual h3+p,
body.manual h4+p,
body.manual h5+p,
body.manual h6+p {
    margin-top: 1rem;
}

/* LINKS */
body.manual a {
    text-decoration: none;
}

body.manual a:hover {
    text-decoration: underline;
}

/* LISTS */
body.manual ul,
body.manual ol {
    padding-left: 1.75rem;
}

body.manual ul li> :first-child,
body.manual ol li> :first-child,
body.manual ul li ul:first-of-type,
body.manual ol li ol:first-of-type,
body.manual ul li ol:first-of-type,
body.manual ol li ul:first-of-type {
    margin-top: 0;
}

body.manual ul ul,
body.manual ul ol,
body.manual ol ol,
body.manual ol ul {
    margin-bottom: 0;
}

body.manual li {
    margin-bottom: 0.35rem;
}

body.manual dl {
    padding: 0;
}

body.manual dl dt {
    font-size: 1.1rem;
    font-weight: 600;
    font-style: italic;
    padding: 0;
    margin: 1rem 0 0.35rem;
}

body.manual dl dt:first-child {
    padding: 0;
}

body.manual dl dt> :first-child {
    margin-top: 0;
}

body.manual dl dt> :last-child {
    margin-bottom: 0;
}

body.manual dl dd {
    margin: 0 0 1rem;
    padding: 0 1rem;
}

body.manual dl dd> :first-child {
    margin-top: 0;
}

body.manual dl dd> :last-child {
    margin-bottom: 0;
}

body.manual ol.item-list {
    list-style-type: none;
    padding-left: 0;
    counter-reset: list-counter var(--start, 0);
}

body.manual ol.item-list li {
    counter-increment: list-counter;
    margin-bottom: 0.6rem;
    position: relative;
    padding-left: 2.5rem;
}

body.manual ol.item-list li::before {
    content: "[" counter(list-counter) "]";
    position: absolute;
    left: 0;
    top: 0;
    width: 2.2rem;
    display: inline-block;
    text-align: right;
    font-weight: 600;
    color: var(--teal);
}

/* CODE FORMATTING */
body.manual pre,
body.manual code,
body.manual tt {
    font-size: 0.95rem;
    font-family: 'Consolas', 'Liberation Mono', 'Courier New', monospace;
}

body.manual code,
body.manual tt {
    margin: 0;
    padding: 0.2rem 0.4rem;
    white-space: normal;
    border: 1px solid var(--code-border);
    background-color: var(--code-bg);
    border-radius: 3px;
    color: var(--ink);
}

body.manual pre>code {
    margin: 0;
    padding: 0;
    white-space: pre;
    word-wrap: normal;
    border: none;
    background: transparent;
    color: inherit;
}

body.manual pre {
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    border-left: 4px solid var(--teal);
    font-size: 0.95rem;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-x: auto;
    padding: 1rem;
    border-radius: 4px;
    color: var(--ink);
}

/* BLOCKQUOTES */
body.manual blockquote {
    border-left: 4px solid var(--teal);
    padding: 0.5rem 1.25rem;
    background-color: rgba(8, 127, 140, 0.05);
    margin: 1rem 0;
}

body.manual blockquote> :first-child {
    margin-top: 0;
}

body.manual blockquote> :last-child {
    margin-bottom: 0;
}

/* HORIZONTAL RULES */
body.manual hr {
    clear: both;
    margin: 2rem 0;
    height: 0;
    overflow: hidden;
    border: none;
    background: transparent;
    border-bottom: 2px solid var(--line);
    padding: 0;
}

/* TABLES */
body.manual table th {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--white);
    background-color: var(--teal-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.manual table th,
body.manual table td {
    border: 1px solid var(--line);
    padding: 0.75rem;
    font-size: 0.95rem;
    text-align: left;
}

body.manual table tr {
    border-top: 1px solid var(--line);
    background-color: var(--white);
}

body.manual table tr:nth-child(2n) {
    background-color: rgba(8, 127, 140, 0.03);
}

/* IMAGES */
body.manual img {
    margin: 1rem 0;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(22, 37, 45, 0.08);
}

body.manual .img-float-left {
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
    max-width: 40%;
}

body.manual .logo {
    display: inline;
    vertical-align: middle;
    margin-right: 1rem;
    width: 80px;
    height: auto;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    body.manual {
        padding: 1rem;
        font-size: 1rem;
    }

    body.manual h1 {
        font-size: 1.8rem;
    }

    body.manual h2 {
        font-size: 1.4rem;
        padding-left: 0.5rem;
    }

    body.manual h3 {
        font-size: 1.2rem;
    }

    body.manual pre {
        font-size: 0.9rem;
        overflow-x: auto;
    }

    body.manual table {
        font-size: 0.9rem;
    }

    body.manual table th,
    body.manual table td {
        padding: 0.5rem;
    }

    body.manual .img-float-left {
        float: none;
        max-width: 100%;
        margin: 1rem 0;
    }
}