/* ──────────────────────────────────────────────────────────────
   Body by Brenna — Class Schedule calendar

   Styling only. The calendar itself is built by js/calendar.js.

   The palette below is sampled directly from the October 2026
   calendar design Brenna drew up, so the website matches the
   graphics she posts. Change these variables to re-colour the whole
   calendar — nothing below hard-codes a colour.
   ────────────────────────────────────────────────────────────── */

.bbb-cal {
  --cal-plum: #8f607c;        /* weekday bar, banner, buttons */
  --cal-plum-dark: #7a5069;   /* hover state */
  --cal-ink: #382d37;         /* the big month name */
  --cal-paper: #f9f4f8;       /* the soft panel behind everything */
  --cal-line: #eadde7;        /* grid lines */
  --cal-daynum: #6b5966;      /* the date numbers */
  --cal-subtitle: #8a5f7d;    /* "2026 - live workout calendar" */
  --cal-tagline: #826177;     /* the line under the banner */
  --cal-leaf-rose: #bf7d87;   /* decorative leaves */
  --cal-leaf-ochre: #d9a173;

  position: relative;
  background: var(--cal-paper);
  padding: 38px 30px 30px;
  overflow: hidden;
}

.bbb-cal .cal-inner { position: relative; z-index: 1; }

/* ── Decoration: soft blobs and leaves, echoing Brenna's artwork ──
   Purely ornamental, so it steps aside on small screens. */
.bbb-cal .cal-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bbb-cal .cal-blob {
  position: absolute;
  border-radius: 50%;
  background: #f1e6ef;
  opacity: 0.75;
}

.bbb-cal .cal-blob-1 { width: 300px; height: 300px; top: -130px; right: -90px; }
.bbb-cal .cal-blob-2 { width: 240px; height: 240px; bottom: -110px; left: -80px; }

.bbb-cal .cal-leaves { position: absolute; }
.bbb-cal .cal-leaves-tl { top: 18px; left: 10px; }
.bbb-cal .cal-leaves-br { bottom: 14px; right: 12px; }

/* ── Month header: ‹  OCTOBER  › ── */
.bbb-cal .cal-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 6px;
}

.bbb-cal .cal-headings { text-align: center; min-width: 240px; }

.bbb-cal .cal-title {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--cal-ink);
}

.bbb-cal .cal-subtitle {
  margin-top: 9px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cal-subtitle);
}

.bbb-cal .cal-nav {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #ddc9d8;
  background: transparent;
  color: var(--cal-plum);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bbb-cal .cal-nav:hover {
  background: var(--cal-plum);
  border-color: var(--cal-plum);
  color: #fff;
}

/* Row holding "Back to this month" and the loading note */
.bbb-cal .cal-utility {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 22px;
  margin-bottom: 14px;
}

.bbb-cal .cal-today-btn {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cal-plum);
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
}

.bbb-cal .cal-today-btn:hover { text-decoration: underline; }
.bbb-cal .cal-today-btn[hidden], .bbb-cal .cal-loading[hidden] { display: none; }

.bbb-cal .cal-loading {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-subtitle);
}

/* ── Weekday bar ── */
.bbb-cal .cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--cal-plum);
  border-radius: 10px;
  padding: 15px 0;
  margin-bottom: 2px;
}

.bbb-cal .cal-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

/* ── The month grid ──
   Cells sit directly on the panel; hairlines separate them, and the
   outermost edges stay open the way Brenna's design has it. */
.bbb-cal .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.bbb-cal .cal-day {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--cal-line);
  border-bottom: 1px solid var(--cal-line);
  min-height: 108px;
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bbb-cal .cal-day:nth-child(7n) { border-right: 0; }
.bbb-cal .cal-day:nth-last-child(-n+7) { border-bottom: 0; }

.bbb-cal .cal-day:hover { background: rgba(255, 255, 255, 0.6); }

/* Days from the neighbouring months are left blank, as in the design */
.bbb-cal .cal-day.is-outside { cursor: default; }
.bbb-cal .cal-day.is-outside:hover { background: transparent; }

.bbb-cal .cal-day.is-selected {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--cal-plum);
}

