/* ============================================================
 * Violet trial — v2 colourway
 * The brand's sky-blue accent is repointed to violet at the
 * TOKEN level so it cascades through every accent surface:
 * CTAs, highlight pills, feature icons, eyebrows, link hovers,
 * focus rings, footer hovers, etc.
 *
 * Scoped to [data-theme="violet"] so the canonical sky-blue
 * palette is untouched on v1 pages.
 *
 * Sub-product tokens (--ge-sync-*, --ge-classroom-*, --ge-one-*)
 * are NOT overridden — those are immutable per brand guidelines.
 * Gradient tokens that hard-code sky hex (--ge-grad-dark-hero
 * etc.) are intentionally left alone too; navy/sky hero gradients
 * stay as the brand defines them.
 * ============================================================ */

[data-theme="violet"] {
  /* ---- Repoint the sky-blue scale to violet ---- */
  --ge-sky:    #614DBA;   /* === --ge-violet-4 */
  --ge-blue:   #4A3995;   /* deeper violet — hover / emphasis */
  --ge-blue-1: #FBFAFF;   /* faintest violet wash */
  --ge-blue-2: #E8E4F9;   /* === --ge-violet-2 */
  --ge-blue-3: #E8E4F9;   /* light violet for hl pill backgrounds */
  --ge-blue-4: #614DBA;

  /* ---- Semantic aliases follow the scale ---- */
  --accent:        #614DBA;
  --accent-hover:  #4A3995;
  --link:          #4A3995;     /* darker for WCAG AA on white */
  --info:          #614DBA;

  /* ---- Tinted shadows for focus + glow ---- */
  --shadow-focus:    0 0 0 3px rgba(97, 77, 186, 0.45);
  --shadow-glow-sky: 0 0 0 4px rgba(97, 77, 186, 0.18);

  /* ---- Press-state palette (used by .btn--primary:active) ---- */
  --v2-violet-active: #382872;
}

/* ============================================================
 * PRIMARY CTA — bespoke hover / active / focus behaviour
 * Per brand spec: "background darkens, never opacity-only.
 * Optional 1px translateY for buttons."
 * ============================================================ */
[data-theme="violet"] .btn--primary {
  background: var(--ge-navy);
  color: var(--ge-white);
  box-shadow: none;
  transition:
    background var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}
[data-theme="violet"] .btn--primary:hover {
  background: var(--accent);
  color: var(--ge-white);
  box-shadow: none;
}
[data-theme="violet"] .btn--primary:active {
  background: var(--v2-violet-active);
  transform: translateY(1px);
  box-shadow: none;
}
[data-theme="violet"] .btn--primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(97, 77, 186, 0.40),
    0 0 0 6px rgba(97, 77, 186, 0.14);
}

/* Arrow pill stays navy at rest (high contrast on violet), flips
 * to white-on-violet on hover — mirrors the existing sky→blue
 * arrow pattern. */
[data-theme="violet"] .btn--primary .btn__arrow {
  background: var(--ge-white);
  color: var(--ge-navy);
}
[data-theme="violet"] .btn--primary:hover .btn__arrow {
  background: var(--ge-white);
  color: var(--accent);
}
[data-theme="violet"] .btn--primary:active .btn__arrow {
  background: var(--ge-white);
  color: var(--v2-violet-active);
}

/* ============================================================
 * NAV LOGO — drop the height cap; per-page inline width on the
 * <img> drives the size now. The "by GroupEd" tagline stays.
 * ============================================================ */

/* ============================================================
 * STATS GRID — top-align contents so numbers line up across the
 * row regardless of whether the label wraps to 1 or 2 lines.
 * (The "1 · price" label is short enough to fit on one line, so
 * justify-content:center was pushing its number 9px lower than
 * its neighbours.)
 * ============================================================ */
[data-theme="violet"] .stat {
  justify-content: flex-start;
}

