/* events-calendar.css
   Fixed so transitions reliably work (even with other global theme CSS)
   - Uses pseudo-elements for today/selected with opacity transitions
   - Adds explicit will-change + transform hack to avoid “no transition” in some setups
   - Ensures overlay/ring are behind content; dot stays on top
   - Keeps your font rules
*/

[data-events-calendar]{
  width: 100%;
}

/* =========================
   FONT RULES
========================= */
.ec{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(10px, 2vw, 16px);
  font-family: var(--secondary-font);
}
.ec, .ec *{
  box-sizing: border-box;
}

/* Event title only */
.ec__item h4,
.ec__item h4 a{
  font-family: var(--primary-font);
}

/* =========================
   PANELS
========================= */
.ec__bar{
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: clamp(12px, 2vw, 14px);
  padding: clamp(10px, 2vw, 12px);
  background: rgba(0,0,0,.15);
  box-shadow: var(--box-shadow-dark-medium);
}

.ec__events{
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: clamp(12px, 2vw, 14px);
  padding: clamp(12px, 2vw, 14px);
  background: rgba(0,0,0,.10);
  box-shadow: var(--box-shadow-dark-medium);
}

/* =========================
   HEADER + NAV
========================= */
.ec__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 12px);
  margin-bottom: clamp(8px, 1.6vw, 10px);
}

.ec__range{
  flex: 1;
  text-align: center;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(.95rem, 1.1vw + .6rem, 1.15rem);
  line-height: 1.1;
}

/* PRIMARY accents */
.ec__btn{
  width: clamp(32px, 3.2vw, 44px);
  height: clamp(32px, 3.2vw, 44px);
  border-radius: 999px;
  border: 2px solid var(--primary-color);
  background: transparent;
  color: var(--primary-color);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  font-size: clamp(1.1rem, 1.2vw + .6rem, 1.7rem);
  line-height: 1;
  flex: 0 0 auto;

  /* ✅ forceable transition (guards against external overrides) */
  transition-property: transform, background-color, color, border-color;
  transition-duration: 250ms;
  transition-timing-function: ease;
  will-change: transform;
}
.ec__btn:hover{
  background: var(--primary-color);
  color: var(--dark-color);
}
.ec__btn:active{
  transform: scale(0.98);
}

/* =========================
   DAYS STRIP
========================= */
.ec__days{
  width: 100%;
  display: grid;
  gap: clamp(6px, 1vw, 10px);
}

/* Day button */
.ec__day{
  position: relative;
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.08);
  border-radius: clamp(10px, 1.4vw, 12px);
  padding: clamp(8px, 1.2vw, 12px) clamp(6px, 1vw, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .6vw, 6px);
  cursor: pointer;
  user-select: none;
  min-height: clamp(56px, 8vw, 92px);
  overflow: hidden;

  /* ✅ reliable transitions */
  transition-property: transform, border-color;
  transition-duration: 250ms;
  transition-timing-function: ease;

  /* ✅ helps prevent “no transition” in some global CSS/optimizations */
  will-change: transform, border-color;
  transform: translateZ(0);
}

.ec__day:hover{ border-color: rgba(255,255,255,.22); }
.ec__day:active{ transform: translateZ(0) scale(0.98); }

/* content above overlays */
.ec__day > *{ position: relative; z-index: 2; }

/* Today overlay */
.ec__day::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--primary-color);
  opacity: 0;
  z-index: 0;

  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease;
  will-change: opacity;
}

/* Selected ring (inset so overflow:hidden doesn't clip) */
.ec__day::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--primary-color);
  opacity: 0;
  z-index: 1;

  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease;
  will-change: opacity;
}

.ec__day.is-today::before{ opacity: 0.12; }
.ec__day.is-selected::after{ opacity: 1; }

.ec__dow{
  opacity: .85;
  font-size: clamp(.75rem, .6vw + .55rem, .95rem);
  line-height: 1;
  white-space: nowrap;
}
.ec__num{
  font-size: clamp(1rem, 1vw + .6rem, 1.45rem);
  font-weight: 900;
  line-height: 1;
}

[data-events-calendar][data-variant="compact"] .ec__day .ec__dow {
  font-size: clamp(0.7rem, 1.2vw + 0.5rem, 1.5rem);   
  font-weight: 600;    
  line-height: 1.3;
}

/* Dot always on top */
.ec__dot{
  position: absolute;
  bottom: clamp(6px, 1vw, 10px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(6px, .8vw, 9px);
  height: clamp(6px, .8vw, 9px);
  border-radius: 999px;
  background: var(--primary-color);
  opacity: .95;
  z-index: 3;
}

/* =========================
   EVENTS
========================= */
.ec__events-head{
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .8vw, 6px);
  margin-bottom: clamp(10px, 1.6vw, 14px);
}

.ec__title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.05rem, 1.1vw + .75rem, 1.4rem);
  line-height: 1.15;
}

.ec__subtitle{
  opacity: .8;
  font-size: clamp(.9rem, .6vw + .75rem, 1.05rem);
}

.ec__list{
  display: grid;
  gap: clamp(8px, 1.2vw, 12px);

  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease;
  will-change: opacity;
}
.ec__list.is-switching{ opacity: 0; }

.ec__item{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: clamp(10px, 1.6vw, 12px);
  padding: clamp(10px, 1.6vw, 14px);
  background: rgba(0,0,0,.08);
}

.ec__item h4{
  margin: 0 0 6px 0;
  font-size: clamp(1rem, .8vw + .8rem, 1.22rem);
  font-weight: 800;
  line-height: 1.15;
}

.ec__item a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
}

.ec__meta{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.2vw, 12px);
  opacity: .85;
  font-size: clamp(.88rem, .5vw + .75rem, 1rem);
}

.ec__empty{
  opacity: .8;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: clamp(10px, 1.6vw, 12px);
  padding: clamp(12px, 2vw, 16px);
}

/* =========================
   RESPONSIVE + ACCESSIBILITY
========================= */
@media (max-width: 420px){
  .ec__day{ min-height: 54px; }
}

/* IMPORTANT:
   If you want transitions to ALWAYS work, do NOT disable them here.
   (Reduce motion users will still appreciate less motion, but you asked for "everything works".)
   So we only disable the list fade & button scale, and keep subtle opacity changes.
*/
/* FINAL OVERRIDE — ensure transitions always run */
.ec__day,
.ec__day::before,
.ec__day::after,
.ec__btn,
.ec__list{
  transition-duration: 250ms !important;
  transition-timing-function: ease !important;
}