/*
|--------------------------------------------------------------------------
| Bilin Framework
| Document Guide
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Page
|--------------------------------------------------------------------------
*/

.document-guide-page {
        padding: 60px 20px 90px;
}

.document-guide {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.document-guide-header {
        width: 100%;
        max-width: 900px;
        margin: 0 auto 45px;
        text-align: center;
}

.document-guide-categories {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
}

.document-guide-category {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 14px;
        border-radius: 999px;
        background: #f3f6f5;
        color: #26756f;
        text-decoration: none;
        font-size: 14px;
        line-height: 1.5;
        transition:
                background-color 0.2s ease,
                color 0.2s ease,
                transform 0.2s ease;
}

.document-guide-category:hover {
        background: #e8f1ef;
        color: #1f625d;
        transform: translateY(-1px);
}

.document-guide-title {
        margin: 0;
        font-size: clamp(30px, 4vw, 48px);
        line-height: 1.35;
        font-weight: 700;
        overflow-wrap: anywhere;
}

.document-guide-short-intro {
        margin-top: 20px;
        font-size: 18px;
        line-height: 2;
        color: #555;
}

.document-guide-short-intro p {
        margin: 0 0 12px;
}

.document-guide-short-intro p:last-child {
        margin-bottom: 0;
}

.document-guide-excerpt {
        margin-top: 15px;
        color: #777;
        line-height: 1.9;
}

.document-guide-excerpt p {
        margin: 0 0 10px;
}

.document-guide-excerpt p:last-child {
        margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Main Layout
|--------------------------------------------------------------------------
*/

.document-guide-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 50px;
        align-items: start;
}

.document-guide-content {
        min-width: 0;
        width: 100%;
}

.document-guide-sidebar {
        min-width: 0;
        width: 100%;
}


/*
|--------------------------------------------------------------------------
| Main Content
|--------------------------------------------------------------------------
*/

.document-guide-text {
        width: 100%;
        font-size: 17px;
        line-height: 2.1;
        color: #333;
}

.document-guide-text h2,
.document-guide-text h3,
.document-guide-text h4 {
        margin-top: 40px;
        margin-bottom: 18px;
        line-height: 1.6;
}

.document-guide-text h2 {
        font-size: 28px;
}

.document-guide-text h3 {
        font-size: 24px;
}

.document-guide-text h4 {
        font-size: 21px;
}

.document-guide-text p {
        margin-top: 0;
        margin-bottom: 22px;
}

.document-guide-text ul,
.document-guide-text ol {
        margin-top: 0;
        margin-bottom: 25px;
        padding-right: 25px;
}

.document-guide-text li {
        margin-bottom: 8px;
}

.document-guide-text img {
        max-width: 100%;
        height: auto;
}

.document-guide-text a {
        color: #26756f;
        text-decoration: underline;
        text-underline-offset: 3px;
}

.document-guide-text a:hover {
        color: #e85d3f;
}


/*
|--------------------------------------------------------------------------
| Document Sample
|--------------------------------------------------------------------------
*/

.document-guide-sample {
        width: 100%;
        margin: 0 0 45px;
        padding: 20px;
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 16px;
        text-align: center;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
        box-sizing: border-box;
}

.document-guide-featured-image {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        border-radius: 10px;
}

.document-guide-sample-caption {
        margin-top: 15px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.7;
        color: #555;
}


/*
|--------------------------------------------------------------------------
| Rich Media - Common
|--------------------------------------------------------------------------
*/

.document-guide-video,
.document-guide-audio,
.document-guide-podcast {
        width: 100%;
        margin-top: 45px;
}

.document-guide-video-title,
.document-guide-audio-title,
.document-guide-podcast-title {
        margin: 0 0 18px;
        font-size: 22px;
        line-height: 1.6;
        font-weight: 700;
        color: #222;
}


/*
|--------------------------------------------------------------------------
| Video
|--------------------------------------------------------------------------
*/

.document-guide-video-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        background: #000;
        border-radius: 16px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.document-guide-video-wrapper iframe {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
}


/*
|--------------------------------------------------------------------------
| Audio
|--------------------------------------------------------------------------
*/

.document-guide-audio-player {
        width: 100%;
        padding: 18px;
        background: #f8faf9;
        border: 1px solid #e4ebe9;
        border-radius: 14px;
        box-sizing: border-box;
}

.document-guide-audio-player audio {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 48px;
}


/*
|--------------------------------------------------------------------------
| Podcast
|--------------------------------------------------------------------------
*/

.document-guide-podcast-wrapper {
        position: relative;
        width: 100%;
        min-height: 180px;
        overflow: hidden;
        background: #f8faf9;
        border: 1px solid #e4ebe9;
        border-radius: 16px;
}

.document-guide-podcast-wrapper iframe {
        display: block;
        width: 100%;
        min-height: 180px;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
}


/*
|--------------------------------------------------------------------------
| SEO Content
|--------------------------------------------------------------------------
*/

.document-guide-seo-content {
        width: 100%;
        margin-top: 50px;
        padding-top: 35px;
        border-top: 1px solid #e6e6e6;
        font-size: 16px;
        line-height: 2;
        color: #555;
}

.document-guide-seo-content p {
        margin-top: 0;
        margin-bottom: 20px;
}

.document-guide-seo-content p:last-child {
        margin-bottom: 0;
}

.document-guide-seo-content h2,
.document-guide-seo-content h3,
.document-guide-seo-content h4 {
        margin-top: 32px;
        margin-bottom: 15px;
        color: #222;
        line-height: 1.6;
}

.document-guide-seo-content h2 {
        font-size: 25px;
}

.document-guide-seo-content h3 {
        font-size: 22px;
}

.document-guide-seo-content h4 {
        font-size: 19px;
}

.document-guide-seo-content ul,
.document-guide-seo-content ol {
        margin-top: 0;
        margin-bottom: 22px;
        padding-right: 25px;
}

.document-guide-seo-content li {
        margin-bottom: 7px;
}


/*
|--------------------------------------------------------------------------
| Sidebar
|--------------------------------------------------------------------------
*/

.document-guide-sidebar {
        position: sticky;
        top: 100px;
}


/*
|--------------------------------------------------------------------------
| Translation Information Box
|--------------------------------------------------------------------------
*/

.document-guide-info-box {
        width: 100%;
        padding: 25px;
        margin-bottom: 22px;
        background: #f8faf9;
        border: 1px solid #e4ebe9;
        border-radius: 16px;
        box-sizing: border-box;
}

.document-guide-info-box h2 {
        margin: 0 0 22px;
        font-size: 21px;
        line-height: 1.5;
        font-weight: 700;
        color: #222;
}

.document-guide-info-item {
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding: 15px 0;
        border-bottom: 1px solid #e5e9e8;
}

.document-guide-info-item:last-of-type {
        border-bottom: 0;
}

.document-guide-info-item strong {
        font-size: 14px;
        line-height: 1.7;
        font-weight: 700;
        color: #555;
}

.document-guide-info-item span {
        font-size: 15px;
        line-height: 1.8;
        color: #333;
}

.document-guide-info-status {
        margin-top: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        background: #eef7f4;
        color: #28756e;
        font-size: 14px;
        line-height: 1.8;
}


/*
|--------------------------------------------------------------------------
| Translation Request Box
|--------------------------------------------------------------------------
*/

.document-guide-request-box {
        width: 100%;
        padding: 28px;
        margin: 0;
        background: #fff5ef;
        border: 1px solid #f3ddd0;
        border-radius: 16px;
        box-sizing: border-box;
}

.document-guide-request-box h2 {
        margin: 0 0 15px;
        font-size: 21px;
        line-height: 1.5;
        font-weight: 700;
        color: #222;
}

.document-guide-request-box p {
        margin: 0 0 22px;
        line-height: 1.9;
        color: #555;
}

.document-guide-request-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        padding: 10px 18px;
        border-radius: 10px;
        background: #e85d3f;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        line-height: 1.5;
        text-align: center;
        box-sizing: border-box;
        transition:
                transform 0.2s ease,
                opacity 0.2s ease,
                background-color 0.2s ease;
}

