/* ==========================================================================
   roots-footer — the only front-end stylesheet of the package.

   Figma: Footer 20:2994 (hills 20:2914 + Frame 278 20:2916), desktop 1728.

   House rules: every selector naming a package class is written twice in
   one list — `.root .el` and `#top #wrap_all .root .el` — so Enfold's
   `#top #wrap_all .all_colors h2 / a` colour rules (2,1,1) lose on the
   class count. No !important. Longhand margin/padding only.
   ========================================================================== */

@property --roots-fb { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --roots-ft-tt { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --roots-ft-tb { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

.roots-ft,
#top #wrap_all .roots-ft {
  --roots-ft-bg: #3b2a20;
  --roots-ft-fg: #f1ede1;
  --roots-ft-accent: #b39b75;
  --roots-ft-dim: rgba(241, 237, 225, 0.72);
  --roots-ft-max: 1728px;
  --roots-ft-pad-x: clamp(20px, 9.2593vw, 160px);   /* 160 / 1728 — same ramp as the header */
  --roots-ft-pad-t: clamp(72px, 8.1019vw, 140px);   /* 140 / 1728 */
  --roots-ft-pad-b: 72px;                            /* holds the 56px corner button at every width */
  --roots-ft-row-gap: clamp(48px, 4.1667vw, 72px);  /* 72 / 1728 */
  --roots-ft-col-gap: clamp(48px, 6.9444vw, 120px); /* 120 / 1728 */
  --roots-ft-ease: 0.3s ease;
  --roots-ft-font: "Inter", "Helvetica Neue", Arial, sans-serif;
  /* cap-trim metrics — DESIGN constants (Inter v20); a harness never overrides these */
  --cap-b: 0.7275;
  --desc: 0.1362;
  /* unregistered COPIES the trim reads — a harness may override these */
  --cap-b-t: var(--cap-b);
  --desc-t: var(--desc);
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
  .roots-ft, #top #wrap_all .roots-ft { --roots-fb: 1; }
}

/* --------------------------------------------------------------------------
   Cap trim (project-wide pattern; the tokens are this package's own)
   -------------------------------------------------------------------------- */

.roots-ft .roots-ft-t,
#top #wrap_all .roots-ft .roots-ft-t {
  display: block;
  --roots-ft-tt: calc(var(--roots-fb) * (var(--lh) - var(--fs) * var(--cap-b-t)) / 2);
  --roots-ft-tb: calc(var(--roots-fb) * ((var(--lh) - var(--fs)) / 2 + var(--fs) * var(--desc-t)));
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
  margin-top: calc(-1 * var(--roots-ft-tt));
  margin-bottom: calc(-1 * var(--roots-ft-tb));
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.roots-ft,
.roots-ft *,
.roots-ft *::before,
.roots-ft *::after,
#top #wrap_all .roots-ft,
#top #wrap_all .roots-ft *,
#top #wrap_all .roots-ft *::before,
#top #wrap_all .roots-ft *::after {
  box-sizing: border-box;
}

.roots-ft,
#top #wrap_all .roots-ft {
  position: relative;
  display: block;
  clear: both; /* Enfold's sections are floats: without this the footer's box starts at the top of #main */
  width: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  background: transparent;
  color: var(--roots-ft-fg);
  font-family: var(--roots-ft-font);
}

.roots-ft .roots-ft__sr,
#top #wrap_all .roots-ft .roots-ft__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  margin-top: -1px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: -1px;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
}

/* Enfold's own scroll-to-top arrow steps aside for ours. */
.roots-ft-has-top #scroll-top-link,
#top.roots-ft-has-top #scroll-top-link {
  display: none;
}

/* --------------------------------------------------------------------------
   Hills (Figma 20:2914, 1728 × 143): the section above shows through
   -------------------------------------------------------------------------- */

.roots-ft .roots-ft__shape,
#top #wrap_all .roots-ft .roots-ft__shape {
  display: block;
  width: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  line-height: 0;
  background-color: var(--roots-ft-shape-bg, transparent);
  /* a 2px brown strip under the hills' feet closes any sub-pixel seam with the section below */
  background-image: linear-gradient(to top, var(--roots-ft-bg) 2px, transparent 2px);
  background-repeat: no-repeat;
}

.roots-ft .roots-ft__shape svg,
#top #wrap_all .roots-ft .roots-ft__shape svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* --------------------------------------------------------------------------
   The brown section (Frame 278)
   -------------------------------------------------------------------------- */

.roots-ft .roots-ft__main,
#top #wrap_all .roots-ft .roots-ft__main {
  position: relative;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: var(--roots-ft-pad-t);
  padding-right: 0;
  padding-bottom: var(--roots-ft-pad-b);
  padding-left: 0;
  background-color: var(--roots-ft-bg);
  color: var(--roots-ft-fg);
}

