/* General Body Styling */
body {
    font-family: 'Comic Sans MS', 'Patrick Hand', 'Chalkboard SE', 'Comic Neue', sans-serif; /* Playful font choices */
    background-color: #f0e7db; /* Soft background color */
    color: #333; /* Dark text for readability */
    margin: 0;
    padding: 0;
}

/* Ensures the content-wrapper takes up at least the full height of the viewport */
.content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 100% of the viewport height */
    justify-content: space-between; /* Spreads out the header, main content, and footer */
}

main {
    display: flex;
    flex-direction: column;
    flex: 1; /* This was already set, ensuring it allows expansion */
    padding: 20px; /* Maintain existing padding */
}


/* Header and Navigation */
header {
    background-color: #ffcc5c; /* Bright, welcoming color */
    padding: 10px 0;
    text-align:center;
    height: 35px;
}

header a {
    color: #336b87; /* Contrasting link color */
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    vertical-align: middle;
}

.header-logo {
    height: 35px; /* Adjust based on your header size */
    width: auto;
    margin-right: 0px; /* Optional: adds some space between the logo and navigation links */
}

header nav {
    display: inline-block;
    vertical-align: middle;
}



/* Footer */
footer {
    background-color: #ff6f69; /* Warm color that complements the header */
    color: white;
    text-align: center;
    padding: 5px 0;
    position: relative; /* Changed to relative for better responsiveness */
    bottom: 0;
    width: 100%;    
    height: 35px;
}

footer nav {
    display: inline-block;
    vertical-align: middle;
}

/* Book View Styling */
/* Styling for the book-view to resemble an open book */
.book-view {
    display: flex;
    justify-content: center;
    margin: 20px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    transform: skewX(-1deg); /* Slight skew */
    background: ivory; /* Adjust as needed */
    border-radius: 5px;
}

.book-view .page {
    width: 50%;
    padding: 20px;
    box-sizing: border-box;
    background: #fff;
    text-align: justify;
}

.book-view .page img {
    width: 100%;
    height: auto;
    display: block;
}

.book-view .page:first-child { 
    box-shadow: inset -5px 0 10px -5px rgba(0,0,0,0.15);
}

.book-view .page:last-child {
    box-shadow: inset 5px 0 10px -5px rgba(0,0,0,0.15);
}

.page-text {
    font-size: 24px; /* Larger text for children */
}

/* Container for the whole book view including navigation */
.book-navigation-container {
    display: flex;
    align-items: center; /* Centers the items vertically */
    justify-content: space-between; /* Spreads the children to occupy the full width */
    margin: 20px 0;
}

/* Styles for navigation links */
.nav-link {
    display: flex;
    align-items: center; /* Centers the link vertically */
    justify-content: center;
    flex: 0 0 auto; /* Do not grow or shrink */
    margin: 0 10px; /* Adjust spacing around navigation links as needed */
}

.prev-link, .next-link {
    background-color: #88d8b0; /* Soft, playful background */
    color: #fff;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block; /* Adjust as needed based on your design preference */
}

.prev-link:hover, .next-link:hover {
    background-color: #5bc8af; /* Darker on hover for interactivity */
}



/* Updated Library Page Grid */
.library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.book-thumbnail {
    border: 1px solid #ddd; /* Adds a light grey border */
    padding: 10px;
    text-align: center;
    background-color: #fff; /* Optional: Adds a white background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
    transition: transform 0.2s; /* Optional: Adds a subtle animation on hover */
}

.book-thumbnail:hover {
    transform: scale(1.05); /* Optional: Slightly enlarges the book thumbnail on hover */
}

.book-thumbnail img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 10px;
}



/* Styles for the form container and button remain the same, now with responsive adjustments included */
.form-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

.book-form > div {
    display: flex;
    flex-direction: column;
}

.book-form p {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px; /* Add some space between each form field */
}

.book-form textarea {
    height: 50px; /* Adjust the height to your preference */
    overflow-y: auto; /* Ensures scrollbar appears when content exceeds the element's height */
}

.book-form input,
.book-form textarea,
.book-form select {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.submit-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.submit-btn:hover {
    background-color: #45a049;
}

/* Home page */
.content-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    background-color: #f9f9f9; /* Soft background for readability */
    border-radius: 8px; /* Adds a touch of style */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.content-container h1 {
    color: #336b87; /* Engaging, yet readable */
    text-align: center;
}

.content-container p, .content-container ul {
    color: #333; /* Dark text for readability */
    line-height: 1.6; /* Improved readability */
}

.content-container ul {
    list-style-type: disc; /* Adds clarity to list items */
    padding-left: 20px; /* Proper indentation for list */
}

.content-container li {
    margin-bottom: 10px; /* Space between list items for clarity */
}

.cta-button {
    display: inline-block;
    background-color: #4CAF50; /* Eye-catching button color */
    color: white;
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 4px;
    text-decoration: none; /* Removes underline from links */
    font-weight: bold;
}

.cta-button:hover {
    background-color: #45a049; /* Slightly darker on hover for interaction feedback */
}

/* FAQ page */
.faq-question {
    cursor: pointer;
    padding: 10px;
    background-color: #f9f9f9;
    margin: 5px 0;
    border-radius: 5px;
    font-weight: bold;
  }

  .faq-answer {
    display: none;
    padding: 10px;
    border: 1px solid #ddd;
    border-top: none;
    margin-bottom: 5px;
  }

  /* Generate PDF Button - Reuse .submit-btn styles for consistency */
#generate-pdf-btn {
    display: block; /* Ensure the button is block level to match your site's style */
    margin: 20px auto; /* Center the button below the book navigation */
    text-align: center;
}

