body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #222222;
  color: #cfcfcf; /* Very light gray—almost white but still distinct, was #d9d9d9*/
  
}



p {
  margin-bottom: 1.5em;
}




/* ====== LINK STYLES ====== */
a {
  color: inherit;              /* Same as surrounding text */
  text-decoration: underline;  /* Underlined by default */
  font-weight: normal;         /* Normal unless <b> used inline */
  font-style: normal;          /* Normal unless <i> used inline */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:visited {
  color: inherit; /* same as unvisited */
}

a:hover {
  color: #ffffff; /* pure white on hover */
  /* text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* subtle glow effect */
}

a:active {
  color: #cccccc; /* slightly dim when clicked */
  text-shadow: none;
}





.site-nav li a.current {
  color: #D700DD;       /* Same as hover, indicates active page */
  text-decoration: underline; /* Optional: makes it extra clear */
}

.container {
  max-width: 800px;      /* smaller max width, reins in content on large screens */
  margin: 32px auto;     /* keeps it centered */
  padding: 0 20px;       /* slight padding on sides for smaller screens */
  margin-bottom: 200px;    /* adds space below main content before footer */
}


/* Wider layout for the homepage */
.home-container {
  max-width: 1200px;   /* You can adjust this to taste */
  margin: 0 auto;
  padding: 2rem;
}


.hero {
  background-image: url('assets/cropped-ManInWoodsOrig.jpg');
  background-size: cover;         /* fills width and height */
  background-position: center bottom;     /* keeps bottom visible */
  background-repeat: no-repeat;  /* optional, doesn't hurt */
  background-attachment: fixed;
  height: 80vh;               /* adjust how much of image shows */
  width: 100%;
  position: relative;
}

.hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;               /* full width of the image */
  color: #fff;
  text-align: left;
  padding: 40px 20%;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.25) 0%,   /* subtle dark at bottom */
    rgba(0,0,0,0) 100%     /* fully transparent at top */
  );
}

/* Header font for "Jeff Wade" */
.hero-overlay h1 {
  margin: 0;
  font-size: 2.2rem;
  color: #d9d9d9;                /* ensure header is off white */
}

/* Normal font for tagline */
.hero-overlay .tagline {
  margin: 0;
  font-size: 1rem;
  color: #d9d9d9;                /* ensure tagline is off white */
}

/* Responsive adjustment for smaller screens */
@media(max-width: 720px) {
  .hero-overlay {
    padding-left: 10%;           /* reduce left padding on narrow screens */
    padding-right: 10%;          /* some right padding too */
  }

  .hero-overlay h1 {
    font-size: 1.6rem;           /* smaller header on mobile */
  }

  .hero-overlay .tagline {
    font-size: 0.9rem;           /* smaller tagline on mobile */
  }
}


/* ---------- COMPACT HERO (for subpages) ---------- */
.hero-compact {
  background-image: url('assets/cropped-ManInWoodsOrig.jpg');
  background-size: cover;
  background-position: center top;   /* shows top portion */
  background-attachment: fixed;      /* image stays still on scroll */
  height: 220px;                     /* top strip height */
  display: flex;
  align-items: center;               /* vertical center */
  justify-content: flex-start;       /* left alignment for text */
  padding-left: 20%;                 /* controls text position */
  position: relative;
}

.hero-compact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.0); /* fully transparent overlay (0.0 = none, 0.4 = subtle shade) */
}

.hero-compact .hero-text {
  position: relative; /* keep text above overlay */
  color: #fff;
  z-index: 1;
  text-align: left;
}

.hero-compact .hero-text h1 {
  font-size: 1.8rem;
  margin: 0;
}

.hero-compact .tagline {
  font-size: 1rem;
  margin: 6px 0 0;
  color: #f6f5f3;
}




/* Ensure main content scrolls over fixed hero */


.tagline {
  color: #cfc6b8;
  margin-top: 6px;
}

.books-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.book {
  background: #111214;
  padding: 14px;
  border-radius: 8px;
  text-align: center;
}

/* Navigation */
.site-nav {
  background: #222222;
  padding: 12px 0;
}

.site-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 32px; /* space between menu items */
  margin: 0;
  padding: 0;
}

.site-nav li a {
  color: #f6f5f3;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: color 0.3s;
}

