/* Footer — the marketing footer, as drawn.
   Every colour is a palette token: the design's hexes map one to one onto the Campus scales, and
   naming them here means a palette change reaches the footer without anyone editing this file. */

.cil-footer {
  --cil-footer-ink:        var(--cil-black-light-6);   /* #C7C8C8 body text        */
  --cil-footer-strong:     var(--cil-white);           /* #FCFCFC headings         */
  --cil-footer-rule:       var(--cil-black-regular-9); /* #4E4F4F hairlines        */
  --cil-footer-disc:       var(--cil-black-regular-10);/* #444646 social disc      */
  --cil-footer-field:      var(--cil-black-dark-1);    /* #3B3C3C input ground     */
  --cil-footer-field-edge: var(--cil-black-regular-5); /* #727575 input border     */
  --cil-footer-hint:       var(--cil-black-light-10);  /* #A1A3A3 placeholder      */
  --cil-footer-max:        1600px;

  position: relative;
  overflow: hidden;
  background: var(--cil-black);
  color: var(--cil-footer-ink);
}

/* ---- decoration ------------------------------------------------------------------ */
/* Behind everything and out of the accessibility tree. pointer-events off so the rings never
   take a click meant for a link that overlaps them.

   Each shape is anchored to the edge the design anchors it to and keeps its own size, so the
   rings stay half-cut by the window at every width and the dots stay the same distance in.
   Positions are the design's, read off the 1920 x 718 frame: the rings sit on the edges, the
   dots a fixed number of pixels from them, and the vertical placement is a share of the
   footer's height so the band stays evenly populated however tall the content makes it. */
.cil-footer__decoration { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.cil-footer__shape {
  position: absolute;
  border-radius: 50%;
  /* Centred on its own anchor point, which is what puts half a ring outside the window. */
  transform: translate(-50%, -50%);
}

/* Rings — centre on the window edge, so exactly half of each is visible. */
.cil-footer__shape--ring-start {
  left: 0;
  top: 43.6%;
  width: 228px;
  height: 228px;
  border: 12px solid var(--cil-blue);
  opacity: 0.32;
}
.cil-footer__shape--ring-end {
  left: 100%;
  top: 31.2%;
  width: 208px;
  height: 208px;
  border: 12px solid var(--cil-yellow);
  opacity: 0.32;
}

/* Dots — a fixed distance in from their own edge. */
.cil-footer__shape--dot-start-a { left: 122px;             top: 72%;   width: 20px; height: 20px; background: var(--cil-green); opacity: 0.5; }
.cil-footer__shape--dot-start-b { left: 65px;              top: 90.3%; width: 14px; height: 14px; background: var(--cil-red);   opacity: 0.6; }
.cil-footer__shape--dot-end-a   { left: calc(100% - 109px); top: 60.2%; width: 22px; height: 22px; background: var(--cil-red);   opacity: 0.7; }
.cil-footer__shape--dot-end-b   { left: calc(100% - 45px);  top: 85.1%; width: 14px; height: 14px; background: var(--cil-blue);  opacity: 0.5; }

.cil-footer__inner {
  position: relative;                     /* above the decoration */
  box-sizing: border-box;
  width: 100%;
  max-width: var(--cil-footer-max);
  margin-inline: auto;
  padding: 72px 20px 40px;
  display: flex;
  flex-direction: column;
  --cil-footer-gap: 44px;
  gap: var(--cil-footer-gap);
}

.cil-footer__rule { height: 1px; background: var(--cil-footer-rule); }

/* The rule under the band sits 45px clear on both sides — under the band's own content, and above
   the first heading of the footer proper. The column gap already provides most of that, so what is
   added here is only the difference; writing it against the gap keeps the 45 true if the gap moves. */
.cil-footer__rule--band {
  margin-block: calc(45px - var(--cil-footer-gap));
}

/* ---- sitemap --------------------------------------------------------------------- */
.cil-footer__sitemap { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.cil-footer__columns { display: flex; align-items: flex-start; gap: 72px; }
.cil-footer__column  { display: flex; flex-direction: column; gap: 14px; }

.cil-footer__column-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cil-footer-strong);
}
/* The accent bar leads the head in reading order, which on an RTL page is its right edge —
   an order property rather than a margin, so it follows the direction instead of fighting it. */
.cil-footer__accent {
  order: -1;
  flex: 0 0 auto;
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--cil-footer-accent, var(--cil-blue));
}

