/**
 * Medica Background Ellipses
 * Soft decorative brand circles that scroll WITH the page, behind the content.
 *
 * The layer is position:absolute, anchored (by the plugin) to Uncode's full-height
 * .main-wrapper, and stretched to the FULL VIEWPORT WIDTH (100vw) so the circles
 * bleed off the true screen edges rather than being clipped at the content wrapper.
 * The nine circles hang off the left/right edges, so any hard edge is off-screen.
 *
 * Layering: Uncode wraps each page in an opaque white .page-body article. We move
 * that base white onto html/body (identical) and make .page-body transparent so the
 * layer shows through the open areas; solid sections sit on top of the circles.
 */

html,
body {
  background: #ffffff;
}

article.page-body.style-light-bg {
  background: transparent !important;
}

.medica-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;

  /* Five brand accents (R,G,B). Base scheme; each medica-bg--sN rotates all five. */
  --ca: 148, 153, 255; /* lavender #9499ff */
  --cb: 46, 110, 235;  /* blue     #2e6eeb */
  --cc: 233, 231, 82;  /* yellow   #e9e752 */
  --cd: 250, 150, 143; /* coral    #fa968f */
  --ce: 123, 236, 163; /* green    #7beca3 */
}

.medica-bg__e {
  position: absolute;
  border-radius: 50%;
}

/* Base arrangement (scheme 0). Sizes: 260×1, 160×2, 120×2, 96×2, 72×2.
   Each circle hangs off the left OR right edge; vertical positions (top%) alternate
   sides and spread down the page. Colours are assigned in VERTICAL order a,b,c,d,e,
   a,b,c,d so no two adjacent circles share a colour. */
.medica-bg .e1 { width: 260px; height: 260px; top: 5%;  right: -4%;   background: rgba(var(--ca), .24); } /* lavender */
.medica-bg .e8 { width: 72px;  height: 72px;  top: 14%; left: -1.2%;  background: rgba(var(--cb), .30); } /* blue */
.medica-bg .e2 { width: 160px; height: 160px; top: 26%; left: -3%;    background: rgba(var(--cc), .24); } /* yellow */
.medica-bg .e7 { width: 96px;  height: 96px;  top: 33%; right: -1.5%; background: rgba(var(--cd), .28); } /* coral */
.medica-bg .e4 { width: 120px; height: 120px; top: 44%; right: min(300px, 22vw); background: rgba(var(--ce), .26); } /* green — inset ~300px */
.medica-bg .e6 { width: 96px;  height: 96px;  top: 55%; left: min(300px, 22vw);  background: rgba(var(--ca), .28); } /* lavender — inset ~300px */
.medica-bg .e9 { width: 72px;  height: 72px;  top: 64%; right: -1.2%; background: rgba(var(--cb), .30); } /* blue */
.medica-bg .e3 { width: 160px; height: 160px; top: 74%; left: -3%;    background: rgba(var(--cc), .24); } /* yellow */
.medica-bg .e5 { width: 120px; height: 120px; top: 86%; right: -2.5%; background: rgba(var(--cd), .26); } /* coral */

/* Per-page schemes: rotate all five colours (so a page's mix shifts) and mirror the
   arrangement. Only mirror flips are used (they keep the layer covering the full
   viewport width — no translate, which would pull an edge on-screen). */
.medica-bg--s1 { --ca: 46,110,235;  --cb: 233,231,82;  --cc: 250,150,143; --cd: 123,236,163; --ce: 148,153,255; }
.medica-bg--s1 .medica-bg__inner { transform: scaleX(-1); }
.medica-bg--s2 { --ca: 233,231,82;  --cb: 250,150,143; --cc: 123,236,163; --cd: 148,153,255; --ce: 46,110,235; }
.medica-bg--s2 .medica-bg__inner { transform: scaleY(-1); }
.medica-bg--s3 { --ca: 250,150,143; --cb: 123,236,163; --cc: 148,153,255; --cd: 46,110,235;  --ce: 233,231,82; }
.medica-bg--s3 .medica-bg__inner { transform: scale(-1, -1); }
.medica-bg--s4 { --ca: 123,236,163; --cb: 148,153,255; --cc: 46,110,235;  --cd: 233,231,82;  --ce: 250,150,143; }
.medica-bg--s4 .medica-bg__inner { transform: scaleX(-1); }

/* Smaller screens: scale the circles down so the 260px one isn't overwhelming. */
@media (max-width: 782px) {
  .medica-bg__e { transform: scale(.62); }
}

/* 1.3.0 — circles live in an inner wrapper whose height the inline script locks,
   so their % positions don't move when the page gets shorter. */
.medica-bg__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}


/* ==========================================================================
   1.4.0 — Brand circles in plain navy page headers
   Solid circles from the homepage concept, behind the header content. Positions
   are % of the header (centre points), so they adapt to short or tall headers;
   sizes scale with the viewport. Circles at the edges hang off and are clipped.
   ========================================================================== */
.medica-has-hero-dots { position: relative; overflow: hidden; }
.medica-has-hero-dots > .row-parent { position: relative; z-index: 1; }

.medica-hero-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.medica-hero-dots span {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
/* royal blue — large, top centre-right, partly behind the pill nav */
.medica-hero-dots .d1 { width: clamp(110px, 9vw, 190px); aspect-ratio: 1; left: 55%; top: 12%;  background: #363dd9; }
/* lavender — small, lower middle-right (clear of the left-hand header text) */
.medica-hero-dots .d2 { width: clamp(34px, 3vw, 60px);   aspect-ratio: 1; left: 66%; top: 80%;  background: #a5a9f3; }
/* cream — half off the left edge */
.medica-hero-dots .d3 { width: clamp(56px, 4.5vw, 86px); aspect-ratio: 1; left: 0;   top: 64%;  background: #faffe6; }
/* dark green — half off the right edge */
.medica-hero-dots .d4 { width: clamp(70px, 6vw, 120px);  aspect-ratio: 1; left: 100%; top: 52%; background: #233f16; }
/* deep purple — large, bottom right, cut by the bottom edge */
.medica-hero-dots .d5 { width: clamp(140px, 11vw, 230px); aspect-ratio: 1; left: 81%; top: 100%; background: #2b1d5a; }

/* Tablet/mobile: text runs full width, so keep the big circles to the right
   and drop the small lavender one, which would sit under the text. */
@media (max-width: 959px) {
  .medica-hero-dots .d1 { left: 82%; top: 8%; }
  .medica-hero-dots .d2 { display: none; }
  .medica-hero-dots .d5 { left: 88%; }
}
/* Phones: header text runs edge to edge, so the cream and green edge circles
   would sit behind it (white on cream is unreadable). Keep blue + purple only. */
@media (max-width: 600px) {
  .medica-hero-dots .d3,
  .medica-hero-dots .d4 { display: none; }
}