/* ===========================================================
   FOBISOFT GOVERNANCE PORTAL
   Corporate Documentation Theme
   Version : 1.0
   =========================================================== */

/* ===========================================================
   GLOBAL
   =========================================================== */

body {

    background: #f7f8fa;

    font-family: 'Open Sans', sans-serif;

    color: #2d3748;

}

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

.governance-header {

    background: white;

    border-bottom: 4px solid #f26c23;

    padding-top: 45px;

    padding-bottom: 35px;

    margin-bottom: 25px;

}

.governance-label {

    color: #f26c23;

    font-size: 0.90rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 10px;

}

.governance-title {

    font-family: 'Montserrat', sans-serif;

    font-size: 3rem;

    font-weight: 700;

    color: #1d2d44;

    margin-bottom: 15px;

}

.governance-subtitle {

    color: #6b7280;

    font-size: 1.15rem;

}

/* ===========================================================
   BREADCRUMB
   =========================================================== */

.breadcrumb {

    background: transparent;

    padding: 0;

    margin-bottom: 30px;

    font-size: 0.95rem;

}

/* ===========================================================
   DOCUMENT CARD
   =========================================================== */

.document-card {

    background: white;

    border-radius: 12px;

    padding: 35px;

    margin-bottom: 35px;

    border-left: 6px solid #f26c23;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

}

.document-card strong {

    display: block;

    color: #1d2d44;

    margin-bottom: 6px;

    font-family: 'Montserrat', sans-serif;

}

.document-card hr {

    margin-top: 25px;

    margin-bottom: 25px;

}

/* ===========================================================
   DOWNLOAD PANEL
   =========================================================== */

.download-panel {

    display: flex;

    gap: 15px;

    margin-bottom: 45px;

}

.download-panel .btn {

    border-radius: 8px;

    padding: 10px 24px;

    font-weight: 600;

}

/* ===========================================================
   POLICY CONTENT
   =========================================================== */

.policy-content {

    background: white;

    border-radius: 12px;

    padding: 45px;

    margin-bottom: 40px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);

}

.policy-content h2 {

    font-family: 'Montserrat', sans-serif;

    color: #1d2d44;

    margin-top: 40px;

    margin-bottom: 20px;

    font-size: 2rem;

}

.policy-content h3 {

    font-family: 'Montserrat', sans-serif;

    margin-top: 30px;

    color: #1d2d44;

}

.policy-content p {

    line-height: 1.9;

    margin-bottom: 18px;

}

.policy-content ul {

    line-height: 1.9;

}

.policy-content li {

    margin-bottom: 10px;

}

/* ===========================================================
   RELATED DOCUMENTS
   =========================================================== */

.related-documents {

    background: white;

    border-radius: 12px;

    padding: 35px;

    margin-bottom: 60px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);

}

.related-documents h3 {

    font-family: 'Montserrat', sans-serif;

    color: #1d2d44;

    margin-bottom: 25px;

}

.related-documents ul {

    list-style: none;

    padding-left: 0;

}

.related-documents li {

    padding: 12px 0;

    border-bottom: 1px solid #ececec;

}

.related-documents li:last-child {

    border-bottom: none;

}

/* ===========================================================
   FOOTER
   =========================================================== */

footer {

    background: #1d2d44;

    color: white;

    padding: 25px 0;

    margin-top: 50px;

}

footer hr {

    border-color: rgba(255, 255, 255, 0.15);

}

/* ===========================================================
   GOVERNANCE COMPONENT LIBRARY
   =========================================================== */


/* ===========================================================
   STATUS BADGES
   =========================================================== */

.gov-badge {

    display: inline-block;

    padding: 6px 14px;

    border-radius: 50px;

    font-size: .85rem;

    font-weight: 600;

}

.gov-approved {

    background: #d1fae5;

    color: #065f46;

}

.gov-review {

    background: #fef3c7;

    color: #92400e;

}

.gov-draft {

    background: #e0e7ff;

    color: #3730a3;

}

.gov-confidential {

    background: #fee2e2;

    color: #991b1b;

}


