/* Footer — port of website-v5 Footer/styles.ts (sticky-reveal shell skipped;
   normal flow is the v5 SSR-safe default). */

.ckl-footer__blue {
  background-color: var(--ckl-blue);
  padding-top: 7.13rem; /* v5 styles.ts:86 */
  padding-bottom: 7.35rem; /* v5 styles.ts:87 */
  color: var(--ckl-white);
  position: relative;
}

@media (max-width: 768px) {
  .ckl-footer__blue {
    padding-top: 4rem;
  }
}

/* ---------------------------------------------------------------------- head */

.ckl-footer__head {
  display: flex;
  gap: 7.0625rem;
}

.ckl-footer__head * {
  margin: 0;
}

.ckl-footer__say-hello h3,
.ckl-footer__newsletter h3 {
  color: var(--ckl-white);
  font-size: clamp(1.4375rem, 2.1vw, 2.0625rem);
  font-weight: 700;
  font-family: var(--ckl-font-text);
  margin-bottom: 1.5rem;
}

.ckl-footer__say-hello h3 {
  max-width: 18rem;
}

.ckl-footer__newsletter h3 {
  max-width: 31rem;
  margin-bottom: 2.1875rem;
}

@media (max-width: 1024px) {
  .ckl-footer__head {
    flex-direction: column;
    gap: 4rem;
  }

  .ckl-footer__say-hello {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .ckl-footer__say-hello {
    width: 90%;
  }
}

/* ---------------------------------------------------------------- newsletter */

.ckl-newsletter-form {
  width: 22.4375rem;
  position: relative;
}

@media (max-width: 768px) {
  .ckl-newsletter-form {
    width: 100%;
  }
}

.ckl-newsletter-form > input {
  width: 100%;
  border: none;
  background-color: transparent;
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid var(--ckl-white);
  padding-right: 1.5rem;
  /* This transition used to be dead — nothing changed border-bottom-color. It now
     drives the focus indicator below. */
  transition: border-bottom-color 0.25s ease-in-out;
  font-family: var(--ckl-font-text);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ckl-white);
}

/* ⚠️ Deliberate divergence: v5 declares `outline: none; box-shadow: none` here
   with NO replacement, leaving the field with no focus indicator at all
   (Footer/styles.ts:192-195). We keep the native outline suppressed to match the
   look, but thicken and recolour the underline so keyboard focus stays visible. */
.ckl-newsletter-form > input:focus-visible {
  outline: none;
  box-shadow: none;
  border-bottom-width: 0.125rem;
  border-bottom-color: var(--ckl-aqua-blue);
}

.ckl-newsletter-form > input::placeholder {
  color: var(--ckl-white);
  font-size: 1rem;
  font-weight: 400;
}

.ckl-newsletter-form > button {
  background-color: transparent;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.ckl-newsletter-form > button:hover {
  transform: translateX(0.1rem);
}

.ckl-newsletter-form > button::after {
  content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 8H15" stroke="white" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 1L15 8L8 15" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.ckl-newsletter-form > button:focus-visible {
  outline: 0.125rem solid var(--ckl-aqua-blue);
  outline-offset: 0.25rem;
}

/* In-flight state — port of v5's [data-loading='true'] (Footer/styles.ts:233-250).
   `is-busy` was already being added and removed by newsletter.js and had NO CSS
   whatsoever, so a submit gave the reader no feedback at all. Anchored on the
   class the JS already emits rather than introducing a new attribute. */
.ckl-newsletter-form.is-busy > button {
  cursor: progress;
}

.ckl-newsletter-form.is-busy > button:hover {
  transform: none;
}

.ckl-newsletter-form.is-busy > button::after {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  border: 0.125rem solid rgb(255 255 255 / 35%);
  border-top-color: var(--ckl-white);
  border-radius: 50%;
  animation: ckl-newsletter-spin 0.7s linear infinite;
}

@keyframes ckl-newsletter-spin {
  to { transform: rotate(360deg); }
}

.ckl-newsletter-form__message {
  color: var(--ckl-white);
  font-family: var(--ckl-font-text);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0.75rem 0 0;
  opacity: 0.9;
  animation: ckl-newsletter-fade 0.3s ease-in-out;
}

/* v5 uses errorOnDark #ffb4ab (theme.ts:44). The blog was using aqua, which is
   both a divergence and semantically wrong for an error. */
.ckl-newsletter-form__message.is-error {
  color: var(--ckl-error-on-dark);
  opacity: 1;
}

@keyframes ckl-newsletter-fade {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 0.9; transform: translateY(0); }
}

/* ----------------------------------------------------------------------- mid */

.ckl-footer__mid {
  display: flex;
  gap: clamp(2rem, 5.2vw, 4.44rem); /* v5 styles.ts:267 */
  padding: 6.375rem 0 4.75rem;
}

.ckl-footer__mid * {
  margin: 0;
}

.ckl-footer__mid-section {
  flex: 1 1 0;
  min-width: 0;
}

/* First column (Company) lays its links in a 2×5 grid like v5. */
.ckl-footer__mid-section:nth-child(1) {
  flex: 0 0 auto;
  min-width: max-content;
}

.ckl-footer__mid-section:nth-child(1) ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 1.458rem; /* v5 styles.ts:320 */
  row-gap: 0.9284rem; /* v5 styles.ts:321 */
}

