/* =========================
DOCUMENTAÇÃO
========================= */

.docs-main {
max-width: 1500px;
}

/* =========================
HEADER
========================= */

.docs-header {
margin-bottom: 35px;
}

.docs-label {
display: inline-block;

```
margin-bottom: 8px;

color: var(--blue-dark);

font-size: 11px;
font-weight: bold;

letter-spacing: 1.5px;
```

}

.docs-header h1 {
margin-bottom: 8px;

```
color: var(--blue-deep);

font-size: 36px;
```

}

.docs-header p {
color: var(--text-light);

```
font-size: 15px;
```

}

/* =========================
LAYOUT
========================= */

.docs-layout {
display: grid;

```
grid-template-columns: 230px minmax(0, 800px);

gap: 45px;

align-items: start;
```

}

/* =========================
DOCUMENTAÇÃO NAV
========================= */

.docs-nav {
position: sticky;

```
top: 25px;

padding: 18px;

background: var(--white);

border: 1px solid var(--border);

border-radius: 14px;
```

}

.docs-nav-title {
margin-bottom: 12px;

```
color: var(--blue-deep);

font-size: 13px;
font-weight: bold;
```

}

.docs-nav > a,
.docs-nav-group > a {
display: block;

```
padding: 7px 10px;

border-radius: 7px;

color: var(--text-light);

font-size: 13px;

text-decoration: none;

transition: 0.2s;
```

}

.docs-nav > a:hover,
.docs-nav-group > a:hover {
background: #eafaff;

```
color: var(--blue-dark);
```

}

.docs-nav-active {
background: var(--blue-light);

```
color: var(--blue-deep) !important;

font-weight: bold;
```

}

.docs-nav-group {
margin-top: 18px;
}

.docs-nav-group > span {
display: block;

```
padding: 0 10px 6px;

color: var(--text);

font-size: 12px;
font-weight: bold;
```

}

/* =========================
ARTIGO
========================= */

.docs-content {
min-width: 0;

```
padding: 35px;

background: var(--white);

border: 1px solid var(--border);

border-radius: var(--radius);

box-shadow:
    0 5px 20px rgba(40, 130, 160, 0.04);
```

}

.docs-content section {
scroll-margin-top: 30px;

```
margin-bottom: 45px;
```

}

.docs-content h2 {
margin-bottom: 15px;

```
color: var(--blue-deep);

font-size: 28px;
```

}

.docs-content h3 {
margin-top: 28px;
margin-bottom: 10px;

```
color: var(--blue-dark);

font-size: 19px;
```

}

.docs-content p {
margin-bottom: 15px;

```
color: var(--text);

font-size: 15px;

line-height: 1.75;
```

}

.docs-content hr {
margin: 40px 0;

```
border: none;

border-top: 1px solid #e1f0f5;
```

}

/* =========================
CÓDIGO
========================= */

.docs-content pre {
margin: 20px 0;

```
padding: 18px;

overflow-x: auto;

background: #f3fbfe;

border: 1px solid #d9eef5;

border-left: 4px solid var(--blue);

border-radius: 10px;
```

}

.docs-content code {
font-family:
"Cascadia Code",
"Fira Code",
Consolas,
monospace;

```
font-size: 13px;

line-height: 1.6;

color: #24566b;
```

}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1000px) {

```
.docs-layout {
    grid-template-columns: 200px minmax(0, 1fr);

    gap: 25px;
}
```

}

@media (max-width: 750px) {

```
.docs-layout {
    display: block;
}

.docs-nav {
    position: relative;

    top: auto;

    margin-bottom: 20px;
}

.docs-content {
    padding: 25px;
}
```

}

@media (max-width: 650px) {

```
.docs-header h1 {
    font-size: 28px;
}

.docs-content {
    padding: 20px;
}

.docs-content h2 {
    font-size: 24px;
}
```

}