/* Custom CSS for IronQuest Sabai World */

/* General Body Styles */
body {
    background-color: #1A202C; /* Dark Blue */
    color: #F8F8F8; /* White */
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', sans-serif;
    color: #FFD700; /* Gold */
    margin-bottom: 1rem;
}

/* Links */
a {
    color: #FFD700; /* Gold */
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: #E0B900; /* Slightly darker gold */
}

/* Buttons */
.btn-primary {
    background-color: #FFD700; /* Gold */
    color: #1A202C; /* Dark Blue */
    padding: 0.75rem 2rem;
    border-radius: 9999px; /* Fully rounded */
    font-weight: 700;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-primary:hover {
    background-color: #E0B900; /* Slightly darker gold */
    transform: translateY(-2px);
    color: #ffffff;
}
.btn-primary:active {
    transform: translateY(0);
}

/* Section Padding */
section {
    padding: 4rem 0;
}

/* Custom styles for slider navigation */
.slider-nav-btn {
    background-color: rgba(255, 215, 0, 0.7); /* Semi-transparent gold */
    color: #1A202C;
    border-radius: 50%;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}
.slider-nav-btn:hover {
    background-color: #FFD700; /* Solid gold */
}

.slider-dot {
    background-color: rgba(255, 215, 0, 0.4); /* Semi-transparent gold */
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.slider-dot.active {
    background-color: #FFD700; /* Solid gold */
    transform: scale(1.2);
}

/* Text colors for specific elements */
.text-gold {
    color: #FFD700;
}
.text-white {
    color: #F8F8F8;
}
.text-dark-blue {
    color: #1A202C;
}

/* Footer specific styles */
.bg-footer-dark {
    background-color: #12161E; /* Even darker blue for footer */
    color: #9CA3AF; /* Lighter gray for footer text */
}
footer a {
    color: #9CA3AF;
}
footer a:hover {
    color: #F8F8F8;
}

/* Rating stars */
.star-icon {
    color: #FFD700; /* Gold for stars */
}
.star-icon.empty {
    color: #4A5568; /* Gray for empty stars */
}

/* Specific background for More Games section */
.bg-more-games {
    background-color: #2D3748; /* Slightly lighter dark blue */
}

/* Ensure images fit their containers */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #2D3748; /* Darker track */
}

::-webkit-scrollbar-thumb {
    background: #FFD700; /* Gold thumb */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #E0B900; /* Darker gold on hover */
}

/* Responsive adjustments for headings and text sizes */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 2rem;
    }
    h3 {
        font-size: 1.75rem;
    }
    .btn-primary {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* Tailwind colors used in HTML for context */
.bg-dark-blue { background-color: #1A202C; }
.bg-dark-blue-light { background-color: #2D3748; }
.bg-blue-900 { background-color: #1E3A8A; } /* A slightly different dark blue for contrast */

/* Heroicons are typically loaded via classes provided by their CDN. */
/* Example: <i class="heroicons-outline heroicons-play-circle"></i> */
/* The CSS from the CDN handles the icon display. No custom CSS needed for icon content. */
/* New styles for .rightsFieldUnit and its children */

/* Parent container for rights information */
.rightsFieldUnit {
    padding-top: 3rem;    /* Top padding for the section */
    padding-left: 2rem;   /* Left padding for the section */
    padding-right: 2rem;  /* Right padding for the section */
    margin-bottom: 2rem;  /* Bottom margin to separate from other sections */
    max-width: 1200px;    /* Max width to keep content readable */
    margin-left: auto;    /* Center the block */
    margin-right: auto;   /* Center the block */
}

/* Heading 1 styles within .rightsFieldUnit */
.rightsFieldUnit h1 {
    font-size: 2.25rem; /* Slightly smaller than typical h1, but still prominent */
    margin-top: 1.5rem;   /* Space above the heading */
    margin-bottom: 1rem;  /* Space below the heading */
    line-height: 1.2;     /* Tighter line height for headings */
    font-weight: 700;     /* Bold font weight */
}

/* Heading 2 styles within .rightsFieldUnit */
.rightsFieldUnit h2 {
    font-size: 1.75rem; /* Moderate size for sub-sections */
    margin-top: 1.25rem;  /* Space above the heading */
    margin-bottom: 0.8rem; /* Space below the heading */
    line-height: 1.3;     /* Standard line height */
    font-weight: 600;     /* Semi-bold font weight */
}

/* Heading 3 styles within .rightsFieldUnit */
.rightsFieldUnit h3 {
    font-size: 1.5rem;    /* Smaller heading for specific points */
    margin-top: 1rem;     /* Space above the heading */
    margin-bottom: 0.7rem; /* Space below the heading */
    line-height: 1.4;     /* Standard line height */
    font-weight: 500;     /* Medium font weight */
}

/* Heading 4 styles within .rightsFieldUnit */
.rightsFieldUnit h4 {
    font-size: 1.25rem;   /* Even smaller heading, for minor topics */
    margin-top: 0.9rem;   /* Space above the heading */
    margin-bottom: 0.6rem; /* Space below the heading */
    line-height: 1.5;     /* Slightly looser line height */
    font-weight: 500;     /* Medium font weight */
}

/* Heading 5 styles within .rightsFieldUnit */
.rightsFieldUnit h5 {
    font-size: 1.125rem;  /* Smallest heading, often used for captions or minor titles */
    margin-top: 0.8rem;   /* Space above the heading */
    margin-bottom: 0.5rem; /* Space below the heading */
    line-height: 1.6;     /* Standard line height for body text */
    font-weight: 400;     /* Normal font weight */
}

/* Paragraph styles within .rightsFieldUnit */
.rightsFieldUnit p {
    font-size: 1rem;      /* Base font size for paragraphs */
    margin-bottom: 1rem;  /* Space below each paragraph */
    line-height: 1.7;     /* Good line height for readability */
}

/* Unordered list styles within .rightsFieldUnit */
.rightsFieldUnit ul {
    list-style-type: disc; /* Default disc bullet for unordered lists */
    margin-top: 1rem;     /* Space above the list */
    margin-bottom: 1rem;  /* Space below the list */
    padding-left: 1.5rem; /* Indentation for list items */
}

/* List item styles within .rightsFieldUnit */
.rightsFieldUnit li {
    font-size: 1rem;      /* Font size for list items, consistent with paragraphs */
    margin-bottom: 0.5rem; /* Space between list items */
    line-height: 1.6;     /* Line height for list items */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .rightsFieldUnit {
        padding-top: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .rightsFieldUnit h1 {
        font-size: 2rem;
    }
    .rightsFieldUnit h2 {
        font-size: 1.5rem;
    }
    .rightsFieldUnit h3 {
        font-size: 1.25rem;
    }
    .rightsFieldUnit h4 {
        font-size: 1.1rem;
    }
    .rightsFieldUnit h5 {
        font-size: 1rem;
    }
    .rightsFieldUnit p,
    .rightsFieldUnit li {
        font-size: 0.95rem;
    }
    .rightsFieldUnit ul {
        padding-left: 1rem;
    }
}

.brand{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: clamp(32px, 5vw, 72px);
    font-weight: 800;
    color: #E0B900;

    img{
        margin: 0 !important;
        width: 90px;
        height: 90px;
        object-fit: contain;
    }
}

footer{
    .flex.justify-center.space-x-6.text-sm{
        flex-wrap: wrap;
        text-align: center;
    }
}

@media (max-width: 575px){
    #game-details{
        text-align: center;

        ul{
            text-align: start;
        }
    }
    #featured-game{
        text-align: center;
    }
}

header::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #12161ece;
}