html {
  scroll-behavior: smooth;
}

@media (min-width: 992px) {
  html {
    scroll-padding-top: 122px;
  }
}



#meadow {

h2 { 
  text-transform:none; 
  color:#183B65;
  letter-spacing:0;
  margin-top:1rem;
  margin-bottom:1rem;
}

.bg-nav {
  background: #38BEB8;
  background: linear-gradient(266deg,rgba(56, 190, 184, 1) 11%, rgba(0, 95, 132, 1) 98%);
}

.bg-stories { 
  background: #38BEB8;
  background: linear-gradient(0deg,rgba(56, 190, 184, 1) 0%, rgba(0, 95, 132, 1) 100%);
}
.bg-stories p { color:white; }
.bg-stories h2 { color:white; }

.bg-map { 
  background-color:#f4f0ef;
}

.bg-faq {
  background-color:#fafafa;
}







.meadow-hero { width:100%;  
  height: 400px; 
  background-size: cover;
  background-position: center center;
  position: relative;
}
.meadow-hero-overlay { position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;      /* pushes content to the bottom */
  justify-content: center;    /* or flex-start / flex-end for horizontal placement */
  padding:60px;       /* optional breathing room above the bottom edge */
 }
.meadow-hero h1 {
  margin: 0;
}
@media all and (min-width: 992px) {
  .meadow-hero { height:600px; }
  .meadow-hero-overlay { padding:150px 60px; }
}



/* nav */

.anchor-nav { padding-top:16px; padding-bottom:16px; }

.anchor-nav ul { padding:0; margin:0; list-style-type:none; text-align:center; text-wrap:balance; }
.anchor-nav ul li { padding:0; margin:0; list-style-type:none;  display: inline-block; 
  font-family:'jaf-domus';
}

.anchor-nav ul li a { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color:transparent; 
  color:white;
  font-size:28px; line-height:28px; font-weight:300; text-transform:uppercase; letter-spacing:0.010rem; 
  margin:0; padding: 6px 20px; transition: all 0.25s linear 0s; text-decoration:none; 
}
.anchor-nav ul li a:hover { 
  color:#fafafa; 
  text-decoration:none;
}

/* events */

