/**
 * "I want to" homepage hero-overlay widget.
 *
 * This paragraph is placed as a sibling item directly after a Hero Image
 * (ffx_pa_hero) paragraph in field_ffx_pagewidgets, so it renders as the
 * next element in normal page flow after .jumbotron-focalpoint. The overlay
 * effect below is achieved purely with a negative margin-top pulling this
 * element up over the bottom of the hero -- ffx_pa_hero's own
 * template/CSS is untouched and unaware this element exists.
 *
 * Pixel/breakpoint values below are placeholders pending a design-review
 * pass against the live hero height; the 991px breakpoint matches the
 * existing .focalpoint-overlay breakpoint in the theme's custom.css.
 */

.ffx-cd-iwantto {
  position: relative;
  z-index: 2;
  margin: -120px auto 0;
  max-width: 960px;
  background: var(--ltBlueGray);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  overflow: visible;
}

@media screen and (max-width: 991px) {
  .ffx-cd-iwantto {
    margin-top: -40px;
    max-width: 100%;
  }
}

/* "I want to" bar */
.ffx-cd-iwantto__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  /* background: #fff; */
  border-radius: 12px 12px 0 0;
  padding: 16px;
  margin-left: -12px;
  margin-right: -12px; 
  box-shadow: 0 12px 6px -9px rgba(0, 0, 0, 0.3);
}

.ffx-cd-iwantto__pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ffx-cd-iwantto__label {
  font-weight: 700;
  margin-right: 4px;
  font-size: 1.4em;
}

.ffx-pill {
  display: inline-block;
  border: 1px solid #0b3d5c;
  border-radius: 999px;
  padding: 6px 16px;
  color: #0b3d5c;
  text-decoration: none;
  background: transparent;
  font-size: 0.9em;
}

.ffx-pill:hover,
.ffx-pill:focus {
  text-decoration: underline;
}

.ffx-pill.is-active {
  background: #0b3d5c;
  color: #fff;
}

.ffx-cd-iwantto__toggle_backdrop__buttoncontainer {
   min-width:265px;
}


.ffx-cd-iwantto__toggle {
  background: #0b3d5c;
  border: 1px solid #0b3d5c;
  color: #fff;
  border: 1px solid #0b3d5c;
  border-radius: 12px;
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 3;
  position:relative;
  width: -webkit-fill-available;
  min-width: 280px;
  left: 3px;
}




.ffx-cd-iwantto__toggle:hover,
.ffx-cd-iwantto__toggle:focus {
  background: #092e46;
}

.ffx-cd-iwantto__toggle[aria-expanded="true"] {
  background: unset;
  border:1px solid #97b8cc;
}

.ffx-cd-iwantto__toggle_backdrop,
.ffx-cd-iwantto__toggle_backdrop__reversecurve {
  /* Fade in sync with .ffx-cd-iwantto__realtime-panel (see
     js/ffx_cd_iwantto.js, which adds/removes .is-open on all three
     together). The backdrop itself is fade-only (no slide -- it reads
     better staying put directly behind the toggle button); the reversecurve
     keeps the upward slide to match the panel edge it visually joins. */
  transition: opacity 180ms ease;
  opacity: 0;
}

.ffx-cd-iwantto__toggle_backdrop__reversecurve {
  transition: opacity 180ms ease, transform 180ms ease;
  transform: translateY(10px);
}

.ffx-cd-iwantto__toggle_backdrop.is-open,
.ffx-cd-iwantto__toggle_backdrop__reversecurve.is-open {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ffx-cd-iwantto__toggle_backdrop,
  .ffx-cd-iwantto__toggle_backdrop__reversecurve {
    transition-duration: 0.01ms;
  }
}

.ffx-cd-iwantto__toggle_backdrop {
  position: absolute;
  top: -8px;
  right: 0;
  width: 305px;
  height: 80px;
  background-color: #1d5e87cc;
  z-index: 0;
  border-radius: 0 0 12px 12px;
}