.document-guide-request-button:hover {
        opacity: 0.95;
        background: #d94f32;
        color: #fff;
        transform: translateY(-1px);
}


/*
|--------------------------------------------------------------------------
| Tables inside Document Content
|--------------------------------------------------------------------------
*/

.document-guide-text table,
.document-guide-seo-content table {
        width: 100%;
        max-width: 100%;
        margin: 30px 0;
        border-collapse: collapse;
        overflow: hidden;
        font-size: 15px;
}

.document-guide-text th,
.document-guide-text td,
.document-guide-seo-content th,
.document-guide-seo-content td {
        padding: 10px 12px;
        border: 1px solid #e3e7e6;
        text-align: right;
        vertical-align: top;
}

.document-guide-text th,
.document-guide-seo-content th {
        background: #f5f8f7;
        font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Blockquotes
|--------------------------------------------------------------------------
*/

.document-guide-text blockquote,
.document-guide-seo-content blockquote {
        margin: 30px 0;
        padding: 18px 22px;
        border-right: 4px solid #26756f;
        background: #f8faf9;
        color: #555;
        border-radius: 8px;
}


/*
|--------------------------------------------------------------------------
| General Media Safety
|--------------------------------------------------------------------------
*/

.document-guide-content img,
.document-guide-content iframe,
.document-guide-content video,
.document-guide-content audio {
        max-width: 100%;
}


/*
|--------------------------------------------------------------------------
| Responsive - Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

        .document-guide-layout {
                grid-template-columns: minmax(0, 1fr) 300px;
                gap: 35px;
        }

}


/*
|--------------------------------------------------------------------------
| Responsive - Mobile Layout
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

        .document-guide-page {
                padding: 45px 18px 70px;
        }

        .document-guide-layout {
                grid-template-columns: 1fr;
                gap: 35px;
        }

        .document-guide-sidebar {
                position: static;
                top: auto;
        }

        .document-guide-header {
                margin-bottom: 35px;
        }

}


/*
|--------------------------------------------------------------------------
| Responsive - Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

        .document-guide-page {
                padding: 35px 15px 55px;
        }

        .document-guide-header {
                margin-bottom: 30px;
        }

        .document-guide-categories {
                gap: 6px;
                margin-bottom: 15px;
        }

        .document-guide-category {
                padding: 6px 11px;
                font-size: 13px;
        }

        .document-guide-title {
                font-size: 30px;
                line-height: 1.4;
        }

        .document-guide-short-intro {
                margin-top: 16px;
                font-size: 16px;
                line-height: 2;
        }

        .document-guide-excerpt {
                font-size: 14px;
                line-height: 1.9;
        }

        .document-guide-layout {
                gap: 30px;
        }

        .document-guide-sample {
                padding: 12px;
                margin-bottom: 32px;
                border-radius: 12px;
        }

        .document-guide-featured-image {
                border-radius: 8px;
        }

        .document-guide-sample-caption {
                margin-top: 12px;
                font-size: 14px;
        }

        .document-guide-text {
                font-size: 16px;
                line-height: 2;
        }

        .document-guide-text h2 {
                font-size: 24px;
        }

        .document-guide-text h3 {
                font-size: 21px;
        }

        .document-guide-text h4 {
                font-size: 19px;
        }

        .document-guide-text ul,
        .document-guide-text ol {
                padding-right: 20px;
        }

        .document-guide-video,
        .document-guide-audio,
        .document-guide-podcast {
                margin-top: 32px;
        }

        .document-guide-video-title,
        .document-guide-audio-title,
        .document-guide-podcast-title {
                margin-bottom: 14px;
                font-size: 19px;
        }

        .document-guide-video-wrapper {
                border-radius: 12px;
        }

        .document-guide-audio-player {
                padding: 12px;
                border-radius: 12px;
        }

        .document-guide-audio-player audio {
                height: 44px;
        }

        .document-guide-podcast-wrapper {
                min-height: 150px;
                border-radius: 12px;
        }

        .document-guide-podcast-wrapper iframe {
                min-height: 150px;
        }

        .document-guide-seo-content {
                margin-top: 38px;
                padding-top: 28px;
                font-size: 15px;
        }

        .document-guide-info-box,
        .document-guide-request-box {
                padding: 20px;
                border-radius: 12px;
        }

        .document-guide-info-box h2,
        .document-guide-request-box h2 {
                font-size: 19px;
        }

        .document-guide-info-item {
                padding: 13px 0;
        }

        .document-guide-info-item strong {
                font-size: 13px;
        }

        .document-guide-info-item span {
                font-size: 14px;
        }

        .document-guide-info-status {
                font-size: 13px;
        }

        .document-guide-request-box p {
                font-size: 14px;
                line-height: 1.9;
        }

        .document-guide-request-button {
                min-height: 46px;
                font-size: 14px;
        }

        .document-guide-text table,
        .document-guide-seo-content table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
        }

}


/*
|--------------------------------------------------------------------------
| Very Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 400px) {

        .document-guide-page {
                padding-right: 12px;
                padding-left: 12px;
        }

        .document-guide-title {
                font-size: 27px;
        }

        .document-guide-short-intro {
                font-size: 15px;
        }

        .document-guide-info-box,
        .document-guide-request-box {
                padding: 17px;
        }

}