/* ==========================================================================
   Custom Events Calendar — Frontend Styles
   - Grid and List views
   - Month toolbar + view toggle
   - Category chips
   - Date badges (grid: top-left; list: leading square)
   ========================================================================== */

/* Wrapper */
.cec-calendar {
  --cec-gap: 14px;
  --cec-card-bg: #f6f7f9;
  --cec-card-fg: #111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Narrow calendar content */
.cec-calendar{
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
}

/* LIST view: different width than Grid */
.cec-calendar .cec-list{
  max-width: 60% !important;      /* tweak as needed */
  margin-left: auto;
  margin-right: auto;
}

/* Month label (DECEMBER 2025) bigger */
.cec-calendar .cec-cal-current{
  font-size: 22px;       /* tweak */
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase; /* safe; you already output uppercase */
}

/* Toolbar (centered) */
.cec-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 14px;
}
.cec-calendar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.cec-calendar-nav a {
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.1);
  background: #fff;
  color: #111;
}
.cec-calendar-nav .cec-cal-current {
  font-weight: 700;
  letter-spacing: .02em;
}
.cec-calendar-nav .cec-cal-sep {
  opacity: .4;
}

.cec-view-toggle {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.cec-view-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}
.cec-view-toggle input[type="radio"] {
  transform: translateY(1px);
}

/* Reset lists */
.cec-grid,
.cec-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* LIST view: center the list under the month title */
.cec-list{
  max-width: 900px;   /* tweak: 850–1000px */
  margin-left: auto;
  margin-right: auto;
}


/* =========================
   GRID VIEW
   ========================= */
.cec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--cec-gap);
}

.cec-grid .cec-card {
  position: relative;
  background: var(--cec-card-bg);
  color: var(--cec-card-fg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 12px;
  min-height: 120px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cec-grid .cec-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
}

/* Date badge — GRID (top-left) */
.cec-grid .cec-card .cec-badge-day {
  position: absolute;
  top: 8px;
  left: 8px;                 /* top-left */
  width: 36px;
  height: 36px;
  background: #000;
  color: #fff;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  pointer-events: none;      /* decorative */
  margin-bottom: 24px;
}

/* Push date text away from badge */
.cec-grid .cec-card .cec-date {
  margin: 0 0 6px 0;
  padding-left: 40px;        /* keep clear of badge */
  font-size: 18px; /* bigger date font */
  opacity: .85;
  font-weight: 500;
}

/* Title + time */
.cec-grid .cec-card .cec-title {
  display: inline-block;
  margin: 10px 0 4px 0;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}
.cec-grid .cec-card .cec-time {
  font-size: 16px;
  opacity: .9;
  margin-bottom: 2px;
}
.cec-grid .cec-card .cec-meta {
  font-size: 16px;
  opacity: .8;
}

/* Right square thumb pulled from first image in content */
.cec-thumb-right {
  float: right;
  width: 84px;
  height: 84px;
  margin: 0 0 6px 10px;
  border-radius: 8px;
  overflow: hidden;
  display: block;
  outline: none;
}
.cec-thumb-right-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .18s ease;
}
.cec-card:hover .cec-thumb-right-img {
  transform: scale(1.04);
}
.cec-thumb-right:hover { cursor: pointer; }

/* Grid cards: kill link hover color changes (keep text black/inherit) */
.cec-calendar .cec-card-link,
.cec-calendar .cec-card-link:visited,
.cec-calendar .cec-card-link:hover,
.cec-calendar .cec-card-link:focus {
  color: inherit !important;
  text-decoration: none !important;
}

/* Extra safety if theme targets inner elements on hover */
.cec-calendar .cec-card-link:hover .cec-title,
.cec-calendar .cec-card-link:hover .cec-date,
.cec-calendar .cec-card-link:hover .cec-time,
.cec-calendar .cec-card-link:hover .cec-meta,
.cec-calendar .cec-card-link:hover small {
  color: inherit !important;
}

/* GRID view: card lift on hover */
.cec-grid .cec-card{
  transition: transform .2s ease, box-shadow .2s ease;
}

.cec-grid .cec-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 10px rgba(0,0,0,.35);
}

/* Recurrence line */
.cec-grid .cec-card .cec-meta {
  font-size: 18px !important;
  opacity: .8;
  margin-top: 2px;
}

/* =========================
   LIST VIEW
   ========================= */
.cec-list .cec-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}

/* Leading date badge — LIST (black square, sans-serif) */
.cec-list .cec-badge-day--list {
  position: static;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #000;
  color: #fff;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.cec-list .cec-list-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cec-list .cec-title {
  margin: 0 0 2px 0;
  font-size: 22px;
  font-weight: 600;
  text-decoration: none;
  color: #111;
}
.cec-list .cec-meta {
font-size: 18px;
  opacity: .85;
}


/* Mobile: back to 1 column */
@media (max-width: 700px){
  .cec-list{
    grid-template-columns: 1fr;
  }
}

/* Page background */
body{
  background-color: #042234;
}

body{
  background-image: url('https://stcroixchurch.ca/1/wp-content/uploads/2025/12/calendar_left2-1-scaled.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* optional, nice effect */
}

.page-id-7233 h1.section-title{
  margin-top: 24px !important;
}

/* Calendar = white card */
.cec-calendar{
  background-color: #ffffff;
  border-radius: 14px;
  padding: 20px 18px 24px;
}

/* Calendar = white card */
.cec-calendar{
  background-color: #ffffff;
  border-radius: 14px;
  padding: 20px 18px 24px;

  margin-top: 10px;    /* half the top margin feel */
  margin-bottom: 28px; /* clear bottom breathing room */
}

/* List title row: title + canceled badge inline (tightened) */
.cec-list-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}