/* ============================================================
 * PRICE BAND — flat violet (the section background carries the colour;
 * the container no longer paints a gradient rectangle behind the card).
 * ============================================================ */
[data-theme="violet"] .price > .container {
  background: none;
}
/* Testimonial is now light, standalone cards — no band behind them. */
[data-theme="violet"] .testimonial > .container {
  background: transparent;
}
/* Features tile uses flat navy — no gradient/aura. */
/* Repaint the aurora blobs so they pick up violet rather than sky. */
[data-theme="violet"] .price__aurora {
  background:
    radial-gradient(circle at 18% 28%, rgba(133, 114, 218, 0.55), transparent 45%),
    radial-gradient(circle at 82% 72%, rgba(56, 40, 114, 0.65), transparent 50%),
    radial-gradient(circle at 50% 110%, rgba(97, 77, 186, 0.45), transparent 55%);
}

/* ============================================================
 * GUARANTEE BANNER — repaint sky-tinted glass to violet so it
 * sits cohesively on the violet/navy price band. The base CSS
 * hard-codes sky-blue rgba values for the gradient, border,
 * shadow, and aurora blobs; we swap them all for violet here.
 * ============================================================ */
[data-theme="violet"] .price__guarantee {
  background:
    linear-gradient(
      135deg,
      rgba(97, 77, 186, 0.22) 0%,
      rgba(97, 77, 186, 0.10) 100%
    );
  border-color: rgba(133, 114, 218, 0.50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="violet"] .price__guarantee::before {
  background:
    radial-gradient(circle at 15% 50%, rgba(133, 114, 218, 0.55), transparent 42%),
    radial-gradient(circle at 85% 50%, rgba(56, 40, 114, 0.65), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(97, 77, 186, 0.45), transparent 50%);
}
/* "guaranteed for 3 years" strong tag was sky-coloured (now violet on
 * violet — invisible). Flip it to white so it reads as the emphasis it
 * should be. */
[data-theme="violet"] .price__guarantee-desc strong {
  color: var(--ge-white);
}

/* Testimonial highlight ("over 1,200 pupils and staff"). The cards are now
 * light, so use the violet accent rather than white. */
[data-theme="violet"] .testimonial__hl {
  color: var(--accent);
}

/* ============================================================
 * PARTNERS LOGO ROW \u2014 mobile fix
 * mobile-polish.css caps logo height at 36px, but the base img has
 * no object-fit set (so it defaults to `fill`). Combined with the
 * inline `width: 294px` on the Bromcom logo, this stretches the
 * 1600\u00d7418 image into a 267\u00d736 box and squashes it vertically.
 * Preserve aspect ratio instead.
 * ============================================================ */
[data-theme="violet"] .partners__logo-cell img {
  object-fit: contain;
}

/* ============================================================
 * PROOF BAND \u2014 left-edge alignment with the rest of the page
 * The base rule sets `padding: var(--sp-12) 0` on .proof-band__inner,
 * killing the .container class's horizontal gutter. The "100+ schools
 * across the UK" text then sits flush at x=0 while the "What's
 * included" header sits at x=20 (the standard gutter). Restore the
 * gutter so the two sections share a baseline.
 * ============================================================ */
[data-theme="violet"] .proof-band__inner {
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}
@media (min-width: 768px) {
  [data-theme="violet"] .proof-band__inner {
    padding-left: var(--sp-14, 56px);
    padding-right: var(--sp-14, 56px);
  }
}
/* Mobile reset for the inline-styled banner margin.
 * The desktop direct-edit (228px side margins) squashes the banner to
 * ~26px wide under 720px viewports; clamp it back to the page gutters
 * and restore a sensible top spacing. !important is required to beat
 * the inline style. */
@media (max-width: 720px) {
  [data-theme="violet"] .price__guarantee {
    margin: var(--sp-8) auto 0 !important;
    padding: var(--sp-7) var(--sp-6) !important;
    max-width: 100%;
  }
}