/* ===========================================================
   INFORMATION BOX
   =========================================================== */

.gov-info {

    background: #eff6ff;

    border-left: 5px solid #2563eb;

    padding: 20px;

    border-radius: 8px;

    margin: 25px 0;

}


/* ===========================================================
   SUCCESS BOX
   =========================================================== */

.gov-success {

    background: #ecfdf5;

    border-left: 5px solid #10b981;

    padding: 20px;

    border-radius: 8px;

    margin: 25px 0;

}


/* ===========================================================
   WARNING BOX
   =========================================================== */

.gov-warning {

    background: #fff7ed;

    border-left: 5px solid #f59e0b;

    padding: 20px;

    border-radius: 8px;

    margin: 25px 0;

}


/* ===========================================================
   DANGER BOX
   =========================================================== */

.gov-danger {

    background: #fef2f2;

    border-left: 5px solid #ef4444;

    padding: 20px;

    border-radius: 8px;

    margin: 25px 0;

}


/* ===========================================================
   EXECUTIVE NOTE
   =========================================================== */

.gov-note {

    background: white;

    border-left: 4px solid #f26c23;

    padding: 25px;

    margin: 35px 0;

    font-style: italic;

    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);

}


/* ===========================================================
   POLICY TABLES
   =========================================================== */

.gov-table {

    width: 100%;

    border-collapse: collapse;

    margin: 30px 0;

}

.gov-table th {

    background: #1d2d44;

    color: white;

    padding: 14px;

    text-align: left;

}

.gov-table td {

    padding: 14px;

    border-bottom: 1px solid #e5e7eb;

}

.gov-table tr:nth-child(even) {

    background: #f9fafb;

}


/* ===========================================================
   DEFINITION BOX
   =========================================================== */

.gov-definition {

    background: #fafafa;

    border-left: 4px solid #6b7280;

    padding: 20px;

    margin: 20px 0;

}


/* ===========================================================
   SECTION DIVIDER
   =========================================================== */

.gov-divider {

    margin: 60px 0;

    border-top: 1px solid #d6d6d6;

}


/* ===========================================================
   POLICY SECTIONS
   =========================================================== */

.policy-section {

    margin-top: 70px;

}

.policy-section:first-child {

    margin-top: 0;

}


/*======================================================
  GOVERNANCE SECTION COMPONENT
======================================================*/

.gov-section-header {

    display: grid;

    grid-template-columns: 60px 1fr;

    column-gap: 16px;

    align-items: center;

    margin-bottom: 20px;

}

.gov-section-number {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #f26c23;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    font-size: 1rem;

}

.gov-section-text {

    display: flex;

    flex-direction: column;

}

.gov-section-title {

    margin: 0;

    color: #1d2d44;

    font-size: 2rem;

    font-weight: 700;

}

.gov-section-kicker {

    margin-top: 4px;

    color: #f26c23;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .82rem;

    font-weight: 600;

}

.gov-section-divider {

    width: 90px;

    height: 4px;

    background: #f26c23;

    border-radius: 20px;

    margin-bottom: 35px;

}


/* ===========================================================
   POLICY COMMITMENT
   =========================================================== */

.policy-commitment {

    margin-top: 40px;

    border-left: 6px solid #28a745;

}

.commitment-title {

    font-size: 1.15rem;

    font-weight: 700;

    margin-bottom: 15px;

    color: #1d2d44;

}

.policy-section p {

    max-width: 900px;

    line-height: 1.95;

    font-size: 1.08rem;

    margin-bottom: 24px;

}

.gov-download-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: #f26c23;

    color: #fff;

    padding: 14px 28px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 600;

    font-family: 'Montserrat', sans-serif;

    transition: .25s;

    box-shadow: 0 8px 20px rgba(242, 108, 35, .18);

}

.gov-download-btn:hover {

    background: #d95d18;

    color: #fff;

    transform: translateY(-2px);

}

/* ===========================================================
   WHITE PAPER SECTIONS
   =========================================================== */

.whitepaper-section {

    background: #ffffff;

    border-radius: 18px;

    padding: 46px;

    margin-bottom: 38px;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .08);

}

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

