/* static/css/style.css */
html, body {
    height: 100%; /* Ensure html and body take full viewport height */
}

body {
    font-family: 'Inter', sans-serif;
    /* Default light mode background and text */
    background-color: #f8fafc; /* Lighter background for light mode (slate-50) */
    color: #1e293b; /* Darker text for light mode (slate-800) */
    transition: background-color 0.4s ease, color 0.4s ease; /* Smooth theme transition */

    /* Flexbox for sticky footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes at least full viewport height */
}

/* Dark Mode Styles */
.dark body {
    background-color: #0d111c; /* Slightly darker than current for more depth */
    color: #e2e8f0; /* Lighter text for dark mode (slate-200) */
}

/* Main content area should grow to push footer down */
main {
    flex-grow: 1; /* Allows main content to take up available space */
    padding-top: 4rem; /* Keep existing padding for sticky header */
}


#header {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.9); /* Slightly more opaque for better readability */
    backdrop-filter: blur(12px); /* Increased blur for smoother effect */
    -webkit-backdrop-filter: blur(12px);
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* More pronounced shadow */
    border-bottom: 1px solid #e2e8f0; /* Lighter border for light mode */
}
.dark #header {
    background-color: rgba(15, 23, 42, 0.9);
    border-bottom-color: #3f4e6e; /* Darker, more distinct border for dark mode */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Darker shadow for dark mode */
}

/* Navigation Links */
.nav-link {
    transition: all 0.3s ease-in-out; /* Smoother transition */
    cursor: pointer;
    padding-bottom: 0.35rem; /* Slightly more padding */
    border-bottom-width: 3px;
    border-bottom-color: transparent;
    color: #64748b; /* slate-500 for light mode */
    font-weight: 500; /* Medium weight for general links */
}

.dark .nav-link {
    color: #94a3b8; /* slate-400 for dark mode */
}

.nav-link.active {
    color: #4f46e5; /* indigo-600 for light mode */
    border-bottom-color: #4f46e5 !important; /* Added !important */
    font-weight: 600;
}

.dark .nav-link.active {
    color: #818cf8; /* indigo-400 for dark mode */
    border-bottom-color: #818cf8 !important; /* Added !important */
}

/* MODIFIED: Hover effect for nav-links, excluding 'Events' */
/* This rule applies to all non-active nav-links. */
.nav-link:not(.active):hover {
    color: #3730a3; /* indigo-700 for light mode */
    border-bottom-color: #6366f1; /* indigo-500 for light mode */
}

.dark .nav-link:not(.active):hover {
    color: #cbd5e1; /* slate-300 for dark mode */
    border-bottom-color: #4f46e5; /* indigo-600 for dark mode */
}

/* NEW: Specific rule to override border-bottom on hover for the Events link */
/* This targets any nav-link whose href attribute contains "/events" */
.nav-link[href="/events"]:hover + .nav-link.active[href="/roles"] {
  border-bottom-color: transparent !important;
}



/* Hero Banner */
.hero-banner-container {
    background-color: #e0e7ff; /* indigo-100 for light mode */
    border-radius: 0.75rem;
    overflow: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}
.dark .hero-banner-container {
     background-color: #1e293b; /* slate-800 */
     box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2), 0 10px 10px -5px rgba(0,0,0,0.1);
}
.hero-banner {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}

/* Feature and Info Cards */
.feature-card, .info-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease; /* Smoother transitions */
    background-color: #ffffff; 
    border: 1px solid #e5e7eb; 
    color: #374151; 
    border-radius: 0.75rem; /* Consistent rounded corners */
}
.dark .feature-card, .dark .info-card {
    background-color: #1e293b; 
    border-color: #334155; 
    color: #cbd5e1; 
}
.info-card p, .feature-card p {
    color: #4b5563; 
}
.dark .info-card p, .dark .feature-card p {
    color: #9ca3af; 
}
.info-card h3, .feature-card h3 {
    color: #111827; 
}
.dark .info-card h3, .dark .feature-card h3 {
    color: #f1f5f9; 
}
/* Enhanced hover effect for info cards */
.info-card-clickable:hover {
    transform: translateY(-8px) scale(1.02); /* More noticeable lift */
    box-shadow: 0 15px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -5px rgba(0,0,0,0.06); /* Stronger shadow on hover */
}
.dark .info-card-clickable:hover {
    box-shadow: 0 15px 25px -5px rgba(0,0,0,0.35), 0 8px 10px -5px rgba(0,0,0,0.2); /* Darker shadow on hover */
}


