/* ==========================================================================
   chrome.css — shared site header + footer (Tilda-free)
   Loaded from site/partials/header-<lang>.html, which is SSI-included into
   every page, so these rules reach the whole site.

   Geometry is a 1:1 port of the previous Tilda records:
     header desktop  : rec142139778 (T396 artboard, 82px, #0D1240, fixed, z 99999)
     header mobile   : rec142139779 (T282 burger bar, 60px, #0d1240, fixed)
     lang dropdown   : rec142139777 (T794 tooltip menu, 80px wide, #0d1240)
     footer          : rec643426897 (T396 artboard, 402px, #102a43, in flow)
   The body top padding that compensates the fixed header lives in site.css
   (82px >=1200px, 60px below) — do not duplicate it here.
   ========================================================================== */

/* ==========================================================================
   HEADER
   ========================================================================== */
.ck-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 82px;
  background-color: #0D1240;
  z-index: 99999;                      /* same stacking as the old rec142139778 */
  font-family: 'Inter', Arial, sans-serif;

  /* pill widths — see the .hdr-nav comment below. Overridden per language
     by .ck-header--<lang> when the localized labels need more room. */
  --ck-login-w: 100px;
  --ck-signup-w: 100px;
}
.ck-header--es {                       /* "REGÍSTRESE" / "INICIAR SESIÓN" */
  --ck-login-w: 140px;
  --ck-signup-w: 120px;
}

/* ---------------------------------------------------------------- logo --- */
.ck-header__logo {
  position: absolute;
  top: 15px;
  left: 30px;
  width: 160px;
  line-height: 0;
  z-index: 8;
}
.ck-header__logo img {
  display: block;
  width: 160px;
  height: auto;                        /* 320x108 source -> 160x54 */
}

/* ------------------------------------------------------------ main nav --- */
/* The right-hand cluster is laid out from the right edge inwards:
     lang (right:10, 40px) | 20px | LOG IN | 20px | SIGN UP | 15px | nav
   Both pill widths are variables so a language whose labels are longer than
   the EN "SIGN UP"/"LOG IN" (e.g. ES "REGÍSTRESE"/"INICIAR SESIÓN") can widen
   its pills without any of the other offsets being restated. With the 100px
   defaults the computed values are byte-identical to the previous hard-coded
   EN geometry: login right 70, signup right 190, nav right 305. */
