/*style.css */
/* Basic Reset & Body Styles */
:root {
    --primary-color: #6a0572; /* Deep Purple */
    --secondary-color: #9c27b0; /* Lighter Purple */
    --accent-color: #f7b32b; /* Golden Yellow for highlights */
    --text-color-dark: #333;
    --text-color-light: #f4f4f4;
    --background-light: #d2c5d3; /* Changed: Brighter off-white for section backgrounds */
    --background-dark: #e8e8e8; /* Slightly darker for contrast */
    --border-color: #ccc;
    --font-heading: 'Merriweather', serif;
    --font-body: 'Open Sans', sans-serif;
    --container-max-width: 960px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    line-height: 1.8; /* Increased line height for readability */
    color: var(--text-color-dark);
    background-color: var(--background-light); /* Soft background */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1em; /* Reduced by 0.2em from 1.2em */
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-top: 1.5em;
    margin-bottom: 0.8em; /* Slightly adjusted margin */
}

h1 {
    font-size: 2.3em; /* Reduced by 0.2em from 2.5em */
    text-align: center;
    color: var(--text-color-light);
}

h2 {
    font-size: 1.8em; /* Reduced by 0.2em from 2em */
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 1.2em;
}

h3 {
    font-size: 1.3em; /* Reduced by 0.2em from 1.5em */
    color: var(--secondary-color);
}

p {
    margin-bottom: 1.2em; /* Increased paragraph spacing */
}

a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Layout */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 25px; /* Slightly more padding on sides */
}

.site-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-color-light);
    padding: 3.5em 0; /* Slightly more padding */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Slightly more prominent shadow */
}

.site-header .tagline {
    font-size: 1.1em; /* Reduced by 0.2em from 1.3em */
    opacity: 0.95;
    margin-top: 0.5em;
}

.content-area {
    padding: 2.5em 0; /* More vertical padding */
}

section {
    background-color: var(--background-light); /* Set to light background variable */
    padding: 2.5em; /* More internal padding */
    margin-bottom: 2.5em;
    border-radius: 10px; /* Slightly more rounded corners */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); /* Gentler shadow */
}

.intro-section .highlight-text {
    font-size: 1.05em; /* Reduced by 0.2em from 1.25em */
    font-weight: 700; /* Bolder */
    color: var(--primary-color);
    text-align: center;
    margin-top: 2em;
    padding: 1em;
    background-color: rgba(247, 179, 43, 0.15); /* slightly stronger accent background */
    border-radius: 8px;
    line-height: 1.5; /* Good for multi-line highlight */
}

/* Lists */
.universe-list,
.offer-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.8em; /* Added for centering the list itself */
    display: flex; /* Make the list a flex container */
    flex-direction: column; /* Stack list items vertically */
    align-items: center; /* Center items horizontally within the list */
}

