@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

html {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

body {
  border-top: 8px solid #257953;
  font-size:1rem;
  line-height: 1.625;
  color:#000;
  text-align:left;
}

.button.is-primary-green { 
  background-color:#257953;
  border-color: transparent;
  color: #fff;
}

.blog-index section:first-of-type { padding: 3rem 1.5rem 1.5rem; }
.blog-index section:not(:first-of-type) { padding: 0 1.5rem 1rem; }
.blog-index section .container { padding-bottom: 1.5rem; border-bottom: solid #f4f5f7 2px; }
.blog-index section:last-of-type {  padding: 1.5rem 1rem; }
.blog-index section:last-of-type .container { border-bottom: none; }

.navbar-item img { max-height: 4.75rem; }

time {
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
  color: #6b7280;
}

.content p:not(:last-child) { margin-bottom: 2rem; }

a { color: #3E75ED; }

ul { margin-bottom: 2em; }

.has-text-primary {
    color: #257953 !important;
}


/******************************
  HOMEPAGE aka BLOG INDEX PAGE
******************************/

.hero .image img {
  object-fit: cover;
  border-radius: 6px; /* Matches Bulma's default rounded corners */
}

.hero .title, .hero .subtitle {
  font-family: 'Arial', sans-serif; /* Example font, replace with your brand's font */
}

.hero .has-background-success-light {
  background-color: #e6f7ef; /* A lighter shade for better readability */
}

.hero .column.has-background-success-light {
  display: flex;
  align-items: center;
}

.hero .box {
  width: 100%;
}

.title {
  font-size: 1.5rem;
  line-height: 1.125;
  color: #000;
  letter-spacing: -.025em;
}

.title-date {
  margin-top:1rem;
}

.excerpt {
  margin: 1rem 0;
}

.fa-calendar-day {
  color: #3E75ED;
}

.read-more {
  font-weight: 500;
  text-decoration: underline;
}

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-image {
  overflow: hidden;
}
.card-image img {
  transition: transform 0.3s ease;
}
.card:hover .card-image img {
  transform: scale(1.1);
}

.ad-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ad-content {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-section {
    background: #f8f8f8;
    padding: 20px 0;
}

.books-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.book-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: calc(33.333% - 20px); /* Assuming you want 3 books per row, adjust as needed */
    max-width: 300px;
    padding: 15px;
    text-align: center;
    transition: transform 0.3s ease;
}

.book-card:hover {
    transform: translateY(-5px);
}

.book-cover {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.book-title {
    margin-top: 10px;
    font-size: 1.2em;
}

.book-description p {
    font-size: 0.9em;
    color: #666;
}

.book-links {
    margin: 15px 0;
}

.book-links a {
    margin: 0 5px;
}

.book-links img {
    height: 40px;
}

.learn-more {
    display: inline-block;
    background-color: #257953; /* Your primary green */
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    font-weight: bold; /* Optional: for emphasis */
    text-align: center; /* Optional: ensures centered text */
    width: 100%; /* Optional: makes the button full width of its container */
}

.learn-more:hover {
    background-color: #1e5f45; /* A darker shade of your green for hover effect */
}

.level-item.button.is-link.is-light,
.button.is-link.is-light.is-large.is-green {
    background-color: #e8f5e9; /* Light green background */
    color: #257953; /* Dark green text for contrast */
    border-color: transparent; /* Assuming you want no visible border */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
}

.level-item.button.is-link.is-light:hover,
.button.is-link.is-light.is-large.is-green:hover {
    background-color: #c8e6c9; /* Slightly darker green on hover */
    color: #1b5e20; /* Even darker text on hover for more contrast */
}

.level-item.button.is-link.is-light:focus,
.button.is-link.is-light.is-large.is-green:focus {
    /* Optional: Focus state for accessibility */
    border-color: #257953;
    box-shadow: 0 0 0 0.125em rgba(37, 121, 83, 0.25);
}

.button.is-link.is-light.is-large.is-green


/******************************
  INDIVIDUAL POST PAGE
******************************/

.content h1:not(:first-child) { 
  letter-spacing: -.025em;
  margin: .5rem 0;
  line-height: 2.5rem;
}

.other-posts {
  font-size: .875rem;
  font-weight: 900;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.further-reading {
  border-bottom: solid #d2d6dc; 
  padding: 1.5rem 0;
}

.further-reading h3 {
  color: #3E75ED;
}


/* ----------------------------------------------
   Layout and Container Styles
---------------------------------------------- */

/* Ensure the page container is narrower on larger screens */
@media (min-width: 768px) {
  .container.book-container {
    max-width: 75% !important;
    margin: 0 auto !important;
  }
}

/* Line between blog posts on blog index page */
.blog-index section .container { 
  border-bottom: solid #f4f5f7 2px;
  padding-bottom: 1.5em;
}
section:last-of-type .container { 
  border-bottom: none; 
}

.book-section {
  background-color: #ffffff; /* White background for even sections */
}

.book-section-alt {
  background-color: #f0f0f0; /* Light gray background for odd sections */
}

/* Book container headings */
.container.book-container h4 {
  margin-bottom: 0;
}

.container.book-container .button {
  margin-top: 1.35em;
}


/* ----------------------------------------------
   Book Figure Styles (for Book Covers)
---------------------------------------------- */

/* Book cover spine */
.figure {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

.figure img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease-in-out;
}

/* Spine shadow effect on the book cover */
.figure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
  box-shadow: inset -1px 0 2px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease-in-out;
}

/* ----------------------------------------------
 SEARCH
---------------------------------------------- */

#search-hits {
  position: absolute;
  z-index: 1000;
  background: white;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#search-hits .box {
  margin-bottom: 0.5rem;
}

#search-hits .box:last-child {
  margin-bottom: 0;
}

.ais-SearchBox-form {
  display: flex;
}

.ais-SearchBox-input {
  flex-grow: 1;
}

.ais-SearchBox-submit,
.ais-SearchBox-reset {
  display: none;
}


/* ----------------------------------------------
   Back to Top Button Styles
---------------------------------------------- */

/* Back to Top Button */
#myBtn {
  opacity: 0; /* Start invisible */
  transition: opacity 0.5s ease; /* Smooth fade-in */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Ensure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #257953; /* Button background */
  color: white; /* White text */
  cursor: pointer; /* Add a pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
}

/* Show the button when the user has scrolled */
#myBtn.show {
  opacity: 1; /* Fully visible when scrolled */
}

/* Button hover effect */
#myBtn:hover {
  background-color: #333; /* Darker background on hover */
}

/* Extra small devices (portrait phones, less than 768px)
No media query for `mobile` since this is the default
-------------------------------------------------- */

@media screen and (max-width: 768px) {
  .hero .column.is-half, .hero .column.has-background-success-light {
    width: 100%; /* Full width on mobile for better layout */
  }
  .hero .column {
    width: 100%;
  }
  .hero .column.has-background-success-light {
    height: auto; /* Reset height for mobile to prevent overflow issues */
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .book-card {
        width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .book-card {
        width: 100%;
    }
}

/* Tablets (tablets, 769px and up) */
@media (min-width: 768px) { 
  .title-container { margin-bottom: 2rem; }
  .title { font-size: 1.875rem; }
}

/* Desktops (desktops, 1024px and up) */
@media (min-width: 1024px) {  }

/* Widescreen devices (large desktops, 1216px and up) */
@media (min-width: 1216px) {  }

/* Full HD devices (extra large desktops, 1408px and up) */
@media (min-width: 1408px) {  }