/* 
 * Internet Explorer and Legacy Browser Fixes
 * Supports: IE8+, Firefox 16+, early Chrome versions
 */

/* General fixes */
body {
    font-family: Arial, sans-serif !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

header {
    background-color: #0082ca !important;
    color: white !important;
}

.section {
    background-color: #f5f5f5 !important;
    border-radius: 5px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

nav {
    background-color: #005a9c !important;
    text-align: center !important;
    display: block !important; /* Fallback for flexbox */
}

nav a {
    color: white !important;
    display: inline-block !important;
    *display: inline !important;
    *zoom: 1 !important;
    vertical-align: middle !important;
    margin: 5px !important;
}

nav a:hover {
    background-color: #0082ca !important;
}

footer {
    background-color: #005a9c !important;
    color: #ffffff !important;
}

a {
    color: #0056b3 !important;
}

a:hover {
    color: #003d82 !important;
}

/* Specific fixes for components */
.slideshow-container {
    position: relative !important;
    margin-bottom: 20px !important;
}

.mySlides {
    position: relative !important;
    filter: alpha(opacity=100) !important;
}

.prev, .next {
    position: absolute !important;
    top: 50% !important;
    background-color: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
}

.prev {
    left: 0 !important;
}

.next {
    right: 0 !important;
}

/* Fix for image gallery in IE11 */
.image-gallery {
    display: block !important;
    overflow: hidden !important;
    text-align: center !important;
    font-size: 0 !important; /* Remove white space between inline elements */
}

.image-gallery img {
    float: left !important;
    width: 48% !important;
    margin: 1% !important;
    display: inline-block !important;
    *display: inline !important;
    *zoom: 1 !important;
    vertical-align: top !important;
    width: 46% !important;
    margin: 2% !important;
    font-size: 16px !important; /* Reset font size */
}

@media (max-width: 768px) {
    .image-gallery img {
        width: 96% !important;
    }
}

/* Fix for Discord widget */
#discord-widget-container {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
}

/* Fix for forms */
input, button {
    padding: 8px !important;
    margin: 5px 0 !important;
}

/* IE8 and below specific styles */
.lt-ie9 body {
    font-family: Arial, sans-serif !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

.lt-ie9 header {
    background-color: #0082ca !important;
    color: white !important;
}

.lt-ie9 .section {
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.lt-ie9 nav {
    background-color: #005a9c !important;
    text-align: center !important;
    padding: 10px 0 !important;
}

.lt-ie9 nav a {
    color: white !important;
    display: inline-block !important;
    *display: inline !important;
    *zoom: 1 !important;
    margin: 5px !important;
    padding: 5px 10px !important;
}

.lt-ie9 nav a:hover {
    background-color: #0082ca !important;
}

.lt-ie9 footer {
    background-color: #005a9c !important;
    color: #ffffff !important;
    padding: 20px !important;
    text-align: center !important;
}

.lt-ie9 a {
    color: #0056b3 !important;
}

.lt-ie9 a:hover {
    color: #003d82 !important;
}

/* Specific component fixes for IE8 */
.lt-ie9 .slideshow-container {
    position: relative !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.lt-ie9 .mySlides {
    position: relative !important;
    width: 100% !important;
}

.lt-ie9 .mySlides img {
    width: 100% !important;
    display: block !important;
}

.lt-ie9 .prev, 
.lt-ie9 .next {
    position: absolute !important;
    top: 50% !important;
    margin-top: -22px !important;
    padding: 16px !important;
    background-color: #000 !important;
    color: white !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

.lt-ie9 .prev {
    left: 0 !important;
}

.lt-ie9 .next {
    right: 0 !important;
}

.lt-ie9 .text {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    background-color: #000 !important;
    color: white !important;
    padding: 8px 12px !important;
    text-align: center !important;
}

/* Image gallery fixes for IE8 */
.lt-ie9 .image-gallery {
    width: 100% !important;
    overflow: hidden !important;
    zoom: 1 !important;
}

.lt-ie9 .image-gallery:after {
    content: " " !important;
    display: block !important;
    clear: both !important;
    height: 0 !important;
    visibility: hidden !important;
}

.lt-ie9 .image-gallery img {
    float: left !important;
    width: 48% !important;
    margin: 1% !important;
    display: block !important;
    border: 1px solid #ddd !important;
}

/* Form element fixes */
.lt-ie9 input, 
.lt-ie9 button {
    padding: 8px !important;
    margin: 5px 0 !important;
    border: 1px solid #ddd !important;
}

.lt-ie9 button[type="submit"],
.lt-ie9 #dark-mode-toggle {
    background-color: #005a9c !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
}

/* Discord widget container fixes */
.lt-ie9 #discord-widget-container {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    border: 1px solid #ddd !important;
    background-color: #f5f5f5 !important;
}

.lt-ie9 #discord-widget-container button {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    background-color: #007acc !important;
    color: white !important;
    border: none !important;
    padding: 5px !important;
    cursor: pointer !important;
}

/* General IE6-8 fixes */
.lt-ie9 * {
    /* Disable box-shadow for IE8 and below */
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Dropdown menu fixes for IE8 */
.lt-ie9 .dropdown {
    position: relative !important;
    display: inline-block !important;
    *display: inline !important;
    *zoom: 1 !important;
}

.lt-ie9 .dropdown-content {
    display: none;
    position: absolute !important;
    background-color: #005a9c !important;
    min-width: 160px !important;
    border: 1px solid #444 !important;
    z-index: 100 !important;
}

.lt-ie9 .dropdown-content a {
    color: white !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    display: block !important;
    text-align: left !important;
}

.lt-ie9 .dropdown-content a:hover {
    background-color: #0082ca !important;
}

.lt-ie9 .dropdown:hover .dropdown-content {
    display: block !important;
}

/* Additional fallbacks for CSS features not supported in IE */
html {
    /* Simulate CSS variables for IE browsers */
    font-size: 16px !important; /* Base font size */
}

nav button,
nav .dropdown {
    display: inline-block !important;
    *display: inline !important;
    *zoom: 1 !important;
    vertical-align: middle !important;
    margin: 5px !important;
}

/* Fix for opacity which IE8 only supports with filter */
.fade {
    filter: alpha(opacity=100) !important;
}

@keyframes fade {
    from { filter: alpha(opacity=40) !important; }
    to { filter: alpha(opacity=100) !important; }
}

/* Fix for nth-child which is not supported in IE8 */
.dot:first-child {
    margin-left: 0 !important;
}

.dot:last-child {
    margin-right: 0 !important;
}

/* Fix for border-radius in IE8 */
.button,
.dot,
.section,
.image-gallery img,
input, 
button {
    behavior: url(http://www.htmlremix.com/scripts/PIE/PIE.htc) !important;
}

/* Shadows for IE */
.section,
.image-gallery img,
#discord-widget-container,
.dropdown-content {
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#CCCCCC')" !important;
}

/* Active/hover states for elements that use CSS variables */
.dot.active, .dot:hover {
    background-color: #717171 !important;
}

button[type="submit"]:hover,
#dark-mode-toggle:hover {
    background-color: #0082ca !important;
}

/* Fix for transitions */
* {
    -ms-transition: none !important;
}

/* Dark mode manual styles for IE */
.dark-mode body {
    background-color: #191919 !important;
    color: #e0e0e0 !important;
}

.dark-mode header {
    background-color: #333333 !important;
}

.dark-mode .section {
    background-color: #252525 !important;
}

.dark-mode nav {
    background-color: #333333 !important;
}

.dark-mode nav a:hover {
    background-color: #444444 !important;
}

.dark-mode a {
    color: #6aabff !important;
}

.dark-mode a:hover {
    color: #99c9ff !important;
}

.dark-mode footer {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}

.dark-mode .slideshow-text-bg {
    background-color: #262626 !important;
    background-color: rgba(38, 38, 38, 0.7) !important;
}

.dark-mode .dot-border-color {
    border-color: #444444 !important;
}

.dark-mode .dot.active,
.dark-mode .dot:hover {
    background-color: #888888 !important;
}

.dark-mode .form-bg-color {
    background-color: #252525 !important;
}

.dark-mode .form-border-color {
    border-color: #333333 !important;
}

.dark-mode button[type="submit"],
.dark-mode #dark-mode-toggle {
    background-color: #333333 !important;
}

.dark-mode button[type="submit"]:hover,
.dark-mode #dark-mode-toggle:hover {
    background-color: #444444 !important;
}

/* Additional print styles for IE */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    nav, 
    .slideshow-container,
    #discord-widget-container,
    #dark-mode-toggle {
        display: none !important;
    }
    
    .section {
        border: 1px solid #ddd !important;
        page-break-inside: avoid !important;
    }
    
    a {
        text-decoration: underline !important;
        color: #000000 !important;
    }
    
    a:after {
        content: " (" attr(href) ")" !important;
    }
}