/* GMAP V658 — exact selected homepage top-section concept implementation.
   Desktop only. The visual section uses ONLY the user-selected image.
   Existing mobile homepage remains untouched. */

.v658-homepage-concept{display:none}

@media (min-width:901px){
  .v658-homepage-concept{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:1672/941;
    overflow:hidden;
    background:#f8f7ef;
  }
  .v658-homepage-concept > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:fill;
    user-select:none;
    pointer-events:none;
  }

  /* Hide the previous desktop top-section visuals only. */
  .page > .header,
  .page > .hero,
  .page > .hero-visible-districts{
    display:none!important;
  }
  #main-content > .section:first-child > .priority{
    display:none!important;
  }
  #main-content > .section:first-child{
    padding-top:18px!important;
  }

  /* Functional transparent overlay controls. */
  .v658-hotspot,
  .v658-hotspot-link,
  .v658-hotspot-select{
    position:absolute;
    z-index:3;
    margin:0;
    padding:0;
    border:0;
    border-radius:12px;
    background:transparent;
    color:transparent;
    text-decoration:none!important;
    cursor:pointer;
  }
  .v658-hotspot:hover,
  .v658-hotspot-link:hover,
  .v658-hotspot-select:hover{
    background:rgba(255,255,255,.025);
  }
  .v658-hotspot:focus-visible,
  .v658-hotspot-link:focus-visible,
  .v658-hotspot-select:focus-visible{
    outline:3px solid #ffd667!important;
    outline-offset:2px!important;
    background:rgba(8,87,66,.12)!important;
  }
  .v658-hotspot-select{
    opacity:.015;
    appearance:none;
    -webkit-appearance:none;
  }

  /* Header navigation hotspots, measured against 1672 x 941 source image. */
  .v658-home{left:37.7%;top:2.8%;width:6.4%;height:4.2%}
  .v658-about{left:45.6%;top:2.7%;width:6.2%;height:4.5%}
  .v658-membership{left:53.0%;top:2.7%;width:7.2%;height:4.5%}
  .v658-committees{left:61.0%;top:2.7%;width:7.2%;height:4.5%}
  .v658-events{left:69.1%;top:2.7%;width:8.8%;height:4.5%}
  .v658-contact{left:78.3%;top:2.7%;width:5.7%;height:4.5%}

  .v658-gallery{left:37.5%;top:7.8%;width:6.6%;height:4.6%}
  .v658-committee-login{left:44.4%;top:7.8%;width:13.2%;height:4.6%}
  .v658-super-admin{left:58.0%;top:7.8%;width:9.0%;height:4.6%}
  .v658-member-login{left:67.3%;top:7.8%;width:8.4%;height:4.6%}
  .v658-become-top{left:76.1%;top:7.8%;width:12.0%;height:4.6%}
  .v658-language{left:88.6%;top:7.8%;width:8.3%;height:4.6%}

  /* Hero CTA hotspots. */
  .v658-become-hero{left:34.8%;top:47.2%;width:15.7%;height:6.0%;border-radius:18px}
  .v658-explore{left:51.5%;top:47.2%;width:13.6%;height:6.0%;border-radius:18px}

  /* District-card hotspots. */
  .v658-district{top:63.1%;height:18.9%;border-radius:18px}
  .v658-district-1{left:2.8%;width:15.1%}
  .v658-district-2{left:18.6%;width:15.0%}
  .v658-district-3{left:34.3%;width:15.0%}
  .v658-district-4{left:50.0%;width:15.0%}
  .v658-district-5{left:65.6%;width:15.0%}
  .v658-district-6{left:81.3%;width:15.0%}

  /* Screen-reader context for the image-based visual implementation. */
  .v658-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;
  }
}

/* V659 — fix desktop top white gap and keep selected banner frozen/sticky. */
@media (min-width:901px){
  .page{
    padding-top:0!important;
    overflow:visible!important;
  }
  .v658-homepage-concept{
    position:sticky;
    top:0;
    z-index:1001;
  }
}

/* V660 — keep only the top banner sticky/frozen and remove the white gap above. */
@media (min-width:901px){
  .page{
    padding-top:0!important;
    overflow:visible!important;
  }
  .v658-homepage-concept{
    position:relative!important;
    top:auto!important;
    z-index:auto!important;
    margin-top:0!important;
  }
  .v660-sticky-banner{
    position:sticky;
    top:0;
    z-index:1005;
    display:block;
    width:100%;
    aspect-ratio:1672/136;
    margin-bottom:calc((136 / 1672) * -100%);
    overflow:hidden;
    pointer-events:none;
  }
  .v660-banner-stage{
    position:relative;
    width:100%;
    aspect-ratio:1672/941;
    pointer-events:none;
  }
  .v660-banner-stage > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:fill;
    user-select:none;
    pointer-events:none;
  }
  .v660-sticky-banner .v658-hotspot,
  .v660-sticky-banner .v658-hotspot-link,
  .v660-sticky-banner .v658-hotspot-select{
    pointer-events:auto;
  }
}