.ckl-footer__mid-section:nth-child(1) li {
  padding-bottom: 0;
}

.ckl-footer__mid-section > h3 {
  font-size: 1.3264rem; /* v5 styles.ts:331 */
  font-family: var(--ckl-font-tag);
  /* WHITE, not aqua. website-v5 Footer/styles.ts:329-335 rejects aqua here in
     so many words: "WHITE at full opacity (not aqua — the aqua read as
     washed-out)". This theme had regressed to the rejected value. */
  color: var(--ckl-white);
  font-weight: 700;
  line-height: 1.5; /* v5 styles.ts:337 */
  padding-bottom: 0.9284rem; /* v5 styles.ts:338 — was 1.75rem, ~88% too much */
  text-transform: uppercase;
}

.ckl-footer__mid-section ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.ckl-footer__mid-section li {
  padding: 0 0 0.9284rem; /* v5 styles.ts:350 */
  break-inside: avoid;
}

.ckl-footer__mid-section li:last-child {
  padding-bottom: 0;
}

.ckl-footer__mid-section li a,
.ckl-footer__mid-section li span {
  font-size: 0.9284rem; /* v5 styles.ts:359 */
  font-weight: 400;
  line-height: 1.5; /* v5 styles.ts:361 */
  font-family: var(--ckl-font-text);
  white-space: nowrap;
  display: inline-block;
}

.ckl-footer__mid-section li a {
  /* FOOTER_LINK_WHITE. v5 styles.ts:293-296 explicitly rejects the flat gray
     this theme was using (color-mix(#fff 72%, #313131)). */
  --sweep-from: rgb(255 255 255 / 70%);
  --sweep-to: var(--ckl-aqua-blue);
  color: var(--sweep-from);
  transition: color 0.2s ease-in-out;
}

.ckl-footer__mid-section li a:hover,
.ckl-footer__mid-section li a:focus-visible {
  color: var(--sweep-to);
}

/* Hover sweep. v5 applies textSweep to every footer link (styles.ts:369, 503,
   535); this theme only cross-faded the colour, and the .ckl-sweep-text utility
   in base.css had never been used by any template. Composed here rather than by
   adding the class in PHP, so the whole column inherits it. */
@media (hover: hover) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ckl-footer__mid-section li a,
    .ckl-footer__tel,
    .ckl-footer__email {
      background-color: var(--sweep-from, currentColor);
      background-image: linear-gradient(var(--sweep-to), var(--sweep-to));
      background-repeat: no-repeat;
      background-position: left center;
      background-size: 0% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: var(--ckl-sweep-transition);
    }

    .ckl-footer__mid-section li a:hover,
    .ckl-footer__mid-section li a:focus-visible,
    .ckl-footer__tel:hover,
    .ckl-footer__tel:focus-visible,
    .ckl-footer__email:hover,
    .ckl-footer__email:focus-visible {
      background-size: 100% 100%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .ckl-footer__mid-section li a,
  .ckl-footer__tel,
  .ckl-footer__email {
    transition: color 0.2s ease-in-out;
  }
}

.ckl-footer__plain-item {
  color: rgb(255 255 255 / 70%); /* FOOTER_LINK_WHITE, v5 styles.ts:302 */
  cursor: default;
}

@media (max-width: 1024px) {
  .ckl-footer__mid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1rem;
    padding: 2.5rem 0;
    overflow: hidden;
  }

  .ckl-footer__mid-section {
    min-width: 0;
    overflow: hidden;
  }

  .ckl-footer__mid-section:nth-child(1) {
    flex: unset;
    min-width: 0;
  }

  .ckl-footer__mid-section:nth-child(1) ul {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  .ckl-footer__mid-section li a {
    white-space: normal;
    display: block;
    overflow-wrap: anywhere;
  }
}

/* ----------------------------------------------------------------------- sub */

