/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and Base Typography */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* Clean, modern sans-serif */
    line-height: 1.8; /* Increased line-height for readability, like smcb.at */
    background-color: #fff; /* White background */
    color: #000; /* Black text */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Container for centering content */
.container {
    max-width: 1000px; /* Max width similar to the template */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Add side padding for smaller screens */
    position: relative; /* Ensure z-index works for content within sections if needed */
    z-index: 2; /* Put container content above background if needed */
}

/* Header */
.site-header {
    background-color: #fff; /* White header background */
    color: #000; /* Black header text */
    padding: 15px 0; /* Vertical padding */
    position: sticky; /* Make header sticky */
    top: 0; /* Stick to the top */
    z-index: 100; /* Ensure it's above other content */
    border-bottom: 1px solid #eee; /* Subtle border like smcb.at */
}

.site-header .container {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space out title and nav */
    align-items: center; /* Vertically align items */
}

.site-title a {
    font-size: 1.5em; /* Logo font size */
    font-weight: bold;
    text-decoration: none; /* Remove underline */
    color: #000; /* Black link color */
}

/* Navigation */
.site-nav ul {
    list-style: none; /* Remove bullet points */
}

.site-nav li {
    display: inline-block; /* Display items inline */
    margin-left: 20px; /* Space between nav items */
}

.site-nav a {
    text-decoration: none; /* Remove underline */
    color: #000; /* Black link color */
    transition: color 0.3s ease; /* Smooth transition for hover */
}

.site-nav a:hover {
    color: #555; /* Slightly lighter black on hover */
}

/* Main Content Sections */
.section {
    padding: 80px 0; /* Generous vertical padding for white space */
    border-bottom: 1px solid #eee; /* Subtle separator line */
    position: relative; /* Needed for stacking context relative to hero background */
    z-index: 1; /* Ensure sections are above the fixed hero background */
    background-color: #fff; /* Explicitly set background color for sections */
}

.section:last-child {
    border-bottom: none; /* No border on the last section */
}

/* Hero Section - Parallax Effect */
.hero-section {
    padding: 100px 0; /* More padding for the hero section */
    text-align: center; /* Center text in hero */

    /* Parallax Styling */
    background-image: url('background.jpg'); /* --- REPLACE WITH YOUR IMAGE PATH --- */
    background-size: cover; /* Cover the entire section */
    background-position: center; /* Center the image */
    background-attachment: fixed; /* This creates the parallax effect */
    position: relative; /* Needed for stacking context */
    z-index: 0; /* Ensure hero background is behind other sections */
    color: #fff; /* Set text color to white for readability against a dark background */
    /* Add a background-color fallback in case the image doesn't load */
    background-color: #333; /* Dark grey fallback */
}

/* Optional: Add a semi-transparent overlay to the hero for better text readability */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Subtle black overlay */
    z-index: 1; /* Place overlay above the background image but below the content */
}

/* Adjust content z-index within hero if using overlay */
.hero-section .container {
    position: relative;
    z-index: 2; /* Ensure text is above the overlay */
}


/* Typography within sections */
h1, h2, h3 {
    margin-bottom: 20px; /* Space below headings */
    line-height: 1.2; /* Tighter line-height for headings */
}

h1 {
    font-size: 2.5em; /* Large headline */
    font-weight: 700;
}

h2 {
    font-size: 2em;
    font-weight: 700;
}

p {
    margin-bottom: 20px; /* Space below paragraphs */
}

ul {
    margin-bottom: 20px;
    padding-left: 20px; /* Add some padding for list items */
}

li {
    margin-bottom: 10px; /* Space between list items */
}

address {
    font-style: normal; /* Remove default italic style for address */
    margin-top: 20px;
}

/* Links within content */
/* Ensure links in hero are white if text is white */
.hero-section a {
    color: #fff;
}

a {
    color: #000; /* Default link color */
    text-decoration: underline; /* Add underline to content links */
}

a:hover {
    color: #555; /* Slightly lighter black on hover */
    text-decoration: none; /* Remove underline on hover */
}


/* Footer */
.site-footer {
    background-color: #fff; /* White footer background */
    color: #000; /* Black footer text */
    text-align: center; /* Center footer text */
    padding: 30px 0; /* Vertical padding */
    border-top: 1px solid #eee; /* Subtle border */
    position: relative; /* Needed for stacking context */
    z-index: 1; /* Ensure footer is above the fixed hero background */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column; /* Stack title and nav on smaller screens */
        text-align: center;
    }

    .site-nav ul {
        margin-top: 10px;
        padding: 0;
    }

    .site-nav li {
        margin: 0 10px; /* Adjust spacing */
    }

    .section {
        padding: 60px 0; /* Reduce padding on small screens */
    }

    .hero-section {
        padding: 80px 0;
        /* --- IMPORTANT FOR MOBILE --- */
        /* fixed background attachment can cause performance issues or look bad on mobile */
        background-attachment: scroll; /* Disable parallax on mobile */
    }

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }
}