/* Eviden branding for mdBook
   Primary orange : #f14611  (CTA / accent, close to eviden-logo-orange.svg #FF6D43)
   Brand ink      : #1a1a1a  (matches eviden-logo-black.svg — hero / dark
                              sections and table headers; no purple, per the
                              real Eviden logo which is orange + black/white only)
   Light orange   : #f97850  (hover / gradient)
   Fonts: Inter (body) · Montserrat (headings), self-hosted — see fonts/fonts.css */

:root {
    --cosmian-accent: #f14611;      /* Cosmian primary orange */
    --cosmian-accent-dark: #c73f1b;
    --sidebar-width: 300px;
    --content-max-width: 820px;
}

html {
    font-family: "Montserrat", "Open Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

.menu-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Explicit rule for bold/strong: match eviden.com's Montserrat Medium (500).
   Using 600 keeps the emphasis clearly visible in a technical context. */
.content strong,
.content b {
    font-weight: 600;
}

/* Heading size hierarchy — mdBook sets html { font-size: 62.5% } so 1 rem = 10 px.
   Body text is 1.6 rem = 16 px. All values below are in rem against that 10 px root.
   Modular scale, ratio 1.2 (Minor Third), base 16 px = body:
   H1 33 px → H2 28 px → H3 23 px → H4 19 px (steps 1.19 / 1.22 / 1.21 / 1.18).
   The previous scale (28/22/18/17/15) put H4 at 1.06x body — visually
   indistinguishable as a heading — and H5 smaller than body, an inverted
   hierarchy. H4 is used 228 times across the docs, so that step matters most. */
.content h1 { font-size: 3.3rem; }
.content h2 { font-size: 2.8rem; }
.content h3 { font-size: 2.3rem; }
.content h4 { font-size: 1.9rem; }

/* H5 stays at body size but is differentiated by weight/case/tracking rather
   than by size — the same treatment already used on table headers below.
   H5 is rare (6 uses today) so this is a safety net, not the common path. */
.content h5 {
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* H6 has no rule in the previous scale — falls back to the browser default
   (~0.67em, smaller than body). Zero uses in-repo today, but sub-repos are
   separate repos and can introduce one; give it a defined, still-smallest
   step rather than an inherited accident. */
.content h6 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--fg);
    opacity: 0.75;
}

/* Brand accent on links and active sidebar entry.
   Light theme: --cosmian-accent-dark (#c73f1b) reaches 4.5:1 on white — WCAG AA.
   Dark themes: dark orange becomes unreadable on dark backgrounds, so we
   switch to the bright accent (#f14611) which hits ~5:1 on coal/navy/ayu. */
.content a:link,
.content a:visited {
    color: var(--cosmian-accent-dark);
}

html.coal .content a:link,
html.coal .content a:visited,
html.navy .content a:link,
html.navy .content a:visited,
html.ayu  .content a:link,
html.ayu  .content a:visited {
    color: var(--cosmian-accent);
}

/* Underline on hover/focus: color alone isn't a sufficient link signifier
   (WCAG 1.4.1) since these links live inline with regular body text. */
.content a:hover,
.content a:focus {
    text-decoration: underline;
}

.chapter li.chapter-item a.active {
    color: var(--cosmian-accent);
    font-weight: 600;
}

/* Slightly tighten code blocks to match the previous look */
.content pre code {
    font-size: 0.85em;
}

/* ---- Eviden header / menu-bar banner ------------------------------------ */

/* Banner height matching eviden.com's navigation bar (86 px). */
:root {
    --menu-bar-height: 86px;
}

/* The header follows the active theme background (same as sidebar & content).
   Only the orange accent border is fixed. */
#menu-bar-hover-placeholder {
    border-bottom: 2px solid var(--cosmian-accent);
}

/* Establish a positioning context so the absolutely-centred title works. */
#menu-bar {
    position: relative;
}

/* Orange EVIDEN logo container — flex so the logo vertically centres. */
.menu-bar .menu-title {
    display: flex;
    align-items: center;
    font-size: inherit;
    font-weight: normal;
}

.header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: inherit;
}

/* Logo dimensions matching eviden.com (172 × 34 px rendered).
   With the corrected SVG viewBox (560 × 110), height 34 px → width ≈ 173 px. */
.header-logo {
    height: 34px;
    width: auto;
    flex-shrink: 0;
}

/* "Technical Documentation" — absolutely centred in the full banner width,
   vertically centred, pointer-events disabled so it never blocks clicks. */
.header-logo-subtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-family: "Montserrat", sans-serif;
    font-size: 2.4rem;  /* 24 px against 10 px root */
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
    white-space: nowrap;
}

/* ---- Dark-mode image contrast ------------------------------------------ */
/* draw.io / SVG diagrams export with hardcoded black text (color: rgb(0,0,0))
   that becomes invisible on dark page backgrounds. Give all content images a
   light card background so they are always readable. */