.dtm-event { width:100%; height:100%; background-color:#002339; border-radius:1rem; overflow:hidden; }
.dtm-event a { display:table; width:100%; height:100%;  text-decoration:none; color:white; }
.dtm-event a:hover { text-decoration:none; color:white; }
.dtm-event-image { display:table-cell; width:100px; background-position:center center; background-size:cover; }
.dtm-event-content { display:table-cell; width:auto; padding:1rem; }

.dtm-event-subhead { font-family: 'jaf-domus',sans-serif; font-weight:600; font-size:0.9rem; line-height:1.2; text-wrap:balance; margin-bottom:0.5rem; }
.dtm-event-headline { font-family: 'jaf-domus',sans-serif; font-weight:400; font-size:1.5rem; line-height:1.2; text-wrap:balance; }



/* stories */

.meadow-post { width:100%; height:100%; background-color:white; border-radius:2rem; overflow:hidden; }
.meadow-post a { display:block; text-decoration:none; }
.meadow-post a:hover { display:block; text-decoration:none; }
.meadow-post-image { width:100%; aspect-ratio:1/1; background-position:center center; background-size:cover; }
.meadow-post-content { padding:1rem; }
.meadow-post-headline { font-family: 'jaf-domus',sans-serif; font-weight:400; color:#183B65; font-size:1.5rem; line-height:1.2; text-wrap:balance; }
.meadow-post-text { font-family: 'jaf-domus',sans-serif; font-weight:600; font-size:0.9rem; line-height:1.2; text-wrap:balance; margin-top:0.5rem; }



/* DTM Domino Slider */

.dtm-domino-row { display:block; width:100%; margin:0 auto; } /* apply max-width here as needed */
.dtm-domino-image { display:block; }
.dtm-domino-image-img { display:block; width:100%; padding-bottom:80%; background-size:cover; background-position:center center; }
.dtm-domino-content { display:block; padding:1.5rem; }

.dtm-domino-bg { background-color:#005f84; color:white; border-radius:0.5rem; overflow:hidden; }

.dtm-domino-flex {
  display: flex;
  align-items: center; /* center vertically */
  justify-content: center; /* center horizontally */
}
.dtm-domino-flex > div { width:100%; }

@media all and (min-width: 768px) {
	.dtm-domino-row { display:flex; }
	.dtm-domino-row-reverse { flex-direction: row-reverse; }
	.dtm-domino-image  { width:50%; padding:0; }
  .dtm-domino-image-img { width:100%; height:100%; padding:0; }
	.dtm-domino-content { width:50%; padding:2rem; }
  .dtm-domino-flex { min-height: 400px; }
}
@media all and (min-width: 992px) {
	.dtm-domino-content { padding:2.5rem; }
}
@media all and (min-width: 1200px) {
	.dtm-domino-content { padding:3rem;; }
}

.dtm-domino-subhead { font-weight:600; font-size:0.9rem; text-transform:uppercase; margin-bottom:0.5rem; letter-spacing:0.050rem; text-wrap:balance; }
.dtm-domino-headline { font-weight:700; font-size: 1.5rem; line-height: 1.3; margin-bottom:0.5rem; text-wrap:balance; }
.dtm-domino-text { font-size:0.9rem; margin-bottom:0.5rem; text-wrap:balance; }
.dtm-domino-cta { font-weight:700; font-size:0.9rem; margin-top:1rem; text-wrap:balance; }

.dtm-domino-container { margin:1.5rem 0; width:100%; position:relative; }

.dtm-domino-button-next, .dtm-domino-button-prev {
  display: flex;
  position: absolute;
  z-index: 10;
  top:25%;
  left:-16px;
  border: 0;
  background-color: #38beb8;
  color: #005f84;
  padding: 0 !important;
  font-size: 16px;
  line-height: 32px;
  height: 32px;
  width: 32px;
  margin-top: -16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 250ms ease;
}
.dtm-domino-button-next {
  left:auto; right:-16px;
}
@media all and (min-width: 768px) {
  .dtm-domino-button-next, .dtm-domino-button-prev { top:50%; }
}




/* fauxgram */

.fauxgram { width:100%; background-color:#068480; }

.fauxgram-row { width:100%; display:flex; }
.fauxgram-follow { width:100%; }
.fauxgram-follow a { display:flex; width:100%; height:100%; padding:60px 30px; align-items:center; text-decoration:none; color:white; }
.fauxgram-follow a:hover { color:white; text-decoration:none; }
.fauxgram-follow a div { width:100%; text-align:center; }

.fauxgram-icon { font-size:46px; line-height:1;  margin-bottom:0.75rem;  }
.fauxgram-headline { font-family: 'jaf-domus',sans-serif; font-weight:400; font-size:1.8rem; line-height:1.2; margin-bottom:0.75rem; text-wrap:balance; }
.fauxgram-handle { font-family: 'jaf-domus',sans-serif; font-weight:400; font-size:0.9rem; line-height:1.2; text-wrap:balance; }

.fauxgram-cell { width:50%; }
.fauxgram-img { width:100%; padding-bottom: 133%; background-size:cover; background-position:center center; }

@media all and (min-width: 992px) {
  .fauxgram { width:100%; display:flex; }
  .fauxgram-row { width:40%; }
  .fauxgram-follow { width:20%; }
}




/* mayor map */

.mayor-bg { background-color:#183b65; color:white; font-family: 'jaf-domus',sans-serif; }    
.mayor-map { display:block; width:100%; background-color:#183b65; }
.mayor-controls { display:block; width:100%; padding:24px; position:relative; z-index:20; background-color:#183b65; } 
.mayor-controls-hold { width:100%; max-width:400px; margin:0 auto; }
.mayor-panel { display:block; width:100%; height:500px; position:relative; z-index:1; border: 0px solid #183b65; text-align:center;  }
.mayor-panel #mayor_clmap { width:100%; height:100%; background-color:#183b65; }
@media all and (min-width: 992px) {
  .mayor-map { display:flex; flex-direction: row-reverse; width:100%; max-width:9999px; margin:0 auto; }
  .mayor-controls { width:400px; height:690px; padding:40px 30px; overflow:hidden; }
  .mayor-panel { width:calc(100% - 400px); height:690px; border-left:0px; text-align:center; }
}

.mayor-intro-title { font-family: 'jaf-domus',sans-serif; color: #e9f8fb; text-align:left; margin-bottom:1rem; font-size: 1.8rem; line-height:1.3; font-weight:600; } 
.mayor-intro-text { font-family: 'jaf-domus',sans-serif; color: #e9f8fb; text-align:left; font-size: 18px; line-height:1.3; } /* contains html */
.mayor-intro-advice { font-family: 'jaf-domus',sans-serif; color: #e9f8fb; font-size:0.8rem; text-wrap:balance; }

.mayor-drawer-handle { border:1px solid white; background-color:#183b65; }
.mayor-drawer-handle a { display:block; background-color:#183b65; color:white; }
.mayor-drawer-handle a:hover { background-color:#183b65; color:white; }
.mayor-layers-hold { border:1px solid white; background-color:#183b65; border-top:0; padding:12px 16px; }
.mayor-layers-hold ul { margin:20px 0 0 0; padding:0; list-style:none; }
.mayor-layers-hold ul li { margin:0 0 2px 0; padding:0; list-style:none; }
.mayor-layers-hold ul li a { display:block; width:100%; padding:10px; color:white; }
@media all and (min-width: 992px) {
  .mayor-intro-title { text-align:left; }
  .mayor-drawer-handle { border:0; }
  .mayor-layers-hold { border:0; padding:0; background-color:inherit; }
}

#mayor-drawer { display:table; width:100%; text-decoration:none; }
#mayor-drawer:hover { text-decoration:none; }
.mayor-drawer-label { display:table-cell; width:auto; text-align:left; padding:0 16px; font-size:16px; line-height:40px; }
.mayor-drawer-icon { display:table-cell; width:24px; text-align:right; padding:0 16px; font-size:16px; line-height:40px; }
#mayor-drawer.is-open .mayor-drawer-icon { transform: rotate(180deg); }
@media all and (min-width: 992px) {
  #mayor-drawer { display:none; }
}
 
.mayor-drawer-closed { max-height:0px; overflow:hidden; }
.mayor-drawer-open { max-height:900px; transition: var(--cty-transition-hover);  overflow:hidden; }

.mayor-drawer-drop-rel { position:relative; width:100%; height:40px; }
.mayor-drawer-drop-abs { position:absolute; top:0px; width:100%; }


/* layer control */

.mayor-layer { display:block; width:100%; border: 1px solid #e9f8fb;
  padding: 8px 8px;
  margin-bottom:10px;
  border-radius: 26px;
  text-decoration: none;
  text-align:left;
  font-size:18px; 
  line-height:22px;
  font-family: 'jaf-domus',sans-serif;
  font-weight:600;
}
.mayor-layer span { display:inline-block; width:22px; height:22px; border:0px solid white; 
  border-radius:12px; margin-right:6px; text-align:center; font-size:12px; line-height:22px; }

.mayor-layer-show-true { background-color:#e9f8fb; color:#183b65; transition: var(--cty-transition-hover) }
.mayor-layer-show-true:hover { background-color:white; color:#183b65; }
.mayor-layer-show-false { background-color:#183b65; color:#e9f8fb; transition: var(--cty-transition-hover) }
.mayor-layer-show-false:hover { background-color:white; color:#183b65; }

.mayor-layer-show-true span { display:inline-block; }
.mayor-layer-show-false span { display:inline-block; background-color:var(--cty-bg-mayor-off-icon); color:var(--cty-txt-mayor-off-icon); }

/* map popups */

.mayor-marker-sm { width:24px; height:24px; cursor: pointer; border-radius:12px; background-color:black; text-align:center; 
  font-size:12px; line-height:24px; color:white; box-shadow: 0px 0px 2px 0px rgba(255,255,255, 0.4); }

.mayor-marker-lg { width:32px; height:32px; cursor: pointer; border-radius:16px; background-color:black; text-align:center; 
  font-size:14px; line-height:32px; color:white; box-shadow: 0px 0px 2px 0px rgba(255,255,255, 0.4); }

.mayor-marker-1, .mayor-marker-layer1 { background-color:#183b65; color:white; }
.mayor-marker-2, .mayor-marker-layer2 { background-color:#183b65; color:white; }
.mayor-marker-3, .mayor-marker-layer3 { background-color:#183b65; color:white; }
.mayor-marker-4, .mayor-marker-layer4 { background-color:#183b65; color:white; }
.mayor-marker-5, .mayor-marker-layer5 { background-color:#183b65; color:white; }
.mayor-marker-6, .mayor-marker-layer6 { background-color:#183b65; color:white; }
.mayor-marker-7, .mayor-marker-layer7 { background-color:#183b65; color:white; }

.mayor-panel .mapboxgl-popup { width: 240px; padding-bottom: 10px!important; } /* adjust padding bottom to height of marker */
.mayor-panel .mapboxgl-popup-content { text-align: center; padding:0; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4); }

.mapboxgl-popup-content .mayor-popup-content { background-color:white; color:#183b65; padding:1.2rem; line-height:1.25; }
.mapboxgl-popup-content div.mayor-pop-image { width:100%; height:120px; background-position:center center; background-size:cover; }
.mapboxgl-popup-content p.mayor-pop-name { margin:0.5rem 0; font-weight:700; font-size:1.1rem; }
.mapboxgl-popup-content p.mayor-pop-address { margin:0.5rem 0; font-size:0.9rem;  }
.mapboxgl-popup-content p.mayor-pop-link { margin:0.5rem 0; }




} /* end meadow styles */


.op-accordion {
  --op-accordion-color: #183b65;
  --op-accordion-bg: white;  /* color of clickable body background */
  --op-accordion-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,border-radius 0.15s ease;
  --op-accordion-border-color: #183b65;
  --op-accordion-border-width: 2px;
  --op-accordion-border-radius: 1rem;
  --op-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --op-accordion-btn-padding-x: 1.25rem;
  --op-accordion-btn-padding-y: 1rem;
  --op-accordion-btn-color: #183b65; /* color of clickable header text */
  --op-accordion-btn-bg: #fafafa; /* color of clickable header background */
  --op-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23183b65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --op-accordion-btn-icon-width: 1.25rem;
  --op-accordion-btn-icon-transform: rotate(-180deg);
  --op-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --op-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23183b65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --op-accordion-btn-focus-border-color: #183b65; 
  --op-accordion-btn-focus-box-shadow: 0; /* 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */
  --op-accordion-body-padding-x: 1.25rem;
  --op-accordion-body-padding-y: 1rem;
  --op-accordion-active-color: #183b65;
  --op-accordion-active-bg: transparent;
}

.op-accordion { margin:1rem 0 1.5rem 0; font-family: 'jaf-domus',sans-serif; }

.op-accordion p, .op-accordion li { font-family: 'jaf-domus',sans-serif; font-size:18px; line-height:1.4 }

.op-accordion .accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--op-accordion-btn-padding-y) var(--op-accordion-btn-padding-x);
  color: var(--op-accordion-btn-color);
  text-align: left; /* Reset button style */
  background-color: var(--op-accordion-btn-bg);
  border: 0;
  border-radius:0;
  overflow-anchor: none;
  /*transition(var(--op-accordion-transition));*/
  font-size:inherit; 
  font-weight:600; /* we add */
  font-size:20px;

  &:not(.collapsed) {
    color: var(--op-accordion-active-color);
    background-color: var(--op-accordion-active-bg);
    box-shadow: inset 0 calc(-1 * var(--op-accordion-border-width)) 0 var(--op-accordion-border-color); /* stylelint-disable-line function-disallowed-list */

    &::after {
      background-image: var(--op-accordion-btn-active-icon);
      transform: var(--op-accordion-btn-icon-transform);
    }
  }

  /* Accordion icon*/
  &::after {
    flex-shrink: 0;
    width: var(--op-accordion-btn-icon-width);
    height: var(--op-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--op-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--op-accordion-btn-icon-width);
  }

  &:hover {
    z-index: 2;
  }

  &:focus {
    z-index: 3;
    border-color: var(--op-accordion-btn-focus-border-color);
    outline: 0;
    box-shadow: var(--op-accordion-btn-focus-box-shadow);
  }
}

.op-accordion .accordion-header {
  margin-bottom: 0;
}

.op-accordion .accordion-item {
  color: var(--op-accordion-color);
  background-color: var(--op-accordion-bg);
  border: var(--op-accordion-border-width) solid var(--op-accordion-border-color);
}

.op-accordion .accordion-body {
  padding: var(--op-accordion-body-padding-y) var(--op-accordion-body-padding-x);
}


/* Flush accordion items
 Remove borders and border-radius to keep accordion items edge-to-edge.*/

.op-accordion .accordion-flush {
  .accordion-collapse {
    border-width: 0;
  }

  .accordion-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;

    &:first-child { border-top: 0; }
    &:last-child { border-bottom: 0; }

    .accordion-button {
      &,
      &.collapsed {
        border-radius:0;
      }
    }
  }
}