/* file: /css/storybot-style.css */


/* Import Google Fonts */
/*-------------------------------------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Akronim&family=Almendra+Display&family=Asar&family=Barrio&family=Berkshire+Swash&family=Black+And+White+Picture&family=Chicle&family=Creepster&family=Doto&family=Fredericka+the+Great&family=Gaegu&family=Indie+Flower&family=Itim&family=Macondo+Swash+Caps&family=Madimi+One&family=Metal+Mania&family=Metamorphous&family=Milonga&family=Montez&family=Pirata+One&family=Raleway+Dots&family=Rancho&family=Schoolbell&family=Trade+Winds&family=Underdog&family=Workbench&family=Work+Sans&display=swap');


/* Dark Mode Background */
body {
    background-color: #2C2D33; /* Very dark gray for a soothing background */
    color: #897f7a; /* Warm taupe for main text, easy on the eyes */
	font-family: 'Open Sans', Helvetica, Arial, sans-serif; /* Font family for the text inside the form */

}

/* Button Styles */
#storybot-form button {
    width: 100%; /* Button will take up 100% of its container's width */
    padding: 10px 20px; /* Adds padding inside the button */
    margin-top: 20px; /* Adds margin above the button */
    background-color: #5c6bc0; /* Background color for the button */
    color: white; /* Text color for the button */
    border: none; /* No borders for the button */
    border-radius: 4px; /* Rounded corners with a radius of 4px */
    cursor: pointer; /* Changes the mouse cursor to a pointer when hovered */
    font-size: 18px; /* Font size for the text inside the button */
    text-align: center; /* Centers text inside the button */
    transition: background-color 0.3s ease; /* Transition effect for the background color */
}

#storybot-form button:hover {
    background-color: #3949ab; /* Darkens the button on hover */
}


#story-result {
    max-width: 600px; /* Limits the width of the story results to 600px */
    margin: 20px auto; /* Centers the story results with automatic margins */
    border: 1px solid #d3c1a5; /* Border with a solid color around the story results */
    border-radius: 8px; /* Rounded corners with a radius of 8px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect for depth */
    padding: 20px; /* Adds padding inside the story results */
    box-sizing: border-box; /* The width and height properties include the padding and border, not just the content */
    display: block; /* Makes the story results a block-level element */
}

#story-ready-btn {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #4CAF50; /* Example green color; adjust as needed */
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#story-ready-btn:hover {
    background-color: #45a049; /* Darker shade for hover effect */
}


/* Center the pagination container and apply styling */
.story-pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.story-pagination {
    display: flex;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.story-pagination-item {
    font-size: 1.2em; /* Larger font size */
}

.story-pagination-item a {
    color: #f0f0f0; /* Light color for readability on dark theme */
    padding: 8px 12px;
    text-decoration: none;
    border: 2px solid #555; /* Border color matching dark theme */
    border-radius: 4px;
    background-color: #3a3a3a; /* Dark background for pagination items */
    transition: all 0.3s ease;
}

.story-pagination-item a:hover {
    background-color: #5c6bc0; /* Accent color on hover */
    color: #fff; /* White text on hover */
    border-color: #5c6bc0; /* Matching border color on hover */
}

/* Style for current (selected) page */
.story-pagination-item .current {
    background-color: #5c6bc0; /* Accent color for current page */
    color: #fff; /* White text for contrast */
    border: 2px solid #5c6bc0; /* Border matching background color */
    border-radius: 4px;
    padding: 8px 12px;
    font-weight: normal; /* Consistent weight with other items */
    cursor: default; /* No pointer cursor on current item */
}

/* Login Benefits */
.story-login-benefits ul {
    margin-top: 2em!important;
    list-style: none;
    padding: 0;
    margin: 0 0 0 1.2em
}

.story-login-benefits li {
    text-align: left;
    margin-bottom: 10px;
    font-size: 16px;
    color: #c0c0c0;
}

.story-login-benefits i {
    color: #4BB543;
    margin-right: 5px;
}


.nsl-button {
    width: 230px; /* Set a maximum width */
    text-align: center;
}

/* General Spinner Overlay */
#spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    color: white;
    text-align: center;
}

#spinner-overlay .overlay-content {
    max-width: 90%;
    text-align: center;
}

#spinner-overlay video {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}


/* Mobile CSS ------------------------------------------------------------------------------------------------ */

/* Media Query for Mobile */

@media (max-width: 767px) {

    .thumbnail img {
        max-width: 100%; /* Full width for images on mobile */
    }

    .spinner-text {
        bottom: -40px; /* Positions spinner text below the spinner */
        font-size: 12px; /* Smaller font size for spinner text on mobile */
        max-width: 90%; /* Maximum width for spinner text on mobile */
        padding: 5px; /* Padding for spinner text on mobile */
    }

    .story-content,
    .story-header,
    .story-actions {
        padding-left: 10px; /* Left padding for content on mobile */
        padding-right: 10px; /* Right padding for content on mobile */
    }

    .story-featured-image img {
        width: 100%; /* Full width for featured image on mobile */
        margin-left: auto; /* Centers featured image horizontally on mobile */
        margin-right: auto; /* Centers featured image horizontally on mobile */
    }

    .story-reviews-form {
        font-size: 1.5em;
    }

    /* Override ul and ol margin on mobile */
    ul,
    ol {
        margin: 0 0 1.41575em 0em !important; /* Removes left margin on mobile */
    }

}


/* Print CSS ------------------------------------------------------------------------------------------------ */

@media print {
    /* Hide specific elements for print */
    .menu-toggle, 
    .site-footer, 
    .story-actions, 
    .story-reviews-form, 
    .rate-story-button, 
    .storefront-breadcrumb, 
    #story-audio-player {
        display: none !important; /* Hide these elements when printing */
    }

    /* Ensure the story content fits well for print */
    .story-content {
        font-size: 14pt; /* Adjust font size for better readability in print */
        margin: 0;
        padding: 0;
    }

    /* Container for print content with rotation */
    .coloring-page {
        position: relative;
        width: 90vh; /* Use viewport height as width due to rotation */
        height: 90vw; /* Use viewport width as height due to rotation */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 20px;
        padding-left: 0; /* Adjust padding to move content to the left */
        box-sizing: border-box; /* Include padding in the width/height calculation */
        transform: rotate(90deg) translate(0, -68vh); /* Rotate and move into place */
        transform-origin: top left; /* Rotate around the top left */
    }

    /* Style for the title above the image */
    .coloring-title {
        margin-bottom: 20px; /* Add 20px space below the title */
        text-align: left;
        width: 100%;
        font-size: 20pt;
        transform: rotate(0deg);
    }

    /* Ensure the image is visible */
    .coloring-image {
        display: block;
        max-width: 95vh; /* Allow the image to take full width of the container */
        max-height: 95vh; /* Adjust to fit the content */
        border: 0px solid lightgray; /* Add a light gray border around the image */
        padding: 10px;
        transform: rotate(0deg); /* Ensure the image itself is not rotated */
    }

    /* Style for the copyright below the image */
    .coloring-copyright {
        margin-top: 10px; /* Space above copyright */
        text-align: left; /* Align text to the left */
        width: 100%;
        font-size: 8pt; /* Smaller font size for copyright text */
        color: lightgrey; /* Light grey color for copyright text */
        transform: rotate(0deg); /* Ensure the copyright itself is not rotated */
    }

    /* Hide print-only elements in screen view */
    .print-only {
        display: none !important; /* Hide these elements when viewing on screen */
    }
}