html.coal .content img,
html.navy .content img,
html.ayu  .content img {
    background-color: #f6f8fa;
    border-radius: 4px;
    padding: 6px;
}

/* ---- emgithub code embeds ---------------------------------------------- */
/* emgithub always renders with a white/light Highlight.js theme
   (style=default or style=stackoverflow-light). In dark themes, apply the
   "night-mode" CSS filter: invert(1) darkens the background while
   hue-rotate(180deg) approximately restores syntax-highlight colours. */
html.coal .emgithub-embed,
html.navy .emgithub-embed,
html.ayu  .emgithub-embed {
    filter: invert(1) hue-rotate(180deg);
    border-radius: 4px;
    overflow: hidden;
    display: block;
    margin: 0.5em 0;
}

/* ── Sidebar navigation UX improvements ──────────────────────────────── */

/* Full-row hover highlight — makes every chapter item feel interactive,
   so users know the text is clickable (not just the arrow toggle). */
.chapter li.chapter-item:hover {
    background-color: var(--sidebar-spacer);
    border-radius: 4px;
}

/* Title link fills the row (minus the arrow button) so the entire text
   area is clickable. Clicking navigates, and mdBook auto-expands the
   active subtree when the destination page loads. min-width: 0 prevents
   long titles from overflowing the sidebar. */
.chapter li.chapter-item > a:not(.toggle) {
    flex: 1;
    min-width: 0;
}

/* Section headers with no link are rendered as <div> by mdBook.
   Make them fill the row and show a pointer so users know they're
   interactive (JS in sidebar-expand.js proxies clicks to the toggle).
   Override mdBook's default gray (#aaaaaa) so collapsible headers are
   visually prominent — they should draw the eye, not look disabled. */
.chapter li.chapter-item > div {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    color: var(--fg);
    font-weight: 600;
    opacity: 1;
}

/* ── Top-level sidebar section headers ───────────────────────────────────── */
/* Items at depth 0 in SUMMARY.md act as chapter group titles.
   Render them in Montserrat uppercase to match the former MkDocs Material
   "navigation section" style: clearly distinct from child page links. */

/* Horizontal separator between top-level product groups.
   mdBook renders each group as TWO sibling <li>s:
     <li class="chapter-item">  ← section title
     <li>                        ← plain li wrapping <ol class="section"> children
   So "li.chapter-item + li.chapter-item" NEVER matches (non-chapter-item
   li is always between them).  The correct selector is "li + li.chapter-item":
   any chapter-item whose immediately preceding sibling is a plain li.
   This matches every product header (positions 3, 5, 7 …) but not
   "Getting started" (first child, no preceding sibling). */
ol.chapter > li + li.chapter-item {
    margin-top: 0.8rem;
    padding-top: 1.4rem;
    position: relative;
}

ol.chapter > li + li.chapter-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.4rem;
    right: 0.4rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--cosmian-accent) 20%,
        var(--cosmian-accent) 80%,
        transparent 100%
    );
    opacity: 0.45;
}

/* Section headers with no link (empty link in SUMMARY.md → rendered as <div>)
   and headers that do carry a link (rendered as <a>).
   All top-level group titles (Getting started + all products) use the brand
   accent: dark variant for light theme (4.5:1 on white), bright for dark themes. */
ol.chapter > li.chapter-item > div,
ol.chapter > li.chapter-item > a:not(.toggle) {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--cosmian-accent-dark);
    opacity: 1;
}

html.coal ol.chapter > li.chapter-item > div,
html.coal ol.chapter > li.chapter-item > a:not(.toggle),
html.navy ol.chapter > li.chapter-item > div,
html.navy ol.chapter > li.chapter-item > a:not(.toggle),
html.ayu  ol.chapter > li.chapter-item > div,
html.ayu  ol.chapter > li.chapter-item > a:not(.toggle) {
    color: var(--cosmian-accent);
}

/* ── Version switcher ─────────────────────────────────────────────────── */
#version-switcher-mount {
    display: flex;
    align-items: center;
    margin-right: 0.6rem;
}

#version-switcher {
    font-family: "Montserrat", sans-serif;
    font-size: 1.4rem;  /* 14 px against 10 px root */
    font-weight: 600;
    color: var(--fg);
    background: var(--bg);
    border: 2px solid var(--cosmian-accent);
    border-radius: 4px;
    padding: 3px 16px 3px 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* chevron using a data-URI so no extra asset is needed */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e94e24'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    max-width: 120px;
}

#version-switcher:hover,
#version-switcher:focus {
    border-color: var(--cosmian-accent-dark);
    outline: none;
}