.whitepaper-header {

    background: linear-gradient(135deg,
            #1d2d44 0%,
            #29476b 100%);

    padding: 80px 0 70px;

    border-bottom: 4px solid #f26c23;

}

/* ==========================================
   WHITEPAPER LABEL
========================================== */

.whitepaper-label {

    color: #f26c23;

    font-family: 'Montserrat', sans-serif;

    font-size: .95rem;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 10px;

}

/* ==========================================
   WHITEPAPER HERO TITLE
========================================== */

.whitepaper-title {

    margin: 0 0 10px;

    font-family: 'Montserrat', sans-serif;

    font-size: clamp(2.8rem, 5vw);

    font-weight: 700;

    line-height: 1.05;

    color: #ffffff;

}

.whitepaper-subtitle {

    margin: 0 0 18px;

    font-size: 1.35rem;

    color: rgba(255, 255, 255, .88);

    font-weight: 400;

}

/* ==========================================
   WHITEPAPER PRODUCT
========================================== */

.whitepaper-product {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 10px;

}

.whitepaper-product-logo {

    height: 60px;

    width: auto;

    flex-shrink: 0;

}

.whitepaper-title {

    margin: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: clamp(2rem, 3.4vw, 3rem);

    font-weight: 700;

    line-height: 1.1;

    color: #ffffff;

}

.whitepaper-subtitle {

    margin: 0 0 18px;

    font-size: 1.20rem;

    color: rgba(255,255,255,.88);

}


/* ==========================================
   WHITEPAPER BADGES
========================================== */
.whitepaper-badges {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 18px;

}

.gov-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 20px;

    border-radius: 999px;

    font-family: 'Montserrat', sans-serif;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .5px;

    text-transform: uppercase;

    text-decoration: none;

}

/* ------------------------------------------
   Technical Whitepaper
------------------------------------------ */

.gov-whitepaper {

    background: #1565c0;

    color: #ffffff;

    border: none;

}

/* ------------------------------------------
   Version Badge
------------------------------------------ */

.gov-version {

    background: #d9f7e5;

    color: #156c42;

    border: none;

}

/* ==========================================
   TECHNICAL CONTENTS
========================================== */

.toc-item {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px 22px;

    background: #f8f9fb;

    border: 1px solid #e8edf5;

    border-radius: 12px;

    color: #1d2d44;

    text-decoration: none;

    transition: .25s;

    height: 100%;

}

.toc-item:hover {

    background: #1d2d44;

    color: #ffffff;

    transform: translateY(-3px);

    text-decoration: none;

}

.toc-item span {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #f26c23;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    flex-shrink: 0;

}

/* ==========================================
   DOCUMENT CONTENT
========================================== */

.document-content {

    max-width: 1200px;

    margin: 0 auto;

    padding: 60px 20px 80px;

}

/* ==========================================
   FLOATING CONTENTS BUTTON
========================================== */

.floating-contents-btn {

    position: fixed;

    right: 28px;

    bottom: 28px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #f26c23;

    color: #ffffff;

    text-decoration: none;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    font-weight: 700;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);

    transition: .25s;

    z-index: 999;

    opacity: 0;

    visibility: hidden;

}

.floating-contents-btn:hover {

    background: #d95d18;

    color: #fff;

    transform: translateY(-3px);

}



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

@media (max-width: 992px) {

    .governance-title {

        font-size: 1.85rem;

    }

    .document-card {

        padding: 25px;

    }

    .policy-content {

        padding: 30px;

    }

}

@media (max-width: 1280px) {

    .download-panel {

        flex-direction: column;

    }

    .download-panel .btn {

        width: 100%;

    }

    .governance-title {

        font-size: 1.9rem;

    }

    .policy-content {

        padding: 22px;

    }

}

/* ===========================================================
   PRINT
   =========================================================== */

@media print {

    .navbar {

        display: none;

    }

    footer {

        display: none;

    }

    .download-panel {

        display: none;

    }

    body {

        background: white;

    }

    .policy-content {

        box-shadow: none;

    }

}