/* FOR TOP PANO AND SITE SEARCH */


.hero-wrapper {
  position: relative;
  overflow: visible;  /* allow the search pill to hang “below” the image */
  z-index: 1;         /* make this a stacking context */
}

.hero-image {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

/* Search iframe sitting on the image, bottom-right */
.hero-wrapper iframe#site-search {
  position: absolute;
  right: 12px;
  bottom: -178px;                 /* <-- key change: anchor to bottom, not a fixed top */
  width: min(300px, 50%);       /* tweak to taste */
  height: 230px;                /* enough for button + dropdown list */
  border: none;
  z-index: 100;
}

/* On narrow screens, adjust but keep it at the bottom of the image */
@media (max-width: 768px) {
  .hero-wrapper iframe#site-search {
    right: 8px;
    bottom: -178px;
    width: min(230px, 60%);
  }
}

/* Bottom-left "Find nearest route" button — styled to match the search .dropbtn */
.hero-wrapper .hero-nearest{
  position: absolute;
  left: 12px;
  bottom: 12px; /* match your iframe positioning */
  z-index: 101;

  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #666666;
  text-decoration: none;
  text-align: left;

  background-color: rgba(255,255,255,0.7);
  border: 1px solid #666666;
  border-radius: 5px;

  /* mimic your icon + padding pattern */
  background-image: url('basics/location-icon.png'); /* swap to whatever you use */
  background-position: 14px 7px;
  background-size: 25px 25px;
  background-repeat: no-repeat;

  padding: 10px 12px 10px 12px;
  height: 20px;
  line-height: 16px;      /* keeps text nicely centred */
  display: inline-flex;
  align-items: center;

  cursor: pointer;
}

.hero-wrapper .hero-nearest:hover{
  background-color: rgba(255,255,255,0.8);
}

.hero-wrapper .hero-nearest:focus-visible{
  outline: 0; /* match your search input style */
  box-shadow: 0 0 0 2px rgba(26,115,232,.35);
}

/* Mobile tweak to align with your iframe rules */
@media (max-width: 768px){
  .hero-wrapper .hero-nearest{
    left: 12px;
    bottom: 12px;
  }
}

/* Default (mobile-first): show short label */
.hero-nearest .rf-long{ display:none; }
.hero-nearest .rf-short{ display:inline; }

/* Wider screens: swap to long label */
@media (min-width: 769px){
  .hero-nearest .rf-short{ display:none; }
  .hero-nearest .rf-long{ display:inline; }
}