/* Vars */
:root {
    --font-family: "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    --surface-0: #fff;
    --surface-50: #fafafa;
    --surface-100: #f5f5f5;
    --surface-200: #eee;
    --surface-300: #e0e0e0;
    --surface-400: #bdbdbd;
    --surface-500: #9e9e9e;
    --surface-600: #757575;
    --surface-700: #616161;
    --surface-800: #424242;
    --surface-900: #212121;

    --primary-50: #f5f9ff;
    --primary-100: #d0e1fd;
    --primary-200: #abc9fb;
    --primary-300: #85b2f9;
    --primary-400: #609af8;
    --primary-500: #3b82f6;
    --primary-600: #326fd1;
    --primary-700: #295bac;
    --primary-800: #204887;
    --primary-900: #183462;
}

/* Fix: corrige diferença de formatação entre ``` e {% highlight %}*/  
figure.highlight > pre {font-size: 100%}

/* Fix: corrige espaçamento de estrutura de tópicos */
/* Quando o 2o nível nivel é apenas 1 item, o markdown não está colocando o <p>
   <ul>
        <li><p>Item 1</p>
            <ul>
                <li><p>Item 1.1</p></li>
                <li><p>Item 1.2</p></li>
            <ul>
        </li>
        <li><p>Item 2</p>
            <ul>
                <li>Item 2.1</li>  <--- sem <p>
            <ul>
        </li>
    <ul> 
    Para corrigir, colocamos a margem de <li> igual à do <p>
*/
.td-content>ul li,
.td-content>ol li {margin-bottom: 1rem}

/* Reduz espaçamento entre itens do menu esquerdo */
.td-sidebar-nav__section {margin-bottom: 0.4rem}

/* Fonte de titulos */
h1, .h1 {
    font-size: 2.5rem;
}
h2, .h2 {
    font-size: 2.1rem;
    font-weight: bold;
}
.td-content>h1 {
    font-weight: 600;
}

/* Linha abaixo do breadcrumb */
.breadcrumb {
    border-bottom: 1px solid #dee2e6;
}

/* Cor do header */
.td-navbar { 
    background: #FFF; 
    box-shadow: 0 -15px 120px 10px rgb(59 142 216 / 30%);
}

/* Mantém o alinhamento do logo/nome em telas menores */
.navbar-brand {
    line-height: calc(4rem - .3125rem - .3125rem - .5rem - .5rem); /* = min-height do td-navbar - paddings do td-navbar e navbar-bran */
}

/* Margem para que o h1 fique visível ao abrir via ancora #nome-da-ancora */
@media(min-width:768px) {
    h1[id]:before {
        display: block;
        content: " ";
        margin-top: -5rem;
        height: 5rem;
        visibility: hidden
    }
}

/* Responsividade */
@media(min-width:1200px) {
    .td-main {
        /* max-width: 1200px; */
    }
}

/* Espaçamento superior em telas menores devido à barra de menu */
.td-main main { 
    padding-top: 1.5rem;
}
@media (min-width: 768px) {
    .td-main main {
        padding-top: 5.5rem;
    }
}

/* Largura 100% do conteúdo, incluindo tabela e imagens */
@media(min-width:992px) {
    .td-max-width-on-larger-screens,
    .td-content>pre,
    .td-content>.highlight,
    .td-content>.lead,
    .td-content>h1,
    .td-content>h2,
    .td-content>ul,
    .td-content>ol,
    .td-content>p,
    .td-content>blockquote,
    .td-content>dl dd,
    .td-content .footnotes,
    .td-content>.alert {
        max-width: 100%
    }
}
.img-fluid,
.td-content img {
    width: 100%
}
.table-responsive,
.td-box .row.section>table,
.td-content>table {
    display: table;
}

/* TOC */
#TableOfContents { padding-left: 2px; }
#TOC { border-left: 5px solid #ddd; list-style-type: none; padding-left: 1rem; }

/* Links */
a {
    color: var(--primary-600);
}
a:hover {
    color: var(--primary-700);
}

/* Home */
img[alt="Kubepit"] { 
    margin-top: 1rem; 
    /* https://polypane.app/css-3d-transform-examples */
    /* https://getcssscan.com/css-box-shadow-examples */
    /* transform: perspective(75em) rotateX(18deg); */
    /* box-shadow: rgba(22, 31, 39, 0.42) 0px 60px 123px -25px, rgba(19, 26, 32, 0.08) 0px 35px 75px -35px; */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
    border-radius: 10px;
    border: 1px solid;
    border-color: rgb(213, 220, 226) rgb(213, 220, 226) rgb(184, 194, 204);
}

/* Body */
body {
    background-color: #f7faff;
}