.ffx-cd-iwantto__toggle_backdrop__reversecurve {
  position: absolute;
  top: -8px;
  right: 305px;
  width: 12px;
  height: 12px;
  background-color: #1d5e87cc;
  z-index: 1;
  -webkit-mask: radial-gradient(12px at 100% 0, #0000 98%, #000 100%) 100% 0 / 100% 100% no-repeat;
  mask: radial-gradient(12px at 100% 0, #0000 92%, #000 100%) 100% 0 / 100% 100% no-repeat;
  rotate: 180deg;
}



/* Real-time info panel (toggled open/closed above the bar) */
.ffx-cd-iwantto__realtime-panel {
  /* Starting ("closed") state for the open/close animation: faded out and
     shifted down slightly, so opening reads as a quick upward swipe into
     place rather than a hard cut. js/ffx_cd_iwantto.js adds/removes
     .is-open (see below) to drive the transition, and only sets [hidden]
     once the closing transition has actually finished. */
  transition: opacity 180ms ease, transform 180ms ease;
  opacity: 0;
  transform: translateY(10px);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  background: #1d5e87cc;
  border-radius: 12px 12px 0 12px;
  padding: 16px;
  color: #fff;
    margin-bottom: 8px;
}

.ffx-cd-iwantto__realtime-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ffx-cd-iwantto__realtime-panel {
    /* Not "transition: none" -- js/ffx_cd_iwantto.js listens for
       transitionend to know when the closing animation has finished and
       it's safe to set [hidden] again; a near-zero (rather than zero)
       duration keeps that working while making the motion imperceptible. */
    transition-duration: 0.01ms;
  }
}


.ffx-cd-iwantto__realtime-boxes {
  display: flex;
  gap: 12px;
}
.ffx-cd-iwantto__realtime-boxes .field--items {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.ffx-cd-iwantto__realtime-boxes .field--items .field--item {
  flex: 1 1 250px;
}

@media screen and (max-width: 991px) {
  .ffx-cd-iwantto__realtime-panel {
    position: static;
  }

  .ffx-cd-iwantto__realtime-boxes {
    flex-direction: column;
  }
}

/* Container for the two footer panels (Next Board Meeting + Quick Links)
   -- the panel "card" look (background/padding/border-radius) lives on
   each child individually below, not here, so they read as two separate
   panels rather than one shared box. */
.ffx-cd-iwantto__panel-footer {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 12px;
}

.ffx-cd-iwantto__quicklinks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 66.6667%;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  color: #0b3d5c;
}

.ffx-cd-iwantto__quicklinks-label {
  font-weight: 700;
  margin-right: 4px;
}

/* Pushes the rendered pills (the field's own Drupal wrapper div) as far
   right as the panel allows, leaving the "Quick Links" label at the left
   -- the pills themselves stay in their normal flex row, so their
   original/configured order is unaffected, only their position as a
   group shifts. */
.ffx-cd-iwantto__quicklinks .field--name-field-ffx-cd-iw-quicklinks {
  margin-left: auto;
}

.ffx-cd-iwantto__quicklinks .field--items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media screen and (max-width: 991px) {
  .ffx-cd-iwantto__panel-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .ffx-cd-iwantto__next-board-meeting,
  .ffx-cd-iwantto__quicklinks {
    flex-basis: auto;
  }
}

/* Real-time info box (ffx_pa_clientdash_realtime_box) */
.ffx-cd-rtb {
  flex: 1 1 0;
  background: #fff;
  border-radius: 8px;
  color: #0b3d5c;
  overflow: hidden;
}

.ffx-cd-rtb__header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0b3d5c;
  color: #fff;
  padding: 8px 12px;
  font-weight: 700;
}

.ffx-cd-rtb__title {
  flex: 1;
}

.ffx-cd-rtb__header-link {
  color: #fff;
  font-size: 0.85em;
  white-space: nowrap;
}

.ffx-cd-rtb__content {
      display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    font-size: .9em;
}

.ffx-cd-rtb__body {
  padding: 8px;
  min-height: 147px;
  display: flex;
  align-items: center;
}

.ffx-cd-rtb--weather .ffx-cd-rtb__body
{
  
}
.ffx-cd-rtb__loading {
  color: #666;
  font-style: italic;
  position:absolute;
  top:64px;
}

.ffx-cd-rtb__error {
  color: #a94442;
}

.ffx-cd-rtb__body img {
  max-width: 100%;
  display: block;
}

.ffx-cd-rtb--image img {
  border-radius: 6px;
  padding: 0px!important;
}

/* field_ffx_cd_rtb_link_body ("Make entire box a link") renders
   .ffx-cd-rtb__body as an <a> instead of a <div> -- undo the browser's
   default link styling so it still reads like a plain content box. */
a.ffx-cd-rtb__body {
  color: inherit;
  text-decoration: none;
}

/* 3-column grid (field_ffx_cd_iw_grid_items) below the "I want to" bar --
   normal page flow, not part of the hero overlap. Holds contributor-added
   ffx_content_section_with_link / ffx_mini_content_box paragraphs. */
.ffx-cd-iwantto__grid {
  border-radius: 0 0 12px 12px;
  padding: 16px;
}

.ffx-cd-iwantto__grid > .field--name-field-ffx-cd-iw-grid-items {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  gap: 12px;
}

@media screen and (max-width: 991px) {
  .ffx-cd-iwantto__grid > .field--name-field-ffx-cd-iw-grid-items {
    grid-template-columns: 1fr;
  }
}

