/* ============================================================
   site-canvas.css — the Showit canvas layer

   Showit does not lay pages out with flow. Every page is a fixed
   1200px-wide canvas, one canvas per section, with each element
   absolutely placed on it and the section background running full
   bleed behind. Below 1200px the whole canvas scales down as one
   picture; below 768px Showit swaps to a separate 390px-wide
   mobile canvas and scales that up to the viewport.

   This file reproduces that, and nothing else. Pages built on it
   (site-school-success-stories, site-research-case-studies-
   testimonials, site-white-paper) carry their measurements inline
   so the numbers stay next to the thing they describe.

   The whole trick is --u: the unit every measurement is written in.
   It is exactly 1px at 1200px and wider, and shrinks in proportion
   under that, so calc(18 * var(--u)) is 18px on a wide screen and
   the right fraction of 18px on a narrow one. Nothing here reflows.
   ============================================================ */

.sw-page {
  container-type: inline-size;      /* so 100cqw excludes the scrollbar */
  background: #fff;
  /* Showit's engine renders its canvases with text-rendering:optimizeSpeed,
     which turns kerning off. With kerning on, Club Tropicana sets about 3.5%
     wider and the script lines wrap where Showit's do not, so the setting has
     to be matched, not improved on. Same for the smoothing: site-styles.css
     asks for antialiased body text, Showit leaves it at the default. */
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: auto;
  -webkit-text-size-adjust: 100%;
}

.sw-band {
  --uw: 100vw;                      /* fallback for no container queries */
  --u: calc(min(var(--uw), 1200px) / 1200);
  position: relative;
  overflow: hidden;                 /* Showit clips a canvas at its own edges */
  isolation: isolate;               /* keep each canvas's z-indexes to itself */
  width: 100%;
  height: calc(var(--h) * var(--u));
}
@supports (width: 1cqw) {
  .sw-band { --uw: 100cqw; }
}

/* the full-bleed background image of a canvas */
.sw-bandbg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  max-width: none;
  z-index: 0;
}

/* the canvas itself: 1200 wide, centred, never clipping its own children
   (an element that bleeds past the canvas edge is clipped by the band, i.e.
   at the viewport edge, which is what Showit does) */
.sw-stage {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: calc(1200 * var(--u));
  height: 100%;
}
.sw-stage--m, .sw-only-m { display: none; }

.sw-el { position: absolute; box-sizing: border-box; }
a.sw-el, a.sw-link { text-decoration: none; color: inherit; display: block; }
a.sw-link { position: static; }
.sw-page img.sw-el { max-width: none; }

/* Text. Showit runs its text boxes from the top with no padding and no margins
   anywhere inside. The measured font sits on the wrapper, so the tag inside it
   (usually an h3 or a p) has to stop bringing the browser's own heading size
   and weight along: font:inherit, or every h3 renders 1.17x too big and bold. */
.sw-tx > * { font: inherit; margin: 0; padding: 0; }
.sw-tx p, .sw-tx h1, .sw-tx h2, .sw-tx h3, .sw-tx h4, .sw-tx h5, .sw-tx h6,
.sw-tx div, .sw-tx ul, .sw-tx ol { margin: 0; padding: 0; }
.sw-tx ul, .sw-tx ol { margin-left: 1.4em; list-style-position: outside; }
.sw-tx ul { list-style-type: disc; }
.sw-tx li { margin: 0 0 0 1em; padding: 0 0 0 .1em; }
.sw-tx a { color: inherit; }
.sw-tx b, .sw-tx strong { font-weight: 700; }

/* ── the Showit mobile canvas ──────────────────────────────────────── */
@media (max-width: 767px) {
  .sw-band { --u: calc(var(--uw) / 390); height: calc(var(--hm) * var(--u)); }
  .sw-stage { width: calc(390 * var(--u)); }
  .sw-stage--d, .sw-only-d { display: none; }
  .sw-stage--m, .sw-only-m { display: block; }
}

/* Showit buttons: the pill is one element and the label is centred inside it */
.sw-btn { display: flex; align-items: center; justify-content: center;
          text-decoration: none; }
.sw-btn > span { white-space: nowrap; overflow: hidden; }
.sw-img > img { display: block; max-width: none; }

/* ── real form controls on a Showit canvas ─────────────────────────────
   Showit draws a form as a picture: a grey rectangle per field with the
   label and the placeholder copy set as separate text elements on top of
   it. site-share-your-story replaces each of those trios with one real
   control placed on the rectangle's own measurements, so the field is
   usable without moving by a pixel. The form itself is only a positioning
   wrapper and must not swallow clicks meant for the canvas behind it. */
.sw-form { position: absolute; inset: 0; pointer-events: none; }
.sw-form > * { pointer-events: auto; }

.sw-field {
  -webkit-appearance: none; appearance: none;
  border: 0; margin: 0; border-radius: 0;
  font-family: inherit; font-size: inherit;
  background-clip: padding-box;
}
textarea.sw-field { resize: none; overflow: auto; display: block; }
select.sw-field { cursor: pointer; }
button.sw-field { cursor: pointer; padding: 0; }
/* the placeholder keeps the colour Showit set on the mock copy; --ph is
   written inline per field next to the rest of that field's measurements */
.sw-field::placeholder { color: var(--ph); opacity: 1; }
.sw-field:-ms-input-placeholder { color: var(--ph); }
/* A select has no ::placeholder, so while the stand-in first option is still the
   selected one the control itself has to carry the placeholder grey. The field's
   own colour is written inline with the rest of its measurements, so this rule
   has to out-rank an inline declaration. */
select.sw-field:has(> option[value=""]:checked) { color: var(--ph) !important; }
/* the option list is drawn by the OS, so it needs its own colours */
.sw-field option { color: #000; background: #fff; text-transform: none; }
/* Showit has no focus state here because it has no real controls; a visible
   one is required for keyboard use, so it is the brand yellow, outside the
   box, where it cannot shift anything */
.sw-field:focus-visible {
  outline: calc(2 * var(--u)) solid #fae851;
  outline-offset: calc(2 * var(--u));
}