:root {
    /* Sidebar design tokens */
    --xl-content-size: 1152px;
}

.docs-section-main-section {
    width: 100%;
}

.docs-section-main-section .overview {
    background: rgb(13, 56, 61);
}

.docs-section-main-section > * > * {
    padding-left: var(--s0);
}

@media (min-width: 1025px) {
    .docs-section-main-section > * > * {
        padding-left: var(--s5);
    }
}

.docs-section-main-section .overview .content {
    max-width: var(--xl-content-size);
    color: var(--color-light);
    margin-left: var(--s-1);
}

/* Prevent hyphenation on docs home header - break between words instead */
.docs-section-main-section #home-banner-header {
    hyphens: none;
    -webkit-hyphens: none;
}

.overview {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-xl);
}

.overview p {
    line-height: 1.75;
    font-size: var(--font-size-xl);
}

.docs-section-main-section .overview {
    padding-top: var(--s5);
    padding-bottom: var(--s5);
}

.docs-section-main-section #on-page-cta-form {
    max-width: var(--xl-content-size);
}

.docs-main-section {
    max-width: var(--xl-content-size);
    padding: var(--s-1);
}

@media (min-width: 1025px) {
    .docs-main-section {
        padding-right: var(--s0);
    }
}

/* Code block styles for docs content */
.docs-content pre {
    border-radius: var(--border-radius);
    padding-inline-start: var(--s1);
    padding-block-start: var(--s1);
    padding-block-end: var(--s1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.docs-content pre > code {
    display: inline-block;
    font-size: var(--font-size);
    background-color: inherit;
    word-break: normal;
    white-space: pre;
    border-radius: var(--border-radius);
    line-height: var(--line-height-sm);
}

.docs-content *:not(pre) > code {
    background-color: var(--color-light-grey);
    word-break: break-word;
    white-space: pre-wrap;
    border-radius: var(--border-radius);
    padding: var(--s-7) var(--s-5);
}

/* Table styles for docs content */
.docs-content table {
    border-collapse: collapse;
    width: 100%;
    margin: var(--s1) 0;
    border: 2px solid var(--color-light-grey);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.docs-content table thead {
    background-color: var(--color-light);
}

.docs-content table th,
.docs-content table td {
    border: 1px solid var(--color-light-grey);
    padding: var(--s-1) var(--s0);
    text-align: left;
}

.docs-content table th {
    font-weight: 600;
    color: var(--color-dark);
}

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

/* Remove double borders at edges */
.docs-content table thead tr:first-child th {
    border-top: none;
}

.docs-content table tbody tr:last-child td {
    border-bottom: none;
}

.docs-content table th:first-child,
.docs-content table td:first-child {
    border-left: none;
}

.docs-content table th:last-child,
.docs-content table td:last-child {
    border-right: none;
}

/* Prevent article title from causing horizontal overflow on mobile */
.article-title {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.title-section {
    overflow: hidden;
}

/* ──────────────────────────────────────────────
   Docs Section Landing Pages
   ────────────────────────────────────────────── */

.docs-landing {
    padding-bottom: var(--s3);
}

.docs-landing-title {
    font-family: var(--font-header);
    font-size: var(--font-size-3xl);
    color: var(--color-brand-dark);
    margin-block-end: var(--s-1);
}

.docs-landing-intro {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-darkish);
    max-width: var(--measure);
}

.docs-landing-intro p {
    margin-block-end: var(--s-1);
}

/* Card grid */
.docs-landing-grid {
    padding-bottom: var(--s2);
}

/* Card link */
a.docs-landing-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--border-radius);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Card inner box */
box-l.docs-landing-card-inner {
    height: 100%;
    border: solid var(--color-brand-original-light) var(--border-thin);
    border-left: 3px solid var(--color-brand);
    border-radius: var(--border-radius);
    background: var(--background-color);
}

a.docs-landing-card:hover box-l.docs-landing-card-inner {
    border-color: var(--color-brand-light);
    border-left-color: var(--color-brand-secondary);
    box-shadow: 0 2px 12px rgba(40, 55, 70, 0.1);
}

/* Card header row (title + arrow) */
.docs-landing-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-1);
}

.docs-landing-card-title {
    font-family: var(--font-body);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-brand-dark);
    line-height: var(--line-height-sm);
    margin: 0;
}

/* Arrow icon */
.docs-landing-card-arrow {
    flex-shrink: 0;
    color: var(--color-brand);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

a.docs-landing-card:hover .docs-landing-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Description text */
.docs-landing-card-desc {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-darkish);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Subsection meta (article count) */
.docs-landing-card-meta {
    font-size: var(--font-size-sm);
    color: var(--color-grey);
    margin: 0;
}

@media (max-width: 600px) {
    .docs-landing-title {
        font-size: var(--font-size-2xl);
    }
}