/*
 * Quiltt Calendar Styles — v2
 * Senior-friendly sizing, multi-calendar legend, no bold in list view.
 */

:root {
  --quiltt-accent:       #7C3AED;
  --quiltt-accent-light: #EDE9FE;
  --quiltt-accent-dark:  #5B21B6;
  --quiltt-radius:       12px;
  --quiltt-base-size:    17px;

  /* Default calendar palette */
  --quiltt-cal-1: #FBF6EE;
  --quiltt-cal-2: #F0F1FA;
  --quiltt-cal-3: #E8F4F8;
  --quiltt-cal-4: #F9F3FB;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.quiltt-cal-wrapper {
  font-family: inherit;   /* use the site's own font */
  font-size:   var(--quiltt-base-size);
  width:       100%;
  max-width:   100%;
  background:  #fff;
  border-radius: var(--quiltt-radius);
  box-shadow:  0 2px 20px rgba(0,0,0,0.10);
  overflow:    hidden;
  padding:     0 0 16px;
  box-sizing:  border-box;
}

/* ── Legend ───────────────────────────────────────────────────────────────── */

.quiltt-cal-legend {
  display:     flex;
  flex-wrap:   wrap;
  gap:         12px 24px;
  padding:     14px 20px 0;
  font-size:   0.9rem;
  font-weight: 500;
}

.quiltt-legend-item {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  color:       #333;
}

.quiltt-legend-dot {
  display:       inline-block;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  flex-shrink:   0;
}

/* ── FullCalendar base ────────────────────────────────────────────────────── */

.quiltt-cal-wrapper .fc {
  font-family: inherit;
  font-size:   var(--quiltt-base-size);
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.quiltt-cal-wrapper .fc .fc-toolbar {
  background:    var(--quiltt-accent);
  color:         #fff;
  padding:       18px 24px;
  border-radius: 0;
  margin-bottom: 0;
  flex-wrap:     wrap;
  gap:           10px;
  align-items:   center;
}

.quiltt-cal-wrapper .fc .fc-toolbar-title {
  color:       #fff;
  font-size:   1.5rem;
  font-weight: 700;
}

.quiltt-cal-wrapper .fc .fc-button {
  background:  rgba(255,255,255,0.22);
  border:      2px solid rgba(255,255,255,0.5);
  color:       #fff;
  border-radius: 8px;
  font-size:   1rem;
  font-weight: 600;
  padding:     8px 18px;
  min-height:  44px;
  cursor:      pointer;
  transition:  background 0.15s;
}

.quiltt-cal-wrapper .fc .fc-button:hover,
.quiltt-cal-wrapper .fc .fc-button:focus {
  background: rgba(255,255,255,0.38);
  outline: 3px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}

.quiltt-cal-wrapper .fc .fc-button-active,
.quiltt-cal-wrapper .fc .fc-button-primary:not(:disabled).fc-button-active {
  background:   rgba(255,255,255,0.50);
  border-color: #fff;
}

.quiltt-cal-wrapper .fc .fc-prev-button,
.quiltt-cal-wrapper .fc .fc-next-button {
  padding:   8px 14px;
  font-size: 1.2rem;
}

/* ── LIST VIEW ────────────────────────────────────────────────────────────── */

.quiltt-cal-wrapper .fc .fc-list-day-cushion,
.quiltt-cal-wrapper .fc .fc-list-day th {
  background: var(--quiltt-accent-light);
  padding:    12px 20px;
}

.quiltt-cal-wrapper .fc .fc-list-day-text,
.quiltt-cal-wrapper .fc .fc-list-day-side-text {
  font-size:       1.1rem;
  font-weight:     700;
  color:           var(--quiltt-accent-dark);
  text-decoration: none !important;
}

/* Individual event rows — NOT bold, always dark text (list has white bg) */
.quiltt-cal-wrapper .fc .fc-list-event td {
  padding:       12px 20px;
  font-size:     1.05rem;
  font-weight:   400;
  border-bottom: 1px solid #f0eeff;
  vertical-align: middle;
  line-height:   1.4;
  color:         #1a1a1a !important;
}

.quiltt-cal-wrapper .fc .fc-list-event:hover td {
  background: #faf8ff;
  cursor:     pointer;
}

/* Time column */
.quiltt-cal-wrapper .fc .fc-list-event-time {
  white-space: nowrap;
  color:       #555 !important;
  font-size:   1rem;
  font-weight: 500;
  min-width:   110px;
}

/* Event title in list */
.quiltt-cal-wrapper .fc .fc-list-event-title a {
  font-size:       1.05rem;
  font-weight:     400;
  color:           #1a1a1a !important;
  text-decoration: none;
}

.quiltt-cal-wrapper .fc .fc-list-event-title a:hover {
  color: var(--quiltt-accent) !important;
}

/* Coloured dot */
.quiltt-cal-wrapper .fc .fc-list-event-dot {
  border-width: 6px;
  margin-right: 8px;
}

.quiltt-cal-wrapper .fc .fc-list-empty-cushion {
  font-size: 1.1rem;
  color:     #666;
  padding:   40px 20px;
}

/* ── MONTH VIEW ───────────────────────────────────────────────────────────── */

.quiltt-cal-wrapper .fc .fc-col-header-cell {
  background: #f5f3ff;
  padding:    10px 0;
}

.quiltt-cal-wrapper .fc .fc-col-header-cell-cushion {
  font-weight:     700;
  font-size:       0.95rem;
  text-transform:  uppercase;
  letter-spacing:  0.05em;
  color:           var(--quiltt-accent);
  text-decoration: none;
}

.quiltt-cal-wrapper .fc .fc-daygrid-day-number {
  font-size:       1rem;
  font-weight:     600;
  color:           #333;
  padding:         6px 8px;
  text-decoration: none;
}

.quiltt-cal-wrapper .fc .fc-day-today {
  background: var(--quiltt-accent-light) !important;
}

.quiltt-cal-wrapper .fc .fc-day-today .fc-daygrid-day-number {
  background:    var(--quiltt-accent);
  color:         #fff;
  border-radius: 50%;
  width:         32px;
  height:        32px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
}

/* Month view event bubbles — background/text set per-event by FullCalendar + JS */
.quiltt-cal-wrapper .fc .fc-daygrid-event {
  border-radius: 5px;
  font-size:     0.82rem;
  font-weight:   400;   /* not bold */
  padding:       3px 7px;
  cursor:        pointer;
  white-space:   nowrap;
  overflow:      hidden;
  margin-bottom: 2px;
  border:        none !important;
  box-shadow:    inset 0 0 0 1px rgba(0,0,0,0.10);
}

.quiltt-cal-wrapper .fc .fc-daygrid-more-link {
  font-size:   0.82rem;
  font-weight: 600;
  color:       var(--quiltt-accent);
}

/* ── WEEK VIEW ────────────────────────────────────────────────────────────── */

.quiltt-cal-wrapper .fc .fc-timegrid-slot {
  height: 40px;
}

.quiltt-cal-wrapper .fc .fc-timegrid-slot-label-cushion {
  font-size: 0.85rem;
  color:     #555;
}

.quiltt-cal-wrapper .fc .fc-timegrid-event {
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10);
}

