/* JJ Hero Highlight */
.jj-hero-highlight{
  --jj-hh-breakpoint:1000px;
  --jj-hh-cols:2;
  --jj-hh-gap:20px;
  --jj-hh-overlay-bottom:30px;
  --jj-hh-overlay-max-width:1100px;
  --jj-hh-pad:0;
  position:relative;
  width:100%;
  padding: 0;
}

.jj-hero-highlight:not(.is-mobile){
  padding: var(--jj-hh-pad);
}

.jj-hero-highlight.jj-hh--overlay{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: var(--jj-hh-overlay-bottom);
  max-width: var(--jj-hh-overlay-max-width);
  width:100%;
  z-index:20;
  pointer-events:auto;
}

.jj-hero-highlight .jj-hh-track{
  display:grid;
  grid-template-columns: repeat(var(--jj-hh-cols), minmax(0, 1fr));
  gap: var(--jj-hh-gap);
  align-items:stretch;
}

.jj-hh-align-left{ justify-items:start; }
.jj-hh-align-center{ justify-items:center; }
.jj-hh-align-right{ justify-items:end; }

.jj-hh-card{
  --jj-hh-card-bg: rgba(255,255,255,.85);
  --jj-hh-card-overlay: transparent;
  --jj-hh-card-text: #1f2937;
  --jj-hh-card-radius: 14px;
  --jj-hh-card-pad: 26px 24px;
  --jj-hh-card-minh: auto;

  position:relative;
  width:100%;
  color: var(--jj-hh-card-text);
  background: var(--jj-hh-card-bg);
  border-radius: var(--jj-hh-card-radius);
  padding: var(--jj-hh-card-pad);
  min-height: var(--jj-hh-card-minh);
  text-decoration:none;
  overflow:hidden;
      padding: 10% 6%;
          display: block;
    vertical-align: middle;
  box-sizing:border-box;
}

.jj-hh-card:before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--jj-hh-card-overlay);
  pointer-events:none;
}

.jj-hh-card > *{
  position:relative;
  z-index:1;
}

.jj-hh-card-top{
  display:flex;
  gap:14px;
  align-items:center;
}

