/* ============================================================
   calendar.css
   Styles specific to calendar.html — replaces all inline styles.
   ============================================================ */

/* Page layout: sidebar + embed side by side on wide screens */
.cal-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 1.25rem;
}

/* Sidebar */
.cal-sidebar {
  flex: 1 1 260px;
  min-width: 240px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cal-legend-card { margin-bottom: 0; }

/* Legend colour dots */
.cal-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.cal-legend li {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
  font-size: .9rem;
}
.cal-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cal-dot-pack   { background: #009688; }
.cal-dot-school { background: #d81b60; }

/* Subscribe buttons */
.cal-add-links {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .75rem;
}

.cal-note {
  margin: 0;
  font-size: .85rem;
  line-height: 1.55;
}

/* Calendar embed */
.cal-embed-wrap {
  flex: 1 1 auto;
  min-width: 280px;
}

.cal-embed-frame {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
}

.cal-iframe {
  border: 0;
  width: 100%;
  height: 700px;
  display: block;
}

/* Stack sidebar below embed on small screens */
@media (max-width: 640px) {
  .cal-sidebar {
    max-width: 100%;
    order: 2;
  }
  .cal-embed-wrap { order: 1; }
  .cal-iframe { height: 500px; }
}