.quiltt-cal-wrapper .fc .fc-timegrid-event .fc-event-title {
  font-size:   0.9rem;
  font-weight: 600;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.quiltt-cal-footer {
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  padding:         12px 20px 0;
}

.quiltt-powered-by {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  font-size:   0.78rem;
  color:       #999;
  text-decoration: none;
  transition:  opacity 0.15s;
}

.quiltt-powered-by:hover { opacity: 0.7; text-decoration: none; }

.quiltt-powered-by span {
  color:      #aaa;
  font-size:  0.78rem;
  white-space: nowrap;
}

.quiltt-logo-img {
  height:  22px;
  width:   auto;
  display: block;
  filter:  brightness(0) saturate(100%) invert(13%) sepia(29%) saturate(1200%) hue-rotate(202deg) brightness(90%) contrast(95%);
  opacity: 0.7;
  transition: opacity 0.15s;
}

.quiltt-powered-by:hover .quiltt-logo-img { opacity: 1; }

/* ── Event detail modal ───────────────────────────────────────────────────── */

#quiltt-cal-modal {
  display:         none;
  position:        fixed;
  inset:           0;
  z-index:         99999;
  align-items:     center;
  justify-content: center;
}

#quiltt-cal-modal.is-open { display: flex; }

.qcm-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
}

.qcm-box {
  position:      relative;
  background:    #fff;
  border-radius: 18px;
  padding:       32px 36px;
  max-width:     500px;
  width:         calc(100% - 40px);
  box-shadow:    0 24px 70px rgba(0,0,0,0.22);
  max-height:    85vh;
  overflow-y:    auto;
}

.qcm-close {
  position:      absolute;
  top:           16px;
  right:         18px;
  background:    #f3f0ff;
  border:        none;
  border-radius: 50%;
  font-size:     1.2rem;
  color:         #555;
  cursor:        pointer;
  width:         44px;
  height:        44px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background 0.15s;
}

.qcm-close:hover { background: var(--quiltt-accent-light); color: var(--quiltt-accent); }

/* Calendar badge (shown in multi-calendar mode) — text color set by JS */
.qcm-cal-badge {
  display:       inline-block;
  padding:       3px 12px;
  border-radius: 20px;
  font-size:     0.72rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}

.qcm-time {
  font-size:      0.9rem;
  color:          var(--quiltt-accent);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom:  8px;
}

.qcm-title {
  font-size:   1.5rem;
  font-weight: 800;
  color:       #111;
  margin:      0 0 12px;
  line-height: 1.25;
  padding-right: 36px;
}

.qcm-location {
  font-size:     1rem;
  color:         #555;
  margin-bottom: 12px;
  display:       flex;
  align-items:   flex-start;
  gap:           6px;
}

.qcm-location::before { content: '📍'; flex-shrink: 0; }

.qcm-desc {
  font-size:    0.95rem;
  color:        #444;
  line-height:  1.65;
  border-top:   2px solid #f0eeff;
  padding-top:  12px;
  margin-top:   4px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  :root { --quiltt-base-size: 15px; }

  .quiltt-cal-wrapper .fc .fc-toolbar { padding: 14px 14px; }
  .quiltt-cal-wrapper .fc .fc-toolbar-title { font-size: 1.15rem; }
  .quiltt-cal-wrapper .fc .fc-button { font-size: 0.88rem; padding: 7px 10px; min-height: 40px; }
  .quiltt-cal-wrapper .fc .fc-list-event td { padding: 10px 14px; }
  .qcm-box { padding: 22px 18px; }
  .qcm-title { font-size: 1.25rem; }
}