/* styles.css */

/* Basic reset for margin and padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Sticky header styling */
.sticky-header {
  background-color: #0a4a8a; /* Deep navy for header and footer */
  color: #f8f4e3; /* Light text color for contrast */

  position: sticky; /* Sticky positioning */
  top: 0;
  width: 100%;
  padding: 10px 20px;
  z-index: 1000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid rgba(244, 234, 198, 0.898); /* Temporary border for visibility */
}

/* Author name styling */
.author-name h1 {
  font-size: 24px;
  font-weight: normal;
  color: #f8f4e3
}

/* Navigation styling */
.navigation ul {
  
  list-style: none;
  display: flex;
  gap: 20px;
}

.navigation a {
  color: #f3f6e4;
  text-decoration: none;
  font-size: 18px;
  padding: 8px 12px;
  transition: background-color 0.3s;
}

.navigation a:hover {
  background-color: #555;
  border-radius: 5px;
}

/* General body background and primary text color */
body {
  background-color: #f8f4e3; /* Ivory background */
  color: #2d2d2d; /* Dark charcoal text */
}




/* Header and footer background colors */
footer {
  background-color: #2c3e50; /* Deep navy for header and footer */
  color: #f8f4e3; /* Light text color for contrast */
}


/* Link hover effect */
nav ul li a:hover {
  color: #def1d1; /* Burgundy accent on hover */
}

/* Hero Section Styling */
#hero {
  background-color: #2c3e50;  /* Dark background for contrast */
  color: #f8f4e3;             /* Light text color */
  padding: 3em 1.5em;         /* Padding around hero section */
  text-align: center;           /* Aligns text to the left */
  display: flex;
  flex-direction: column;     /* Stacks content vertically */
  align-items: center;        /* Centers content */
}

/* Hero Content for Name and Title */
.hero-content {
  max-width: 800px;           /* Limits width */
  margin: auto;
  text-align: center;           /* Aligns text inside to the left */
}

/* Large font for Author's Name using Cormorant */
#hero h2 {
  font-family: 'Cormorant', serif; /* Cormorant font for author’s name */
  font-size: 3em;                  /* Large font size */
  font-weight: 700;                /* Bold weight for emphasis */
  margin-bottom: 0.2em;            /* Small margin under name */
}

/* Smaller italic text for 'Author' using Raleway */
.author-title {
  font-family: 'Raleway', sans-serif; /* Raleway font for the title */
  font-size: 1.5em;                   /* Slightly smaller than name */
  font-style: italic;                 /* Italic style for distinction */
  margin-bottom: 1em;                 /* Space below title */
}

/* Standalone Hero Quote Styling */
.hero-quote {
  font-family: 'Cormorant', serif;    /* Cormorant for an elegant look */
  font-size: 1.2em;                   /* Larger font size for readability */
  font-style: italic;                 /* Italic for emphasis on quote */
  line-height: 1.5;                   /* Adds spacing between lines */
  color: #ecf0f1;                     /* Light text color */
  max-width: 800px;                   /* Limits width of quote */
  margin: 2em auto;                   /* Centers quote with spacing */
  text-align: center;                 /* Centers the quote text */
}



/* Hero Section Styling */
#hero {
  background-color: #2c3e50; /* Deep navy background for contrast */
  color: #f8f4e3;            /* Light text color for readability */
  padding: 3em 1.5em;        /* Adds padding around the hero content */
  text-align: left;          /* Aligns text to the left */
}

/* Centering the hero content on the page */
.hero-content {
  max-width: 800px;          /* Limits the width for readability */
  margin: auto;              /* Centers the content horizontally */
}


   /* Centering and styling the Books section title */
  #books h3 {
  font-size: 2.5em;      /* Makes the title larger */
  text-align: center;     /* Centers the title */
  margin-top: 1em;        /* Adds space above the title */
  margin-bottom: 1.5em;   /* Adds space below the title */
  color: #2c3e50;         /* Optional: Dark color for emphasis */
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Book Item Styling */
.book-item {
  display: flex;
  gap: 2em;                   /* Space between image and details */
  margin-bottom: 3em;         
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 3em;        /* Space between each book item */
}


/* Book Image Styling */
.book-image img {
  width: 250px;               /* Adjust width of the book cover */
  height: auto;               /* Maintains the aspect ratio */
  border-radius: 5px;
}

/* Large Book Image Styling */
.lgbook-image img {
  width: 400px;
  height: auto;
  border-radius: 7px;
}

/* Book Details Styling */
.book-details {
  flex: 1;                    /* Allows details to take up remaining space */
  padding: 1em;               /* Adds padding to center details visually */
}

/* Larger, bold title in Book Details */
.book-details h4 {
  font-size: 2em;             /* Makes the title larger */
  color: #2c3e50;
  margin-bottom: 1em;
}

