/* Layout Styles */

.container {
  width: 90%;
  max-width: 1140px; /* Example max-width, adjust as needed */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
}

/* Basic Section Padding */
main > section {
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
}

/* Potentially add styles for header/footer layout later */
header {
    /* Example: Add padding or fixed position styles */
    padding: var(--spacing-medium) 0;
    /* position: fixed; top: 0; left: 0; width: 100%; background: var(--color-background); z-index: 100; box-shadow: var(--box-shadow); */
}

footer {
    padding: var(--spacing-large) 0;
    background-color: #f8f9fa; /* Light background for footer */
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--spacing-large);
}

/* Header Layout */
header .container nav { /* Target nav within header container */
    display: flex;
    justify-content: space-between; /* Pushes logo left, nav links right */
    align-items: center;
}

header nav ul {
    display: flex;
    gap: var(--spacing-medium); /* Spacing between nav items */
    list-style: none; /* Removes default bullets */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
}

header nav ul li {
    /* No specific styles needed here if using gap on ul */
}

header nav a {
    text-decoration: none;
    color: var(--color-text-primary);
    transition: color var(--transition-speed) ease;
}

header nav a:hover,
header nav a:focus {
    color: var(--color-primary); /* Use primary color for hover */
    text-decoration: none; /* Keep no underline generally */
}

header nav .logo {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--color-primary-dark);
}