/* =====================================================================
   Footer — torn-paper animated wave strip + cream footer body
   ===================================================================== */

:root {
  --dm-footer-bg: var(--dm-bg-default-primary);
  --dm-footer-ink: var(--dm-fg-default-primary);
  --dm-footer-muted: var(--dm-fg-default-secondary);
  --dm-footer-rule: var(--dm-border-default-dark);
}

/* ---------------------------------------------------------------------
   Newsletter — full-bleed landscape hero that flows into the waves/footer
   --------------------------------------------------------------------- */
.dm-newsletter {
  position: relative;
  width: 100%;
  /* Figma frame: 700px tall at the ~1440px design width, 16/100/160px padding,
     centred flex column. The band is full-bleed, so a fixed 700px goes squat on
     a wide monitor — it tracks the design's ~48% of viewport width instead, and
     stays a min-height so the copy can never be clipped. */
  min-height: clamp(700px, 48vw, 1040px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 100px 160px;
  background-image: var(--dm-nl-bg);
  background-size: cover;
  /* Matches the design's framing: sky and ridge line above the copy, with the
     agave rows meeting the torn-paper waves at the bottom */
  background-position: center 35%;
  background-repeat: no-repeat;
  color: var(--dm-fg-default-white);
  isolation: isolate;
}

/* Figma: flat black filter at 35% over the photo (no gradient) */
.dm-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--dm-ext-black) 35%, transparent);
  pointer-events: none;
}

.dm-newsletter-inner {
  text-align: center;
  /* padding lives on the section (the Figma frame), not here */
  padding: 0;
}

.dm-newsletter-title {
  display: block;               /* a <span>: site-wide module title, not a heading */
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;             /* Figma: 110% */
  letter-spacing: -0.02em;      /* Figma: -2% */
  color: var(--dm-bg-default-white);               /* override global heading color */
  text-shadow: 0 2px 18px color-mix(in srgb, var(--color-forest) 35%, transparent);
}

.dm-newsletter-title-top {
  display: block;
  font-size: clamp(38px, 6vw, 80px);   /* heading/display: 80px */
}

.dm-newsletter-title-main {
  display: block;
  font-style: normal;                  /* heading/display is upright */
  font-size: clamp(38px, 6vw, 80px);   /* heading/display: 80px */
}

.dm-newsletter-sub {
  margin: 20px auto 0;
  max-width: 560px;
  font-family: var(--font-display);     /* heading/h6: IM FELL Double Pica */
  font-weight: 400;
  font-style: normal;
  font-size: clamp(17px, 1.6vw, 20px);  /* heading/h6: 20px */
  line-height: 1.2;             /* 120% */
  color: var(--dm-bg-default-white);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--color-forest) 35%, transparent);
}

/* Layout-only tweak — visual styling comes from the shared .dm-btn component */
.dm-newsletter-btn { margin-top: 34px; }

/* Medium (tablet) */
@media (max-width: 1023px) {
  .dm-newsletter { min-height: 700px; padding: 16px 40px 150px; }
}

