/* ===== assets/css/components/footer.css ===== */
/* =============================================================================
   footer.css — Varedat.io · 06 Footer
   WP mapping: assets/css/components/footer.css + template-parts/footer.php
   ============================================================================= */
/* v40: WHITE (client). Everything the footer needs re-derives from the light palette rather
   than from hard-coded values, so a theme switch later has one place to change. */
.site-footer {
  position: relative;
  background: #fefefe;
  color: var(--color-ink);
  border-block-start: 1px solid var(--color-line);
  padding-block: clamp(3rem, 6vw, 5rem) 0;
  --wordmark-color: rgba(15, 20, 25, 0.22);
}
.site-footer__inner { display: grid; gap: var(--space-7); }
.site-footer__logo { inline-size: clamp(9rem, 16vw, 12rem); block-size: auto; }
.site-footer__blurb {
  margin: var(--space-5) 0 0;
  font-size: var(--text-small); line-height: 1.9;
  color: var(--color-ink-2);
  max-inline-size: 40ch; text-wrap: pretty;
}
.site-footer__h {
  font-size: var(--text-label); font-weight: 600; letter-spacing: 0.06em;
  color: var(--color-ink-2);
  margin: 0 0 var(--space-4);
}
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.site-footer__nav a {
  color: var(--color-ink); text-decoration: none; font-size: var(--text-small);
  transition: color var(--transition-fast);
}
.site-footer__nav a:hover { color: var(--color-accent); }
.site-footer__nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

.contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.contact li { display: grid; gap: 2px; }
.contact__k { font-size: var(--text-label); color: var(--color-line-strong); }
.contact address, .contact__v {
  font-style: normal;
  font-size: var(--text-small);
  line-height: 1.85;
  color: var(--color-ink-2);
  text-decoration: none;
}
.contact__v { justify-self: start; color: var(--color-ink); border-block-end: 1px solid var(--color-line-strong); }
.contact__v:hover { color: var(--color-accent); border-color: currentColor; }
.contact__v:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.site-footer__base {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  border-block-start: 1px solid var(--color-line);
  padding-block: var(--space-5);
  font-size: var(--text-label);
  color: var(--color-ink-2);
}
.site-footer__base p { margin: 0; }
.site-footer__credit a { color: var(--color-ink); text-decoration: none; border-block-end: 1px solid var(--color-line-strong); }
.site-footer__credit a:hover { color: var(--color-accent); border-color: currentColor; }
.site-footer__credit a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.wordmark { margin-block: clamp(2.5rem, 6vw, 5rem) 0; }
.wordmark__canvas {
  display: block; inline-size: 100%;
  /* v41: bigger (client). The dot field scales with the canvas, so this is the only knob. */
  /* v42: the floor is 150, not 120. The word is long and the sampler caps the type at 72 % of
     the canvas height, so on a phone a shorter canvas makes the dot field a thin ribbon. */
  block-size: clamp(150px, 22vw, 320px);
}

.site-footer__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  padding-block-end: clamp(2rem, 5vw, 3.5rem);
  margin-block-end: clamp(2rem, 5vw, 3.5rem);
  border-block-end: 1px solid var(--color-line);
}
.site-footer__cta-line {
  margin: 0;
  font-family: "Morabba", var(--font-sans);
  font-weight: 900;
  font-size: clamp(1.5rem, 1rem + 1.9vw, 2.5rem);
  line-height: 1.3;
  text-wrap: balance;
}
.btn--ghost {
  background: transparent; color: var(--color-ink);
  border: 1px solid var(--color-ink);
  text-decoration: none; display: inline-block;
}
.btn--ghost:hover { background: var(--color-ink); color: var(--color-on-primary); }

@media (min-width: 64em) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) minmax(0, 12rem) minmax(0, 17rem);
    gap: var(--space-7);
    align-items: start;
  }
}