.ckl-footer__sub {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.ckl-footer__sub-logo {
  margin-bottom: 2.4375rem;
  color: var(--ckl-white);
}

.ckl-footer__sub-logo svg {
  height: 30px;
  width: auto;
}

.ckl-footer__sub-links {
  display: flex;
  gap: 2.8125rem;
  position: relative;
}

.ckl-footer__city {
  font-style: normal;
}

.ckl-footer__city * {
  margin: 0;
}

.ckl-footer__city-name {
  display: block;
  margin-bottom: 0.5625rem;
  font-size: 1.061rem; /* v5 styles.ts:485 */
  font-weight: 600; /* v5 styles.ts:486 — the variable face has a real 600 */
  color: var(--ckl-white);
}

/* ⚠️ Two defects fixed here, both invisible by inspection:
   1. `--sweep-to` was never defined for this element, so
      `linear-gradient(var(--sweep-to), …)` was invalid at computed-value time →
      `background-image: none` → NO sweep layer was ever painted, even though the
      element is listed in the sweep block above.
   2. `transition: color .2s` sat AFTER that block at equal specificity and won,
      so `background-size` had no transition either.
   v5 has defect 2 as well (its `CityLink > a` rule outranks textSweep by
   specificity). We implement the intent — a 0.5s wipe — and record the
   divergence in §15. */
.ckl-footer__tel {
  display: block;
  font-size: 0.663rem; /* v5 styles.ts:499 — was 0.75rem, 13% too large */
  font-weight: 400;
  line-height: 150%;
  --sweep-from: var(--ckl-white);
  --sweep-to: var(--ckl-aqua-blue);
  color: var(--sweep-from);
}

.ckl-footer__tel:hover,
.ckl-footer__tel:focus-visible {
  color: var(--sweep-to);
}

.ckl-footer__address p {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 150%;
}

.ckl-footer__email {
  font-size: 1.061rem; /* v5 styles.ts:532 */
  font-weight: 400;
  /* No static underline: v5 styles.ts:531-533 removed it ("the static underline
     was ours, not the design's"). */
  text-decoration: none;
  --sweep-from: var(--ckl-white);
  --sweep-to: var(--ckl-aqua-blue);
  /* No `transition` here: it would clobber the sweep declared in the guarded
     block above (equal specificity, later source order) — the same defect that
     was silently killing the phone number's wipe. */
  color: var(--sweep-from);
}

.ckl-footer__email:hover,
.ckl-footer__email:focus-visible {
  color: var(--sweep-to);
}

.ckl-footer__sub-right {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.ckl-footer__networks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ckl-footer__network {
  display: flex;
  margin-left: 1rem;
  /* 1.406rem, not 2rem. v5 styles.ts:559-564 names this exact regression: "the
     old 2rem rendered them 42% larger than the design". */
  width: 1.406rem;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease-in-out;
}

/* Without this the <img width="24" height="24"> ignores the container and the
   1.406rem width above has no visual effect at all (v5 styles.ts:569-572). */
.ckl-footer__network img,
.ckl-footer__network svg {
  width: 100%;
  height: auto;
}

/* The X/Twitter glyph is wider than the others, so v5 gives it its own box
   (styles.ts:574-582). Without this it renders visibly oversized next to the
   rest of the strip. */
.ckl-footer__network[aria-label='X'],
.ckl-footer__network[aria-label='Twitter'] {
  width: 1.406rem;
  height: 1.318rem;
}

.ckl-footer__network[aria-label='X'] img,
.ckl-footer__network[aria-label='X'] svg,
.ckl-footer__network[aria-label='Twitter'] img,
.ckl-footer__network[aria-label='Twitter'] svg {
  width: 0.879rem;
  height: 0.879rem;
}

.ckl-footer__network:hover {
  opacity: 0.7;
}

.ckl-footer__copyright {
  display: flex;
  justify-content: flex-end;
  font-size: 0.9284rem; /* v5 styles.ts:603 */
  color: rgb(255 255 255 / 70%); /* FOOTER_LINK_WHITE, v5 styles.ts:604 */
  font-family: var(--ckl-font-tag);
  font-weight: 400;
}

@media (max-width: 1024px) {
  .ckl-footer__sub {
    flex-direction: column;
    align-items: flex-start;
  }

  .ckl-footer__networks {
    justify-content: flex-start;
    margin-top: 2rem;
  }

  .ckl-footer__network {
    margin-left: 0;
    margin-right: 1rem;
  }

  .ckl-footer__copyright {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .ckl-footer__city {
    margin-bottom: 1.5rem;
  }

  .ckl-footer__sub-links {
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------------- tunnel bar */

.ckl-footer__tunnel-bar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(3.5rem, 5.82vw, 7.75rem);
}

.ckl-footer__tunnel-bar canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .ckl-newsletter-form > input,
  .ckl-newsletter-form > button,
  .ckl-newsletter-form__message,
  .ckl-footer__tel,
  .ckl-footer__email,
  .ckl-footer__network,
  .ckl-footer__address--link {
    transition: none !important;
    animation: none !important;
  }

  /* Static ring — still reads as busy without spinning (v5 does the same). */
  .ckl-newsletter-form.is-busy > button::after {
    animation: none !important;
  }
}

/* Addresses are Google Maps links in v5 (Footer/index.tsx:186-203, 221-238);
   this theme rendered them as plain, unclickable text. */
.ckl-footer__address--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.ckl-footer__address--link:hover,
.ckl-footer__address--link:focus-visible {
  color: var(--ckl-aqua-blue);
}