/* =================================================================================
  Top Locations Template
================================================================================= */

/* Layout */
.jl-container { 
  width: 100%;
  max-width: 1236px; 
  margin: 0 auto; 
  padding: 0 18px; 
}

.jl-prose { 
  line-height: inherit;
  font-size: 1.2em;
  font-weight: 400;
  color: #052a57; 
}

.jl-prose-sm { 
  line-height: 1.55; 
  font-size: 0.95rem; 
}

/* Hero */
.jl-hero {
  position: relative;
  background-size: cover; 
  background-position: center 30%;
  min-height: 180px; 
  display: grid; 
  align-items: end;
  padding: 0 0 110px;
}

/* HERO section */
.jl-hero--solid {
  background-color: #052A57; 
  background-image: none !important;
  min-height: 0;
}

.jl-hero--image {
  background-size: cover;
  background-position: center;
}

.jl-hero__title {
  color: #fff;
  margin: 1.625em 0 0 0;
  font-size: clamp(22px, 3vw, 28px);
}

/* Prevent iframe scrollbars or clipping */
.jl-iframe-skin iframe {
  display: block;
  width: 100%;
  border: 0;
  overflow: visible;
}

.jl-iframe-skin iframe { 
  height: 260px; 
}

/* Ensure the flat variant follows the same height */
.jl-iframe-skin.jl-iframe-skin--flat iframe { 
  height: 260px; 
}

.jl-hero__booking .jl-iframe-skin.jl-iframe-skin--flat iframe {
  height: 360px;
}



/* Make sure the iframe itself sits flush and doesn't introduce scrollbars */
.jl-iframe-skin--flat iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: visible;
}

/* Optional: if the section itself had a white band, ensure it’s transparent */
.jl-booking {
  background: transparent;
}

.jl-booking,
.jl-booking .jl-container,
.jl-booking__card--transparent,
.jl-iframe-skin--flat {
  border: 0 !important;
  box-shadow: none !important;
  max-width: 1436px;
  margin: 0 auto;
}

/* Ensure iframe fills horizontally without seams */
.jl-booking .jl-iframe-skin--flat iframe {
  width: 100% !important;
  max-width: none !important;
}

/* Adjust iframe height for different breakpoints if needed */
@media (max-width: 1024px) {
  .jl-iframe-skin iframe {
    height: 260px !important;
  }
  .jl-iframe-skin.jl-iframe-skin--flat iframe {
    height: 260px !important;
  }
}
@media (max-width: 874px) {
  .jl-iframe-skin iframe {
    height: 440px !important;
  }
  .jl-iframe-skin.jl-iframe-skin--flat iframe {
    height: 440px !important;
  }
}

.jl-hero::after { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: #052a57;
}

.jl-hero .jl-container { 
  position: relative; 
  z-index: 1; 
}

.jl-hero__sub { 
  margin: 0; 
  font-size: clamp(16px, 2.2vw, 20px); 
  opacity: .95; 
}

/* Floating booking card overlaps first section */
.jl-booking { 
  margin-top: -80px; 
  margin-bottom: -30px;
  position: relative; 
  z-index: 10; 
}

/* Wrapping card */
.jl-booking__card{
  width: 100%;
  position: relative;
  border-radius: 5px;
} 

/* Skin that can mask the iframe’s inner shadow */
.jl-iframe-skin{
  position: relative;
  border-radius: 16px;
  overflow: visible;                          
} 

/* Keep iframe beneath our overlay shim */
.jl-iframe-skin iframe{
  display: block;
  width: 100%;
  border: 0;
  position: relative;
  z-index: 1;
}

/* --- Responsive tweaks --- */
@media (max-width: 1024px){
  .jl-hero { 
    padding-bottom: 120px; 
  }

  .jl-booking { 
    margin-top: -90px; 
    max-height: 200px;
  }
}

@media (max-width: 869px) {
  iframe {
    height: 500px !important;
  }

  .jl-booking {
    max-height: 450px;
  }

  .jl-frame-skin .jl-iframe-skin--flat iframe {
    height: 500px !important;
  }

  iframe {
    height: 500px !important;
  }

  .jl-mapframe iframe, .jl-mapframe img { 
    height: 420px !important; 
  }

}