/* Small (mobile) */
@media (max-width: 767px) {
  /* A touch taller on mobile so the Oaxaca landscape has more room to breathe.
     Even top/bottom padding keeps the copy vertically centred (the section is a
     centred flex column); extra bottom room clears the overlapping wave strip. */
  .dm-newsletter {
    background-image: var(--dm-nl-bg-mobile);
    min-height: 660px;
    padding: 60px 20px 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-newsletter-btn { transition: none; }
}

/* ---------------------------------------------------------------------
   Wave strip
   --------------------------------------------------------------------- */
.dm-footer-waves {
  position: relative;
  width: 100%;
  height: 150px;
  /* pull the strip up over the newsletter so the torn crests tear out of the
     landscape and blend down into the cream footer */
  margin-top: -150px;
  overflow: visible;       /* let the drifting crests spill over the section above */
  background: transparent;
  line-height: 0;
  z-index: 1;
}

.dm-footer-waves svg {
  position: absolute;
  bottom: -1px;            /* overlap the footer by 1px to avoid a hairline seam */
  left: 0;
  width: 100%;
  display: block;
}

.dm-footer-waves svg { will-change: transform; }

/* Heights as a % of the band == the 170:163:128:98 crest ratio, preserved at
   any band height. preserveAspectRatio="none" lets each path fill its height. */
.dm-footer-waves .layer-teal   { height: 100%;   }
.dm-footer-waves .layer-yellow { height: 95.88%; }
.dm-footer-waves .layer-green  { height: 75.29%; }
/* cream layer extends a few px into the footer to close the seam */
.dm-footer-waves .layer-cream  { height: 57.65%; bottom: -3px; }

@media (max-width: 1023px) { .dm-footer-waves { height: 120px; margin-top: -120px; } }
@media (max-width: 767px)  { .dm-footer-waves { height: 90px;  margin-top: -90px;  } }

/* No newsletter (non-US visitors): the waves still overlap whatever sits above
   them, so this gap, the same height as the strip, takes the overlap and keeps
   the last section's content (e.g. Instagram "Follow Us") clear of the crests. */
.dm-footer-waves-gap { height: 150px; background: var(--dm-bg-default-secondary); }
@media (max-width: 1023px) { .dm-footer-waves-gap { height: 120px; } }
@media (max-width: 767px)  { .dm-footer-waves-gap { height: 90px;  } }

/* ---------------------------------------------------------------------
   Footer body
   --------------------------------------------------------------------- */
.dm-footer {
  position: relative;
  z-index: 2;
  /* tuck 1px under the wave strip to close the hairline seam between them */
  margin-top: -1px;
  background: var(--dm-footer-bg);
  color: var(--dm-footer-ink);
}

.dm-footer-inner {
  padding: 64px 16px 40px;
}

.dm-footer a { color: inherit; text-decoration: none; }

/* Top region: logo | primary links | secondary block (desktop) */
.dm-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: start;
  padding-bottom: 44px;
}

.dm-footer-logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 224px;
  max-height: 92px;
  object-fit: contain;
}

/* ---- Primary (serif) menu ---- */
.dm-footer-primary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dm-footer-primary-menu li { margin: 0; padding: 0; }

.dm-footer-primary-menu a {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);  /* heading/h5: IM FELL Double Pica */
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;                  /* 120% */
  color: var(--dm-footer-ink);
}

/* Hand-drawn "pencil sketch" underline that draws in on hover. Two slightly
   offset rough strokes give it the sketched, double-pass pencil texture; the
   ::after is revealed left-to-right with clip-path so the line's shape stays
   fixed (it looks drawn, not stretched). */
.dm-footer-primary-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M2 7.6C28 4.4 54 9.6 84 7 118 4.2 150 9.7 180 6.1 189 5.1 195 6 198 5.3' stroke='%23062E21' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 6.4C29 3.6 55 8.7 85 6.1 119 3.5 151 8.8 181 5.2 190 4.3 196 5.1 199 4.5' stroke='%23062E21' stroke-width='1' stroke-linecap='round' opacity='0.45'/%3E%3C/svg%3E")
    no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

.dm-footer-primary-menu a:hover::after,
.dm-footer-primary-menu a:focus-visible::after,
.dm-footer-primary-menu .current-menu-item > a::after,
.dm-footer-primary-menu .current-menu-ancestor > a::after {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .dm-footer-primary-menu a::after { transition: none; }
}

/* ---- Secondary block: 2-column legal menu + social/badge row ---- */
.dm-footer-secondary-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}

.dm-footer-secondary-menu li {
  break-inside: avoid;
  margin: 0 0 14px;
  padding: 0;
}

.dm-footer-secondary-menu a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-default);  /* body/md/regular: Roboto Condensed */
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;                  /* 140% */
  color: var(--dm-footer-muted);
  transition: color .18s ease;
}

