/*
 * FizioVan sketch-watercolor liquid cards
 *
 * Progressive enhancement for:
 *   .design-care .wait-card
 *   .design-care .service
 *   .design-care .service-summary-card
 *
 * Load this stylesheet after design-lab.css. The companion script adds the
 * `sketch-liquid-ready` root class only after it has installed the SVG layer.
 */

.sketch-liquid-card {
  --sketch-liquid-ink: #17352d;
  --sketch-liquid-copy: #405f56;
  --sketch-liquid-link: #235f50;
  --sketch-liquid-badge: #8b3f2c;
  --sketch-liquid-line: #6f9f91;
  --sketch-liquid-line-soft: #88b9aa;
  position: relative;
  isolation: isolate;
}

/* Disable the original rectangular/pseudo-element fill after enhancement. */
html.sketch-liquid-ready .sketch-liquid-card::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.sketch-liquid-layer {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  display: block !important;
  overflow: visible;
  pointer-events: none;
  transform: translate3d(0, calc(100% + 34px), 0);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}

/* Keep real content above the decorative wash without altering link geometry. */
.sketch-liquid-card > :not(.sketch-liquid-layer) {
  z-index: 1;
}

.sketch-liquid-card.wait-card > :not(.sketch-liquid-layer),
.sketch-liquid-card.service > :not(.sketch-liquid-layer) {
  position: relative;
}

.sketch-liquid-contrast-layer {
  position: absolute !important;
  inset: 0;
  z-index: 2 !important;
  display: block !important;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(0 110%, 100% 110%, 100% 100%, 0 100%);
}

.sketch-liquid-contrast-copy {
  position: absolute !important;
  margin: 0 !important;
  color: #fff !important;
  transform: none !important;
  transition: none !important;
}

html.sketch-liquid-ready .wait-card .sketch-liquid-contrast-layer
  :is(.wait-num, .wait-priority, .wait-date, .wait-desc) {
  color: #fff !important;
  transition: none !important;
}

html.sketch-liquid-ready .wait-card .sketch-liquid-contrast-layer .wait-divider {
  background: rgba(255, 255, 255, .4) !important;
  transition: none !important;
}

html.sketch-liquid-ready .wait-card .sketch-liquid-contrast-layer .wait-priority .marker {
  background: #fff;
}

.sketch-liquid-moving .sketch-liquid-layer {
  will-change: transform;
}

.sketch-liquid-moving .sketch-liquid-contrast-layer {
  will-change: clip-path;
}

.sketch-liquid-surface {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  display: block;
  overflow: visible;
}

.sketch-liquid-surface-fill {
  fill: #d9eee7;
  shape-rendering: geometricPrecision;
}

.sketch-liquid-surface-line,
.sketch-liquid-surface-echo {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

.sketch-liquid-surface-line {
  stroke: var(--sketch-liquid-line);
  stroke-width: 1.05;
  stroke-dasharray: 31 2.5 9 1.8 18 3.5;
  opacity: .58;
}

.sketch-liquid-surface-echo {
  stroke: var(--sketch-liquid-line-soft);
  stroke-width: .72;
  stroke-dasharray: 8 2.2 23 3.4 5 1.7;
  opacity: .38;
}

.sketch-liquid-body {
  position: absolute;
  top: 31px;
  left: 0;
  right: 0;
  height: calc(100% + 96px);
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, .34) 0 7%, transparent 25%),
    radial-gradient(circle at 82% 27%, rgba(94, 157, 136, .12) 0 8%, transparent 31%),
    radial-gradient(circle at 46% 74%, rgba(255, 255, 255, .22) 0 9%, transparent 32%),
    linear-gradient(180deg, #d9eee7 0%, #c3e3d9 58%, #b9ded2 100%);
}

