/* Apotheon Events Calendar — scoped under .aec-app to survive theme (Divi) resets */
.aec-app{
  --obsidian:#1A1B1A; --cream:#E5DEDB; --bronze:#C69846;
  --ink:#242220; --muted:#6c675f; --line:#e4ded2; --card:#ffffff; --soft:#f7f4ee;
  max-width:1240px; margin:0 auto; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
}
.aec-app *{ box-sizing:border-box; }
/* Divi applies its heading webfont to h1–h6; it can fail on some mobile browsers and
   fall back to a serif. Force the calendar's own headings to the system sans stack. */
.aec-app h1,.aec-app h2,.aec-app h3,.aec-app h4,.aec-app h5,.aec-app h6,
.aec-app .aec-card-title,.aec-app .aec-m-title{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
/* This stylesheet only loads on pages that use [apotheon_events], so it's safe to relax
   Divi's default 80% content container here (removes the excessive side gutters). */
body #main-content .container{ width:92%; max-width:1320px; }
@media(max-width:980px){ body #main-content .container{ width:94%; } }

/* toolbar */
.aec-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.aec-toolbar-left{ display:flex; align-items:center; gap:8px; }
.aec-arrow,.aec-today{ font-family:inherit; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:8px; height:38px; padding:0 12px; font-size:15px; line-height:1; }
.aec-arrow{ width:38px; padding:0; font-size:20px; }
.aec-today{ font-weight:600; }
.aec-arrow:hover,.aec-today:hover{ border-color:var(--bronze); color:var(--bronze); }
.aec-title{ font-size:20px; font-weight:700; color:var(--obsidian); margin-left:6px; }

.aec-view-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.aec-view-btn{ font-family:inherit; cursor:pointer; border:0; background:var(--card); color:var(--muted);
  padding:0 16px; height:38px; font-size:14px; font-weight:600; letter-spacing:.02em; }
.aec-view-btn+.aec-view-btn{ border-left:1px solid var(--line); }
.aec-view-btn.active{ background:var(--obsidian); color:#fff; }

/* FullCalendar theming */
.aec-app .fc{ --fc-border-color:var(--line); --fc-page-bg-color:var(--card);
  --fc-today-bg-color:#fbf6ec; --fc-neutral-bg-color:var(--soft);
  --fc-list-event-hover-bg-color:var(--soft); --fc-event-border-color:transparent; }
.aec-app .fc a{ color:inherit; text-decoration:none; }
.aec-app .fc .fc-col-header-cell-cushion{ padding:8px 4px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.aec-app .fc-daygrid-day-number{ font-size:13px; color:var(--muted); padding:6px; }
.aec-app .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number{ color:var(--bronze); font-weight:700; }

/* events */
.aec-app .fc-event{ cursor:pointer; border-radius:6px; padding:1px 2px; font-weight:600; }
.aec-app .fc-daygrid-event{ padding:2px 6px; }
.aec-app .fc-event-title{ font-weight:600; }
.aec-app .aec-has-incl{ box-shadow:inset 3px 0 0 var(--bronze); }
/* month view: stack time (row 1) over a full-width title (row 2) — no narrow-column wrap */
.aec-app .fc-daygrid-event{ white-space:normal; }
.aec-app .fc-daygrid-block-event .fc-event-main-frame{ display:block; }   /* was flex row */
.aec-app .fc-daygrid-block-event .fc-event-time{ display:block; white-space:normal; overflow:visible;
  font-size:11px; font-weight:700; opacity:.92; margin:0 0 1px; }
.aec-app .fc-daygrid-block-event .fc-event-title-container{ display:block; }
.aec-app .fc-daygrid-block-event .fc-event-title,
.aec-app .fc-daygrid-event .fc-event-title{ display:block; white-space:normal; overflow:visible; line-height:1.2; font-size:12px; }
.aec-app .fc-daygrid-block-event{ padding:3px 6px; }
/* week view: concurrent events overlap full-width (later on top) instead of splitting to half columns */
.aec-app .fc-timegrid-event-harness{ inset-inline:0 !important; left:0 !important; right:0 !important; }
.aec-app .fc-timegrid-event{ box-shadow:0 0 0 1px rgba(255,255,255,.5); }  /* subtle edge so stacked blocks read apart */

/* list view */
.aec-app .fc-list{ border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.aec-app .fc-list-day-cushion{ background:var(--soft) !important; }
.aec-app .fc-list-event td{ padding:14px 12px; }
.aec-app .fc-list-event-title a{ font-weight:700; color:var(--obsidian); }
.aec-app .fc-list-event-time{ color:var(--muted); }

.aec-incl-pill{ display:inline-block; margin-left:10px; background:var(--bronze); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.04em; padding:2px 8px; border-radius:999px; vertical-align:middle; }

/* filter bar (interactive, replaces the old legend) */
.aec-filters{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 2px 16px; }
.aec-fchip{ font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:999px; padding:6px 13px; font-size:13px; font-weight:600; line-height:1; transition:all .12s ease; }
.aec-fchip .aec-fdot{ width:10px; height:10px; border-radius:50%; background:var(--c); display:inline-block; }
.aec-fchip:hover{ border-color:var(--c); }
.aec-fchip.active{ background:var(--c); border-color:var(--c); color:#fff; }
.aec-fchip.active .aec-fdot{ background:#fff; }
.aec-incl-note{ display:inline-flex; align-items:center; gap:7px; margin-left:auto; font-size:12px; color:var(--muted); }
@media(max-width:600px){ .aec-incl-note{ margin-left:0; width:100%; } }

/* modal */
.aec-modal{ position:fixed; inset:0; z-index:1000000; display:flex; align-items:flex-start; justify-content:center; padding:210px 20px 24px; }
.aec-modal-backdrop{ position:absolute; inset:0; background:rgba(20,20,18,.66); }
.aec-modal-card{ position:relative; background:var(--card); border-radius:16px; max-width:520px; width:100%;
  max-height:90vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.4); }
/* Desktop: top-align the modal JUST BELOW the site header (~200px) so a tall event grows
   DOWNWARD with internal scroll instead of pushing its top — and the close button — up behind
   the fixed Divi header (which sits above the modal in its own stacking context, so raising
   z-index alone can't fix it — the card must start below the header). +36px for the WP admin bar.
   (Placed AFTER the base .aec-modal-card rule so these max-heights win on source order.) */
@media(min-width:601px){
  .aec-modal-card{ max-height:calc(100vh - 240px); }
  body.admin-bar .aec-modal{ padding-top:246px; }
  body.admin-bar .aec-modal-card{ max-height:calc(100vh - 276px); }
}
.aec-modal-close{ position:absolute; top:10px; right:12px; z-index:2; background:rgba(0,0,0,.5); color:#fff; border:0;
  width:34px; height:34px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer; }
.aec-m-img img{ width:100%; display:block; aspect-ratio:16/9; height:auto; object-fit:cover; }
.aec-modal-body{ padding:0 0 22px; overflow-y:auto; min-height:0; }
.aec-m-badges{ display:flex; gap:8px; flex-wrap:wrap; padding:16px 22px 0; }
.aec-cat-badge{ color:#fff; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.aec-incl-badge{ background:var(--obsidian); color:var(--bronze); font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 10px; border-radius:999px; }
.aec-m-title{ font-size:26px; font-weight:800; color:var(--obsidian); margin:12px 22px 4px; line-height:1.15; }
.aec-m-when{ margin:0 22px; color:var(--bronze); font-weight:700; font-size:15px; }
.aec-m-loc{ margin:8px 22px 0; color:var(--muted); font-size:14px; }
.aec-m-desc{ margin:14px 22px 0; color:var(--ink); font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.aec-m-desc p{ margin:0 0 .7em; }
.aec-m-desc p:last-child{ margin-bottom:0; }
.aec-m-desc a{ color:var(--bronze); text-decoration:underline; overflow-wrap:anywhere; }
.aec-m-incl{ font-weight:700; font-size:14px; color:var(--ink); margin:18px 22px 0; line-height:1.35; }
.aec-register{ display:block; margin:10px 22px 0; text-align:center; background:var(--bronze); color:#fff !important;
  font-weight:700; padding:14px; border-radius:8px; font-size:16px; }
.aec-register:hover{ filter:brightness(1.06); }

/* add to calendar */
.aec-atc{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:16px 22px 4px; }
.aec-atc-label{ flex:0 0 100%; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 8px; }
.aec-atc-btn{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--soft);
  color:var(--ink) !important; border-radius:8px; padding:8px 13px; font-size:13px; font-weight:600; }
.aec-atc-btn:hover{ border-color:var(--bronze); color:var(--bronze) !important; }

/* Summary (card list) view */
.aec-nav{ display:inline-flex; gap:8px; }
.aec-summary{ display:flex; flex-direction:column; gap:10px; }
.aec-card{ display:flex; gap:16px; padding:14px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; cursor:pointer; transition:box-shadow .14s ease,border-color .14s ease,transform .14s ease; }
.aec-card:hover{ box-shadow:0 6px 20px rgba(0,0,0,.08); border-color:var(--bronze); transform:translateY(-1px); }
.aec-card-thumb{ position:relative; flex:0 0 210px; width:210px; align-self:stretch; min-height:150px; border-radius:9px; overflow:hidden; background:var(--soft); }
.aec-card-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.aec-card-thumb-empty{ display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--c) 16%, #fff); }
.aec-card-thumb-empty span{ font-size:40px; font-weight:800; color:var(--c); font-family:Georgia,serif; }
.aec-card-body{ flex:1 1 auto; min-width:0; }
/* top row: date on the left, category badges on the right, top-aligned. Flex (not float)
   so a 2nd/3rd badge stacks on the right WITHOUT pushing the date down or leaving a gap. */
.aec-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:5px; }
.aec-card-cats{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; flex:0 0 auto; max-width:58%; }
.aec-cat-chip{ color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.aec-card-when{ flex:1 1 auto; min-width:0; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
/* keep the date and the time each on one line -> wraps cleanly to 2 lines max, never mid-date */
.aec-when-d, .aec-when-t{ white-space:nowrap; }
.aec-card-title{ margin:0 0 5px; font-size:19px; font-weight:800; color:var(--obsidian); line-height:1.2; }
.aec-card-desc{ clear:right; margin:0; font-size:14px; line-height:1.5; color:var(--muted);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.aec-card-incl{ clear:right; font-weight:700; font-size:12.5px; color:var(--ink); margin-top:8px; line-height:1.3; }
.aec-card-reg{ clear:right; display:block; color:var(--bronze); font-weight:700; font-size:14px; margin-top:8px; }
.aec-star{ color:var(--bronze); }
.aec-empty{ padding:44px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }

/* Loading skeleton (shown while the events feed loads — avoids a blank white flash) */
.aec-app{ min-height:60vh; }
.aec-loading{ display:grid; gap:14px; }
.aec-skel-card{ display:flex; gap:14px; padding:14px; border:1px solid var(--line); border-radius:12px; }
.aec-skel-thumb{ flex:0 0 160px; height:90px; border-radius:8px; }
.aec-skel-lines{ flex:1; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.aec-skel-lines span{ height:12px; border-radius:6px; }
.aec-skel-lines span:nth-child(1){ width:38%; } .aec-skel-lines span:nth-child(2){ width:82%; } .aec-skel-lines span:nth-child(3){ width:58%; }
.aec-skel-thumb, .aec-skel-lines span{ background:linear-gradient(90deg,#ececec 25%,#f6f6f6 37%,#ececec 63%); background-size:400% 100%; animation:aec-shim 1.3s ease-in-out infinite; }
@keyframes aec-shim{ 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
@media (prefers-reduced-motion: reduce){ .aec-skel-thumb,.aec-skel-lines span{ animation:none; } }
@media (max-width:600px){ .aec-skel-thumb{ flex-basis:96px; height:64px; } }

/* List "Load more" */
.aec-loadmore-wrap{ display:flex; justify-content:center; margin:22px 0 6px; }
.aec-loadmore{ appearance:none; cursor:pointer; border:1px solid var(--bronze); background:transparent;
  color:var(--bronze); font-weight:700; font-size:15px; letter-spacing:.02em; padding:13px 30px; border-radius:8px; }
.aec-loadmore:hover{ background:var(--bronze); color:#fff; }
.aec-loadmore-count{ font-weight:600; opacity:.8; margin-left:4px; }

@media(max-width:600px){
  .aec-toolbar{ gap:8px; }
  .aec-title{ margin:0; }
  .aec-view-toggle,.aec-nav{ display:none; }        /* mobile = list view only */
  .aec-card{ gap:12px; padding:10px; }
  .aec-card{ overflow:hidden; }                                        /* guard: never let a long line cause page h-scroll */
  .aec-card-thumb{ flex-basis:112px; width:112px; min-height:112px; }   /* wider -> better image crop; balanced against the one-line included text below */
  .aec-card-title{ font-size:16px; }
  .aec-card-desc{ -webkit-line-clamp:2; font-size:13px; }
  /* mobile: stack the header so the date always gets its own full-width line (no collision
     with the badges, no gap). Badges sit on their own row above the date. */
  .aec-card-head{ flex-direction:column; align-items:flex-start; gap:6px; }
  .aec-card-cats{ order:-1; max-width:100%; justify-content:flex-start; }
  .aec-card-when{ width:100%; }                     /* narrower -> date/time gets room */
  .aec-cat-chip{ font-size:9.5px; padding:2px 7px; letter-spacing:.03em; }
  /* shrink chips programmatically when multiple would otherwise wrap */
  .aec-card-cats[data-count="2"] .aec-cat-chip{ font-size:9px; padding:2px 6px; letter-spacing:.02em; }
  .aec-card-cats[data-count="3"] .aec-cat-chip,
  .aec-card-cats[data-count="4"] .aec-cat-chip{ font-size:8px; padding:2px 5px; letter-spacing:.01em; }
  .aec-fchip{ font-size:12px; padding:5px 11px; }
  /* smaller date/time so each unit fits its (badge-narrowed) column */
  .aec-card-when{ font-size:11px; letter-spacing:.02em; }
  /* shrink the included-badge text so it fits on one line on mobile */
  .aec-card-incl{ font-size:9px; letter-spacing:-.1px; white-space:nowrap; }
  /* push the modal below the site's fixed announcement bar so the X is tappable */
  .aec-modal{ align-items:flex-start; padding-top:150px; padding-bottom:24px; }
  .aec-modal-card{ max-height:calc(100vh - 180px); }
}