/* 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-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;
  /* The site's keyboard ring (styles-rtl/ltr :focus-visible) in the yellow the footer's own controls use. */
  --cil-focus-ring:        var(--cil-yellow);

  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 social row runs to the content edge, as the design draws it: the back-to-top button hangs
   152 up (110 on a phone), above this row rather than beside it. */
.cil-footer__legal {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.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%;
  position: relative;
  isolation: isolate;
  background: var(--cil-social-disc);   /* design-system/brand-colours.css */
  color: var(--cil-social-mark);
  transition: color 0.15s ease;
}
/* The platform's colour is a layer over the disc that fades in and out. Set on the link itself, two
   of them gradients (Instagram, Telegram) could not ease: a gradient is an image, the hover swapped
   the disc for it, and on leaving the image went at once while the colour under it rose from clear --
   the page's white showed through the disc for a moment (Oren, 2026-10-08, on the contact page). */
.cil-footer__social-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--cil-footer-social-brand, var(--cil-social-disc));
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* The whole box, not a fixed glyph size: the design places each mark inside a 40-unit box and
   sizes it there, so one platform's logo reads the same weight as the next. */
.cil-footer__social-glyph { display: block; width: 100%; height: 100%; }
/* On hover each disc takes the platform's own identity and its glyph the ink measured for it. These
   are the only colours in the footer that are not Campus palette, because they are not ours; they
   live in design-system/brand-colours.css (--cil-brand-*), where the contact page's row of the same
   links and the share menu read them too. */

/* A platform added without a brand rule keeps the resting disc. The brand is set on the link, not
   on its hover, so the layer keeps its colour while it fades out. */
.cil-footer__social-link:hover { color: var(--cil-footer-social-ink, var(--cil-social-mark)); }
.cil-footer__social-link:hover::before { opacity: 1; }

.cil-footer__social-link[data-platform="facebook"]  { --cil-footer-social-brand: var(--cil-brand-facebook);  --cil-footer-social-ink: var(--cil-brand-facebook-ink); }
.cil-footer__social-link[data-platform="twitter"]   { --cil-footer-social-brand: var(--cil-brand-twitter);   --cil-footer-social-ink: var(--cil-brand-twitter-ink); }
.cil-footer__social-link[data-platform="linkedin"]  { --cil-footer-social-brand: var(--cil-brand-linkedin);  --cil-footer-social-ink: var(--cil-brand-linkedin-ink); }
.cil-footer__social-link[data-platform="youtube"]   { --cil-footer-social-brand: var(--cil-brand-youtube);   --cil-footer-social-ink: var(--cil-brand-youtube-ink); }
.cil-footer__social-link[data-platform="instagram"] { --cil-footer-social-brand: var(--cil-brand-instagram); --cil-footer-social-ink: var(--cil-brand-instagram-ink); }
.cil-footer__social-link[data-platform="telegram"]  { --cil-footer-social-brand: var(--cil-brand-telegram);  --cil-footer-social-ink: var(--cil-brand-telegram-ink); }

/* 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"] {
  --cil-footer-social-brand: var(--cil-brand-tiktok);
  --cil-footer-social-ink: var(--cil-brand-tiktok-ink);
}
.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));
}
/* A light grey edge whatever the filled button wears -- the design's, not the button colour. */
.cil-footer__cta--secondary {
  background-color: transparent;
  border: 1px solid 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; }

/* The account button at the reading edge and the catalogue's filled one beyond it, as the design
   lays them out; stacked on a phone, the catalogue's comes first (the markup's order). */
.cil-footer__actions { display: flex; flex-direction: row-reverse; 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;
}
.cil-footer__consent-link { color: inherit; text-decoration: underline; }
/* 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; }
  .cil-footer__legal-text { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cil-footer__social { gap: 10px; }
  /* The disc shrinks and the mark inside it shrinks with it — the box does the scaling. */
  .cil-footer__social-link { width: 36px; height: 36px; }

  .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__social-link::before, .cil-footer__subscribe, .cil-footer__cta { transition: none; }
}