@media (max-width: 680px) {
  .jl-hero { 
    min-height: 155px; 
    padding-bottom: 110px; 
  }

  .jl-booking { 
    margin-bottom: 120px;
    padding: 0;
    display: block;
  }

  .jl-booking__card { 
    border-radius: 0px; 
    background: transparent;
    padding: 0;
  }

  .jl-iframe-skin {
    position: relative;
    background: #fff;
    /* max-height: 330px; */
  }

  iframe {
    height: 330px !important;
  }

  .jl-section {
    padding: clamp(70px, 6vw, 64px) 0;
  }

  .jl-mapframe {
    width: 90%;
    height: 100%;
    margin-top: 0px !important;
  }

  .jl-mapframe iframe {
    height: 420px !important;
  }
  
  .jl-stops-acc--white {
    margin-bottom: 0 !important;
  }
}

/* Stops */
.jl-section--stops .jl-h2 { 
  margin: 0 0 16px; 
}

.jl-stops { 
  list-style: none; 
  padding: 0; 
  margin: 24px 0 0; 
  display: grid; 
  gap: 20px; 
}

.jl-stop {
  border: 1px solid #e6e8ee; 
  border-radius: 14px; 
  padding: 18px 18px 16px; 
  background: #fff;
}

.jl-stop__name { 
  margin: 0 0 6px; 
  font-size: 20px; 
  font-weight: 700; 
  color: #052a57; 
}

.jl-stop__meta { 
  margin: 0 0 10px; 
  color: #052a57; 
}

.jl-stop__buttons { 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
  margin-top: 10px; 
}

/* Band variants */
.jl-cardsband--blue { 
  background:#052a57; 
  color:#fff; 
  padding: 60px 0 70px;
}

.jl-cardsband--white { 
  background:#fff; 
  color:#052a57; 
}

.jl-cardsband__title { 
  margin:0 0 12px; 
}

.jl-cardsband--blue .jl-cardsband__title { 
  color:#fff; 
}

/* Grid columns */
.jl-cards { 
  display:grid;
  grid-template-columns: repeat(4, 1fr); 
  gap: 32px; 
}

.jl-cards--4 { 
  grid-template-columns:repeat(4,1fr); 
}

@media (max-width:980px) { 
  .jl-cards--4 { 
    grid-template-columns:repeat(2,1fr);
  } 
}

@media (max-width:640px) { 
  .jl-cards--4 { 
    grid-template-columns:1fr;
  } 
}

/* Card layout tuned for band usage */
.jl-card--band {
  background: transparent; 
  border:0; 
  box-shadow: none;
  padding: 24px 12px; 
  text-align: center; 
  align-items: center; 
  display: flex; 
  flex-direction: column;
}

/* Icon block: consistent square, centered */
.jl-card__media { 
  width:110px; aspect-ratio:1/1; 
  margin:0 auto 18px; 
}
.jl-card__img { 
  width:100%; 
  height:100%; 
  object-fit: contain; 
  display: block; 
}

/* Icon tone per instance (works with PNG/SVG) */
.jl-cardsband--icons-gray  .jl-card__img { 
  filter: grayscale(1) brightness(1.15) opacity(.85); 
}

.jl-cardsband--icons-white .jl-card__img { 
  filter: invert(1) brightness(1.05) contrast(1.05); 
}

.jl-cardsband--icons-none  .jl-card__img { 
  filter: none; 
}

/* Typographic hierarchy */
.jl-cardsband--blue  .jl-card__title { 
  color:#fff; 
  font-weight: 800; 
  font-size: 22px; 
}

.jl-cardsband--white .jl-card__title { 
  color:#0a1f44; 
  font-weight:800; 
  font-size:20px; 
}

.jl-card__body { 
  color:#c7d3e8; 
  font-size:.95rem; 
  line-height:1.55; 
  max-width:34ch; 
  margin:0 auto 14px; 
}

.jl-cardsband--white .jl-card__body { 
  color:#3d4758; 
}

/* Buttons */
.jl-btn--red   { 
  background:#c8102e; 
  border:1px solid #c8102e; 
  color:#fff; 
}