.universe-list li,
.offer-list li {
    background-color: var(--background-dark);
    margin-bottom: 0.7em;
    padding: 1em 1.5em;
    border-left: 6px solid var(--secondary-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 0.85em; /* Reduced by 0.2em from 1.05em */

    /* --- NEW STYLES FOR SHORTER, CENTERED LIST ITEMS --- */
    max-width: 600px; /* Adjust this value to control the width of the boxes */
    width: 50%; /* Ensures it's responsive but doesn't get too small */
    /* margin: 0 auto; Removed as the parent flex container handles centering now */
    /* --- END NEW STYLES --- */
}


.universe-list li:before {
    content: '📚'; /* Default icon */
    margin-right: 12px; /* More space */
    font-size: 1.2em; /* Larger icon */
}

/* Specific icons remain the same */
.universe-list li:nth-child(2):before {
    content: '💍';
}
.universe-list li:nth-child(3):before {
    content: '🦸‍♀️';
}
.universe-list li:nth-child(4):before {
    content: '🚀';
}
.universe-list li:nth-child(5):before {
    content: '👑';
}
.universe-list li:nth-child(6):before {
    content: '⚡';
}
.universe-list li:nth-child(7):before {
    content: '✨';
}

.offer-list li:before {
    content: '✅'; /* Checkmark for offers */
    margin-right: 12px; /* More space */
    font-size: 1.2em; /* Larger icon */
}

/* --- Dates & Prizes Section Styles --- */
/* This section wraps the date items and prizes */
.dates-prizes-section .container { /* Targeting the inner container for flexbox */
    display: flex; /* Make children (date-item, prize-info) align horizontally */
    flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
    gap: 2em; /* Space between the items */
    justify-content: center; /* Center items when they don't fill the space */
    align-items: flex-start; /* Align items to the top */
}

/* The h2 for this section is a direct child of 'section', not the 'container',
   so it needs its own width declaration if inside a flex container.
   However, with the change to `.dates-prizes-section .container`, h2 is outside of that flex context. */
.dates-prizes-section h2 {
    width: 100%; /* Make heading take full width */
    margin-bottom: 1.5em;
    font-size: 2.6em; /* Reduced by 0.2em from 2.8em */
    text-align: center; /* Ensure the heading itself is centered */
}

/* Styles for individual date boxes (Submission Deadline, Winners Announced) */
.date-item {
    background-color: var(--background-dark);
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    flex: 1; /* Allow items to grow and shrink */
    min-width: 280px; /* Minimum width before wrapping */
    max-width: calc(50% - 1em); /* Max width to ensure two items per row on larger screens, accounting for half the gap */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    text-align: center; /* Center text within each box */
    display: flex; /* Make content inside date-item flexible */
    flex-direction: column; /* Stack content vertically inside */
    justify-content: space-between; /* Push header/footer to ends */
}

.date-item h3 {
    color: var(--primary-color);
    font-size: 1.3em;
    margin-top: 0.5em;
}

.date-item .countdown-date {
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 0.9em;
    display: block;
    margin-bottom: 1em;
}

/* Styles for the countdown timer boxes themselves (the 00 Days 00 Hours parts) */
.countdown-timer {
    display: flex;
    justify-content: center;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    flex-wrap: wrap; /* Allow boxes to wrap if screen is very small */
    gap: 0.8em; /* Space between time boxes */
}

.time-box {
    background-color: var(--primary-color);
    color: white;
    padding: 0.8em 0.5em;
    border-radius: 5px;
    font-size: 0.8em;
    text-transform: uppercase;
    width: 60px; /* Fixed width for consistent look */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.time-box span {
    display: block;
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 0.2em;
    line-height: 1;
}

.countdown-message {
    margin-top: 1em;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-color-dark); /* Changed to dark text color for better contrast on light background */
}

/* Ensure prize-info also aligns correctly, taking full width if needed */
.prize-info {
    background-color: var(--background-dark);
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    flex-basis: 100%; /* Ensures it takes full width below date items on desktop */
    margin-top: 2em; /* Add space if it wraps below */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    text-align: center; /* Center the content inside prize-info */
}

.prize-info h3 {
    font-size: 1.4em; /* Reduced by 0.2em from 1.6em */
    color: var(--primary-color);
    margin-bottom: 1em;
}

.prize-list {
    list-style: none;
    padding: 0;
    text-align: left; /* Align text within list items to the left */
    display: flex; /* Flex container for the list items */
    flex-direction: column; /* Stack list items vertically */
    align-items: center; /* Center list items horizontally within the container */
}

.prize-list li {
    background-color: var(--background-light);
    padding: 0.8em 1.2em;
    margin-bottom: 0.7em;
    border-left: 5px solid var(--accent-color);
    border-radius: 4px;
    font-size: 0.9em;
    max-width: 600px; /* Max width for list items */
    width: 70%; /* Responsive width for list items */
    position: relative; /* For custom bullet point */
    padding-left: 2.5em; /* Space for the custom bullet */
}

.prize-list li strong {
    color: var(--primary-color);
}

.prize-list li::before {
    content: '🏆'; /* Trophy emoji */
    position: absolute;
    left: 0.8em; /* Position the trophy icon */
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-color);
    font-size: 1em; /* Adjust icon size */
}


