/* ============================================================
   1 & 2 SAMUEL BIBLE STUDY — CANONICAL STYLE SHEET
   Standardised class-based convention (established 1 Samuel 1–8)
   IMPLEMENTED 9 JULY 2026
   ============================================================ */

@page { size: A4; margin: 0.5in; }




body {
    font-family: Tahoma, Verdana, Helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.3;
    margin: 0;
    padding: 20px;
    color: black;
}

p {
    text-align: center;
    font-style: italic;
    margin-bottom: 15px;
    color: #666;
}

a:link, a:active { text-decoration:none; color:maroon; font-weight:bold; }
a:visited { text-decoration:none; color:#8b0000; font-weight:bold; }
a:hover { text-decoration:none; color:#b22222; font-weight:bold; }

h1 {
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 20px;
    color: maroon;
    border-bottom: 2px solid #8B4513;
    padding-bottom: 10px;
}

h3 { font-weight: bold; font-size: 1em; color: black; }



ul {margin-top: 10px; margin-right: 3.5%;
}

li {
  list-style-type: square; /* Changes shape to a square */
}

li::marker {
  color: #4c4c4c; /* Changes dot color to red */
}

#container {
margin:0 auto;
max-width:100%;
padding-left:1%;
padding-right:1%;
background-color:transparent;
}

/* ============================================================
   CORE CONTENT SECTIONS
   ============================================================ */

/* Context Section */
.context-section { background-color: #fff9e6; border: 2px solid #8B4513; border-radius: 8px; padding: 15px; margin-top: 20px; margin-bottom: 1%; }
.context-header { font-weight: bold; font-size: 1.2em; color: #8B4513; margin-bottom: 10px; text-align: center; }
.context-item { margin-bottom: 10px; }
.context-title { font-weight: bold; color: #8B4513; }

/* Bio Section (Key Figures) */
.bio-section { background-color: #fafad2; border: 2px solid #b8860b; border-radius: 8px; padding: 15px; margin-top: 20px; margin-bottom: 1%; }
.bio-header { font-weight: bold; font-size: 1.2em; color: #8B4513; margin-bottom: 10px; text-align: center; }
.bio-item { margin-bottom: 10px; }
.bio-title { font-weight: bold; color: #8B4513; }

/* Outline Section (wraps each Study Point) */
.outline-section { border: 2px solid maroon; border-radius: 8px; padding: 12px; background-color: #fafafa; margin-bottom: 1%; margin-top: 20px; }
.outline-header { font-weight: bold; font-size: 1.2em; color: maroon; margin-top: 10px; margin-bottom: 10px; border-bottom: 1px solid maroon; padding-bottom: 0.3%; }

/* Event (individual narrative beat within a Study Point) */
.event { margin-bottom: 8px; padding-left: 15px; position: relative; }
.event-title { font-weight: bold; color: #000; }
.event-description { margin-top: 2px; color: #333; }
.scripture-ref { margin-top: 0.1%; font-style: italic; color: black; font-size: 0.8em; }

/* Theme Section */
.theme-section { background-color: #f0f8ff; border: 2px solid #4682B4; border-radius: 8px; padding: 15px; margin-top: 20px; }
.theme-header { font-weight: bold; font-size: 1.2em; color: #4682B4; margin-bottom: 10px; text-align: center; }
.theme-list { display: flex; flex-direction: column; gap: 4%; margin-bottom: 1%; }
.theme-item { background-color: white; padding: 8px; border-radius: 4px; border-left: 4px solid #4682B4; margin-bottom: 2%; }
.theme-name { font-weight: bold; color: #4682B4; }

/* Key Verse Section */
.keyverse-section { background-color: #fafafa; border: 2px solid maroon; font-style: italic; font-size: 0.95em; border-radius: 8px; padding: 15px; margin-top: 20px; }
.keyverse-header { font-weight: bold; font-size: 1.2em; color: maroon; margin-bottom: 10px; text-align: center; }

/* Summary Section (used for Chapter Summary AND Closing Application) */
.summary-section { background-color: #fafafa; border: 2px solid maroon; font-style: italic; font-size: 0.95em; border-radius: 8px; padding: 15px; margin-top: 20px; }
.summary-header { font-weight: bold; font-size: 1.2em; color: maroon; margin-bottom: 8px; border-bottom: 1px solid maroon; padding-bottom: 0.3%; }

/* Copyright footer */
.copyright-section { border: 2px solid maroon; border-radius: 8px; padding: 12px; background-color: #fafafa; margin-top: 2%; margin-bottom: 3%; }

/* ============================================================
   INLINE COMMENTARY BOXES
   (nested inside .event blocks within a Study Point)
   ============================================================ */

/* Discussion questions box — closes every Study Point */
.discussion-box { background-color: #f0f8ff; padding: 12px; border-left: 4px solid #4682B4; margin: 15px 0; border-radius: 0 6px 6px 0; }
.discussion-title { font-weight: bold; color: #4682B4; margin-bottom: 8px; }
.discussion-q { color: #333; margin-bottom: 8px; font-style: normal; text-align: left; }

/* Translation note — NIV vs ESV/NASB/KJV differences */
.translation-note { background-color: #f5f5f5; border-left: 4px solid #999; padding: 8px 12px; margin: 10px 0; font-size: 0.88em; color: #3e3e3e; border-radius: 0 4px 4px 0; font-style: italic; }

/* Cross-reference box — links to other Scripture */
.crossref-box { background-color: #fff9e6; border-left: 4px solid #8B4513; padding: 8px 12px; margin: 10px 0; font-size: 0.88em; color: #555; border-radius: 0 4px 4px 0; }
.crossref-title { font-weight: bold; color: #8B4513; margin-bottom: 4px; }

/* Narrative observation box — literary/structural comments */
.narrative-box { background-color: #f8f4ff; border-left: 4px solid #6a5acd; padding: 8px 12px; margin: 10px 0; font-size: 0.88em; color: #444; border-radius: 0 4px 4px 0; }
.narrative-title { font-weight: bold; color: #6a5acd; margin-bottom: 4px; }


/* ============================================================
   MODAL BOXES
   (nested inside .event blocks within a Study Point)
   ============================================================ */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding:1%; /* Location of the box */
            left: 0;
            top: 0;
            width: 100vw; /* Full width */
            height: 100vh; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: #f4f4f4; /* Black w/ opacity */
						        }

        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 3%;
            border: 1px solid maroon;
			width: 80vw;
			}

        /* The Close Button */
        .close {
            color: black;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: gray;
            text-decoration: none;
            cursor: pointer;
        }	
		
		
	/* ============================================================
   SITUATIONAL COMPONENTS
   (used only when a chapter calls for them)
   ============================================================ */

/* Contrast panel — side-by-side comparison of two figures/paths */
.contrast-panel { display: flex; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.contrast-col { flex: 1 1 260px; border-radius: 6px; padding: 10px 12px; }
.contrast-col-dark { background-color: #fff0f0; border: 1px solid #c0392b; }
.contrast-col-light { background-color: #f0fff0; border: 1px solid #27ae60; }
.contrast-col-title { font-weight: bold; font-size: 0.9em; margin-bottom: 6px; }
.contrast-col-dark .contrast-col-title { color: #c0392b; }
.contrast-col-light .contrast-col-title { color: #27ae60; }
.contrast-col p { text-align: left; font-style: normal; color: #333; font-size: 0.9em; margin-bottom: 0; }

/* Chapter map / storyline block — Introduction only */
.chapter-map { background-color: #f8f4ff; border: 2px solid #6a5acd; border-radius: 8px; padding: 15px; margin-top: 20px; margin-bottom: 1%; }
.chapter-map-header { font-weight: bold; font-size: 1.2em; color: #6a5acd; margin-bottom: 10px; text-align: center; }
.chapter-map-block { background-color: white; padding: 8px; border-radius: 4px; border-left: 4px solid #6a5acd; margin-bottom: 8px; }
.chapter-map-title { font-weight: bold; color: #6a5acd; }
.chapter-map-ref { font-style: italic; font-size: 0.85em; color: #555; }

/* Reference table — Introduction only */
table.ref-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9em; }
table.ref-table th { background-color: #8B4513; color: white; padding: 6px 8px; text-align: left; }
table.ref-table td { padding: 5px 8px; border-bottom: 1px solid #ddd; vertical-align: top; }
table.ref-table tr:nth-child(even) td { background-color: #fff9e6; }

/* Person profile cards — Introduction only */
.person-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.person-card { flex: 1 1 280px; background-color: white; border: 1px solid #8B4513; border-radius: 6px; padding: 10px; }
.person-name { font-weight: bold; color: maroon; font-size: 1em; margin-bottom: 4px; }
.person-role { font-style: italic; color: #8B4513; font-size: 0.85em; margin-bottom: 6px; }
.person-desc { color: #333; font-size: 0.9em; }


/* LEADER Section (wraps each Study Point) */
.leader-section { border: 2px solid maroon; border-radius: 8px; padding: 12px; background-color: #fafafa; margin-bottom: 1%; margin-top: 20px; }
.leader-header { font-weight: bold; font-size: 1.2em; color: maroon; margin-top: 10px; margin-bottom: 10px; border-bottom: 1px solid maroon; padding-bottom: 0.3%; }






/* ============================================================
   POETRY FORMAT
   (Hannah's Song, David's laments, final poems of 2 Samuel)
   ============================================================ */

.poem-block {
    background-color: #fdf6ee;
    border: 2px solid #8B4513;
    border-radius: 8px;
    padding: 20px 24px;
    margin: 20px 0;
    font-family: Georgia, 'Times New Roman', serif;
}
.poem-block-header {
    font-weight: bold;
    font-size: 1.1em;
    color: #8B4513;
    text-align: center;
    margin-bottom: 16px;
    font-family: Tahoma, Verdana, Helvetica, sans-serif;
    border-bottom: 1px solid #c8a87a;
    padding-bottom: 8px;
}
.poem-stanza { margin-bottom: 18px; line-height: 1.7; }
.poem-stanza-label {
    font-size: 0.75em;
    font-weight: bold;
    color: #8B4513;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: Tahoma, Verdana, Helvetica, sans-serif;
    margin-bottom: 4px;
    display: block;
}
.poem-line { display: block; color: #1a1a1a; font-size: 0.97em; padding-left: 1em; text-indent: -1em; }
.poem-line-indent { display: block; color: #1a1a1a; font-size: 0.97em; padding-left: 2.5em; text-indent: -1em; }
.poem-verse-ref { font-size: 0.78em; color: #999; font-style: italic; font-family: Tahoma, Verdana, Helvetica, sans-serif; float: right; margin-top: 2px; }

/* Individual stanza study panel (replaces .outline-section for poetry chapters) */
.stanza-study { border: 2px solid maroon; border-radius: 8px; padding: 14px 16px; background-color: #fafafa; margin-bottom: 20px; margin-top: 8px; }
.stanza-study-header { font-weight: bold; font-size: 1.1em; color: maroon; margin-bottom: 10px; border-bottom: 1px solid maroon; padding-bottom: 6px; }

/* Inset poem quotation within a stanza study */
.stanza-quote {
    background-color: #fdf6ee;
    border-left: 4px solid #8B4513;
    padding: 10px 14px;
    margin: 10px 0 14px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95em;
    line-height: 1.75;
    color: #1a1a1a;
    border-radius: 0 4px 4px 0;
}
.stanza-quote-line { display: block; padding-left: 1em; text-indent: -1em; }
.stanza-quote-line-indent { display: block; padding-left: 2.5em; text-indent: -1em; }
.stanza-commentary { color: #333; margin-bottom: 10px; }

@media print {
body { font-size: 100%; };
}
@media (max-width: 100%) { .contrast-panel, .person-grid { flex-direction: column; } }