/* Kontener nawigacji */
.opnw-navigation {
    position: fixed;
    z-index: 9999;
    /* Use CSS variables for colors, with fallbacks */
    background-color: var(--opnw-bg-color, rgba(50, 50, 50, 0.8)); 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Pozycje nawigacji */
.opnw-position-left {
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.opnw-position-right {
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

.opnw-position-top {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}

.opnw-position-bottom {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}

/* Menu */
.opnw-menu {
    list-style: none;
    margin: 0;
    padding: 5px 0; /* Reduced vertical padding */
    display: flex; /* Default to flex for top/bottom */
    flex-direction: column; /* Stack vertically for left/right */
}

/* Adjust flex direction for horizontal positions */
.opnw-position-top .opnw-menu,
.opnw-position-bottom .opnw-menu {
    flex-direction: row;
}

/* Element menu */
.opnw-menu-item {
    margin: 0;
    padding: 0;
}

/* Link w menu - Default (Vertical for Left/Right) */
.opnw-link {
    display: block; /* Changed from flex to block for simpler vertical layout */
    padding: 8px 12px;
    color: var(--opnw-text-color, #f0f0f0); /* Use CSS variable */
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
    text-align: center; /* Center text/icon */
    position: relative; /* For tooltip */
}

.opnw-link:hover {
    color: var(--opnw-hover-text-color, #ffffff); /* Use CSS variable */
    background-color: var(--opnw-hover-bg-color, rgba(255, 255, 255, 0.1)); /* Use CSS variable */
}

/* Active link color is primarily handled by JS using data-color attribute */
/* This provides a fallback if JS fails or data-color is not set */
.opnw-link.active {
    color: var(--opnw-active-text-color, #ffffff); /* Use CSS variable */
    font-weight: bold;
}

/* Ensure icon color also uses variables */
.opnw-icon,
.opnw-icon i {
    color: inherit; /* Inherit color from parent .opnw-link */
    transition: color 0.3s ease;
}

/* Active link icon color (handled by JS, but set fallback) */
.opnw-link.active .opnw-icon,
.opnw-link.active .opnw-icon i {
     color: var(--opnw-active-text-color, #ffffff); /* Use CSS variable */
}

/* Link w menu - Horizontal (for Top/Bottom) */
.opnw-position-top .opnw-link,
.opnw-position-bottom .opnw-link {
    padding: 8px 15px;
}

/* Ikona */
.opnw-icon {
    display: block; /* Display block for vertical stacking */
    margin: 0 auto 4px auto; /* Center icon and add bottom margin */
    width: 20px;
    height: 20px;
    line-height: 20px; /* Vertically align icon font */
}

.opnw-icon i {
    font-size: 16px;
    vertical-align: middle; /* Better alignment */
}

/* Etykieta (Tooltip style) - Keeping default dark style for now */
.opnw-label {
    display: none; /* Hide label by default */
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show label on hover */
.opnw-link:hover .opnw-label {
    display: block;
    opacity: 1;
}

/* Tooltip positioning */
.opnw-position-left .opnw-label {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 10px;
}

.opnw-position-right .opnw-label {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
}

.opnw-position-top .opnw-label {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
}

.opnw-position-bottom .opnw-label {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;
}

/* Sekcje */
.opnw-section {
    /* min-height: 100vh; -- Removing this as it might not always be desired */
    padding: 60px 0; /* Add default padding */
    position: relative;
}

.opnw-section-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Responsywność */
@media screen and (max-width: 768px) {
    .opnw-navigation {
        width: 100%;
        border-radius: 0;
        box-sizing: border-box;
    }

    .opnw-position-left,
    .opnw-position-right {
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
    }

    .opnw-position-top {
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
    }

    .opnw-position-bottom {
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
    }

    .opnw-menu {
        display: flex;
        flex-direction: row; /* Always row on mobile */
        justify-content: space-around;
        padding: 5px 0;
    }

    .opnw-link {
        padding: 8px 5px; /* Adjust padding */
        flex-grow: 1; /* Distribute space */
    }

    .opnw-icon {
        margin-bottom: 2px;
    }

    /* Hide labels on mobile, rely on icons */
    .opnw-label {
        display: none !important;
    }
}