/* ── Theme picker (pinceau / paint-brush button) ──────────────────────────── */
/* Hide the native mdBook multi-theme picker: we already provide a focused
   light ↔ dark toggle via #theme-invert. The picker is redundant and
   visually clutters the header. */
#theme-toggle,
#theme-list {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EVIDEN DESIGN TOKENS
   Primary orange : #f14611  (already declared above as --cosmian-accent)
   Brand ink      : #1a1a1a  (matches eviden-logo-black.svg — no purple in the
                              real Eviden logo, so hero/dark sections and table
                              headers use neutral near-black instead)
   Teal secondary : #82c0c7
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --cosmian-dark: #1a1a1a;        /* Eviden brand ink (hero / dark sections, table headers) */
    --cosmian-teal: #82c0c7;
    --cosmian-teal-light: rgba(130, 192, 199, 0.15);
    --cosmian-orange-light: rgba(241, 70, 17, 0.08);
    --cosmian-orange-mid: rgba(241, 70, 17, 0.18);
    /* Inline code pill */
    --inline-code-bg: rgba(241, 70, 17, 0.07);
    --inline-code-border: rgba(241, 70, 17, 0.25);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin: 1.6rem 0;
    font-size: 0.95em;
}

.content table thead tr {
    background-color: var(--cosmian-dark) !important;
    color: #fff !important;
}

.content table thead th {
    padding: 0.75rem 1rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 0.9em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    color: #fff;
}

/* Accent stripe on first header cell */
.content table thead th:first-child {
    border-left: 3px solid var(--cosmian-accent);
}

.content table tbody tr {
    transition: background-color 0.12s ease;
}

.content table tbody tr:nth-child(2n) {
    background-color: var(--cosmian-orange-light);
}

.content table tbody tr:hover {
    background-color: var(--cosmian-teal-light);
}

.content table td,
.content table th {
    padding: 0.6rem 1rem;
    vertical-align: top;
    border-top: 1px solid var(--table-border-color, rgba(0,0,0,0.07));
}

.content table thead th {
    border-top: none;
}

/* Dark-mode table header — lighter than pure black so it still reads as a
   distinct band against the coal/navy/ayu page backgrounds */
html.coal .content table thead tr,
html.navy .content table thead tr,
html.ayu  .content table thead tr {
    background-color: #2a2a2a !important;
}

/* ── Code blocks ─────────────────────────────────────────────────────────── */

.content pre {
    position: relative;
    border-radius: 8px;
    border-left: 4px solid var(--cosmian-accent);
    padding: 1.2rem 1.4rem;
    margin: 1.4rem 0;
    overflow-x: auto;
}

/* ── Inline code ─────────────────────────────────────────────────────────── */

.content :not(pre) > code {
    background: var(--inline-code-bg);
    border: 1px solid var(--inline-code-border);
    border-radius: 4px;
    padding: 0.15em 0.45em;
    font-size: 0.88em;
    word-break: break-word;
}

html.coal .content :not(pre) > code,
html.navy .content :not(pre) > code,
html.ayu  .content :not(pre) > code {
    --inline-code-bg: rgba(241, 70, 17, 0.12);
    --inline-code-border: rgba(241, 70, 17, 0.3);
}

/* ── Blockquotes ─────────────────────────────────────────────────────────── */

.content blockquote {
    margin: 1.4rem 0;
    padding: 0.8rem 1.2rem;
    border-left: 4px solid var(--cosmian-accent);
    background: var(--cosmian-orange-light);
    border-radius: 0 6px 6px 0;
    color: inherit;
}

.content blockquote > p:last-child {
    margin-bottom: 0;
}

html.coal .content blockquote,
html.navy .content blockquote,
html.ayu  .content blockquote {
    background: rgba(233, 78, 36, 0.1);
}

/* ── H2 section dividers ─────────────────────────────────────────────────── */

.content h2 {
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--cosmian-orange-mid);
    margin-top: 2.4rem;
}

/* 18% opacity is invisible on dark backgrounds — raise to 45% */
html.coal .content h2,
html.navy .content h2,
html.ayu  .content h2 {
    border-bottom-color: rgba(241, 70, 17, 0.45);
}

/* ── Horizontal rules ────────────────────────────────────────────────────── */

.content hr {
    height: 2px;
    border: none;
    background: linear-gradient(
        to right,
        var(--cosmian-accent) 0%,
        var(--cosmian-dark)   80%,
        transparent           100%
    );
    margin: 2rem 0;
    opacity: 0.55;
    border-radius: 1px;
}

/* ── Heading anchor links ────────────────────────────────────────────────── */

.content a.header {
    color: inherit;
    text-decoration: none;
}

/* Heading anchors must explicitly restore `inherit` in dark themes to prevent
   the dark-theme a:link rule (higher specificity) from turning them orange. */
html.coal .content a.header,
html.navy .content a.header,
html.ayu  .content a.header {
    color: inherit;
}