/* Philosophy Details Section Styling */
.philosophy-details-section {
    max-width: 60rem; /* Constrain width for readability */
    margin-left: auto;
    margin-right: auto;
    transition: all 0.5s ease-in-out; /* Smooth transition for all properties */
    transform-origin: center top; /* Scale from top-center */
}


/* Category Buttons (Tour & Roles) */
.tour-category-btn, .role-category-btn {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.1s ease-in-out;
    border-radius: 0.5rem; /* Consistent rounded-lg */
    padding: 0.75rem 1rem; /* Consistent py-3 px-4 */
    text-align: left; /* Align text to left */
    display: flex; /* For icon alignment if added */
    align-items: center; /* For icon alignment if added */
    font-weight: 500; /* Medium font weight */
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* Subtle shadow */
}

/* Light Mode Inactive */
.tour-category-btn:not(.active-category), .role-category-btn:not(.active-category) {
    background-color: #f3f4f6; /* slate-100 */
    color: #374151; /* slate-700 */
    border: 1px solid #e5e7eb; /* gray-200 */
}
.tour-category-btn:not(.active-category):hover, .role-category-btn:not(.active-category):hover {
    background-color: #e5e7eb; /* gray-200 */
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Dark Mode Inactive (Matching main.html and desired screenshot) */
.dark .tour-category-btn:not(.active-category), .dark .role-category-btn:not(.active-category) { 
    background-color: #1e293b; /* slate-800 - Darker background */
    color: #94a3b8; /* slate-400 - Lighter text */
    border: 1px solid #334155; /* slate-700 - Subtle border */
}
.dark .tour-category-btn:not(.active-category):hover, .dark .role-category-btn:not(.active-category):hover { 
    background-color: #334155; /* slate-700 - Darker hover */
    color: #e2e8f0; /* slate-200 */
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Active Category (Light Mode) */
.tour-category-btn.active-category, .role-category-btn.active-category { 
    background-color: #4f46e5 !important; /* indigo-600 */
    color: white !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

/* Active Category (Dark Mode - Matching main.html and desired screenshot) */
.dark .tour-category-btn.active-category, .dark .role-category-btn.active-category { 
    background-color: #6366f1 !important; /* indigo-500 - More vibrant */
    color: white !important;
    border-color: #6366f1 !important; /* Match background */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2), 0 2px 4px -1px rgba(0,0,0,0.1);
}


/* Server Tour Page Specifics */
.dark #tour-categories-container { /* Container for the left sidebar buttons */
    background-color: #161e2d; /* A slightly darker background for the container */
    padding: 1rem;
    border-radius: 0.5rem;
}

#tour-categories-container ul > li + li, 
.dark #tour-categories-container ul > li + li { 
    margin-top: 3px !important; /* Keep a small gap between buttons */
}

/* Specific padding for tour buttons if they need to be slightly smaller than general category buttons */
#tour-categories-container .tour-category-btn,
.dark #tour-categories-container .tour-category-btn {
    padding-top: 0.6rem;    /* Slightly reduced padding for a more compact list */
    padding-bottom: 0.6rem; 
}


.tour-content-area { 
    background-color: #ffffff; 
    color: #1f2937; 
    padding: 1.5rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); 
}
.dark .tour-content-area {
    background-color: #1e293b; 
    color: #cbd5e1; 
}
.dark .tour-content-area #tour-content-title { 
    color: #e2e8f0; 
    font-weight: 600;
}
.dark .tour-content-area #tour-content-desc { 
    color: #b0bac9; 
}
.dark .tour-content-area #tour-content-list li { 
    background-color: #161e2d; 
    color: #d1d5db; 
    border: 1px solid #334155; 
    padding: 0.75rem 1rem; 
    border-radius: 0.375rem; 
    margin-bottom: 0.5rem; 
}
.dark .tour-content-area #tour-content-list li:hover {
    background-color: #334155; 
    border-color: #4b5563; 
}

/* Roles Page Specifics */
.roles-main-content { 
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
.dark .roles-main-content {
    background-color: #1e293b; 
}
.dark .roles-main-content #role-content-title { 
     color: #e2e8f0; 
     font-weight: 600;
}
.dark .roles-main-content #role-content-desc { 
    color: #b0bac9; 
}

/* Footer */
footer {
    background-color: #1f2937; 
    color: #e5e7eb; 
    border-top: 1px solid #374151; 
}
.dark footer {
    background-color: #0f172a; 
    border-top-color: #334155; 
    color: #94a3b8; 
}

