/* alert box */

.alert-wrap { background-color:var(--cms-black); }
.alert-wrap, a.alert-link, a.alert-link:hover { color:var(--cms-yellow); }
.alert-hold { display: table; width: 100%; }
.alert-prefix { display:table-cell; vertical-align: top; width:32px; padding-top:20px; padding-right:20px; }
.alert-content { display:table-cell; vertical-align: top; width:auto; padding-top:20px; }
.alert-dismiss { display:table-cell; vertical-align: top; width:32px; padding-top:20px; text-align:right; }

.alert-prefix { 
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.100rem;
  padding-bottom:20px;
}

.alert-content { 
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.100rem;
}

.alert-message { padding-bottom:20px; }
a.alert-link { text-decoration:underline; }
a.alert-link:hover { text-decoration:underline; }

.alert-dismiss { 
  font-size:20px;
  line-height:20px; 
  padding-bottom:20px;
}

#dismiss-alert { color:var(--cms-yellow); text-decoration:none; }


/* fauxgram grid */

.fauxgram-grid {
  width:100%; 
  background-color:var(--cms-coral); 
  color:var(--cms-black);  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.fauxgram-grid-cell {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size:cover;
}

.fauxgram-grid-double {
  grid-column: span 2; /* full width on mobile */
}

.fauxgram-grid-double a { display:block; aspect-ratio: 2 / 1; text-decoration:none; }
.fauxgram-grid-double a:hover { text-decoration:none; }

@media (min-width: 992px) {
  .fauxgram-grid {
    grid-template-columns: repeat(5, 1fr);
  }

   .fauxgram-grid-double {
    grid-column: span 2; /* 2 of 5 cols = 40% */
  }

}



.fauxgram-handle-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  gap: 24px;
  aspect-ratio: 2 / 1; /* wide landscape ratio matching the double cell */
}

/* Tree/illustration side */
.fauxgram-handle-box-tree {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fauxgram-handle-box-tree img {
  width: 120px;
  height: auto;
}

/* CTA side */
.fauxgram-handle-box-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Instagram icon */
.fauxgram-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 6px;
  color:#061B55!important; 
}


/* "Follow us on IG" */
.fauxgram-follow {
  font-family: 'fenwick', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 4px;
  white-space: nowrap;
  color:#061B55!important; 
}
  


/* @handle */
.fauxgram-name {
  font-family: 'fenwick', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color:#061B55!important; 
}





/* quick links */

.qlinks { 
  width:100%; 
  display: grid; 
  grid-template-columns: 1fr;
}

.qlink a { 
  display: flex;
  flex-direction: row; 
  height:500px;
  text-decoration:none;
  font-size:2rem;
  line-height:1.1;
  font-weight:800;
  text-wrap:balance;
  color:#061B55!important;
}

.qlink-image {
  flex: 0 0 65%; /* fixed ~65% width, doesn't grow/shrink */
  overflow:hidden;
}

.qlink-image-img {
  width:100%; height:100%;
  background-position: center center;
  background-size:cover;
}

.qlink-sidebar {
  flex: 1; /* takes remaining */
  display: flex;
  flex-direction: column;  /* stacks label on top, icon tile below */
}

.qlink-medium {
  flex: 1;        
  display: flex;
  align-items:end; 
  justify-content:start;
  padding:1.5rem;
}
.qlink-wine{
  flex: 1;   
  background-image:url('https://ctycms.com/ca-santa-rosa/icon-drink.svg');
  background-position: center center;
  background-repeat:no-repeat;
  background-size: 80% auto;     
}
.qlink-sun {
  flex: 1;   
  background-image:url('https://ctycms.com/ca-santa-rosa/yellow-sun-1000x1000.svg');
  background-position: center center;
  background-repeat:no-repeat;
  background-size: 80% auto;     
}

.qlink-tree {
  flex: 3; 
  background-image:url('https://ctycms.com/ca-santa-rosa/icon-tree-dk.svg');
  background-position: bottom right;
  background-repeat:no-repeat;
  background-size: 60% auto;     
}
.qlink-clock {
  flex: 3; 
  background-image:url('https://ctycms.com/ca-santa-rosa/blue-clock.svg');
  background-position: bottom center;
  background-repeat:no-repeat;
  background-size: 60% auto;     
}
.qlink-small {
  flex: 1; 
  display: flex;
  align-items:center; 
  justify-content:center;
  padding:1.5rem;
}