.content a.header:hover {
    color: var(--cosmian-accent);
}

.content a.header::after {
    content: " ¶";
    font-size: 0.65em;
    opacity: 0;
    color: var(--cosmian-accent);
    transition: opacity 0.2s ease;
    vertical-align: middle;
}

.content a.header:hover::after {
    opacity: 0.7;
}

/* ── Custom scrollbar (WebKit) ───────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--cosmian-accent);
    border-radius: 3px;
    opacity: 0.7;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--cosmian-accent-dark);
}

/* ── Focus ring ──────────────────────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--cosmian-accent);
    outline-offset: 2px;
}

/* ── External link indicator ─────────────────────────────────────────────── */

.content a[href^="http"]:not([href*="docs.cosmian.com"]):not([href*="cosmian.com"])::after {
    content: "\f08e"; /* FontAwesome external-link */
    font-family: FontAwesome;
    font-size: 0.7em;
    margin-left: 0.3em;
    opacity: 0.55;
    vertical-align: super;
}

/* ── Search box polish ───────────────────────────────────────────────────── */

#searchbar {
    border: 2px solid var(--cosmian-teal);
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    font-family: "Open Sans", sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#searchbar:focus {
    border-color: var(--cosmian-accent);
    box-shadow: 0 0 0 3px rgba(233, 78, 36, 0.15);
    outline: none;
}

/* ── Content max-width enforcement ──────────────────────────────────────── */

.content main {
    max-width: var(--content-max-width, 820px);
}

/* Unitless so nested lists inherit the ratio rather than a fixed px
   computed from the parent (mdBook ships line-height: 1.45em, which nested
   <li> inherit verbatim regardless of their own font-size). */
.content p,
.content ul,
.content ol,
.content li {
    line-height: 1.6;
}

/* Paragraph separation: was 16px (1x font-size) against a ~25.6px line box.
   AAA (WCAG 1.4.8) asks for 1.5x line spacing; treated here as a readability
   target rather than a compliance requirement, since AA (1.4.12) only
   requires the layout to survive a user override, not ship one by default. */
.content main > p {
    margin-bottom: 2.4rem;
}

/* ── Mobile improvements ─────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content pre {
        padding: 0.9rem 1rem;
    }

    .content h2 {
        margin-top: 1.8rem;
    }
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
    .content table thead tr {
        background-color: #e0e0e0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .content table thead th {
        color: #000;
    }

    .content pre {
        border-left-color: #ccc;
    }

    ::-webkit-scrollbar {
        display: none;
    }
}

/* ── KMS demo banner (matches Eviden Trustway DataProtect hero) ── */
.kms-demo-banner {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 2rem;
    min-height: 180px;
    display: flex;
    align-items: center;
}
.kms-demo-banner__bg {
    position: absolute;
    inset: 0;
    background: url('https://eviden.com/wp-content/uploads/2025/10/Eviden_Trustway_Cosmian_Dataprotection-banner.jpg') center/cover no-repeat;
    z-index: 0;
}
.kms-demo-banner__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,26,26,.82) 0%, rgba(26,26,26,.55) 100%);
}
.kms-demo-banner__content {
    position: relative;
    z-index: 1;
    padding: 1.8rem 2rem;
    max-width: 600px;
}
.kms-demo-banner__tag {
    display: inline-block;
    font-family: "Montserrat", sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--cosmian-accent-dark, #c73f1b);
    padding: .25rem .7rem;
    border-radius: 4px;
    margin-bottom: .75rem;
}
.kms-demo-banner__title {
    font-family: "Montserrat", sans-serif;
    font-size: 1.65rem;
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
    margin: 0 0 1rem;
}
.kms-demo-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: "Montserrat", sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: #1a1a1a;
    background: #fff;
    padding: .55rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.kms-demo-banner__cta:hover {
    background: #f0f0f0;
    color: #1a1a1a;
    text-decoration: none;
}
.kms-demo-banner__cta svg {
    transition: transform .2s;
}
.kms-demo-banner__cta:hover svg {
    transform: translateX(3px);
}

/* Dark themes (navy/coal/ayu): lighten overlay so banner doesn't blend in */
html.coal .kms-demo-banner__bg::after,
html.navy .kms-demo-banner__bg::after,
html.ayu  .kms-demo-banner__bg::after {
    background: linear-gradient(135deg, rgba(26,26,26,.6) 0%, rgba(26,26,26,.35) 100%);
}
html.coal .kms-demo-banner,
html.navy .kms-demo-banner,
html.ayu  .kms-demo-banner {
    box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

@media (max-width: 768px) {
    .kms-demo-banner { min-height: 150px; }
    .kms-demo-banner__content { padding: 1.2rem 1.4rem; }
    .kms-demo-banner__title { font-size: 1.25rem; }
}