/* Section Titles & Subtitles */
.section-title {
    color: #111827; 
    font-size: 2.25rem; 
    font-weight: 800; 
}
.dark .section-title {
    color: #f1f5f9; 
}
.section-subtitle {
    color: #4b5563; 
    font-size: 1.125rem; 
    margin-top: 0.5rem;
}
.dark .section-subtitle {
    color: #94a3b8; 
}

/* Overrides for Tailwind's default dark mode classes if needed, or specific component styling */
.dark .bg-white { background-color: #1e293b !important; } /* Main content box for roles page */
.dark .page-section.bg-slate-50, .dark .bg-slate-50 {
    background-color: #0b0f19 !important;  /* Overall page background */
}
.dark .text-slate-800 { color: #e2e8f0 !important; }
.dark .text-slate-700 { color: #cbd5e1 !important; }
.dark .text-slate-600 { color: #94a3b8 !important; } 
.dark .text-slate-900 { color: #f8fafc !important; }
.dark .border-slate-200 { border-color: #334155 !important; }

.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.2), 0 2px 4px -1px rgba(0,0,0,0.12); }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.2), 0 4px 6px -2px rgba(0,0,0,0.1); } 

.dark .text-indigo-600 { color: #a5b4fc !important; }
.dark .text-indigo-700 { color: #818cf8 !important; } 
.dark .text-teal-500 { color: #5eead4 !important; }
.dark .text-amber-500 { color: #fcd34d !important; }
.dark .text-rose-500 { color: #fda4af !important; }
.dark .text-violet-500 { color: #c4b5fd !important; }
.dark .text-lime-500 { color: #a3e635 !important; }

.dark .bg-indigo-500 { background-color: #6366f1 !important; }
.dark .bg-indigo-600 { background-color: #4f46e5 !important; }
.dark .hover\:bg-indigo-700:hover { background-color: #4338ca !important; }
.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }

.dark .text-teal-700 { color: #5eead4 !important; }
.dark .bg-teal-100 { background-color: rgba(20, 184, 166, 0.2) !important; }

/* Custom Select Styling */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
.custom-select { 
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f9fafb; 
    border: 1px solid #d1d5db; 
    color: #1f2937; 
    padding: 0.625rem 2rem 0.625rem 0.75rem; 
    border-radius: 0.375rem; 
    font-size: 0.875rem; 
    font-weight: 500; 
    width: 100%;
}
.dark .custom-select {
    background-color: #374151; 
    border-color: #4b5563; 
    color: #f3f4f6; 
}
.custom-select:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #4f46e5; 
    box-shadow: 0 0 0 2px #a5b4fc; 
}
.dark .custom-select:focus {
    border-color: #818cf8; 
    box-shadow: 0 0 0 2px #6366f1; 
}
.custom-select option {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; 
    color: #1f2937; 
}
.dark .custom-select option {
    background-color: #1e293b; 
    color: #e2e8f0; 
}
.custom-select-wrapper::after { 
    content: '▼';
    font-size: 0.8em;
    position: absolute;
    top: 50%;
    right: 0.75rem; 
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7280; 
}
.dark .custom-select-wrapper::after {
    color: #9ca3af; 
}

/* Discord Login Button Style */
.discord-login-btn {
    background-color: #5865F2; 
    color: white;
    transition: background-color 0.2s ease-in-out;
    padding: 0.5rem 1rem; 
    border-radius: 0.5rem; 
    font-weight: 600; 
    font-size: 0.875rem; 
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); 
}
.discord-login-btn:hover {
    background-color: #4752C4; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
}

/* Role Badge Style (original, used in profile and for simple role lists in roles.html) */
.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.4em 0.8em; 
    font-size: 0.85em; 
    border-radius: 0.25rem; 
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border-width: 1px; 
    border-style: solid;
    font-weight: 500;
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    background-color: #e5e7eb; 
    color: #374151; 
    border-color: #d1d5db; 
}
.role-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.dark .role-badge {
    background-color: #2d3748; 
    color: #e2e8f0; 
    border-color: #4a5568; 
}

.role-color-dot { 
    width: 0.75em; 
    height: 0.75em;
    border-radius: 50%;
    margin-right: 0.4em;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.05); 
}
.dark .role-color-dot {
    border: 1px solid rgba(255,255,255,0.1); 
}

.role-icon-img { 
    width: 1.1em; 
    height: 1.1em;
    vertical-align: middle;
    border-radius: 3px;
    margin-right: 0.4em;
}
.role-unicode-emoji { 
    margin-right: 0.4em;
    vertical-align: middle;
    font-size: 1em; 
}

/* Permission Badge Style (Profile Page) */
.permission-badge {
    background-color: #e0e7ff; 
    color: #4338ca; 
    padding: 0.25em 0.75em;
    border-radius: 0.375rem; 
    font-size: 0.8em;
    font-weight: 500;
    margin-right: 0.375rem;
    margin-bottom: 0.375rem;
    display: inline-block;
}
.dark .permission-badge {
    background-color: #3730a3; 
    color: #c7d2fe; 
}

/* Theme Toggle Button */
.theme-toggle-button {
    background-color: transparent;
    border: none;
    color: #6b7280; 
    padding: 0.5rem;
    border-radius: 0.375rem; 
    cursor: pointer;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.dark .theme-toggle-button {
    color: #9ca3af; 
}
.theme-toggle-button:hover {
    background-color: rgba(0,0,0,0.05);
}
.dark .theme-toggle-button:hover {
    background-color: rgba(255,255,255,0.1);
}
.theme-toggle-button svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Event Card Styles */
.event-display-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}
.dark .event-display-card {
    background-color: #1e293b; 
    border: 1px solid #334155; 
}
.event-display-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.dark .event-display-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -2px rgba(0,0,0,0.15);
}
.event-banner-img {
    width: 100%;
    height: 200px;
    object-fit: fill;
    background-color: #f3f4f6;
}
.dark .event-banner-img {
    background-color: #374151;
}
.event-card-content {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.event-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #111827; 
}
.dark .event-card-title {
    color: #f1f5f9; 
}
.event-card-concept {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #4b5563; 
    flex-grow: 1;
}
.dark .event-card-concept {
    color: #9ca3af; 
}

/* Styles for Roles Page - Subcategories and Role Item Containers (Covers) */
.role-subcategory-wrapper { 
    background-color: #f9fafb; 
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb; 
}
.dark .role-subcategory-wrapper {
    background-color: #161e2d; 
    border-color: #334155; 
}
.role-subcategory-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 0.75rem; 
    color: #4f46e5; 
}
.dark .role-subcategory-title {
    color: #a5b4fc; 
}
.role-subcategory-description {
    font-size: 0.875rem;
    color: #4b5563; 
    margin-bottom: 1rem; 
    font-style: italic;
}
.dark .role-subcategory-description {
    color: #9ca3af; 
}

/* Role Item Container (Cover Style) */
.role-item-container {
    padding: 0.75rem 1rem; /* Adjusted padding for a cover look */
    border-radius: 0.5rem; /* Rounded corners for the cover */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
    /* background-color is set inline by Jinja */
}
.role-item-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.dark .role-item-container {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}
.dark .role-item-container:hover {
     box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
}

/* Default background for role items if no specific color is applied */
.role-item-container.no-role-color {
    background-color: #f3f4f6; /* Light mode default (slate-100) */
}
.dark .role-item-container.no-role-color {
    background-color: #374151; /* Dark mode default (slate-700) */
}
/* Text color for items with .no-role-color (default background) */
.role-item-container.no-role-color .role-cover-name {
    color: #1f2937; /* slate-800 */
}
.dark .role-item-container.no-role-color .role-cover-name {
    color: #f3f4f6; /* slate-100 */
}
.role-item-container.no-role-color .role-description-text {
    color: #4b5563; /* slate-600 */
}
.dark .role-item-container.no-role-color .role-description-text {
    color: #d1d5db; /* slate-300 */
}


.role-info-flex {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem; /* Reduced margin for tighter layout */
}

.role-cover-icon {
    width: 22px; 
    height: 22px;
    border-radius: 4px;
    margin-right: 8px; 
    object-fit: cover;
    flex-shrink: 0;
}
.role-cover-unicode-emoji {
    font-size: 18px; 
    margin-right: 8px; 
    line-height: 1;
    flex-shrink: 0;
}
.role-cover-icon-placeholder { 
    width: 22px; 
    height: 22px; 
    margin-right: 8px; 
    flex-shrink: 0;
    display: inline-block; 
}

.role-cover-name {
    font-weight: 600;
    font-size: 0.95rem; 
    line-height: 1.3;
    /* Text color set by contrast classes or .no-role-color defaults */
}

.role-item-container .role-description-text {
    font-size: 0.8rem; /* Slightly smaller description */
    line-height: 1.4;
    /* margin-left is applied inline by Jinja if icon/emoji is present */
    /* Text color set by contrast classes or .no-role-color defaults */
}

/* Text color classes for CONTRAST against COLORED backgrounds (applied by Jinja) */
.text-on-dark-bg { 
    color: #ffffff !important; 
}
.text-on-dark-bg-muted { 
    color: #e2e8f0 !important; /* slate-200 */
}
.text-on-light-bg { 
    color: #1a202c !important; /* gray-900 */
}
.text-on-light-bg-muted { 
    color: #374151 !important; /* slate-700 */
}


/* General container for main content */
.main-content-container {
    max-width: 80rem; 
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; 
    padding-right: 1rem; 
}
@media (min-width: 640px) { 
    .main-content-container {
        padding-left: 1.5rem; 
        padding-right: 1.5rem; 
    }
}
@media (min-width: 1024px) { 
    .main-content-container {
        padding-left: 2rem; 
        padding-right: 2rem; 
    }
}

/* Sticky Header */
#header {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 50;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #e5e7eb;
}
.dark #header {
    background-color: rgba(15, 23, 42, 0.8);
    border-bottom-color: #334155;
}

/* Profile Page Specifics */
#profile-content {
    background-color: #ffffff;
    padding: 1.5rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); 
    max-width: 48rem; 
    margin-left: auto;
    margin-right: auto;
}
.dark #profile-content {
    background-color: #1e293b; 
}
#profile-content .profile-avatar {
    height: 6rem; 
    width: 6rem; 
    border-radius: 9999px; 
    margin-bottom: 1rem; 
    border-width: 4px;
    border-color: #6366f1; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -1px rgba(0,0,0,0.05); 
}
.dark #profile-content .profile-avatar {
    border-color: #818cf8; 
}
@media (min-width: 768px) { 
    #profile-content .profile-avatar {
        height: 8rem; 
        width: 8rem; 
    }
}
#profile-content .profile-guild-info-box {
    margin-top: 1rem; 
    padding: 1rem; 
    background-color: #f9fafb; 
    border-radius: 0.5rem; 
}
.dark #profile-content .profile-guild-info-box {
    background-color: #374151; 
    color: #e2e8f0; 
}
.dark #profile-content .profile-guild-info-box h4,
.dark #profile-content .profile-guild-info-box h5,
.dark #profile-content .profile-guild-info-box p {
    color: #e2e8f0; 
}
.dark #profile-content .profile-guild-info-box .text-indigo-600 { 
    color: #a5b4fc !important; 
}


