/* ==========================================================================
   CLOZSY — GLOBAL FOOTER  (Phase 4)
   --------------------------------------------------------------------------
   Scope: the Elementor footer location and .clz-footer* classes only. No bare
   element selectors, so nothing leaks into WooCommerce or future pages, and
   nothing here can reach the approved Phase 3 header.

   Every colour, space, radius and motion value reads a --clz-* token. There
   are no literal colour values in this file.

   The footer deliberately borrows the header's container width and horizontal
   padding so the two align to the same optical gutter at every breakpoint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FOOTER-LOCAL MEASUREMENTS
   Phase 2 has no footer tokens, so the few the footer needs are declared here
   rather than by editing the approved variables.css.
   -------------------------------------------------------------------------- */
body {
  /* Mirrors the header on purpose — same gutter, same measure. */
  --clz-footer-max:      var(--clz-header-max);
  --clz-footer-x:        var(--clz-space-7);

  /* Slightly under the header's 150px so the footer mark reads as a sign-off
     rather than a second masthead. */
  --clz-footer-logo-w:   140px;

  --clz-footer-col-gap:  var(--clz-space-8);
}

/* --------------------------------------------------------------------------
   2. SHELL
   A single hairline is the only separation between page and footer, which is
   why the footer keeps the page background rather than introducing a panel.
   -------------------------------------------------------------------------- */
.elementor-location-footer {
  background-color: var(--clz-bg);
  border-top: 1px solid var(--clz-border);
}

.clz-footer__inner {
  --display: block;
  display: block !important;
  width: 100% !important;
  max-width: var(--clz-footer-max) !important;
  margin-inline: auto !important;
  padding: 0 var(--clz-footer-x) !important;
}

/* Elementor 4 renders shortcode widgets as
   .elementor-widget-shortcode > .elementor-shortcode. Both wrappers are
   dissolved so the authored markup is the real layout child. */
.clz-footer__row > .elementor-widget-shortcode,
.clz-footer__row > .elementor-widget-shortcode > .elementor-shortcode {
  display: contents;
}

.clz-footer__row {
  padding: 0 !important;
  background: none !important;
}

/* --------------------------------------------------------------------------
   3. TOP ROW — brand left, link columns trailing right
   -------------------------------------------------------------------------- */
/* Elementor containers default to `flex-direction: column` through their own
   --flex-direction custom property, so the row direction has to be asserted
   explicitly or the brand and the link columns stack on desktop. */
.clz-footer__top {
  --flex-direction: row;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between;
  gap: var(--clz-space-7) var(--clz-space-8);
  padding-block: var(--clz-space-8) var(--clz-space-7) !important;
}

/* --------------------------------------------------------------------------
   4. BRAND
   -------------------------------------------------------------------------- */
.clz-footer__brand {
  flex: 1 1 300px;
  max-width: 420px;
  min-width: 0;
}

.clz-footer__logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  border-radius: var(--clz-radius-sm);
  transition: opacity var(--clz-transition);
}

.clz-footer__logo:hover { opacity: 0.85; }

.clz-footer__logo:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
}

.clz-footer__logo img {
  display: block;
  width: var(--clz-footer-logo-w);
  height: auto;
  max-width: 100%;
  /* Same optical correction the header uses: the PNG canvas carries ~20%
     transparent padding above the artwork and ~12% below, so the visible ink
     sits 3.8% of the canvas height below the box centre. */
  transform: translateY(-3.8%);
}

.clz-footer__statement {
  margin: var(--clz-space-4) 0 0;
  max-width: 42ch;
  font-family: var(--clz-font-body);
  font-size: 16px;
  font-weight: var(--clz-fw-regular);
  line-height: var(--clz-lh-normal);
  color: var(--clz-text-secondary);
}

/* --------------------------------------------------------------------------
   5. LINK COLUMNS
   -------------------------------------------------------------------------- */
.clz-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clz-space-6) var(--clz-footer-col-gap);
}

.clz-footer__column {
  /* A common minimum keeps the columns on a shared rhythm, so the cluster
     stays balanced whether there are two of them today or five later. */
  min-width: 150px;
}

/* The class is doubled deliberately. Column headings are real <h2> elements
   for document structure and aria-labelledby, but the Elementor kit emits a
   global `.elementor-kit-11 h2` rule at specificity (0,1,1) that would render
   them as 48px Outfit display headings. Doubling reaches (0,2,0) and restores
   the intended 12px Manrope label without !important. */
