/* Define design tokens using CSS variables */
:root {
    --primary-color: #3b2f2f;
    --font-size: 1rem;            /* Base font size */
    --line-height: 1.6;
    --gap-large: 80px;            /* Horizontal gap between columns */
    --padding-standard: 20px;  
    --container-max-width: 1300px;
    --divider-width: 2px;
    --divider-color: rgba(0, 0, 0, 0.2);
    --margin-small: 15px;
    --margin-xs: 10px;
    --margin-sm: 20px;
    --margin-lg: 60px;
    --mobile-padding: 15px;      /* New padding for mobile screens */
}

/* Apply mobile padding to the body */
body {
    margin: 0;
    padding: 0;
}

/* Homepage Layout (Default: Large/desktop) */
.homepage-container {
    max-width: var(--container-max-width);
    margin: 40px auto;
    padding: var(--padding-standard);
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap if they exceed container width */
    gap: var(--gap-large);
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}

/* Left column: Intro */
.homepage-intro {
    flex: 1;
    max-width: 55%;
    text-align: left;
}

/* Right column: Game settings */
.homepage-settings {
    flex: 1;
    max-width: 45%;
    text-align: left;
}

/* Vertical divider for desktop */
.homepage-container::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: var(--divider-width);
    background: var(--divider-color);
    transform: translateX(-50%);
    margin-left: 25px;
    margin-right: 25px;
}

/* Headings & Text */
.homepage-container h2 {
    color: var(--primary-color);
    margin-bottom: var(--margin-small);
}

.homepage-container p {
    font-size: var(--font-size);
    line-height: var(--line-height);
    text-align: left;
    margin-bottom: var(--margin-small);
}

/* Game settings list with bullet points */
.homepage-settings ul {
    list-style-type: disc;
    padding-left: 25px;
}

.homepage-settings li {
    font-size: var(--font-size);
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Donation Section */
.donation-container {
    text-align: center;
    margin-top: var(--margin-lg);
    padding: var(--padding-standard);
}

.donation-container p {
    font-size: var(--font-size);
    color: var(--primary-color);
    margin-bottom: var(--margin-small);
}

.paypal-button {
    margin-top: var(--margin-sm);
    padding-bottom: 40px;
    text-align: center;
}

#paypal-container-3QGDW6DLB95VU {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
    min-height: 60px;
    overflow: hidden;
    box-sizing: border-box;
}

/* --- Responsive Adjustments --- */

/* Medium devices: 469px to 1024px */
@media (min-width: 469px) and (max-width: 1024px) {
    body {
        padding: var(--mobile-padding);
    }
    
    .homepage-container {
        margin: 20px auto;
        padding: 15px;
        gap: var(--margin-sm);
        flex-direction: column;
    }
    
    .homepage-intro,
    .homepage-settings {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    /* Change vertical divider to horizontal for medium screens */
    .homepage-container::before {
        left: 0;
        right: 0;
        top: auto;
        bottom: auto;
        width: 100%;
        height: var(--divider-width);
        transform: none;
        margin: var(--margin-sm) 0;
        /* Position between sections */
        position: relative;
        display: block;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    .homepage-container h2 {
        font-size: 1.8rem;
    }
    
    .homepage-container p {
        font-size: 1rem;
    }
    
    .donation-container {
        padding: 15px;
        margin-top: var(--margin-sm);
    }
}

/* Small devices: Up to 468px */
@media (max-width: 468px) {
    body {
        padding: var(--mobile-padding);
    }
    
    .homepage-container {
        margin: 10px auto;
        padding: 10px;
        gap: var(--margin-xs);
        flex-direction: column;
    }
    
    .homepage-intro,
    .homepage-settings {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    /* Change vertical divider to horizontal for small screens */
    .homepage-container::before {
        left: 0;
        right: 0;
        top: auto;
        bottom: auto;
        width: 100%;
        height: var(--divider-width);
        transform: none;
        margin: var(--margin-xs) 0;
        /* Position between sections */
        position: relative;
        display: block;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    
    .homepage-container h2 {
        font-size: 1.5rem;
        margin-top: 0.5rem;
    }
    
    .homepage-container p {
        font-size: 0.9rem;
    }
    
    .donation-container {
        padding: 10px;
        margin-top: var(--margin-xs);
    }
    
    /* Make the list items more readable on mobile */
    .homepage-settings ul {
        padding-left: 20px;
    }
    
    .homepage-settings li {
        margin-bottom: 12px;
    }
}

/* Improve focus states for accessibility */
a:focus, button:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}