.cil-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cil-footer__link {
  font-size: 16px;
  line-height: 1.2;
  color: var(--cil-footer-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.cil-footer__link:hover,
.cil-footer__link:focus-visible { color: var(--cil-footer-strong); text-decoration: underline; }

.cil-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 460px; }
.cil-footer__brand-link { display: block; line-height: 0; }
.cil-footer__brand-logo { display: block; width: var(--cil-footer-logo-w, 270px); height: auto; max-width: 100%; }
.cil-footer__brand-text { margin: 0; font-size: 16px; line-height: 1.2; }

/* ---- partners -------------------------------------------------------------------- */
/* The design lays these two rows out left to right while every string inside them stays RTL.
   Reversing the row says exactly that, and leaves direction — and so the text — alone. */
.cil-footer__partners { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 64px; }
.cil-footer__partner  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 15px; }
/* A row of fixed height so two marks of different proportions still sit on one baseline. */
.cil-footer__partner-logo-row { display: flex; align-items: center; height: 76px; }
.cil-footer__partner-logo { display: block; width: var(--cil-footer-logo-w, 120px); height: auto; max-width: 100%; }
.cil-footer__partner-text { margin: 0; font-size: 14px; line-height: 1.2; }

/* ---- legal bar ------------------------------------------------------------------- */
/* The back-to-top button is fixed to the inline-end corner, which is the corner the design puts
   the social row in. The row keeps clear of it rather than the button being moved or hidden: it
   belongs to the page, not to the footer, and every other page wants it where it is.
   56 across plus its own 32 inset, plus room to breathe. */
.cil-footer__legal {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-inline-end: 104px;
}
.cil-footer__legal-text { display: flex; flex-direction: row-reverse; align-items: center; gap: 24px; flex-wrap: wrap; }

.cil-footer__social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; }
.cil-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cil-footer-disc);
  color: var(--cil-footer-strong);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cil-footer__social-glyph { display: block; width: 22px; height: 22px; }
/* On hover each disc takes the platform's own identity. These are the only colours in the footer
   that are not Campus palette, because they are not ours.

   Flat values are the ones each brand publishes, by way of Simple Icons, which cites the brand's
   own resource page for each. Instagram and Telegram are not flat at all — their marks are
   gradients, and a single pink or blue would be the wrong logo.

   The glyph takes whichever of white or the footer's black clears 3:1 against what sits behind it,
   measured rather than guessed. Ratios in the comments are glyph-against-disc. */
.cil-footer {
  --cil-brand-facebook:  #0866FF;
  --cil-brand-twitter:   #1D9BF0;
  --cil-brand-linkedin:  #0A66C2;
  --cil-brand-youtube:   #FF0000;
  --cil-brand-tiktok:    #000000;
  --cil-brand-tiktok-cyan: #25F4EE;
  --cil-brand-tiktok-red:  #FE2C55;
  /* Instagram's glyph gradient: the pale yellow sits in the bottom-left corner and the mark rides
     the magenta-to-blue run, where white clears 4.61 and above. Flat #E4405F is the brand's
     single-colour fallback and is not what the logo looks like. */
  --cil-brand-instagram: radial-gradient(circle at 30% 107%,
      #FEDA75 0%, #FA7E1E 22%, #D62976 52%, #962FBF 74%, #4F5BD5 100%);
  /* Telegram's mark is a two-stop blue, not one blue. */
  --cil-brand-telegram: linear-gradient(180deg, #2AABEE 0%, #229ED9 100%);
}

/* Falls back to the resting disc, so a platform added without a brand rule dims rather than
   losing its background altogether. */
.cil-footer__social-link:hover {
  background: var(--cil-footer-social-brand, var(--cil-footer-disc));
  color: var(--cil-footer-social-ink, var(--cil-footer-strong));
}

.cil-footer__social-link[data-platform="facebook"]:hover  { --cil-footer-social-brand: var(--cil-brand-facebook);  --cil-footer-social-ink: var(--cil-white); }  /* 4.70 */
.cil-footer__social-link[data-platform="twitter"]:hover   { --cil-footer-social-brand: var(--cil-brand-twitter);   --cil-footer-social-ink: var(--cil-black); }  /* 4.22 */
.cil-footer__social-link[data-platform="linkedin"]:hover  { --cil-footer-social-brand: var(--cil-brand-linkedin);  --cil-footer-social-ink: var(--cil-white); }  /* 5.54 */
.cil-footer__social-link[data-platform="youtube"]:hover   { --cil-footer-social-brand: var(--cil-brand-youtube);   --cil-footer-social-ink: var(--cil-white); }  /* 3.90 */
.cil-footer__social-link[data-platform="instagram"]:hover { --cil-footer-social-brand: var(--cil-brand-instagram); --cil-footer-social-ink: var(--cil-white); }  /* 4.61 on the mark's own run */
.cil-footer__social-link[data-platform="telegram"]:hover  { --cil-footer-social-brand: var(--cil-brand-telegram);  --cil-footer-social-ink: var(--cil-black); }  /* 4.20 worst stop */

/* TikTok's mark is black with a cyan and a red offset behind it. Drawn the way the logo is built
   rather than flattened to one colour, which also stops the black disc from disappearing into a
   near-black footer — the offsets give the shape its edge, so it needs no outline. */
.cil-footer__social-link[data-platform="tiktok"]:hover {
  --cil-footer-social-brand: var(--cil-brand-tiktok);
  --cil-footer-social-ink: var(--cil-white);
}
.cil-footer__social-link[data-platform="tiktok"]:hover .cil-footer__social-glyph {
  filter: drop-shadow(-1.5px -1.5px 0 var(--cil-brand-tiktok-cyan))
          drop-shadow(1.5px 1.5px 0 var(--cil-brand-tiktok-red));
}

.cil-footer__social-link:focus-visible { outline: 2px solid var(--cil-yellow); outline-offset: 2px; }

.cil-footer__languages { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 14px; }
.cil-footer__language {
  font-size: 14px;
  line-height: 1.2;
  color: var(--cil-footer-ink);
  text-decoration: none;
}
/* The current language is white and stays white. The others light up in a brand colour on hover,
   one each, in the order they appear — the slot comes from the markup so it does not shuffle
   when the page's own language changes which of them is current. */
.cil-footer__language:hover,
.cil-footer__language:focus-visible { color: var(--cil-footer-language-hover, var(--cil-footer-strong)); text-decoration: underline; }
.cil-footer__language[data-hover-slot="1"] { --cil-footer-language-hover: var(--cil-yellow); }
.cil-footer__language[data-hover-slot="2"] { --cil-footer-language-hover: var(--cil-red); }
.cil-footer__language[data-hover-slot="3"] { --cil-footer-language-hover: var(--cil-green); }
.cil-footer__language.is-current { color: var(--cil-footer-strong); font-weight: 700; }
.cil-footer__copyright { margin: 0; font-size: 14px; line-height: 1.2; }

/* ---- conversion band ------------------------------------------------------------- */
/* No padding under the band: it used to hold the band off the sitemap, and the rule below now sets
   that distance itself. Left in, the two stacked and the line sat 81px from the form. */
.cil-footer__conversion { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 40px; padding-block: 8px 0; }
.cil-footer__conversion--catalogue { align-items: center; }
.cil-footer__conversion-copy { display: flex; flex-direction: column; gap: 6px; max-width: var(--cil-footer-copy-w, 560px); }
.cil-footer__conversion-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--cil-footer-strong); }
.cil-footer__conversion-sub   { margin: 0; font-size: 16px; line-height: 1.2; }

