/** { outline: 1px solid rgba(255,0,0,.15); } Debug layout */

/* =========================
Base
========================= */
:root{
    --brand: rgb(0, 112, 186);
    --bg: #e9f0f7;
    --border: #ddd;
}

*, *::before, *::after { box-sizing: border-box; }

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin:0;
    padding:20px;
    background: var(--bg);
}

.container{
    width:100%;
    max-width:800px;
    /*min-width:400px;*/
    margin:0 auto;
    background:#ffffff;
    padding:40px;
    box-shadow:0 0 15px rgba(0,0,0,.1);
    border-radius:8px;
    page-break-after:always;
    box-sizing:border-box;
    overflow-x: ;
}

/* =========================
Layout helpers
========================= */
.hidden{ display:none; }
.page-break{ page-break-before:always; }
.image-center img, .image-center-lower img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    max-width:100%;
}
.image-center-lower img{
    max-height: 500px;
}
.image-left img{
    display:block;
    margin:1rem 0 0 0;
    width: 100%;
    max-width:360px;
    height:auto;
}

.logo{ max-width:100%; height:auto; }

code {
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 500;
    color: var(--brand);
    background: rgba(0, 112, 186, 0.05);
    border: 1px solid rgba(0, 112, 186, 0.15);
    border-radius: 3px;
    padding: 0.0rem 0.2rem;
}

.example-block {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #64748b;
    background: #fafcff;
    border-left: 3px solid rgba(0, 112, 186, 0.25);
    padding: 0.6rem 0.8rem;
}

/* =========================
Header / Footer
========================= */
header, footer{
    text-align:center;
    padding:20px 0;
    background: var(--brand);
    color:#ffffff;
    border-radius:8px 8px 0 0;
}

header h1, footer p{ margin:0; }

footer{
    border-radius:0 0 8px 8px;
    margin-top:20px;
    position:relative;
}

/* =========================
Headings
========================= */
h2{
    color: var(--brand);
    border-bottom:2px solid var(--brand);
    padding-bottom:5px;
    margin-top:20px;
    font-size:28px;
}

h3{
    color: var(--brand);
    margin-top:15px;
    font-size:22px;
    margin-bottom:0px;
}

h4{
    color: var(--brand);
    font-size:18px;
    margin-top:15px;
    margin-bottom:0px;
}

/* reduce whitespace if an h3/h4 is immediately followed by a paragraph 
.container h3:has(+ p),
.container h4:has(+ p){
    margin-bottom:0;
} 

/* =========================
Tables
========================= */
table{
    width:100%;
    max-width:100%;
    border-collapse:collapse;
    margin-bottom:28px;
    margin-top:20px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}

table.table-footnote{ margin-bottom:0; }
table, th, td{ border:1px solid var(--border); }

th, td{
    padding:10px;
    text-align:left;
    overflow-wrap:anywhere;
    hyphens:auto;
}

th{ background: var(--bg); }

/* tight lists inside table cells */
td ul, td ol, th ul, th ol{
    margin:0;
    padding-left:1.1rem;
}
td li, th li{
    margin:0;
    line-height:1.3;
}

/* =========================
Lists
========================= */
ol{
    margin:20px 0;
    padding-left:40px;
    list-style-type:decimal;
    font-size:16px;
    line-height:1.6;
    color:#333;
}
ol li{ margin-bottom:10px; }
ol li::marker{ color:#0070BA; font-weight:bold; }

.list-compact{
    margin:.35rem 0 0;
    padding-left:1.05rem;
    font-size:.8rem;
}
.list-compact li{ margin:.2rem 0; }

ul, ol {
    margin-top: 0.7em;
    margin-bottom: 1em;
}
/* =========================
Language toggle
========================= */
.language-toggle{
    margin:20px 0;
    text-align:center;
}
.language-toggle button{
    padding:10px 20px;
    margin:0 10px;
    font-size:16px;
    cursor:pointer;
}

/* =========================
Boxes
========================= */
.highlight{
    background: var(--bg);
    padding:5px 10px;
    border-radius:5px;
}

.warning-box{
    background:#fff4e6;
    border:1px solid #ffa64d;
    color:#804000;
    padding:15px;
    border-radius:8px;
    margin:20px 0;
    font-size:16px;
}
.warning-box h3{
    margin:0 0 10px;
    font-size:18px;
    color:#e65c00;
}
.warning-box p{ margin:0; }

.info-box{
    background:#e6f7ff;
    border:1px solid #91d5ff;
    color:#005b96;
    padding:15px;
    border-radius:8px;
    margin:20px 0;
    font-size:16px;
}
.info-box h3{
    margin:0 0 10px;
    font-size:18px;
    color:#096dd9;
}
.info-box p{ margin:0; }

/* tighter lists inside info/warning boxes */
.warning-box ul, .info-box ul,
.warning-box ol, .info-box ol{
    margin:.25rem 0 0;
    padding-left:1.1rem;
}

/* =========================
TOC (nav)
========================= */
nav{
    background:#f9f9f9;
    border:1px solid var(--border);
    border-radius:8px;
    padding:15px 20px;
    margin-bottom:20px;
    box-shadow:0 0 10px rgba(0,0,0,.05);
    position:sticky;
    top:20px;
    z-index:1000;
}

nav ul{
    list-style:none;
    padding-left:0;
    margin:0;
}

nav ul > li{ margin-bottom:10px; }

nav ul ul{
    margin-left:20px;
    padding-left:0;
}
nav ul ul > li{
    margin:5px 0;
}

nav a{
    text-decoration:none;
    font-size:16px;
    color:#005b96;
    transition:color .3s ease;
}
nav a:hover{
    color: var(--brand);
    text-decoration:underline;
}
nav a.active{
    font-weight:bold;
    color: var(--brand);
}

/* =========================
Footnotes / comments
========================= */
.footnote{
    font-size:.8em;
    color:#666;
    vertical-align:super;
    font-weight:bold;
}

.table-comment{
    font-size:.8em;
    color:#666;
    margin-top:5px;
    margin-bottom:20px;
    line-height:1.4;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.section-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.4rem;
}

.section-tags li {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  white-space: nowrap;
}

/* =========================
Small screens (same behavior)
========================= */
@media screen and (max-width:399px){
    body{
        max-width:800px;
        /*min-width:400px;*/
        width:100%;
        overflow-x:auto;
        padding:10px;
        transform:scale(calc(100vw / 400));
        transform-origin:top left;
    }
    .container{
        width:100%;
        overflow-x:auto;
        padding:10px;
    }
}

/* =========================
Print
========================= */
@media print{
    body{
        margin:0;
        padding:0;
        background:#ffffff;
    }

    @page{
        size:A4;
        margin:10mm;
    }

    table, th, td{ border:1pt solid var(--border); }
    .info-box{ border:1pt solid #91d5ff; }
    .warning-box{ border:1pt solid #ffa64d; }

    .container{
        box-shadow:none;
        border-radius:0;
        width:auto;
        max-width:none;
        page-break-after:auto;
        page-break-inside:auto;
    }

    header{
        border-radius:0;
        page-break-after:avoid;
        position:static;
    }

    footer{
        border-radius:0;
        position:static;
        bottom:0;
        left:0;
        right:0;
        width:100%;
        background: var(--brand);
        color:#ffffff;
        text-align:center;
        height:20mm;
        align-items:center;
        justify-content:center;
        box-sizing:border-box;
    }

    .page-number::after{
        content:"Page " counter(page) " / " counter(pages);
    }

    nav{
        position:static;
        box-shadow:none;
        top:auto;
        z-index:auto;
    }

    .language-toggle{ display:none; }
}