/*
 * Signature footer treatment: a full-bleed deep-green band closes every
 * page, its top edge torn like a strip of kraft paper -- a nod to the
 * paper bags and price tags used in the shop's bulk ("vrac") aisle. The
 * vendored theming.css otherwise pairs light text (#d4dfca) with a dark
 * background (.diyfeCA4) that never actually renders here, leaving
 * near-white text directly on the page's orange decorative pattern --
 * this file replaces that pairing with one that actually shows up.
 * Enqueued after every other stylesheet (see functions.php) so it wins
 * ties without needing !important.
 */

/* Vendored style.css sets .diyweb { padding-bottom: 30px; margin-bottom: -30px; }
   -- .diyweb has no background of its own, so that trailing padding just
   exposes the page's orange pattern below the green band. Zeroed here
   rather than in the vendored file. */
.diyw .diyweb {
  padding-bottom: 0;
}

.diywebFooter {
  position: relative;
  background-color: #1f2b15;
  margin-top: 48px;
}

/* Deckle edge: a torn-paper silhouette in the band's own color, cut from
   the top so the page's orange pattern shows through the notches.
   The box is 2px taller than the visible peaks need, and that extra
   2px sinks below .diywebFooter's own top edge (top stays -13px while
   height grows to 15px). Peak y-percentages are rescaled (*13/15) so
   apex positions stay put in absolute pixels -- only the trough baseline
   (100%) moves lower, past the seam, so clip-path anti-aliasing there
   lands on the footer's own background instead of leaking the page's
   orange pattern through at some resolutions/DPRs. */
.diywebFooter::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 0;
  right: 0;
  height: 15px;
  background-color: #1f2b15;
  clip-path: polygon(
    0% 100%, 3% 30.3%, 7% 100%, 11% 21.7%, 15% 100%, 19% 34.7%, 23% 100%,
    27% 17.3%, 31% 100%, 35% 39%, 39% 100%, 43% 26%, 47% 100%, 51% 13%,
    55% 100%, 59% 34.7%, 63% 100%, 67% 21.7%, 71% 100%, 75% 30.3%, 79% 100%,
    83% 17.3%, 87% 100%, 91% 39%, 95% 100%, 100% 26%, 100% 100%
  );
}

#contentfooter {
  padding: 26px 20px 30px;
  text-align: center;
}

#contentfooter,
#contentfooter a {
  color: #f4f1e6;
}

/* Vendored web.css sets ".diyw div#contentfooter div.leftrow{float:left;
   width:55%}" -- a two-column ("leftrow"/"rightrow") layout whose other
   half no longer exists in this markup. That rule's selector shape
   (.diyw + id + 2x element+class) out-specifies a plain "#contentfooter
   .leftrow", so neutralizing it permanently -- not just under a mobile
   breakpoint -- requires matching that exact shape here. Flex column is
   the mobile-first base; switched to a row at 768px below. */
.diyw div#contentfooter div.leftrow {
  float: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* One accessible link style at every width -- no separate cramped
   desktop-only variant. Only the surrounding flex direction changes
   between mobile and tablet/desktop, not the tap target size. */
#contentfooter a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 230, 0.32);
  transition: color 0.2s ease, border-color 0.2s ease;
}

#contentfooter a:hover,
#contentfooter a:focus-visible {
  color: #d9b46a;
  border-color: #d9b46a;
}

/* Only meaningful as a horizontal separator between two side-by-side
   links, so hidden in the stacked mobile layout and restored at 768px. */
#contentfooter .footer-separator {
  display: none;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: #d9b46a;
}

#contentfooter .footer-rule {
  width: 46px;
  height: 1px;
  margin: 16px auto 14px;
  background-color: rgba(217, 180, 106, 0.55);
}

#contentfooter .footer-copyright {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
}

#contentfooter .footer-year {
  font-family: Verdana, Geneva, sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-right: 7px;
}

@media (prefers-reduced-motion: reduce) {
  #contentfooter a {
    transition: none;
  }
}

/* 768px matches the breakpoint the vendored mobile nav already switches
   at, so the footer's own layout shift lines up with the rest of the
   site's responsive behavior. */
@media (min-width: 768px) {
  .diyw div#contentfooter div.leftrow {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    column-gap: 20px;
  }

  #contentfooter .footer-separator {
    display: inline-flex;
  }

  /* In row mode .leftrow's children (both links, the separator, the rule,
     the copyright block) are all flex items sharing one wrap context --
     without forcing these two onto a full-width line of their own, a
     flex-wrap row could tuck them beside the links/separator group
     instead of dropping below it. */
  #contentfooter .footer-rule,
  #contentfooter .footer-copyright {
    flex: 0 0 100%;
  }
}