.roots-ft .roots-ft__inner,
#top #wrap_all .roots-ft .roots-ft__inner {
  display: flex;
  flex-direction: column;
  row-gap: var(--roots-ft-row-gap);
  max-width: var(--roots-ft-max);
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 0;
  padding-right: var(--roots-ft-pad-x);
  padding-bottom: 0;
  padding-left: var(--roots-ft-pad-x);
}

/* ---- top row: logo + columns ---- */

.roots-ft .roots-ft__top,
#top #wrap_all .roots-ft .roots-ft__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: var(--roots-ft-col-gap);
  row-gap: 56px;
}

.roots-ft .roots-ft__logo,
#top #wrap_all .roots-ft .roots-ft__logo {
  display: block;
  flex: 0 0 auto;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  line-height: 0;
  text-decoration: none;
}

.roots-ft .roots-ft__logo-img,
#top #wrap_all .roots-ft .roots-ft__logo-img {
  display: block;
  width: 177px;
  height: 112px;
  max-width: none;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

.roots-ft .roots-ft__cols,
#top #wrap_all .roots-ft .roots-ft__cols {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--roots-ft-col-gap);
  row-gap: 48px;
}

.roots-ft .roots-ft__col,
#top #wrap_all .roots-ft .roots-ft__col {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 32px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  background: transparent;
}

/* ---- column heading: Inter 500 14/20, +0.56, uppercase, gold ---- */

.roots-ft .roots-ft__heading,
#top #wrap_all .roots-ft .roots-ft__heading {
  --fs: 14px;
  --lh: 20px;
  margin-right: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  color: var(--roots-ft-accent);
  font-family: var(--roots-ft-font);
  font-size: var(--fs);
  font-weight: 500;
  line-height: var(--lh);
  letter-spacing: 0.56px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- lists ---- */

.roots-ft .roots-ft__menu,
.roots-ft .roots-ft__socials,
.roots-ft .roots-ft__legal,
#top #wrap_all .roots-ft .roots-ft__menu,
#top #wrap_all .roots-ft .roots-ft__socials,
#top #wrap_all .roots-ft .roots-ft__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style: none;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

.roots-ft .roots-ft__menu,
#top #wrap_all .roots-ft .roots-ft__menu {
  row-gap: 20px;
}

.roots-ft .roots-ft__socials,
#top #wrap_all .roots-ft .roots-ft__socials {
  row-gap: 16px;
}

.roots-ft .roots-ft__legal,
#top #wrap_all .roots-ft .roots-ft__legal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 32px;
  row-gap: 12px;
}

/* one row: the 6px gold dot (Figma "Ellipse 6", at .4) + 8px + the link */
.roots-ft .roots-ft__item,
#top #wrap_all .roots-ft .roots-ft__item {
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.roots-ft .roots-ft__item::before,
#top #wrap_all .roots-ft .roots-ft__item::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background-image: url("../assets/dot.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 6px 6px;
  opacity: 0.4;
  transition: opacity var(--roots-ft-ease);
}

.roots-ft .roots-ft__item:hover::before,
.roots-ft .roots-ft__item:focus-within::before,
#top #wrap_all .roots-ft .roots-ft__item:hover::before,
#top #wrap_all .roots-ft .roots-ft__item:focus-within::before {
  opacity: 1;
}

/* ---- links: Inter 400 18/28 at .72, cream + underline on hover ---- */

.roots-ft .roots-ft__link,
#top #wrap_all .roots-ft .roots-ft__link {
  --fs: 18px;
  --lh: 28px;
  margin-right: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--roots-ft-dim);
  font-family: var(--roots-ft-font);
  font-size: var(--fs);
  font-weight: 400;
  line-height: var(--lh);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  transition: color var(--roots-ft-ease);
}

.roots-ft .roots-ft__item:hover .roots-ft__link,
.roots-ft .roots-ft__item:focus-within .roots-ft__link,
#top #wrap_all .roots-ft .roots-ft__item:hover .roots-ft__link,
#top #wrap_all .roots-ft .roots-ft__item:focus-within .roots-ft__link {
  color: var(--roots-ft-fg);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

.roots-ft .roots-ft__link:focus-visible,
.roots-ft .roots-ft__social-link:focus-visible,
.roots-ft .roots-ft__contact:focus-visible,
.roots-ft .roots-ft__copy-link:focus-visible,
.roots-ft .roots-ft__logo:focus-visible,
.roots-ft .roots-ft__top-btn:focus-visible,
#top #wrap_all .roots-ft .roots-ft__link:focus-visible,
#top #wrap_all .roots-ft .roots-ft__social-link:focus-visible,
#top #wrap_all .roots-ft .roots-ft__contact:focus-visible,
#top #wrap_all .roots-ft .roots-ft__copy-link:focus-visible,
#top #wrap_all .roots-ft .roots-ft__logo:focus-visible,
#top #wrap_all .roots-ft .roots-ft__top-btn:focus-visible {
  outline: 2px solid var(--roots-ft-accent);
  outline-offset: 4px;
}

