/* Winkeyer TX Trainer - Custom Styles */

.morse-logo {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.3;
    color: #60a5fa;
    letter-spacing: 0.5px;
}

.professional-header {
    background: linear-gradient(135deg, #1f2937, #111827);
    border-bottom: 2px solid #374151;
}

.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link:hover::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    border-radius: 1px;
}

.word-separator {
    font-size: 14px;
    color: #9ca3af;
    margin: 0 3px;
}

/* Slider styling */
.slider {
    background: linear-gradient(to right, #4f46e5 0%, #06b6d4 100%);
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 20;
}

.slider::-webkit-slider-thumb {
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    pointer-events: auto !important;
    z-index: 20;
}

.slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer !important;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    pointer-events: auto !important;
    z-index: 20;
}

/* Section toggle animations */
.rotate-180 {
    transform: rotate(180deg);
}

.section-header svg {
    transition: transform 0.3s ease;
}

/* Make all sections feel completely static but allow interaction with controls */
.section {
    position: static !important;
    cursor: default !important;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: auto !important; /* Ensure pointer events work */
    transition: none !important;
}

/* Override any styles that might interfere with buttons and slider */
button, 
input[type="range"],
.slider,
#realWordsButton, 
#abbreviationsButton, 
#callsignsButton, 
#qrCodesButton, 
#topWordsButton, 
#mixedButton,
#connectButton,
#startButton,
#numItemsSlider {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 100 !important;
    opacity: 1 !important;
}

/* Remove any hover effects on sections to make them feel static */
.section:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    transform: none !important;
    cursor: default !important;
}

.section * {
    user-select: text;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.section-header {
    cursor: default !important;
    user-select: none;
    transition: none !important;
}

.section-header * {
    cursor: default !important;
    user-select: none;
}

/* Remove any hover effects on section headers to make them feel static */
.section-header:hover {
    background-color: transparent !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
}

.section-header svg {
    cursor: default !important;
    transition: transform 0.3s ease; /* Keep the expand/collapse animation */
}

/* Remove any hover effects on section header icons */
.section-header svg:hover {
    transform: none !important;
    color: inherit !important;
    stroke: currentColor !important;
}

/* Ensure inputs and controls remain interactive */
.section input, 
.section select, 
.section button, 
.section textarea,
.section [type="range"],
.section .slider {
    cursor: pointer !important;
    user-select: text;
    pointer-events: auto !important;
    z-index: 10;
}

/* Make all non-interactive elements in sections feel completely static */
.section h1, .section h2, .section h3, .section h4, .section h5, .section h6,
.section p, .section div:not([class*="button"]):not([class*="input"]):not([class*="select"]):not([id*="Button"]):not([id*="numItemsSlider"]):not([id*="realWordsButton"]):not([id*="abbreviationsButton"]):not([id*="callsignsButton"]):not([id*="qrCodesButton"]):not([id*="topWordsButton"]):not([id*="mixedButton"]),
.section span:not([class*="button"]):not([class*="input"]) {
    cursor: default !important;
    user-select: text !important;
    transition: none !important;
}

/* Remove hover effects from all static elements */
.section h1:hover, .section h2:hover, .section h3:hover, .section h4:hover, .section h5:hover, .section h6:hover,
.section p:hover, .section span:hover:not([class*="button"]):not([class*="input"]) {
    background-color: transparent !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
}