/* v3 — Bootstrap Pricing template conversion. Pure Bootstrap 5 markup;
   this file holds only what utility classes can't express. */

body {
  font-family: "Source Sans 3", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
  font-family: "Plus Jakarta Sans", sans-serif;
}

.gl-hero {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 22, 20, 0.55) 0%, rgba(9, 9, 9, 0.75) 100%),
              url("../images/hero-background.jpg") center top / cover no-repeat;
  min-height: 100vh;
  /* 100vh on mobile is measured against the viewport before the address-bar
     chrome collapses, pushing the bottom-anchored text below the fold until
     the user scrolls. 100dvh tracks the actually-visible viewport instead;
     browsers that don't support dvh ignore this line and keep the 100vh
     fallback above. */
  min-height: 100dvh;
}

/* Breaks out of .container-xxl's centered max-width to sit near the true
   left edge of the viewport, rather than the container's inner edge. */
.gl-hero-cta {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
}

/* .container-xxl (used by the nav) stays fluid/edge-hugging below this
   breakpoint and only becomes a centered fixed-width box at xxl, so match
   that same point rather than the earlier navbar-collapse breakpoint. */
@media (min-width: 1400px) {
  .gl-hero-cta {
    top: 5rem;
    left: 5rem;
  }
}

/* Narrow viewports crop the sides of the cover image; the couple's faces sit
   right of center in the source photo (~60-70% across), so shift the focal
   point right instead of the default center to keep them in frame. */
@media (max-width: 767.98px) {
  .gl-hero {
    background-position: 70% top;
  }
}

.gl-nav {
  z-index: 1030;
  background-color: rgba(9, 9, 9, 0.99);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

#home,
#about,
#programmes,
#faq,
#contact,
#gl-story-copy {
  scroll-margin-top: var(--gl-nav-height, 76px);
}

.gl-nav .navbar-brand {
  font-size: 1.5rem;
}

.gl-nav .nav-link,
.gl-nav .btn {
  font-size: 1.1rem;
}

.gl-about-copy {
  font-size: 1.15rem;
}

.gl-learn-more {
  display: inline-block;
  margin-bottom: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.gl-learn-more:hover {
  text-decoration: underline;
}

.gl-hanging-indent {
  padding-left: 3rem;
  text-indent: -3rem;
}

.rounded-pill {
  background-color: #5f9ffc !important;
}

.card-header:has(.programme-title) {
  background-color: #0d6efd;
}

.programme-title {
  color: #fff;
}

.badge {
  background-color: rgba(9, 9, 9, 0.95) !important;
}

/* Contact form's introductory-chat mini calendar: only dates with
   availability are clickable. FullCalendar renders day numbers as <a>
   tags, which pick up the site's global link color/underline unless
   overridden here. Mirrors #date-calendar in booking/css/booking.css. */
#intro-calendar {
  max-width: 480px;
}

#intro-calendar .gl-date-unavailable {
  cursor: not-allowed;
  background-color: #f8f9fa;
}

#intro-calendar .gl-date-unavailable .fc-daygrid-day-number {
  color: #adb5bd;
  text-decoration: none;
  cursor: not-allowed;
}

#intro-calendar .gl-date-available {
  cursor: pointer;
}

#intro-calendar .gl-date-available .fc-daygrid-day-number {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

#intro-calendar .gl-date-available:hover {
  background-color: #e7f1ff;
}

#intro-calendar .gl-date-selected {
  background-color: #cfe2ff;
}