/* ---- socials: label column 85 wide so the arrows line up, 16 to the 18px arrow ---- */

.roots-ft .roots-ft__social-link,
#top #wrap_all .roots-ft .roots-ft__social-link {
  display: flex;
  align-items: center;
  column-gap: 16px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  background: transparent;
  color: var(--roots-ft-dim);
  text-decoration: none;
}

.roots-ft .roots-ft__social-label,
#top #wrap_all .roots-ft .roots-ft__social-label {
  min-width: 85px;
}

.roots-ft .roots-ft__social-icon,
#top #wrap_all .roots-ft .roots-ft__social-icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  line-height: 0;
  opacity: 0.72;
  transition: opacity var(--roots-ft-ease);
}

.roots-ft .roots-ft__social-icon svg,
#top #wrap_all .roots-ft .roots-ft__social-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.roots-ft .roots-ft__item:hover .roots-ft__social-icon,
.roots-ft .roots-ft__item:focus-within .roots-ft__social-icon,
#top #wrap_all .roots-ft .roots-ft__item:hover .roots-ft__social-icon,
#top #wrap_all .roots-ft .roots-ft__item:focus-within .roots-ft__social-icon {
  opacity: 1;
}

/* ---- contact details: Inter 400 18/28 cream; the address 18/24 ---- */

.roots-ft .roots-ft__contact,
#top #wrap_all .roots-ft .roots-ft__contact {
  --fs: 18px;
  --lh: 28px;
  margin-right: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  background: transparent;
  color: var(--roots-ft-fg);
  font-family: var(--roots-ft-font);
  font-size: var(--fs);
  font-style: normal;
  font-weight: 400;
  line-height: var(--lh);
  letter-spacing: 0;
  text-decoration: none;
  transition: color var(--roots-ft-ease);
}

.roots-ft .roots-ft__contact--address,
#top #wrap_all .roots-ft .roots-ft__contact--address {
  --lh: 24px;
}

.roots-ft a.roots-ft__contact:hover,
#top #wrap_all .roots-ft a.roots-ft__contact:hover {
  color: var(--roots-ft-fg);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

/* ---- bottom row ---- */

.roots-ft .roots-ft__bottom,
#top #wrap_all .roots-ft .roots-ft__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 32px;
  row-gap: 24px;
}

.roots-ft .roots-ft__copy,
#top #wrap_all .roots-ft .roots-ft__copy {
  --fs: 18px;
  --lh: 28px;
  margin-right: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  color: var(--roots-ft-dim);
  font-family: var(--roots-ft-font);
  font-size: var(--fs);
  font-weight: 400;
  line-height: var(--lh);
  letter-spacing: 0;
  white-space: nowrap;
}

.roots-ft .roots-ft__copy-link,
#top #wrap_all .roots-ft .roots-ft__copy-link {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  background: transparent;
  color: var(--roots-ft-fg);
  font-family: var(--roots-ft-font);
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: color var(--roots-ft-ease);
}

.roots-ft .roots-ft__copy-link:hover,
#top #wrap_all .roots-ft .roots-ft__copy-link:hover {
  color: var(--roots-ft-accent);
}

/* ---- back to top: 56 × 56 gold square in the corner, 24px chevron ---- */

.roots-ft .roots-ft__top-btn,
#top #wrap_all .roots-ft .roots-ft__top-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--roots-ft-accent);
  color: var(--roots-ft-bg);
  line-height: 0;
  text-decoration: none;
  transition: opacity var(--roots-ft-ease);
}

.roots-ft .roots-ft__top-btn:hover,
#top #wrap_all .roots-ft .roots-ft__top-btn:hover {
  opacity: 0.85;
}

.roots-ft .roots-ft__top-btn svg,
#top #wrap_all .roots-ft .roots-ft__top-btn svg {
  display: block;
  width: 24px;
  height: 24px;
  transform: rotate(180deg); /* the export is lucide:chevron-down; the design turns it to point up */
}

/* --------------------------------------------------------------------------
   Narrower screens (no Figma frame yet): logo above the columns, then one
   column per row. The README documents these widths.
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {
  .roots-ft .roots-ft__top,
  #top #wrap_all .roots-ft .roots-ft__top {
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .roots-ft .roots-ft__cols,
  #top #wrap_all .roots-ft .roots-ft__cols {
    flex-direction: column;
    row-gap: 40px;
  }

  .roots-ft .roots-ft__bottom,
  #top #wrap_all .roots-ft .roots-ft__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .roots-ft .roots-ft__copy,
  #top #wrap_all .roots-ft .roots-ft__copy {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .roots-ft,
  .roots-ft *,
  .roots-ft *::before,
  #top #wrap_all .roots-ft,
  #top #wrap_all .roots-ft *,
  #top #wrap_all .roots-ft *::before {
    transition-duration: 0.01s;
  }
}