/* Boise River Park
   Combined stylesheet — main.css + calendar.css + inline styles
   April 2026
   ============================================================ */

/* === BASE ================================================== */


body {
  font: 1em sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  color: lightcoral;
}

abbr,
acronym {
  text-decoration: none !important;
  cursor: help;
}

.bolder {
  font-weight: bold;
}

.my-small {
  font-size: 0.7rem;
}

.my-indent {
  margin-left: 15px;
}

.mt-3 {
  margin-top: 3px;
}

.my-label {
  margin: 0 5px;
}

.my-row {
  display: flex;
  flex-wrap: wrap;
}

.container {
  padding: 0;
}

/* === LAYOUT ================================================= */

  .my-container {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    height: fit-content;
  }

  .my-player {
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
  }

  .iframe-player {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* === ACCORDION ============================================== */

  #accordion {
    width: 100%;
  }

  .ui-accordion .ui-accordion-content {
    padding: 0.1em 0.1em;
  }

  .ui-accordion .ui-accordion-header {
    font-size: 105%;
    font-weight: 550;
    height: 14px;
    display: flex;
    align-items: center;
  }

  .ui-state-active {
    border: 1px solid gainsboro;
    background-color: #c4c4c4;
    color: black;
  }

  /* === LEGEND / MAP OVERLAY =================================== */

  .map-content {
    position: absolute;
    z-index: 1000;
    padding: 4px 7px 5px;
    line-height: 1.6;
    font-size: 1.2em;
    background-color: rgba(221, 205, 213, 0.41);
    border-radius: 5px;
  }

  .map-content2 {
    position: absolute;
    z-index: 1000;
    padding: 4px 7px 5px;
    line-height: 1.6;
    font-size: 1.2em;
    background: rgba(111, 110, 110, 0.8);
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 2px solid #444;
    border-bottom: 2px solid #444;
    border-radius: 5px;
  }

  #now-link {
    position: relative;
    top: 17px;
  }

  #links {
    top: 110px;
    left: 80px;
  }

  #emoji img {
    margin-left: 6px;
    width: auto;
    vertical-align: middle;
  }

  /* === DATA DISPLAY (CFS / TEMPS / WEATHER) =================== */

  .time-span,
  #welcome .sunrise,
  #welcome .sun,
  #welcome .sunset,
  #weather-left {
    min-width: 50px;
    padding: 2px 4px;
    border-radius: 5px;
  }

  #top-cfs {
    padding: 2px 6px;
    text-align: center;
  }

  .cfs {
    background: #90ee90;
  }
  .water-temp {
    background: #78f0ef;
  }
  #weather-left {
    background: #ffc3ad;
  }
  .sunrise {
    background: #ffed9e;
  }
  .sunset {
    background: #d77e35;
  }
  .sun {
    background: #ffdc9c;
  }
  .transit {
    background: #fffc9c;
  }
  .dark {
    background: #bfd5dd;
  }
  .twilight {
    background: #d0e5ff;
  }
  .dusk {
    background: #b8bdbd;
  }

  .temp-sign {
    font-variant-caps: small-caps;
  }

  #weather-icon-left {
    width: 20px;
    height: 20px;
  }

  #before-sunrise,
  #after-sunset,
  #daylight {
    display: none;
  }

  #float-cdown,
  #next,
  #count,
  #tempf {
    display: none;
  }

  #rain-out,
  #m-issue,
  #m-author,
  #m-statusMessage {
    display: none;
  }

  #date {
    width: 120px;
  }
  #time {
    width: 55px;
  }
  #location {
    width: 250px;
  }

  /* === TOAST ================================================== */

  #float-container {
    height: fit-content;
    width: auto;
    position: absolute;
    z-index: 1000;
    padding: 4px 7px 5px;
    top: 38vh;
    right: 12vw;
  }

  #local-container {
    height: fit-content;
    width: auto;
    margin: auto;
  }

  #local-container img {
    max-width: 100%;
    height: auto;
    border: 0;
  }

  #local-text {
    text-align: center;
    color: lightgreen;
  }

  /* === BUTTONS / LINKS ======================================== */

  button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    padding: 0;
  }

  .my-button {
    padding-left: 2px;
  }

  .my-button:hover,
  .my-button:focus {
    color: #000;
    text-decoration: none;
    outline: none;
    box-shadow: none;
  }

  .lightbox-color {
    color: lightcoral;
    margin-left: 4px;
  }

  .lightbox-color:hover {
    color: blue;
  }

  .graph-link {
    background-color: #f3f3f3;
    margin: 5px 0 15px 0;
    padding-left: 15px;
  }

  /* === TOOLTIP ================================================ */

  .ui-tooltip {
    background-color: #333 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
  }

  .ui-tooltip .ui-tooltip-content {
    color: #fff;
  }

  .ui-tooltip .ui-tooltip-arrow {
    border-top-color: #333 !important;
  }

  .custom-tooltip .tooltip-inner {
    background-color: #333;
    color: #fff;
  }

  .custom-tooltip .tooltip-arrow {
    border-top-color: #333;
  }

  /* === NOTICE BAR ============================================= */

  .ShowHide {
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #1963d1;
    color: #ffffff;
    padding: 4px;
  }

  .ShowHide a {
    color: #ffffff;
    text-decoration: none;
  }

  .ShowHide a:hover {
    text-decoration: underline;
  }

  #left {
    overflow: hidden;
    text-align: center;
    height: fit-content;
  }

  #right {
    float: right;
    width: 30px;
    height: 20px;
    text-align: center;
  }

  /* === PHOTOSWIPE / GALLERY =================================== */

  .custom-html-slide {
    font-size: 40px;
    line-height: 45px;
    max-width: 400px;
    width: 100%;
    padding: 0 20px;
    margin: 50px auto 0;
    color: #fff;
    text-align: center;
  }

  .custom-html-slide a {
    color: #fff;
    text-decoration: underline;
  }

  /* === BUY ME A COFFEE ======================================== */

  .bmc-button {
    padding: 7px 10px !important;
    line-height: 35px !important;
    height: 51px !important;
    min-width: 217px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    color: #ffffff !important;
    background-color: #ff813f !important;
    border-radius: 5px !important;
    border: 1px solid transparent !important;
    font-size: 22px !important;
    letter-spacing: 0.6px !important;
    box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;
    margin: 0 auto !important;
    font-family: "Cookie", cursive !important;
    box-sizing: border-box !important;
    transition: 0.3s all linear !important;
  }

  .bmc-button img {
    height: 34px !important;
    width: 35px !important;
    margin-bottom: 1px !important;
    box-shadow: none !important;
    border: none !important;
    vertical-align: middle !important;
  }

  .bmc-button:hover,
  .bmc-button:active,
  .bmc-button:focus {
    box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
    text-decoration: none !important;
    opacity: 0.85 !important;
    color: #ffffff !important;
  }

  /* === MODAL ================================================== */

  .jw-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 14px;
    overflow: auto;
  }

  .jw-modal.open {
    display: block;
  }

  .jw-modal-body {
    padding: 10px;
    background: #fff;
    max-width: 700px;
    margin: auto;
    border-radius: 5px;
    font-size: 0.9rem;
  }

  body.jw-modal-open {
    overflow: hidden;
  }

  .modal-header {
    font-weight: bold;
    margin-bottom: 4px;
  }

  /* === CALENDAR =============================================== */

  /* shared grid template rows — 25 hour rows */
  .calendar {
    display: grid;
    grid-template-columns:
      [time] auto [sun] minmax(60px, 1fr) [mon] minmax(60px, 1fr)
      [tue] minmax(60px, 1fr) [wed] minmax(60px, 1fr) [thu] minmax(60px, 1fr)
      [fri] minmax(60px, 1fr) [sat] minmax(60px, 1fr);
    grid-template-rows: [day] auto [h00] 1fr [h01] 1fr [h02] 1fr [h03] 1fr [h04] 1fr [h05] 1fr [h06] 1fr [h07] 1fr [h08] 1fr [h09] 1fr [h10] 1fr [h11] 1fr [h12] 1fr [h13] 1fr [h14] 1fr [h15] 1fr [h16] 1fr [h17] 1fr [h18] 1fr [h19] 1fr [h20] 1fr [h21] 1fr [h22] 1fr [h23] 1fr [h24] 1fr;
    gap: 1px;
    background-color: #eee;
    width: 100%;
    height: 85%;
    overflow: auto;
    padding: 0.3em;
    box-sizing: border-box;
    margin: 0.3em;
    font-size: 0.9rem;
    border: 1px solid #999;
  }

  .calendar li {
    background-color: white;
    padding: 0.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #f1f0f0;
  }

  li.day,
  li.time,
  li.corner {
    background-color: #f5f5f5;
  }

  li.time {
    text-align: right;
    padding-right: 10px;
  }

  li.event {
    background-color: #82caaf;
    z-index: 1;
  }

  li.event.kayak {
    background-color: #fecf6a;
    border-radius: 5px;
  }

  li.event.surf {
    background-color: #82caaf;
  }

  li.event.scheduled {
    background-color: #71b15f;
    border-radius: 5px;
  }

  li.event.active {
    background-color: #3cb371 !important;
    border: red solid 1px;
    border-radius: 5px;
    font-size: larger;
  }

  /* SVG icon color shift for active state */
  .filter-green {
    filter: invert(22%) sepia(100%) saturate(1936%) hue-rotate(98deg)
      brightness(100%) contrast(106%);
  }

  /* Corner */
  .corner {
    grid-area: day / time;
  }

  /* Day headings */
  .sun {
    grid-column: sun;
    grid-row: day;
  }
  .mon {
    grid-column: mon;
    grid-row: day;
  }
  .tue {
    grid-column: tue;
    grid-row: day;
  }
  .wed {
    grid-column: wed;
    grid-row: day;
  }
  .thu {
    grid-column: thu;
    grid-row: day;
  }
  .fri {
    grid-column: fri;
    grid-row: day;
  }
  .sat {
    grid-column: sat;
    grid-row: day;
  }

  /* Time headings — all share grid-column: time */
  .h00,
  .h01,
  .h02,
  .h03,
  .h04,
  .h05,
  .h06,
  .h07,
  .h08,
  .h09,
  .h10,
  .h11,
  .h12,
  .h13,
  .h14,
  .h15,
  .h16,
  .h17,
  .h18,
  .h19,
  .h20,
  .h21,
  .h22,
  .h23,
  .h24 {
    grid-column: time;
  }

  .h00 {
    grid-row: h00;
  }
  .h01 {
    grid-row: h01;
  }
  .h02 {
    grid-row: h02;
  }
  .h03 {
    grid-row: h03;
  }
  .h04 {
    grid-row: h04;
  }
  .h05 {
    grid-row: h05;
  }
  .h06 {
    grid-row: h06;
  }
  .h07 {
    grid-row: h07;
  }
  .h08 {
    grid-row: h08;
  }
  .h09 {
    grid-row: h09;
  }
  .h10 {
    grid-row: h10;
  }
  .h11 {
    grid-row: h11;
  }
  .h12 {
    grid-row: h12;
  }
  .h13 {
    grid-row: h13;
  }
  .h14 {
    grid-row: h14;
  }
  .h15 {
    grid-row: h15;
  }
  .h16 {
    grid-row: h16;
  }
  .h17 {
    grid-row: h17;
  }
  .h18 {
    grid-row: h18;
  }
  .h19 {
    grid-row: h19;
  }
  .h20 {
    grid-row: h20;
  }
  .h21 {
    grid-row: h21;
  }
  .h22 {
    grid-row: h22;
  }
  .h23 {
    grid-row: h23;
  }
  .h24 {
    grid-row: h24;
  }

  /* === RESPONSIVE ============================================= */

  @media (max-width: 920px) {
    .my-container {
      margin: 10px auto;
      font-size: 1em;
    }

    .calendar {
      grid-template-columns:
        [time] auto [sun] minmax(65px, 1fr) [mon] minmax(65px, 1fr)
        [tue] minmax(65px, 1fr) [wed] minmax(65px, 1fr) [thu] minmax(65px, 1fr)
        [fri] minmax(65px, 1fr) [sat] minmax(65px, 1fr);
    }

    .calendar li {
      padding: 0.2em;
    }
    .day,
    .surf,
    .time {
      font-size: 0.8em;
    }
  }

  @media (max-width: 768px) {
    .my-container {
      font-size: 0.8em;
    }

    .calendar {
      grid-template-columns:
        [time] auto [sun] minmax(40px, 1fr) [mon] minmax(40px, 1fr)
        [tue] minmax(40px, 1fr) [wed] minmax(40px, 1fr) [thu] minmax(40px, 1fr)
        [fri] minmax(40px, 1fr) [sat] minmax(40px, 1fr);
    }

    .calendar li {
      padding: 0.2em;
    }
    .day,
    .surf,
    .time {
      font-size: 0.8em;
    }

    #float-container {
      top: 46vh;
      right: 19vw;
    }
  }

  @media (max-width: 480px) {
    .my-container {
      font-size: 0.8em;
    }

    .calendar {
      grid-template-columns:
        [time] auto [sun] minmax(30px, 1fr) [mon] minmax(30px, 1fr)
        [tue] minmax(30px, 1fr) [wed] minmax(30px, 1fr) [thu] minmax(30px, 1fr)
        [fri] minmax(30px, 1fr) [sat] minmax(30px, 1fr);
    }

    .calendar li {
      padding: 0.1em;
    }
    .day,
    .surf,
    .time {
      font-size: 0.9em;
    }
    .jw-modal-body {
      font-size: 0.7rem;
    }

    #float-container {
      top: 53vh;
      right: 19vw;
    }
  }

  /* Legend positioning — device breakpoints */
  @media (min-width: 10em) {
    #legend {
      top: 12vh;
    }
  }
  @media (min-width: 20em) {
    .ui-accordion .ui-accordion-header {
      font-size: 90% !important;
      font-weight: 600 !important;
    }
    #legend {
      top: 9vh;
    }
  }
  @media (min-width: 25em) {
    #legend {
      top: 8vh;
    }
  }
  @media (min-width: 30em) {
    #legend {
      top: 18vh;
    }
  }
  @media (min-width: 35em) {
    #legend {
      top: 8vh;
    }
  }
  @media (min-width: 40em) {
    #legend {
      top: 18vh;
    }
  }
  @media (min-width: 45em) and (orientation: portrait) {
    #legend {
      top: 8vh;
    }
  }
  @media (min-width: 45em) and (orientation: landscape) {
    #legend {
      top: 18vh;
    }
  }
  @media (min-width: 50em) {
    #legend {
      top: 16vh;
    }
  }
  @media (min-width: 51em) {
    #legend {
      top: 16vh;
    }
  }
  @media (min-width: 51em) and (orientation: portrait) {
    #legend {
      top: 6vh;
    }
  }
  @media (min-width: 54em) {
    #legend {
      top: 6vh;
    }
  }
  @media (min-width: 55em) {
    #legend {
      top: 16vh;
    }
  }
  @media (min-width: 56em) {
    #legend {
      top: 6vh;
    }
  }
  @media (min-width: 56em) and (orientation: landscape) {
    #legend {
      top: 16vh;
    }
  }
  @media (min-width: 60em) {
    #legend {
      top: 10vh;
    }
  }
  @media (min-width: 65em) {
    #legend {
      top: 9vh;
    }
  }
}