/* Complete navigation.css with all fixes */

/* Force desktop layout - override mobile styles */
#main-nav {
    min-width: 1200px !important;
}

#main-nav .container {
    min-width: 1200px !important;
    max-width: 1400px !important;
}

#main-nav .nav-content {
    min-width: 1200px !important;
}

#main-nav .nav-left {
    min-width: 800px !important;
    overflow: visible !important;
}

#main-nav .nav-right {
    min-width: 200px !important;
}

/* --- Base styles --- */
/* Base container styles */
#main-nav .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    overflow: visible; /* Important: Allow dropdowns to be visible */
    padding: 0 1rem;
}

#main-nav .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem; /* Increased gap for better spacing */
    overflow: visible; /* Important: Allow dropdowns to be visible */
}

/* Left side navigation */
#main-nav .nav-left {
    display: flex;
    align-items: center;
    gap: 0.05rem; /* Minimal gap for tight layout */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    overflow-y: visible; /* Important: Allow dropdowns to be visible */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    max-width: calc(100% - 120px); /* Reserve space for right icons */
    position: relative; /* Important for dropdown positioning */
}

/* Hide scrollbar on webkit browsers */
#main-nav .nav-left::-webkit-scrollbar {
    display: none;
}

/* Right side navigation with icons */
#main-nav .nav-right {
    display: flex;
    align-items: center; 
    gap: 0.125rem; /* Very tight spacing between icons */
    flex-shrink: 0; /* Prevent right side from shrinking */
    position: relative; /* Important for dropdown positioning */
}

/* Navigation item styling */
#main-nav .nav-item {
    padding: 0.5rem 0.4rem; /* Reduced padding */
    text-decoration: none;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
    font-size: 0.9rem; /* Slightly smaller font */
}

#main-nav .nav-item:hover {
    color: #1f2937;
    border-bottom-color: #d1d5db;
}

#main-nav .nav-item.active {
    border-bottom-color: #2563eb;
    color: #1f2937;
}

/* --- Dropdown styling --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background: none;
    border: none;
    padding: 0.5rem 0.4rem; /* Reduced padding */
    margin: 0;
    font: inherit;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Compact toggle for more dropdown - BIGGER arrow */
.compact-toggle {
    padding: 0.3rem 0.2rem !important;
    font-size: 1rem !important; /* Increased from 0.7rem */
    margin-left: -0.25rem;
}

.dropdown-toggle:hover {
    color: #1f2937;
}

/* Force dropdowns to be visible with maximum z-index */
.dropdown-content {
    display: none;
    z-index: 9999 !important; /* Extremely high z-index */
    position: fixed !important; /* Force fixed positioning to escape any containing elements */
    box-shadow: 0 0 15px rgba(0,0,0,0.3) !important; /* More visible shadow */
    max-height: 80vh !important; /* Limit height to prevent overflow */
    overflow-y: auto !important; /* Allow scrolling */
    background-color: white !important;
    border: 1px solid #ccc !important;
    border-radius: 0.25rem;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
    min-width: 160px;
}

/* Specialty more dropdown - wider */
#more-specialties-content {
    min-width: 200px !important; /* Wider dropdown */
}

/* Ensure dropdown items are on separate lines in mobile view */
.dropdown-content a {
    padding: 12px 16px !important; /* Larger hit targets */
    font-size: 16px !important; /* Larger text */
    color: #333 !important; /* Darker text for visibility */
    text-decoration: none;
    display: block !important; /* Force block display */
    white-space: nowrap;
    width: 100% !important; /* Take full width */
    box-sizing: border-box !important; /* Include padding in width */
    float: none !important; /* Prevent floating */
    clear: both !important; /* Clear any floats */
}

/* Positioning for mobile */
#more-specialties-content.show,
#settings-dropdown-content.show {
    right: 10px !important; /* Stick to right side of screen on mobile */
    left: auto !important;
}

