/* =========================================================
   Kingdom Connections — Calendar CSS (Month/Week/List)
   - Mobile-friendly chips with reliable ellipsis
   - Color-coded week/day events via etype-* classes
   - Clean list rows
   ========================================================= */

/* ── Toolbar ───────────────────────────────────────────── */
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: .5rem; }
.fc .fc-toolbar-title{
  font-weight:700; color:#1e293b;
  font-size:clamp(1.125rem,1.2vw + 1rem,1.5rem);
}
.fc .fc-button{
  border-radius:.5rem; border:1px solid #cbd5e1;
  background:#fff; color:#1e293b;
  box-shadow:0 1px 1px rgba(15,23,42,.04);
  padding:.35rem .6rem;
}
.fc .fc-button.fc-button-active,
.fc .fc-button:focus,
.fc .fc-button:hover{
  background:#0d9488; border-color:#0d9488; color:#fff;
}
.fc .fc-button-primary:disabled{ opacity:.6; }
.fc .fc-col-header-cell{ background:#f8fafc; }

/* ── Grid + Today ──────────────────────────────────────── */
.fc .fc-daygrid-day,
.fc .fc-timegrid-slot{ border-color:#e2e8f0; }
.fc .fc-daygrid-day-number{ font-weight:600; color:#334155; }
.fc .fc-day-today{ background:rgba(13,148,136,.08); }

/* ── Make FC event main area flex/min-width:0 so ellipsis can work */
.fc .fc-event-main{
  display:flex; align-items:center; gap:0;
  min-width:0; /* critical for ellipsis */
}

/* ── Month view: pill-style chips ─────────────────────── */
.fc .fc-daygrid-event{ padding:0!important; border:0; background:transparent; }

/* Neutral chip (tinted by --typecolor or etype-* rules) */
.kc-gchip{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700;
  border:1px solid #e2e8f0; border-radius:.5rem;
  padding:.14rem .44rem; background:#fff;
  line-height:1.1; color:#0f172a;
  max-width:100%;
}
.kc-gchip .dot{
  width:.5rem; height:.5rem; border-radius:9999px; display:inline-block;
  background:var(--typecolor,#6366F1);
}
.kc-gchip .label{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Category tints (also used by week/day below via CSS vars) */
.etype-worship    { --typecolor:#6366F1; --tg-bg:rgba(99,102,241,.12); --tg-border:#c7c8fb; --tg-text:#312e81; }
.etype-prayer     { --typecolor:#14B8A6; --tg-bg:rgba(20,184,166,.12); --tg-border:#8de3d9; --tg-text:#065f46; }
.etype-conference { --typecolor:#F59E0B; --tg-bg:rgba(245,158,11,.14); --tg-border:#f7d9a6; --tg-text:#92400e; }
.etype-outreach   { --typecolor:#10B981; --tg-bg:rgba(16,185,129,.14); --tg-border:#9ae6c0; --tg-text:#065f46; }
.etype-training   { --typecolor:#8B5CF6; --tg-bg:rgba(139,92,246,.14); --tg-border:#d7c6fb; --tg-text:#5b21b6; }
.etype-business   { --typecolor:#0EA5E9; --tg-bg:rgba(14,165,233,.14); --tg-border:#a6dbf7; --tg-text:#075985; }

/* “More” link chip */
.fc .fc-daygrid-more-link{
  display:inline-block; padding:0 .375rem; height:1.25rem; line-height:1.25rem;
  border-radius:.375rem; border:1px solid #cbd5e1; background:#fff;
  font-size:.7rem; color:#334155;
}

/* ── Week/Day (timeGrid) event styling & color coding ─── */
.fc .fc-timegrid-event{
  border-radius:.5rem; border:1px solid var(--tg-border,#e2e8f0);
  background:var(--tg-bg,rgba(2,6,23,.03)) !important;
  color:var(--tg-text,#0f172a) !important;
  overflow:hidden; position:relative;
}

/* left color bar using --typecolor */
.fc .fc-timegrid-event::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:var(--typecolor,#64748B);
}

/* timeGrid content body (matches custom HTML from JS) */
.kc-tg{ display:flex; align-items:center; gap:.45rem; font-weight:700; min-width:0; }
.kc-tg .dot{ width:.5rem; height:.5rem; border-radius:9999px; display:inline-block; background:var(--typecolor,#64748B); }
.kc-tg .title{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Tighten slot/axis on mobile */
@media (max-width:820px){
  .fc .fc-timegrid-axis { width:38px; }
  .fc .fc-timegrid-slot-label-cushion{ font-size:.7rem; padding:0 .25rem; }
}

/* ── LIST VIEW: full-width card row ───────────────────── */
.fc .fc-list{ border-radius:.75rem; overflow:hidden; border:1px solid #e2e8f0; }
.fc .fc-list-day-cushion{ background:#f8fafc; color:#1e293b; font-weight:700; }
.fc .fc-list-event:hover td{ filter:brightness(.98); }

.fc .fc-list-table{ border-collapse:collapse; border-spacing:0; table-layout:auto; width:100%; }
.fc .fc-theme-standard td,
.fc .fc-theme-standard th{ border:0; }
.fc .fc-list-event td.fc-list-event-time,
.fc .fc-list-event td.fc-list-event-graphic{ display:none!important; }
.fc .fc-list-table colgroup col:first-child,
.fc .fc-list-table colgroup col:nth-child(2){ display:none!important; width:0!important; }
.fc .fc-list-table colgroup col:last-child{ width:100%!important; }
.fc .fc-list-event td.fc-list-event-title{ width:100%!important; padding:0!important; font-size:.8125rem!important; }
.fc .fc-list-event .fc-list-event-title>a{
  display:block; width:100%; padding:0!important; color:inherit; text-decoration:none!important; font-size:.8125rem!important;
}

.kc-card{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.55rem;
  padding:.6rem .75rem; border-radius:.75rem; border:1px solid #e2e8f0; background:#fff; width:100%;
  transition:box-shadow .2s ease;
}
.kc-card:hover{ box-shadow:0 6px 20px rgba(2,6,23,.07); }
.kc-avatar{ width:2rem; height:2rem; border-radius:9999px; display:grid; place-items:center;
  font-weight:800; font-size:.9rem; color:#fff; background:var(--typecolor,#64748B); }
.kc-meta{ min-width:0; }
.kc-title{
  margin:0; color:#0f172a; font-weight:700; font-size:.8125rem!important; line-height:1.2;
  letter-spacing:normal;
  overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
}
.fc .fc-list-event .kc-card,
.fc .fc-list-event .kc-card *{ font-size:.8125rem!important; letter-spacing:normal!important; }
.kc-time{ margin-top:.15rem; color:#475569; font-weight:600; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:640px){ .kc-meta{ display:flex; align-items:baseline; gap:.5rem } .kc-time{ margin-top:0 } }
.kc-chip{ display:inline-block; padding:.28rem .55rem; font-size:.72rem; font-weight:700; border-radius:9999px; border:1px solid currentColor; background:rgba(0,0,0,.02); text-transform:lowercase; }
.kc-inline{ overflow:hidden; max-height:0; opacity:0; transform:translateY(-4px); transition:max-height .35s ease,opacity .25s ease,transform .35s ease; }
.kc-inline.is-open{ opacity:1; transform:translateY(0); }

/* Filter pills */
.kc-pill,.kc-tag{ border:1px solid #cbd5e1; background:#fff; color:#334155; padding:.35rem .7rem; border-radius:9999px; font-size:.875rem; font-weight:600; }
.kc-pill.is-active,.kc-tag.is-active{ border-color:#000; color:#fff; background:#14B8A6; }
.kc-pill-default.is-active{ background:#0f172a; }

/* ── Mobile toolbar tidy ───────────────────────────────── */
@media (max-width:639px){
  .fc .fc-toolbar.fc-header-toolbar{ flex-wrap:wrap; row-gap:.5rem; column-gap:.5rem; margin-bottom:.5rem; }
  .fc .fc-toolbar-chunk{ flex:1 1 100%; display:flex; justify-content:center; align-items:center; gap:.375rem; }
  .fc .fc-toolbar-chunk:nth-child(1){ order:2 }
  .fc .fc-toolbar-chunk:nth-child(2){ order:1 }
  .fc .fc-toolbar-chunk:nth-child(3){ order:3 }
  .fc .fc-button-group{ display:flex; gap:.375rem; }
  .fc .fc-button{ padding:.35rem .55rem; font-size:.75rem; line-height:1; border-radius:.5rem; }
  .fc .fc-toolbar-title{ font-size:1rem; text-align:center; width:100%; }
}

/* Month chips fill width on very small phones */
@media (max-width:420px){
  .fc .fc-daygrid-day-events .kc-gchip { width:100%; justify-content:flex-start; }
}

/* ── DayGrid/TimeGrid: neutralize FC’s default color blocks ─── */
.fc .fc-daygrid-event,
.fc .fc-daygrid-event .fc-event-main,
.fc .fc-timegrid-event,
.fc .fc-timegrid-event .fc-event-main{
  background:transparent !important;
  border:0 !important;
  color:inherit !important;
  opacity:1 !important;
}
/* hide FC’s tiny time text; we render our own where needed */
.fc .fc-daygrid-event .fc-event-time,
.fc .fc-timegrid-event .fc-event-time{ display:none !important; }

/* ── Modal polish (works with your template) ──────────── */
#kc-event-modal.is-open #kc-modal-backdrop{ opacity:1 }
#kc-event-modal.is-open #kc-modal-panel{ opacity:1; transform:scale(1) }
@media (max-width:639px){ #kc-modal-panel{ max-width:none; border-radius:0 } }

#kc-event-modal{ position:fixed; inset:0; z-index:2147483647; pointer-events:auto; isolation:isolate; }
#kc-modal-backdrop{ position:absolute; inset:0; z-index:1; }
#kc-modal-panel{ position:relative; z-index:2; }
html.kc-lock, body.kc-lock{ overflow:hidden!important; overscroll-behavior:contain; }
#kc-modal-backdrop{
  -webkit-backdrop-filter: blur(6px) saturate(80%); backdrop-filter: blur(6px) saturate(80%);
  background-color: rgba(2,6,23,.55); transition: opacity .18s ease;
}
#kc-event-modal.is-open #kc-modal-backdrop{ background-color: rgba(2,6,23,.62); }
@supports not (backdrop-filter: blur(1px)){
  body.kc-lock > *:not(#kc-event-modal){ filter: blur(6px) brightness(.7); transition: filter .18s ease; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){
  #kc-modal-backdrop, body.kc-lock > *:not(#kc-event-modal){ transition:none !important; }
}

/* ── Hero slider (unchanged) ──────────────────────────── */
.kc-hero{ position:relative; }
.kc-hero-h{ height:320px; } @media (min-width:640px){ .kc-hero-h{ height:420px; } } @media (min-width:768px){ .kc-hero-h{ height:520px; } }
.kc-hero-slide{ position:absolute; inset:0; transition:opacity .5s ease; }
.kc-hero-veil{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1; }
.kc-hero-inner{ position:absolute; inset:0; display:flex; align-items:center; z-index:2; }