/* ============================================================================
   Sidekick app embed - drop-in stylesheet
   ----------------------------------------------------------------------------
   Ported from the Sidekick Wellness marketing site's hero embed and re-skinned
   to The New Health Club's palette. Every selector is namespaced `sk-` so
   nothing here can collide with Webflow's generated class names.

   Two modes, one iframe (it is never re-created, so a conversation in progress
   survives the switch):
     windowed    phone-shaped frame parked in the right half of the hero panel
     expanded    body.sk-fs - the frame fills the hero panel edge to edge

   The palette hooks in :root are taken from the client's own Webflow theme so
   the embed reads as part of their site rather than as a pasted-in widget.
   ========================================================================== */

:root{
  --sk-accent:#e10600;
  --sk-accent-deep:#b00000;
  --sk-sand:#ffffff;
  --sk-pearl:#ffffff;
  --sk-shell:#111111;
  --sk-shell-edge:#2a2a2a;
  --sk-font:"Figtree",system-ui,-apple-system,sans-serif;
  --sk-radius:20px;
}

/* ---- Column: live badge and the frame ----------------------------------- */
.sk-embed-col{
  position:absolute;top:50%;right:clamp(1.5rem,4vw,4.5rem);transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:.75rem;
  min-width:0;
  /* Height leads and width follows, so the phone keeps its 9/19.5 ratio while
     still fitting inside the hero panel at any viewport height. */
  --sk-frame-h:min(660px, max(420px, calc(80dvh - 4rem - 7rem)));
}

/* ---- "Live" badge ------------------------------------------------------- */
.sk-live-cue{
  display:inline-flex;align-items:center;gap:.55rem;margin:0;
  font:600 clamp(.78rem,1vw,.9rem)/1.35 var(--sk-font);
  color:var(--sk-pearl);text-align:center;
  background:rgba(20,20,20,.34);border:1px solid rgba(252,251,250,.34);
  border-radius:0;padding:.45rem .9rem;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.sk-live-cue strong{color:var(--sk-pearl);font-weight:800}
.sk-live-dot{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--sk-accent);
  box-shadow:0 0 0 0 rgba(225,6,0,.6);animation:skLiveDot 2s ease-out infinite}
@keyframes skLiveDot{
  0%{box-shadow:0 0 0 0 rgba(225,6,0,.55)}
  70%{box-shadow:0 0 0 9px rgba(225,6,0,0)}
  100%{box-shadow:0 0 0 0 rgba(225,6,0,0)}
}

/* The device used to stand on a soft elliptical floor ring, with a halo and a
   contact shadow to sell it. That whole composition is gone: the phone stands
   on its own and is grounded by its own drop shadow alone. */

/* ---- The app window ----------------------------------------------------- */
.sk-frame-wrap{
  position:relative;z-index:1;min-width:0;
  background:var(--sk-shell);border:1px solid var(--sk-shell-edge);
  border-radius:var(--sk-radius);overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  width:auto;height:var(--sk-frame-h);aspect-ratio:9/19.5;margin:0 auto}
#skAppFrame{display:block;width:100%;height:100%;border:0;background:var(--sk-shell)}