.dropdown-content.show {
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* More dropdown styling */
.more-dropdown {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

/* --- Icon buttons styling --- */
.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation; /* Improve touch behavior */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Make touch targets bigger on mobile */
@media (max-width: 768px) {
    .icon-button, 
    .dropdown-toggle, 
    .search-icon-button {
        min-width: 36px;
        min-height: 36px;
    }
}

/* Flag toggle styling */
#german-flag-toggle {
    cursor: pointer;
}

#german-flag {
    transition: opacity 0.3s ease;
    line-height: 1;
}

/* --- Search styling --- */
.search-container-expandable {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1000;
}

.search-icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.search-icon-button:hover {
    color: #1f2937;
}

.search-form-expandable {
    position: absolute;
    right: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease-in-out;
    display: flex;
    z-index: 1500;
}

.search-form-expandable.active {
    width: 200px;
}

.search-input-expandable {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
}

.search-input-expandable:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* --- Responsive styles --- */
/* Specialty link visibility control */
@media (max-width: 500px) {
    /* Small screens - hide certain links */
    .hide-small {
        display: none !important;
    }
    
    /* Ensure Cardio and Derma are always visible */
    .nav-item.specialty-link:nth-child(2),
    .nav-item.specialty-link:nth-child(3) {
        display: inline-flex !important;
    }
    
    /* Make sure specialty links aren't squished together */
    .nav-item.specialty-link {
        flex-shrink: 0;
        padding-right: 0.7rem !important;
    }
}

@media (min-width: 500px) and (max-width: 799px) {
    /* Medium screens - show first 4 specialties */
    .nav-item.specialty-link:nth-child(n+6) {
        display: none !important;
    }
    
    .nav-item.specialty-link:nth-child(-n+5) {
        display: inline-flex !important;
    }
    
    /* Prevent Gastro and Gyn from sharing the same line */
    .nav-item.specialty-link {
        flex-shrink: 0;
        padding-right: 0.8rem !important;
    }
}

@media (min-width: 800px) and (max-width: 1024px) {
    /* Larger screens - show more specialties */
    .hide-small {
        display: inline-flex !important;
    }
}

/* Ensure nav doesn't exceed article width */
@media (max-width: 430px) {
    #main-nav .container {
        max-width: calc(100vw - 1rem); /* Align with article width */
        padding: 0 0.25rem;
    }
    
    /* Further reduce padding for very small screens */
    #main-nav .nav-item {
        padding: 0.5rem 0.25rem;
    }
    
    #main-nav .nav-left {
        max-width: calc(100% - 110px); /* More space for right icons */
    }
}

/* Remove any clipping from parent containers */
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.nav-left, .nav-right, .nav-content, .container, .content-area, #main-nav {
    overflow: visible !important;
    position: static !important; /* Prevent stacking context issues */
}

/* Remove any clipping from parent containers */
.dropdown {
    position: static !important; /* Make dropdowns relative to viewport */
}

/* Make dropdown backgrounds more visible */
.dropdown-content.show {
    background-color: white !important;
    border: 1px solid #ccc !important;
}

/* Base container styles - UPDATED */
#main-nav .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    overflow: visible; /* Important: Allow dropdowns to be visible */
    padding: 0 1rem;
}

#main-nav .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem; /* Increased gap for better spacing */
    overflow: visible; /* Important: Allow dropdowns to be visible */
}

/* Left side navigation */
#main-nav .nav-left {
    display: flex;
    align-items: center;
    gap: 0.05rem; /* Minimal gap for tight layout */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    overflow-y: visible; /* Important: Allow dropdowns to be visible */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    max-width: calc(100% - 120px); /* Reserve space for right icons */
    position: relative; /* Important for dropdown positioning */
}

/* Hide scrollbar on webkit browsers */
#main-nav .nav-left::-webkit-scrollbar {
    display: none;
}

