/* Rentals route. The anchor bar's styles came inline with its html widget on
   the source; everything else was Elementor container layout. */

/* Page hero, measured on production: a 350px band, content centred on both
   axes, an Audiowide 40/40 title and an uppercase Montserrat 17.6/35.2 sub.
   The source paints the photo as a CSS background; we ship it as an <img> so
   it is indexable and has alt text, which is why the shell needs the overlay. */
.bf-rentals-page .bf-page-hero { min-height: 350px; padding-block: 10px; }
.bf-rentals-page .bf-page-hero__content { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.bf-rentals-page .bf-page-hero h1 {
  font-family: var(--wp--preset--font-family--body);
  font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}
.bf-rentals-page .bf-page-hero__sub {
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 2;
  text-transform: uppercase;
}
.bf-rentals-page .bf-page-hero .button {
  padding: 12px 24px;
  font-size: 1.25rem;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--wp--preset--font-family--body);
}

.bf-anchor-bar { background: #1a1a1a; padding: 14px 32px; }
.bf-anchor-bar ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 32px;
}
.bf-anchor-bar a {
  display: inline-block;
  color: #e8e8e8;
  text-decoration: none;
  font-family: var(--wp--preset--font-family--condensed);
  font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.bf-anchor-bar a:hover,
.bf-anchor-bar a:focus { color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--red); }

/* The rates board is the one element the source lets out to the full viewport;
   everything else sits in the 1140px inner. Measured 1440x960 on production. */
.bf-rentals-page__rates {
  display: block;
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  height: auto;
}

/* Measured section rhythm on production: locations 40px, fleet 40px,
   guides 60px top / 46px bottom, terms 60px. */
.bf-rentals-page__locations { padding-block: 40px; }
.bf-rentals-page__fleet     { padding-block: 40px; }
.bf-rentals-page__guides    { padding-block: 60px 46px; }
.bf-terms                   { padding-block: 60px; }

.bf-rentals-page__map { display: block; width: 100%; height: auto; margin-inline: auto; }

.bf-locations,
.bf-guides {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 0;
}
.bf-guides { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 0; }

/* Location cards, measured off production at 1440px: a 367x473 black panel
   with 10px padding and no border. Inside, the source groups the name and
   address in a 10px-padded block, then the hours block below it at a 17.6px
   rhythm. "Hours" is a red chip, not a heading — self-start, 2px 10px. */
.bf-location {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px;
  background: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  border: 0;
  text-align: left;
  font-size: 1.1rem;
  line-height: 2;
}
.bf-location > h3 {
  margin: 10px 0 0;
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
}
.bf-location > h3 + p {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--wp--preset--color--red);
}
.bf-location > h4 {
  align-self: flex-start;
  margin: 0;
  padding: 2px 10px;
  background: var(--wp--preset--color--red);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
}
.bf-location > h4 + p { margin-top: 1.1rem; margin-bottom: 1.1rem; }

.bf-location p {
  margin: 0;
  color: var(--wp--preset--color--white);
  font-size: 1.1rem;
  line-height: 2;
}

.bf-location .button {
  margin-top: auto;      /* the source pins every button 10px off the card floor */
  width: 100%;
  padding: 12px 24px;
  font-size: 1.1rem;      /* 17.6px, as the source */
  line-height: 2;         /* 12+35.2+12 = 59px tall, matching production */
  letter-spacing: .04em;
  text-transform: none;
  font-family: var(--wp--preset--font-family--body);
}

/* The fleet is TWO columns on the source, not four: 560px cards on a 1140
   inner with a 20px gutter, each a white panel with a square image above a
   padded text block. */
.bf-fleet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 0;
}
.bf-fleet__item { background: var(--wp--preset--color--white); }
.bf-fleet__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  margin: 0;
}
.bf-fleet__body { padding: 20px 20px 10px; }
.bf-fleet__item h3 {
  margin: 0 0 .25rem;
  font-family: var(--wp--preset--font-family--body);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  color: var(--wp--preset--color--text);
}
.bf-fleet__item p { margin: 0; font-size: 1.1rem; line-height: 2; }

/* Trail-map cards are a different component from the location cards: 40px
   padding, centred content, a 32px heading and an auto-width button. */
.bf-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px;
  background: var(--wp--preset--color--black);
  color: var(--wp--preset--color--white);
  border: 0;
  text-align: center;
}
.bf-guide > h3 {
  margin: 0;
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}
.bf-guide p { margin: 0; color: var(--wp--preset--color--white); font-size: 1.1rem; line-height: 2; }
.bf-guide .button {
  padding: 12px 24px;
  font-size: 1.1rem;
  line-height: 2;
  letter-spacing: .04em;
  text-transform: none;
  font-family: var(--wp--preset--font-family--body);
}

/* The source's terms list — red checkmark discs and hairline dividers, centred
   in a 760px column. The first pass replaced it with a plain bulleted list. */
.bf-terms__inner { text-align: center; }
.bf-terms__list {
  list-style: none;
  padding: 0;
  margin: 20px auto;
  max-width: 760px;
  text-align: left;
}
.bf-terms__list li {
  position: relative;
  padding: 14px 0 14px 38px;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
}
.bf-terms__list li + li { border-top: 1px solid rgba(0,0,0,0.06); }
.bf-terms__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 18px;
  height: 18px;
  background-color: var(--wp--preset--color--red);
  border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.bf-terms__note { margin: 0 0 20px; font-size: .9rem; }
.bf-terms .button {
  padding: 12px 24px;
  font-size: 1.1rem;
  line-height: 2;
  text-transform: none;
  letter-spacing: .04em;
  font-family: var(--wp--preset--font-family--body);
}

@media (max-width: 60rem) {
  .bf-locations { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .bf-guides, .bf-fleet { grid-template-columns: 1fr; }
  .bf-anchor-bar ul { gap: 18px; }
}