/* GLOBAL RESET & FONT SETUP */
* {
    box-sizing: border-box; /* Makes padding/borders not expand total width/height */
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif; /* Use an accessible font */
    line-height: 1.6;
    background-color: #f0f4f8; /* Light gray/blue background */
    color: #333;
    text-align: center; /* Center content block by default */
}

/* CONTAINER & LAYOUT */
/* The main container limits content width for readability on large screens */
.site-header, .main-content-area, .social-nav, .site-footer {
    max-width: 800px;
    margin: 0 auto; /* Centers the content block */
    padding: 20px;
}

/* HEADER STYLES */
.site-header {
    padding-top: 40px;
    padding-bottom: 20px;
}
.site-logo {
    max-width: 250px; /* Adjust size of the logo */
    height: auto;
    margin-bottom: 10px;
}
.tagline {
    font-style: italic;
	font-weight:bold;
    color: black;
    margin-bottom: 20px;
	text-shadow: -1px -1px 0 white, 
                     1px -1px 0 white, 
                     -1px 1px 0 white, 
                     1px 1px 0 white; /* Outline color and thickness */
}

/* MAIN CONTENT (UPDATE POST) STYLES */
.update-post {
    background-color: #1A1A1A; /* White background for the post itself */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 30px;
    text-align: left; /* Align post text left for readability */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.update-post h2 {
    color: #007bff; /* Primary brand color (blue) for headlines */
    margin-bottom: 15px;
}

.post-meta {
    font-size: 0.9em;
    color: #999;
    margin-bottom: 20px;
}

/* CALL TO ACTION BUTTON */
.cta-button {
    display: inline-block;
    background-color: #007bff; /* Primary brand color */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    font-weight: bold;
    transition: background-color 0.3s;
}
.cta-button:hover {
    background-color: #0056b3;
}

/* SOCIAL NAVIGATION STYLES */
.social-nav {
    margin: 30px auto;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.social-link {
    margin: 0 15px;
    color: #E60000;
    text-decoration: none;
    font-weight: bold;
}
.social-link:hover {
    color: #007bff;
}

/* FOOTER STYLES */
.site-footer {
    border-top: 1px solid #eee;
    padding: 20px;
    margin-top: 40px;
}
.copyright {
    font-size: 0.8em;
    color: #666;
}

/* RESPONSIVENESS (Mobile Adjustment) */
@media (max-width: 600px) {
    .site-logo {
        max-width: 180px; /* Make the logo smaller on phones */
    }
    .update-post {
        padding: 20px;
    }
    .social-nav {
        display: flex; /* Makes social links wrap better on small screens */
        flex-wrap: wrap;
        justify-content: center;
    }
    .social-link {
        margin: 5px 10px;
    }
}
:root {
  /* Default/Dark Mode Colors */
  --color-background: #000000;
  --color-text: #E0E0E0;
  --color-primary-blue: #007AFF;
  --color-secondary-red: #E60000;
  --color-card-bg: #1A1A1A; /* Slightly lighter black for containers */
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
}

a {
  color: var(--color-primary-blue);
}

a:hover {
  color: var(--color-secondary-red);
}

.card {
  background-color: var(--color-card-bg);
}
/* BANNER STYLES */
.site-banner {
    /* Fix: Anchor the absolute element to the top-left corner of the viewport */
    top: 0;
    left: 0; 
    
    /* Ensures the banner spans the full width of the screen */
    width: 100vw; 
    height: 400px; /* Matches the 400px design height */
    overflow: hidden;
    
    /* Position: absolute allows other content to float on top */
    position: absolute; 
    z-index: -1; /* Pushes the image behind the text/logo */
}

/* You must also adjust the containing header */

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is essential: scales the image to cover the div without distortion */
    object-position: center; /* Ensures the middle of the image is always visible */
}

/* Re-adjust the header to account for the banner's height */
.site-header {
    /* Set the position property to relative so that the logo-area (if absolutely positioned) 
       is contained within the header. */
    position: relative; 
    
    /* If you set the logo to float *over* the banner, 
       you likely removed the large padding-top. 
       Ensure the header is wide enough to contain the logo/text. */
    width: 100%; 
    max-width: 800px;
    margin: 0 auto; 
    /* You may need to adjust padding-top/bottom here to get the logo/text exactly 
       where you want it vertically over the banner. */
}

/* Adjust the logo area to sit correctly within the banner area */
.logo-area {
    /* If you want the logo to appear inside the banner area, 
       you'll need to remove the top padding from .site-header and 
       position the logo-area using 'position: absolute;' within the header. 
       
       For simplicity, we'll keep the logo *below* the banner area by default, 
       as per the original code structure. */
}

/* Optional: If you want the logo to sit *over* the banner image, 
   you must remove the 'padding-top: 400px;' from .site-header 
   and adjust the header height and positioning. */