/* LORE AND INTRIGUE SECTION STYLING */
.lore-section {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #7b1f1f; /* Dark rich red */
  text-align: center;
}

/* Heading spacing */
.lore-section h2 {
  font-size: 2rem;
  color: #d5b97d; /* Gold tone */
  margin-bottom: 2.5rem;
  letter-spacing: 1px;
}

/* Container for the cards */
.lore-section .wp-block-columns {
  display: flex;
  justify-content: center;
  gap: 2rem; /* Space between cards */
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual card */
.lore-section .wp-block-column {
  flex: 1 1 280px; /* Flexible layout with a base size */
  max-width: 300px;
}

/* Image/card fix */
.lore-section img {
  width: 100%;
  height: auto;
  border: none;
}
.lore-header {
  border-top: 4px solid #E9BB59; /* Bright Soft Gold */
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.books-column img {
  aspect-ratio: 3 / 5;
  height: auto;
  display: block;
}
.about-cover {
  border-top: 4px solid #d4af37;
  border-bottom: 4px solid #d4af37;
  padding: 0.5rem 0; /* Optional: adds breathing space */
}
.starry-header {
  border-top: 4px solid #d4af37;
  border-bottom: 4px solid #d4af37;
  padding: 0.5rem 0;
}
.quote-section {
  border-top: 4px solid #d4af37 !important;
  padding-top: 0.5rem !important;
}
.site-footer {
  border-top: 3px solid #d4af37;
  padding-top: 0rem;
}
.books-header {
  border-top: 4px solid #d4af37 !important;
  border-bottom: 4px solid #d4af37 !important;
  padding: 0.rem 0 !important;
}
.lore-tapestry {
  border-top: 4px solid #d4af37 !important;
  border-bottom: 4px solid #d4af37 !important;
  padding: 0.5rem 0 !important; /* Optional spacing inside */
}
.about-banner {
  height: 250px !important;
  max-height: 250px !important;
  min-height: 250px !important;
  overflow: hidden;
}
.contact-header {
  border-top: 4px solid #E9BB59;
  border-bottom: 4px solid #E9BB59;
  border-left: none;
  border-right: none;
}
.blog-header {
  border-top: 4px solid #E9BB59;
  border-bottom: 4px solid #E9BB59;
  border-left: none;
  border-right: none;
}
.pigeon-cover {
  height: 250px !important;
  max-height: 250px !important;
  min-height: 250px !important;
  overflow: hidden;
}
.dragon-cover {
  border-top: 4px solid #E9BB59;
  border-bottom: 4px solid #E9BB59;
  border-left: none;
  border-right: none;
}
.map-cover {
  border-top: 4px solid #E9BB59;
  border-bottom: 4px solid #E9BB59;
  border-left: none;
  border-right: none;
}
.burgundy-banner {
  border-top: 4px solid #E9BB59;
  border-bottom: 4px solid #E9BB59;
  border-left: none;
  border-right: none;
}
.ritual-cover {
  border-top: 4px solid #E9BB59;
  border-bottom: 4px solid #E9BB59;
  border-left: none;
  border-right: none;
}
/* === Astra: Parchment background on MOBILE ONLY === */
@media (max-width: 768px) {
  /* Set the parchment */
  html,
  body,
  .site,
  .site-content,
  .ast-container,
  .ast-plain-container,
  .ast-page-builder-template,
  .ast-separate-container .site-content > .ast-container,
  .ast-separate-container .ast-article-single {
    background-color: #f8f3e4 !important; /* your parchment tone */
  }

  /* Prevent inner blocks/sections from forcing white panels */
  .entry-content,
  .wp-block-group,
  .wp-block-cover,
  .ast-row,
  .elementor-section {
    background-color: transparent !important;
  }
}
/* === Astra: fix white mobile header === */
@media (max-width: 768px) {
  .ast-mobile-header-wrap,
  .ast-mobile-header-content,
  .ast-header-break-point .main-header-bar,
  .ast-header-break-point .ast-primary-header-bar {
    background-color: #6b0d0f !important; /* your burgundy */
  }

  /* optional: make the menu dropdown match */
  .ast-header-break-point .main-header-menu,
  .ast-header-break-point .ast-builder-menu-mobile {
    background-color: #6b0d0f !important;
  }
  /* make mobile text readable on dark background */
  .ast-header-break-point .main-header-menu a,
  .ast-header-break-point .ast-builder-menu-mobile a {
    color: #f8f3e4 !important; /* parchment text */
  }
}
/* === ASTRA MOBILE HEADER (covers header-builder + transparent) === */
@media (max-width: 921px) {
  /* Force burgundy bar on mobile */
  .ast-header-break-point .main-header-bar,
  .ast-header-break-point .ast-primary-header-bar,
  .ast-header-break-point .site-header {
    background-color: #6b0d0f !important;
  }

  /* If Transparent Header is enabled, override it on mobile */
  body.ast-theme-transparent-header.ast-header-break-point .main-header-bar,
  body.ast-theme-transparent-header.ast-header-break-point .ast-primary-header-bar {
    background-color: #6b0d0f !important;
  }

  /* Mobile off-canvas / popup menu background */
  .ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
  .ast-header-break-point .ast-builder-menu-mobile {
    background-color: #6b0d0f !important;
  }

  /* Menu link color in mobile header + drawer */
  .ast-header-break-point .main-header-menu a,
  .ast-header-break-point .ast-builder-menu-mobile a {
    color: #f8f3e4 !important; /* parchment text */
  }

  /* Hamburger / close icon color */
  .ast-header-break-point .menu-toggle .ast-mobile-svg,
  .ast-mobile-popup-drawer.active .ast-close-svg {
    fill: #f8f3e4 !important;
  }

  /* Site title / tagline inside the header */
  .ast-header-break-point .site-title a,
  .ast-header-break-point .site-description {
    color: #f8f3e4 !important;
  }
}
/* === Final Mobile Polish: Astra === */
@media (max-width: 768px) {

  /* 1. Add a gold accent line below the header */
  .ast-header-break-point .main-header-bar {
    border-bottom: 3px solid #e9b859 !important; /* your gold tone */
  }

  /* 2. Slightly expand mobile buttons for touch comfort */
  .wp-block-button__link,
  button,
  input[type="submit"],
  .ast-button {
    padding: 14px 22px !important;
    border-radius: 8px !important;
  }

  /* 3. Tighten spacing between hero banner and book section */
  .entry-content > .wp-block-cover:first-of-type {
    margin-bottom: 0.75rem !important;
  }

  /* Optional: ensure footer stays clean and consistent */
  .site-footer {
    border-top: 3px solid #e9b859 !important;
  }
/* Target the Cover block container directly */
.wp-block-cover.contact-header {
  height: 250px !important;
  min-height: 250px !important;
  max-height: 250px !important;
  border-top: 4px solid #E9BB59 !important;
  border-bottom: 4px solid #E9BB59 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}