/* Larger font size for metadata and description */
.book-details p {
  font-size: 1.2em;           /* Increases font size for readability */
  color: #333;
  line-height: 1.6;           /* Adjusts line height for readability */
  margin: 0.3em 0;
  font-weight: normal;
}


/* Button styling for Amazon links */
.buy-button {
  display: inline-block;
  padding: 0.5em 1em;
  margin-top: 1em;
  font-size: 1em;
  color: #fff;                   /* White text */
  background-color: #0a4a8a;     /* Deep navy background */
  border: none;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s;
}

/* Hover effect for the button */
.buy-button:hover {
  background-color: #083974;     /* Darker navy on hover */
}

/* Banner Section Styling */
#banner {
  display: flex;
  justify-content: center; /* Center the image horizontally */
  align-items: center;     /* Center the image vertically */
  padding: 20px 0;         /* Space above and below the banner */
  background-color: #f8f4e3; /* Match the body's background color */
}

#banner img {
  width: 100%;             /* Make the image responsive */
  height: auto;            /* Maintain the image's aspect ratio */
  max-width: 1200px;       /* Optional: Limit the maximum width */
  border-radius: 5px;      /* Optional: Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
}

section#biography {
  color: #333; /* Example: Dark gray font */
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

section#biography h2 {
  font-family: 'Cormorant', serif;
  font-size: 28px;
  margin-bottom: 15px;
  text-align: center;
}

section#biography p {
  margin-bottom: 15px;
}

#biography {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#pubbanner {
  max-width: 800px;
  margin: 20px auto; /* Adds space and centers the section */
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd; /* Optional: Frame for the banner */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

#pubbanner img {
  width: 100%;             /* Makes the image responsive */
  height: auto;            /* Maintains the aspect ratio */
  max-width: 800px;        /* Optional: Restrict the maximum width */
  display: block;          /* Ensures no inline gaps around the image */
  margin: 0 auto;          /* Centers the image */
  border-radius: 5px;      /* Optional: Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
}


.pubbanner-caption {
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
  color: #504d4b;
}


/* Responsive Design for Smaller Screens */

/* Navigation: Stack links vertically for smaller screens */
@media (max-width: 768px) {
  .navigation ul {
    flex-direction: column; /* Stack links vertically */
    gap: 10px; /* Add spacing between links */
  }

  .navigation ul li a {
    padding: 10px; /* Increase padding for easier clicking */
  }


  .navigation ul {
    display: none; /* Hide navigation links by default */
  }

  .navigation.active ul {
    display: flex; /* Show navigation when active */
    flex-direction: column; /* Stack links */
    background-color: #2c3e50; /* Background for mobile menu */
    position: absolute; /* Position it above content */
    top: 50px; /* Adjust for header height */
    right: 0;
    width: 100%; /* Full width for better usability */
    z-index: 1000; /* Keep it above other elements */
  }
}

.hamburger {
  display: none; /* Default hidden */
  flex-direction: column; /* Stack bars vertically */

  cursor: pointer; /* Pointer cursor for interactivity */
  width: 30px; /* Set width of the hamburger */
  height: 25px; /* Set height of the hamburger menu */
  z-index: 1001; /* Ensure it appears above other elements */
  
}

.hamburger span {
  background-color: #fff; /* Bar color */
  display: block; /* Make bars visible */
  height: 2px; /* Bar thickness */
  width: 100%; /* Full width of the bar */
  margin: 2px 0; /* Spacing between bars */
  transition: background-color 0.3s, transform 0.3s; /* Smooth animation */
}

/* Ensure visibility and functionality on smaller screens */
@media (max-width: 768px) {
  .hamburger {
    display: flex; /* Display hamburger on smaller screens */
  }
}


/* Hero Section: Adjust text and layout */
@media (max-width: 768px) {
  #hero h2 {
    font-size: 2em; /* Smaller font size */
  }

  .hero-quote {
    font-size: 1em; /* Adjust quote size */
  }

  .hero-content {
    padding: 1em; /* Add padding for better spacing */
  }
}

/* Books Section: Stack book details vertically */
@media (max-width: 768px) {
  .book-item {
    flex-direction: column; /* Stack image and details */
    text-align: center; /* Center text */
  }

  .book-image img {
    width: 80%; /* Adjust image size for smaller screens */
    margin: 0 auto; /* Center image */
  }

  .book-details {
    padding: 0; /* Remove unnecessary padding */
  }
}

/* General Styles for Small Screens */
@media (max-width: 480px) {
  .sticky-header {
    flex-direction: column; /* Stack header elements */
    padding: 5px; /* Reduce padding */
  }

  .author-name h1 {
    font-size: 20px; /* Smaller font for author name */
  }

  .navigation ul li a {
    font-size: 16px; /* Adjust font size */
  }

  #books h3 {
    font-size: 1.8em; /* Smaller title */
  }

  .book-details p {
    font-size: 1em; /* Adjust paragraph size */
  }
}