/* =====================================================================
   sws-extra.css – additions on top of sws.css
   • "Client Updates" attention button in the menu
   • Client updates page (client_updates.php)
   ===================================================================== */

/* ---------- Client Updates button (menu) ---------- */
.nav-updates, .menu-item > a.nav-updates {
  display: inline-flex; width: auto; justify-content: center; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1.5px solid var(--red); background: var(--red-tint); color: var(--red);
  font: 600 .9rem/1 var(--font); text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
  animation: upd-glow 2.4s ease-in-out infinite;
}
.nav-updates:hover, .nav-updates.is-on, .menu-item > a.nav-updates:hover, .menu-item > a.nav-updates.is-on { background: var(--red); color: #fff; }
.nav-updates:hover .upd-dot, .nav-updates.is-on .upd-dot { background: #fff; }
.nav-updates:hover .upd-dot::after, .nav-updates.is-on .upd-dot::after { border-color: #fff; }
.upd-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.upd-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--red);
  animation: upd-ping 1.6s ease-out infinite;
}
@keyframes upd-ping { 0% { transform: scale(.45); opacity: .9; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes upd-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(254,63,64,0); } 50% { box-shadow: 0 0 0 5px rgba(254,63,64,.12); } }

/* phones / tablets: small button in the header bar, next to the menu icon */
.nav-updates-m { margin-left: auto; min-height: 40px; padding: 0 12px; font-size: .82rem; }
.menu-updates { display: none; }
@media (min-width: 1080px) {
  .nav-updates-m { display: none; }
  .menu-updates { display: block; margin-left: 8px; }
}
@media (max-width: 359px) { .nav-updates-m { padding: 0 10px; gap: 7px; } }
@media (prefers-reduced-motion: reduce) {
  .nav-updates, .upd-dot::after { animation: none; }
}

/* ---------- Client updates page ---------- */
.upd-jump { margin-top: 18px; }
.upd-jump .chip .ic { color: var(--accent-ink); }
.upd-wrap { max-width: 900px; }
.upd-month { scroll-margin-top: calc(var(--header-h) + 16px); }
.upd-month + .upd-month { margin-top: 44px; }
.upd-month-title {
  display: flex; align-items: center; gap: 14px; font-size: clamp(1.2rem, 3.4vw, 1.5rem); margin: 0 0 18px;
}
.upd-month-title::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--red) 40%, transparent); opacity: .5; }
.upd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.upd-item { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; padding: 18px; }
.upd-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 14px; background: var(--tint); color: var(--accent-ink); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.1;
}
.upd-date b { font-size: 1.45rem; color: var(--navy); letter-spacing: 0; }
.upd-body h3 { margin: 0 0 6px; font-size: 1.05rem; }
.upd-text { color: var(--ink); font-size: .97rem; line-height: 1.7; overflow-wrap: anywhere; }
.upd-text a { overflow-wrap: anywhere; }
.upd-new {
  display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.upd-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.upd-links .btn { min-height: 40px; padding: 0 16px; font-size: .86rem; }
.upd-empty { text-align: center; padding: 34px 22px; }
.upd-empty p { font-size: 1rem; }
@media (min-width: 700px) { .upd-item { grid-template-columns: 76px 1fr; padding: 22px 24px; gap: 22px; } .upd-date { width: 76px; height: 76px; } }

/* ---------- Gallery: Gawaksha editions in one horizontal row ---------- */
.ed-rail { position: relative; }
#bulletin .editions {
  display: flex; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 2px; padding: 4px 2px 12px;
  scrollbar-width: thin; scrollbar-color: #c9d4e2 transparent;
}
#bulletin .editions::-webkit-scrollbar { height: 6px; }
#bulletin .editions::-webkit-scrollbar-thumb { background: #c9d4e2; border-radius: 6px; }
#bulletin .editions > li { flex: 0 0 auto; width: 150px; scroll-snap-align: start; }
#bulletin .editions a { height: 100%; }
.ed-nav {
  position: absolute; top: calc(50% - 6px); transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy);
  display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow);
}
.ed-nav:hover { border-color: var(--accent); color: var(--accent-ink); }
.ed-nav.prev { left: -14px; } .ed-nav.next { right: -14px; }
.ed-nav.prev .ic { transform: rotate(90deg); } .ed-nav.next .ic { transform: rotate(-90deg); }
.ed-nav[hidden] { display: none !important; }
@media (min-width: 900px) { .ed-nav { display: inline-flex; } #bulletin .editions > li { width: 160px; } }

/* ---------- Gallery hero photo: show the whole picture, smaller ---------- */
.hero-media.photo.fit img {
  aspect-ratio: auto; object-fit: contain; width: auto; height: auto;
  max-width: 100%; max-height: 260px; margin: 0 auto;
}
@media (min-width: 900px) { .hero-media.photo.fit img { max-height: 340px; max-width: 460px; } }
.ed-hint { margin: 6px 0 0; }