/* St. Demetrios — Sunday Bulletin Archive calendar
   Reuses the theme's blue/gold tokens (with fallbacks so it also works
   standalone). Mobile-first: month grid scales down; small screens get a
   compact layout. */
.stdem-cal {
  --c-blue-900: var(--blue-900, #0b3a66);
  --c-blue-700: var(--blue-700, #1a5f9e);
  --c-blue-100: var(--blue-100, #dcecf9);
  --c-blue-50:  var(--blue-50,  #eef6fc);
  --c-gold-600: var(--gold-600, #c9a227);
  --c-gold-100: var(--gold-100, #f6edcf);
  --c-line:     var(--line, #e2e8f0);
  --c-ink:      var(--ink, #1f2933);
  --c-ink-soft: var(--ink-soft, #48525c);
  max-width: 760px;
  margin: 0 auto;
}

/* toolbar: prev / title / next + jump selects */
.stdem-cal-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.stdem-cal-bar button {
  appearance: none;
  border: 1px solid var(--c-line);
  background: #fff;
  color: var(--c-blue-900);
  font-size: 1.1rem;
  line-height: 1;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.stdem-cal-bar button:hover:not(:disabled) {
  background: var(--c-blue-50);
  border-color: var(--c-blue-700);
}
.stdem-cal-bar button:disabled { opacity: .35; cursor: default; }
.stdem-cal-title {
  font-weight: 700;
  color: var(--c-blue-900);
  min-width: 11rem;
  text-align: center;
  font-size: 1.15rem;
  flex: 1 1 auto;
}
.stdem-cal-jump {
  display: flex;
  gap: .4rem;
  flex: 0 0 100%;
  justify-content: center;
  margin-top: .25rem;
}
.stdem-cal-jump select {
  padding: .3rem .5rem;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: #fff;
  color: var(--c-ink);
  font-size: .95rem;
}

/* grid */
.stdem-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.stdem-cal-dow {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding: .35rem 0;
}
.stdem-cal-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .95rem;
  color: var(--c-ink);
  background: var(--c-blue-50);
}
.stdem-cal-cell.empty { background: transparent; }
.stdem-cal-cell.today {
  outline: 2px solid var(--c-gold-600);
  outline-offset: -2px;
}
/* a day that has a bulletin -> a gold link chip */
a.stdem-cal-has {
  background: var(--c-gold-100);
  border-color: var(--c-gold-600);
  color: var(--c-blue-900);
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: transform .1s, box-shadow .15s, background .15s;
}
a.stdem-cal-has:hover,
a.stdem-cal-has:focus {
  background: var(--c-gold-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(11,58,102,.18);
}
a.stdem-cal-has::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold-600);
}
a.stdem-cal-has:hover::after,
a.stdem-cal-has:focus::after { background: #fff; }

.stdem-cal-legend {
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--c-ink-soft);
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: center;
}
.stdem-cal-legend .chip {
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  border-radius: 5px;
  background: var(--c-gold-100);
  border: 1px solid var(--c-gold-600);
}

/* latest bulletin embed (top of widget) */
.stdem-cal-latest {
  margin-bottom: 1.25rem;
}
.stdem-cal-latest-title {
  font-size: 1.15rem;
  color: var(--c-blue-900);
  text-align: center;
  margin: 0 0 .6rem;
}
.stdem-cal-embed-link {
  display: block;
  max-width: 620px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(11, 58, 102, .16);
  transition: box-shadow .15s ease, transform .15s ease;
}
.stdem-cal-embed-link:hover {
  box-shadow: 0 6px 22px rgba(11, 58, 102, .26);
  transform: translateY(-2px);
}
.stdem-cal-embed-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: #fff;
}
/* fallback <object> when no preview image exists */
.stdem-cal-embed {
  width: 100%;
  height: 780px;
  max-height: 85vh;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(11, 58, 102, .10);
  background: #fff;
  display: block;
}
.stdem-cal-latest-link {
  text-align: center;
  margin: .5rem 0 0;
}
.stdem-cal-latest-link a {
  color: var(--c-blue-700);
  font-weight: 600;
  text-decoration: none;
}
.stdem-cal-latest-link a:hover { text-decoration: underline; }

/* helper text between the latest embed and the recent list */
.stdem-cal-intro {
  text-align: center;
  color: var(--c-ink, #33475b);
  margin: 0 0 1.1rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* recent shortcut list (now sits above the calendar) */
.stdem-cal-recent {
  margin: 0 0 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-line);
}
.stdem-cal-recent h3 {
  font-size: 1rem;
  color: var(--c-blue-900);
  margin: 0 0 .5rem;
}
.stdem-cal-recent ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.stdem-cal-recent a {
  display: inline-block;
  padding: .3rem .7rem;
  background: var(--c-blue-100);
  color: var(--c-blue-900);
  border-radius: 999px;
  text-decoration: none;
  font-size: .9rem;
}
.stdem-cal-recent a:hover { background: var(--c-blue-700); color: #fff; }

.stdem-cal-fallback { columns: 2; }

@media (max-width: 560px) {
  .stdem-cal-cell { font-size: .8rem; border-radius: 6px; }
  .stdem-cal-dow { font-size: .6rem; }
  .stdem-cal-grid { gap: 3px; }
  .stdem-cal-title { font-size: 1rem; }
  .stdem-cal-latest-title { font-size: 1.02rem; }
  .stdem-cal-embed { height: 68vh; }
}