/* ==========================================
   MT. ZION BAPTIST CHURCH - MAIN STYLESHEET
   MODULAR CSS ARCHITECTURE
   Last Updated: December 2024
   
   This file loads all CSS modules in the correct order.
   Edit individual files in their respective folders.
   ========================================== */

/* ==========================================
   BASE STYLES
   Core styles that everything else builds on
   ========================================== */
@import url('base/variables.css');
@import url('base/reset.css');
@import url('base/typography.css');

/* ==========================================
   LAYOUT
   Site-wide structural elements
   ========================================== */
@import url('layout/navigation.css');
@import url('layout/footer.css');

/* ==========================================
   COMPONENTS
   Reusable UI components
   ========================================== */
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');
@import url('components/sliders.css');

/* ==========================================
   PAGES
   Page-specific styles
   ========================================== */
@import url('pages/home.css');
@import url('pages/advent.css');
@import url('pages/education.css');
@import url('pages/primers.css');
@import url('pages/giving.css');
@import url('pages/evening-watch.css');

/* ==========================================
   UTILITIES
   Helper styles and overrides
   ========================================== */
@import url('utilities/responsive.css');
@import url('utilities/accessibility.css');

/* ==========================================
   EVENING WATCH SERVICE PAGE
   Create as: /assets/css/pages/evening-watch.css
   Add to style.css imports
   ========================================== */

/* Evening Watch Hero */
.evening-watch-hero {
    background: linear-gradient(135deg, 
        rgba(92, 0, 21, 0.95) 0%, 
        rgba(92, 0, 21, 0.85) 100%
    ),
    url('/assets/images/candles-prayer.jpg');
    background-size: cover;
    background-position: center;
    padding: 8rem 5%;
    padding-top: 14rem;
    text-align: center;
    color: white;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evening-watch-hero-content {
    max-width: 800px;
}

.event-date {
    display: inline-block;
    background: var(--accent);
    color: var(--primary);
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.evening-watch-hero h1 {
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}

.event-time {
    font-size: 2rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 1rem;
}

.event-tagline {
    font-size: 1.5rem;
    color: white;
    opacity: 0.95;
    font-style: italic;
}

/* About Evening Watch */
#about-evening-watch {
    padding: 5rem 5%;
    background: white;
}

.evening-watch-intro {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.evening-watch-intro p {
    font-size: 1.3rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 1.5rem;
}

/* Service Elements */
#service-elements {
    padding: 5rem 5%;
}

.elements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.element-card {
    text-align: center;
    padding: 2.5rem;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.element-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.2);
}

.element-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.element-card h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.element-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #666;
}

/* Burn and Blossom Section */
#burn-and-blossom {
    padding: 5rem 5%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
}

.burn-blossom-container {
    max-width: 1200px;
    margin: 3rem auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 3rem;
    align-items: center;
}

.burn-section,
.blossom-section {
    background: rgba(255,255,255,0.1);
    padding: 3rem;
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
}

.ceremony-icon {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 1rem;
}

.burn-section h3,
.blossom-section h3 {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1rem;
    text-align: center;
}

.burn-section p,
.blossom-section p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: white;
}

.burn-section ul,
.blossom-section ul {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.burn-section li,
.blossom-section li {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 0.8rem;
    color: white;
}

.ceremony-action {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(212, 175, 55, 0.3);
    font-style: italic;
    color: var(--accent);
}

.divider {
    text-align: center;
    font-size: 3rem;
    color: var(--accent);
    font-weight: 700;
}

.ceremony-note {
    max-width: 800px;
    margin: 3rem auto 0;
    padding: 2rem;
    background: rgba(212, 175, 55, 0.2);
    border-radius: var(--radius-md);
    text-align: center;
    border: 2px solid var(--accent);
}

.ceremony-note p {
    font-size: 1.1rem;
    margin: 0;
}

/* Why Attend */
#why-attend {
    padding: 5rem 5%;
    background: white;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.why-card {
    padding: 2rem;
    background: linear-gradient(135deg, rgba(92, 0, 21, 0.05) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent);
}

.why-card h4 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.why-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #666;
}

/* Scripture */
#evening-watch-scripture {
    padding: 4rem 5%;
}

/* Event Details */
#event-details {
    padding: 5rem 5%;
    background: white;
}

.details-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.detail-box {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(to bottom, #f8f9fa 0%, white 100%);
    border-radius: var(--radius-md);
    border: 1px solid #e0e0e0;
}

.detail-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.detail-box h3 {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.detail-box p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
}

.join-zoom {
    text-align: center;
    max-width: 600px;
    margin: 3rem auto;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(92, 0, 21, 0.05) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-radius: var(--radius-lg);
}

.join-zoom h3 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.join-zoom p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 2rem;
}