.bbb-cal .cal-daynum {
  font-size: 15px;
  font-weight: 600;
  color: var(--cal-daynum);
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.bbb-cal .cal-day.is-today .cal-daynum {
  border: 1.5px solid var(--cal-plum);
  border-radius: 50%;
  color: var(--cal-plum);
}

/* ── Class pills ── */
.bbb-cal .cal-chips { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.bbb-cal .cal-chip {
  display: block;
  border-radius: 8px;
  padding: 7px 5px;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

/* Which pill colour a class gets is decided by the keyword rules in
   js/calendar-config.js, so "lower body" classes are always pink, and
   so on. */
.bbb-cal .cal-chip.tone-pink     { background: #f6dfe8; color: #744d65; }
.bbb-cal .cal-chip.tone-lavender { background: #e8e0f1; color: #5b4f72; }
.bbb-cal .cal-chip.tone-purple   { background: #efe4f2; color: #624763; }
.bbb-cal .cal-chip.tone-rose     { background: #ead8df; color: #724c5b; }
.bbb-cal .cal-chip.tone-default  { background: #f1e6ef; color: #6b4f66; }

.bbb-cal .cal-chip-more {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cal-subtitle);
  text-align: center;
}

/* Dots stand in for the pills on narrow screens */
.bbb-cal .cal-dots { display: none; gap: 3px; justify-content: center; }
.bbb-cal .cal-dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.bbb-cal .cal-dots i.tone-pink     { background: #d49bb4; }
.bbb-cal .cal-dots i.tone-lavender { background: #a99ccb; }
.bbb-cal .cal-dots i.tone-purple   { background: #b795bd; }
.bbb-cal .cal-dots i.tone-rose     { background: #c9a0ac; }
.bbb-cal .cal-dots i.tone-default  { background: #b892ab; }

/* ── Selected-day detail panel ── */
.bbb-cal .cal-detail {
  margin-top: 20px;
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
}

.bbb-cal .cal-detail-date {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cal-plum);
  margin-bottom: 14px;
}

.bbb-cal .cal-event {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid #f2e9ef;
}

.bbb-cal .cal-event:first-of-type { border-top: 0; padding-top: 0; }

.bbb-cal .cal-event-time {
  flex: none;
  width: 96px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cal-plum);
  padding-top: 1px;
}

.bbb-cal .cal-event-title { font-size: 15px; color: #33272f; margin-bottom: 3px; }
.bbb-cal .cal-event-meta { font-size: 12px; color: #7d6c78; margin-bottom: 4px; }
.bbb-cal .cal-event-notes { font-size: 13px; color: #6b5d67; line-height: 1.55; }
.bbb-cal .cal-empty { font-size: 13px; color: #7d6c78; }

/* "Reserve your spot" button.
   Written as plain CSS rather than Tailwind classes because this button is
   created by JavaScript after the page loads, and we don't want it to depend
   on Tailwind generating classes at runtime.
   Ink with a plum hover, so it behaves like every other primary button
   on the site rather than inventing a second button colour. */
.bbb-cal .cal-book-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 22px;
  border-radius: 8px;
  background: var(--cal-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease;
}

.bbb-cal .cal-book-btn:hover { background: var(--cal-plum); }

/* ── Class-times banner across the bottom ── */
.bbb-cal .cal-banner {
  margin-top: 20px;
  background: var(--cal-plum);
  border-radius: 14px;
  padding: 22px 24px;
  text-align: center;
}

.bbb-cal .cal-banner-line {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.5;
}

.bbb-cal .cal-banner-note {
  margin-top: 8px;
  color: #fbf2f7;
  font-size: 13px;
}

.bbb-cal .cal-tagline {
  margin-top: 20px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cal-tagline);
}

/* ── Footer row: time zone note and subscribe link ── */
.bbb-cal .cal-foot {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--cal-subtitle);
}

.bbb-cal .cal-foot a { color: var(--cal-plum); }
.bbb-cal .cal-foot a:hover { text-decoration: underline; }

/* ── Mobile: cells shrink, pills become dots, details sit below ── */
@media (max-width: 760px) {
  .bbb-cal { padding: 28px 14px 22px; }
  .bbb-cal .cal-decor { display: none; }
  .bbb-cal .cal-head { gap: 10px; }
  .bbb-cal .cal-headings { min-width: 0; }
  .bbb-cal .cal-title { font-size: 32px; }
  .bbb-cal .cal-nav { width: 34px; height: 34px; }
  .bbb-cal .cal-weekdays { padding: 11px 0; }
  .bbb-cal .cal-weekdays span { font-size: 9px; letter-spacing: 0.08em; }
  .bbb-cal .cal-day { min-height: 54px; padding: 6px 2px; align-items: center; gap: 4px; }
  .bbb-cal .cal-daynum { width: 21px; height: 21px; font-size: 13px; }
  .bbb-cal .cal-chips { display: none; }
  .bbb-cal .cal-dots { display: flex; }
  .bbb-cal .cal-detail { padding: 18px 16px; }
  .bbb-cal .cal-event { flex-direction: column; gap: 2px; }
  .bbb-cal .cal-event-time { width: auto; }
  .bbb-cal .cal-banner { padding: 18px 16px; }
  .bbb-cal .cal-banner-line { font-size: 14px; }
  .bbb-cal .cal-banner-note { font-size: 12px; }
}