.cil-footer__signup { display: flex; flex-direction: column; gap: 14px; width: 560px; max-width: 100%; }
.cil-footer__field-row { display: flex; align-items: center; gap: 12px; }
.cil-footer__field-box {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 52px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  background: var(--cil-footer-field);
  border: 1px solid var(--cil-footer-field-edge);
  border-radius: 10px;
}
.cil-footer__field {
  width: 100%;
  border: 0;
  background: none;
  color: var(--cil-footer-strong);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
}
.cil-footer__field::placeholder { color: var(--cil-footer-hint); opacity: 1; }
.cil-footer__field:focus { outline: none; }
.cil-footer__field-box:focus-within { outline: 2px solid var(--cil-yellow); outline-offset: 2px; }

.cil-footer__subscribe,
.cil-footer__cta {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 15px 34px;
  border-radius: 26px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  /* A colour easing into another colour, and nothing else moving. brightness(1.08) stood here,
     which is not a colour an editor can choose — it was whatever the fill happened to be, lifted.
     The long tail on the curve is what makes it read as soft rather than as a state flipping. */
  transition: background-color 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color     0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              color            0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cil-footer__subscribe,
.cil-footer__cta--primary {
  background-color: var(--cil-footer-cta, var(--cil-blue));
  border: 1px solid transparent;
  color: var(--cil-footer-cta-ink, var(--cil-black));
}
.cil-footer__cta--secondary {
  background-color: transparent;
  border: 1px solid var(--cil-footer-cta, var(--cil-black-light-6));
  color: var(--cil-footer-strong);
}
.cil-footer__subscribe:hover,
.cil-footer__cta--primary:hover {
  background-color: var(--cil-footer-cta-hover, var(--cil-blue));
  color: var(--cil-footer-cta-ink-hover, var(--cil-black));
}
/* The outline button fills rather than only changing its edge, so both buttons answer the same way. */
.cil-footer__cta--secondary:hover {
  background-color: var(--cil-footer-cta-hover, transparent);
  border-color: var(--cil-footer-cta-hover, var(--cil-black-light-6));
  color: var(--cil-footer-cta-ink-hover, var(--cil-footer-strong));
}

/* Someone who has asked for less movement still gets the colour, just without the travel. */
@media (prefers-reduced-motion: reduce) {
  .cil-footer__subscribe,
  .cil-footer__cta { transition-duration: 0.01ms; }
}
.cil-footer__subscribe:disabled { opacity: 0.6; cursor: default; }
.cil-footer__subscribe:focus-visible,
.cil-footer__cta:focus-visible { outline: 2px solid var(--cil-yellow); outline-offset: 2px; }

.cil-footer__actions { display: flex; align-items: center; gap: 14px; }

.cil-footer__consent { display: flex; align-items: flex-start; gap: 10px; }
.cil-footer__consent-box {
  order: -1;                              /* the box leads, as it does in the design */
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--cil-blue);
  background: var(--cil-footer-field);
  border: 1.5px solid var(--cil-footer-ink);
  border-radius: 5px;
  cursor: pointer;
}
/* The label toggles the box, so it has to say so. A checkbox and its label both come out of the
   browser as cursor: default, which on a line of text that does something reads as a line of text
   that does nothing. */