.jl-btn--red:hover { 
  background:#a60e27; 
  border-color:#a60e27; 
}

.jl-btn--ghost { 
  border:1px solid #c9cfdb; 
  color:#052a57; 
  background:transparent; 
}

.jl-btn--ghost:hover { 
  border-color:#052a57; 
  color:#052a57; 
}

.jl-btn--pill  { 
  border-radius:999px; 
  padding:11px 18px; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  font-weight:700; 
}

.jl-cardsband { 
  padding-top:28px; 
  padding-bottom:44px; 
}

.jl-card {
  padding: 18px; 
  border: 1px solid #e6e8ee;
  display: flex; 
  flex-direction: column; 
  gap: 10px;
}

.jl-card__title { 
  margin: 0; 
  font-size: 18px; 
  font-weight: 700; 
  color: #052a57; 
}

.jl-card__body { 
  color: #3d4758; 
}

/* CTA band */
.jl-cta { 
  display: flex; 
  gap: 16px; 
  align-items: center; 
  justify-content: space-between; 
  flex-wrap: wrap; 
}

.jl-section--cta { 
  background: #052a57; 
  color: #fff; 
}

/* Buttons */
.jl-btn {
  display: inline-block; 
  padding: 10px 14px; 
  border-radius: 10px;
  border: 1px solid #052a57; 
  color: #052a57; 
  text-decoration: none; 
  font-weight: 600;
}

.jl-btn:hover { 
  background: #052a57; 
  color: #fff; 
}

.jl-btn--primary { 
  background: #fff; 
  color: #052a57; 
}

.jl-btn--primary:hover { 
  background: #e6eefc; 
  color: #052a57; 
}

.jl-btn--ghost { 
  border-color: transparent; 
  color: white; 
}

.jl-btn--ghost:hover {  
  color: #c00e30; 
}

.jl-stops-acc .jl-btn--ghost {
  color: #c00e30;
  font-size: 1.3em;
  padding: 0;
  border: none; 
  background: transparent;
  font-weight: 700;
  text-decoration: none;
}

/* Headings */
.jl-h2 { 
  font-size: clamp(22px, 3vw, 28px); 
  color: #052a57; 
  margin: 0; 
}

.jl-cardsband--white .jl-btn--ghost,
.jl-cardsband--blue .jl-btn--ghost {
  background: transparent !important;
  color: white !important;
  margin-top: 10px;
}

.jl-cardsband--white .jl-btn--ghost:after,
.jl-cardsband--blue .jl-btn--ghost:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  
}

.jl-cardsband--white .jl-btn--ghost:hover,
.jl-cardsband--blue .jl-btn--ghost:hover {
  color: #c00e30 !important;
  background: transparent !important;
}

.jl-cardsband .jl-btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;               
  padding-right: 12px;    
  margin-top: -30px !important;
}

/* small right chevron next to text */
.jl-cardsband .jl-btn--ghost .jl-linkchev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.jl-cardsband .jl-btn--ghost .jl-linkchev svg {
  width: 17px;
  height: 15px;
}

.jl-cardsband--blue .jl-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 290px; 
}

.jl-cardsband--blue .jl-card__media {
  width: 64px;
  height: 64px;          
  margin: 0px;    
  display: flex;
  align-items: center;
  justify-content: center;
}

.jl-cardsband--blue .jl-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.25) opacity(.9); 
}

.jl-cardsband--blue .jl-card__title {
  color: #fff;
  font-weight: 800;
  font-size: 24px;  
  margin-bottom: -23px;
}


.jl-cardsband--blue .jl-card__body {
  color: var(--wp--preset--color--cyan-bluish-gray);
  font-size: 1rem;        
  line-height: 1.6;
  font-weight: 100;      
  max-width: 32ch;
  margin: 0 auto;
  padding: 12px 3px;
}


.jl-cardsband--blue .jl-btn {
  background: #c00e30;
  color: #fff;
  border: 0;
  border-radius: 5px;
  padding: 5px 20px;
  width: 180px;          
  text-align: center;
  font-weight: 700;
  margin-top: 0px;
  align-self: center;    
}

.jl-cardsband--blue .jl-btn:hover {
  background: #981b1e;
}

