/* =========================================================
   Site-wide additions that are not part of any one page:
   the buzz-word ticker, the "Follow us" row above the footer,
   and the floating WhatsApp button.

   Loaded on every page, because two of the three are.
   ========================================================= */

/* ---- Buzz-word ticker -------------------------------------------------
   The strip under the hero. The markup holds the phrases twice; the track
   slides left by exactly its own width, at which point the second copy is
   sitting precisely where the first began, so restarting the animation is
   invisible and the loop has no seam.

   Two tracks side by side rather than one doubled list: each is animated
   by the same amount, so the maths does not depend on how many phrases
   there are and the clinic can add one without touching this file.
   --------------------------------------------------------------------- */
.joelle-ticker {
  display: flex;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding: 14px 0;
  /* The strip is a decorative band, not a scroll region — nobody should be
     able to drag it out of alignment. */
  user-select: none;
}
.joelle-ticker-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* The track must not shrink to fit the strip: it is meant to overflow. */
  white-space: nowrap;
  animation: joelle-ticker-scroll 38s linear infinite;
}
.joelle-ticker-track li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 28px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}
/* A gold dot between phrases, on the leading edge of each so the spacing
   stays even where the two copies meet. */
.joelle-ticker-track li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 28px;
  border-radius: 50%;
  background: var(--primary);
  flex: 0 0 auto;
}

@keyframes joelle-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Hovering pauses it, so a phrase can actually be read. */
.joelle-ticker:hover .joelle-ticker-track {
  animation-play-state: paused;
}

@media (max-width: 600px) {
  .joelle-ticker-track li { font-size: 11px; padding: 0 18px; }
  .joelle-ticker-track li::before { margin-right: 18px; }
}

/* ---- "Follow us" ------------------------------------------------------
   A quiet band above the footer. Only the accounts that have a URL in
   inc/clinic-info.php are rendered, so this never shows a dead icon.
   --------------------------------------------------------------------- */
.joelle-social {
  background: var(--cream);
  padding: 54px 0;
  text-align: center;
}
.joelle-social-title {
  margin: 0 0 24px;
  font-size: 20px;
}
.joelle-social-list {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.joelle-social-list li { margin: 0; }
.joelle-social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  /* Brushed gold rather than a flat fill: two stops of the brand gold with a
     lighter band across the middle, so the disc catches light like the logo
     does. */
  background: linear-gradient(145deg, #f2d089 0%, var(--primary) 46%, #c89a33 100%);
  color: #2a1a00;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  /* At rest: gold discs with a plain drop shadow and no halo. The inset
     highlight is what keeps them looking metallic rather than printed. The
     glow is a hover state only — lit all the time, five haloes competing
     with each other turned a quiet footer band into a light show. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .5) inset,
    0 2px 6px rgba(11, 1, 0, .2);
}

/* One colour per network, taken from its own brand, so that on hover each
   disc lights up in the colour you already associate with it. */
.joelle-social-instagram { --glow: rgba(221, 42, 123, .95); }
.joelle-social-facebook  { --glow: rgba(24, 119, 242, .95); }
.joelle-social-x         { --glow: rgba(90, 90, 100, .95); }
.joelle-social-linkedin  { --glow: rgba(10, 102, 194, .95); }
.joelle-social-youtube   { --glow: rgba(255, 0, 0, .95); }

.joelle-social-link svg {
  position: relative;
  width: 22px;
  height: 22px;
  /* Stockie sets fill on header SVGs and strokes elsewhere; these icons are
     solid shapes, so they say so themselves rather than relying on which
     rule wins. */
  fill: currentColor;
  stroke: none;
}

.joelle-social-link:hover,
.joelle-social-link:focus-visible {
  transform: translateY(-3px) scale(1.06);
  color: #2a1a00;
  /* The glow, only here. Two radii of the network's own colour so the halo
     falls off softly instead of ending on a hard edge. */
  filter: brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .65) inset,
    0 6px 14px rgba(11, 1, 0, .26),
    0 0 22px -2px var(--glow, rgba(230, 188, 86, .95)),
    0 0 48px -6px var(--glow, rgba(230, 188, 86, .8));
}

/* ---- Floating WhatsApp button ----------------------------------------
   Bottom-right on every page. A plain link to wa.me — no chat widget, no
   third-party script.
   --------------------------------------------------------------------- */
.joelle-whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(11, 1, 0, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.joelle-whatsapp:hover,
.joelle-whatsapp:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(11, 1, 0, .28);
  color: var(--ink);
}
.joelle-whatsapp-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.joelle-whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  /* WhatsApp's own green: the button is recognised by its colour before it
     is read, which is the whole point of it being there. */
  background: #25d366;
  color: #fff;
  flex: 0 0 auto;
}
.joelle-whatsapp-icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  stroke: none;
}

@media (max-width: 600px) {
  /* The label costs more width than it is worth on a phone, where it would
     sit over the content. The icon alone is unmistakable. */
  .joelle-whatsapp {
    right: 16px;
    bottom: 16px;
    padding: 6px;
    gap: 0;
  }
  .joelle-whatsapp-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* A strip of text sliding past continuously is exactly what this setting
     is asking us not to do. The phrases stay, stationary, and wrap. */
  .joelle-ticker { overflow: hidden; }
  .joelle-ticker-track { animation: none; }
  .joelle-ticker-track:nth-child(2) { display: none; }
  .joelle-social-link,
  .joelle-whatsapp { transition: none; }
}

/* ---- Footer columns ---------------------------------------------------
   Stockie lays its footer columns out as floats. Four of them fill the row
   exactly, so they wrapped tidily — but the Treatments split took the
   footer to seven, and floats of uneven height snag on the tallest one
   above them instead of starting a clean row ("Weight Management" would
   hang off the bottom of "Surgical").

   Flex wrapping gives honest rows: four, then the remaining three. The
   float stays in the markup for Stockie's own styling, and is simply
   ignored once the parent is a flex container.
   --------------------------------------------------------------------- */
.site-footer .widgets.vc_row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
}
/* Stockie clears its float row with an empty div, which becomes a flex item
   and can force an extra line. */
.site-footer .widgets.vc_row > .clear { display: none; }