/* --- General Body and Layout --- */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: #f4f4f4; /* A light background for the page */
}

.row {
  display: flex; /* Use flexbox for column layout */
  flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
  justify-content: space-between; /* Distributes space between items */
  align-items: flex-start; /* Aligns items to the top */
}

/* --- Header Section (Top Hero Image) --- */
.header {
  padding: 80px 20px; /* Ample padding for a hero section look */
  text-align: center;
  background-color: #555;
  color: white;
  background-image: url('/images/south-america-map-header.jpg'); /* Example placeholder, replace with your actual image path */
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 3em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Adds some pop to the text */
}

.header h2 {
  font-size: 1.5em;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* --- Navigation Bar (Top Menu Links) --- */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #c0c0c0;
  position: sticky; /* Makes the nav stick to the top */
  top: 0;
  width: 100%;
  z-index: 1000; /* Ensures it stays on top of other content */
}

li {
  float: left; /* Keep this if you want horizontal nav items */
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; /* Ensures dropdown content is above other elements */
  top: 100%;
  left: 0; /* Align to the left edge of the parent dropdown */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.active {
  background-color: #04AA6D; /* Style for the active link */
}

/* Used for clearing floats in the nav if float: left is kept on li */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* --- Column Layout (Left, Middle, Right) --- */
.column {
  padding: 15px;
  box-sizing: border-box;
  flex-basis: auto; /* Default size before flexing */
  flex-grow: 0;     /* Don't grow by default */
  flex-shrink: 0;   /* Don't shrink by default */
}

.leftside {
  flex-basis: 200px;
  /* width: 200px; /* Redundant with flex-basis in a flex container */ */
  background-color: #fefefe;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-right: 15px;
}

.middle {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0px; /* Allows the column to shrink completely if needed */
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin-right: 15px;
}

.rightside {
  flex-basis: 200px;
  /* width: 200px; /* Redundant with flex-basis in a flex container */ */
  background-color: #fefefe;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- Content Specific Styles --- */
.center {
  text-align: center;
}

.books { /* Styles for your book cover thumbnails */
  max-width: 150px; /* Adjust this to match your desired thumbnail size */
  height: auto;
  display: block;
  margin: 0 auto 15px auto;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#BooksList img {
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
  border-radius: 2px;
  transition: transform 0.2s;
}
#BooksList img:hover {
  transform: scale(1.03);
}

.blog-block {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border-radius: 5px;
}

.blog-block h3 {
  color: #333;
  margin-top: 0;
}

.blog-block em {
  color: #777;
  font-size: 0.9em;
}

.blog-block img { /* This rule is more general for all images in blog blocks */
  box-shadow: 1px 2px 8px 0 hsl(184deg 6% 72%);
  border-radius: 4px;
  max-width: 80%; /* Now this will work because inline style is removed */
  height: auto;
  display: block;
  margin-bottom: 15px;
  border-radius: 4px;
  margin-left: auto; /* Centers the 80% wide image */
  margin-right: auto;
}

.blog-block p {
  line-height: 1.6;
  color: #555;
}

.blog-block a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

.blog-block a:hover {
  text-decoration: underline;
}

.indents {
  text-indent: 25px; /* Indent paragraphs in the bio */
  line-height: 1.6;
  margin-bottom: 1em;
}

/* --- Pagination Styles (Modified to use <a> tags as buttons) --- */
/* This container holds the buttons and centers them */
.pagination-controls {
  text-align: center;
  margin-top: 30px;
  padding: 20px;
  background-color: #f0fff0; /* Corrected: single # */
  border-radius: 5px; /* Optional: adds a nice touch */
}

/* Styles for the button-like <a> tags */
.pagination-controls .button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none; /* Remove underline */
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.pagination-controls .button:hover:not(.disabled) {
  background-color: #45a049;
}

.pagination-controls .button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none; /* Prevents clicks on disabled links */
}

/* --- Form and Search Styles --- */
form input[type="text"], form input[type="submit"] {
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

form input[type="submit"] {
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

form input[type="submit"]:hover {
  background-color: #0056b3;
}

#searchResultsContainer { /* Corrected ID spelling */
  margin-top: 15px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

/* --- Footer --- */
.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
  /* clear: both; /* Redundant with flexbox for main layout */ */
}

.footer p {
  margin: 0;
}

.footer a {
  color: #f1f1f1;
}

/* Styles for the bio image in the right column */
#Contact img {
  max-width: 100%; /* Ensure it scales within its container */
  height: auto;
  display: block; /* Make it a block element */
  margin: 0 auto 15px auto; /* Center it and add bottom margin */
  border: 1px solid #ddd; /* Keep styling consistent with other images if desired */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Keep styling consistent with other images if desired */
}


/* --- Responsive Design (Basic Example) --- */
@media screen and (max-width: 768px) {
  .column {
    flex-basis: auto; /* Reset flex-basis for full width */
    flex-grow: 1;     /* Allow them to grow to full width */
    width: 100%;      /* Ensure they take full width */
    margin-right: 0;
    margin-bottom: 20px; /* Add space between stacked columns */
  }

  /* Specific override for flex items when stacking */
  .leftside, .middle, .rightside {
    width: 100%;
    margin-right: 0; /* Remove right margin when stacked */
  }

  ul li {
    float: none; /* Stack nav items */
  }

  ul li a, .dropbtn {
    text-align: left;
    display: block;
  }
}

#Nav a.active {
  background-color: green;
  color: white;
  font-weight: bold;
}

#Nav a {
  color: blue;
  text-decoration: none;
  padding: 8px 12px;
  display: block;
}

#Nav li {
  display: inline-block;
}

.dropdown-content a.active {
  background-color: darkgreen;
}

.hero {
  background-image: url('images/peru-jungle-trail.jpg');
  height: 350px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.hero h2 {
	font-size: 2em;
}

#Contact img {
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  border-radius: 50%; /* optional if it's a circular or soft-edged image */
  max-width: 100%;
  height: auto;
}