/* BonBooking marketing site - custom overrides */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/* Header menu item styles */
@media (min-width: 1024px){
  .header-menu li a{
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
  }
  .header-menu li a:hover{
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    text-decoration-line: underline;
  }
}

/* Banner subtitle: lighter weight than the template's font-semibold for a
   more refined hierarchy with the heavier h1. */
.bg-cover h2{
  font-weight: 400;
}

/* Features dropdown - show panel on hover, but only on devices with real
   hover support (mouse). On touch devices that match lg: (iPad landscape
   etc.) the synthetic hover would stick the panel open after navigation;
   there, only the JS click-to-toggle in bon_website/dropdown.js controls it.
   Note: ".group\/menu" is the Tailwind named-group class used in the HTML
   and works fine as a CSS hook here. */
@media (hover: hover) {
  .group\/menu:hover > #features-menu-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }
}

/* Intro paragraph: 1.5rem (1.5x body) to set lead apart from regular copy */
article .content .body p:first-child{
  font-size: 1.5rem;
  line-height: 2rem;
}

/* Extra spacing before button paragraphs in content */
p + p:has(.button){
  margin-top: 2rem;
}

.main-content .content.section {
  h2{
    margin-top: 3rem;
  }
}
.article-content h2{
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.main-content {
  ul li{
    margin-bottom: 0.5rem;
  }
  ul li {
    &:last-child{
      margin-bottom: 0px;
    }
  }
}

/* Contact CTA section: the inner text block uses margin_bottom: none so the
   section closes flush, but the trailing button paragraph still needs room
   above the section padding edge. */
.section.contact .image-text p:last-child{
  margin-bottom: 2rem;
}