/* Dedication Form Container */
#dedication-form {
    text-align: center;
    margin-top: 10px;
}

/* Dedication Form and Submit Button */
#dedication-form input,
#dedication-form button {
    margin: 10px 5px; /* Provide some spacing */
}

#dedication-form input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 60%; /* Adjust based on your preference */
}

#dedication-form button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#dedication-form button:hover {
    background-color: #45a049;
}

.pdf-button-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensure button and form are centered */
    justify-content: center;
    width: 100%; /* Full width */
    margin-top: 20px; /* Space from the preceding content */
}


/* Responsive rules */

/* Responsive Header */
@media (max-width: 600px) {
    header a {
        margin: 0 10px; /* Reduce margin for smaller screens */
        font-size: 14px; /* Smaller font size for smaller screens */
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .library-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .library-grid {
        grid-template-columns: 1fr;
    }
}

/* Additional Responsive Adjustments for the Entire Site */
@media (max-width: 768px) {
    .content-wrapper, main {
        padding: 10px; /* Reduce padding on smaller screens */
    }

    .form-container, .book-form {
        padding: 10px; /* Adjust form padding */
    }
}

/* Ensure navigation links are always above the book content on small screens */
@media (max-width: 1081px) {
    .book-navigation-container {
        flex-direction: column;
    }
    .nav-link {
        width: 100%;
        justify-content: center;
        margin: 10px 0; /* Provide some spacing */
    }
}

/* Responsive font size adjustments */
@media (max-width: 768px) { /* Adjusts for screens smaller than 768px */
    .book-view {
        font-size: 14px; /* Smaller font size for small devices */
    }
}

@media (max-width: 480px) { /* Adjusts for screens smaller than 480px */
    .book-view {
        font-size: 12px; /* Even smaller font size for very small devices */
    }
}

@media (max-width: 768px) {
    .book-view .page-text {
        font-size: 18px; /* Adjusted font size for smaller devices */
    }
    .book-view {
        flex-direction: column;
    }
    .book-view .page {
        width: 100%; /* Make each page take full width on small screens */
        padding: 10px;
    }
    .book-view .page img {
        width: 100%; /* Ensure images resize correctly */
        height: auto; /* Maintain aspect ratio */
    }
}

@media (max-width: 480px) {
    .book-view .page-text {
        font-size: 16px; /* Further reduce font size for very small devices */
    }

    /* Additional adjustments for better readability and spacing on small devices */
    .book-view .page {
        padding: 10px; /* Reduce padding to save space */
    }

    /* Ensure that the book-view container allows its children to wrap if needed */
    .book-view {
        flex-wrap: wrap;
        justify-content: space-around; /* Adjust alignment to maintain aesthetic */
    }
}

/* Mobile Device Specific Styles */
.mobile-device .book-view {
    flex-direction: column;
}

.mobile-device .book-view .page {
    width: 100%; /* Ensures each page takes full width */
}

.mobile-device .page-text {
    font-size: 18px; /* Adjusts text size for better readability on smaller screens */
}

.mobile-device .book-navigation-container {
    flex-direction: column; /* Stacks navigation links vertically */
    text-align: center; /* Centers navigation links */
}

.mobile-device .nav-link {
    width: 100%; /* Full width navigation links for easier touch */
    margin-top: 10px; /* Adds space between navigation links */
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    .mobile-device .library-grid {
        grid-template-columns: repeat(2, 1fr); /* Adjusts library grid to two columns on smaller tablets */
    }
}

@media (max-width: 480px) {
    .mobile-device .library-grid {
        grid-template-columns: 1fr; /* Single column grid for phones */
    }

    .mobile-device .book-view .page img {
        height: auto; /* Ensures images resize properly */
    }

    .mobile-device .content-wrapper, .mobile-device main {
        padding: 10px; /* Reduces padding for smaller screens */
    }

    .mobile-device .form-container, .mobile-device .book-form {
        padding: 10px; /* Reduces form padding */
    }

    .mobile-device .book-view {
        font-size: 12px; /* Smaller font size for book view elements */
    }

    .mobile-device .book-view .page-text {
        font-size: 16px; /* Smaller text size for book pages */
    }

    .mobile-device .book-view .page {
        padding: 10px; /* Reduces padding inside each book page */
    }
}