/* ---- Expand / collapse toggle ------------------------------------------- */
.sk-fs-toggle{
  position:absolute;top:14px;right:14px;z-index:5;
  display:inline-flex;align-items:center;justify-content:center;
  color:#f5f5f5;background:rgba(20,20,20,.72);
  border:1px solid rgba(255,255,255,.18);border-radius:0;
  padding:.5rem;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.sk-fs-toggle:hover{background:rgba(45,45,45,.9);border-color:rgba(255,255,255,.34)}
.sk-fs-toggle svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-fs-toggle .sk-icon-compress{display:none}
body.sk-fs .sk-fs-toggle .sk-icon-expand{display:none}
body.sk-fs .sk-fs-toggle .sk-icon-compress{display:block}
/* Attention blink, fired when an "Ask" button expands the app, so the eye is
   led to the thing that just changed instead of hunting for it. */
.sk-fs-toggle.sk-attn{animation:skAttn .8s ease-in-out 5}
@keyframes skAttn{
  0%,100%{transform:scale(1);background:rgba(20,20,20,.72);
    border-color:rgba(255,255,255,.18);box-shadow:0 0 0 0 rgba(225,6,0,0)}
  50%{transform:scale(1.12);background:var(--sk-accent);border-color:var(--sk-accent);
    box-shadow:0 0 0 7px rgba(225,6,0,.4)}
}

/* ---- Expanded: the app takes over the hero panel -------------------------
   It expands to the panel rather than breaking out to 100vw, so it stays
   inside a box the client's own CSS already sizes and the layout cannot be
   thrown off by a later Webflow change to the surrounding grid. */
body.sk-fs .sk-embed-col{
  position:absolute;inset:0;transform:none;
  align-items:stretch;justify-content:stretch;gap:0}
body.sk-fs .sk-frame-wrap{
  width:100%;height:100%;aspect-ratio:auto;margin:0;
  border-radius:var(--radius--radius-16,16px)}
body.sk-fs .sk-live-cue{display:none}
/* Fade the hero title out from under the app rather than leaving it to show
   through around the frame's edges. */
body.sk-fs .hero-title,
body.sk-fs .sk-hero-cue{opacity:0;transition:opacity .35s ease;pointer-events:none}

/* ---- "Ask Sidekick" call to action -------------------------------------- */
.sk-ask-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;
  margin-top:clamp(1.75rem,3vw,2.75rem)}
.sk-ask-btn{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  font:600 1rem/1 var(--sk-font);color:var(--sk-pearl);
  background:var(--sk-accent);border:0;border-radius:0;padding:.9rem 1.6rem;
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;
  max-width:100%;gap:.55rem;box-shadow:0 10px 30px rgba(225,6,0,.28);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.sk-ask-btn:hover{transform:translateY(-1px);background:var(--sk-accent-deep);
  box-shadow:0 14px 38px rgba(225,6,0,.35)}
.sk-ask-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-ask-btn .sk-ask-q{font-weight:500}
.sk-ask-btn .sk-ask-cta{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}

/* ---- Hero prompt sitting under the title -------------------------------- */
.sk-hero-cue{margin-top:1.5rem;transition:opacity .35s ease}

/* ---- Loading veil, shown while a channel swap reloads the iframe -------- */
.sk-loading{position:absolute;inset:0;z-index:6;display:none;place-items:center;
  background:rgba(20,20,20,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
body.sk-switching .sk-loading{display:grid}
.sk-loading span{display:block;font:600 .9rem/1.4 var(--sk-font);color:var(--sk-pearl)}
.sk-loading i{display:block;width:26px;height:26px;margin:0 auto .7rem;border-radius:50%;
  border:2px solid rgba(252,251,250,.25);border-top-color:var(--sk-accent);
  animation:skSpin .8s linear infinite}
@keyframes skSpin{to{transform:rotate(360deg)}}

/* ---- Responsive ---------------------------------------------------------
   Below 992px the hero panel is too narrow to hold the phone beside the
   title, so the embed leaves the panel and becomes its own full-width block
   underneath it. The JS moves the node; these rules restyle it in place. */
@media (max-width:991px){
  .sk-embed-col{position:static;transform:none;margin:2.5rem auto 0;
    --sk-frame-h:min(620px, 78vh)}
  body.sk-fs .sk-embed-col{position:static;inset:auto}
  body.sk-fs .sk-frame-wrap{height:min(78vh,720px);aspect-ratio:auto}
  body.sk-fs .hero-title{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .sk-live-dot,.sk-fs-toggle.sk-attn,.sk-loading i{animation:none}
}

/* Once the visitor has actually used the app, stop pointing at it. */
html.sk-engaged .sk-live-cue{opacity:0;transition:opacity .6s ease;pointer-events:none}