@media (min-width: 768px) {
  .qlinks { 
    grid-template-columns: 1fr 1fr;
   }
  .qlink2 a { 
    flex-direction: row-reverse;
  } 
  .qlink3 a { 
    flex-direction: row-reverse;
  } 
  .qlink a .qlink-image-img { transform:scale(1); transition: transform 0.8s ease; }
  .qlink a:hover .qlink-image-img { transform:scale(1.025); }
}



/* getting around */

.ga-hold { display:block; }
.ga-header { display:block; padding:12px; }
.ga-hold h2 { 
  font-size:1.2rem;
  font-family: 'fenwick', sans-serif;
  font-weight: 700;
  margin:0; 
  text-align:center; 
   color:#061B55!important; 
}
.ga-grid { 
  width:100%; 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
}
.ga-grid a { display:block; text-decoration:none;  color:#061B55!important; }
.ga-stack {
  display: flex;
  flex-direction: column;
  height:200px;
}
.ga-label {        
  padding:1rem;
  font-family: 'fenwick', sans-serif;
  font-weight: 700;
  text-align:center;
  font-size:1.1rem;
  line-height:1.1;
  font-weight:800;
  text-wrap:balance;
}
.ga-sun {
  flex: 1;  
  align-self: stretch;
  background-image:url('https://ctycms.com/ca-santa-rosa/yellow-sun-1000x1000.svg');
  background-position: center center;
  background-repeat:no-repeat;
  background-size: 60% auto;     
}
.ga-bike {
  flex: 1;   
  height:100%;
  align-self: stretch;
  background-image:url('https://ctycms.com/ca-santa-rosa/blue-bike.svg');
  background-position: bottom center;
  background-repeat:no-repeat;
  background-size: 60% auto;     
}
.ga-tree {
  flex: 1;   
  align-self: stretch;
  background-image:url('https://ctycms.com/ca-santa-rosa/images/faux-tree-sun-173x193.svg');
  background-position: bottom center;
  background-repeat:no-repeat;
  background-size: 50% auto;     
}

@media (min-width: 992px) {

  .ga-stack { height:450px; }

  .ga-label { font-size:1.5rem; padding:1.5rem; }
  
  .ga-hold {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .ga-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: fit-content;
    padding: 1rem 0.5rem;
  }

  .ga-header h2 {
    writing-mode: vertical-rl;
    transform: rotate(180deg); 
    white-space: nowrap;
    margin: 0;
  }

  .ga-grid {
    flex: 1;
    min-width: 0;
  }

}




/* image roll */

.op-image-roll-hold { background-color:inherit; margin-top:10px; }

.op-image-roll .swiper-wrapper { width:100%; height:500px; position:relative; }

.op-image-roll .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.op-image-roll .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.op-image-roll .swiper-navigation {
  position: absolute;
  z-index: 999;
  bottom: 30px;
  right: 30px;
  background-color: var(--cms-dark-blue);
  border-radius: 30px;
  width: 96px;
  height: 48px;
}

.op-swiper-roll-prev, .op-swiper-roll-next { 
  display:block; 
  width:48px; 
  height:48px; 
  font-size:24px; 
  line-height:48px; 
  text-align:center; 
  float:left; 
  color:white; 
  opacity:0.85; 
}

.op-swiper-roll-prev:hover { opacity:1; }
.op-swiper-roll-next:hover { opacity:1; }


/* banner */

.no-banner { width:100%; border-top:1px solid #fafafa; }
.banner-b { width:100%; height:240px; background-color:var(--cty-banner-wrap); background-position:center center; background-size:cover;}
@media all and (min-width: 992px) {
  .banner-b { height:240px; }
}




/* detail header */

.detail-header { width:100%; background:#fafafa; border-bottom: 1px solid #eee; }
.detail-header h1 { font-size: 3.0rem; margin:0; }

p.header-groups { margin:1rem 0; } 
a.btn-header-groups { background-color:inherit; padding:4px 8px; margin:3px 1px; border-radius:4px; transition: all 0.15s linear 0s;  }
a.btn-header-groups { font-size:13px; line-height:15px; letter-spacing:0.050rem; font-weight:700; text-transform:uppercase; 
  color:var(--cty-alink); border:2px solid var(--cty-alink); text-decoration:none; }
a.btn-header-groups:hover { color:var(--cty-ahover); border-color:var(--cty-ahover); text-decoration:none; }





/* css for modal backdrop */

.modal-backdrop { background-color: rgb(16, 31, 171); }
.modal-backdrop.show { opacity:0.75; }

#myModal .modal-body h1 { margin-top:1rem; }
#citylightModal .modal-body h1 { margin-top:1rem; }



/* basic lightbox */

.lightbox-wrap { margin-top:1.5rem; }
.lightbox-squares { width:100%; padding-bottom:100%; background-color:var( --cty-bg-card); background-position:center center; background-size:cover; }



/* solr search */

.site-search-nav { display:table; margin:24px 0px; }
.site-search-nav-control { display:table-cell; vertical-align:middle; padding-right:16px; border:0px solid #eee; }
.site-search-nav-counter { display:table-cell; font-style:italic; padding-right:16px; border:0px solid #eee; }

ul.site-search { margin:10px 0px; padding:0; list-style-type:none; }
ul.site-search li { margin-bottom:16px; }
ul.site-search li span.solr_type { display:block; text-transform:uppercase; font-size:12px; line-height:18px; font-weight:700; letter-spacing:0.100rem; }
ul.site-search li a { font-size:20px; line-height:30px; }
ul.site-search li span.solr_highlight { display:block; font-size:15px; line-height:22px; }
ul.site-search li span.solr_highlight em { font-style:normal; font-weight:700; }


/* cafe-weather */

.cafe-weather { width:100%; max-width:300px; border:1px solid#666; border-radius:1rem; padding:1rem 2rem; margin:1.5rem 0; }
.cafe-weather-today { text-align:center; color:inherit; font-weight: 500; font-size:1rem; line-height:1.1; letter-spacing:0.050rem; text-transform:uppercase; }
.cafe-weather-divider { width:100%; height:2px; opacity:0.25; background-color:#aaa; margin:0.5rem 0; }
.cafe-weather-current { text-align:center; color:inherit; font-weight: 400; font-size:1rem; line-height:1.1; }
.cafe-weather-future { text-align:center; color:inherit; font-weight: 400; font-size:1.5rem; line-height:1.1; }



/* image roll */

.image-roll-hold { background-color:#eee; }

.imagerollSwiper .swiper-wrapper { width:100%; height:500px; position:relative; }

.imagerollSwiper .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagerollSwiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imagerollSwiper .swiper-navigation {
  position: absolute;
  z-index: 999;
  bottom: 30px;
  right: 30px;
  background-color: black;
  border-radius: 30px;
  width: 96px;
  height: 48px;
}

.swiper-roll-prev, .swiper-roll-next { display:block; width:48px; height:48px; font-size:24px; line-height:48px; text-align:center; float:left; color:white; opacity:0.85; }

.swiper-roll-prev:hover { opacity:1; }
.swiper-roll-next:hover { opacity:1; }



/* sharing-box */

.sharing-box { display:table; margin:10px auto; }
.sharing-label { display:table-cell; text-align:center; padding:10px; }
.sharing-icons { display:table-cell; text-align:center; }
.sharing-square { display:inline-block; text-align:center; margin:10px; }
.sharing-square a { display:inline-block; width:40px; height:40px; font-size:18px; line-height:38px; text-align:center;  }
.sharing-square a { text-decoration:none; color:white; background-color:var(--cty-alink); border:none; transition: all 0.15s linear 0s;}
.sharing-square a:hover { color:white; background-color:var(--cty-ahover); }
.share-cta { font-size:14px; line-height:16px; letter-spacing:0.100rem; font-weight:700; text-transform:uppercase; }
@media all and (min-width: 9999999px) {
	.sharing-box { display:block; margin-top:0px; }
	.sharing-label { display:block; }
	.sharing-icons { display:block; }
	.sharing-square { display:block; margin:20px 10px; }
}



.op-accordion {
  --op-accordion-color: var(--cty-pagewrap-txt);
  --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: var(--bs-border-color);
  --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(--cty-pagewrap-txt); /* 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='%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(--cty-pagewrap-txt);
  --op-accordion-active-bg: white;
}

.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;
      }
    }
  }
}

/* meetings support */

ul.op-meetings-list { margin:0; padding:0; list-style:none; }
ul.op-meetings-list li { margin:0; padding:1rem 0 1.5rem 0; list-style:none; border-bottom:1px solid var(--op-accordion-border-color); }
ul.op-meetings-list li:last-child { border-bottom:0; }