/* The navbar in the booking demo's layout (Daria, 23 Oct 2026): logo left, plain text links centred, one black button
   right, the same sizes as booking.esploristudio.com's header (14px links at 75% opacity, 12px-radius button,
   44px logo, 18px above and below). Loaded on every page after site.css, whose old pill navbar rules it overrides.

   Background (Daria, 23 Oct 2026): a frosted bar exactly the navbar's height, no fade below it. Webflow's gradient
   let the light-blue sections and navy headings show through half-white behind the text links, which looked dirty;
   a solid white bar with a long fade was too thick. The blur sits on .navbar itself; the two scrims are flat
   translucent colours that navbar-theme.js still crossfades (white on light sections, near-black on dark ones). It
   also puts is-dark on .navbar over a dark section, which only changes colours: white links, white button. */

.navbar {
  padding-top: 18px;
  padding-bottom: 18px;
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

.navbar_blur {
  display: none;
}

.navbar_scrim {
  background-image: none;
  background-color: rgba(255, 255, 255, .82);
}

.navbar_scrim.is-inverse {
  background-image: none;
  background-color: rgba(2, 13, 24, .72);
}

.navbar_row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.navbar_logo {
  justify-self: start;
  width: 113px;
  height: 44px;
}

.navbar_menu {
  display: contents;
}

.navbar_links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar_link {
  color: #121212;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  opacity: .75;
  transition: opacity .15s, color .25s;
}

.navbar_link:hover {
  opacity: 1;
}

.navbar_cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  background-color: #121212;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s, color .25s;
}

.navbar_cta:hover {
  background-color: #232323;
}

/* Over a dark section */
.navbar.is-dark .navbar_link {
  color: #fff;
}

.navbar.is-dark .navbar_cta {
  background-color: #fff;
  color: #121212;
}

.navbar.is-dark .navbar_cta:hover {
  background-color: #ececea;
}

/* ≤991: logo and burger; the links and the button open in a white card under the burger. */
@media screen and (max-width: 991px) {
  .navbar_row {
    grid-template-columns: 1fr auto;
  }

  .navbar_logo {
    width: 97px;
    height: 38px;
  }

  .navbar_burger {
    gap: 4px;
    border-radius: 12px;
    background-color: #121212;
    transition: background-color .25s;
  }

  .navbar_burger_line {
    background-color: #fff;
    transition: background-color .25s;
  }

  .navbar.is-dark .navbar_burger {
    background-color: #fff;
  }

  .navbar.is-dark .navbar_burger_line {
    background-color: #121212;
  }

  /* The burger icon (Daria, 23 Oct 2026): one SVG, three bars with a shorter middle one, in the old lines' colours */
  .navbar_burger_icon {
    display: block;
    width: 24px;
    height: 24px;
    color: #fff;
    transition: color .25s;
  }

  .navbar.is-dark .navbar_burger_icon {
    color: #121212;
  }

  .navbar_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    width: min(320px, 100%);
    margin-top: 12px;
    padding: 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .14);
  }

  .navbar_menu.is-open {
    display: flex;
  }

  .navbar_links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .navbar_link,
  .navbar.is-dark .navbar_link {
    padding: 10px 8px;
    color: #121212;
    font-size: 16px;
  }

  .navbar_cta,
  .navbar.is-dark .navbar_cta {
    justify-content: center;
    padding: 13px 22px;
    background-color: #121212;
    color: #fff;
  }
}

/* Home: the navbar shows on load (Daria, 23 Oct 2026), so the hero's photo card starts under it, as on the booking
   demo: 80px = the navbar's height (18 + 44 logo + 18). The section keeps its full-screen height, so the card fills
   the rest of the screen. At <=991 home.css already gives the hero 96px for the navbar. */
@media screen and (min-width: 992px) {
  .hero.l-section {
    padding-top: 80px;
  }
}

/* With the navbar on top the hero has 80px less screen, so the example booking keeps only the card's own padding
   (it had the card's and its own, ~95px above and below). `.hero .` because home.css loads after this file. */
@media screen and (min-width: 992px) {
  .hero .hero_visual {
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero .hero_grid {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }
}

/* The small links at the foot of the phone menu: only in the full-screen menu on Home (surf.css) */
.navbar_menu_foot {
  display: none;
}

.navbar_backdrop {
  display: none;
}