@font-face {
  font-family: "Granjon";
  src: url("src/fonts/Granjon-LT-Std-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  /*transform: scaleY(1.5);
            transform-origin: top;*/
}

@font-face {
  font-family: "Garamond Pro Regular";
  src: url("src/fonts/AGaramondPro-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


body {
  font-family: "Roboto", sans-serif;
  color: #696160;
  font-weight: 300;
  line-height: 190%;
  font-size: 1rem;
  padding-bottom: 50px; /* Adjust to match the height of your footer */
  min-height: 100vh; /* Ensure the content takes at least the full viewport height */
}

main {
  flex-grow: 1; /* Makes sure main content takes up all available space */
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Granjon", serif;
  font-weight: normal;
  color: #453f3e;
  text-transform: none;
  /*text-transform: uppercase;*/
}

a {
  color: #453f3e;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #f9a11c;
  text-decoration: none;
}
/* Optional: If you have a container with a dynamic height, set a min-height for the main content */
.main-content {
  min-height: calc(
    100vh - 60px
  ); /* Make sure content doesn't overlap the footer */
}

/* Navbar visual alignment */
.navbar {
  align-items: center;
}

.navbar .container-fluid {
  flex-wrap: nowrap; /* allows collapsing on mobile */
}

.navbar-toggler {
  order: 1;  
}

.navbar-brand {
  order: 1; /* logo on the left */
  margin-top: 0;
}

/* Ensure collapsed nav menu appears below logo */
.navbar-collapse {
  order: 2; /* menu on the rigght */
  width: auto;
}

/* Navbar styles */
.navbar-nav {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;  /*url(http://127.0.0.1:5501/index.html)*/
  text-transform: uppercase;
}

.navbar-nav .nav-link {
  font-size: 0.9rem;
  color: #807674;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #f9a11c;
}

/* Active link style */
.nav-link.active {
  color: #f9a11c;
    font-weight: 400;
    color: var(--bs-primary) !important;
    border-bottom: 1px solid var(--bs-primary);
}

/* Customize the hamburger menu */
.navbar-toggler-icon {
  background-color: #fff; /* Change the color of the hamburger icon */
}

/*carousel styles*/
.carousel {
  background-color: #fef1dd;
}

blockquote {
  font-family: "Garamond Pro Regular", serif;
  font-size: 0.9rem;
  color: #55504e;
  border-left: 2px solid #f9a11c;
  padding-left: 1rem;
  margin: 1.5rem 0;
}


/* Custom button color */
:root {
  --bs-primary: #f8a01b;
  --bs-primary-rgb: 248, 160, 27;

  /* optional: adjust hover and active tones */
  --bs-primary-hover: #dc8d18;  /* ~10% darker */
  --bs-primary-active: #c67c14; /* ~20% darker */
}

/* Apply custom primary color to all primary buttons */
.btn-primary {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary-hover);
  border-color: var(--bs-primary-hover);
  color: #fff;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--bs-primary-active);
  border-color: var(--bs-primary-active);
  color: #fff;
}

/* Optional: outline version */
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  background-color: var(--bs-primary-active);
  border-color: var(--bs-primary-active);
  color: #fff;
}



/* Social icons block */
.social-container {
  display: inline-block;
  position: relative;
  width: 30px; /* Fixed width of the icon container */
  height: 30px; /* Fixed height of the icon container */
  margin: 0 10px; /* Space between icons */
}

/* Make sure both images are positioned on top of each other */
.social-container img {
  width: 100%; /* Fill container width */
  height: 100%; /* Fill container height */
  transition: opacity 0.3s ease; /* Smooth transition for opacity */
  object-fit: contain; /* Ensure images maintain their aspect ratio */
  position: absolute; /* Stack both images on top of each other */
  top: 0;
  left: 0;
}

/* Initially hide the hover images */
.social-container img.amazon-hover,
.social-container img.barnesNoble-hover,
.social-container img.booktok-hover,
.social-container img.ebay-hover,
.social-container img.goodreads-hover {
  opacity: 0; /* Hide by default */
}

/* On hover, show the hover image and hide the original */
.social-container:hover img.amazon-original {
  opacity: 0; /* Hide the original image */
}

.social-container:hover img.amazon-hover {
  opacity: 1; /* Show the hover image */
}

.social-container:hover img.barnesNoble-original {
  opacity: 0; /* Hide the original image */
}

.social-container:hover img.barnesNoble-hover {
  opacity: 1; /* Show the hover image */
}

.social-container:hover img.booktok-original {
  opacity: 0; /* Hide the original image */
}

.social-container:hover img.booktok-hover {
  opacity: 1; /* Show the hover image */
}

.social-container:hover img.ebay-original {
  opacity: 0; /* Hide the original image */
}

.social-container:hover img.ebay-hover {
  opacity: 1; /* Show the hover image */
}

.social-container:hover img.goodreads-original {
  opacity: 0; /* Hide the original image */
}

.social-container:hover img.goodreads-hover {
  opacity: 1; /* Show the hover image */
}

/* Footer */
footer {
  width: 100%;
  background-color: #fff;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}

/* face in and out */
/* Define the fadeIn animation */
.fadeIn {
  opacity: 0; /* Start fully transparent */
  animation: fadeInEffect 1s ease-out forwards; /* Apply the fadeInEffect animation */
}

/* Keyframes for the fadeIn effect */
@keyframes fadeInEffect {
  0% {
    opacity: 0; /* Start transparent */
  }
  100% {
    opacity: 1; /* End fully visible */
  }
}

/* Center align on smaller screens */
@media (max-width: 991.98px) {
  .signature-wrapper {
    justify-content: center;
  }

  .nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  footer {
    padding: 10px;
    font-size: 14px;
  }

  body {
    padding-bottom: 50px; /* Extra space for smaller screens */
  }

.navbar .container-fluid {
  flex-wrap: wrap; /* allows collapsing on mobile */
}

  .navbar-brand {
    margin-top: 0px;
  }

  /* MOBILE: stack hamburger → brand → menu (below) */
.navbar-toggler {
  order: 1;
  margin-right: 0.5rem;
  z-index: 2;
}

.navbar-brand {
  order: 2;
  margin-top: 0;
}

.navbar-collapse {
  order: 3;
  width: 100%;
}
  /* Optional: Style the menu items when collapsed */
  .navbar-nav .nav-link {
    font-size: 1rem; /* Increase the font size on mobile */
    padding: 0.5rem 1rem; /* Add padding around the links */
  }

  .navbar-nav .nav-link:hover {
    color: #f9a11c; /* Optional: Hover color */
  }

  .d-flex.align-items-center {
    align-items: center !important;
    /* ensure vertical centering inside flex */
  }
}