/* Error pages — the column, and the Memphis scene behind it.
 *
 * Loaded site-wide rather than only on the error templates: the connection page is drawn when a
 * navigation has already failed, and nothing can be fetched by then. That is why this file stays
 * small and uses no images, and why the search field the 404 and the 403 offer -- which the
 * connection page never has -- is in error-search.css, loaded only where an error page is drawn.
 *
 * Every colour here is a brand token. The design's own token names map onto them one for one:
 * Campus Black Light 5 / Dark 4 / Regular 10 / Regular 7, and the primary blue, yellow, green, red.
 */

/* The theme does not set border-box globally, so a width plus padding overflows its container —
   the search field came out 39px wider than drawn, and the mobile button 66px wider than the column
   it sits in. Scoped to this component rather than changed site-wide. */
.cil-error,
.cil-error *,
.cil-error *::before,
.cil-error *::after { box-sizing: border-box; }

/* Every weight here is chosen by naming a family — Assistant-Bold, Assistant-Regular — each of
   which is registered at normal weight. A browser asked for a weight the family does not have will
   invent one, and Firefox invents a much heavier one than Chrome, which is how a button came to
   look semibold in one browser and regular in another. Nothing in this component should ever be
   faked — and with synthesis refused, the bold faces can ask for 700 safely: Assistant draws its
   own bold unchanged, and the Arabic and Cyrillic letters it does not have fall back to a real
   bold instead of the regular face they were getting. */
.cil-error,
.cil-error * { font-synthesis: none; }

/* The section begins under the fixed header, so the column is centred in what can be seen and the
   footer follows the section's full height below the bar. The overlay covers the whole window, so
   its words are centred below the bar instead. */
.cil-error:not(.cil-error--overlay) { margin-top: var(--cil-hdr-height, 64px); }

.cil-error {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 780px;
  padding: 64px 24px;
  background: var(--cil-white);
}

/* ---- The column ------------------------------------------------------------------------- */

.cil-error__column {
  position: relative;   /* above the scene */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* Wide enough that the longest heading in the family — "אין הרשאה לדף הזה" at 96px — stays on
     one line, which is how the design draws it. The search field keeps its own 640 below. */
  max-width: 1200px;
  text-align: center;
}

/* Assistant at the design's Display 1. Decorative, so it is not in the heading order. */
.cil-error__code {
  margin: 0;
  color: var(--cil-black-light-5);
  font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
  font-size: 144px;
  font-weight: 700;   /* safe: synthesis is refused above */
  line-height: 1.2;
}

.cil-error__title {
  margin: 0;
  color: var(--cil-black-dark-4);
  font-family: 'Assistant-Bold', Assistant, Arial, sans-serif;
  font-size: 96px;
  /* 700 for the letters Assistant lacks; synthesis is refused above, so Assistant's own stay as
     drawn. */
  font-weight: 700;
  line-height: 1.2;
}

.cil-error__lead {
  margin: 0;
  color: var(--cil-black-regular-10);
  font-family: 'Assistant-Regular', Assistant, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.2;
}

/* ---- Narrow ------------------------------------------------------------------------------
   The design's mobile frame is 390 wide and shorter; the type steps down and the scene shrinks
   with it rather than being cropped to a corner of the desktop arrangement. */

@media (max-width: 900px) {
  .cil-error { min-height: 560px; padding: 40px 16px; }
  /* The design's mobile column: Display 1 at 44, Display 3 at 32, the line at 16, 10 apart. */
  .cil-error__column { gap: 10px; }
  .cil-error__code  { font-size: 44px; }
  .cil-error__title { font-size: 32px; }
  .cil-error__lead  { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cil-error * { transition: none !important; }
}

/* ---- The actions -----------------------------------------------------------------------------
   A row of pills under the words. Each carries the house hover gesture; what is written here is the
   shape it wears and how the row sits, which is what bubble-button leaves to whoever calls it. */

.cil-error__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.cil-error__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 53px;
  padding: 15px 30px;
  /* A true pill: the ends stay half-circles at any label length. */
  border-radius: 999px;
  /* Transparent rather than absent, so a solid button and an outlined one are the same height and
     sit on the same line. Only the colour changes between them. */
  border: 1.5px solid transparent;
  font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif;
  font-size: 18px;
  /* The weight comes from the family, not from synthesis (refused above): 700 only reaches the
     Arabic and Cyrillic letters, which fall back to a face that has a real bold. */
  font-weight: 700;
  line-height: 23px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* Pinned on every state: the theme underlines a link on hover, and these are links. */
.cil-error__cta:hover,
.cil-error__cta:focus-visible { text-decoration: none; }

/* The outlined one is read against the page, so the colour it was given goes to the edge. The
   ground stays white until the bubbles cover it, which is when the label changes ink. */
.cil-error__cta--outline { border-color: var(--cta-edge, var(--cil-black-dark-4)); }

/* Compact pills side by side, as the design keeps them on a phone: 48 tall, 28 in, words at 16.
   After the rules above, which a media query would otherwise lose to. */
@media (max-width: 900px) {
  .cil-error__actions { justify-content: center; margin-top: 8px; }
  .cil-error__cta { height: 48px; padding: 0 28px; font-size: 16px; line-height: 1.2; }
}

/* ---- The connection overlay ---------------------------------------------------------------
   Drawn over the page the reader is already on, rather than navigating them away from it: the
   navigation is exactly what could not happen. */

.cil-error--overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  min-height: 100vh;
  padding-top: calc(64px + var(--cil-hdr-height, 64px));   /* centred below the header, not behind it */
}
@media (max-width: 900px) {
  .cil-error--overlay { padding-top: calc(40px + var(--cil-hdr-height, 62px)); }
}

/* The page underneath keeps its scroll position for when the connection returns. */
body.cil-error-offline { overflow: hidden; }