.site-nav li a:hover {
  color: #D700DD; /* subtle hover effect */
}

.site-nav hr {
  border: none;
  border-top: 1px solid #555; /* subtle divider */
  margin: 8px 0 0 0;
}


/* Dropdown container */
.site-nav li.dropdown {
  position: relative;
}

/* Hide submenu by default */
.site-nav li.dropdown ul.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;                /* directly below parent item */
  left: 0;
  background-color: #222222;
  padding: 8px 0;
  min-width: 180px;         /* adjust width as needed */
  border-radius: 6px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 1000;
  list-style: none;
}

/* Show submenu on hover */
.site-nav li.dropdown:hover ul.dropdown-menu {
  display: block;
}

/* Style submenu links */
.site-nav li.dropdown ul.dropdown-menu li a {
  display: block;
  padding: 8px 20px;
  color: #f6f5f3;
  text-decoration: none;
  font-weight: normal;
  font-size: 0.95rem;
  transition: background 0.3s;
}

.site-nav li.dropdown ul.dropdown-menu li a:hover {
  background-color: #D700DD;  /* subtle hover effect for submenu */
  color: #fff;
}

/* Optional: Responsive for mobile */
@media(max-width: 720px) {
  .site-nav li.dropdown ul.dropdown-menu {
    position: static;       /* submenu flows naturally on small screens */
    box-shadow: none;
    border-radius: 0;
  }
}




/* Promo Section */
.promo-section {
  margin: 40px 0;
}

.promo-content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 24px; /* space between image and text */
}

.promo-left img {
  width: 250px;       /* much larger than footer */
  max-width: 100%;    /* responsive */
  height: auto;
  border-radius: 8px;
}

.promo-right {
  max-width: 600px;
}

.promo-right h1 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.promo-right h3 {
  font-size: 1.25rem;
  margin: 12px 0;
}

.btn-promo {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 20px;
  border-radius: 6px;
  background: #D700DD;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.btn-promo:hover {
  background: #F823FE;
}

/* Reviews Section */
.reviews-section {
  margin-top: 40px;
  max-width: 900px;
}

.reviews-section h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-align: left;
}

.review {
  margin-bottom: 24px;
}

.review hr {
  border: none;
  border-top: 1px solid #555;
  margin: 12px 0;
}

.site-footer {
  background: #222222;
  padding: 20px;
  color: #9aa0a6;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center horizontally on page */
  align-items: center;     /* Vertically align image and text */
  gap: 200px;               /* Space between image and text */
  text-align: center;      /* Centers text when wrapping */
}

.footer-left img {
  width: 180px; /* larger than before, adjust as needed */
  max-width: 100%; /* ensures it scales down on small screens */
  height: auto; /* keeps original aspect ratio */
}

.footer-right {
  display: flex;
  flex-direction: column; /* Stack text and button vertically */
  justify-content: center; /* Align content vertically with image */
  align-items: flex-start; /* Keep left alignment within the block */
}

.footer-right p:first-child {
  font-size: 1.5rem;   /* Larger title-style text */
  font-weight: bold;
  margin: 0 0 6px 0;   /* Space below the title */
  color: #ffffff;      /* Bright white for contrast */
}

.footer-right p {
  font-size: 1rem;     /* Body text size */
  margin: 4px 0;       /* Small spacing between lines */
  color: #cfc6b8;      /* Slightly muted for readability */
}

.footer-privacy {
  margin-top: 24px;      /* Space above privacy text */
  text-align: center;    /* Center on page */
}

.footer-privacy p {
  font-size: 0.85rem;    /* Smaller font than promo */
  color: #9aa0a6;        /* Muted color */
  margin: 0;
}

.btn-footer {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 18px;   /* Slightly larger button */
  border-radius: 6px;
  background: #D700DD;
  color: #ffffff !important;
  text-decoration: none;
  font-weight: bold;    /* Make button text bold */
  font-size: 1rem;      /* Button text size */
  transition: background 0.3s ease;
}

.btn-footer:hover {
  background: #F823FE;  /* Slightly brighter purple on hover */
}

@media(max-width:720px) {
  .hero-text h1 {
    font-size: 28px;
  }
 .footer-content {
    flex-direction: column;
    align-items: center;
  }
  .footer-right {
    align-items: center; /* Center text on small screens */
  }
}