/* V661 — remove the white gap above the banner and keep only the banner fixed. */
@media (min-width:901px){
  .v658-homepage-concept{
    position:relative!important;
    top:auto!important;
    z-index:auto!important;
    margin-top:0!important;
  }
  .v660-sticky-banner{
    position:fixed!important;
    top:14px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:1200!important;
    width:min(calc(100vw - 56px),1536px)!important;
    max-width:1536px!important;
    aspect-ratio:1672/136!important;
    margin:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }
  .v660-banner-stage{
    position:relative!important;
    width:100%!important;
    aspect-ratio:1672/941!important;
    pointer-events:none!important;
  }
  .v660-banner-stage > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:fill!important;
    user-select:none!important;
    pointer-events:none!important;
  }
  .v660-sticky-banner .v658-hotspot,
  .v660-sticky-banner .v658-hotspot-link,
  .v660-sticky-banner .v658-hotspot-select{
    pointer-events:auto!important;
  }
}

/* V662 — ONE banner only: fixed top banner + crop the embedded duplicate banner out of the main artwork. */
@media (min-width:901px){
  /* Remove the remaining white gap above the fixed banner. */
  .page{
    margin-top:0!important;
    padding-top:0!important;
    overflow:visible!important;
  }

  /* Keep ONLY the top banner frozen at all times. */
  .v660-sticky-banner{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:1200!important;
    width:min(calc(100vw - 56px),1536px)!important;
    max-width:1536px!important;
    aspect-ratio:1672/136!important;
    margin:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  /* The main concept stays in normal flow. */
  .v658-homepage-concept{
    position:relative!important;
    top:auto!important;
    z-index:auto!important;
    margin-top:0!important;
    aspect-ratio:1672/941!important;
    overflow:hidden!important;
  }

  /* Crop the baked-in top banner out of the main artwork so it cannot appear twice.
     Source image banner height = 136px of 941px total. */
  .v658-homepage-concept > img{
    position:absolute!important;
    left:0!important;
    top:14.45271%!important;
    width:100%!important;
    height:85.54729%!important;
    object-fit:cover!important;
    object-position:center bottom!important;
    user-select:none!important;
    pointer-events:none!important;
  }

  /* Remove duplicate header interaction targets from the normal-flow artwork.
     The functional controls in the fixed banner remain active. */
  .v658-homepage-concept > .v658-home,
  .v658-homepage-concept > .v658-about,
  .v658-homepage-concept > .v658-membership,
  .v658-homepage-concept > .v658-committees,
  .v658-homepage-concept > .v658-events,
  .v658-homepage-concept > .v658-contact,
  .v658-homepage-concept > .v658-gallery,
  .v658-homepage-concept > .v658-committee-login,
  .v658-homepage-concept > .v658-super-admin,
  .v658-homepage-concept > .v658-member-login,
  .v658-homepage-concept > .v658-become-top,
  .v658-homepage-concept > .v658-language{
    display:none!important;
  }
}


/* V663 — remove the white gap under the frozen banner while keeping only the top banner fixed. */
@media (min-width:901px){
  /* Keep just the single banner fixed at the top. */
  .v660-sticky-banner{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:1200!important;
    width:min(calc(100vw - 56px),1536px)!important;
    max-width:1536px!important;
    aspect-ratio:1672/136!important;
    margin:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  /* The main artwork should begin immediately behind the frozen banner, with no blank spacer. */
  .v658-homepage-concept{
    position:relative!important;
    top:auto!important;
    z-index:auto!important;
    margin-top:0!important;
    aspect-ratio:1672/805!important;
    overflow:hidden!important;
    background:transparent!important;
  }

  /* Scale the original artwork and shift it upward so the embedded banner is fully cropped out. */
  .v658-homepage-concept > img{
    position:absolute!important;
    left:0!important;
    top:-16.89441%!important;
    width:100%!important;
    height:116.89441%!important;
    object-fit:fill!important;
    user-select:none!important;
    pointer-events:none!important;
  }

  /* Re-map the functional hotspots to the cropped hero area. */
  .v658-homepage-concept > .v658-become-hero{top:38.28%!important;height:7.01%!important;}
  .v658-homepage-concept > .v658-explore{top:38.28%!important;height:7.01%!important;}
  .v658-homepage-concept > .v658-district{top:56.25%!important;height:22.09%!important;}

  /* The duplicate navigation controls inside the normal-flow artwork stay hidden. */
  .v658-homepage-concept > .v658-home,
  .v658-homepage-concept > .v658-about,
  .v658-homepage-concept > .v658-membership,
  .v658-homepage-concept > .v658-committees,
  .v658-homepage-concept > .v658-events,
  .v658-homepage-concept > .v658-contact,
  .v658-homepage-concept > .v658-gallery,
  .v658-homepage-concept > .v658-committee-login,
  .v658-homepage-concept > .v658-super-admin,
  .v658-homepage-concept > .v658-member-login,
  .v658-homepage-concept > .v658-become-top,
  .v658-homepage-concept > .v658-language{
    display:none!important;
  }
}

/* V664 — stable custom language control for the fixed homepage banner.
   Replaces the native <select> hotspot so choosing a language cannot shift/scroll
   the page or move the hero/values artwork. No other design changes. */
@media (min-width:901px){
  .v660-sticky-banner .v664-language-button{
    display:block!important;
    opacity:1!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    background:transparent!important;
    border:0!important;
    color:transparent!important;
    cursor:pointer!important;
  }
  .v660-sticky-banner .v664-language-button:hover{
    background:rgba(255,255,255,.025)!important;
  }
  .v660-sticky-banner .v664-language-button:focus-visible{
    outline:3px solid #ffd667!important;
    outline-offset:2px!important;
    background:rgba(8,87,66,.12)!important;
  }
}

.v664-language-menu{
  position:fixed;
  z-index:2147483000;
  display:none;
  min-width:154px;
  padding:7px;
  border:1px solid #d9e5df;
  border-radius:14px;
  background:#fff;
  box-shadow:0 16px 42px rgba(3,48,36,.22);
  font-family:Arial,sans-serif;
}
.v664-language-menu.is-open{display:grid;gap:4px}
.v664-language-menu button{
  width:100%;
  min-height:40px;
  padding:9px 12px;
  border:0;
  border-radius:10px;
  background:#fff;
  color:#123f34;
  text-align:left;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}
.v664-language-menu button:hover,
.v664-language-menu button:focus-visible{
  background:#eef8f3;
  outline:2px solid #0b6b52;
  outline-offset:-2px;
}
.v664-language-menu button[aria-current="true"]{
  background:#075b46;
  color:#fff;
}
@media (max-width:900px){
  .v664-language-menu{display:none!important}
}

/* V665 — freeze ONLY the actual dark-green navigation banner.
   Removes the leafy hero/background image that was visible around the fixed banner.
   The full hero artwork remains in normal flow and scrolls away normally. */
@media (min-width:901px){
  .v660-sticky-banner{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:1200!important;
    width:min(calc(100vw - 80px),1594px)!important;
    max-width:1594px!important;
    aspect-ratio:1594/118!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:26px!important;
    background:#064b3c!important;
    box-shadow:0 10px 24px rgba(2,52,40,.18)!important;
    pointer-events:none!important;
  }
  .v660-banner-stage{
    position:relative!important;
    width:100%!important;
    aspect-ratio:1594/118!important;
    overflow:hidden!important;
    border-radius:26px!important;
    pointer-events:none!important;
  }
  .v660-banner-stage > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:fill!important;
    user-select:none!important;
    pointer-events:none!important;
  }

  /* Re-map fixed-banner controls to the cropped 1594 x 118 banner image. */
  .v660-sticky-banner .v658-home{left:37.035%!important;top:9.617%!important;width:6.713%!important;height:33.493%!important;}
  .v660-sticky-banner .v658-about{left:45.322%!important;top:8.819%!important;width:6.503%!important;height:35.886%!important;}
  .v660-sticky-banner .v658-membership{left:53.084%!important;top:8.819%!important;width:7.552%!important;height:35.886%!important;}
  .v660-sticky-banner .v658-committees{left:61.476%!important;top:8.819%!important;width:7.552%!important;height:35.886%!important;}
  .v660-sticky-banner .v658-events{left:69.972%!important;top:8.819%!important;width:9.231%!important;height:35.886%!important;}
  .v660-sticky-banner .v658-contact{left:79.622%!important;top:8.819%!important;width:5.979%!important;height:35.886%!important;}
  .v660-sticky-banner .v658-gallery{left:36.826%!important;top:49.490%!important;width:6.923%!important;height:36.683%!important;}
  .v660-sticky-banner .v658-committee-login{left:44.063%!important;top:49.490%!important;width:13.846%!important;height:36.683%!important;}
  .v660-sticky-banner .v658-super-admin{left:58.329%!important;top:49.490%!important;width:9.440%!important;height:36.683%!important;}
  .v660-sticky-banner .v658-member-login{left:68.084%!important;top:49.490%!important;width:8.811%!important;height:36.683%!important;}
  .v660-sticky-banner .v658-become-top{left:77.314%!important;top:49.490%!important;width:12.587%!important;height:36.683%!important;}
  .v660-sticky-banner .v658-language{left:90.426%!important;top:49.490%!important;width:8.706%!important;height:36.683%!important;}

  .v660-sticky-banner .v658-hotspot,
  .v660-sticky-banner .v658-hotspot-link,
  .v660-sticky-banner .v658-hotspot-select{
    pointer-events:auto!important;
  }
}