/* PORCH-WO-28c-1: the WNM Events calendar element (wnm_events_calendar). Loads only on a page that uses it.
   Look from the approved 14t preview (docs/next-site/wo14t/preview/), rebuilt on the theme's tokens and classes.
   Tokens only: palette (--c-*), roles (--color-*), shades are color-mix() of a token. */

.evc { --cat: var(--c-ink); }

/* ministry-calendar markers: a dot + a text label, never colour alone. Slugs are the plugin's terms (#131). */
.evc [data-min="kids"] { --cat: var(--c-green); }
.evc [data-min="students"] { --cat: var(--c-forest); }
.evc [data-min="royal-rangers"] { --cat: var(--c-ochre); }
.evc [data-min="girls"] { --cat: var(--c-sage-deep); }
.evc [data-min="network"] { --cat: var(--c-ink); }
.evc [data-min="discipleship"] { --cat: var(--c-ink-muted); }
.evc [data-min="church-planting"] { --cat: var(--c-sage); }
.evc-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cat); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-ink) 30%, transparent); }
.evc-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
  background: var(--c-light); font: 500 12px/1.4 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink);
}
.evc-tag--nat { padding-inline: 10px; background: var(--c-national); }
.evc-tag--tent { padding-inline: 10px; background: transparent; border: 1px dashed var(--c-ink-muted); color: var(--c-ink-muted); }

/* no-JavaScript list (server-printed); the script hides it */
.evc__fallback ul, .evc-daylist ul, .evc__list ul { list-style: none; margin: 0; padding: 0; }
.evc-fb { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 3vw, 32px); align-items: center; padding: 20px 0; border-top: 1px solid var(--color-border); }
.evc__fallback li:last-child .evc-fb { border-bottom: 1px solid var(--color-border); }
.evc-fb__t { font: 600 clamp(19px, 2.2vw, 23px)/1.2 var(--font-display); overflow-wrap: anywhere; }
.evc-fb__links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.evc-fb__links a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }

/* controls */
.evc__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
.evc__filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.evc-chipbtn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--c-ink); border-radius: var(--r-pill); background: transparent; color: var(--c-ink);
  font: 500 14px/1.2 var(--font-body); cursor: pointer;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.evc-chipbtn:hover { background: var(--c-paper); }
.evc-chipbtn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-light); }
.evc-chipbtn[aria-pressed="true"] .evc-dot { box-shadow: 0 0 0 1.5px var(--c-light); }
.evc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.evc-toggle { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--c-paper); border: 1px solid var(--color-border); }
.evc-toggle__btn { min-height: 40px; padding: 6px 20px; border-radius: var(--r-pill); font: 600 14px/1.2 var(--font-body); color: var(--c-ink); background: transparent; cursor: pointer; }
.evc-toggle__btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-light); }

/* month bar */
.evc__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.evc__label { margin: 0; font: 600 var(--fs-display-m)/var(--lh-display-m) var(--font-display); letter-spacing: var(--tr-heading); text-align: center; min-width: 0; }
.evc-nav { flex: none; width: var(--circle-md); height: var(--circle-md); display: grid; place-items: center; border: 1.5px solid var(--c-ink); border-radius: 50%; background: transparent; color: var(--c-ink); cursor: pointer; transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear; }
.evc-nav svg { width: var(--circle-glyph); height: var(--circle-glyph); }
.evc-nav:hover { background: var(--c-ink); color: var(--c-light); }
.evc-nav svg, .evc-go svg { transition: transform var(--dur-flow) var(--ease-flow); }
@media (prefers-reduced-motion: no-preference) { /* the one arrow hover (#196): the circle stays, the arrow turns 30° up (back arrow: the mirror way) */
  .evc-nav[data-next]:hover svg, .evc-row:hover .evc-go svg, .evc-sub__app:hover .evc-go svg { transform: rotate(var(--circle-turn)); }
  .evc-nav[data-prev]:hover svg { transform: rotate(calc(-1 * var(--circle-turn))); }
}
.evc-empty { display: grid; justify-items: center; gap: 16px; margin-bottom: 20px; padding: 24px; border: 1px dashed var(--c-ink-muted); border-radius: var(--r-md); background: var(--c-paper); text-align: center; }
.evc-empty p { margin: 0; }

