/*
 * beCPG documentation theme, aligned with www.becpg.net: same colours, fonts and header bar.
 * Fonts are self-hosted by the website (/assets/fonts), served by the same Apache image.
 */
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-600-latin.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-700-latin.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/figtree-400-latin.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/figtree-500-latin.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/figtree-600-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500-latin.woff2) format("woff2")}

:root{
  --petrol:#004353;--petrol-2:#00313d;--teal:#00767b;--mint:#00ffbd;--orange:#ff642d;
  --ink:#0b2b33;--text:#3d5a62;--muted:#56707a;--line:#d9e5e6;--mist:#eef5f5;--paper:#fff;
  --f-display:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --bar:60px;
}

/* ---------- Site header bar ---------- */
.becpg-bar{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--bar);display:flex;align-items:center;gap:24px;padding:0 24px;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line);font-family:var(--f-display)}
.becpg-bar-logo img{height:38px;width:auto;display:block}
.becpg-bar-nav{display:flex;gap:2px;margin-left:auto}
.becpg-bar-nav a{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:8px;transition:background .2s,color .2s}
.becpg-bar-nav a:hover{background:var(--mist);color:var(--teal);text-decoration:none}
.becpg-bar-nav a[aria-current]{color:var(--teal)}
.becpg-bar-cta{display:flex;gap:8px}
.becpg-btn{font:600 13.5px/1 var(--f-display);text-decoration:none;padding:10px 15px;border-radius:999px;white-space:nowrap;transition:transform .2s,background .2s,color .2s}
.becpg-btn:hover{text-decoration:none;transform:translateY(-1px)}
.becpg-btn-primary{background:var(--orange);color:#fff !important;box-shadow:0 8px 18px -10px rgba(255,100,45,.8)}
.becpg-btn-ghost{color:var(--petrol) !important;box-shadow:inset 0 0 0 1.5px var(--petrol)}
.becpg-btn-ghost:hover{background:var(--petrol);color:#fff !important}

body.becpg-themed .book{position:absolute;top:var(--bar);left:0;right:0;bottom:0;height:auto}
@media (max-width:1100px){.becpg-bar-nav{display:none}.becpg-bar-cta{margin-left:auto}}
@media (max-width:600px){.becpg-bar{padding:0 14px;gap:10px}.becpg-btn-ghost{display:none}.becpg-bar-logo img{height:32px}}

/* ---------- Base typography ---------- */
.book,.book p,.book li,.book a,.book span:not(.fa),.book td,.book th,.book input,.book button{font-family:var(--f-body)}
.book .fa{font-family:FontAwesome !important}
.book .book-body .page-wrapper .page-inner section.normal{color:var(--text);font-size:16.5px;line-height:1.7}
.book .book-body .page-wrapper .page-inner{max-width:min(1440px,100%);padding:28px clamp(24px,4vw,64px) 60px}
.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section h5{font-family:var(--f-display) !important;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.markdown-section h1{font-size:32px !important;font-weight:700;margin:6px 0 22px !important;padding-bottom:14px;border-bottom:2px solid var(--line)}
.markdown-section h2{font-size:23px !important;font-weight:600;margin:38px 0 14px !important;padding-left:14px;border-left:4px solid var(--mint)}
.markdown-section h3{font-size:18px !important;font-weight:600;margin:28px 0 10px !important;color:var(--petrol)}
.markdown-section h4{font-size:16px;font-weight:600}
.markdown-section a{color:var(--teal) !important;text-decoration:none;border-bottom:1px solid rgba(0,118,123,.25)}
.markdown-section a:hover{color:var(--orange) !important;border-bottom-color:var(--orange)}
.markdown-section strong{color:var(--ink)}

/* Inline code, code blocks */
.markdown-section code,.markdown-section pre,.markdown-section pre code{font-family:var(--f-mono) !important;font-size:.88em}
.markdown-section p>code,.markdown-section li>code,.markdown-section td>code{color:var(--petrol) !important;background:var(--mist) !important;padding:.12em .42em;border-radius:6px}
.markdown-section pre{background:#f7fafa !important;border:1px solid var(--line) !important;border-radius:12px;padding:16px 18px !important}

/* Blockquotes as notes */
.markdown-section blockquote{border-left:4px solid var(--teal) !important;background:var(--mist);border-radius:0 12px 12px 0;color:var(--text) !important;padding:12px 18px !important}

/* Tables */
.markdown-section table{border-radius:12px;border:1px solid var(--line)}
.markdown-section table th{background:var(--petrol);color:#fff;font-family:var(--f-display);font-weight:600;font-size:14px;border-color:var(--petrol) !important}
.markdown-section table td{border-color:var(--line) !important}
.markdown-section table tr:nth-child(2n){background:#fafcfc}

/* Screenshots: framed like on the website */
.markdown-section img{display:block;margin:18px auto;max-width:min(100%,860px);border-radius:10px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,67,83,.06),0 12px 32px -14px rgba(0,67,83,.25)}

/* ---------- Sidebar ---------- */
.book .book-summary{background:#f7fafa;border-right:1px solid var(--line);width:300px}
.book.with-summary .book-body{left:300px}
@media (max-width:600px){.book.with-summary .book-body{left:0;transform:translate(min(300px,calc(100% - 60px)),0)}}
.book .book-summary #book-search-input{background:transparent;border-bottom:1px solid var(--line);padding:12px 18px}
.book .book-summary #book-search-input input{font-family:var(--f-body);font-size:14px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:#fff}
.book .book-summary #book-search-input input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(0,118,123,.15)}
.book .book-summary ul.summary li a,.book .book-summary ul.summary li span{color:var(--text);font-size:14px;padding:7px 18px;border-radius:0 8px 8px 0;text-transform:none}
.book .book-summary ul.summary li a:hover{color:var(--teal);background:rgba(0,118,123,.06);text-decoration:none}
.book .book-summary ul.summary li.active>a{color:var(--petrol);font-weight:600;background:rgba(0,255,189,.14);box-shadow:inset 3px 0 0 var(--teal)}
.book .book-summary ul.summary li.header{font:600 11.5px/1 var(--f-display);text-transform:uppercase;letter-spacing:.12em;color:var(--teal);padding:20px 18px 8px}
.book .book-summary ul.summary>li.chapter>a{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:13px;letter-spacing:.02em}
.book .book-summary ul.summary li.divider{background:var(--line)}
.book-logo{display:none}

/* ---------- Toolbar, navigation arrows, page TOC ---------- */
.book .book-header{background:transparent;border-bottom:1px solid var(--line);color:var(--muted)}
.book .book-header .btn{color:var(--muted)}
.book .book-header .btn:hover{color:var(--teal)}
.book .book-header h1 a{font-family:var(--f-display);color:var(--ink)}
.book .book-body .navigation{color:var(--teal)}
.book .book-body .navigation:hover{color:var(--orange)}
.page-toc{border:1px solid var(--line) !important;border-radius:12px;background:#f7fafa !important;padding:14px 16px !important}
.page-toc a{color:var(--text) !important;border:0 !important}
.page-toc a:hover{color:var(--teal) !important}

/* Search results */
.book .book-body .page-wrapper .page-inner section.search-results .search-results-item h3 a{color:var(--teal);font-family:var(--f-display)}

/* Keyboard focus */
.book a:focus-visible,.becpg-bar a:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