/* Date + time line */
.cec-list-datetime{
  font-size: 13px;
  opacity: .9;
}

/* Recurrence line */
.cec-list-recur{
  font-size: 16px;
  opacity: .8;
  margin-top: 2px;
}

/* List view: make all cards equal width (grid columns) */
.cec-list{
  justify-content: center;
  width: 100%;
}

/* Make each card fill its grid column */
.cec-list .cec-list-item,
.cec-list .cec-list-link{
  width: 100%;
}
/* List cards: use category color vars from PHP */
.cec-list .cec-list-link{
  background-color: var(--cec-card-bg);
  color: var(--cec-card-fg);
  width: 100%;
}

/* Canceled stays gray */
.cec-list .cec-list-item.cec-is-canceled .cec-list-link{
  background-color: #e3e6e8 !important;
  color: #666 !important;
  filter: grayscale(1);
}

/* LIST view: card lift on hover (cards only, no badges) */
.cec-list-link{
  transition: transform .2s ease, box-shadow .2s ease;
}

.cec-list-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 10px rgba(0,0,0,.35);
}


/* =========================
   CANCELLATION STATES + BADGES
   ========================= */

/* Badge base (grid + list) */
.cec-canceled-badge,
.cec-partial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.1;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  color: #111;
  white-space: nowrap;
}

/* LIST view: tighten badge spacing + size */
.cec-list .cec-canceled-badge,
.cec-list .cec-partial-badge {
  margin: 0;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.05;
}

/* Place badges in the GRID card (top-right) */
.cec-grid .cec-card .cec-canceled-badge,
.cec-grid .cec-card .cec-partial-badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* Full cancellation look */
.cec-canceled-badge {
  border-color: rgba(160, 0, 0, .35);
  color: #a00000;
  background: rgba(160, 0, 0, .06);
}

/* Partial cancellation look (still noticeable, less severe) */
.cec-partial-badge {
  border-color: rgba(160, 0, 0, .22);
  color: #a00000;
  background: rgba(160, 0, 0, .03);
}

/* Full canceled: gray out card content (but keep link clickable) */
.cec-grid .cec-card.cec-is-canceled {
  filter: grayscale(1);
  opacity: .75;
}
.cec-grid .cec-card.cec-is-canceled .cec-title {
  text-decoration: line-through;
}

/* Partial canceled: subtle tone-down */
.cec-grid .cec-card.cec-is-partial {
  opacity: .92;
}


/* LIST: badges sit after the title (already in markup), so just spacing */
.cec-list .cec-canceled-badge,
.cec-list .cec-partial-badge {
  margin: 2px 0 4px 0;
  width: fit-content;
}

/* Full canceled list item: a bit muted */
.cec-list .cec-list-item.cec-is-canceled {
  opacity: .72;
}
.cec-list .cec-list-item.cec-is-canceled .cec-title {
  text-decoration: line-through;
}

/* Partial canceled list item: slight mute */
.cec-list .cec-list-item.cec-is-partial {
  opacity: .92;
}

/* Partial cancellation: calm, sentence-case */
.cec-partial-badge {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* =========================
   CATEGORY CHIPS (both views)
   ========================= */
.cec-grid-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 20px;
}
.cec-grid-cats-title {
  font-weight: 600;
  margin-right: 4px;
}
.cec-chip {
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--cec-chip, #ddd);
  color: var(--cec-chip-fg, #111);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.cec-chip.clear {
  background: #fff;
  color: #333;
  border-style: dashed;
}

/* Center the LIST block under the month title */
.cec-calendar ul.cec-list{
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* (Optional) keep columns from stretching too wide */
.cec-list{
  grid-auto-rows: auto;
}

/* Center the category pills under the month title */
.cec-grid-cats{
  justify-content: center;
}

/* Put “Categories:” on its own centered line */
.cec-grid-cats-title{
  width: 100%;
  text-align: center;
  margin-right: 0;
  margin-bottom: 6px;
}

/* =========================
   (Optional) Single Event helpers
   ========================= */
.cec-back-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  background: #e86800;
  color: #fff;
  font-weight: 600;
}
.cec-back-btn:hover { opacity: .9; }

/* Small screens */
@media (max-width: 480px) {
  .cec-grid {
    grid-template-columns: 1fr;
  }
  .cec-thumb-right {
    width: 72px;
    height: 72px;
  }

  /* Keep badge from feeling cramped on tiny screens */
  .cec-grid .cec-card .cec-canceled-badge,
  .cec-grid .cec-card .cec-partial-badge {
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* LIST VIEW ONLY — remove side gutters, make cards use the full width */
.cec-calendar .cec-list{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
  row-gap: 6px !important;

  justify-content: stretch !important;
}

/* Make each colored card fill its grid column */
.cec-calendar .cec-list .cec-list-item,
.cec-calendar .cec-list .cec-list-link{
  width: 100% !important;
  max-width: none !important;
}

/* LIST view: push columns away from edges (desktop only) */
@media (min-width: 701px){
  .cec-list{
    padding-left: 80px;
    padding-right: 40px;
  }
}

/* LIST view: mobile = single column */
@media (max-width: 700px){
  .cec-calendar .cec-list{
    grid-template-columns: 1fr !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}