/* ====== Global Styles for SkarCraft ====== */

/* Base Styles */
html,
body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: url('https://assets.skarcraft.org/images/pagebg.png') no-repeat center center fixed;
    background-size: cover;

}

.container-fluid {
    flex: 1;
    /* Expands to fill remaining space */
}

* {
    font-family: Verdana, sans-serif;
    font-size: 10pt;
    color: #f1f1f1;
    /* Updated from gray to light gray/white */
}

b {
    font-weight: bold;
}

.highlight {
    margin-left: 8px;
    /* Adjust as needed */
}

.card.custom-card {
    background: rgba(87, 86, 86, 0.8);
    /* Adjust transparency as needed */
}

table {
    height: 50%;
    border: 1px solid gray;
}

td {
    text-align: center;
    padding: 25px;
}

/* ====== Logo Styles ====== */

.logo-container,
.home-logo-container,
.nav-logo-container,
.nav-home-logo-container {
    display: flex;
    /* Center the logo container both horizontally and vertically */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    background-color: rgba(149, 162, 167, 0.5);
    /* Background for the box */
    border-radius: 10px;
    /* Optional: rounded corners */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* Optional: shadow for depth */
    margin: 0 auto;
}

.logo-container img,
.nav-logo-container img {
    width: 100%;
    /* Maintain aspect ratio */
    height: 100%;
    display: block;
    /* Removes bottom space/gap under the image */
    max-width: 300px;
    /* Max width of logo container */
    max-height: 300px;
    /* Max height of logo container */
}

.logo,
.nav-logo {
    display: block;
}

/* ===== General Navbar Styling ===== */

/* Limit image and link size */
.navbar img,
.navbar a {
    max-height: 50px;
}

/* Standard navbar link styling */
.navbar a.nav-link,
.navbar .dropdown-item {
    color: white !important;
    text-decoration: none;
    transition: font-weight 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

/* Bold AND Underline the active page link */
.navbar .nav-item .nav-link.active,
.navbar .nav-item .nav-link[aria-current="page"],
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* Bold links on hover (without underline) */
.navbar a.nav-link:hover,
.navbar .dropdown-item:hover {
    font-weight: bold;
    text-decoration: none;
}

/* Dropdown menu styles */
.navbar .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.8);
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Dropdown item styling */
.navbar .dropdown-item {
    color: #f1f1f1;
}

/* Hover effect for dropdown items */
.navbar .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Dropdown toggle text and caret color */
.navbar .dropdown-toggle,
.navbar .dropdown-toggle::after {
    color: #f1f1f1;
}
/* ====== Server Pages Styles ====== */

/* Server Wrapper */
.server-wrapper {
    display: flex;
    justify-content: space-between;
    /* Space content and sidebar */
    align-items: flex-start;
    min-height: 100vh;
    /* Full viewport height */
}

/* Server Reading Section */
.server-reading-section {
    display: flex;
    flex-direction: column;
    /* Stack elements vertically */
    background-color: transparent;
    /* No background */
    justify-content: center;
    /* Vertically center */
    align-items: center;
    /* Horizontally center */
    height: auto;
    /* Auto height based on content */
    border-radius: 20px;
    /* Optional rounded corners */
    margin-bottom: 20px;
    /* Space below section */
    flex-grow: 1;
    /* Take remaining space */
}

/* Server Text Container */
.server-text-container {
    display: flex;
    text-align: left;
    align-items: center;
    background-color: transparent;
    /* No background */
    border-radius: 20px;
    /* Optional rounded corners */
    padding: 15px;
    /* Padding inside container */
}

