/* Shiloh 2026 countdown ribbon (homepage).
   Sits just above the Prayer Request / Plan to Visit bar. After the event, remove this file's <link>,
   the #shl-ribbon block and the two scripts at the end of index.html. */
.shl-ribbon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--shl-offset, 70px);
  z-index: 9999998;
  color: #fff;
  font-family: 'Lato', sans-serif;
  background: linear-gradient(100deg, #6e0b10 0%, #b3151d 45%, #d4421c 78%, #ee7d1f 100%);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
  opacity: 0;
}
.shl-ribbon.shl-ready { opacity: 1; }
/* The shine is clipped by its own box so the calendar menu can open above the ribbon */
.shl-shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.shl-shine i {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-100%);
}
.shl-inner {
  position: relative;
  max-width: 1200px;
  min-height: 64px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.shl-title { line-height: 1.1; }
.shl-title b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 28px; letter-spacing: .06em; }
.shl-title b em { font-style: normal; color: #ffd27a; }
.shl-title small { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .88; }

.shl-clock { display: flex; gap: 8px; perspective: 600px; }
.shl-unit { display: flex; align-items: baseline; gap: 5px; padding: 5px 12px; border-radius: 10px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .16); }
.shl-unit small { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.shl-roll { position: relative; display: inline-block; overflow: hidden; font-family: 'Bebas Neue', sans-serif; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; vertical-align: bottom; }
.shl-roll > span { display: block; }
.shl-roll > span + span { position: absolute; inset: 0; }

.shl-live { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.shl-pulse { width: 11px; height: 11px; flex: none; border-radius: 50%; background: #fff; animation: shl-pulse 1.6s infinite; }
@keyframes shl-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }

.shl-cal-wrap { position: relative; }
.shl-cal { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border: 0; border-radius: 999px; background: #fff; color: #b3151d; font: 700 13px/1 'Lato', sans-serif; letter-spacing: .03em; white-space: nowrap; cursor: pointer; }
.shl-cal:hover { transform: translateY(-1px); }
.shl-cal svg { width: 16px; height: 16px; flex: none; }
.shl-cal .shl-caret { width: 12px; height: 12px; margin-left: -2px; transition: transform .2s; }
.shl-cal[aria-expanded="true"] .shl-caret { transform: rotate(180deg); }

/* Opens upwards, since the ribbon sits at the bottom of the screen */
.shl-cal-menu { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 230px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5); transform-origin: 100% 100%; }
.shl-cal-menu a, .shl-cal-menu a:hover { display: block; padding: 10px 12px; border-radius: 9px; color: #2b0d0d; font-size: 14px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.shl-cal-menu a:hover, .shl-cal-menu a:focus-visible { background: #fbeee6; color: #b3151d; }
.shl-cal-menu small { display: block; font-size: 11.5px; font-weight: 400; color: #7a5a50; }

.shl-ribbon a:focus-visible, .shl-cal:focus-visible { outline: 3px solid #f7a83a; outline-offset: 2px; }
.shl-cal-menu a:focus-visible { outline-offset: -2px; }

@media (max-width: 767px) {
  .shl-inner { flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px 10px; }
  .shl-title { width: 100%; text-align: center; }
  .shl-title b { font-size: 21px; }
  .shl-title small { font-size: 10px; letter-spacing: .1em; }
  .shl-clock { gap: 6px; }
  .shl-unit { flex-direction: column; align-items: center; gap: 0; min-width: 54px; padding: 4px 6px; }
  .shl-unit small { font-size: 8.5px; letter-spacing: .12em; }
  .shl-roll { font-size: 26px; }
  .shl-cal { padding: 10px; }
  .shl-cal span, .shl-cal .shl-caret { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shl-pulse { animation: none; }
}