
/* follows
// $citylight_bootstrap_css 
// https://blocks.citylightstudio.net/_citylight_start_v09.css
// https://blocks.citylightstudio.net/_citylight_start_v10.css
// https://blocks.citylightstudio.net/_blocks_css.css
*/

:root {
  --cty-default-fg: var(--cms-navy-dark); /* #202124 is google black */
  --cty-default-bg: var(--cms-cream); /* #fffaf2 is an nice cream */

  --cty-linework: orange; /* hr, other lines */
  
  --cty-offscreen-bg: var(--cms-cream); /* below the footer, rarely visible */

  --cty-alink: #1976D2; /* primary link color */
  --cty-ahover: #2196F3; /* primary hover color */

  --cty-abtnlink: #146fc8; /* primary link color */
  --cty-abtnhover: #1363b1; /* primary hover color */
  --cty-abtnlink: var(--cms-orange-dark); /* primary link color */
  --cty-abtnhover: var(--cms-orange-dark); /* primary hover color */

  --cty-op-sidenav-bg-content: var(--cty-default-bg);
  --cty-op-sidenav-bg-nav: var(--cty-default-bg);
  --cty-op-sidenav-lines: #666;

  --cty-map-marker-bg: #1976D2; /* mapbox marker */
  --cty-map-marker-fg: #ffffff; /* mapbox marker */
  --cty-map-marker-bg: red; /* mapbox marker */
  --cty-map-marker-fg: yellow; /* mapbox marker */


  

}




.op-accordion {
  --op-accordion-color: var(--cms-navy);
  --op-accordion-bg: var(--cms-cream);  /* 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: var(--cms-gold-light);
  --op-accordion-border-width: var(--bs-border-width);
  --op-accordion-border-radius: var(--bs-border-radius);
  --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: var(--cms-navy); /* color of clickable header text */
  --op-accordion-btn-bg: var(--cms-cream); /* 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='%23212529'%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='%23052c65'%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: #86b7fe; 
  --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: var(--cms-navy);
  --op-accordion-active-bg: var(--cms-cream);
}

.op-accordion { margin:1rem 0 1.5rem 0; }

.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:700; /* we add */

  &: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;
      }
    }
  }
}
