/* Reset and base styles */
@font-face {
    font-family: 'Minecraft';
    src: url('misc/minecraft-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Minecraft', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 100;
    font-size: 18pt;
    background-image: url('img/dirt.png');
    background-repeat: repeat;
    background-color: #000; /* Ensure a fallback background color */
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* Container for the main content */
.container {
    background-image: url('img/stone.png');
    background-repeat: repeat;
    margin: 0 auto;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    padding: 0;
    position: relative;
    box-shadow: 0 12px 12px rgba(0,0,0,0.7);
}

/* Section container styles - wide rectangular sections */
.section-container {
    width: 95%;
    margin: 0 auto 20px;
    min-height: 100px;
    padding: 0;
    border-radius: 0; /* Completely rectangular */
    color: white; /* White text for better contrast on red */
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Special styling for header section with logo */
#header-section {
    background-image: url('img/logo-bg.png');
    background-repeat: repeat;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

/* Mobile-first design (optimized for 9:16 ratio) */
header {
    text-align: center;
    margin-bottom: 1rem;
}

h1 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.tagline {
    font-style: italic;
    color: #666;
}

/* Navbar styles */
.navbar-wrapper {
    width: 100%;
    background-color: transparent;
    position: relative;
    z-index: 100;
    margin-top: 0;
    padding-top: 0;
}

.navbar {
    width: 100%;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0;
    margin-bottom: 20px;
    padding: 5px 1px;
    text-align: center;
    display: block;
    justify-content: space-between; /* Distribute buttons equally */
    align-items: center; /* Align items vertically */
    gap: 3px; /* Reduced spacing between buttons */
    position: relative; /* Reset position to default */
    top: auto; /* Remove fixed positioning */
    left: auto; /* Remove fixed positioning */
    box-shadow: none; /* Remove shadow */
}

.navbar-table {
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    width: auto; /* Let the table size to its content */
}

.navbar-table td {
    padding: 0 3px; /* Slightly increased spacing between buttons */
    vertical-align: middle;
    white-space: nowrap;
    line-height: 0; /* Remove any extra vertical spacing */
}

/* Default dimensions for navigation buttons */
.navbar a {
    display: inline-block;
    width: 150px; /* Default width matching the image dimensions */
    height: 50px; /* Default height matching the image dimensions */
    text-align: center;
    vertical-align: middle;
}

/* Remove default dimensions for <a> tags to allow JavaScript to dynamically adjust their sizes */
.navbar a {
    min-width: unset;
    min-height: unset;
}

/* Ensure images inside <a> tags are fully visible */
.navbar a img {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure <a> tags expand to the size of the image */
.navbar a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s;
    vertical-align: middle;
    width: fit-content; /* Ensure <a> tags fit the content */
    height: fit-content; /* Ensure <a> tags fit the content */
}

.navbar a img {
    height: 45px; /* Fixed height for images */
    width: auto; /* Auto width to maintain aspect ratio */
    display: block; /* Ensure images are block-level */
    margin: 0 auto; /* Center images within their container */
}

.navbar-wrapper.has-sticky {
    margin-bottom: 0; /* Reset margin adjustments */
}

section {
    width: 100%;
}

h2 {
    margin-bottom: 1rem;
    color: #ffffff;
    border-bottom: 2px solid transparent;
    padding-bottom: 0.5rem;
    font-weight: normal; /* Set font weight to normal */
}

h3 {
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #ffffff;
}

input, select {
    width: 100%;
    padding: 0.8rem;
    border: 2px solid #ffffff;
    border-radius: 0; /* Rectangular shape */
    font-size: 1rem;
    margin-bottom: 0.5rem;
    background-color: #e32d2f; /* Slightly lighter red */
    color: #ffffff;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

button {
    background-color: #ffffff;
    color: #c42021; /* Red color */
    border: none;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    border-radius: 0; /* Rectangular shape */
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
    font-weight: bold;
}

button:hover {
    background-color: #f0f0f0;
}

footer {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    color: #666;
    font-size: 0.9rem;
}

/* Gallery styles */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 20px;
}

.gallery-item {
    text-align: center;
}

.placeholder-image {
    background-color: #e32d2f; /* Slightly lighter red */
    border: 2px solid #ffffff;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 0; /* Rectangular shape */
    color: #ffffff;
    font-weight: bold;
}

/* Testimonial styles */
.testimonial {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #e32d2f; /* Slightly lighter red */
    border-left: 4px solid #ffffff;
    border-radius: 0; /* Rectangular shape */
}

.testimonial p {
    font-style: italic;
    margin-bottom: 5px;
    color: #ffffff;
}

.testimonial cite {
    font-weight: bold;
    color: #ffffff;
}

/* FAQ styles */
.faq-item {
    margin-bottom: 20px;
}

/* MOD SECTION STYLING */
.mod-section {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.mod-section:hover {
    transform: scale(1.05);
    background-color: rgba(0, 0, 0, 0.7);
    color: #ff0; /* Example hover color */
}

.mod-image img {
    width: 70px;
    height: 70px;
    border-radius: 5px;
    display: block;
    margin: auto 0;
}

.mod-details {
    margin-left: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.mod-details h3 {
    font-size: 1.3em;
    margin: 0;
    font-weight: normal;
    line-height: 1;
}

.mod-details p {
    font-size: 0.8em;
    margin: 0;
    font-weight: normal;
    line-height: 1;
    color: #ffffff;
}

/* Search bar styles */
.search-container {
    margin: 20px auto;
    text-align: center;
    width: 100%;
}

#mod-search {
    width: 100%;
    padding: 5px;
    font-size: 1rem;
    font-family: 'Minecraft', sans-serif;
    border: 2px solid #ffffff;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    outline: none;
    transition: border-color 0.3s ease;
}

#mod-search:focus {
    border-color: #ff0;
}

/* Minor splash text animation for yellow text */
.yellow-splash {
    color: #ff0; /* Yellow color */
    display: inline-block; /* Ensure animation works inside a paragraph */
    animation: yellowSplashAnimation 1.5s infinite ease-in-out;
}

@keyframes yellowSplashAnimation {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Allow underlines but override blue color for yellow-splash class */
.yellow-splash a {
    color: inherit; /* Inherit yellow color */
    text-decoration: underline; /* Allow underline */
}

.yellow-splash a:hover {
    text-decoration: underline; /* Ensure underline on hover */
}

/* Responsive design for different screen sizes */
/* For tablets and small desktops */
@media (min-width: 800px) {
    .container {
        width: 100%;
        max-width: 960px;
        padding: 0;
    }
    
    .section-container {
        width: 95%;
        margin-bottom: 30px;
        min-height: 120px;
    }
    
    .navbar {
        width: 100%;
    }
    
    .navbar a {
        height: 40px; /* Consistent height for medium screens */
    }
    
    /* Maintain exact aspect ratios for 40px height */
    .navbar a.btn-play {
        width: 93px; /* 40px height × 2.33 aspect ratio */
    }
    
    .navbar a.btn-mods {
        width: 187px; /* 40px height × 4.67 aspect ratio */
    }
    
    .navbar a.btn-rules {
        width: 73px; /* 40px height × 1.83 aspect ratio */
    }
    
    .navbar a.btn-map {
        width: 93px; /* 40px height × 2.33 aspect ratio */
    }
    
    button {
        width: auto;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* For larger desktop screens (4:3 and wider) */
@media (min-width: 1024px) and (min-aspect-ratio: 4/3) {
    .container {
        width: 75%;
        max-width: 1200px;
        padding: 0;
    }
    
    .section-container {
        width: 95%;
        margin-bottom: 40px;
        min-height: 150px;
    }
    
    .navbar {
        width: 100%;
    }
    
    .navbar a {
        height: 40px; /* Consistent height for desktop screens */
    }
    
    /* Maintain exact aspect ratios for 40px height */
    .navbar a.btn-play {
        width: 93px; /* 40px height × 2.33 aspect ratio */
    }
    
    .navbar a.btn-mods {
        width: 187px; /* 40px height × 4.67 aspect ratio */
    }
    
    .navbar a.btn-rules {
        width: 73px; /* 40px height × 1.83 aspect ratio */
    }
    
    .navbar a.btn-map {
        width: 93px; /* 40px height × 2.33 aspect ratio */
    }
    
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* For very wide screens */
@media (min-width: 1400px) or (min-aspect-ratio: 16/9) {
    .container {
        width: 60%;
    }
    
    .section-container {
        width: 95%;
        min-height: 180px;
    }
    
    .navbar {
        width: 100%;
    }
    
    .navbar a {
        height: 40px; /* Consistent height for wide screens */
    }
    
    /* Maintain exact aspect ratios for 40px height */
    .navbar a.btn-play {
        width: 93px; /* 40px height × 2.33 aspect ratio */
    }
    
    .navbar a.btn-mods {
        width: 187px; /* 40px height × 4.67 aspect ratio */
    }
    
    .navbar a.btn-rules {
        width: 73px; /* 40px height × 1.83 aspect ratio */
    }
    
    .navbar a.btn-map {
        width: 93px; /* 40px height × 2.33 aspect ratio */
    }
}

/* For very small screens like mobile phones in portrait mode */
@media (max-width: 480px) {
    .navbar {
        padding: 5px 0;
        display: flex;
        flex-wrap: wrap; /* Allow buttons to wrap to the next line */
        justify-content: center; /* Center buttons */
        gap: 10px; /* Add spacing between buttons */
    }
    
    .navbar a {
        height: 40px; /* Consistent height for mobile screens */
    }
    
    .navbar a img {
        height: 50px; /* Reduce button image size */
        width: auto;
    }
    
    /* Maintain exact aspect ratios for 40px height */
    .navbar a.btn-play {
        width: 93px; /* 40px height × 2.33 aspect ratio */
    }
    
    .navbar a.btn-mods {
        width: 187px; /* 40px height × 4.67 aspect ratio */
    }
    
    .navbar a.btn-rules {
        width: 73px; /* 40px height × 1.83 aspect ratio */
    }
    
    .navbar a.btn-map {
        width: 93px; /* 40px height × 2.33 aspect ratio */
    }
    
    .navbar-table {
        width: 100%;
    }
    
    .navbar-table td {
        padding: 0 1px; /* Minimal horizontal padding */
    }
}

/* Optimize scaling for mobile devices */
@media (max-width: 768px) {
    body {
        font-size: 24px; /* Increase base font size */
        line-height: 1.8; /* Improve readability */
    }

    h1 {
        font-size: 3.5rem; /* Scale up main headings */
    }

    h2 {
        font-size: 3rem; /* Scale up section headings */
    }

    h3 {
        font-size: 2rem; /* Scale up subheadings */
    }

    .navbar a img {
        height: 60px; /* Reduce button image size slightly */
        width: auto;
    }

    .navbar {
        gap: 5px; /* Reduce spacing between buttons */
    }

    .mod-image img {
        width: 120px; /* Increase mod image size */
        height: 120px;
    }

    input[type="text"] {
        font-size: 1.8rem; /* Scale up input text */
        padding: 16px; /* Increase padding */
    }

    button {
        font-size: 1.8rem; /* Scale up button text */
        padding: 18px 26px; /* Increase button size */
    }

    .section-container {
        padding: 30px; /* Add more padding for better spacing */
    }

    .yellow-splash {
        color: #ff0; /* Ensure yellow color for links */
        font-size: inherit; /* Match surrounding text size */
    }

    .party-countdown {
        font-size: 2.5rem; /* Scale up countdown text */
    }

    .welcome-section p:last-child {
        font-size: 1.8rem; /* Match size of other text */
    }

    .rules-text {
        font-size: 2rem; /* Scale up rules text */
    }

    .mod-section {
        font-size: 1.8rem; /* Scale up mod item text */
    }
}

/* Optimize spacing for larger screens */
@media (min-width: 1024px) {
    .navbar {
        gap: 5px; /* Reduce spacing between buttons */
    }

    .navbar a img {
        height: 60px; /* Adjust button image size */
        width: auto;
    }
}

/* Refine navbar button sizes and spacing for larger screens */
@media (min-width: 1400px) {
    .navbar {
        gap: 10px; /* Increase spacing between buttons to prevent overlap */
        justify-content: center; /* Ensure buttons are centered */
    }

    .navbar a img {
        height: 55px; /* Maintain consistent button size */
        width: auto;
    }
}

@media (min-width: 1024px) and (max-width: 1399px) {
    .navbar {
        gap: 6px; /* Adjust spacing between buttons */
        justify-content: center; /* Ensure buttons are centered */
    }

    .navbar a img {
        height: 50px; /* Adjust button image size */
        width: auto;
    }
}

/* Adjust spacing for navbar buttons on smaller sizes */
@media (max-width: 1023px) {
    .navbar {
        gap: 4px; /* Slightly reduce spacing between buttons */
    }

    .navbar a img {
        height: 50px; /* Maintain consistent button size */
        width: auto;
    }
}

/* Fix background and container issues on small screens */
@media (max-width: 528px) {
    body {
        background-attachment: scroll; /* Allow background to scroll */
        margin: 0; /* Remove any extra margins */
        padding: 0; /* Remove any extra padding */
    }

    .container {
        width: 100%; /* Ensure container fills the viewport */
        max-width: 100%; /* Prevent any max-width constraints */
        margin: 0 auto; /* Center the container */
        padding: 0; /* Remove any extra padding */
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }
}

/* Reduce font sizes of mod items' titles and subtitles on small screens */
@media (max-width: 580px) {
    .mod-details h3 {
        font-size: 1em; /* Further reduce title font size */
    }

    .mod-details p {
        font-size: 0.6em; /* Further reduce subtitle font size */
    }

    body {
        line-height: 1.4; /* Reduce line spacing for small screens */
    }
}

@media (max-width: 492px) {
    .mod-details h3 {
        font-size: 0.8em; /* Make title font size much smaller */
    }

    .mod-details p {
        font-size: 0.5em; /* Make subtitle font size much smaller */
    }

    .mod-image img {
        width: 60px; /* Make mod item pictures smaller */
        height: 60px; /* Maintain aspect ratio */
    }

    body {
        line-height: 1.3; /* Further reduce line spacing for very small screens */
    }
}