/* Add scroll padding to account for fixed navbar */
html {
    scroll-padding-top: 80px; /* Adjust based on your navbar height */
}
.promo-box {
    background-color: #f8f9fa;
    border: 2px solid #008080;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.promo-box h3 {
    color: #008080;
    margin-bottom: 15px;
}
.promo-box p {
    margin-bottom: 10px;
    font-size: 1.1em;
}
.book-cover {
    width: 250px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: block;
    margin: 0 auto;
}
/* Fix for book cards to maintain consistent heights */
.book-card {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}
.book-card .card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.collapse {
    overflow: hidden;
}
.row.g-4 {
    display: flex;
    flex-wrap: wrap;
}
.row.g-4 > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
body {
    font-family: Verdana, Geneva, sans-serif;
    color: #1a1a1a;
}
.hero-section {
    background-color: #008080;
    padding: 100px 0;
    color: white;
    width: 100%;
}
.hero-section .row {
    flex-wrap: nowrap;
}
.author-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    margin-left: auto;
}

@media (max-width: 991px) {
    .hero-section .row {
        flex-wrap: wrap;
    }
    
    .hero-section .col-lg-8,
    .hero-section .col-lg-4 {
        width: 100%;
        max-width: 100%;
    }
}
.bg-light {
    background-color: #008080 !important; /* Teal color */
}
.navbar {
    background-color: white !important;
}
.book-card {
    transition: transform 0.3s;
    background-color: white;
}
.book-card:hover {
    transform: translateY(-5px);
}
.card {
    transition: all 0.3s ease;
    background-color: white;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.btn-primary {
    background-color: #006666;
    border-color: #006666;
}
.btn-primary:hover {
    background-color: #004d4d;
    border-color: #004d4d;
}
.btn-outline-primary {
    color: #006666;
    border-color: #006666;
}
.btn-outline-primary:hover {
    background-color: #006666;
    border-color: #006666;
}
section:not(.hero-section):not(.bg-light) {
    background-color: white;
}

.container {
    max-width: 1200px;
    width: 100%;
}
footer.bg-dark {
    background-color: #004d4d !important;
}

/* Book Button Styles */
.book-buttons {
    width: 100%;
    max-width: 250px; /* Match the max-width of book cover images */
    margin: 0; /* Remove auto margin to align left */
}

/* Logo Section Styles */
.logo-section img {
    /* max-height is now set per logo ID */
    /* filter: grayscale(0%); Removed grayscale for full color */
    opacity: 0.8; /* Increased opacity */
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-section img:hover {
    /* filter: grayscale(0%); Don't reset filter for all logos on hover */
    opacity: 1;
}

/* Keep inverted logos inverted on hover, just change opacity */
#wsj-logo:hover,
#fastco-logo:hover,
/* Harvard hover handled below */
#mit-logo:hover {
    filter: invert(100%);
    opacity: 1;
}

/* Keep harvard logo inverted on hover, just change opacity */
#harvard-logo:hover {
    filter: invert(100%);
    opacity: 1;
}

/* Handle non-inverted logos on hover */
#psychtoday-logo:hover {
    /* filter: grayscale(0%); */ /* No grayscale currently applied */
    opacity: 1;
}


/* Individual Logo Heights */
#wsj-logo {
    max-height: 213px; /* Adjust height as needed */
    width: auto; /* Ensure aspect ratio is maintained */
    max-width: 100%; /* Prevent overflow */
    filter: invert(100%); /* Invert colors */
}

#fastco-logo {
    max-height: 213px; /* Adjust height as needed */
    width: auto; /* Ensure aspect ratio is maintained */
    max-width: 100%; /* Prevent overflow */
    filter: invert(100%); /* Invert colors */
}

/* Harvard logo handled separately below */
#psychtoday-logo {
    max-height: 213px; /* Adjust height as needed */
    width: auto; /* Ensure aspect ratio is maintained */
    max-width: 100%; /* Prevent overflow */
    /* filter: invert(100%); Reverted to original colors */
}

#mit-logo {
    max-height: 213px; /* Adjust height as needed */
    width: auto; /* Ensure aspect ratio is maintained */
    max-width: 100%; /* Prevent overflow */
    filter: invert(100%); /* Invert colors */
}

#harvard-logo {
    max-height: 900px; /* Increased max-height for Harvard */
    width: auto; /* Ensure aspect ratio is maintained */
    max-width: 100%; /* Prevent overflow */
    filter: invert(100%); /* Invert colors */
}


