/**
 * Brand marks and the footer ground (jobbmat).
 *
 * THE MARK. A dygn drawn as four arcs with the break at midnight. It comes from
 * the site's own availability grid rather than from food iconography — no fork,
 * no cup, no building — and the gap is the point: most solutions leave an hour
 * nobody covers, which is why this site exists. A closed ring would just say
 * "clock".
 *
 * Applied as a CSS mask so it inherits currentColor and stays correct on paper
 * and on the green footer alike. The two-colour version, with the night arc in
 * terracotta, is reserved for the favicon.
 *
 * The inline SVG uses SINGLE quotes on purpose: the data URI sits inside a
 * double-quoted CSS string, and an inner double quote terminates that string
 * early — which silently disabled this mask the first time it shipped.
 */

.dw-wordmark,
.dw-footer__wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.dw-wordmark::before,
.dw-footer__wordmark::before {
  content: "";
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'><path d='M 35.06 10.21 A 22 22 0 0 1 53.79 28.94'/><path d='M 53.79 35.06 A 22 22 0 0 1 35.06 53.79'/><path d='M 28.94 53.79 A 22 22 0 0 1 10.21 35.06'/><path d='M 10.21 28.94 A 22 22 0 0 1 28.94 10.21'/></g></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'><path d='M 35.06 10.21 A 22 22 0 0 1 53.79 28.94'/><path d='M 53.79 35.06 A 22 22 0 0 1 35.06 53.79'/><path d='M 28.94 53.79 A 22 22 0 0 1 10.21 35.06'/><path d='M 10.21 28.94 A 22 22 0 0 1 28.94 10.21'/></g></svg>") center / contain no-repeat;
}

/**
 * THE FOOTER GROUND.
 *
 * The page ends on the trust colour rather than fading out into paper. Green and
 * not terracotta on purpose: brand/identity.md rations the accent to actions, and
 * a footer flooded with it would blunt every CTA above it.
 */

.dw-footer {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  margin-top: var(--dw-section-y);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.dw-footer a {
  color: var(--wp--preset--color--base);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.dw-footer a:hover,
.dw-footer a:focus-visible {
  border-bottom-color: currentColor;
}

.dw-footer a:focus-visible {
  outline: 2px solid var(--wp--preset--color--base);
  outline-offset: 3px;
}

.dw-footer__wordmark {
  color: var(--wp--preset--color--base);
}

/* Secondary text on green. Measured on the live page at 78% alpha it came out at
   3.27:1 — below AA for body text — so it is held at 92%, which measures above
   4.5:1. Dimming the paper colour rather than swapping to the muted token, which
   was mixed for a light ground. */
.dw-footer__note,
.dw-footer__copy,
.dw-footer__head {
  color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
}

.dw-footer__head {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Deepwater sets an oversized ghost wordmark as a watermark. On the green it
   reads as a smudge, so it is dropped to a whisper. */
.dw-footer__ghost {
  color: color-mix(in srgb, var(--wp--preset--color--base) 12%, transparent);
}

/* The sticky mobile CTA sits directly above the footer; keep them from touching. */
@media (max-width: 46rem) {
  .dw-footer {
    padding-bottom: 5.5rem;
  }
}