.btn-zoom {
    background: #2D8CFF;
    color: white;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-zoom:hover {
    background: #1a73e8;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(45, 140, 255, 0.3);
}

/* CTA Section */
#evening-watch-cta {
    padding: 5rem 5%;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cta-content h2 {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 2rem;
}

.cta-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333;
}

.preparation-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.preparation-list li {
    font-size: 1.2rem;
    line-height: 1.8;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    background: white;
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent);
    color: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .evening-watch-hero {
        padding-top: 10rem;
    }
    
    .evening-watch-hero h1 {
        font-size: 3rem;
    }
    
    .event-time {
        font-size: 1.5rem;
    }
    
    .event-tagline {
        font-size: 1.2rem;
    }
    
    .burn-blossom-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .divider {
        transform: rotate(90deg);
    }
    
    .elements-grid,
    .why-grid,
    .details-container {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Two-Column Content Layout for Primer Pages
   ============================================ */

.two-column-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
}

.two-column-content .column {
    line-height: 1.8;
}

.two-column-content .column p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

.two-column-content .column p:last-child {
    margin-bottom: 0;
}

/* Mobile Responsive */
@media (max-width: 968px) {
    .two-column-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ==========================================
   LOAD ORDER NOTES:
   1. Base files load first (variables, reset, typography)
   2. Layout files define structure (nav, footer)
   3. Components are reusable pieces (buttons, cards)
   4. Pages use components and add specific styles
   5. Utilities load last to override when needed
   ========================================== */
   
   /* ==========================================
   READING THE BIBLE PRIMER - CUSTOM STYLES
   Add this to the end of your style.css file
   ========================================== */

/* Reader Types Grid */
.reader-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.reader-type-card {
    background: white;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    border-top: 5px solid var(--accent);
}

.reader-type-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.reader-icon {
    font-size: 4rem;
    text-align: center;
    padding: 2rem 2rem 1rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(128, 0, 32, 0.05) 100%);
}

.reader-type-card h3 {
    font-size: 1.8rem;
    color: var(--primary);
    text-align: center;
    padding: 0 2rem;
    margin-bottom: 0.5rem;
}

.reader-tagline {
    text-align: center;
    color: var(--accent);
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0 2rem 1.5rem;
    margin: 0;
}

.reader-description {
    padding: 0 2rem 2rem;
}

.reader-description h4 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent);
}

.reader-description ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.reader-description li {
    margin-bottom: 0.6rem;
    line-height: 1.6;
}

.reader-note {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    border-left: 5px solid var(--accent);
    margin-top: 2rem;
}

