/* ===== GLOBAL STYLES ===== */
/* Base styles for the entire page */
body {
    background-color: #181a1b; /* Dark background */
    color: #f1f1f1;             /* Light gray text */
    font-family: 'Roboto', sans-serif;
}

/* ===== LAYOUT COMPONENTS ===== */
/* Styles for major layout sections like the header and content boxes */
header {
    background-color: #212425;
    border-bottom: 1px solid #333;
}

.content-box {
    background-color: #212425;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #333;
    margin-bottom: 20px;
}

/* ===== TYPOGRAPHY ===== */
/* Styles for specific text elements */
.welcome-message {
    padding-left: 2ch; /* Indents all lines by 2 character widths */
}
.join-instructions {
    padding-left: 2ch;
}

#staff-list-container p {
    margin-bottom: 8px;
    font-size: 1.1em;
}

#staff-list-container strong {
    color: #8e92c0; /* Accent color for staff names */
}

/* Remove the default underline from staff links */
#staff-list-container a {
    text-decoration: none;
    color: inherit; /* This makes the link inherit the color of its parent */
    transition: color 0.2s ease-in-out; /* Optional: adds a smooth color transition */
}

/* Add an underline ONLY when the mouse is hovering over the link */
#staff-list-container a:hover {
    text-decoration: underline;
    color: #ffffff; /* Optional: makes the link brighter on hover */
}

/* ===== BUTTONS ===== */
/* All button styles are grouped together for easy management */

/* --- Custom Primary Button (e.g., Copy IP) --- */
.btn-primary-custom {
    background-color: #515ddd;
    color: #ffffff;
    border: 1px solid #5c6083;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out;
}

.btn-primary-custom:hover {
    background-color: #5c6083;
    color: #ffffff;
    border: 1px solid #515ddd;
}

/* --- Generic Social Button --- */
.btn-social {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 15px;
    transition: background-color 0.2s ease-in-out;
}

/* --- Specific Social Buttons --- */
.btn-social.tiktok-btn {
    background-color: #000000;
    border: 1px solid #ffffff;
}

.btn-social.tiktok-btn:hover {
    background-color: #5c6083;
    color: #ffffff;
    border: 1px solid #515ddd;
}

.btn-social.discord-btn {
    background-color: #515ddd;
    border: 1px solid #5c6083;
}

.btn-social.discord-btn:hover {
    background-color: #5c6083;
    border: 1px solid #515ddd;
}

/* ===== ICON STYLING ===== */
/* A helper for icons inside buttons */
.btn-social .fab,
.btn-social .fas {
    margin-right: 8px; /* Adds space between the icon and the text */
}

.dh-settings-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin: 0 4px;
}