.jl-cardsband--blue { 
  padding: 30px 0 30px; 
}

.jl-cardsband--blue .jl-cards { 
  gap: 28px; 
}

@media (max-width: 980px) {
  .jl-cardsband--blue .jl-card { 
    min-height: 246px;
  }
}
@media (max-width: 640px) {
  .jl-cardsband--blue .jl-card { 
    min-height: 0; 
  }
  .jl-cardsband--blue .jl-btn { 
    width: 100%; 
    max-width: 220px; 
  }
}

.jl-cardsband--icons-gray .jl-card__img {
  filter: brightness(0) saturate(0) invert(60%) contrast(85%);
  opacity: 1;
}

.jl-stops-acc__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.2fr .8fr;
}

@media (max-width: 980px) { 
  .jl-stops-acc__grid { 
    grid-template-columns: 1fr; 
  } 
}

/* Accordion */
.jl-acc { 
  background:#fff; 
  border-radius: 9px; 
  overflow: hidden; 
}

.jl-acc__item + .jl-acc__item { 
  border-top: 1px solid #e6e8ee; 
}

.jl-acc__head {
  width: 100%; 
  text-align: left; 
  font-size: 1.3em; 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 16px; 
  padding: 14px 16px; 
  background:#0b2a57; 
  color:#fff; 
  font-weight: 800; 
  border: 0; 
  cursor: pointer;
}

.jl-acc__item.is-open .jl-acc__head { 
  background:#dfe6f1; 
  color:#b3082f; 
}

.jl-acc__chev { 
  transition: transform .2s ease; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #c00e30;
  transform: rotate(270deg);
}

.jl-acc__item.is-open .jl-acc__chev { 
  transform: rotate(0deg);
  color: white; 
}

.jl-acc__panel { 
  padding: 16px; 
  background:#dfe6f1; 
}

.jl-acc__meta  { 
  margin:0 0 6px; 
  color: #0b2a57;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.3; 
}

.jl-acc__desc p {
  padding-right: 20em;
  padding-right: 20em;
  color: #052a57;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.3;
}

@media (max-width: 980px) { 
  .jl-acc__desc p { 
    padding-right: 0; 
  } 
}

.jl-acc__desc a {
  color: #c00e30;
}

.jl-acc__body  { 
  color:#052a57; 
}

.jl-acc__btns  { 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
  margin-top: 12px; 
}

/* Map area */
.jl-stops-acc__map { 
  display: flex; 
  align-items: flex-start; 
  justify-content: center; 
}

.jl-mapframe { 
  width: 100%; 
  background:#fff; 
  border-radius: 4px; 
  overflow: hidden; 
  margin-top: -20px;
}

.jl-mapframe iframe, .jl-mapframe img { 
  display: block; 
  width: 100%; 
  height: 450px; 
  border: 0; 
  object-fit: cover; 
}

.jl-mapframe__placeholder { 
  padding: 24px; 
  text-align: center; 
  color:#6b7280; 
}

.jl-stops-acc--blue  .jl-stops-acc__title { 
  color:#fff; 
}

.jl-stops-acc--white {
  background-color: white;
  margin-top: 50px;
  margin-bottom: 150px;
}

.jl-stops-acc--white .jl-stops-acc__title { 
  color:#052a57; 
}

.site-footer .banner-signup {
  display: none !important;
}

.jl-stops-acc .jl-acc__btns .jl-btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 1.3em;
  font-weight: 700;
  color:#c00e30;
  background: transparent;
  border: none;
}

.jl-stops-acc .jl-acc__btns .jl-btn--ghost:hover { 
  color:#a60e27; 
}

.jl-stops-acc .jl-acc__btns .jl-acc__chev {
  width: 26px; 
  height: 26px;
  border-radius: 50%;
  background:#c8102e;
  display: inline-flex;
  align-items: center; 
  justify-content: center;
  flex: 0 0 26px;
  rotate: -90deg;
}

.jl-stops-acc .jl-acc__btns .jl-acc__chev svg {
  width:20px; 
  height:20px;
}
.jl-stops-acc .jl-acc__btns .jl-acc__chev svg polyline,
.jl-stops-acc .jl-acc__btns .jl-acc__chev svg path {
  stroke:#fff; 
  stroke-width: 2; 
  fill: none;
  stroke-linecap: round; 
  stroke-linejoin: round;
}