.rt_group_status {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 16px;
}

.ffx-cd-rtb--weather .ffx-cd-rtb__content {
    align-content: normal;
    padding: 16px;
}

.ffx-cd-rtb--remote_json .ffx-cd-rtb__content > *:not(:last-child){
    border-bottom: 1px solid #c4c8cb;
    padding-bottom: 16px;
    margin-bottom: 0px;
}

.rt_title {
  flex: 1; 
  font-weight: bold;
  text-wrap: nowrap;
}

.rt_status {
    flex: 1;
    min-width: 170px;
    border: 1px solid #c4c8cb;
    border-radius: 12px;
    padding-left: 6px;
}

/* Status icon prepended to field_description values containing a
   recognized keyword (see FFX_STATUS_KEYWORD_GROUPS in
   js/ffx_cd_realtime_box.js) -- a colored circle with a white icon. */
.ffx-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  margin-right: 0.4em;
  color: #fff;
  font-size: 0.75em;
  vertical-align: middle;
}

.ffx-status-icon--good {
  background-color: #2e7d32;
}

.ffx-status-icon--attention {
  background-color: #f9a825;
}

.ffx-status-icon--bad {
  background-color: #c62828;
}

.rt_group_weathertemp {
  font-size: 2.5em;
  padding: 12px 0;
  font-weight: 700;
}

.rt_group_weathertemp::after{
  content: "\00B0 F";
}

.rt_group_weatherconditions {
  font-size: 1.2em;
}

/* "Next Board Meeting" bar (js/ffx_cd_iwantto.js populates this from
   /countyevents/feed/, independently of the homepage's own events
   calendar widget). Empty/unstyled when no upcoming Board Meeting is
   found. */
.ffx-cd-iwantto__next-board-meeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 1 33.3333%;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  color: #0b3d5c;
}

.ffx-cd-iwantto__next-board-meeting:empty {
  display: none;
}

.ffx-nbm__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ffx-nbm__icon {
  color: #0b3d5c;
}

.ffx-nbm__label {
  font-weight: 700;
  white-space: nowrap;
}

.ffx-nbm__datetime {
  white-space: nowrap;
}

.ffx-nbm__watch-live {
  /* No margin-left: auto needed -- .ffx-cd-iwantto__next-board-meeting's
     own justify-content: space-between already pushes this to the far
     edge when it's present. */
  white-space: nowrap;
}

@media screen and (max-width: 1021px) {
  .ffx-cd-iwantto__toggle_backdrop,
  .ffx-cd-iwantto__toggle_backdrop__reversecurve {
    display:none;
  }
    
  .ffx-cd-iwantto__realtime-panel, 
  .ffx-cd-iwantto.container,
  .ffx-cd-iwantto__toggle {
          background: #1d506e;
          border-radius: 0;
    }

  .ffx-cd-iwantto.container {
    padding: 0px;
  }

  .ffx-cd-iwantto__toggle_backdrop__buttoncontainer {
        position: absolute;
        top: -60px;
        background: #1d506e;
        margin-left: -20px;
        height: 64px;
        padding-top: 7px;
        width: 105%;
        margin-left: -15px;
  }

  .ffx-cd-iwantto__toggle_backdrop__buttoncontainer .ffx-cd-iwantto__toggle {
    border:unset;
    background-color: #1d506e;
    font-size: 1.3em;
  }

  .ffx-cd-iwantto__bar {
    background: var(--ltBlueGray);
    border-radius: 0;
    width: stretch;
  }
  .ffx-cd-iwantto__realtime-boxes .field--items {
    /* margin-top: 44px; */
  }

  .ffx-cd-iwantto__realtime-boxes .field--items .field--item {
    flex: stretch!important;
  }

  #home-tabs.secondary {
    width: 100%;
    margin-top:0;
  }

   #home-tabs.secondary .container {
    width: 100%;
    margin: 0;
    padding: 0;
  }
   #home-tabs.secondary .container .row>.col-12{
      padding: 0;
   }

  #home-tabs.secondary .tab-content .card.accordion-header {
    background-color: unset!important;
        box-shadow: 0 12px 6px -9px rgba(0, 0, 0, 0.3);
  }

  #home-tabs.secondary .accordion-button > .title {
    font-size: 1.4em !important;
    margin-left: 0px !important;
  }


  #home-tabs.secondary .accordion-button > .icon {
    width: 50px;
    height: 50px;
    margin: 16px;
    border: 2px solid;
    background: unset;
  }

  #home-tabs.secondary .accordion-button > .icon i {
    font-size: 2em!important;
  }
  #home-tabs.secondary .accordion-button > .icon::after {
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
  }
  #home-tabs.secondary .tab-content::before {
    display: none!important;
  }
}