:root {
            --primary: #1a2e40; /* Trustworthy deep blue */
            --accent: #d4af37;  /* Warm biblical gold */
            --text: #333333;
            --bg-warm: #faf7f2; /* Soft linen/cream layout */
            --card-bg: #ffffff;
        }
        body { 
            font-family: 'Georgia', serif; 
            line-height: 1.6; 
            color: var(--text); 
            background-color: var(--bg-warm); 
            margin: 0; 
            padding: 0; 
        }
       
        /* Scripture Banner */
        .scripture-banner { 
            background: var(--primary); 
            color: white; 
            text-align: center; 
            padding: 15px; 
            font-style: italic; 
            border-bottom: 4px solid var(--accent); 
        }
    /* STICKY HEADER WITH INTEGRATED NAVIGATION */
header {
    background-color: var(--bg-warm); /* Changed from #ffffff to match the page background */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    padding: 12px 20px;
}
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .brand-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            flex-shrink: 0;
        }

        .logo-img {
            display: block;
            height: 45px; /* Perfect size for a crisp header icon */
            width: auto;
            border-radius: 4px;
        }

        .brand-text {
            font-family: "Georgia", serif;
            font-size: 1.6rem;
            color: var(--primary-blue);
            font-weight: normal;
            letter-spacing: -0.5px;
        }
             /* NAVIGATION LINKS (Integrated Into Header Right Side) */
        .mini-box-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            overflow-x: auto;
            white-space: nowrap;
            -ms-overflow-style: none;
            scrollbar-width: none;
            padding: 4px 0;
        }

        .mini-box-wrapper::-webkit-scrollbar {
            display: none;
        }
          /* Page Intro Header */
        .page-header { text-align: center; padding: 30px 20px 10px 20px; }
        .page-header h1 { color: rgb(44, 37, 35); font-size: 2.5rem; margin: 0 0 10px 0; }
        .page-header p { max-width: 600px; margin: 0 auto; font-size: 18px; color: #555; font-style: italic; }

        /* Container Layout Split */
/* Container Layout Split */
.notes-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 20px 5% 10px 5%; /* Changed bottom padding from 40px to 10px to trim the fat */
}
        @media (max-width: 800px) {
            .notes-container { grid-template-columns: 1fr; }
        }

        /* Warm Card Container Design */
        .info-card { 
            background: var(--card-bg); 
            padding: 30px; 
            border-radius: 6px; 
            box-shadow: 0 4px 15px rgba(44, 37, 35, 0.04); 
            border-top: 4px solid var(--accent); 
        }
        .info-card h2 { 
            color: var(--primary); 
            margin-top: 0; 
            font-size: 1.5rem; 
            border-bottom: 1px solid #f0eae1; 
            padding-bottom: 10px; 
        }

        /* Zoom Announcement Styling */
/* Zoom Announcement Styling */
.zoom-details {
    background: #f0f4f8;
    border-left: 4px solid var(--primary); /* Updated to use your deep blue theme variable */
    padding: 15px;
    border-radius: 4px;
    margin: 15px 0;
}
.zoom-details p { margin: 5px 0; font-size: 16px; }
/* Clean Zoom Action Button styling - Gold Base & Centered */
.zoom-btn {
    background-color: var(--accent);  
    color: var(--primary) !important; 
    padding: 12px 24px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;               
    display: block;                   /* Changed from inline-block to block */
    margin: 15px auto 0 auto;         /* Centering magic: 15px top space, auto left/right, 0 bottom */
    width: max-content;               /* Forces the button box to shrink perfectly around your text */
    font-family: 'Georgia', serif;    
    font-size: 1.05rem;
    transition: all 0.2s ease-in-out; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Hover state changes - Flips to Deep Blue */
.zoom-btn:hover { 
    background-color: var(--primary); /* Flips cleanly to your deep blue branding */
    color: white !important;          /* Text turns crisp white for high contrast */
    transform: translateY(-1px);      
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

        /* Clean Link Styling with Red Arrow support */
        .link-list { list-style: none; padding: 0; margin: 15px 0 0 0; }
        .link-list li { 
            position: relative;
            margin-bottom: 12px; 
            border-bottom: 1px dashed #f3eee6; 
            padding-bottom: 8px; 
        }
        .link-list li:last-child { border-bottom: none; }
        
        .link-list a { 
            color: #2c5282; 
            text-decoration: none; 
            font-size: 16px; 
            font-family: Arial, sans-serif;
            font-weight: 500;
            display: inline-block;
            position: relative;
            transition: all 0.2s ease-in-out;
        }
        
        /* Insert the red arrow GIF on hover */
        .link-list a:hover::before {
            content: url("images/arrow_red.gif"); 
            position: absolute;
            left: -20px;                         
            top: 50%;
            transform: translateY(-50%);          
        }
        
        .link-list a:hover { 
            color: var(--accent); 
            text-decoration: underline;
            transform: translateX(10px); 
        }

footer { 
    background: var(--primary); 
    color: white; 
    text-align: center; 
    padding: 15px 20px;   /* Trimmed top/bottom padding from 20px down to 15px */
    font-size: 14px; 
    margin-top: 10px;     /* Cut the top gap down from 40px to 10px */
}

        /* Container block for the section links */
.article-btn-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 15px;
}

/* Individual block layout matching your article aesthetic */
.doc-download-btn {
    display: flex;
    align-items: center;
    background-color: #fafbfc;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 12px 16px;
    font-family: 'Georgia', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary); /* Deep blue branding */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.01);
}

/* Subtle icon spacing */
.doc-download-btn .icon {
    margin-right: 10px;
    color: var(--accent); /* Elegant Biblical Gold */
    font-size: 1.1rem;
}

/* Interaction state changes when hovered */
.doc-download-btn:hover {
    background-color: #f0f4f8; /* Soft subtle blue hint background */
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(3px); /* Subtle shift to the right */
}
/* Stack container for the 6 core article categories */
/* Container block turned into a dynamic two-column grid layout */
.topic-stack-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates two equal-width columns side-by-side */
    gap: 12px;                            /* Clean spacing between the columns and rows */
    margin-top: 15px;
}

/* Fallback logic for smaller smartphone screens */
@media (max-width: 600px) {
    .topic-stack-container {
        grid-template-columns: 1fr;        /* Drops down to 1 wide column automatically on mobile */
    }

/* Individual button row layout styling */
.topic-stack-btn {
    display: flex;
    align-items: center;
    background-color: #fafbfc;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 12px 16px;
    font-family: "Georgia", serif;
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--primary); /* Uses your main deep blue color theme */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

/* Rounded index indicator bubble logic */
.topic-stack-btn .topic-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--primary); /* Deep blue bubble background */
    color: white;                     /* White text numbers */
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50%;               /* Perfectly round circles */
    margin-right: 14px;               /* Spacing between the number bubble and the text */
}

/* Row interaction changes when hovered or tapped */
.topic-stack-btn:hover {
    background-color: #f0f4f8;       /* Subtle blue-gray tint background */
    border-color: var(--primary);
    transform: translateX(4px);      /* Gives a smooth rightward shift effect */
}

/* Changes the number bubble to your gold theme accent color on hover */
.topic-stack-btn:hover .topic-num {
    background-color: var(--accent); /* Switches from blue to beautiful biblical gold */
}