/* month grid */
.evc-grid { border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--c-light); overflow: hidden; }
.evc-grid__head, .evc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.evc-grid__head span { padding: 12px 8px; text-align: center; font: 500 12px/1.3 var(--font-body); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-text-2); border-bottom: 1px solid var(--color-border); background: var(--c-paper); }
.evc-week + .evc-week { border-top: 1px solid var(--color-border); }
.evc-day { position: relative; min-width: 0; min-height: 124px; padding: 6px 0 8px; display: flex; flex-direction: column; gap: 4px; }
.evc-day + .evc-day { border-left: 1px solid var(--color-border); }
.evc-day--out { background: var(--c-paper); }
.evc-day--out .evc-day__num { color: var(--c-ink-muted); }
.evc-day--today .evc-day__num { background: var(--c-ink); color: var(--c-light); }
.evc-day--sel { background: color-mix(in srgb, var(--c-green) 14%, var(--c-light)); }
.evc-day__num { align-self: flex-start; margin: 0 0 2px 8px; min-width: 26px; height: 26px; padding-inline: 4px; display: grid; place-items: center; border-radius: var(--r-pill); font: 500 13px/1 var(--font-body); color: var(--c-ink); }
.evc-slot { height: 28px; min-width: 0; }
.evc-chip {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0 8px; text-align: left;
  background: color-mix(in srgb, var(--cat) 22%, var(--c-light)); color: var(--c-ink);
  font: 600 12px/1 var(--font-body); cursor: pointer; overflow: hidden;
}
.evc-chip:hover { background: color-mix(in srgb, var(--cat) 38%, var(--c-light)); }
.evc-chip .evc-dot { width: 8px; height: 8px; }
.evc-chip__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evc-chip--start { margin-left: 4px; width: calc(100% - 4px); border-radius: var(--r-xs) 0 0 var(--r-xs); }
.evc-chip--end { width: calc(100% - 4px); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.evc-chip--start.evc-chip--end { width: calc(100% - 8px); border-radius: var(--r-xs); }
.evc-chip--tent { background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--c-ink) 8%, transparent) 6px 12px); }
.evc-more { margin: 0 8px; padding: 2px 0; text-align: left; font: 600 12px/1.2 var(--font-body); color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.evc-day__dots, .evc-day__tap { display: none; }
.evc.is-loading .evc-grid, .evc.is-loading .evc__list { opacity: 0.55; }

/* day list (phone tap, "+N more") */
.evc-daylist { margin-top: 16px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--c-light); }
.evc-daylist h4 { margin: 0 0 12px; font: 600 var(--fs-h3)/var(--lh-h3) var(--font-display); }
.evc-daylist p { margin: 0; }

/* list view */
.evc-list__month { margin: 40px 0 8px; font: 600 var(--fs-display-m)/var(--lh-display-m) var(--font-display); letter-spacing: var(--tr-heading); }
.evc-list__month:first-child { margin-top: 0; }
.evc-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 3vw, 32px);
  width: 100%; padding: 20px 0; text-align: left; color: var(--c-ink);
  border-top: 1px solid var(--color-border); cursor: pointer;
}
.evc__list li:last-child .evc-row, .evc-daylist li:last-child .evc-row { border-bottom: 1px solid var(--color-border); }
.evc-daylist .evc-row:first-child { border-top: 0; }
.evc-row:hover .evc-row__t { text-decoration: underline; text-underline-offset: 4px; }
.evc-date { display: grid; place-content: center; gap: 2px; min-width: 70px; min-height: 70px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--c-light); text-align: center; }
.evc-date span { font: 500 12px/1.3 var(--font-body); text-transform: uppercase; }
.evc-date strong { font: 600 22px/1 var(--font-display); white-space: nowrap; }
.evc-row__body { display: grid; gap: 8px; min-width: 0; }
.evc-row__t { font: 600 clamp(19px, 2.2vw, 23px)/1.2 var(--font-display); overflow-wrap: anywhere; }
.evc-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; color: var(--color-text-2); }
.evc-go { display: grid; place-items: center; flex: none; width: var(--circle-md); height: var(--circle-md); border-radius: 50%; border: 1.5px solid var(--c-ink); }
.evc-go svg { width: 16px; height: 16px; }
.evc-row:hover .evc-go, .evc-sub__app:hover .evc-go { background: var(--c-ink); color: var(--c-light); }
.evc-list__empty { margin: 0; padding: 32px; border: 1px dashed var(--c-ink-muted); border-radius: var(--r-md); background: var(--c-paper); text-align: center; }
.evc-list__more { margin: 24px 0 0; }

