/* User Provided Base CSS - DO NOT CHANGE THIS BLOCK */
body {
    font-family: 'Lora', serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #262626; /* Ashy black background */
    color: #e9ecef; /* Light grey text for readability on dark background */
    line-height: 1.6; /* Added from full version for better readability */
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .custom-navbar .nav-link, .btn, .section-title, .card-title, .footer a { /* Added .card-title and .footer a from full */
    font-family: 'Montserrat', sans-serif;
}

.light-section .lead, .light-section p:not(.card-text):not(.text-muted):not(.card-subtitle) { /* Added :not(.card-subtitle) from full */
    color: #343a40; 
    text-align: justify;
    line-height: 1.7; 
}

.light-section .card .card-text {
 /* Or initial */
    color: #c7c7c7;
}
.navbar-container {
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: fixed;  
    top: 0;           
    left: 0;          
    right: 0;         
    z-index: 1030;
}
.custom-navbar {
    background-color: rgba(255, 255, 255, 0.15) !important; 
    backdrop-filter: blur(15px) saturate(180%); 
    -webkit-backdrop-filter: blur(15px) saturate(180%); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 2rem !important;
    padding: 0.5rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-block;
    width: auto;
    transition: background-color 0.3s ease; /* Added from full */
}
.custom-navbar .navbar-brand { 
    color: #f8f9fa !important; 
    font-weight: 500; 
    font-size: 1.25rem; 
}
.custom-navbar .nav-link { 
    color: #d0d0d0 !important; 
    font-weight: 500; padding: 0.5rem 1rem !important; 
    border-radius: 1.5rem; margin: 0 0.25rem; 
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; 
}
.custom-navbar .nav-link:hover { 
    background-color: rgba(255, 255, 255, 0.1) !important; 
    color: white !important; 
}
.custom-navbar .nav-link.active { 
    background-color: rgba(255, 255, 255, 0.2) !important; 
    color: white !important; 
}
.custom-navbar .navbar-toggler { border: none; }
.custom-navbar .navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon { 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Full Page Hero Carousel Styles */
.full-page-hero-carousel { height: 100vh; position: relative; overflow: hidden; }
.full-page-hero-carousel .carousel-inner,
.full-page-hero-carousel .carousel-item { height: 100%; }
.full-page-hero-carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); } 
.full-page-hero-carousel .carousel-caption-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; width: 80%; z-index: 10; }
.full-page-hero-carousel .carousel-caption-text h1 { font-size: 3.5rem; font-weight: 300; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0,0,0,0.7); }
.full-page-hero-carousel .carousel-caption-text .lead { font-size: 1.5rem; font-weight: 300; margin-bottom: 2rem; text-shadow: 0 1px 3px rgba(0,0,0,0.7); font-family: 'Lora', serif; }

.explore-button-wrapper { position: absolute; bottom: 10vh; left: 50%; transform: translateX(-50%); z-index: 15; text-align: center; }
.explore-button { 
    font-size: 1.1rem; 
    padding: 0.75rem 2rem; 
    display: inline-flex; 
    align-items: center; 
    background-color: #0d6efd; 
    border-color: #0d6efd; 
    color: white; 
    border-radius: 50rem; /* Ensure it's a pill from full */
}
.explore-button:hover { 
    background-color: #0b5ed7; 
    border-color: #0a58ca;
    color: white; /* Ensure text remains white on hover from full */
}
.explore-button .arrow-down { width: 20px; height: 20px; margin-left: 10px; animation: jumpArrow 1.5s infinite; }

@keyframes jumpArrow { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } }

.carousel-control-prev, .carousel-control-next { z-index: 20; }
.carousel-control-prev-icon,
.carousel-control-next-icon { background-color: rgba(255,255,255,0.2); border-radius: 50%; padding: 10px; } 
.carousel-indicators { z-index: 20; bottom: 3vh; }
.carousel-indicators [data-bs-target] { background-color: rgba(255,255,255,0.5); } 
.carousel-indicators .active { background-color: #fff; }


@media (max-width: 991.98px) {
    .custom-navbar { width: calc(100% - 2rem); margin-left: 1rem; margin-right: 1rem; }
    .custom-navbar .navbar-nav { align-items: center; padding-top: 0.5rem; }
    .custom-navbar .nav-item { margin-bottom: 0.25rem; }
    .full-page-hero-carousel .carousel-caption-text h1 { font-size: 2.5rem; }
    .full-page-hero-carousel .carousel-caption-text .lead { font-size: 1.2rem; }
    .explore-button-wrapper { bottom: 8vh; }
}
@media (max-width: 768px) {
    .full-page-hero-carousel .carousel-caption-text { top: 45%; width: 90%;} 
    .full-page-hero-carousel .carousel-caption-text h1 { font-size: 2rem; }
    .full-page-hero-carousel .carousel-caption-text .lead { font-size: 1rem; margin-bottom: 1rem;}
    .explore-button-wrapper { bottom: 12vh; } 
    .explore-button { font-size: 1rem; padding: 0.6rem 1.5rem; }
    .carousel-indicators { bottom: 5vh; }
}

/* General Content Sections on Dark Theme (User provided version for #about-snippet) */
.section-title { color: #e9ecef; text-align: center; margin-bottom: 2.5rem; font-weight: 300; font-size: 2.2rem; }
#about-snippet .lead, #about-snippet p { color: #adb5bd; } 
#about-snippet .section-title { color: #f8f9fa; }
#about-snippet .btn-outline-secondary { color: #adb5bd; border-color: #adb5bd; font-family: 'Montserrat', sans-serif; } /* Added font-family from full */
#about-snippet .btn-outline-secondary:hover { color: #262626; background-color: #adb5bd; border-color: #adb5bd;}

/* Card Styling for Dark Theme (User provided version) */
.card { 
    background-color: #3a3f44; 
    color: #e9ecef; 
    border: 1px solid #495057; 
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075); 
    transition: transform .2s ease-in-out, box-shadow .2s ease-in-out; 
    border-radius: 0.75rem; 
    display: flex; /* Added from full */
    flex-direction: column; /* Added from full */
}
.card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); }
.card .card-header {
    background-color: #495057; 
    border-bottom: 1px solid #262626;
    color: #f8f9fa; /* Added from full */
}
.card .card-body { /* Added from full */
    flex-grow: 1; 
}
.card .card-title { color: #f8f9fa; }
.card .card-text .text-muted { color: #adb5bd !important; } /* User had this, keeping it */
.card .btn-primary { background-color: #0d6efd; border-color: #0d6efd; }
.card .btn-primary:hover { background-color: #0b5ed7; border-color: #0a58ca;}
.card .btn-outline-primary { color: #58a6ff; border-color: #58a6ff; } 
.card .btn-outline-primary:hover { 
    color: #262626; /* Changed from white to match full version for better contrast */
    background-color: #58a6ff; 
    border-color: #58a6ff; /* Added from full */
}
.card .card-footer { 
    background-color: #495057; 
    border-top: 1px solid #262626; 
    margin-top: auto; /* Added from full */
}
.card .card-footer .text-muted { color: #adb5bd !important; } /* User had this, keeping it */
.card .text-decoration-none { color: #79c0ff; } 
.card .text-decoration-none:hover { color: #a3d3ff; }

.card-img-top { 
    height: 280px; 
    object-fit: cover; 
    border-top-left-radius: calc(0.75rem - 1px); /* Adjusted from full for consistency with user's border-radius */
    border-top-right-radius: calc(0.75rem - 1px);/* Adjusted from full */
}
.card-img-top-placeholder { 
    background-color: #495057; 
    height: 280px; 
    display: flex; align-items: center; justify-content: center; 
    color: #adb5bd; font-size: 0.9rem; 
    border-top-left-radius: calc(0.75rem - 1px); /* Adjusted from full */
    border-top-right-radius: calc(0.75rem - 1px);/* Adjusted from full */
}

.bg-light { 
    background-color: #3a3f44 !important; 
}

.footer { background-color: #1c1c1c; color: white; padding: 2rem 0; margin-top: auto; } 
.footer a { color: #adb5bd; text-decoration: none; }
.footer a:hover { color: #fff; }
.page-header { 
    padding: 2rem 0; text-align: center; 
    background-color: #3a3f44; 
    color: #f8f9fa; 
    margin-bottom: 2rem; border-radius: 0.75rem; 
}
.page-header h1 { /* Added from full */
    color: #f8f9fa;
}
.main-content { flex-grow: 1; }
#about-snippet { padding-top: 4rem !important; padding-bottom: 4rem !important; } 
/* END OF USER PROVIDED BASE CSS */

/* Additional Styles from Full Canvas CSS (prof_edozien_complete_css) */

/* General Text Muted Style for Dark Theme (if not fully covered above) */
.text-muted {
    color: #9da5b1 !important; /* Consistent muted color for dark theme */
}

/* General Section Styling for Dark Theme (alternative to user's #about-snippet or .light-section) */
/* This is the .content-section from the full Canvas CSS, provided as an option */
.content-section { 
    background-color: #343a40; 
    color: #e9ecef; 
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-radius: 0.75rem; 
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.content-section .section-title { /* This will override the general .section-title color within .content-section */
    color: #f8f9fa; 
}

.content-section .lead, 
.content-section p:not(.card-text):not(.text-muted):not(.card-subtitle) { 
    color: #adb5bd; 
    text-align: justify;
    line-height: 1.7; 
}

.content-section .btn-outline-secondary { 
    color: #adb5bd; 
    border-color: #adb5bd; 
    font-family: 'Montserrat', sans-serif;
}

.content-section .btn-outline-secondary:hover { 
    color: #262626; 
    background-color: #adb5bd; 
    border-color: #adb5bd;
}

/* Card text within .content-section (if different from general card text) */
.content-section .card .card-text {
    color: #e9ecef;
    /* Styles here if cards inside .content-section need to be different */
    /* For now, they will inherit the general .card .card-text styles */
}

/* static/css/main.css */

/* General style for prominent content links you want to change */
.content-link-title {
    color: #f8f9fa; /* A very light grey, almost white */
    font-weight: 600;  /* Bolder - adjust as needed (500, 700) */
    text-decoration: none; /* Remove underline */
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

.content-link-title:hover,
.content-link-title:focus {
    color: #ffffff; /* Bright white on hover/focus */
    text-decoration: underline; /* Add underline on hover/focus for clarity */
}

/* Specifically for card titles if they contain links */
.card .card-title a {
    color: #f8f9fa; /* Light color for the link text */
    font-weight: 600; /* Or your preferred boldness for titles */
    text-decoration: none; /* Remove underline */
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}

.card .card-title a:hover,
.card .card-title a:focus {
    color: #ffffff; /* Brighter on hover */
    text-decoration: underline; /* Add underline on hover for affordance */
}

/* Featured Book Section Specific Styles for 3D Effect */
#featured-book .book-cover-lg {
    max-height: 450px; 
    width: auto; 
    max-width: 100%;
    object-fit: contain; 
    border-radius: 0.25rem; /* Optional: slight rounding on the cover itself */
    transform: perspective(1200px) rotateY(-8deg); /* Initial 3D tilt */
    box-shadow: -10px 10px 20px rgba(0,0,0,0.2), -2px 2px 5px rgba(0,0,0,0.1); /* Enhanced shadow for 3D */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#featured-book .book-cover-lg:hover {
    transform: perspective(1500px) rotateY(0deg) scale(1.03); /* Straighten and slightly enlarge on hover */
    box-shadow: 0px 15px 30px rgba(0,0,0,0.25), 0px 5px 10px rgba(0,0,0,0.15);
}

/* Responsive Adjustments for 3D Effect */
@media (max-width: 991.98px) {
    #featured-book .book-cover-lg { 
        transform: perspective(1000px) rotateY(-5deg); /* Less tilt on smaller screens */
    } 
}

@media (max-width: 768px) {
    #featured-book .book-cover-lg { 
        transform: perspective(800px) rotateY(0deg); /* No tilt on very small screens */
    } 
    #featured-book .book-cover-lg:hover { 
        transform: scale(1.02); /* Simpler hover on mobile */
    } 
}

/* Styles for button arrow hover effect */
.btn-with-hover-arrow .hover-arrow {
    opacity: 0;
    width: 0; /* Initially takes no space */
    transition: opacity 0.2s ease-in-out, width 0.3s ease-in-out;
}

.btn-with-hover-arrow:hover .hover-arrow {
    opacity: 1;
    width: 16px; /* The original SVG width */
    margin-left: 0.5rem; /* Creates space between text and arrow on hover */
}

/* If you have other specific contexts for title links, you can add more rules: */
/* For example, if event titles in a list are just <a> tags within a list item */
/* .event-list-item-title a { ... similar styles ... } */


/* Responsive Adjustments from Full Canvas CSS */
@media (max-width: 991.98px) {
    /* User's responsive rules for navbar & hero are already present and will take precedence if more specific */
    /* Adding general section title responsive rule from full CSS */
    .section-title { font-size: 2rem; } 
    .content-section .section-title { font-size: 2rem; } 
}

@media (max-width: 768px) {
    /* User's responsive rules for hero are already present */
    /* Adding general section title responsive rule from full CSS */
    .section-title { font-size: 1.8rem; } 
    .content-section { padding-top: 2rem; padding-bottom: 2rem; }
    .content-section .section-title { font-size: 1.8rem; } 
}

/* Styles for paragraphs and lead text within the about-content section */
.about-content p,
.about-content .lead {
    font-size: 1.05em; /* Slightly larger text */
    text-align: justify; /* Justified text for easy reading */
    color: #e9ecef; /* Light grey text for readability on the dark background (consistent with body) */
    line-height: 1.7; /* Ensures good line spacing for readability */
}

/* Headings within the about-content section */
.about-content h2,
.about-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #f8f9fa; /* Bright light color for headings on dark background */
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
    text-align: left; /* Ensure headings are left-aligned */
}

/* Specific styling for images within the about content (profile pic, book cover) */
.about-content img {
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle light border for images on dark theme */
}

/* Ensure small text (like image source or copyright) is readable on dark background */
.about-content small.text-muted {
    color: #adb5bd !important; /* Muted light grey text, consistent with your existing #about-snippet muted text */
}

/* Styling for lists within about-content (e.g., awards) */
.about-content ul.list-unstyled li {
    margin-bottom: 0.5rem;
    color: #e9ecef; /* Ensure light text for list items */
}

.about-content strong {
    font-weight: 600; /* Bolder for emphasized text */
    color: #f8f9fa; /* Slightly brighter for emphasis */
}

/* --- Adjustments for #about-snippet (the shorter "About Me" section) --- */
/* Your existing CSS already sets #about-snippet .lead, #about-snippet p { color: #adb5bd; } */
/* We just need to add font-size and text-align to this specific context. */
#about-snippet .lead,
#about-snippet p {
    font-size: 1.05em; /* Apply slightly larger font size here too */
    text-align: justify; /* Ensure justification */
    /* Color and line-height are already set by your existing base CSS for #about-snippet p/lead */
}

/* Ensure the title within the snippet is left-aligned and bright */
#about-snippet h2,
#about-snippet .section-title {
    text-align: left; /* Explicitly left-align title in snippet */
    color: #f8f9fa; /* Ensure it's a bright light color for readability */
}

#book-testimonials blockquote {
  font-size: 1.2rem;
  font-style: italic;
  color: #9b9b9b;
  max-width: 800px;
  margin: 0 auto;
}

#book-testimonials .blockquote-footer {
  margin-top: 1rem;
  font-weight: 500;
  color: #6c757d;
}