/* ==========================================================================
   site-extras.css
   Styles for the CMS-driven extras: marquee, news box, popup, and the
   dynamic program page. Loaded after style.css on every page and also by the
   admin site (live preview), so it only relies on the design tokens.
   ========================================================================== */

/* ---------------------------------------------------------------- Buttons */
.bab-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:20px; padding:13px 28px; border-radius:100px; border:0;
  background:var(--acc, var(--coral)); color:var(--acc-fg, #fff);
  font-family:var(--font-display); font-weight:700; font-size:1rem; cursor:pointer;
  box-shadow:0 7px 0 0 rgba(0,0,0,.18);
  transition:transform .25s var(--ease-bounce), box-shadow .25s var(--ease-out);
  text-decoration:none;
}
.bab-btn:hover{ transform:translateY(-3px); box-shadow:0 10px 0 0 rgba(0,0,0,.18); }
.bab-btn:active{ transform:translateY(2px); box-shadow:0 3px 0 0 rgba(0,0,0,.18); }

/* ------------------------------------------------------------------- Tags */
.bab-tag{
  display:inline-flex; align-items:center; flex:0 0 auto;
  font-family:var(--font-display); font-weight:700; font-size:.72rem; line-height:1;
  letter-spacing:.3px; text-transform:uppercase;
  padding:5px 10px; border-radius:100px;
  background:var(--tag-bg, var(--sky)); color:var(--tag-fg, #fff);
}

/* ---------------------------------------------------------------- Marquee */
.bab-marquee{
  position:relative; z-index:101; display:flex; align-items:stretch; overflow:hidden;
  background:var(--acc, var(--coral)); color:var(--acc-fg, #fff);
  font-weight:800; font-size:.92rem;
}
.bab-marquee__badge{
  flex:0 0 auto; display:flex; align-items:center; gap:7px;
  padding:0 16px 0 var(--edge, 20px); background:rgba(0,0,0,.2);
  font-family:var(--font-display); font-weight:700; font-size:.88rem; letter-spacing:.3px;
  position:relative; z-index:2;
}
.bab-marquee__bug{ font-size:1rem; line-height:1; }
.bab-marquee__view{
  flex:1 1 auto; min-width:0; overflow:hidden; display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.bab-marquee__track{
  display:inline-flex; white-space:nowrap; will-change:transform;
  animation:babMarquee var(--dur, 40s) linear infinite;
}
.bab-marquee:hover .bab-marquee__track,
.bab-marquee:focus-within .bab-marquee__track{ animation-play-state:paused; }
.bab-marquee__group{ display:inline-flex; align-items:center; flex:0 0 auto; }
.bab-marquee__item{ display:inline-flex; align-items:center; gap:9px; padding:10px 0; }
.bab-marquee__sep{ padding:0 22px; opacity:.55; }
.bab-marquee__link{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.bab-marquee__link:hover{ text-decoration-thickness:3px; }
.bab-marquee .bab-tag{ box-shadow:0 0 0 2px rgba(255,255,255,.55); }
@keyframes babMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
html[dir="rtl"] .bab-marquee__track{ animation-direction:reverse; }

@media (prefers-reduced-motion: reduce){
  .bab-marquee__track{ animation:none !important; }
  .bab-marquee__view{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .bab-marquee__group[aria-hidden="true"]{ display:none; }
}

/* ----------------------------------------------------------- News box (nav) */
.bab-newswrap{ position:relative; }
.bab-newsbtn{
  position:relative; width:44px; height:44px; border-radius:50%; border:0; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cream-deep); color:var(--ink);
  transition:background .2s, box-shadow .2s, transform .25s var(--ease-bounce);
}
.bab-newsbtn:hover{ background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.12); transform:translateY(-2px); }
.bab-newsbtn[aria-expanded="true"]{ background:var(--coral); color:#fff; }
.bab-newsbtn svg{ width:22px; height:22px; transform-origin:50% 0; }
.bab-newsbtn.is-ringing svg{ animation:babRing 1.4s ease 1; }
.bab-newsbtn .bab-badge{
  position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:var(--coral); color:#fff; border:2px solid var(--cream);
  font:800 .68rem/16px var(--font-display); text-align:center;
}
.bab-newsbtn[aria-expanded="true"] .bab-badge{ display:none; }
@keyframes babRing{
  0%,100%{ transform:rotate(0); } 15%{ transform:rotate(14deg); } 30%{ transform:rotate(-12deg); }
  45%{ transform:rotate(9deg); } 60%{ transform:rotate(-6deg); } 75%{ transform:rotate(3deg); }
}
.bab-newspanel{
  position:absolute; right:0; top:calc(100% + 12px); z-index:120;
  width:min(410px, 92vw); max-height:min(72vh, 540px); overflow:auto;
  background:#fff; color:var(--ink); border-radius:var(--radius-md, 18px);
  border:2px solid rgba(43,38,32,.06);
  box-shadow:0 24px 50px -16px rgba(43,38,32,.4);
  animation:babDrop .22s var(--ease-out);
}
.bab-newspanel[hidden]{ display:none; }
@keyframes babDrop{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.bab-news-head{
  position:sticky; top:0; background:#fff; z-index:1;
  padding:14px 18px 10px; font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  border-bottom:2px solid var(--cream-deep);
}
.bab-news-item{ display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(43,38,32,.07); }
.bab-news-item:last-child{ border-bottom:0; }
.bab-news-item.is-new{ background:linear-gradient(90deg, var(--coral-tint), transparent 70%); }
.bab-news-item--popup{ background:var(--cream-deep); }
.bab-news-item--popup.is-new{ background:var(--cream-deep); }
.bab-news-thumb{ flex:0 0 64px; width:64px; height:64px; border-radius:12px; overflow:hidden; background:#fff; }
.bab-news-thumb img{ width:100%; height:100%; object-fit:cover; }
.bab-news-thumb.is-logo img{ object-fit:contain; padding:8px; }
.bab-news-body{ min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.bab-news-title{ font-family:var(--font-display); font-size:1.02rem; line-height:1.25; }
.bab-news-desc{ color:var(--ink-soft); font-size:.92rem; line-height:1.5; white-space:pre-line; }
.bab-news-link{ font-weight:800; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.bab-news-link:hover{ color:var(--coral-dark); }
.bab-news-text{ font-weight:800; line-height:1.4; }
.bab-news-more{ font-family:var(--font-display); font-weight:700; color:var(--coral-dark); font-size:.92rem; }
.bab-news-more::after{ content:" \2192"; }
.bab-news-empty{ padding:22px 18px; color:var(--ink-soft); }

@media (max-width:640px){
  .bab-newspanel{ position:fixed; left:12px; right:12px; top:var(--bab-panel-top, 70px); width:auto; max-height:calc(100dvh - var(--bab-panel-top, 70px) - 86px); }
  /* the sticky bottom bar already carries "Schedule a Visit", so make room for the bell */
  body.has-newsbox .site-header .nav-actions > .btn-sm{ display:none; }
}

/* ------------------------------------------------------------------ Popup */
.bab-popup{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(43,38,32,.52); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:babFade .25s ease;
}
.bab-popup[hidden]{ display:none; }
.bab-popup__card{
  position:relative; width:min(440px, 100%); max-height:calc(100dvh - 36px); overflow:auto;
  background:#fff; color:var(--ink); border-radius:var(--radius-lg, 28px);
  border-top:9px solid var(--acc, var(--coral));
  box-shadow:0 40px 80px -24px rgba(0,0,0,.55);
  animation:babPop .45s var(--ease-bounce);
}
.bab-popup__close{
  position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%;
  border:0; background:rgba(255,255,255,.94); color:var(--ink); font-size:1.5rem; line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.2); cursor:pointer; transition:transform .2s var(--ease-bounce);
}
.bab-popup__close:hover{ transform:rotate(90deg) scale(1.08); }
.bab-popup__media{ aspect-ratio:16/10; background:var(--cream-deep); overflow:hidden; }
.bab-popup__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.bab-popup__media.is-logo{ display:flex; align-items:center; justify-content:center; background:var(--coral-tint); aspect-ratio:16/8; }
.bab-popup__media.is-logo img{ width:auto; height:70%; object-fit:contain; }
.bab-popup__body{ padding:22px 26px 28px; text-align:center; }
.bab-popup__title{ font-family:var(--font-display); font-size:1.55rem; line-height:1.15; }
.bab-popup__desc{ margin-top:10px; color:var(--ink-soft); line-height:1.6; white-space:pre-line; }
@keyframes babFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes babPop{ from{ opacity:0; transform:translateY(20px) scale(.92); } to{ opacity:1; transform:none; } }

/* Inline variant used by the admin live preview */
.bab-popup--inline{
  position:relative; inset:auto; z-index:auto; padding:0; background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none; animation:none; display:block;
}
.bab-popup--inline .bab-popup__card{ animation:none; margin:0 auto; }
.bab-popup--inline .bab-popup__close{ pointer-events:none; }

/* ------------------------------------------------- Program page extras */
.pd-extra h2{ margin-bottom:18px; }
.pd-extra p{ font-size:1.08rem; line-height:1.75; color:var(--ink-soft); margin-bottom:14px; }
.pd-notfound{ min-height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:150px var(--edge) 80px; }
.pd-notfound h1{ font-size:2rem; margin-bottom:12px; }
.pd-notfound p{ color:var(--ink-soft); margin-bottom:24px; }

/* ------------------------------------------------------ Google review prompt */
.bab-review__stars svg{ width:96px; height:18px; display:block; fill:var(--sun, #F6B73C); }
.bab-review__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bab-review__text b{ font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.2; }
.bab-review__text small{ font-size:.82rem; line-height:1.3; opacity:.75; }
.bab-review--hero{
  display:inline-flex; align-items:center; gap:14px; margin-top:22px; padding:11px 20px 11px 16px;
  background:#fff; color:var(--ink); border-radius:100px; text-decoration:none;
  border:2px solid rgba(43,38,32,.08); box-shadow:0 8px 22px -12px rgba(43,38,32,.35);
  transition:transform .25s var(--ease-bounce), box-shadow .25s var(--ease-out);
}
.bab-review--hero:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -12px rgba(43,38,32,.4); }
.bab-review--contact{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px; margin-top:28px; padding:18px 20px;
  border-radius:var(--radius-md, 18px); background:rgba(255,255,255,.08); border:2px dashed rgba(255,255,255,.28); color:#fff;
}
.bab-review--contact .bab-review__text{ flex:1 1 200px; }
.bab-review__btn{
  flex:0 0 auto; padding:11px 22px; border-radius:100px; background:var(--sun, #F6B73C); color:var(--ink, #2B2620);
  font-family:var(--font-display); font-weight:700; text-decoration:none;
  box-shadow:0 5px 0 0 rgba(0,0,0,.22); transition:transform .25s var(--ease-bounce), box-shadow .25s var(--ease-out);
}
.bab-review__btn:hover{ transform:translateY(-2px); box-shadow:0 8px 0 0 rgba(0,0,0,.22); }
@media (max-width:640px){
  .bab-review--hero{ display:flex; border-radius:22px; }
  .bab-review--contact{ text-align:left; }
  .bab-review__btn{ width:100%; text-align:center; }
}