/* dialogs: event panel and Subscribe */
.evc-dialog { width: min(480px, 100% - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-lg); background: var(--c-light); color: var(--c-ink); box-shadow: var(--shadow-float); overflow: auto; margin: auto; }
.evc-dialog::backdrop { background: var(--color-scrim); }
.evc-dialog__panel { position: relative; display: grid; gap: 16px; justify-items: start; padding: clamp(24px, 5vw, 36px); }
.evc-dialog__panel > * { margin-block: 0; min-width: 0; max-width: 100%; }
.evc-dialog__close { position: absolute; top: 12px; right: 12px; width: var(--circle-md); height: var(--circle-md); display: grid; place-items: center; border-radius: 50%; background: transparent; color: var(--c-ink); cursor: pointer; }
.evc-dialog__close svg { width: var(--circle-glyph); height: var(--circle-glyph); }
.evc-dialog__close { transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear; }
.evc-dialog__close:hover { background: var(--c-ink); color: var(--c-light); }
.evc-dialog__cat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 1.3em; font: 500 12px/1.3 var(--font-body); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; }
.evc-dialog__ministry { display: inline-flex; align-items: center; gap: 8px; }
.evc-dialog__title { padding-right: 40px; font: 600 var(--fs-display-m)/var(--lh-display-m) var(--font-display); letter-spacing: var(--tr-heading); overflow-wrap: anywhere; }
.evc-dialog__meta { display: grid; gap: 12px; margin: 0; }
.evc-dialog__meta dt { font: 500 12px/1.3 var(--font-body); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-text-2); }
.evc-dialog__meta dd { margin: 2px 0 0; font-weight: 500; }
.evc-dialog__addr { display: block; font-weight: 400; color: var(--color-text-2); }
.evc-dialog__tent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-2); }
.evc-dialog__sub { font: 500 12px/1.3 var(--font-body); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-text-2); }
.evc-dialog__group { display: grid; gap: 10px; }
.evc-dialog__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.evc-dialog__btns .btn { white-space: normal; text-align: left; }
.evc-sub { width: min(520px, 100% - 32px); }
.evc-sub__lead { color: var(--color-text-2); }
.evc-sub__cats { width: 100%; margin: 0; padding: 0; border: 0; min-width: 0; }
.evc-sub__cats legend { margin-bottom: 8px; padding: 0; font: 500 12px/1.3 var(--font-body); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-text-2); }
.evc-sub__catlist { display: flex; flex-wrap: wrap; gap: 8px; }
.evc-sub__catlist .evc-chipbtn { min-height: 40px; padding: 6px 14px; font-size: 13px; }
.evc-sub__apps { list-style: none; margin: 0; padding: 0; width: 100%; }
.evc-sub__app { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--color-border); color: var(--c-ink); }
.evc-sub__apps li:last-child .evc-sub__app { border-bottom: 1px solid var(--color-border); }
.evc-sub__app strong { display: block; font: 600 19px/1.2 var(--font-display); }
.evc-sub__app small { display: block; margin-top: 2px; font-size: 14px; color: var(--color-text-2); }
.evc-sub__app:hover .evc-go, .evc-sub__app:focus-visible .evc-go { background: var(--c-ink); color: var(--c-light); }
.evc-sub__copy { width: 100%; display: grid; gap: 8px; }
.evc-sub__copy label { font-size: 14px; color: var(--color-text-2); }
.evc-sub__copyrow { display: flex; gap: 8px; min-width: 0; }
.evc-sub__copyrow input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: var(--r-sm); background: var(--c-white); font: 400 13px/1 var(--font-body); color: var(--c-ink); }

/* phone: compact grid with dots only, tap a day to list it */
@media (max-width: 767px) {
  .evc__controls { display: grid; gap: 14px; }
  .evc-chipbtn { padding: 6px 12px; min-height: 40px; font-size: 13px; }
  .evc__actions { justify-content: space-between; }
  .evc-day { min-height: 52px; align-items: center; padding: 4px 0; gap: 4px; }
  .evc-day__num { align-self: center; margin: 0; }
  .evc-slot, .evc-more { display: none; }
  .evc-day__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 10px; padding-inline: 2px; }
  .evc-day__dots .evc-dot { width: 7px; height: 7px; }
  .evc-day__tap { display: block; position: absolute; inset: 0; width: 100%; background: transparent; cursor: pointer; }
  .evc-grid__head span { padding-inline: 0; font-size: 10px; letter-spacing: 0.04em; }
  .evc-row, .evc-fb { grid-template-columns: auto minmax(0, 1fr); }
  .evc-row .evc-go { display: none; }
  .evc-dialog__btns .btn { width: 100%; }
}

/* author display rules must not beat the hidden attribute */
.evc [hidden], .evc-dialog [hidden] { display: none !important; }

/* the Events hero photo on a phone (the desktop point is the row's own Design Options value) */
@media (max-width: 767px) { .vc_row.vc_custom_1790000000052 { background-position: 60% 40% !important; } }