.sketch-liquid-body::before,
.sketch-liquid-body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sketch-liquid-body::before {
  background:
    repeating-linear-gradient(104deg, rgba(23, 53, 45, .018) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(7deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 11px);
  opacity: .72;
}

.sketch-liquid-body::after {
  background:
    radial-gradient(ellipse at 22% 34%, rgba(70, 137, 116, .075), transparent 34%),
    radial-gradient(ellipse at 71% 62%, rgba(255, 255, 255, .19), transparent 37%);
  opacity: .9;
}

/* Waiting-time cards borrow the urgency colour; a clipped white copy of the
 * typography follows this same wash while the original remains dark. */
html.sketch-liquid-ready .wait-card {
  --sketch-liquid-line: color-mix(in srgb, var(--c) 72%, #17352d);
  --sketch-liquid-line-soft: color-mix(in srgb, var(--c) 48%, #ffffff);
}

html.sketch-liquid-ready .wait-card .sketch-liquid-surface-fill {
  fill: color-mix(in srgb, var(--c) 75%, #17352d);
}

html.sketch-liquid-ready .wait-card .sketch-liquid-body {
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, .1) 0 7%, transparent 25%),
    radial-gradient(circle at 82% 27%, color-mix(in srgb, var(--c) 14%, transparent) 0 8%, transparent 31%),
    radial-gradient(circle at 46% 74%, rgba(255, 255, 255, .07) 0 9%, transparent 32%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) 75%, #17352d) 0%,
      color-mix(in srgb, var(--c) 68%, #17352d) 58%,
      color-mix(in srgb, var(--c) 62%, #17352d) 100%
    );
}

/* The real content remains dark. Waiting cards add a clipped white duplicate
 * above it so each glyph changes colour exactly where the wash crosses it. */
html.sketch-liquid-ready .sketch-liquid-card,
html.sketch-liquid-ready .sketch-liquid-card:is(:hover, .is-liquid-hover, .sketch-liquid-active) {
  color: var(--sketch-liquid-ink) !important;
}

html.sketch-liquid-ready .wait-card :is(.wait-num, .wait-priority, .wait-date, .wait-selfpay-copy),
html.sketch-liquid-ready .service :is(.service-name, .service-num),
html.sketch-liquid-ready .service-summary-card :is(h2, h3),
html.sketch-liquid-ready .service-summary-card :is(h2, h3)::before {
  color: var(--sketch-liquid-ink) !important;
}

html.sketch-liquid-ready .wait-card .wait-desc,
html.sketch-liquid-ready .service .service-desc,
html.sketch-liquid-ready .service-summary-card p {
  color: var(--sketch-liquid-copy) !important;
}

html.sketch-liquid-ready .service .service-cta,
html.sketch-liquid-ready .service-summary-card a {
  color: var(--sketch-liquid-link) !important;
  transform: none !important;
}

html.sketch-liquid-ready .service .service-new-badge,
html.sketch-liquid-ready .service-summary-card .service-new-badge {
  color: var(--sketch-liquid-badge) !important;
}

html.sketch-liquid-ready .wait-card .wait-divider {
  background: rgba(23, 53, 45, .22) !important;
}

/* Neutralize the older hover lift; the engine owns the enhanced active state. */
html.sketch-liquid-ready .sketch-liquid-card:is(:hover, .is-liquid-hover) {
  border-color: var(--line, #d2e3dc) !important;
  box-shadow: none !important;
  transform: none !important;
}

html.sketch-liquid-ready .sketch-liquid-card {
  transition:
    transform .46s cubic-bezier(.22, .61, .36, 1),
    border-color .34s ease,
    box-shadow .46s cubic-bezier(.22, .61, .36, 1) !important;
}

html.sketch-liquid-ready .sketch-liquid-card.sketch-liquid-active:not(.wait-card) {
  border-color: var(--line, #d2e3dc) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Waiting-time panels fill fully but remain informational, so they never lift. */
html.sketch-liquid-ready .wait-card.sketch-liquid-active {
  border-color: #b6d7cd !important;
  box-shadow: 0 11px 28px rgba(30, 82, 66, .07) !important;
  transform: none !important;
}

@media (hover: none), (pointer: coarse) {
  html.sketch-liquid-ready .sketch-liquid-card.sketch-liquid-active {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.sketch-liquid-ready .sketch-liquid-card,
  html.sketch-liquid-ready .sketch-liquid-layer,
  html.sketch-liquid-ready .sketch-liquid-card * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  html.sketch-liquid-ready .sketch-liquid-card.sketch-liquid-active {
    transform: none !important;
  }

  .sketch-liquid-moving .sketch-liquid-layer {
    will-change: auto;
  }
}

@media (forced-colors: active) {
  .sketch-liquid-layer {
    display: none !important;
  }

  html.sketch-liquid-ready .sketch-liquid-card,
  html.sketch-liquid-ready .sketch-liquid-card:is(:hover, .is-liquid-hover, .sketch-liquid-active) {
    border-color: ButtonText !important;
    background: Canvas !important;
    color: CanvasText !important;
    box-shadow: none !important;
    transform: none !important;
    forced-color-adjust: auto;
  }

  .sketch-liquid-contrast-layer {
    display: none !important;
  }

  html.sketch-liquid-ready .sketch-liquid-card :is(
    .wait-num,
    .wait-priority,
    .wait-date,
    .wait-desc,
    .service-name,
    .service-num,
    .service-desc,
    .service-cta,
    .service-new-badge,
    h2,
    h3,
    p
  ),
  html.sketch-liquid-ready .service-summary-card :is(h2, h3)::before {
    color: CanvasText !important;
  }

  html.sketch-liquid-ready .sketch-liquid-card a {
    color: LinkText !important;
  }

  html.sketch-liquid-ready .wait-card .wait-divider {
    background: CanvasText !important;
  }
}

@media print {
  .sketch-liquid-layer {
    display: none !important;
  }

  html.sketch-liquid-ready .sketch-liquid-card {
    box-shadow: none !important;
    transform: none !important;
  }
}