/* ============================================================
   MSRNA — Hydrogen Calendar Embeds Custom Styles
   Paste into: WordPress Admin → Appearance → Additional CSS
   Plugin: Hydrogen Calendar Embeds (list view)
   Shortcode to use on your Events page:
   [hydrogen_calendar_embeds
     ics="https://calendar.google.com/calendar/ical/a46c8bf522e919745e1bf6e913a0c9df265ab122347caa763f41250d91a6fdbb%40group.calendar.google.com/public/basic.ics"
     views="listCustom"
     custom_days="90"
     hide_past="false"
     initial_view="listCustom"
     no_link="true"]
   ============================================================ */

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  --msrna-forest:  #1e3a2f;
  --msrna-moss:    #3a6b4e;
  --msrna-sage:    #7aaa8a;
  --msrna-cream:   #f7f3ec;
  --msrna-amber:   #c8863a;
  --msrna-text:    #1c2318;
  --msrna-muted:   #6b7b6e;
  --msrna-border:  #ddd6c8;
}

/* ── FULLCALENDAR CSS VARIABLES ───────────────────────────── */
.fc {
  --fc-border-color:          var(--msrna-border);
  --fc-button-text-color:     white;
  --fc-button-bg-color:       var(--msrna-forest);
  --fc-button-border-color:   var(--msrna-forest);
  --fc-button-hover-bg-color: #152a21;
  --fc-button-hover-border-color: #152a21;
  --fc-button-active-bg-color:    #152a21;
  --fc-button-active-border-color: #152a21;
  --fc-today-bg-color:        rgba(200, 134, 58, 0.08);
  --fc-neutral-bg-color:      var(--msrna-cream);
  --fc-list-event-hover-bg-color: #f0faf4;
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  font-size: 0.95rem;
}

/* ── TOOLBAR (prev/next/today buttons + title) ────────────── */
.fc .fc-toolbar {
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.fc .fc-toolbar-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--msrna-forest);
}

.fc .fc-button {
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Source Sans 3', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  transition: background 0.15s;
  box-shadow: none !important;
}

.fc .fc-button:focus {
  outline: 2px solid var(--msrna-sage);
  outline-offset: 2px;
}

.fc .fc-button-group {
  gap: 4px;
}

/* ── LIST VIEW: DAY HEADING ROWS ──────────────────────────── */
/* e.g. "Thursday, March 6, 2025" */
.fc .fc-list-day th {
  padding: 0;
  border: none;
  background: transparent;
}

.fc .fc-list-day-cushion {
  background: var(--msrna-forest) !important;
  color: white !important;
  padding: 9px 18px;
  border-radius: 10px;
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fc .fc-list-day-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  text-decoration: none;
}

.fc .fc-list-day-side-text {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--msrna-sage);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-left: auto;
  text-decoration: none;
}

/* ── LIST VIEW: EVENT ROWS ────────────────────────────────── */
.fc .fc-list-event {
  border: none !important;
  border-radius: 0;
  transition: background 0.15s;
  cursor: pointer;
}

/* The table row that wraps each event */
.fc .fc-list-event td {
  border-color: var(--msrna-border) !important;
  padding: 12px 16px;
  background: white;
  vertical-align: middle;
}

/* First and last cells get rounded corners on the row */
.fc .fc-list-event td:first-child {
  border-left: 3px solid var(--msrna-forest);
  border-radius: 0;
  padding-left: 16px;
}

/* Hover state */
.fc .fc-list-event:hover td {
  background: #f0faf4 !important;
}

/* ── EVENT DOT (color indicator) ──────────────────────────── */
.fc .fc-list-event-dot {
  border-width: 6px;
  border-color: var(--msrna-amber);
  border-radius: 50%;
  margin-right: 4px;
}

/* ── EVENT TIME ───────────────────────────────────────────── */
.fc .fc-list-event-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--msrna-muted);
  white-space: nowrap;
  padding-right: 16px;
  min-width: 100px;
}

/* ── EVENT TITLE ──────────────────────────────────────────── */
.fc .fc-list-event-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--msrna-forest);
  text-decoration: none;
}

.fc .fc-list-event-title a {
  color: var(--msrna-forest);
  text-decoration: none;
}

.fc .fc-list-event-title a:hover {
  color: var(--msrna-moss);
  text-decoration: underline;
}

/* ── CARD-STYLE WRAPPER ───────────────────────────────────── */
/* Give the whole calendar a card feel */
.fc .fc-list {
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--msrna-border) !important;
  background: white;
}

/* Remove the default table border */
.fc .fc-scrollgrid {
  border: none !important;
}

.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th {
  border-color: var(--msrna-border) !important;
}

/* ── "NO EVENTS" MESSAGE ──────────────────────────────────── */
.fc .fc-list-empty {
  background: var(--msrna-cream);
  border-radius: 14px;
  border: 1.5px solid var(--msrna-border);
}

.fc .fc-list-empty-cushion {
  font-size: 0.9rem;
  color: var(--msrna-muted);
  font-weight: 600;
  padding: 48px 20px;
}

/* ── EVENT POPUP TOOLTIP ──────────────────────────────────── */
/* Shown when use_tooltip="true" */
.tippy-box {
  background: var(--msrna-cream) !important;
  border-radius: 10px !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.84rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
  max-width: 280px !important;
}

.tippy-box .tippy-content {
  padding: 12px 16px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.9) !important;
}

.tippy-box .tippy-arrow {
  color: var(--msrna-forest) !important;
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 700px) {
  .fc .fc-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .fc .fc-toolbar-title {
    font-size: 1.1rem;
  }

  .fc .fc-list-event-time {
    display: none; /* time moves into title area on small screens */
  }

  .fc .fc-list-day-cushion {
    padding: 8px 14px;
    border-radius: 8px;
  }

  .fc .fc-list-event td {
    padding: 10px 12px;
  }
}