/*
Theme Name: Astra Child
Template: astra
*/

/* Style the riddle hero section with an overlay */
.riddle-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;  /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-image: url('https://thewhispers.phantomfeast.com/wp-content/uploads/2024/09/floral-hero-scaled.jpg'); /* Hero image URL */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;  /* Ensure no unwanted scroll bars */
}

/* Add the dark green overlay over the entire hero image */
.riddle-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(8, 28, 21, 0.7); /* Dark green overlay with transparency */
    z-index: 2;
}

/* Style the riddle content, and make sure it appears above the overlay */
.riddle-content {
    position: relative;
    z-index: 3; /* Ensure content is above the overlay */
    color: white;
    padding: 40px;
    text-align: center;
}

/* Style the riddle heading */
.riddle-content h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #ffffff; /* White text for clarity */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow to improve readability */
}

/* Style the riddle text */
.riddle-content p {
    font-size: 18px;
    margin-bottom: 20px;
    color: #ffffff; /* White text */
}

/* Style the input field */
.riddle-content input {
    padding: 10px;
    font-size: 16px;
    width: 80%;
    max-width: 400px;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px;
}

/* Style the submit button */
.riddle-content button {
    padding: 10px 20px;
    background-color: #B8860B; /* Deep gold button color */
    color: none;
    border: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* Button hover effect */
.riddle-content button:hover {
    background-color: #DAA520; /* Lighter gold on hover */
    
}

/* Style the main page hero section */
.main-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;  /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-image: url('https://thewhispers.phantomfeast.com/wp-content/uploads/2024/09/floral-hero-scaled.jpg'); /* Hero image URL */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;  /* Ensure no unwanted scroll bars */
}

/* Add the dark green overlay over the entire hero image */
.main-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(8, 28, 21, 0.7); /* Dark green overlay with transparency */
    z-index: 2;
}

/* Style the main page content, and make sure it appears above the overlay */
.main-content {
    position: relative;
    z-index: 3; /* Ensure content is above the overlay */
    color: white;
    padding: 40px;
    text-align: center;
    font-family: "Montserrat", sans-serif; /* Matching font */
}

/* Style for H2 */
.main-content h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #b38f00;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Text shadow for readability */
}

/* Style for main text */
.main-content p {
    font-size: 18px;
    margin-bottom: 20px;
    color: #ffffff; /* White text */
    line-height: 1.6em; /* Comfortable line height */
}


/* Ensure the hero section scales well on smaller screens */
@media (max-width: 768px) {
    .main-hero {
        height: auto;
        padding: 60px 20px; /* Add some padding for mobile */
    }

    .main-hero h2 {
        font-size: 24px; /* Adjust font size for mobile */
    }

    .main-hero p {
        font-size: 16px; /* Adjust paragraph text size for mobile */
        line-height: 1.5; /* Ensure good readability */
    }

    .main-hero .riddle-content {
        padding: 20px; /* Add more padding to ensure text isn't cramped */
    }

    .main-hero button {
        width: 100%; /* Full-width button for better usability on mobile */
        font-size: 18px; /* Adjust button text size for mobile */
    }

    /* Make sure there’s enough spacing at the top and bottom */
    .main-hero {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}