.hdr-nav {
  position: absolute;
  top: 0;
  right: calc(70px + var(--ck-login-w) + 20px + var(--ck-signup-w) + 15px);
  height: 82px;
  display: flex;
  align-items: stretch;
  z-index: 3;
}
.hdr-nav__link {
  display: flex;
  align-items: center;
  padding: 0 22px;
  color: #f0f4f8;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}
.hdr-nav__link:hover,
.hdr-nav__link.is-active {             /* .is-active mirrors the old inline bg */
  background-color: #283975;
}

/* -------------------------------------------------------------- pills ---- */
.ck-btn {
  position: absolute;
  top: 20px;
  height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
  color: #ffffff;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out,
              border-color 0.2s ease-in-out;
}
.ck-btn--signup {
  right: calc(70px + var(--ck-login-w) + 20px);
  width: var(--ck-signup-w);
  background-color: #dd4242;
  z-index: 10;
}
.ck-btn--login {
  right: 70px;
  width: var(--ck-login-w);
  border: 1px solid #ffffff;
  z-index: 9;
}

/* ------------------------------------------------------ language menu ---- */
.ck-lang {
  position: absolute;
  top: 20px;
  right: 10px;
  width: 40px;
  height: 40px;
  z-index: 11;
}
.ck-lang__toggle {
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.ck-lang__toggle img {
  display: block;
  width: 40px;
  height: 40px;
}
.ck-lang__menu {
  position: absolute;
  top: 52px;                           /* 72px from the top of the header */
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  margin: 0;
  padding: 30px 0;
  list-style: none;
  background-color: #0d1240;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  z-index: 10000002;
  display: none;
}
.ck-lang__menu::before {               /* the little pointer corner */
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  background-color: #0d1240;
  transform: rotate(45deg);
}
.ck-lang.is-open .ck-lang__menu { display: block; }
/* the original (v736 t794 submenu) separates items with a 12px bottom margin
   on each <li>; without it the 19px-tall links sit flush on top of each other */
.ck-lang__menu li { margin: 0 0 12px; }
.ck-lang__menu li:last-child { margin-bottom: 0; }
.ck-lang__menu a {
  display: block;
  color: #f0f4f8;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

/* ------------------------------------------------------------- burger ---- */
.ck-burger {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  width: 28px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 999;
}
.ck-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #f0f4f8;
  transition: top 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.ck-burger span:nth-child(1) { top: 0; }
.ck-burger span:nth-child(2) { top: 8.5px; }
.ck-burger span:nth-child(3) { top: 17px; }
.ck-burger.is-open span:nth-child(1) { top: 8.5px; transform: rotate(45deg); }
.ck-burger.is-open span:nth-child(2) { opacity: 0; }
.ck-burger.is-open span:nth-child(3) { top: 8.5px; transform: rotate(-45deg); }

/* --------------------------------------------------- mobile breakpoint --- */
@media screen and (max-width: 1199px) {
  .ck-header { height: 60px; }
  .hdr-nav,
  .ck-btn,
  .ck-lang { display: none; }
  .ck-header__logo { top: 15px; left: 20px; width: auto; }
  .ck-header__logo img { width: auto; height: 30px; }
  .ck-burger { display: block; }
}
@media screen and (min-width: 1200px) {
  .ck-mnav { display: none !important; }
}

/* ==========================================================================
   MOBILE MENU (replaces the T282 burger panel)
   ========================================================================== */
.ck-mnav {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99998;
  display: none;
}
.ck-mnav.is-open { display: block; }
.ck-mnav__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.ck-mnav__panel {
  position: relative;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #0d1240;
  padding: 44px 20px 70px;
  text-align: center;
}
.ck-mnav__list,
.ck-mnav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ck-mnav__item { margin: 0 0 20px; }
.ck-mnav__link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #f0f4f8;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.17;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ck-mnav__sub {
  display: none;
  margin-top: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(240, 244, 248, 0.18);
}
.ck-mnav__item.is-open > .ck-mnav__sub { display: block; }
.ck-mnav__sub li { margin: 0 0 20px; }
.ck-mnav__sub a {
  display: block;
  color: #f0f4f8;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 23px;
  font-weight: 300;
  line-height: 1.22;
  text-decoration: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ck-footer {
  background-color: #102a43;
  padding: 74px 0 107px;               /* matches the old 402px artboard */
  font-family: 'Inter', Arial, sans-serif;
  overflow: hidden;
}
.ck-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 439px 231px 254px minmax(0, 1fr);
  align-items: start;
}

/* ------------------------------------------------------ brand / social --- */
.ck-footer__logo { display: block; width: 120px; line-height: 0; }
.ck-footer__logo img { display: block; width: 120px; height: auto; }

.ck-footer__social {
  list-style: none;
  margin: 19px 0 0;
  padding: 0;
  display: flex;
  gap: 8px;
}
.ck-footer__social a { display: block; line-height: 0; }
.ck-footer__social img { display: block; width: 25px; height: 25px; }

.ck-footer__payments-title {
  margin: 68px 0 0;
  color: #ffffff;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ck-footer__payments {
  list-style: none;
  margin: 8px 0 0 -8px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}
.ck-footer__payments img { display: block; }
.ck-pay--bank     { width: 48px; height: auto; }
.ck-pay--payoneer { width: 62px; height: auto; transform: rotate(1deg); }
.ck-pay--paypal   { width: 46px; height: auto; }
.ck-pay--tipalti  { width: 38px; height: auto; }

/* ------------------------------------------------------------- columns --- */
.ck-footer__col h2 {
  margin: 0 0 7px;
  color: #ffffff;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ck-footer__col ul { list-style: none; margin: 0; padding: 0; }
.ck-footer__col li { margin: 0 0 4px; }
.ck-footer__col li:last-child { margin-bottom: 0; }
.ck-footer__col a {
  color: #d9e2ec;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  text-decoration: none;
}
.ck-footer__col a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- responsive --- */
@media screen and (max-width: 1199px) {
  .ck-footer__inner {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 0 24px;
  }
}
@media screen and (max-width: 959px) {
  .ck-footer { padding: 60px 0 60px; }
  .ck-footer__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 24px;
  }
  .ck-footer__brand { grid-column: 1 / -1; }
  .ck-footer__payments-title { margin-top: 48px; }
}
@media screen and (max-width: 639px) {
  .ck-footer { padding: 48px 0 56px; }
  .ck-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 12px;
    gap: 40px 16px;
  }
  .ck-footer__col--resources { grid-column: 1 / -1; }
  .ck-footer__payments { flex-wrap: wrap; gap: 16px; }
}