.cil-footer__consent-text {
  font-size: 14px;
  line-height: 1.2;
  max-width: 500px;
  cursor: pointer;
}
/* The field the message is about, so the words and the form agree on what is wrong. Red edge
   rather than red text: the address a visitor typed stays readable while they correct it. */
.cil-footer__field-box.is-invalid { border-color: var(--cil-red); }
/* An outline, not a border: a checkbox left at its native appearance does not paint one, so the
   border set above is only ever seen where the platform draws it. */
.cil-footer__consent.is-invalid .cil-footer__consent-box {
  outline: 2px solid var(--cil-red);
  outline-offset: 2px;
}

/* Nothing to say, no room taken. It held a line open so the form would not jump when an answer
   arrived, but the answer only ever arrives after a submit — and until then that reserved line and
   its gap read as 31px of dead space between the consent text and the rule below. */
.cil-footer__signup-message { margin: 0; font-size: 14px; line-height: 1.2; }
.cil-footer__signup-message:empty { display: none; }
.cil-footer__signup-message.is-error { color: var(--cil-red); }
.cil-footer__signup-message.is-done  { color: var(--cil-green); }

/* ---- narrow ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .cil-footer__inner { padding: 40px 20px 28px; --cil-footer-gap: 28px; }
  /* The narrow design keeps two of the six: a ring cut by the bottom-left corner and one dot
     near the right edge. The rest would crowd a 390-wide column. */
  .cil-footer__shape--ring-end,
  .cil-footer__shape--dot-start-a,
  .cil-footer__shape--dot-start-b,
  .cil-footer__shape--dot-end-b { display: none; }
  .cil-footer__shape--ring-start { top: 100.6%; width: 178px; height: 178px; opacity: 0.3; }
  .cil-footer__shape--dot-end-a  { left: calc(100% - 27px); top: 34.2%; width: 22px; height: 22px; opacity: 0.55; }

  /* Brand first, then the columns — the order the design puts them in on a phone. */
  .cil-footer__sitemap { flex-direction: column; gap: 28px; }
  .cil-footer__brand   { max-width: none; }
  .cil-footer__brand-logo { width: min(var(--cil-footer-logo-w, 190px), 190px); }
  .cil-footer__brand-text { font-size: 14px; }

  .cil-footer__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; width: 100%; }

  .cil-footer__column { gap: 10px; }
  .cil-footer__column-head { font-size: 16px; gap: 8px; }
  .cil-footer__accent { height: 18px; }
  .cil-footer__links { gap: 10px; }
  .cil-footer__link  { font-size: 14px; }

  .cil-footer__partners { flex-direction: column; gap: 24px; }   /* row-reverse is a wide-screen rule */
  .cil-footer__partner-logo-row { height: 60px; }
  .cil-footer__partner-text { font-size: 12px; }

  .cil-footer__legal { flex-direction: column; align-items: flex-start; gap: 24px; padding-inline-end: 0; }
  .cil-footer__legal-text { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cil-footer__social { gap: 10px; }
  .cil-footer__social-link { width: 36px; height: 36px; }
  .cil-footer__social-glyph { width: 20px; height: 20px; }

  .cil-footer__conversion { flex-direction: column; gap: 20px; padding-block: 0; }
  .cil-footer__conversion-copy { order: -1; max-width: none; }
  .cil-footer__conversion-title { font-size: 20px; }
  .cil-footer__conversion-sub { font-size: 14px; }
  .cil-footer__signup { width: 100%; }
  .cil-footer__field-row { flex-wrap: wrap; }
  .cil-footer__subscribe, .cil-footer__cta { width: 100%; text-align: center; }
  .cil-footer__actions { flex-direction: column; align-items: stretch; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cil-footer__link, .cil-footer__social-link, .cil-footer__subscribe, .cil-footer__cta { transition: none; }
}