/* Media query to ensure they stack on smaller screens */
@media (max-width: 768px) {
    .dates-prizes-section .container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally when stacked */
    }
    .date-item,
    .prize-info {
        max-width: 90%; /* Take up most of the width on mobile */
        width: 100%; /* Ensure it takes full available width */
    }
    .prize-info {
        margin-top: 2em; /* Add space if it wraps below */
    }
}
/* --- END: Dates & Prizes Section Styles --- */


/* Submission Section */
.submission-method {
    background-color: var(--background-dark);
    padding: 2em;
    border-radius: 10px;
    border: 2px dashed var(--border-color);
    text-align: center;
}

/* Styles for the PHP form */
.story-submission-form {
    display: flex;
    flex-direction: column;
    gap: 1.5em; /* Space between form groups */
    max-width: 600px; /* Keep form centered and readable */
    margin: 2em auto 0 auto; /* Center the form and add top margin */
    text-align: left; /* Align text within form groups to the left */
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5em;
    font-weight: 600;
    color: var(--primary-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
    padding: 0.8em;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 1em;
    color: var(--text-color-dark);
    background-color: var(--background-light);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(247, 179, 43, 0.3);
    outline: none;
}

.form-group textarea {
    resize: vertical; /* Allow vertical resizing only */
    min-height: 150px; /* Minimum height for textarea */
}

.form-note {
    font-size: 0.85em; /* Slightly smaller text */
    color: #666; /* Muted color */
    margin-top: 0.5em; /* Space from the input field */
    display: block; /* Ensures it takes its own line */
    font-style: italic;
}

.button {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--text-color-light);
    padding: 1em 2em;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 1.5em;
}

.button:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Submission feedback messages */
.feedback-message {
    padding: 1em;
    margin-top: 1.5em;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    display: none; /* Hidden by default, shown by JS */
}

.feedback-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.feedback-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}


/* Accepted Stories Section (story_display.php / index.php) */
#submitted-stories-section h2 {
    margin-bottom: 2em;
}
.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2em;
}
.story-card {
    background-color: var(--background-dark);
    padding: 1.5em;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.story-card h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
    color: var(--primary-color);
    font-size: 1.3em;
}
.story-card p {
    font-size: 0.9em;
    margin-bottom: 0.8em;
}
.story-card .story-snippet {
    flex-grow: 1; /* Allows snippet to take available space */
    margin-bottom: 1em;
}
.story-card .read-more a {
    font-weight: bold;
    color: var(--accent-color);
    display: inline-block;
    margin-bottom: 1em;
}
.story-card .story-meta {
    font-size: 0.8em;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1em; /* Space from content */
}
.story-status {
    font-weight: bold;
    padding: 0.3em 0.7em;
    border-radius: 4px;
    color: white;
    font-size: 0.75em;
}
.status-Pending { background-color: #f7b32b; } /* Accent yellow */
.status-Accepted { background-color: #28a745; } /* Green */
.status-NearlyThere { background-color: #007bff; } /* Blue */
.status-PleaseTryAgain { background-color: #dc3545; } /* Red */


/* Footer Styles */
.site-footer {
    background: var(--primary-color);
    color: var(--text-color-light);
    padding: 2.5em 0;
    text-align: center;
    font-size: 0.9em;
    margin-top: 2.5em;
}

.site-footer a {
    color: var(--accent-color);
}

.site-footer a:hover {
    color: #fff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.1em;
    }

    .site-header {
        padding: 2.5em 0;
    }

    .content-area {
        padding: 1.5em 0;
    }

    section {
        padding: 1.5em;
        margin-bottom: 1.5em;
    }

    .container {
        padding: 0 15px;
    }

    /* Adjust list item width on smaller screens */
    .universe-list li,
    .offer-list li {
        width: 90%; /* Make them wider on smaller screens */
        max-width: unset; /* Remove max-width constraint */
    }

    /* Story grid adjustment */
    .story-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
}