/* Right side navigation with icons */
#main-nav .nav-right {
    display: flex;
    align-items: center; 
    gap: 0.125rem; /* Very tight spacing between icons */
    flex-shrink: 0; /* Prevent right side from shrinking */
    position: relative; /* Important for dropdown positioning */
}

/* Navigation item styling */
#main-nav .nav-item {
    padding: 0.5rem 0.4rem; /* Reduced padding */
    text-decoration: none;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
    font-size: 0.9rem; /* Slightly smaller font */
}

#main-nav .nav-item:hover {
    color: #1f2937;
    border-bottom-color: #d1d5db;
}

#main-nav .nav-item.active {
    border-bottom-color: #2563eb;
    color: #1f2937;
}

/* Dropdown styling */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    background: none;
    border: none;
    padding: 0.5rem 0.4rem; /* Reduced padding */
    margin: 0;
    font: inherit;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Compact toggle for more dropdown - BIGGER arrow */
.compact-toggle {
    padding: 0.3rem 0.2rem !important;
    font-size: 1rem !important; /* Increased from 0.7rem */
    margin-left: -0.25rem;
}

.dropdown-toggle:hover {
    color: #1f2937;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2000; /* Higher z-index to ensure visibility */
    border-radius: 0.25rem;
    padding: 0.5rem 0;
    margin-top: 0.25rem;
    max-height: 80vh; /* Limit height and add scrolling if needed */
    overflow-y: auto;
}

/* Position the more dropdown content properly */
#more-specialties-content {
    right: auto;
    left: 0;
    min-width: 140px;
    top: 100%; /* Position below the dropdown toggle */
}

.settings-dropdown .dropdown-content {
    right: 0;
    left: auto;
    min-width: 140px;
}

.dropdown-content.show {
    display: block;
}

.dropdown-content a {
    color: black;
    padding: 0.75rem 1rem;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* More dropdown styling */
.more-dropdown {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

/* Icon buttons styling */
.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation; /* Improve touch behavior */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Make touch targets bigger on mobile */
@media (max-width: 768px) {
    .icon-button, 
    .dropdown-toggle, 
    .search-icon-button {
        min-width: 36px;
        min-height: 36px;
    }
}

/* Flag toggle styling */
#german-flag-toggle {
    cursor: pointer;
}

#german-flag {
    transition: opacity 0.3s ease;
    line-height: 1;
}

/* Search styling */
.search-container-expandable {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1000;
}

.search-icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.search-icon-button:hover {
    color: #1f2937;
}

.search-form-expandable {
    position: absolute;
    right: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease-in-out;
    display: flex;
    z-index: 1500;
}

.search-form-expandable.active {
    width: 200px;
}

.search-input-expandable {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
}

.search-input-expandable:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

/* Responsive specialty hiding - Show Cardio and Derma on iPhone */
@media (max-width: 500px) {
    /* Small screens - hide certain links */
    .hide-small {
        display: none !important;
    }
    
    /* Ensure Cardio and Derma are always visible */
    .nav-item.specialty-link:nth-child(2),
    .nav-item.specialty-link:nth-child(3) {
        display: inline-flex !important;
    }
}

@media (min-width: 500px) and (max-width: 1024px) {
    /* Medium screens - show more specialties */
    .hide-small:nth-child(-n+6) { /* Show first 6 specialties on medium screens */
        display: inline-flex !important;
    }
}

/* Ensure nav doesn't exceed article width */
@media (max-width: 430px) {
    #main-nav .container {
        max-width: calc(100vw - 1rem); /* Align with article width */
        padding: 0 0.25rem;
    }
    
    /* Further reduce padding for very small screens */
    #main-nav .nav-item {
        padding: 0.5rem 0.25rem;
    }
    
    #main-nav .nav-left {
        max-width: calc(100% - 110px); /* More space for right icons */
    }
}

/* Fix content area to ensure it doesn't clip dropdowns */
.content-area {
    overflow: visible !important;
}