/* ======= Navigation ======= */
.header-component {
    padding: var(--space-4) 0;
    position: relative;
    z-index: var(--z-index-nav-base);
    /* Use Glassmorphism variables */
    background-color: var(--glass-background-color);
    backdrop-filter: var(--glass-backdrop-filter);
    -webkit-backdrop-filter: var(--glass-backdrop-filter);
    border-bottom: none; /* Explicitly remove bottom border */
    color: var(--glass-text-color);
}

.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-title-wrapper {
    text-decoration: none;
    color: inherit; /* Inherit color from .header-component */
    transition: var(--transition-standard);
}

.site-title-wrapper:hover {
    opacity: var(--nav-site-title-hover-opacity);
}

.site-title {
    font-size: var(--nav-site-title-font-size);
    font-weight: var(--font-weight-medium);
    margin: 0;
    color: var(--color-text-white-primary);
    letter-spacing: var(--nav-site-title-letter-spacing);
}

.main-nav {
    display: flex;
    align-items: center;
}

.nav-demo {
    margin-bottom: var(--space-6);
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-2);
}

.nav-item {
    margin: 0;
    padding: 0;
}

.nav-list a {
    color: var(--glass-text-color);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-medium);
    transition: var(--transition-standard);
    display: inline-block;
    font-size: var(--nav-link-font-size);
    font-weight: var(--font-weight-medium);
    position: relative;
}

.nav-list a::after {
    content: '';
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--nav-underline-bottom);
    height: var(--border-width-thick);
    background-color: var(--color-text-white-primary);
    transform: scaleX(0);
    transition: transform var(--transition-duration-standard) ease;
    transform-origin: center;
}

.nav-list a:hover,
.nav-list a.active {
    color: var(--color-text-white-primary);
}

.nav-list a:hover::after {
    transform: scaleX(var(--nav-underline-scale-hover));
}

.nav-list a.active::after {
    transform: scaleX(var(--nav-underline-scale-active));
}

/* ======= Top Navigation Bar ======= */
#top-navigation-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0; /* Reduced top/bottom padding */
    background-color: transparent; /* Remove background */
    color: var(--glass-text-color);
    margin-bottom: 0;
    width: 100%;
}

.nav-left {
    flex: 0 0 auto; /* Don't flex, only take needed space */
    font-weight: var(--font-weight-medium);
    color: var(--color-text-white-secondary);
    margin-left: 0; /* Align exactly with column edge */
    padding-left: var(--space-6); /* Increased to match 8px padding */
}

.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.nav-right {
    flex: 0 0 auto; /* Don't flex, only take needed space */
    text-align: right;
    margin-right: 0; /* Align exactly with column edge */
    padding-right: var(--space-6); /* Increased to match 8px padding */
}

.disclaimer-link {
    color: var(--color-text-white-secondary);
    font-weight: var(--font-weight-medium); /* Match left text */
    cursor: pointer;
    transition: color var(--transition-duration-standard) ease;
    text-decoration: none; /* Remove underline */
}

.disclaimer-link:hover {
    color: var(--color-text-white-primary);
}

/* Styles for Save/Load buttons in nav-right */
#save-scenario-btn,
#load-scenario-btn {
    padding: var(--space-1) var(--space-2); /* Smaller padding */
    font-size: var(--font-size-small); /* Smaller font */
    background-color: var(--nav-action-button-bg); /* Darker, slightly transparent background */
    border: var(--border-width-standard) solid var(--nav-action-button-border-color); /* Subtle border */
    color: var(--color-text-white-secondary);
    margin-left: var(--space-2); /* Add some spacing between them and other elements */
}

#save-scenario-btn:hover,
#load-scenario-btn:hover {
    background-color: var(--nav-action-button-bg-hover); /* Darken further on hover */
    color: var(--color-text-white-primary);
    border-color: var(--nav-action-button-border-color-hover);
}

/* ======= Preset Buttons Styling ======= */
.preset-btn {
    background-color: var(--preset-btn-bg);
    backdrop-filter: var(--glass-backdrop-filter);
    -webkit-backdrop-filter: var(--glass-backdrop-filter);
    border: var(--border-width-standard) solid var(--glass-border-color);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-medium);
    color: var(--glass-text-color);
    transition: all var(--transition-duration-standard) ease;
}

.preset-btn:hover {
    background-color: var(--glass-background-color);
    border-color: var(--glass-border-color-hover);
    color: var(--color-text-white-primary);
    box-shadow: var(--shadow-large);
    transform: var(--button-hover-transform);
}

.preset-btn.active {
    background-color: var(--glass-background-color);
    border-color: var(--color-primary);
    color: var(--color-text-white-primary);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-large);
}