/* CSS Variables */
:root {
    --primary-color: #2c3e50;
    --accent-color: #3498db;
    --peace-green: #27ae60;
    --bg-body: #f4f7f6;
    --bg-content: #ffffff;
    --text-color: #333333;
    --border-color: #dddddd;
    --sidebar-bg: #fdfdfd;
}

/* Prevent anchor links from hiding under the sticky header */
html {
    scroll-padding-top: 130px;
    scroll-behavior: smooth;
}

body { font-family: 'Calibri', Arial, sans-serif; background-color: var(--bg-body); color: var(--text-color); margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; overflow-x: hidden; }

/* Top Header (Documents) */
.top-header { background-color: var(--primary-color); color: white; width: 100%; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.header-titles h1 { margin: 0; font-size: 1.8rem; }
.header-actions { display: flex; gap: 15px; align-items: center; }
.btn { display: inline-block; text-decoration: none; padding: 0.6rem 1.2rem; border-radius: 4px; font-weight: bold; color: white; transition: background-color 0.3s ease; border: none; cursor: pointer; font-family: 'Calibri', Arial, sans-serif; font-size: 1rem; text-align: center; }
.btn-home { background-color: #2980b9; border: 1px solid var(--border-color); }
.btn-home:hover { background-color: #4da3db; border-color: var(--accent-color); }

/* Print Button Styles */
.btn-print { background-color: #7f8c8d; margin-inline-end: 10px; border: 1px solid var(--border-color); }
.btn-print:hover { background-color: #95a5a6; border-color: var(--accent-color); }

.lang-select { padding: 5px 10px; border-radius: 4px; border: 1px solid #ccc; font-family: 'Calibri', Arial, sans-serif; font-size: 1rem; cursor: pointer; background: white; }

/* Hero Header (Main Page) */
.hero-section { background-color: var(--primary-color); color: white; width: 100%; padding: 4rem 1rem; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); box-sizing: border-box; }
.hero-section h1 { margin: 0 0 15px 0; font-size: 2.8rem; letter-spacing: 1px; }
.hero-section p { font-size: 1.3rem; color: #ecf0f1; max-width: 800px; margin: 0 auto; line-height: 1.6; }

/* Section Containers */
.content-section { width: 95%; max-width: 1000px; margin: 3rem auto; background: var(--bg-content); padding: 3rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); box-sizing: border-box; }

/* Section Titles (Main Page) */
.section-title { text-align: center; margin: 0 0 2rem 0; color: var(--primary-color); font-size: 2rem; position: relative; }
.section-title::after { content: ''; display: block; width: 60px; height: 4px; background-color: var(--accent-color); margin: 10px auto 0 auto; border-radius: 2px; }

/* Main Container (Documents) */
.main-container { display: flex; max-width: 1300px; width: 95%; margin: 2rem auto; gap: 2rem; align-items: flex-start; }

/* Sidebar (TOC) */
.sidebar { background-color: var(--sidebar-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; width: 300px; flex-shrink: 0; position: sticky; top: 120px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow-y: auto; max-height: calc(100vh - 140px); box-sizing: border-box; }
.sidebar h3 { color: var(--primary-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; margin-top: 0; font-size: 1.4rem; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { margin-bottom: 10px; }
.sidebar a { text-decoration: none; color: var(--text-color); font-size: 1.05rem; display: block; padding: 8px 5px; border-radius: 4px; transition: background 0.2s, color 0.2s; font-weight: bold; }
.sidebar a:hover { background-color: #eef5f9; color: var(--accent-color); }

/* Document Content */
.doc-content { background: var(--bg-content); padding: 3rem 4rem; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); flex-grow: 1; min-width: 0; box-sizing: border-box; width: 100%; }

/* Executive Summary Box (Adaptive for RTL/LTR) */
.exec-summary-box { background-color: #eef7ff; border-inline-start: 5px solid var(--accent-color); padding: 2rem; margin-bottom: 3rem; border-radius: 4px; }
.exec-title { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); margin-bottom: 15px; margin-top: 0; }
.exec-summary-box ul { padding-inline-start: 1.5rem; margin-bottom: 0; }
.exec-summary-box li { margin-bottom: 0.6rem; line-height: 1.5; }

/* Invisible Tables Engine - Adaptive for RTL/LTR */
table { width: 100%; border-collapse: collapse; border: none; margin: 0; padding: 0; page-break-inside: avoid; table-layout: auto; }
td { vertical-align: top; padding: 0; margin: 0; line-height: 1.6; }

.lvl1-space { width: 40px; min-width: 40px; }
.lvl2-space { width: 95px; min-width: 95px; } 
.lvl3-space { width: 170px; min-width: 170px; } 

.num-1 { width: 40px; min-width: 40px; font-weight: bold; font-size: 15pt; color: var(--primary-color); padding-top: 18px; padding-bottom: 8px; text-align: start; }
.text-1 { font-weight: bold; font-size: 15pt; color: var(--primary-color); padding-top: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); text-align: start; }

.num-2 { width: 55px; min-width: 55px; font-weight: bold; font-size: 13pt; color: var(--primary-color); padding-top: 14px; padding-bottom: 4px; text-align: start; }
.text-2 { font-weight: bold; font-size: 13pt; color: var(--primary-color); padding-top: 14px; padding-bottom: 4px; text-align: start; }

.num-3 { width: 75px; min-width: 75px; font-weight: bold; font-size: 12pt; color: var(--text-color); padding-top: 10px; padding-bottom: 2px; text-align: start; }
.text-3 { font-weight: bold; font-size: 12pt; color: var(--text-color); padding-top: 10px; padding-bottom: 2px; text-align: start; }

.para-text { font-size: 12pt; color: var(--text-color); padding-bottom: 8px; text-align: justify; word-wrap: break-word; }

/* Executive Summary & Chapter 9 Typography (Main Page) */
.doc-text { font-size: 1.15rem; line-height: 1.6; color: var(--text-color); margin-bottom: 1.5rem; text-align: justify; }
.doc-list { padding-inline-start: 1.5rem; margin-bottom: 1.5rem; }
.doc-list li { margin-bottom: 0.8rem; line-height: 1.5; font-size: 1.1rem; }
.doc-highlight { font-weight: bold; color: var(--peace-green); margin-top: 2rem; text-align: center; font-size: 1.2rem; }
.conclusion-title { text-align: center; font-size: 1.6rem; color: var(--primary-color); margin-bottom: 1.5rem; font-weight: bold; }
.family-quote { text-align: center; color: var(--peace-green); font-size: 2rem; margin-top: 3rem; font-weight: bold; }

/* Language List Selector (Dynamic) */
.lang-list-container { display: flex; flex-direction: column; gap: 10px; margin-top: 2rem; }
.lang-item { display: flex; justify-content: space-between; align-items: center; background-color: var(--bg-body); padding: 1.2rem 2rem; border-radius: 6px; text-decoration: none; color: var(--primary-color); border: 1px solid var(--border-color); transition: all 0.2s ease; font-weight: bold; font-size: 1.2rem; }
.lang-item:hover { background-color: #eef7ff; border-color: var(--accent-color); transform: translateX(5px); }
[dir="rtl"] .lang-item:hover { transform: translateX(-5px); }
.lang-badge { background-color: var(--primary-color); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: normal; }

/* Action Section - Grey Palette */
.action-section { width: 100%; padding: 0 0 4rem 0; display: flex; flex-direction: column; align-items: center; }
.action-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; max-width: 1000px; width: 90%; margin-top: 2rem; }

.btn-large { 
    padding: 15px 30px; 
    font-size: 1.2rem; 
    font-weight: bold; 
    border-radius: 5px; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    border: 1px solid var(--border-color);
    color: white; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    text-align: center; 
    background-color: #7f8c8d; 
}
.btn-large:hover { 
    background-color: #95a5a6; 
    border-color: var(--accent-color);
    transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); 
}
.btn-large:disabled, .btn-large.signed { 
    background-color: #95a5a6; 
    color: rgba(255,255,255,0.7); 
    cursor: not-allowed; 
    transform: none; 
    box-shadow: none; 
}

.disclaimer-text { color: #7f8c8d; font-size: 0.95rem; font-weight: bold; margin-top: 10px; text-align: center; }

/* Social Share Branded Buttons */
.social-share { display: flex; justify-content: center; gap: 15px; margin-top: 3rem; flex-wrap: wrap; }
.social-btn { 
    padding: 12px 24px; 
    border-radius: 5px; 
    color: white; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 1rem; 
    transition: opacity 0.3s, transform 0.2s; 
    text-align: center; 
    min-width: 180px; 
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}
.social-btn:hover { opacity: 0.9; transform: translateY(-2px); border-color: var(--accent-color); }

.bg-wa { background-color: #25D366; } /* WhatsApp Green */
.bg-fb { background-color: #1877F2; } /* Facebook Blue */
.bg-x { background-color: #000000; }  /* X Black */
.bg-in { background-color: #0A66C2; } /* LinkedIn Blue */

/* Modals */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 1000; justify-content: center; align-items: center; }
.modal-content { background: white; padding: 2.5rem; border-radius: 8px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative; }
.close-btn { position: absolute; top: 15px; inset-inline-end: 20px; font-size: 1.5rem; cursor: pointer; color: #7f8c8d; }
.close-btn:hover { color: #e74c3c; }

.modal-content h2 { margin-top: 0; color: var(--primary-color); border-bottom: 2px solid var(--accent-color); padding-bottom: 10px; }
.modal-content p.instructions { font-size: 0.95rem; color: #555; margin-bottom: 1.5rem; line-height: 1.5; }

.form-group { margin-bottom: 1.5rem; text-align: start; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; color: var(--primary-color); }
.form-group select, .form-group input[type="text"], .form-group input[type="email"], .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-family: 'Calibri', Arial, sans-serif; font-size: 1rem; box-sizing: border-box; }
.form-group textarea { resize: vertical; min-height: 80px; }
.checkbox-group { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 1.5rem; text-align: start; font-size: 0.95rem; color: #333; }
.checkbox-group input[type="checkbox"] { margin-top: 4px; transform: scale(1.2); }

.submit-form-btn { background-color: var(--peace-green); color: white; border: none; padding: 12px 24px; font-size: 1.1rem; font-weight: bold; border-radius: 5px; cursor: pointer; width: 100%; transition: background-color 0.3s ease; }
.submit-form-btn:hover { background-color: #219653; }
.submit-form-btn.loading { background-color: #95a5a6; cursor: wait; pointer-events: none; }

/* Footer */
.doc-footer { text-align: center; font-size: 0.9rem; color: #666; padding: 2rem 1rem; background-color: var(--bg-content); width: 100%; border-top: 1px solid var(--border-color); box-sizing: border-box; }
.doc-footer p { margin: 5px 0; }

/* Hide the injected print title on normal screen view */
.print-only-title { display: none; }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    html { scroll-padding-top: 160px; }
    .top-header { flex-direction: column; text-align: center; gap: 15px; padding: 1rem; }
    .header-titles h1 { font-size: 1.5rem; }
    .header-actions { flex-direction: column; width: 100%; }
    .btn, .lang-select { width: 100%; box-sizing: border-box; }
    .btn-print { margin-inline-end: 0; margin-bottom: 10px; }
    
    .main-container { flex-direction: column; margin: 1rem auto; width: 100%; gap: 1rem; }
    
    .sidebar { width: 90%; margin: 0 auto; position: static; max-height: none; padding: 1rem; }
    .sidebar ul { display: flex; flex-wrap: wrap; gap: 5px; }
    .sidebar li { width: 100%; margin-bottom: 0; }
    .sidebar a { background-color: #f1f1f1; border: 1px solid #eee; }
    
    .doc-content { padding: 1.5rem 1rem; border-radius: 0; }
    .content-section { padding: 1.5rem; }
    
    .exec-summary-box { padding: 1.2rem; margin-bottom: 2rem; border-inline-start-width: 4px; }
    
    .lang-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .lang-badge { align-self: flex-start; }
    .action-grid { flex-direction: column; }
    .btn-large { width: 100%; }
    .social-btn { width: 100%; box-sizing: border-box; }
    .doc-text { text-align: start; }
    
    .lvl1-space { width: 25px; min-width: 25px; }
    .lvl2-space { width: 65px; min-width: 65px; } 
    .lvl3-space { width: 120px; min-width: 120px; } 
    
    .num-1 { width: 25px; min-width: 25px; font-size: 13pt; }
    .text-1 { font-size: 13pt; }
    .num-2 { width: 40px; min-width: 40px; font-size: 12pt; }
    .text-2 { font-size: 12pt; }
    .num-3 { width: 55px; min-width: 55px; font-size: 11pt; }
    .text-3 { font-size: 11pt; }
    
    .para-text { font-size: 11pt; }
}

/* --- Print Styles --- */
@media print {
    body, .doc-content { background-color: white !important; color: black !important; }
    
    /* Hide the entire top header, sidebar, buttons, and extra interactive elements */
    .top-header, .header-actions, .sidebar, .action-section, .social-share, .lang-list-container, .modal-overlay, .btn, .btn-home, .btn-print { display: none !important; }
    
    /* Display the injected print-only title */
    .print-only-title { 
        display: block !important; 
        text-align: center; 
        font-size: 26pt; 
        font-weight: bold;
        color: black !important; 
        margin-bottom: 2rem; 
        padding-bottom: 1rem;
        border-bottom: 2px solid black; 
    }

    /* Hero Section specifically for index.html print */
    .hero-section { background: white !important; color: black !important; position: static !important; box-shadow: none !important; padding: 1rem 0 !important; border-bottom: 2px solid black !important; margin-bottom: 2rem !important; display: block !important; }
    .hero-section h1 { color: black !important; font-size: 24pt !important; margin: 0 !important; text-align: center !important; }
    .hero-section p { color: black !important; }
    
    /* Expand content area to full page width */
    .main-container { width: 100% !important; margin: 0 !important; padding: 0 !important; display: block !important; }
    .doc-content, .content-section { box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; border: none !important; }
    
    /* Clean up the executive summary box */
    .exec-summary-box { background: transparent !important; border: 1px solid black !important; border-inline-start-width: 5px !important; page-break-inside: avoid; }
    .exec-summary-box p:last-of-type { display: none !important; } 
    
    /* Prevent cutting tables across pages */
    table, tr, td { page-break-inside: avoid !important; }
    
    /* Force chapters to start on a new page, including Chapter 1 */
    #ch1, #ch2, #ch3, #ch4, #ch5, #ch6, #ch7, #ch8, #ch9 { page-break-before: always; }
}