/* Custom scroll-margin-top for fixed header */
section[id] {
    scroll-margin-top: 80px; /* Adjust this value based on your fixed header's height */
    /* The header in index.html has py-3 (padding top/bottom 0.75rem = 12px each, total 24px)
       and border-b (1px). The text-lg font bold is roughly 18px.
       A height of ~50-60px for the header is likely.
       80px provides some buffer. This can be fine-tuned.
    */
}

/* Basic active link style for navigation items */
/* This can be enhanced or replaced by JavaScript adding Tailwind classes */
nav a.active {
    color: #d9534f; /* A reddish color, similar to the button in the contact form */
    font-weight: 600; /* semi-bold */
}

/* Ensure html and body take full height for sticky footer or full-page sections */
html {
    margin: 0;
    padding: 0;
    /* height: 100%; Removed, as min-height on body is often more flexible */
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Make body at least full viewport height and allow it to grow */
    margin: 0; /* Reset default margin */
}

.layout-container {
    display: flex; /* Reinforce, though Tailwind classes should handle this */
    flex-direction: column; /* Reinforce */
    flex: 1 0 auto; /* Allows layout-container to grow and shrink, crucial for sticky footer and main content expansion */
    /* This ensures it fills space within its parent (group/design-root) */
}

/* You can add other very specific custom styles here if Tailwind isn't sufficient */