/*
 * 21C Pocket brand layer (pocket.21c.digital only). Colours from the brand kit: navy #151C72 for text, links and buttons;
 * green #68C600 only on navy or as decoration (2.2:1 on white). The wordmark is live text in Fredoka 600, hosted here.
 */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fredoka-600-latin.woff2") format("woff2");
}

:root {
  --p21-navy: #151C72;
  --p21-navy-deep: #0d1250;
  --p21-green: #68C600;
  --p21-font-brand: "Fredoka", "Nunito", system-ui, sans-serif;
  /* The Quovia colour tokens the portal is built from, pointed at the brand. */
  --qv-petrol: var(--p21-navy);
  --qv-petrol-2: var(--p21-navy-deep);
  --qv-petrol-soft: #E8E9F4;
}

/* The one-line logo: icon, a gap of 22/100 of the icon's height, then "21C" and "pocket" 18/84 of the type size apart. */
.p21-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}
.csl-login-context .csl-product-brand .p21-logo img,
.qv-portal-brand-mark .p21-logo img,
.p21-logo img {
  display: block;
  width: auto;
  height: 40px;
}
.p21-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.214em;
  font-family: var(--p21-font-brand);
  font-size: 33px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.p21-w-21c { color: var(--p21-green); }
.p21-w-pocket { color: var(--p21-navy); }
.p21-logo-reversed .p21-w-pocket { color: #fff; }

/* In the portal header the logo is smaller, but never below a 24 px icon. */
.qv-portal-brand-mark .p21-logo img { height: 30px; }
.qv-portal-brand-mark .p21-wordmark { font-size: 25px; }

/* The sign-in page. */
.p21-login-context { background: var(--p21-navy); }
.p21-login-context .csl-product-brand { color: #fff; text-decoration: none; }
.p21-login-context .csl-login-context-copy p { color: var(--p21-green); }
.p21-login-context .csl-login-context-copy h1 {
  font-family: var(--p21-font-brand);
  font-weight: 600;
  letter-spacing: -0.5px;
}

@media (max-width: 480px) {
  .p21-logo img { height: 32px; }
  .p21-wordmark { font-size: 26px; }
}

/*
 * Quovia Education's pages: its colour tokens pointed at the brand (light and dark). Its high-contrast mode
 * (:root[data-contrast="true"]) is more specific, so it keeps its black and white. Stripes use the darker green
 * (3.5:1 on white), never the light one.
 */
:root {
  --qe-band: #151C72;
  --qe-band-2: #222B85;
  --qe-band-grid: #1B237C;
  --qe-band-line: #6F78C4;
  --qe-on-band-2: #C9CDF0;
  --qe-gold: #4C9A00;
  --qe-primary: #151C72;
  --qe-primary-hover: #0D1250;
}
@media (prefers-color-scheme: dark) {
  :root {
    --qe-band: #0D1250;
    --qe-band-2: #1A2280;
    --qe-band-grid: #121966;
    --qe-band-line: #6F78C4;
    --qe-on-band-2: #C9CDF0;
    --qe-gold: #68C600;
  }
}
/* Education's top line: the reversed one-line logo on the band. */
.p21-qa-brand .p21-logo img { height: 30px; }
.p21-qa-brand .p21-wordmark { font-size: 25px; }

/* The sign-in card: its heading in the brand typeface; "Show password" under the field. */
body.csl-login-document .csl-login-card h2 {
  font-family: var(--p21-font-brand);
  font-weight: 600;
  letter-spacing: -0.3px;
}
.p21-show-password {
  display: block;
  width: fit-content;
  margin: -4px 0 6px auto;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--p21-navy);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.p21-show-password:focus-visible {
  outline: 3px solid var(--p21-navy);
  outline-offset: 2px;
  border-radius: 4px;
}

/* On a phone the brand panel stays short, so the sign-in form is on the first screen. */
@media (max-width: 900px) {
  .p21-login-context { padding: 18px 22px 22px; }
  .p21-login-context .csl-login-context-copy { padding: 18px 0 0; }
  .p21-login-context .csl-login-context-copy p { margin-bottom: 8px; }
  .p21-login-context .csl-login-context-copy h1 { font-size: clamp(28px, 7.5vw, 40px); line-height: 1.05; }
  .p21-login-context .csl-login-context-copy > span { margin-top: 10px; }
  .csl-login-document .csl-login-stage { padding-top: 16px; }
}