.jl-stops-acc .jl-acc__btns .jl-acc__chev--right {
  transform: rotate(0deg) !important;  /* lock orientation */
}

/* Only the 4-up band that contains ghost buttons */
.jl-cardsband:has(.jl-btn--ghost) {
  margin-top: 10px;
  margin-bottom: -70px;
}

@media (max-width: 980px) {
  .jl-cardsband:has(.jl-btn--ghost) { 
    padding: 56px 0; 
  }
}
@media (max-width: 640px) {
  .jl-cardsband:has(.jl-btn--ghost) { 
    padding: 0 0 91px 0; 
  }

  .jl-cardsband:has(.jl-btn--red) {
    margin-top: 0px;
  }
}

/* Text Band (stacked headings + copy) */
.jl-textband--white {
  background:#fff;
  color:#1c2740;
}

.jl-textband--blue {
  background:#0b2a57;
  color:#fff;
}

.jl-textband { 
  padding: 48px 0 56px; 
}

@media (max-width: 980px) { 
  .jl-textband { 
    padding: 40px 48px; 
  } 
}

@media (max-width: 640px) { 
  .jl-textband { 
    padding: 32px 40px; 
  } 
}

.jl-textband__stack { 
  display: grid; 
  gap: 28px; 
}

.jl-textband__heading {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  color: inherit;
}

.jl-textband__body p { 
  margin: 0 0 10px; 
}

.jl-textband--white .jl-textband__body a {
  color:#c00e30;
  font-weight: 400;
  text-decoration: none;
}

.jl-textband--white .jl-textband__body a:hover {
  color:#a60e27;
  text-decoration: underline;
}

.jl-textband--blue .jl-textband__body a {
  color:#fff; 
  text-decoration: underline;
}

/* ===========================
   Popular Connections section
   =========================== */
.jl-popcon { 
  padding: clamp(24px, 5vw, 40px) 0; 
}

.jl-popcon__title { 
  margin-bottom: clamp(12px, 2vw, 16px); 
}

.jl-popcon__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 24px) clamp(16px, 3vw, 32px);
}

.jl-popcon__col { 
  min-width: 0; 
}

.jl-popcon__heading {
  font-size: clamp(16px, 2vw, 18px);
  margin: 0 0 6px;
  font-weight: 600;
}

.jl-popcon__list { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.jl-popcon__item + .jl-popcon__item { 
  margin-top: 6px; 
}

.jl-popcon__link {
  color:#052A57;
  display: inline-block;
  line-height: 1.35;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.jl-popcon__link:hover,
.jl-popcon__link:focus {
  border-bottom-color: #981b1e;
  color: #981b1e;
  outline: none;
}

/* Responsive columns */
@media (max-width: 1024px) {
  .jl-popcon__grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  }
}

@media (max-width: 640px) {
  .jl-popcon__grid { 
    grid-template-columns: 1fr; 
  }
}

/* Extended hero: put content at the top and give vertical room */
.jl-hero { 
  position: relative; 
  overflow: visible; 
}

.jl-hero--extended {
  align-items: start; /* key: title at top of blue band */
  min-height: clamp(380px, 52vh, 620px);
  padding-top: clamp(16px, 2.5vw, 28px);
  padding-bottom: clamp(40px, 6vw, 96px);
}

.jl-hero--extended .jl-hero__title {
  margin: 0 0 clamp(8px, 1.2vw, 14px);
}

/* Booking widget when placed inside hero */
.jl-hero__booking {
  margin-top: clamp(8px, 1.6vw, 16px);
  position: relative;
  z-index: 2;
}

/* Make sure dropdowns aren't clipped */
.jl-hero__booking, .jl-hero__booking * { 
  overflow: visible; 
}

/* Visually hidden but available to screen readers */
.u-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* When the hero title is hidden, tighten the spacing a touch */
.jl-hero--no-title .jl-hero__sub { 
  margin-top: 0; 
}

.jl-hero--no-title.jl-hero--extended { 
  padding-top: clamp(12px, 2vw, 20px); 
}