/* Server Status Section */
.server-status {
    background-color: rgba(0, 0, 0, 0.7);
    color: #f1f1f1;
    padding: 20px;
    border-radius: 20px;
    /* Optional rounded corners */
    margin: 20px auto;
    max-width: 800px;
    /* Wider max-width */
    width: 100%;
    /* Full width up to max-width */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.server-status h3 {
    color: #ffffff;
    font-size: 18pt;
}

.server-status p {
    margin: 10px 0;
    font-size: 12pt;
}

/* Green and Red Dots for Server Status */
.green-dot,
.red-dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.green-dot {
    background-color: #28a745;
}

.red-dot {
    background-color: #dc3545;
}

/* Server Details Flex Container */
.server-details {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 20px;
}

/* Join Message Styling */
.join-message {
    flex: 1;
    text-align: right;
    padding-right: 20px;
}

.join-message p {
    margin: 0;
}

/* Server Version Styling */
.server-version {
    flex: 1;
    text-align: left;
    padding-left: 20px;
}

.server-version p {
    margin: 0;
}

/* Vertical Divider Styling */
.vertical-divider {
    width: 2px;
    /* Thickness of the line */
    background-color: #f1f1f1;
    /* Adjust color as needed */
    height: auto;
    /* Stretch to match content */
    margin: 0;
}

/* Server Sidebar */
.server-sidebar {
    background-color: rgba(0, 0, 0, 0.7);
    color: #f1f1f1;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    width: 100%;
    /* Full width on smaller screens */
    flex-shrink: 0;
    /* Prevent shrinking */
}

.server-sidebar h3,
.server-sidebar h4 {
    color: #ffffff;
    margin-bottom: 15px;
}

.server-sidebar ol {
    padding-left: 20px;
}

.server-sidebar ol li {
    margin-bottom: 10px;
}

/* Server Download Button */
.server-download-button {
    display: block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 20px;
}

.server-download-button:hover {
    background-color: #45a049;
}

/* Server Accordion Styles */
.server-accordion-button {
    background-color: rgba(87, 86, 86, 0.8);
    /* Match card background */
    color: #f1f1f1;
    /* Light text */
    border: none;
    /* Remove border */
    font-size: 16px;
    /* Adjust font size */
    padding: 10px;
    border-radius: 10px;
    /* Rounded corners */
}

.server-accordion-button:focus {
    box-shadow: none;
    /* Remove focus shadow */
}

.server-accordion-button:not(.collapsed) {
    background-color: rgba(87, 86, 86, 0.9);
    /* Darker when expanded */
    color: #fff;
    /* Brighter text when active */
}

.server-accordion-button:hover {
    background-color: rgba(149, 162, 167, 0.8);
    /* Hover effect */
    color: #ffffff;
}

.server-accordion-body {
    background-color: rgba(0, 0, 0, 0.5);
    /* Transparent dark background */
    color: #f1f1f1;
    /* Light text */
    border-radius: 10px;
    padding: 15px;
    font-size: 14px;
}

.server-accordion-item {
    border: none;
    /* Remove item border */
    margin-bottom: 10px;
    /* Spacing between items */
}

.server-accordion-header {
    padding: 0;
}

.server-accordion-item h4 {
    margin: 0;
}

.server-accordion-body ul,
.server-accordion-body ol {
    padding-left: 20px;
    margin-bottom: 0;
}

.server-accordion-body ul li,
.server-accordion-body ol li {
    padding: 5px 0;
}

/* ====== Projects Page Styles ====== */

.project {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.project h2 {
    color: #333;
    font-weight: bold;
}

.project p {
    color: #666;
}

iframe {
    width: 100%;
    height: 400px;
    border: none;
}

/* ====== Footer Styles ====== */

.footer {
    margin-top: auto;
    /* Push footer to bottom */
    width: 100%;
    text-align: center;
}

.footer-container {
    background-color: #2e2e2e;
    padding: 10px 0;
    text-align: center;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.footer-list li {
    margin: 0 15px;
}

.footer-list a {
    color: #bfbfbf;
    text-decoration: none;
    font-size: 14px;
}

.footer-list a:hover {
    color: #ffffff;
}

/* ====== Responsive Adjustments ====== */

/* Adjustments for devices with width up to 992px */
@media (max-width: 992px) {

    .logo-container,
    .nav-logo-container,
    .nav-home-logo-container {
        margin: 0 auto;
        text-align: center;
    }

    .reading-section {
        margin: 10px 20px;
    }

    .col-md-8 {
        width: 100%;
    }

    .col-md-2 {
        display: none;
    }
}

/* Adjustments for devices with width up to 768px */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 10px;
    }

    .server-wrapper {
        flex-direction: column;
        /* Stack items vertically */
    }

    .server-reading-section,
    .server-status,
    .server-sidebar {
        width: 100%;
        /* Full width on mobile */
        margin-bottom: 20px;
        /* Spacing */
    }

    .footer {
        margin-top: 20px;
        /* Space above footer */
    }
}

/* Adjustments for devices with width up to 767px */
@media (max-width: 767px) {
    .server-details {
        flex-direction: column;
        align-items: center;
    }

    .join-message,
    .server-version {
        text-align: center;
        padding: 10px 0;
    }

    .vertical-divider {
        display: none;
    }
}