.jj-hh-icon{
  width:44px;
  height:44px;
  border-radius:999px;
  border:3px solid rgba(0,0,0,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 44px;
}

.jj-hh-icon--placeholder .jj-hh-dot{
  width:6px;height:6px;border-radius:999px;
  background: rgba(0,0,0,.55);
  display:inline-block;
  margin:0 2px;
}

.jj-hh-icon--dashicon{
  border:none;
  font-size:28px;
  line-height:1;
  color: rgba(0,0,0,.55);
}

.jj-hh-icon--image{
  border:none;
  overflow:hidden;
}
.jj-hh-icon--image img{ width:100%; height:100%; object-fit:cover; display:block; }

.jj-hh-headline{
  font-size: clamp(26px, 2.6vw, 44px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:.2px;
}

.jj-hh-subhead{
  margin-top:6px;
  font-size: 13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.9;
}

.jj-hh-card-body{
  margin-top: 0px;
}

/* Mobile carousel (scroll-snap)
   We toggle via JS so custom breakpoints work reliably.
*/
.jj-hero-highlight.is-mobile .jj-hh-track{
  display:flex;
  max-width: 88vw;
  gap: var(--jj-hh-gap);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding-bottom: 12px;
}
.jj-hero-highlight.is-mobile .jj-hh-track::-webkit-scrollbar{ height: 10px; }
.jj-hero-highlight.is-mobile .jj-hh-track > .jj-hh-card{
  flex: 0 0 var(--jj-hh-mobile-minw, 100%);
  width: var(--jj-hh-mobile-minw, 100%);
  min-width: var(--jj-hh-mobile-minw, 100%);
  max-width: var(--jj-hh-mobile-minw, 100%);
  min-height: var(--jj-hh-mobile-minh, var(--jj-hh-card-minh, auto)) !important;
  scroll-snap-align: start;
  vertical-align: middle;
  display: block;
  padding: 10%;
}
.jj-hero-highlight.is-mobile .jj-hh-track > .jj-hh-card.jj-hh-card--span-2.is-active {
	width: 88vw !important;
}
.jj-hero-highlight.jj-hh--overlay{
  left:50%;
  transform:translateX(-50%);
}
.jj-hero-highlight.is-mobile.jj-hh--overlay{
  left:0;
  transform:none;
  max-width:none;
  width:100%;
}


.jj-hero-highlight.is-mobile .jj-hh-track > .jj-hh-card,
.jj-hero-highlight.is-mobile[data-transition="fade"] .jj-hh-track > .jj-hh-card{
  min-height: var(--jj-hh-mobile-minh, var(--jj-hh-card-minh, auto)) !important;
}
/* Use custom breakpoint variable (set inline) */
@media (max-width: 99999px){
  /* placeholder to keep file simple */
}

.jj-hh-dots{
  display:none;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  gap:12px;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.jj-hero-highlight.is-mobile[data-dots="true"] .jj-hh-dots{ display:flex; }
.jj-hh-dotbtn{
  width:8px;height:8px;border-radius:999px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.15);
}
.jj-hh-dotbtn.is-active{
  transform:scale(1.35);
  background: #c3ce24;;
}
span.jj-hh-dotbtn:not(.is-active) {
    transform: scale(.85);
}
/* Mobile arrows */
.jj-hh-nav{ display:none; position:absolute; inset:0; pointer-events:none; }
.jj-hh-arrow{
  pointer-events:auto;
  position:absolute;
  top:62%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border-radius:999px;
  border:3px solid #c4d022;
  background: rgba(255,255,255,1);
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding: 0;
}
button.jj-hh-arrow.jj-hh-arrow--prev {
    border-radius: 50% !important;
    left: -20px;
}
button.jj-hh-arrow.jj-hh-arrow--next {
    border-radius: 50% !important;
    right: -20px;
}
.jj-hh-arrow img{
  width: 18px !important;
  height: 18px !important;
  display:block;
}
.jj-hh-arrow--prev img{ transform: rotate(180deg); }
.jj-hh-arrow--prev{ left: 8px; }
.jj-hh-arrow--next{ right: 8px; }
.jj-hero-highlight.is-mobile[data-arrows="true"] .jj-hh-nav{ display:block; }

/* Inner body alignment */
.jj-hh-card-body{ display:flex; flex-direction:column; gap:12px; }
.jj-hh-body-align-left{ align-items:flex-start; text-align:left; }
.jj-hh-body-align-center{ align-items:center; text-align:center; }
.jj-hh-body-align-right{ align-items:flex-end; text-align:right; }


/* Mobile fade mode */
.jj-hero-highlight.is-mobile[data-transition="fade"] .jj-hh-track{
  display:block;
  max-width:88vw;
  overflow:hidden;
  position:relative;
  padding-bottom:12px;
}
.jj-hero-highlight.is-mobile[data-transition="fade"] .jj-hh-track > .jj-hh-card{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--jj-hh-transition-duration,400ms) ease;
  flex:none;
  width:var(--jj-hh-mobile-minw, 100%);
  min-width:var(--jj-hh-mobile-minw, 100%);
  max-width:var(--jj-hh-mobile-minw, 100%);
  min-height: var(--jj-hh-mobile-minh, var(--jj-hh-card-minh, auto)) !important;
}
.jj-hero-highlight.is-mobile[data-transition="fade"] .jj-hh-card.is-active{
  position:relative;
  opacity:1;
  pointer-events:auto;
}


/* One-column parent helpers */
.jj-hero-highlight.jj-hh--one-col .jj-hh-card{
  min-height: var(--jj-hh-one-col-minh, var(--jj-hh-card-minh, auto));
  max-height: var(--jj-hh-one-col-maxh, none);
}

/* 2-column span option */
.jj-hero-highlight.jj-hh--two-col .jj-hh-card--span-2{
  grid-column: span 2;
}
.jj-hero-highlight.is-mobile .jj-hh-card--span-2{
  grid-column: auto;
}


.jj-hero-headline{margin:0 0 18px;color:inherit;}


/* v1.2.5 fixes */
.jj-hero-headline{width:100%;display:block;}
.jj-hero-headline--left{text-align:left !important;}
.jj-hero-headline--center{text-align:center !important;}
.jj-hero-headline--right{text-align:right !important;}

.jj-hh-card,
.jj-hh-card .wpb_wrapper,
.jj-hh-card .wpb_text_column,
.jj-hh-card .wpb_text_column .wpb_wrapper,
.jj-hh-card p,
.jj-hh-card li,
.jj-hh-card span,
.jj-hh-card strong,
.jj-hh-card em,
.jj-hh-card small,
.jj-hh-card h1,
.jj-hh-card h2,
.jj-hh-card h3,
.jj-hh-card h4,
.jj-hh-card h5,
.jj-hh-card h6,
.jj-hh-card ul,
.jj-hh-card ol,
.jj-hh-card blockquote,
.jj-hh-card a:not(.nectar-button){
  color: var(--jj-hh-card-text) !important;
}


/* v1.2.8 mobile sizing fix for all cards, including span-2 blocks */
.jj-hero-highlight.is-mobile .jj-hh-track > .jj-hh-card,
/* .jj-hero-highlight.is-mobile .jj-hh-track > .jj-hh-card.jj-hh-card--span-2 */,
.jj-hero-highlight.is-mobile[data-transition="fade"] .jj-hh-track > .jj-hh-card,
/* .jj-hero-highlight.is-mobile[data-transition="fade"] .jj-hh-track > .jj-hh-card.jj-hh-card--span-2 */{
  grid-column:auto !important;
  flex:0 0 var(--jj-hh-mobile-minw, 100%) !important;
  width:var(--jj-hh-mobile-minw, 100%) !important;
  min-width:var(--jj-hh-mobile-minw, 100%) !important;
  max-width:var(--jj-hh-mobile-minw, 100%) !important;
  min-height:var(--jj-hh-mobile-minh, var(--jj-hh-card-minh, auto)) !important;
}

.jj-hero-highlight.is-mobile[data-carousel="true"] .jj-hero-headline{
  text-align:center !important;
  margin-left:auto;
  margin-right:auto;
  width:100%;
}

.jj-hero-highlight.is-mobile .jj-hero-headline--left {
    text-align: center !important;
        margin-bottom: 4px !important;
}