.reader-note p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Accordion Styles */
.accordion-item {
    margin-bottom: 1.5rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.accordion-header {
    width: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    border: none;
    padding: 1.5rem 2rem;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.accordion-header:hover {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
}

.accordion-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.accordion-title {
    flex: 1;
}

.accordion-toggle {
    font-size: 2rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.accordion-header[aria-expanded="true"] .accordion-toggle {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: white;
}

.accordion-content > * {
    padding: 0 2rem;
}

.accordion-content h4 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.accordion-content h5 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

.accordion-content p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.accordion-content ul,
.accordion-content ol {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.accordion-content li {
    margin-bottom: 0.7rem;
    line-height: 1.7;
}

.accordion-content > *:last-child {
    padding-bottom: 2rem;
}

/* Study Method Boxes */
.study-method-box {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(128, 0, 32, 0.05) 100%);
    padding: 2rem;
    border-radius: 15px;
    border-left: 5px solid var(--accent);
    margin-bottom: 3rem;
}

.study-method-box h4 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.method-steps {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.method-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1.5rem;
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.step-number {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
    color: white;
    font-size: 2rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-content h5 {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 0.8rem;
}

.step-content ul {
    margin-left: 1.5rem;
}

.step-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Devotional Foundation */
.devotional-foundation {
    margin-bottom: 3rem;
}

.devotional-foundation h4 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.devotional-foundation > p {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #555;
}

.principle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.principle-card {
    background: white;
    padding: 1.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-top: 4px solid var(--accent);
    transition: all 0.3s ease;
}

.principle-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.principle-card h5 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 0.8rem;
}

.principle-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Section Intro */
.section-intro {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #555;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: linear-gradient(to right, rgba(212, 175, 55, 0.08) 0%, transparent 100%);
    border-left: 4px solid var(--accent);
    border-radius: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .reader-types-grid {
        grid-template-columns: 1fr;
    }
    
    .accordion-header {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
    }
    
    .accordion-icon {
        font-size: 1.5rem;
    }
    
    .accordion-content > * {
        padding: 0 1.5rem;
    }
    
    .method-step {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .step-number {
        margin: 0 auto;
    }
    
    .principle-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   INTERPRETING THE BIBLE PRIMER - STYLES
   ========================================== */

/* Term Definitions */
.term-definition {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(128, 0, 32, 0.05) 100%);
    padding: 2rem;
    border-radius: 15px;
    border-left: 5px solid #D4AF37;
    margin-bottom: 2rem;
}

.term-definition h4 {
    color: #800020;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.definition-text {
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Term Comparison Boxes */
.term-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.term-box {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.term-box.exegesis {
    border-top: 5px solid #2ecc71;
}

.term-box.eisegesis {
    border-top: 5px solid #e74c3c;
}

.term-box h5 {
    font-size: 1.4rem;
    color: #800020;
    margin-bottom: 1rem;
}

.example-text {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-left: 4px solid #D4AF37;
    font-size: 0.95rem;
}

/* Key Principle Box */
.key-principle {
    background: linear-gradient(135deg, #800020 0%, #a0002a 100%);
    color: white;
    padding: 2rem;
    border-radius: 15px;
    margin-top: 2rem;
}

.key-principle h4 {
    color: white;
    margin-bottom: 1rem;
}

/* Gap Grid */
.gap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.gap-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-top: 4px solid #D4AF37;
}

.gap-icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
}

.gap-card h4 {
    color: #800020;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.gap-example {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-left: 3px solid #D4AF37;
    font-size: 0.95rem;
}

/* Process Steps */
.process-steps {
    margin-top: 2rem;
}

.process-step {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.step-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #D4AF37 0%, #800020 100%);
    color: white;
    font-size: 2.5rem;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-content h4 {
    color: #800020;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.step-content h5 {
    color: #800020;
    font-size: 1.2rem;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
}

/* Genre Quick Reference */
.genre-quick-ref {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.genre-item {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    text-align: center;
    border-top: 3px solid #D4AF37;
}

.genre-item h5 {
    font-size: 1.2rem;
    color: #800020;
    margin-bottom: 0.8rem;
}

/* Callout Boxes */
.warning-box, .example-box, .caution-box, .wisdom-box {
    padding: 1.5rem;
    border-radius: 10px;
    margin: 1.5rem 0;
}

.warning-box {
    background: #fff3cd;
    border-left: 5px solid #ffc107;
}

.example-box {
    background: #d1ecf1;
    border-left: 5px solid #17a2b8;
}

.caution-box {
    background: #f8d7da;
    border-left: 5px solid #dc3545;
}

.wisdom-box {
    background: #d4edda;
    border-left: 5px solid #28a745;
}

/* Parallelism Examples */
.parallelism-types {
    margin: 2rem 0;
}

.parallelism-example {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}

.parallelism-example h6 {
    color: #800020;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.scripture-text {
    font-style: italic;
    color: #555;
    padding: 1rem;
    background: #f8f9fa;
    border-left: 4px solid #D4AF37;
    margin: 1rem 0;
}

/* Comparison Boxes */
.comparison-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.comparison-side {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.comparison-side h6 {
    color: #800020;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.problem {
    color: #dc3545;
    font-weight: 600;
}

.insight {
    color: #28a745;
    font-weight: 600;
}

/* Example Walkthroughs */
.walkthrough-example {
    background: white;
    padding: 2.5rem;
    margin-bottom: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border-left: 8px solid #D4AF37;
}

.walkthrough-example h4 {
    color: #800020;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.scripture-summary {
    font-style: italic;
    color: #555;
    margin-bottom: 2rem;
}

.walkthrough-step {
    margin-bottom: 2.5rem;
}

.walkthrough-step h5 {
    color: #800020;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #D4AF37;
}

/* Pitfalls Grid */
.pitfalls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.pitfall-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-top: 5px solid #e74c3c;
}

.pitfall-icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
}

.pitfall-card h4 {
    color: #800020;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.pitfall-description {
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.pitfall-example {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    margin: 1.5rem 0;
}

.pitfall-solution {
    background: #d4edda;
    padding: 1rem;
    border-left: 4px solid #28a745;
    border-radius: 5px;
    margin-top: 1.5rem;
}

/* Tool Sections */
.tool-section {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #eee;
}

.tool-section:last-child {
    border-bottom: none;
}

.translation-spectrum {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.translation-type {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-left: 5px solid #D4AF37;
}

.translation-type h6 {
    color: #800020;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* Symbol Examples */
.symbol-examples {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 15px;
    margin: 2rem 0;
}

.symbol-examples h6 {
    color: #800020;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* Note Text */
.note-text {
    font-style: italic;
    color: #666;
    margin-top: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .term-comparison,
    .gap-grid,
    .comparison-box,
    .pitfalls-grid {
        grid-template-columns: 1fr;
    }
    
    .process-step {
        grid-template-columns: 1fr;
    }
    
    .step-number {
        margin: 0 auto 1rem;
    }
    
    .genre-quick-ref {
        grid-template-columns: 1fr;
    }
}

/* END OF READING THE BIBLE PRIMER STYLES */