/* =========================================================
   UM Events Manager — Frontend Styles  v1.1.0
   Aesthetic: Editorial / Magazine — clean, bold typography,
   structured grid, confident color use
   Fonts loaded via JS: Sora (display) + DM Sans (body)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --umem-ink:       #0c1220;
  --umem-blue:      #1d5fff;
  --umem-blue-lt:   #3b82f6;
  --umem-blue-pale: #eef3ff;
  --umem-teal:      #0d9488;
  --umem-teal-pale: #f0fdfa;
  --umem-amber:     #d97706;
  --umem-amber-pale:#fffbeb;
  --umem-red:       #dc2626;
  --umem-red-pale:  #fef2f2;
  --umem-green:     #16a34a;
  --umem-green-pale:#f0fdf4;
  --umem-slate:     #64748b;
  --umem-border:    #e5eaf2;
  --umem-bg:        #f7f9fc;
  --umem-white:     #ffffff;
  --umem-radius:    14px;
  --umem-radius-sm: 8px;
  --umem-ff-display:'Sora', system-ui, sans-serif;
  --umem-ff-body:   'DM Sans', system-ui, sans-serif;
  --umem-shadow:    0 2px 8px rgba(12,18,32,.07);
  --umem-shadow-md: 0 8px 24px rgba(12,18,32,.12);
  --umem-shadow-lg: 0 20px 48px rgba(12,18,32,.16);
}

/* ── Base ───────────────────────────────────────────────── */
#umem-page-root, .umem-archive-wrap, .umem-single-wrap { font-family:var(--umem-ff-body); color:var(--umem-ink); }
#umem-page-root * { box-sizing:border-box; }
.umem-not-found { color:var(--umem-slate); font-style:italic; }

/* ── Archive Header ──────────────────────────────────────── */
.umem-archive-header {
  background:var(--umem-ink);
  padding:64px 0 48px;
  text-align:center;
  margin-bottom:40px;
  position:relative;
  overflow:hidden;
}
.umem-archive-header::before {
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(29,95,255,.35) 0%, transparent 70%);
}
.umem-archive-header__inner { position:relative; z-index:1; }
.umem-archive-title {
  font-family:var(--umem-ff-display); font-size:clamp(2rem,5vw,3.5rem);
  font-weight:800; color:#fff; margin:0 0 10px;
  letter-spacing:-.03em; line-height:1.1;
}
.umem-archive-subtitle {
  font-size:1.1rem; color:rgba(255,255,255,.65);
  margin:0; font-style:italic;
}

