.parish-hero {
  margin-top: 8%;
}

.parish-map {
  display: block;
  width: 100%;     /* fill full width of parent container */
  height: auto;    /* scale proportionally from viewBox */
}

/* Left block */
.parish-hero__left {
  position: absolute;
  top: 12rem;
  left: 1%;
  max-width: 42vw;
  padding: 2rem;
  z-index: 5;
}

/* Right block (map) */
.parish-hero__right {
  flex: 1 1 0;
  min-width: 0;    /* prevent flexbox from constraining the SVG */
}

.parish-hero__right svg {
  display: block;
  width: 100%;
  height: auto;    /* maintain aspect ratio */
  max-height: none;
  margin: 0 auto;
  margin-top: -8%;
  margin-right: -2%;
}

/* Headings + body */
.title {
  font-size: 4.375vw;
  font-weight: 600;
  line-height: 1.11;
  margin: 0 0 1rem 0;
  color: #0C78BE;
}

.eyebrow {
  color: #0C78BE;
  font-weight: 500;
}

.select-label {
  color: #15103D;
  font-size: 1.25vw;
}

.lede {
  font-size: 1.25vw;
  font-family: "proxima-nova", Sans-serif;
  color: #15103D;
  line-height: 1.4;
}

/* === Dropdown container background === */
.select-wrap {
  background-color: #edf1f4; /* updated light gray background */
  padding: 1rem;
  border-radius: 6px;
  display: block;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* subtle shadow for depth */
}

/* Dropdown wider + custom style */
.select-wrap select {
  display: block;
  border: none !important;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
  color: #15103D !important;
  font-family: "neulis-neue", sans-serif !important;
  font-size: clamp(14px, 1.2vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.4;
  background: #fff;
  min-width: 360px;
}

/* ===== Parish hover states (UPDATED) ===== */
/* Base fill + transition on the PATH (not the anchor) */
.parish path {
  fill: #0b78be;
  transition: fill 0.25s ease;
  cursor: pointer;
}

/* Hover/focus the ANCHOR -> tint its PATH (works over text labels too) */
.parish:hover path,
.parish:focus path,
.parish:focus-visible path,
.parish.highlight path {
  fill: #5DA7DC;
}

/* Labels shouldn't block hover; keep text white */
.parish text,
.parish-label {
  pointer-events: none;
  fill: white;
}

/* the wrapper around the select */
.parish-select {             /* use your real class/id */
  position: relative;
  z-index: 200;              /* above the SVG on the right */
  overflow: visible;         /* don't clip the dropdown */
  margin-bottom: 1rem;       /* breathing room for the menu */
}

/* the actual <select> */
.parish-select select {
  display: block;
  width: 100%;
  background: #fff;
  border: 2px solid #0b78be; /* visible border on all sides */
  border-radius: 6px;
  padding: .6rem .9rem;
  line-height: 1.2;
  box-shadow: 0 1px 0 rgba(0,0,0,.03); /* optional subtle depth */
  position: relative;
  z-index: 201;              /* ensure its border sits above the map */
}

/* make sure the hero/section doesn’t hide the dropdown */
.parish-hero,
.parish-hero__left {
  overflow: visible;
}

/* if using Select2/Choices etc., bump their menu too */
.select2-container,
.choices__list--dropdown {
  z-index: 9999 !important;
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .parish-hero {
    flex-direction: column;
    min-height: auto;
    padding: 2rem 1rem;
  }
  .parish-hero__left {
    position: relative;
    top: auto;
    left: auto;
    max-width: 100%;
    margin-bottom: 2rem;
    background: transparent;
    padding: 0;
  }
  .parish-hero__right svg {
    max-height: none; /* no cap on small screens either */
  }
  .select-wrap {
    width: 100%;
  }
  .select-wrap select {
    min-width: 100%;
  }
}


/* SALTY KEY STYLES */
body:not(.trx_addons_page_scrolled)  .body_wrap > .page_wrap > header > header > section {
	background-color: transparent !important;
}

.parish-map g.map-group > path {
	opacity: .25;
}

.eyebrow {
	font-family: "proxima-nova", Sans-serif;
}

svg.parish-map-wide {
	display: none !important;
}

svg.parish-map-mobile {
	display: none !important;
	margin-top: 4rem !important;
}

.select-label {
	visibility: hidden;
}

@media (min-width: 1500px) {
	svg.parish-map-wide {
		display: block !important;
	}
	
	svg.parish-map {
		display: none !important;
	}
}

@media (max-width: 1279px) {	
	h1.title {
		font-size: 35px;
	}
	
	p.lede,
	.parish-hero .select-label	{
		font-size: 16px;
	}
}

@media (min-width: 901px) {
	.parish-hero__left {
		top: 6rem;
	}
}

@media (min-width: 1080px) {
	.parish-hero__left {
		top: 8rem;
	}
}

@media (min-width: 1400px) {
	.parish-hero__left {
		top: 10rem;
	}
}

@media (min-width: 1600px) {
	.parish-hero__left {
		top: 12rem;
	}
}

@media (max-width: 900px) {
	svg.parish-map {
		display: none !important;
	}
	
	svg.parish-map-mobile {
		display: block !important;
	}
}

@media (max-width: 767px) {
	.parish-hero {
		padding-top: 4rem !important;
	}
}