/* =========================================
   GLOBAL RESET & BACKGROUND
   ========================================= */
body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    /* Prevents accidental horizontal scrolling */
    font-family: sans-serif;

    background-color: #040d1a;
    background-image: url('products/background.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* Keeps the background locked in place when scrolling */
}

/* =========================================
   MAIN LAYOUT WRAPPER
   ========================================= */
.content-wrapper {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    padding-top: 180px;
    /* Pushes content down below the top of the background image */
}

.content-wrapper h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    /* Neon cyan glow */
}

.content-wrapper h2 {
    clear: both;
    margin-top: 40px;
}

/* Global Paragraph Styling */
.content-wrapper p {
    font-size: 1.1rem;
    color: azure;
    text-align: center;
    font-style: italic;
    margin: 15px 0;
    /* Creates clean vertical spacing between paragraphs */
}

/* Standard Images and Videos */
.content-wrapper img,
.content-wrapper video {
    display: block;
    width: min(100%, 420px);
    /* Responsive sizing: 100% width up to 420px maximum */
    height: auto;
    margin: 24px auto;
    /* Centers the media horizontally */
}

.content-wrapper video {
    aspect-ratio: 16 / 9;
    background: #000;
}

/* =========================================
   NAVIGATION BAR
   ========================================= */
nav.site-nav {
    box-sizing: border-box;
    display: flex;
    /* Modern flex layout to align items in a row */
    flex-wrap: wrap;
    /* Allows links to stack safely on mobile screens */
    justify-content: space-between;
    align-items: center;
    width: 800px;
    /* Wide enough to fit the large font size */
    max-width: 95%;
    /* Prevents the box from touching screen edges on mobile */
    min-height: 74px;
    margin: 0 auto 25px auto;
    /* Centers the nav bar on the page */
    padding: 25px;
    gap: 12px;
    box-shadow: 0 0 12px darkred;
    background-color: rgba(4, 13, 26, 0.85);
    /* Adds a dark background to make text readable */
    border-radius: 8px;
    /* Softens the sharp corners */
}

/* Navigation Links */
nav.site-nav a,
nav.site-nav a:visited {
    flex: 1;
    /* Forces all 4 links to take up exactly equal space */
    text-align: center;
    /* Centers the text perfectly inside its equal-sized box */
    white-space: nowrap;
    font-size: 1.75rem !important;
    /* Locks the size perfectly across all pages */
    color: azure !important;
    /* Overrides browser defaults for clicked links */
    text-decoration: none;
    font-style: italic;
    font-family: sans-serif;
}

nav.site-nav a:hover,
nav.site-nav a:focus-visible {
    color: yellow !important;
    /* Visual feedback when hovering over a link */
}

nav.site-nav a:active {
    color: azure !important;
}

/* =========================================
   CONTENT BOXES (ABOUT ME & WELCOME PAGE)
   ========================================= */
/* Grouping text inside these dark cards stops the background art from hiding your text */
.about-me,
.question-section {
    box-sizing: border-box;
    max-width: 800px;
    margin: 0 auto 40px auto;
    /* Centers the content box */
    padding: 30px;
    background-color: rgba(4, 13, 26, 0.85);
    /* Semi-transparent dark blue */
    box-shadow: 0 0 12px darkred;
    /* Applies the red glow to the whole container, not just text lines */
    border-radius: 8px;
    color: azure;
}

/* Bulleted Lists inside the Content Boxes */
ul.about-me,
.question-list {
    box-sizing: border-box;
    width: fit-content;
    /* Shrinks the box to exactly fit the longest line of text */
    margin: 20px auto;
    /* Centers the list block inside the dark card */
    padding: 0;
    text-align: left;
    /* Keeps the text reading naturally left-to-right */
    list-style-position: inside;
    /* Keeps the bullet dots neatly aligned */
}

ul.about-me li,
.question-list li {
    font-size: 1.1rem;
    color: azure;
    font-style: italic;
    margin-bottom: 10px;
}

/* =========================================
   MERCHANDISE & SERVICES (PRODUCTS PAGE)
   ========================================= */
.content-wrapper .merch-list {
    padding: 0;
    list-style: none;
    max-width: 900px;
    margin: 0 auto;
}

/* The Individual Merchandise Cards */
.content-wrapper .merch-list li {
    display: flex;
    /* Flexbox completely replaces the buggy float layout */
    flex-wrap: wrap;
    align-items: center;
    /* Centers the text vertically next to the image */
    justify-content: center;
    gap: 30px;
    /* Puts exactly 30px of space between the image and text */
    margin-bottom: 40px;
    padding: 25px;
    background-color: rgba(4, 13, 26, 0.85);
    /* Dark card background */
    box-shadow: 0 0 12px darkred;
    border-radius: 8px;
}

.content-wrapper .merch-list img {
    width: min(100%, 400px);
    height: auto;
    border-radius: 4px;
    margin: 0;
    /* Overrides the global img margin so flexbox handles the spacing */
}

.content-wrapper .merch-list p {
    text-align: left;
    font-size: 1.25rem;
    max-width: 400px;
    margin: 0;
    /* Overrides global p margin */
}

/* Services Ordered List */
.content-wrapper ol {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 420px));
    justify-content: center;
    gap: 24px;
    width: min(100%, 1320px);
    margin: 0 auto 40px auto;
    padding: 0;
    text-align: left;
}

.content-wrapper ol li {
    font-size: 1.1rem;
    font-style: italic;
    color: azure;
}

/* =========================================
   STATS PAGE TABLES
   ========================================= */
/* Wrapper to stack the image and table cleanly on top of each other */
.game-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
    width: 100%;
}

.game-stats img {
    max-width: 800px;
    border-radius: 4px;
}

table {
    margin: 20px auto;
    /* Forces the table to the dead center of the page */
    border-collapse: collapse;
    /* Merges the double borders into a single thick line */
    width: fit-content;
}

table,
th,
td {
    color: azure;
    border: 6px solid gray;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    /* Cyan neon text glow */
    font-size: 1.25rem;
    padding: 10px 20px;
    /* Adds breathing room inside the table cells */
}

caption,
strong {
    color: azure;
    font-size: 1.25rem;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.information {
    color: azure;
    font-size: 1.25rem;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* =========================================
   FOOTER
   ========================================= */
footer {
    clear: both;
    /* Forces the footer to sit below absolutely everything else on the page */
    width: 100%;
    text-align: center;
    padding: 40px 20px;
    font-size: 1.1rem;
    font-style: italic;
    color: azure;
    position: relative;
    background-color: rgba(4, 13, 26, 0.9);
    /* Gives the footer a solid base at the bottom */
}
.table-title,
.table-title strong {
    color: red;
    text-shadow: 0 0 10px rgba(255, 87, 34, 0.5);
}
/* Forces paragraphs inside lists to stay left-aligned next to the bullet */
.question-list p,
ul.about-me p {
    text-align: left;
    display: inline; /* Stops the paragraph from acting like a block */
    margin: 0;
}