/* =============================================================
   Event Box Block — event-box.css
   Scoped to .wha-event-box to avoid theme conflicts
   ============================================================= */

/* ── Brand Variables ── */
/* azo-sans-web is loaded globally by the theme via Typekit — no import needed */
.wha-event-box {
  --wha-navy:       #245473;
  --wha-navy-deep:  #1a3d52;
  --wha-sky:        #7EDDF2;
  --wha-gold:       #C8AD43;
  --wha-blue:       #559DD3;
  --wha-bg:         #F2F2F2;
  --wha-ink:        #1A2B35;
  --wha-ink-muted:  #5A6E79;
  --wha-border:     #D0DCE3;
  --wha-surface:    #E8F1F5;
  --wha-white:      #FFFFFF;
  --font-display:   'azo-sans-web', system-ui, sans-serif;
  --font-body:      'azo-sans-web', system-ui, sans-serif;
}

/* ── Box sizing reset scoped to block ── */
.wha-event-box *,
.wha-event-box *::before,
.wha-event-box *::after {
  box-sizing: border-box;
}

/* ── Widget Shell ── */
.wha-event-box {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--wha-ink);
  max-width: 816px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(36, 84, 115, 0.14);
}

/* ── Header ── */
.wha-event-box__header {
  background: linear-gradient(135deg, var(--wha-navy) 0%, var(--wha-navy-deep) 100%);
  padding: 28px 32px 24px;
  position: relative;
  overflow: hidden;
}

/* Gold-to-sky accent bar */
.wha-event-box__header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wha-gold), var(--wha-sky));
}

.wha-event-box__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--wha-white);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* ── Events List ── */
.wha-event-box__list {
  background: var(--wha-bg);
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Event Card ── */
.wha-event-box__card {
  background: var(--wha-white);
  border: 1px solid var(--wha-border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(36, 84, 115, 0.06);
  transition: box-shadow 0.2s ease;
}

.wha-event-box__card:hover {
  box-shadow: 0 3px 12px rgba(36, 84, 115, 0.12);
}

/* Featured card — gold left border */
.wha-event-box__card.featured {
  border-left: 3px solid var(--wha-gold);
}

/* ── Summary Row (always visible) ── */
.wha-event-box__summary {
  padding: 20px 22px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
  user-select: none;
}

.wha-event-box__summary:hover .wha-event-box__event-title {
  color: var(--wha-blue);
}

.wha-event-box__date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.wha-event-box__date-badge {
  background: var(--wha-surface);
  color: var(--wha-navy);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}

.wha-event-box__time {
  font-size: 12px;
  font-weight: 500;
  color: var(--wha-ink-muted);
}

.wha-event-box__event-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--wha-navy);
  line-height: 1.3;
  margin-bottom: 6px;
  transition: color 0.15s ease;
}

.wha-event-box__synopsis {
  font-size: 13px;
  color: var(--wha-ink-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Toggle Icon ── */
.wha-event-box__toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wha-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background 0.2s ease, transform 0.25s ease;
}

.wha-event-box__card.open .wha-event-box__toggle {
  background: var(--wha-navy);
  transform: rotate(180deg);
}

.wha-event-box__toggle svg {
  display: block;
}

.wha-event-box__card.open .wha-event-box__toggle svg path {
  stroke: var(--wha-white);
}

/* ── Accordion Detail Panel ── */
.wha-event-box__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  opacity: 0;
}

.wha-event-box__card.open .wha-event-box__detail {
  max-height: 600px;
  opacity: 1;
}

.wha-event-box__detail-inner {
  border-top: 1px solid var(--wha-border);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wha-event-box__description {
  font-size: 14px;
  color: var(--wha-ink);
  line-height: 1.65;
}

/* ── Meta Items (date, time range, location) ── */
.wha-event-box__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wha-event-box__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--wha-ink-muted);
}

.wha-event-box__meta-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── CTA Button ── */
.wha-event-box__cta {
  display: inline-block;
  background: var(--wha-gold);
  color: var(--wha-navy);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 9px 20px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease;
  align-self: center;
  border: none;
  cursor: pointer;
}

.wha-event-box__cta:hover {
  background: #b09a38;
  color: var(--wha-navy);
  text-decoration: none;
}