/*
 Theme Name:   Astra Child
 Theme URI:    https://sanatatecurata.com/
 Description:  Child theme for Astra
 Author:       Your Name
 Author URI:   https://sanatatecurata.com/
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* =Custom CSS below this line
-------------------------------------------------------------- */
/* ---- New CSS for Centered Cookie Consent Banner ---- */

/* Optional: Fullscreen backdrop for modal effect */
/* If you use this, you'll need to wrap your banner HTML in a div with id="cookie-consent-backdrop"
   and adjust the JavaScript to show/hide this backdrop along with the banner.
   Or, simpler for now, just apply the backdrop to the banner itself when it's not hidden.
   Let's start without a separate backdrop element for simplicity and apply dimming via the banner itself
   when it's not using the .cookie-consent-hidden class.

   If you want a separate backdrop div, your HTML in functions.php would be:
   <div id="cookie-consent-backdrop" class="cookie-consent-backdrop-hidden">
       <div id="cookie-consent-banner" class="cookie-consent-banner">
           ... your banner content ...
       </div>
   </div>
   And JS would add/remove 'cookie-consent-backdrop-hidden' from the backdrop.
   For now, this CSS assumes the banner itself will act as the modal.
*/

.cookie-consent-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* This centers the element */
    width: 90%; /* Adjust width as needed */
    max-width: 550px; /* Maximum width for larger screens */
    background-color: #2c3e50; /* Darker, more modal-like background */
    color: #ecf0f1; /* Lighter text color */
    padding: 25px 30px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 5px 25px rgba(0,0,0,0.3); /* More pronounced shadow */
    z-index: 10000; /* Ensure it's on top */
    display: flex; /* We'll use flexbox for layout inside */
    flex-direction: column; /* Stack text and buttons vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text */
    gap: 20px; /* Space between text and buttons container */
}

/* This class will be added by JavaScript to hide it */
.cookie-consent-hidden {
    display: none !important;
}

.cookie-consent-text {
    margin: 0;
    font-size: 15px; /* Slightly larger text */
    line-height: 1.6;
}

.cookie-consent-text a {
    color: #3498db; /* Brighter link color */
    text-decoration: underline;
}

.cookie-consent-text a:hover {
    color: #5dade2;
}

.cookie-consent-buttons {
    display: flex;
    gap: 15px; /* Space between buttons */
    justify-content: center; /* Center buttons if they don't fill width */
    width: 100%; /* Make button container take full width of modal */
}

.cookie-consent-button {
    background-color: #3498db; /* Blue accept button */
    border: none;
    color: white;
    padding: 12px 25px; /* Larger padding */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.1s ease;
    flex-grow: 1; /* Allow buttons to grow if needed */
    max-width: 200px; /* Max width for each button */
}

.cookie-consent-button:hover {
    background-color: #2980b9;
    transform: translateY(-1px); /* Slight lift on hover */
}

.cookie-consent-button-decline {
    background-color: #7f8c8d; /* Grey decline button */
    /* Or use a more prominent color if you prefer e.g. #e74c3c (red) */
}

.cookie-consent-button-decline:hover {
    background-color: #6c7a7d;
     /* Or for red: #c0392b; */
}

/* Responsive adjustments for the modal */
@media (max-width: 600px) {
    .cookie-consent-banner {
        width: 95%;
        padding: 20px;
        gap: 15px;
    }
    .cookie-consent-text {
        font-size: 14px;
    }
    .cookie-consent-buttons {
        flex-direction: column; /* Stack buttons on very small screens */
        align-items: center;
        gap: 10px;
    }
    .cookie-consent-button {
        width: 100%; /* Make buttons full width of their container */
        max-width: 280px; /* Adjust max width for stacked buttons */
    }
}

/* ---- End of New CSS ---- */