/* General Body & Font Styles */
body {
    /* From: bg-gray-900 text-gray-100 antialiased */
    background-color: #0a0a0a;
    color: #F3F4F6;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    /* To ensure footer is at the bottom */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Global setting for a more gothic heading font */
h1, h2, h3 {
    font-family: 'Lora', serif;
}

/* Container for centered content */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* From px-4 */
    padding-right: 1rem;
}

/* Breakpoints for container from Tailwind */
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }


/* Header Section */
header {
    /* From: py-12 md:py-16 text-center bg-gray-950 shadow-lg rounded-b-xl */
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
    background-color: #000000;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1);
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

header img {
    /* From: mx-auto mb-6 w-32 h-auto */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    width: 8rem;
    height: auto;
}

header h1 {
    /* From: text-5xl md:text-7xl font-extrabold text-red-600 drop-shadow-lg tracking-tight */
    font-size: 3rem;
    font-weight: 800;
    color: #a11d1d;
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
    letter-spacing: -0.025em;
}

header p {
    /* From: mt-4 text-xl md:text-2xl text-gray-300 italic max-w-2xl mx-auto px-4 */
    margin-top: 1rem;
    font-size: 1.25rem;
    color: #D1D5DB;
    font-style: italic;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Main sections padding */
section {
    /* From: py-16 md:py-24 */
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Book Showcase Section */
.book-showcase {
    /* From: flex flex-col md:flex-row items-stretch justify-center gap-12 md:gap-16 */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2rem; /* Adjusted gap for better spacing */
}

/* Book Card */
.book-card {
    /* From: bg-gray-800 p-8 rounded-xl shadow-2xl max-w-sm w-full flex flex-col ... */
    background-color: #141414;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    max-width: 24rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.book-card:hover {
    /* From: hover:scale-105 */
    transform: scale(1.05);
}

.book-card.crimson-debt:hover {
    /* From: hover:shadow-red-700/50 */
    box-shadow: 0 0 15px rgba(161, 29, 29, 0.5);
}

.book-card.bloom-of-rust:hover {
    /* From: hover:shadow-gray-600/50 */
    box-shadow: 0 0 15px rgba(75, 85, 99, 0.5);
}

.book-card h2 {
    /* From: text-3xl font-bold ... mb-5 text-center */
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    text-align: center;
}

.book-card.crimson-debt h2 { color: #a11d1d; }
.book-card .title-rust { color: #9CA3AF; } /* text-gray-400 */

.book-card .cover-image-container {
    /* From: w-full h-[450px] overflow-hidden rounded-lg shadow-md mb-6 border border-gray-700 */
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    margin-bottom: 1.5rem;
    border: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.book-card .cover-image-container img {
    /* Ensure images within the container maintain their aspect ratio */
    max-width: 100%;
    height: auto;
}

.book-card .cover-image {
    /* From: w-full h-full object-cover */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-card .description {
    /* From: text-gray-300 text-center mb-8 leading-relaxed flex-grow */
    color: #D1D5DB;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.625;
    flex-grow: 1;
}

/* Button Styles */
.button {
    /* From: mt-auto w-full flex items-center justify-center ... font-bold py-3 px-6 rounded-lg ... */
    margin-top: auto;
    width: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1);
    border: none;
}

.button:hover {
    /* From: hover:-translate-y-1 */
    transform: translateY(-0.25rem);
}

.button-amazon {
    /* From: bg-yellow-600 hover:bg-yellow-700 */
    background-color: #D97706;
}
.button-amazon:hover { background-color: #B45309; }

.button-soon {
    /* From: bg-gray-600 ... cursor-not-allowed opacity-70 */
    background-color: #4B5563;
    cursor: not-allowed;
    opacity: 0.7;
}

.button svg {
    /* From: mr-2 */
    margin-right: 0.5rem;
}

/* About Section */
.about-section {
    /* From: max-w-4xl text-center */
    max-width: 56rem;
    text-align: center;
}

.about-section h2 {
    /* From: text-4xl md:text-5xl font-bold text-red-600 mb-8 */
    font-size: 2.25rem;
    font-weight: 700;
    color: #a11d1d;
    margin-bottom: 2rem;
}

.about-section > p {
    /* From: text-lg text-gray-300 leading-relaxed mb-6 */
    font-size: 1.125rem;
    color: #D1D5DB;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

.praise-box {
    /* From: text-left mt-8 p-6 bg-gray-800 rounded-xl shadow-inner */
    text-align: left;
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #141414;
    border-radius: 0.75rem;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.praise-box h3 {
    /* From: text-2xl font-bold text-red-500 mb-4 */
    font-size: 1.5rem;
    font-weight: 700;
    color: #a11d1d;
    margin-bottom: 1rem;
}

.praise-box ul {
    /* From: list-disc list-inside text-gray-300 space-y-2 */
    list-style-type: disc;
    list-style-position: inside;
    color: #D1D5DB;
    padding-left: 0;
}

.praise-box li + li {
    margin-top: 0.5rem;
}

/* Social/Connect Section */
.connect-section {
    /* From: bg-gray-800 shadow-inner rounded-t-xl */
    background-color: #141414;
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.connect-section .container { text-align: center; }

.connect-section h2 {
    /* From: text-4xl md:text-5xl font-bold text-red-600 mb-10 */
    font-size: 2.25rem;
    font-weight: 700;
    color: #a11d1d;
    margin-bottom: 2.5rem;
}

.connect-links {
    /* From: flex flex-wrap justify-center gap-4 md:gap-6 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* Social link is a more specific version of .button */
.social-link {
    display: flex;
    align-items: center;
    color: white;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.social-link:hover { transform: scale(1.05); }
.social-link svg {
    margin-right: 0.5rem;
}

.connect-links .social-link svg {
    background-color: #0a0a0a;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

/* Individual social link colors */
.link-mailing-list { background-color: #7C3AED; } .link-mailing-list:hover { background-color: #6D28D9; }
.link-patreon { background-color: #BE123C; } .link-patreon:hover { background-color: #9F1239; }
.link-amazon-author { background-color: #D97706; } .link-amazon-author:hover { background-color: #B45309; }
.link-facebook { background-color: #2563EB; } .link-facebook:hover { background-color: #1D4ED8; }
.link-instagram { background-color: #DB2777; } .link-instagram:hover { background-color: #BE185D; }
.link-threads { background-color: #4B5563; } .link-threads:hover { background-color: #52525B; }
.link-tiktok { background-color: black; } .link-tiktok:hover { background-color: #374151; }
.link-youtube { background-color: #991B1B; } .link-youtube:hover { background-color: #7F1D1D; }
.link-spotify { background-color: #16A34A; } .link-spotify:hover { background-color: #15803D; }


/* Mailing List Modal is in /home/mike/Projects/rose-sinister.com/css/style.css, but this section combines styles from previous steps */

/* Footer */

/* Mailing List Modal */
#mailingListModal {
    /* From: fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center z-50 hidden */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(17, 24, 39, 0.75); /* bg-gray-900 with opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    /* Use a class to control visibility instead of 'hidden' in the ID selector */
    visibility: hidden;
}

#mailingListModal.open {
    visibility: visible;
}

#mailingListModal .modal-content {
    position: relative; /* Establishes a positioning context for the close button */
    /* From: bg-gray-800 rounded-lg p-8 max-w-md w-full */
    background-color: #141414;
    border-radius: 0.5rem;
    padding: 2rem;
    max-width: 28rem;
    width: 100%;
}

#mailingListModal .modal-content h2 {
    color: #a11d1d;
}

#mailingListModal form {
    display: flex;
    flex-direction: column;
}

#mailingListModal label {
    /* Ensure labels are aligned with inputs */
    display: block;
}

#mailingListModal input[type="email"],
#mailingListModal input[type="text"] {
    /* Make inputs full width and left-aligned */
    box-sizing: border-box; /* Include padding and border in element's total width */
    margin-bottom: 1rem; /* Space between input fields */
}

#mailingListModal .form-actions {
    /* Add space above the submit button */
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end; /* Right-align the button */
}

#mailingListModal button[type="submit"] {
    /* Specific styling for the submit button if needed */
}

#mailingListModal .close-button {
    /* Position the "X" close button */
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #ccc;
    cursor: pointer;
    padding: 0;
}

#mailingListModal .close-button:hover {
    color: #fff;
}

footer {
    /* From: py-8 text-center text-gray-500 text-sm bg-gray-950 */
    padding: 2rem 0;
    text-align: center;
    color: #6B7280;
    font-size: 0.875rem;
    background-color: #000000;
    margin-top: auto; /* Pushes footer to bottom */
}

footer p + p { margin-top: 0.25rem; }

/* Media Queries for Responsive Design */
@media (min-width: 768px) {
    header { padding-top: 4rem; padding-bottom: 4rem; }
    header h1 { font-size: 4.5rem; }
    header p { font-size: 1.5rem; }
    section { padding-top: 6rem; padding-bottom: 6rem; }
    .book-showcase { flex-direction: row; gap: 4rem; }
    .about-section h2, .connect-section h2 { font-size: 3rem; }
    .connect-links { gap: 1.5rem; }
}