.clz-footer__title.clz-footer__title {
  position: relative;
  margin: 0 0 var(--clz-space-4);
  padding-bottom: var(--clz-space-3);
  font-family: var(--clz-font-body);
  /* px, not rem: Astra reduces the root font-size at its own breakpoints, which
     would silently drag these labels below the intended 12-13px. */
  font-size: 12px;
  font-weight: var(--clz-fw-semibold);
  line-height: 1.2;
  letter-spacing: var(--clz-ls-caps);
  text-transform: uppercase;
  color: var(--clz-text-muted);
}

/* The one piece of gold in the footer. A 16px hairline under each column
   heading, echoing the header's active-nav indicator so both bars read as the
   same system. Links themselves stay ungilded. */
.clz-footer__title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 16px;
  height: 1px;
  background-color: var(--clz-accent);
}

.clz-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--clz-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.clz-footer__links li { margin: 0; }

.clz-footer__links a {
  display: inline-block;
  font-family: var(--clz-font-body);
  font-size: 15px;
  font-weight: var(--clz-fw-regular);
  line-height: 1.4;
  color: var(--clz-text-secondary);
  text-decoration: none;
  transition: color var(--clz-transition);
}

.clz-footer__links a:hover,
.clz-footer__links a:focus-visible { color: var(--clz-text); }

.clz-footer__links a:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
  border-radius: var(--clz-radius-xs);
}

/* Current page, so the footer agrees with the header's active state. */
.clz-footer__links a[aria-current="page"] { color: var(--clz-text); }

/* --------------------------------------------------------------------------
   6. BOTTOM BAR
   -------------------------------------------------------------------------- */
.clz-footer__bottom {
  --flex-direction: row;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--clz-space-3) var(--clz-space-5);
  padding-block: var(--clz-space-5) !important;
  /* !important so an Elementor container border setting can never erase the
     one hairline that separates the bottom bar. */
  border-top: 1px solid var(--clz-border) !important;
}

.clz-footer__copyright {
  margin: 0;
  font-family: var(--clz-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--clz-text-muted);
}

.clz-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clz-space-2) var(--clz-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.clz-footer__legal a {
  font-family: var(--clz-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--clz-text-muted);
  text-decoration: none;
  transition: color var(--clz-transition);
}

.clz-footer__legal a:hover,
.clz-footer__legal a:focus-visible { color: var(--clz-text-secondary); }

.clz-footer__legal a:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
  border-radius: var(--clz-radius-xs);
}

/* --------------------------------------------------------------------------
   7. TABLET  (768px - 1024px)
   Brand takes the full measure, columns sit in a row beneath it.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body {
    --clz-footer-x:       var(--clz-space-5);
    --clz-footer-col-gap: var(--clz-space-7);
  }

  /* The three-block row is kept through tablet: measured at 1024 and 768 it
     still seats a 350-520px brand beside both link columns without crowding,
     so forcing a stack here would only add an unnecessary reflow step. */
  .clz-footer__top {
    gap: var(--clz-space-6) var(--clz-space-7);
    padding-block: var(--clz-space-7) var(--clz-space-6) !important;
  }

  .clz-footer__brand { max-width: 520px; }

  .clz-footer__columns { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   8. MOBILE  (below 768px)
   Intentionally stacked: brand, then each column, then the bottom bar. No
   accordion — with this few links it would add interaction without value.

   The bound is 767.98px for the same fractional-viewport reason as the header.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  body { --clz-footer-x: var(--clz-space-4); }

  /* !important mirrors the base rule, which has to assert row direction over
     Elementor's column default. */
  .clz-footer__top {
    flex-direction: column !important;
    gap: var(--clz-space-6);
    padding-block: var(--clz-space-6) var(--clz-space-5) !important;
  }

  .clz-footer__brand {
    flex: 1 1 auto;
    max-width: none;
  }

  .clz-footer__statement { max-width: none; }

  .clz-footer__columns {
    flex-direction: column;
    gap: var(--clz-space-6);
  }

  .clz-footer__column { min-width: 0; }

  .clz-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--clz-space-3);
    padding-block: var(--clz-space-4) !important;
  }
}

/* --------------------------------------------------------------------------
   9. MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .clz-footer__logo,
  .clz-footer__links a,
  .clz-footer__legal a {
    transition-duration: 1ms !important;
  }
}