.dm-footer-secondary-menu a:hover { color: var(--dm-footer-ink); }

.dm-footer-privacy-icon {
  display: inline-block;
  width: 30px;
  height: 14px;
  flex: 0 0 auto;
}

/* ---- Social + badge row ---- */
.dm-footer-social-row {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.dm-footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dm-footer-social-link {
  display: inline-flex;
  border-radius: 50%;
  isolation: isolate;
}

/* The icon artwork carries its own white disc. Multiplying it over the
   link's background lets the disc take the hover colour (button-fx.css)
   while the glyph stays dark. */
.dm-footer-social-link img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  mix-blend-mode: multiply;
}

/* "Hecho en México" badge (inline SVG); its eye blinks via footer.js */
.dm-footer-badge {
  display: block;
  width: auto;
  height: 72px;
  max-width: 48px;
  flex: 0 0 auto;
}

.dm-eagle-eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .11s ease;
}

.dm-eagle-eye.is-blink {
  transform: scaleY(0.06);
}

@media (prefers-reduced-motion: reduce) {
  .dm-eagle-eye { transition: none; }
}

/* ---- Copyright / responsibility bar ---- */
.dm-footer-bottom {
  border-top: 1px solid var(--dm-footer-rule);
  padding-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dm-footer-copy,
.dm-footer-legal {
  margin: 0;
  font-family: var(--font-default);  /* body/sm/regular: Roboto Condensed */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;                  /* 140% */
  color: var(--dm-footer-muted);     /* var(--dm-fg-default-secondary) */
}

.dm-footer-legal {
  text-align: right;
}

/* ---------------------------------------------------------------------
   Responsive: show desktop grid vs. mobile stack
   --------------------------------------------------------------------- */
.dm-footer-mobile { display: none; }

@media (max-width: 1023px) {
  .dm-footer-top { display: none; }

  .dm-footer-mobile {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 36px;
  }

  .dm-footer-inner { padding: 8px 20px 24px; }

  /* Primary links stay serif, a touch smaller */
  .dm-footer-mobile .dm-footer-primary-menu { gap: 16px; }

  /* Secondary links become a single column on mobile */
  .dm-footer-secondary-menu { columns: 1; }
  .dm-footer-mobile .dm-footer-secondary-menu li { margin-bottom: 18px; }

  /* Logo + badge row */
  .dm-footer-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  .dm-footer-mobile .dm-footer-logo { max-width: 240px; max-height: 72px; }
  .dm-footer-mobile .dm-footer-badge { height: 64px; }

  /* Stack the copyright lines */
  .dm-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---------------------------------------------------------------------
   Reduced motion — the JS also bails, this hides any residual transition
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dm-footer-waves svg { will-change: auto; transform: none; }
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "Home Page - Small Desktop" > ui-footer02 > footer-container
 * (I1987:16311;3710:10454): px-100 py-40 on #f3ede2, 40px between the menu
 * block, the rule and the legal row.
 *
 * The menu block is 1080 wide and splits into three fixed columns rather than
 * fractions, because the board's gutters are uneven (56 after the logo, 160
 * after the primary links):
 *     logo   0..224   column 280
 *     main 280..453   column 333
 *     links 613..1080 column 467
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
  .dm-footer-inner {
    /* The capped 1080 container already provides Figma's 100px gutter. */
    padding: 40px 0;
  }

  .dm-footer-top {
    grid-template-columns: 280px 333px 467px;
    gap: 0;
    padding-bottom: 40px;
  }

  .dm-footer-logo {
    max-height: 80px;               /* board: 224 x 80 */
  }

  /* Two 221.5 link columns, 24 apart. */
  .dm-footer-secondary-menu {
    column-gap: 24px;
  }

  /* Label to its external-link arrow. */
  .dm-footer-secondary-menu a {
    gap: 6px;
  }

  .dm-footer-social-row {
    margin-top: 64px;               /* board: socials start 64 below the links */
  }
}