/* Site Locations – comprehensive styles (v1.6.2) */

/* ========== MAP ========== */
.sl-map { width: 100%; height: 600px; border: 1px solid rgba(0,0,0,.1); margin: 1rem 0; }

/* ========== TABLE (DESKTOP) ========== */
.sl-table-wrap { overflow-x: auto; transition: max-height .3s ease; }
.sl-table-wrap.is-collapsed { max-height: 0; overflow: hidden; }
.site-locations-table { width: 100%; border-collapse: collapse; }
.site-locations-table th, .site-locations-table td { padding: .5rem .6rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.site-locations-table th { text-align: left; }

/* Alternate row colors */
.site-locations-table tbody tr:nth-child(odd) { background-color: #222; }
.site-locations-table tbody tr:nth-child(even) { background-color: #000; }
/* Text color on dark stripes */
.site-locations-table tbody tr td { color: #fff; }

/* Hover highlight overrides striping */
.site-locations-table tbody tr:hover {
  background-color: rgba(60, 120, 240, 0.6) !important;
  transition: background-color .2s ease-in-out;
  cursor: pointer;
}

/* Optional: active row flash when marker opens */
.site-locations-table tbody tr.sl-row-active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }

/* Toggle button */
.sl-table-toggle { display:inline-block; margin:.5rem 0; padding:.4rem .7rem; border:1px solid rgba(0,0,0,.2); background:transparent; cursor:pointer; }

/* ========== COLLAPSIBLE TABLE (MOBILE) ========== */
@media (max-width: 768px) {
  .site-locations-table thead { display: none; }
  .site-locations-table,
  .site-locations-table tbody,
  .site-locations-table tr,
  .site-locations-table td { display: block; width: 100%; }
  .site-locations-table tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem;
    background: none;
  }
  .site-locations-table td {
    border: none;
    padding: 0.5rem 0;
    text-align: left;
    color: inherit;
  }
  .site-locations-table td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    display: inline;
    margin-right: 4px;
  }
}

/* ========== SINGLE PAGE LAYOUT ========== */
.sl-single .sl-title { margin-top: .5rem; }
.sl-list { list-style: none; padding: 0; }
.sl-list li { margin: .2rem 0; }
.sl-alert { padding: .6rem .8rem; background: #fff8e5; border: 1px solid #f7d07e; }

/* ========== TOMORROW'S WORKOUTS GRID ========== */
.sl-tomorrow .sl-heading { margin: .5rem 0 1rem; }
.sl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.sl-card { display: block; border: 1px solid rgba(0,0,0,.1); border-radius: 8px; overflow: hidden; text-decoration: none; }
.sl-card-media { position: relative; }
.sl-card-media img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.sl-card-fallback { width:100%; height:180px; background: rgba(0,0,0,.06); }
/* Time badge */
.sl-badge { position: absolute; left: 10px; bottom: 10px; font-size: 12px; line-height: 1; padding: 6px 8px; border-radius: 999px; background: rgba(0,0,0,.75); color: #fff; z-index: 2; }
/* Title ribbon overlay */
.sl-title-ribbon { position: absolute; left: 0; bottom: 0; background: #990000; color: #fff; padding: 0.5rem 1rem; font-weight: 700; line-height: 1.2; display: inline-block; max-width: 80%; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%); z-index: 1; }
.sl-title-text { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding-right: 10px; }

/* ========== GOOGLE MAPS INFOWINDOW STYLES ========== */
.gm-style .gm-style-iw { color: #333 !important; background-color: #fff !important; font-size: 14px; line-height: 1.4; }
.gm-style .gm-style-iw h3, .gm-style .gm-style-iw strong, .gm-style .gm-style-iw .iw-title { color: #111 !important; font-weight: bold; font-size: 16px; margin-bottom: 4px; }
.gm-style .gm-style-iw a, .gm-style .gm-style-iw h3 a, .gm-style .gm-style-iw .iw-title a, .gm-style .gm-style-iw .sl-iw-title a { color: #900 !important; text-decoration: none; }
.gm-style .gm-style-iw a:hover, .gm-style .gm-style-iw h3 a:hover, .gm-style .gm-style-iw .iw-title a:hover, .gm-style .gm-style-iw .sl-iw-title a:hover { text-decoration: underline; }
.gm-style .gm-style-iw a:focus-visible { outline: 2px solid rgba(0,0,0,.35); outline-offset: 2px; }
.mintext{font-size: small; font-weight: lighter;}

.sl-directions-ctl { 
  margin: 10px; 
}
.sl-directions-btn {
  display: inline-block;
  font: inherit;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  background: #900;
  color: #fff;
  border: 1px solid #000;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sl-directions-btn:hover,
.sl-directions-btn:focus {
  background: #222;
  outline: none;
}