/* =================================== */
/* ===== Landing Page Specific Styles ===== */
/* =================================== */

.landing-hero {
    background-color: #008080; /* Teal background */
    color: white;
    padding: 60px 0;
    overflow: hidden; /* Prevent horizontal scroll */
}
.landing-hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem); /* Responsive font size */
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.landing-hero p {
    font-size: clamp(1rem, 2.5vw, 1.2rem); /* Responsive font size */
    margin-bottom: 30px;
}
.email-form {
    gap: 10px; /* Spacing between elements */
}
.email-form input[type="email"] {
    max-width: 350px; /* Limit width */
    flex-grow: 1; /* Allow input to grow */
}
.book-cover-landing {
    max-width: 300px; /* Adjust size as needed */
    width: 80%; /* Responsive width */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    margin: 0 auto; /* Center on smaller screens */
    display: block;
}
.section-padding {
    padding: 60px 15px; /* Add horizontal padding for smaller screens */
}
.benefits-list li {
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    align-items: flex-start; /* Align icon with first line of text */
}
.benefits-list li i {
    margin-top: 0.2em; /* Adjust icon vertical alignment */
    margin-right: 10px; /* Space between icon and text */
}

.purchase-buttons .btn {
    margin: 8px; /* More spacing */
    padding: 12px 25px; /* Larger buttons */
    font-size: 1.1rem;
}
.faq-accordion .accordion-button {
    font-weight: bold;
    color: #006666; /* Darker teal */
}
.faq-accordion .accordion-button:not(.collapsed) {
    background-color: #e7f3f3; /* Light teal background when open */
    color: #004d4d;
}
.faq-accordion .accordion-item {
    border-color: #dee2e6;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden; /* Ensure rounded corners apply */
}
.social-icons a {
    font-size: 2rem; /* Slightly larger icons */
    margin: 0 12px;
    color: #006666; /* Darker teal */
    transition: color 0.3s, transform 0.2s;
    display: inline-block; /* Allows transform */
}
.social-icons a:hover {
    color: #004d4d; /* Even darker teal */
    transform: scale(1.1); /* Slight zoom effect */
}

/* Ensure sections alternate background colors */
section:nth-of-type(even):not(.landing-hero) {
     background-color: #f8f9fa; /* Light gray for alternating sections */
}
section:nth-of-type(odd):not(.landing-hero) {
     background-color: white;
}

/* Override default white background for landing page sections if needed */
/* .bg-light sections will now use the site's default orange */
.bg-white {
    background-color: #ffffff !important;
}

/* Landing Page Navbar */
.navbar.bg-light {
    background-color: #ffffff !important; /* Make landing navbar white */
    border-bottom: 1px solid #dee2e6;
}


/* Responsive adjustments for landing page */
@media (max-width: 991px) {
    .landing-hero {
        text-align: center;
        padding: 40px 0;
    }
    .landing-hero .row {
        flex-direction: column-reverse; /* Stack image above text on mobile */
    }
    .landing-hero .col-lg-7, .landing-hero .col-lg-5 {
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px;
    }
     .landing-hero .col-lg-5 {
        margin-bottom: 0; /* Remove bottom margin from image column when stacked */
    }
    .email-form {
        justify-content: center; /* Center form items */
    }
     .email-form input[type="email"] {
        max-width: 100%; /* Full width on mobile */
        margin-right: 0;
        margin-bottom: 10px;
    }
    .purchase-buttons .btn {
        width: 80%; /* Make buttons wider on mobile */
        max-width: 300px;
    }
}

@media (max-width: 767px) {
    .section-padding {
        padding: 40px 15px;
    }
    .purchase-buttons .btn {
        font-size: 1rem;
        padding: 10px 20px;
    }
    .social-icons a {
        font-size: 1.8rem;
        margin: 0 8px;
    }
    /* Center book buttons on mobile */
    .book-buttons {
        margin-left: auto;
        margin-right: auto;
    }
    /* Add space above book details text on mobile */
    #book-details .col-md-8 {
        margin-top: 20px; /* Adjust as needed */
    }
}

/* Styles for logos on resource cards */
.resource-logo {
    height: 2.7em; /* Adjust size as needed (reduced by 25%) */
    width: auto;
    vertical-align: middle; /* Align with text */
    margin-bottom: 0.2em; /* Fine-tune vertical alignment */
}

/* Specific size override for Red Magazine logo */
#red-magazine-logo {
    height: 2.1em; /* Reduced by another 10% from 2.3em */
}