#profile-content .profile-guild-icon {
    height: 3rem; 
    width: 3rem; 
    border-radius: 0.375rem; 
    margin-right: 0.75rem; 
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); 
}

/* Logout Button */
.logout-button {
    background-color: #ef4444; 
    color: white;
    font-weight: 600; 
    padding: 0.75rem 1.5rem; 
    border-radius: 0.5rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); 
    transition: all 0.2s ease-in-out;
}
.logout-button:hover {
    background-color: #dc2626; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); 
}

/* General page padding */
.page-section {
    padding-top: 3rem; 
    padding-bottom: 3rem; 
}
.page-section-tight {
    padding-top: 2rem; 
    padding-bottom: 2rem; 
}

/* Ensure main has some top padding if header is sticky and not transparent initially */
main {
    padding-top: 4rem; 
}

/* Utility for visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
#header a.flex-shrink-0 img.logo-light-theme {
  display: inline-block !important; /* Ensure it's visible */
}

#header a.flex-shrink-0 img.logo-dark-theme {
  display: none !important; /* Ensure it's hidden */
}

/* When Dark Mode is active (html tag has 'dark' class):
   - Hide the logo intended for the light theme.
   - Show the logo intended for the dark theme. */
html.dark #header a.flex-shrink-0 img.logo-light-theme {
  display: none !important; /* Ensure it's hidden */
}

html.dark #header a.flex-shrink-0 img.logo-dark-theme {
  display: inline-block !important; /* Ensure it's visible */
}

/* Stat Card Styles */
.stat-card {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    min-width: 120px;
    box-shadow: 0 8px 24px rgba(99,102,241,0.15);
    margin: 1rem 0;
    transition: transform 0.2s cubic-bezier(.4,2,.6,1), box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stat-card:hover {
    transform: translateY(-6px) scale(1.04) rotate(-1deg);
    box-shadow: 0 16px 32px rgba(99,102,241,0.25);
}
.stat-title {
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 0.5rem;
    letter-spacing: 0.03em;
}
.stat-value {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Enhanced Button Animations */
a, button, .discord-login-btn, .role-category-btn, .tour-category-btn, .feature-card, .info-card {
    transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s, background 0.18s, color 0.18s;
}
a:hover, button:hover, .discord-login-btn:hover, .role-category-btn:hover, .tour-category-btn:hover, .feature-card:hover, .info-card:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 18px rgba(99,102,241,0.10);
}