/* ── Filters ─────────────────────────────────────────────── */
.umem-archive-filters { max-width:1100px; margin:0 auto 32px; padding:0 20px; }
.umem-archive-filter-form {}
.umem-filter-pills { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.umem-filter-group { display:flex; gap:6px; flex-wrap:wrap; }
.umem-pill {
  padding:6px 16px; border-radius:999px; font-size:13px; font-weight:600;
  text-decoration:none!important; border:2px solid var(--umem-border);
  color:var(--umem-slate)!important; background:var(--umem-white); transition:all .15s;
}
.umem-pill:hover { border-color:var(--umem-blue); color:var(--umem-blue)!important; }
.umem-pill.active { background:var(--umem-blue); border-color:var(--umem-blue); color:#fff!important; }

.umem-filter-search { display:flex; align-items:center; gap:0; background:var(--umem-white); border:2px solid var(--umem-border); border-radius:999px; overflow:hidden; }
.umem-search-pill { border:none!important; outline:none; padding:8px 16px; font-size:13px; font-family:var(--umem-ff-body); background:transparent; width:200px; color:var(--umem-ink); }
.umem-search-pill-btn { background:var(--umem-blue); color:#fff; border:none; padding:8px 16px; cursor:pointer; font-size:15px; font-weight:700; transition:background .15s; }
.umem-search-pill-btn:hover { background:#1d4ed8; }

/* ── Events Grid ─────────────────────────────────────────── */
.umem-events-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:28px;
  max-width:1100px;
  margin:0 auto 40px;
  padding:0 20px;
}

/* ── Event Card ──────────────────────────────────────────── */
.umem-event-card {
  background:var(--umem-white);
  border:1px solid var(--umem-border);
  border-radius:var(--umem-radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--umem-shadow);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.umem-event-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--umem-shadow-lg);
}

/* Top stripe by type */
.umem-event-card--webinar   { border-top:4px solid var(--umem-blue); }
.umem-event-card--event     { border-top:4px solid #8b5cf6; }
.umem-event-card--workshop  { border-top:4px solid var(--umem-teal); }
.umem-event-card--training  { border-top:4px solid var(--umem-amber); }
.umem-event-card--conference{ border-top:4px solid #ec4899; }

.umem-event-card__top {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px 0;
}

.umem-type-pill {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.7px;
  padding:3px 10px; border-radius:20px;
}
.umem-type-pill--webinar    { background:#dbeafe; color:#1d4ed8; }
.umem-type-pill--event      { background:#ede9fe; color:#5b21b6; }
.umem-type-pill--workshop   { background:#ccfbf1; color:#0f766e; }
.umem-type-pill--training   { background:#fef3c7; color:#92400e; }
.umem-type-pill--conference { background:#fce7f3; color:#9d174d; }

.umem-status-dot { font-size:11px; font-weight:700; color:var(--umem-slate); }
.umem-status-dot--live { color:var(--umem-green); animation:blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Date banner */
.umem-event-card__date-banner {
  display:flex; align-items:center; gap:10px;
  padding:16px 18px 10px;
  border-bottom:1px solid var(--umem-border);
  margin:12px 0 0;
}
.umem-event-card__day {
  font-family:var(--umem-ff-display); font-size:36px; font-weight:800;
  color:var(--umem-blue); line-height:1;
}
.umem-event-card__date-right { display:flex; flex-direction:column; }
.umem-event-card__month { font-size:12px; font-weight:600; color:var(--umem-slate); text-transform:uppercase; letter-spacing:.5px; }
.umem-event-card__time  { font-size:13px; font-weight:600; color:var(--umem-ink); }

/* Body */
.umem-event-card__body { padding:16px 18px; flex:1; }
.umem-event-card__title {
  font-family:var(--umem-ff-display); font-size:16px; font-weight:700;
  color:var(--umem-ink); margin:0 0 10px; line-height:1.3;
}
.umem-event-card__title a { text-decoration:none!important; color:inherit!important; }
.umem-event-card__title a:hover { color:var(--umem-blue)!important; }
.umem-event-card__speaker {
  display:flex; align-items:center; gap:6px; font-size:12px;
  color:var(--umem-slate); margin-bottom:8px;
}
.umem-event-card__speaker svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
.umem-event-card__excerpt { font-size:13px; color:var(--umem-slate); line-height:1.55; margin:0; }

/* Footer */
.umem-event-card__footer {
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-top:1px solid var(--umem-border); background:var(--umem-bg);
  flex-wrap:wrap;
}
.umem-btn-card {
  padding:7px 14px; border-radius:var(--umem-radius-sm); font-size:12px; font-weight:700;
  text-decoration:none!important; border:1.5px solid transparent; transition:all .15s; cursor:pointer;
}
.umem-btn-card--primary { background:var(--umem-blue); color:#fff!important; border-color:var(--umem-blue); }
.umem-btn-card--primary:hover { background:#1d4ed8; }
.umem-btn-card--cal { background:var(--umem-green-pale); color:var(--umem-green)!important; border-color:#86efac; }
.umem-btn-card--cal:hover { background:#dcfce7; }
.umem-btn-card--join { background:transparent; color:var(--umem-blue)!important; border-color:var(--umem-blue); }
.umem-btn-card--join:hover { background:var(--umem-blue-pale); }

/* ── Empty & Pagination ──────────────────────────────────── */
.umem-archive-empty { text-align:center; padding:80px 20px; color:var(--umem-slate); max-width:1100px; margin:0 auto; }
.umem-archive-empty__icon { font-size:52px; margin-bottom:16px; }
.umem-archive-empty h3 { font-size:20px; font-family:var(--umem-ff-display); font-weight:700; margin-bottom:8px; }

.umem-archive-pagination { display:flex; justify-content:center; gap:8px; padding:20px; max-width:1100px; margin:0 auto; }
.umem-page-btn {
  width:36px; height:36px; border-radius:var(--umem-radius-sm); border:1.5px solid var(--umem-border);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  text-decoration:none!important; color:var(--umem-slate)!important; transition:all .15s;
}
.umem-page-btn:hover, .umem-page-btn.active { background:var(--umem-blue); border-color:var(--umem-blue); color:#fff!important; }

/* ── Single Event ────────────────────────────────────────── */
.umem-single-wrap { max-width:860px; margin:0 auto; padding:20px 20px 60px; }

/* Breadcrumb */
.umem-breadcrumb { font-size:12px; color:var(--umem-slate); margin-bottom:20px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.umem-breadcrumb a { color:var(--umem-blue)!important; text-decoration:none; }
.umem-breadcrumb a:hover { text-decoration:underline; }
.umem-breadcrumb__sep { color:var(--umem-border); }

/* Hero */
.umem-single-hero {
  border-radius:var(--umem-radius); padding:48px 48px 40px;
  margin-bottom:36px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #0c1220 0%, #1e3a8a 100%);
  color:#fff;
}
.umem-hero--webinar    { background:linear-gradient(135deg,#0c1220,#1d4ed8); }
.umem-hero--event      { background:linear-gradient(135deg,#0c1220,#5b21b6); }
.umem-hero--workshop   { background:linear-gradient(135deg,#0c1220,#0f766e); }
.umem-hero--training   { background:linear-gradient(135deg,#0c1220,#92400e); }
.umem-hero--conference { background:linear-gradient(135deg,#0c1220,#9d174d); }

.umem-single-hero::after {
  content:''; position:absolute; bottom:-30px; right:-30px;
  width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.04);
}
.umem-single-hero__inner { position:relative; z-index:1; }
.umem-single-hero__badges { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.umem-hero-type {
  background:rgba(255,255,255,.15); color:#fff; border-radius:20px;
  padding:4px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px;
}
.umem-hero-status {
  border-radius:20px; padding:4px 14px; font-size:11px; font-weight:700;
}
.umem-hero-status--upcoming  { background:#dbeafe; color:#1e40af; }
.umem-hero-status--live      { background:#dcfce7; color:#15803d; animation:blink 1.5s infinite; }
.umem-hero-status--completed { background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }
.umem-hero-status--cancelled { background:#fee2e2; color:#991b1b; }

.umem-single-hero__title {
  font-family:var(--umem-ff-display); font-size:clamp(1.5rem,3.5vw,2.5rem);
  font-weight:800; margin:0 0 20px; letter-spacing:-.02em; line-height:1.15;
}
.umem-single-hero__meta {
  display:flex; gap:24px; flex-wrap:wrap; margin-bottom:28px;
}
.umem-hero-meta-item {
  display:flex; align-items:center; gap:8px; font-size:14px; color:rgba(255,255,255,.85);
}
.umem-hero-meta-item svg { width:16px; height:16px; stroke:rgba(255,255,255,.6); fill:none; stroke-width:2; stroke-linecap:round; flex-shrink:0; }

.umem-single-hero__actions { display:flex; gap:10px; flex-wrap:wrap; }
.umem-hero-btn {
  padding:10px 20px; border-radius:var(--umem-radius-sm); font-size:13px; font-weight:700;
  text-decoration:none!important; border:2px solid transparent; transition:all .2s; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.umem-hero-btn--join  { background:var(--umem-blue); color:#fff!important; border-color:var(--umem-blue); }
.umem-hero-btn--join:hover { background:#1d4ed8; }
.umem-hero-btn--cal   { background:var(--umem-green-pale); color:var(--umem-green)!important; border-color:#86efac; }
.umem-hero-btn--cal:hover { background:#dcfce7; }
.umem-hero-btn--back  { background:rgba(255,255,255,.1); color:rgba(255,255,255,.85)!important; border-color:rgba(255,255,255,.2); }
.umem-hero-btn--back:hover { background:rgba(255,255,255,.2); }

/* Single Body */
.umem-single-body {}
.umem-single-section { margin-bottom:36px; }
.umem-section-title {
  font-family:var(--umem-ff-display); font-size:18px; font-weight:800;
  color:var(--umem-ink); margin:0 0 16px; padding-bottom:10px;
  border-bottom:2px solid var(--umem-border);
}
.umem-notes-content { font-size:15px; line-height:1.75; color:var(--umem-ink); }

/* Info Cards */
.umem-info-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px; margin-bottom:36px; }
.umem-info-card {
  background:var(--umem-white); border:1px solid var(--umem-border);
  border-radius:var(--umem-radius); padding:24px;
  box-shadow:var(--umem-shadow);
}
.umem-info-card--zoom { background:var(--umem-blue-pale); border-color:var(--umem-blue-lt); }
.umem-info-card__icon { font-size:24px; display:block; margin-bottom:10px; }
.umem-info-card__title { font-family:var(--umem-ff-display); font-size:14px; font-weight:700; color:var(--umem-ink); margin:0 0 12px; }
.umem-info-card__link { font-size:13px; font-weight:600; color:var(--umem-blue)!important; text-decoration:none; display:inline-block; margin-bottom:10px; }
.umem-info-card__link:hover { text-decoration:underline; }

/* Passcode blocks */
.umem-passcode-block {
  display:flex; align-items:center; gap:8px; background:var(--umem-bg);
  border:1px solid var(--umem-border); border-radius:var(--umem-radius-sm);
  padding:8px 10px; margin-top:8px;
}
.umem-passcode-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--umem-slate); flex-shrink:0; }
.umem-passcode-value { font-size:13px; font-weight:700; font-family:monospace; color:var(--umem-ink); flex:1; cursor:pointer; }
.umem-copy-btn {
  background:none; border:none; cursor:pointer; font-size:14px; padding:2px 4px;
  opacity:.5; transition:opacity .15s; flex-shrink:0;
}
.umem-copy-btn:hover { opacity:1; }
.umem-copy-btn.copied { opacity:1; }

/* Cal CTA */
.umem-cal-cta {
  background:linear-gradient(135deg,var(--umem-green-pale),#dcfce7);
  border:1px solid #86efac; border-radius:var(--umem-radius);
  padding:24px 28px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.umem-cal-cta__text { font-size:14px; color:var(--umem-ink); }
.umem-cal-cta__text strong { display:block; font-family:var(--umem-ff-display); font-size:16px; margin-bottom:4px; }

/* Responsive */
@media (max-width:640px) {
  .umem-archive-header { padding:40px 20px 30px; }
  .umem-single-hero { padding:28px 22px; }
  .umem-single-hero__meta { gap:12px; }
  .umem-events-grid { grid-template-columns:1fr; }
  .umem-info-cards { grid-template-columns:1fr; }
  .umem-cal-cta { flex-direction:column; }
}