/* Overrides for the CMS-embedded widget (embed.html).
   Loaded after style.css, which supplies the shared form and certificate
   styling. The standalone page sits on dark photographic backgrounds; inside
   the CMS the widget sits on the page's own (light) background, so the
   photo panes and white text have to go or the form is invisible. */

html {
  /* 100vw elsewhere includes the scrollbar gutter; inside an iframe with
     scrolling="no" the overflow is clipped rather than scrolled, silently
     cropping the right edge. */
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  /* Let the CMS page background show through rather than painting a white box. */
  background: transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- Panes: drop the photographic backgrounds ---------------------------- */

.signup,
.search {
  background-image: none;
  width: 100%;
}

.boarding-pass {
  background-color: transparent;
  padding-bottom: 32px;
}

.user-information {
  /* No fixed navbar to clear in the embed. */
  padding-top: 0;
}

.container {
  width: 100%;
  max-width: 900px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* style.css reserves the right half of these panes for the background photo. */
.container__signup,
.container__search {
  padding-right: 16px;
}

@media (min-width: 600px) {
  .container__signup,
  .container__search {
    padding-right: 16px;
  }
}

@media (min-width: 975px) {
  .container__signup,
  .container__search {
    padding-right: 16px;
  }
}

@media (min-width: 1600px) {
  .container__signup,
  .container__search {
    padding-right: 16px;
  }
}

/* --- Dark-on-light text -------------------------------------------------- */

.signup p,
.search p {
  color: #212121;
  filter: none;
  margin-bottom: 24px;
}

.error {
  color: #96000c;
  filter: none;
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  min-height: 1.2em; /* reserve space so messages don't jolt the frame height */
}

.form-link {
  color: #0066b3;
  filter: none;
  text-decoration: underline;
}

.boarding-pass--text {
  color: #212121;
  text-align: center;
}

input[type='email'],
input[type='text'] {
  border: 1px solid #767676;
  filter: none;
}

input[type='submit'] {
  filter: none;
}

input[type='submit']:focus-visible,
input[type='email']:focus-visible,
input[type='text']:focus-visible,
.form-link:focus-visible {
  outline: 3px solid #0066b3;
  outline-offset: 2px;
}

#certificate-download:focus-visible {
  outline: 3px solid #0066b3;
}

/* --- Misc ---------------------------------------------------------------- */

.certificate-canvas {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Visually hidden but announced by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- reCAPTCHA badge ------------------------------------------------------
   The v3 badge is position:fixed bottom-right. Inside an auto-height iframe
   with scrolling="no" it pins to the frame viewport and gets clipped, which
   reads as a broken element on the CMS page.

   Google permits hiding the badge provided the attribution appears in the
   flow instead — see the reCAPTCHA FAQ, "What should I do if I don't want a
   badge?". .cyp-recaptcha-notice below carries it. */
.grecaptcha-badge {
  visibility: hidden;
}

.cyp-recaptcha-notice {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #555;
}

.cyp-recaptcha-notice a {
  color: #0066b3;
}

/* --- Fixed-ratio frame -----------------------------------------------------
   The CMS sizes the iframe to a fixed ratio (16:9), so the height does not grow
   to fit the content — the content has to fit the height. Inside an iframe
   100vh IS the frame height, which is what makes this work.

   The auto-height postMessage still fires and is simply ignored by a
   fixed-ratio host, so the same page works in both kinds of embed. */

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.user-information {
  flex: 1 1 auto;
  min-height: 0; /* without this a flex child refuses to shrink below content size */
  display: flex;
}

.pane {
  flex: 1 1 auto;
  min-height: 0;
}

/* Centre the form vertically in whatever height the frame gives us. */
.signup .container,
.search .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* --- Certificate view: two columns ---------------------------------------
   Stacked, the canvas alone is taller than a 16:9 frame at most widths (695px
   at 900px wide, against 506px of frame). Side by side it fits at every size. */
.cert-layout {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 12px 16px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.cert-layout__art {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.cert-layout__aside {
  flex: 1 1 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#boarding-pass-pdf {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Constrained on BOTH axes so it fits the frame whichever runs out first.
   width/height auto lets the aspect ratio pick the limiting dimension. */
.certificate-canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.cert-layout .boarding-pass--text {
  text-align: left;
  margin-bottom: 16px;
}

.cert-layout .boarding-pass--text p {
  font-size: 15px;
  margin: 0 0 8px;
}

.cert-layout .certificate-actions {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  /* Centred, and align-items rather than a width so each button still sizes to
     its own text — stretching them equal would make the secondary read as a
     second primary. */
  align-items: center;
  gap: 10px;
}

/* Below ~700px there is not enough width for two columns. A 16:9 frame is only
   ~200px tall on a phone, which cannot show this content at any layout — the
   host needs a taller ratio at that breakpoint. Stacking at least degrades
   sensibly if it scrolls. */
@media (max-width: 700px) {
  .cert-layout {
    flex-direction: column;
    gap: 12px;
    height: auto;
  }
  .cert-layout__art,
  .cert-layout__aside {
    flex: 0 0 auto;
    width: 100%;
  }
  .cert-layout__aside {
    text-align: center;
  }
  .cert-layout .certificate-actions {
    align-items: center;
  }
  .cert-layout .boarding-pass--text {
    text-align: center;
  }
  .certificate-canvas {
    max-height: 52vh;
  }
}

/* The counter reads "N PIXELS CLAIMED. Did you get yours?" — which is wrong on
   the certificate view, where the visitor has just got theirs. Hiding it there
   also returns ~40px of height, which a fixed-ratio frame cannot spare.
   Scoped to embed.css, so the standalone page keeps its counter throughout. */
body[data-cyp-view='boarding'] .counter {
  display: none;
}

/* Certificate actions. The artwork beside these already says what happened, so
   there is no explanatory copy — just the two things a visitor can do next.
   The secondary action is an outline button rather than a text link: sitting
   under a solid primary button, a bare link read as an afterthought. */
.cert-secondary {
  display: inline-block;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  color: #96000c;
  background: transparent;
  border: 2px solid #96000c;
  border-radius: 32px;
  cursor: pointer;
}

.cert-secondary:hover {
  background: #96000c;
  color: #FFF;
}

.cert-secondary:focus-visible {
  outline: 3px solid #0066b3;
  outline-offset: 2px;
}

/* --- ?theme=dark ----------------------------------------------------------
   For hosts that place imagery behind the transparent iframe. The default is
   dark-on-light because the common case is a white CMS page; this inverts it.

   A translucent scrim sits behind the text rather than relying on colour alone
   — over a photographic background, white text on its own is legible in some
   crops and not others, and the crop changes as the frame resizes. */
body[data-cyp-theme='dark'] .signup p,
body[data-cyp-theme='dark'] .search p,
body[data-cyp-theme='dark'] .boarding-pass--text {
  color: #FFF;
}

body[data-cyp-theme='dark'] .signup .container,
body[data-cyp-theme='dark'] .search .container {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  padding-left: 28px;
  padding-right: 28px;
  /* Keep the scrim close to the content instead of spanning the whole frame. */
  max-width: 720px;
}

body[data-cyp-theme='dark'] .error {
  color: #FFD54F;
}

body[data-cyp-theme='dark'] .form-link {
  color: #9EC9FF;
}

body[data-cyp-theme='dark'] .cyp-recaptcha-notice {
  color: #D0D0D0;
}

body[data-cyp-theme='dark'] .cyp-recaptcha-notice a {
  color: #9EC9FF;
}

body[data-cyp-theme='dark'] .counter {
  background-color: rgba(0, 102, 179, 0.9);
}

body[data-cyp-theme='dark'] .cert-secondary {
  color: #FFF;
  border-color: #FFF;
}

body[data-cyp-theme='dark'] .cert-secondary:hover {
  background: #FFF;
  color: #96000c;
}

body[data-cyp-theme='dark'] input[type='email'],
body[data-cyp-theme='dark'] input[type='text'] {
  border-color: transparent;
}

/* --- Claim policy footer --------------------------------------------------
   Sized deliberately small. body is a flex column and .user-information takes
   the remaining space, so every pixel this costs comes out of the pane above
   it — and in a fixed-ratio frame there is nothing spare. At this size it is
   ~3 lines on a phone and 2 on a desktop; the certificate canvas is bounded by
   max-height, so it scales down to absorb the difference rather than
   overflowing. */
.cyp-footer {
  flex: 0 0 auto;
  padding: 10px 16px 14px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.cyp-footer p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #555;
  filter: none;
}

body[data-cyp-theme='dark'] .cyp-footer p {
  color: #D0D0D0;
  /* No scrim here as on .container — over imagery this line is small enough
     that a box around it would read as a second panel. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}